Merge branch 'develop' of github.com:curvefi/curve-frontend into header

apps/loan/package.json

@@ -24,6 +24,7 @@
     "tsconfig": "*"
   },
   "dependencies": {
+    "@curvefi/lending-api": "^2.3.6",
     "@curvefi/stablecoin-api": "^1.5.7",
     "@lingui/detect-locale": "^4.6.0",
     "@lingui/react": "^4.6.0",

apps/loan/src/components/DetailInfoSlippageTolerance.tsx

@@ -9,11 +9,12 @@ import Icon from '@/ui/Icon'
 
 type Props = {
   maxSlippage: string
+  noLabel?: boolean
 }
 
-const DetailInfoSlippageTolerance = ({ maxSlippage }: Props) => {
+const DetailInfoSlippageTolerance = ({ maxSlippage, noLabel }: Props) => {
   return (
-    <StyledDetailInfo label={t`Slippage tolerance:`}>
+    <StyledDetailInfo label={noLabel ? undefined : t`Slippage tolerance:`}>
       <StyledAdvancedSettings
         maxSlippage={maxSlippage}
         buttonIcon={

apps/loan/src/components/PageCrvUsdStaking/DepositWithdraw/DeployButton.tsx

@@ -0,0 +1,91 @@
+import { t } from '@lingui/macro'
+import { useCallback, useMemo } from 'react'
+import BigNumber from 'bignumber.js'
+import styled from 'styled-components'
+
+import useStore from '@/store/useStore'
+
+import Button from '@/ui/Button'
+import React from 'react'
+
+type DeployButtonProps = {
+  className?: string
+}
+
+const DeployButton: React.FC<DeployButtonProps> = ({ className }) => {
+  const onboardInstance = useStore((state) => state.wallet.onboard)
+  const signerAddress = onboardInstance?.state.get().wallets?.[0]?.accounts?.[0]?.address
+  const { approval: depositApproved, fetchStatus: depositFetchStatus } = useStore(
+    (state) => state.scrvusd.depositApproval,
+  )
+  const { depositApprove, deposit, withdraw, redeem } = useStore((state) => state.scrvusd.deploy)
+  const { inputAmount, stakingModule, userBalances, getInputAmountApproved } = useStore((state) => state.scrvusd)
+
+  const userBalance = useMemo(
+    () => userBalances[signerAddress?.toLowerCase() ?? ''] ?? { crvUSD: '0', scrvUSD: '0' },
+    [userBalances, signerAddress],
+  )
+
+  const isInputAmountApproved = getInputAmountApproved()
+
+  const buttonTitle = useMemo(() => {
+    if (
+      (stakingModule === 'deposit' && isInputAmountApproved) ||
+      (stakingModule === 'deposit' && inputAmount === '0')
+    ) {
+      return t`Deposit`
+    }
+    if (stakingModule === 'deposit' && !depositApproved) {
+      return t`Approve & Deposit`
+    }
+    if (stakingModule === 'withdraw') {
+      return t`Withdraw`
+    }
+  }, [stakingModule, isInputAmountApproved, inputAmount, depositApproved])
+
+  const approvalLoading = depositFetchStatus === 'loading'
+  const isError =
+    stakingModule === 'deposit'
+      ? BigNumber(inputAmount).gt(BigNumber(userBalance.crvUSD))
+      : BigNumber(inputAmount).gt(BigNumber(userBalance.scrvUSD))
+
+  const handleClick = useCallback(async () => {
+    if (stakingModule === 'deposit') {
+      if (isInputAmountApproved) {
+        deposit(inputAmount)
+      }
+      if (!isInputAmountApproved) {
+        const approved = await depositApprove(inputAmount)
+        if (approved) {
+          deposit(inputAmount)
+        }
+      }
+    }
+
+    if (stakingModule === 'withdraw') {
+      if (inputAmount === userBalance.scrvUSD) {
+        redeem(inputAmount)
+      } else {
+        withdraw(inputAmount)
+      }
+    }
+  }, [stakingModule, isInputAmountApproved, deposit, inputAmount, depositApprove, withdraw, redeem, userBalance])
+
+  return (
+    <StyledButton
+      variant="filled"
+      loading={approvalLoading}
+      className={className}
+      disabled={isError || inputAmount === '0'}
+      onClick={handleClick}
+    >
+      {buttonTitle}
+    </StyledButton>
+  )
+}
+
+const StyledButton = styled(Button)`
+  height: 2.5rem;
+`
+
+export default DeployButton

apps/loan/src/components/PageCrvUsdStaking/DepositWithdraw/DepositModule.tsx

@@ -0,0 +1,83 @@
+import { t } from '@lingui/macro'
+import Image from 'next/image'
+import BigNumber from 'bignumber.js'
+
+import useStore from '@/store/useStore'
+import { isLoading } from '@/components/PageCrvUsdStaking/utils'
+
+import { RCCrvUSDLogoXS, RCScrvUSDLogoXS } from 'ui/src/images'
+
+import Box from '@/ui/Box'
+import {
+  InputLabel,
+  InputWrapper,
+  SelectorBox,
+  StyledIcon,
+  StyledInputComp,
+  InputSelectorText,
+  ErrorText,
+} from './styles'
+
+const DepositModule = () => {
+  const onboardInstance = useStore((state) => state.wallet.onboard)
+  const signerAddress = onboardInstance?.state.get().wallets?.[0]?.accounts?.[0]?.address
+  const userBalances = useStore((state) => state.scrvusd.userBalances[signerAddress?.toLowerCase() ?? ''])
+  const { inputAmount, preview, setInputAmount, setMax } = useStore((state) => state.scrvusd)
+
+  const isLoadingBalances = !userBalances || isLoading(userBalances.fetchStatus)
+  const isLoadingPreview = isLoading(preview.fetchStatus)
+
+  const validationError = userBalances?.crvUSD ? BigNumber(inputAmount).gt(BigNumber(userBalances.crvUSD)) : false
+
+  return (
+    <Box flex flexColumn>
+      <Box flex flexColumn>
+        <InputLabel>{t`From Wallet`}</InputLabel>
+        <InputWrapper>
+          <Box flex>
+            <SelectorBox>
+              <Image height={28} src={RCCrvUSDLogoXS} alt="Token Logo" />
+              <InputSelectorText>crvUSD</InputSelectorText>
+            </SelectorBox>
+          </Box>
+          <StyledInputComp
+            walletBalance={userBalances?.crvUSD ?? '0'}
+            walletBalanceUSD={userBalances?.crvUSD ?? '0'}
+            walletBalanceSymbol="crvUSD"
+            value={inputAmount}
+            isLoadingBalances={isLoadingBalances}
+            isLoadingInput={false}
+            setValue={setInputAmount}
+            setMax={() => setMax(signerAddress?.toLowerCase() ?? '', 'deposit')}
+          />
+        </InputWrapper>
+      </Box>
+      {validationError && (
+        <ErrorText>{t`Input amount exceeds your balance, click max to use all your balance`}</ErrorText>
+      )}
+      <StyledIcon name="ArrowDown" size={16} />
+      <div>
+        <InputLabel>{t`To Vault`}</InputLabel>
+        <InputWrapper>
+          <Box flex>
+            <SelectorBox>
+              <Image height={28} src={RCScrvUSDLogoXS} alt="scrvUSD logo" />
+              <InputSelectorText>scrvUSD</InputSelectorText>
+            </SelectorBox>
+          </Box>
+          <StyledInputComp
+            walletBalance={userBalances?.scrvUSD ?? '0'}
+            walletBalanceUSD={userBalances?.scrvUSD ?? '0'}
+            walletBalanceSymbol="scrvUSD"
+            value={preview.value}
+            readOnly
+            isLoadingInput={isLoadingPreview}
+            isLoadingBalances={isLoadingBalances}
+          />
+        </InputWrapper>
+      </div>
+    </Box>
+  )
+}
+
+export default DepositModule

apps/loan/src/components/PageCrvUsdStaking/DepositWithdraw/WithdrawModule.tsx

@@ -0,0 +1,83 @@
+import { t } from '@lingui/macro'
+import Image from 'next/image'
+import BigNumber from 'bignumber.js'
+
+import useStore from '@/store/useStore'
+import { isLoading } from '@/components/PageCrvUsdStaking/utils'
+
+import { RCCrvUSDLogoXS, RCScrvUSDLogoXS } from 'ui/src/images'
+
+import Box from '@/ui/Box'
+import {
+  InputLabel,
+  InputWrapper,
+  SelectorBox,
+  StyledIcon,
+  StyledInputComp,
+  InputSelectorText,
+  ErrorText,
+} from './styles'
+
+const WithdrawModule: React.FC = () => {
+  const onboardInstance = useStore((state) => state.wallet.onboard)
+  const signerAddress = onboardInstance?.state.get().wallets?.[0]?.accounts?.[0]?.address
+  const userBalances = useStore((state) => state.scrvusd.userBalances[signerAddress?.toLowerCase() ?? ''])
+  const { inputAmount, preview, setInputAmount, setMax } = useStore((state) => state.scrvusd)
+
+  const isLoadingBalances = !userBalances || isLoading(userBalances.fetchStatus)
+  const isLoadingPreview = isLoading(preview.fetchStatus)
+
+  const validationError = userBalances?.scrvUSD ? BigNumber(inputAmount).gt(BigNumber(userBalances.scrvUSD)) : false
+
+  return (
+    <Box flex flexColumn>
+      <Box flex flexColumn>
+        <InputLabel>{t`From Vault`}</InputLabel>
+        <InputWrapper>
+          <Box flex>
+            <SelectorBox>
+              <Image height={28} src={RCScrvUSDLogoXS} alt="scrvUSD logo" />
+              <InputSelectorText>scrvUSD</InputSelectorText>
+            </SelectorBox>
+          </Box>
+          <StyledInputComp
+            value={inputAmount}
+            walletBalance={userBalances?.scrvUSD ?? '0'}
+            walletBalanceUSD={userBalances?.scrvUSD ?? '0'}
+            walletBalanceSymbol="scrvUSD"
+            isLoadingBalances={isLoadingBalances}
+            isLoadingInput={false}
+            setValue={setInputAmount}
+            setMax={() => setMax(signerAddress?.toLowerCase() ?? '', 'withdraw')}
+          />
+        </InputWrapper>
+      </Box>
+      {validationError && (
+        <ErrorText>{t`Input amount exceeds your balance, click max to use all your balance`}</ErrorText>
+      )}
+      <StyledIcon name="ArrowDown" size={16} />
+      <div>
+        <InputLabel>{t`To Wallet`}</InputLabel>
+        <InputWrapper>
+          <Box flex>
+            <SelectorBox>
+              <Image height={28} src={RCCrvUSDLogoXS} alt="Token Logo" />
+              <InputSelectorText>crvUSD</InputSelectorText>
+            </SelectorBox>
+          </Box>
+          <StyledInputComp
+            value={preview.value}
+            walletBalance={userBalances?.crvUSD ?? '0'}
+            walletBalanceUSD={userBalances?.crvUSD ?? '0'}
+            walletBalanceSymbol="crvUSD"
+            isLoadingBalances={isLoadingBalances}
+            isLoadingInput={isLoadingPreview}
+            readOnly
+          />
+        </InputWrapper>
+      </div>
+    </Box>
+  )
+}
+
+export default WithdrawModule

apps/loan/src/components/PageCrvUsdStaking/DepositWithdraw/constants.ts

@@ -0,0 +1,6 @@
+import { SubNavItem } from '@/components/PageCrvUsdStaking/components/SubNav/types'
+
+export const SUB_NAV_ITEMS: SubNavItem[] = [
+  { key: 'deposit', label: 'Deposit' },
+  { key: 'withdraw', label: 'Withdraw' },
+]