refactor: pool's Deposit, Withdraw and Swap forms

apps/main/lingui.config.js

@@ -8,7 +8,7 @@ module.exports = {
   catalogs: [
     {
       path: 'src/locales/{locale}/messages',
-      include: ['src/components', 'src/hooks', 'src/layout', 'src/pages', 'src/store'],
+      include: ['src/components', 'src/hooks', 'src/layout', 'src/pages', 'src/store', 'src/entities', 'src/features'],
     },
   ],
   format: 'po',

apps/main/src/components/AlertFormError.tsx

@@ -12,27 +12,15 @@ const ALERT_FORM_ERROR_KEYS = {
   'error-invalid-provider': 'error-invalid-provider',
   'error-pool-list': 'error-pool-list',
   'error-step-approve': 'error-step-approve',
-  'error-step-deposit': 'error-step-deposit',
-  'error-step-swap': 'error-step-swap',
-  'error-step-stake': 'error-step-stake',
-  'error-step-withdraw': 'error-step-withdraw',
-  'error-step-unstake': 'error-step-unstake',
   'error-swap-exchange-and-output': 'error-swap-exchange-and-output',
   'error-swap-not-available': 'error-swap-not-available',
-  'error-deposit-bonus': 'error-deposit-bonus',
-  'error-deposit-balance': 'error-deposit-balance',
-  'error-deposit-withdraw-expected': 'error-deposit-withdraw-expected',
-  'error-deposit-withdraw-expected-bonus': 'error-deposit-withdraw-expected-bonus',
   'error-step-claim': 'error-step-claim',
   'error-get-claimable': 'error-get-claimable',
   'error-get-dashboard-data': 'error-get-dashboard-data',
   'error-get-gas': 'error-get-gas',
   'error-get-locked-crv-info': 'error-get-locked-crv-info',
-  'error-step-claim-fees': 'error-step-claim-fees',
-  'error-step-create-locked-crv': 'error-step-create-locked-crv',
-  'error-step-locked-time': 'error-step-locked-time',
-  'error-step-locked-crv': 'error-step-locked-crv',
   'error-withdraw-locked-crv': 'error-withdraw-locked-crv',
+  'too-much-reserves': 'too-much-reserves',
 } as const
 
 export type AlertFormErrorKey = keyof typeof ALERT_FORM_ERROR_KEYS
@@ -49,60 +37,39 @@ const AlertFormError = ({ errorKey, ...props }: React.PropsWithChildren<Props>)
       // quick swap and pool swap
       [ALERT_FORM_ERROR_KEYS['error-swap-not-available']]: t`Swap is not available.`,
       [ALERT_FORM_ERROR_KEYS['error-swap-exchange-and-output']]: t`Unable to get exchange rates and swap amount`,
-      [ALERT_FORM_ERROR_KEYS['error-step-swap']]: t`Unable to swap`,
+      [ALERT_FORM_ERROR_KEYS['too-much-reserves']]: t`The entered amount exceeds the available currency reserves.`,
 
       // all
       [ALERT_FORM_ERROR_KEYS['error-user-rejected-action']]: t`User rejected action`,
       [ALERT_FORM_ERROR_KEYS['error-est-gas-approval']]: t`Unable to get approval or estimated gas`,
       [ALERT_FORM_ERROR_KEYS['error-invalid-provider']]: t`Unable to find provider`,
       [ALERT_FORM_ERROR_KEYS['error-step-approve']]: t`Unable to approve spending`,
-      [ALERT_FORM_ERROR_KEYS['error-deposit-withdraw-expected']]: t`Unable to get expected`,
-      [ALERT_FORM_ERROR_KEYS['error-deposit-withdraw-expected-bonus']]: t`Unable to get bonus or expected`,
       [ALERT_FORM_ERROR_KEYS['error-pool-list']]: t`Unable to get pool list`,
       [ALERT_FORM_ERROR_KEYS['error-get-dashboard-data']]: t`Unable to get dashboard data`,
       [ALERT_FORM_ERROR_KEYS['error-get-gas']]: t`Unable to get gas price`,
 
-      //  deposit
-      [ALERT_FORM_ERROR_KEYS['error-step-deposit']]: t`Unable to deposit`,
-      [ALERT_FORM_ERROR_KEYS['error-deposit-bonus']]: t`Unable to get bonus`,
-      [ALERT_FORM_ERROR_KEYS['error-step-stake']]: t`Unable to stake`,
-      [ALERT_FORM_ERROR_KEYS['error-deposit-balance']]: t`Unable to get balanced amounts`,
-
       //   withdraw
       [ALERT_FORM_ERROR_KEYS['error-get-claimable']]: t`Unable to get claimable amounts`,
-      [ALERT_FORM_ERROR_KEYS['error-step-withdraw']]: t`Unable to withdraw`,
-      [ALERT_FORM_ERROR_KEYS['error-step-unstake']]: t`Unable to unstake`,
       [ALERT_FORM_ERROR_KEYS['error-step-claim']]: t`Unable to claim`,
 
-      //   claim fees
-      [ALERT_FORM_ERROR_KEYS['error-step-claim-fees']]: t`Unable to claim veCRV 3pool LP`,
-
       // locked crv
       [ALERT_FORM_ERROR_KEYS['error-get-locked-crv-info']]: t`Unable to get locked CRV info`,
-      [ALERT_FORM_ERROR_KEYS['error-step-create-locked-crv']]: t`Unable to create locked CRV`,
-      [ALERT_FORM_ERROR_KEYS['error-step-locked-crv']]: t`Unable to lock crv`,
-      [ALERT_FORM_ERROR_KEYS['error-step-locked-time']]: t`Unable to lock date`,
       [ALERT_FORM_ERROR_KEYS['error-withdraw-locked-crv']]: t`Unable to withdraw locked CRV`,
     }
 
-    if (errorKey) {
-      return messages[errorKey] ?? errorKey
-    } else {
-      return ''
-    }
+    return errorKey ? messages[errorKey] ?? errorKey : ''
   }, [errorKey])
 
-  return errorMessage ? (
-    <StyledAlertBox {...props} alertType="error">
+  if (!errorMessage) return null
+
+  return (
+    <StyledAlertBox limitHeight {...props} alertType="error">
       {errorMessage}
     </StyledAlertBox>
-  ) : null
+  )
 }
 
 const StyledAlertBox = styled(AlertBox)`
-  max-height: 300px;
-  overflow-y: auto;
-
   [data-tag='content'] {
     align-items: flex-start;
   }

apps/main/src/components/PagePool/Claim/components/AlertRewardsNeedNudging.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Trans } from '@lingui/macro'
+
+import AlertBox from '@/ui/AlertBox'
+
+const AlertRewardsNeedNudging: React.FC = () => {
+  return (
+    <AlertBox alertType="info">
+      <Trans>
+        This pool has CRV rewards that aren&rsquo;t streaming yet. Click &lsquo;Claim or Nudge CRV&rsquo; to resume
+        reward streaming for you and everyone else!
+      </Trans>
+    </AlertBox>
+  )
+}
+
+export default AlertRewardsNeedNudging

apps/main/src/components/PagePool/Claim/components/BtnClaim.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { t } from '@lingui/macro'
+
+import Button from '@/ui/Button'
+
+const BtnClaim: React.FC = () => {
+  return (
+    <Button disabled variant="filled" size="large">
+      {t`Claim`}
+    </Button>
+  )
+}
+
+export default BtnClaim

apps/main/src/components/PagePool/Claim/components/BtnClaimCrv.tsx

@@ -0,0 +1,46 @@
+import type { ClaimableDetailsResp } from '@/entities/withdraw'
+
+import React from 'react'
+import { t } from '@lingui/macro'
+
+import { getClaimText } from '@/components/PagePool/Withdraw/utils'
+
+import Button from '@/ui/Button'
+
+type Props = {
+  claimableCrv: string
+  claimableRewards: ClaimableDetailsResp['claimableRewards']
+  isDisabled: boolean
+  isPending: boolean
+  isSuccess: boolean
+  rewardsNeedNudgingAndHaveGauge: boolean | undefined
+  handleClaimClick: () => void
+}
+
+const BtnClaimCrv: React.FC<Props> = ({
+  claimableCrv,
+  claimableRewards,
+  isDisabled,
+  isPending,
+  isSuccess,
+  rewardsNeedNudgingAndHaveGauge,
+  handleClaimClick,
+}) => {
+  const haveClaimableCrvBtn = Number(claimableCrv) > 0 || !!rewardsNeedNudgingAndHaveGauge
+
+  return (
+    <Button
+      disabled={!haveClaimableCrvBtn || isDisabled || isSuccess}
+      loading={isPending}
+      variant="filled"
+      size="large"
+      onClick={handleClaimClick}
+    >
+      {isSuccess
+        ? t`Claimed`
+        : getClaimText(claimableCrv, claimableRewards, 'CLAIM_CRV', 'claimCrvButton', rewardsNeedNudgingAndHaveGauge)}
+    </Button>
+  )
+}
+
+export default BtnClaimCrv

apps/main/src/components/PagePool/Claim/components/BtnClaimRewards.tsx

@@ -0,0 +1,32 @@
+import type { ClaimableDetailsResp } from '@/entities/withdraw'
+
+import React from 'react'
+import { t } from '@lingui/macro'
+
+import Button from '@/ui/Button'
+
+type Props = {
+  claimableRewards: ClaimableDetailsResp['claimableRewards']
+  isDisabled: boolean
+  isPending: boolean
+  isSuccess: boolean
+  handleClaimClick: () => void
+}
+
+const BtnClaimRewards: React.FC<Props> = ({ claimableRewards, isDisabled, isPending, isSuccess, handleClaimClick }) => {
+  const haveClaimableRewardsBtn = claimableRewards.length > 0 || isSuccess
+
+  return (
+    <Button
+      disabled={!haveClaimableRewardsBtn || isDisabled || isSuccess}
+      loading={isPending}
+      variant="filled"
+      size="large"
+      onClick={handleClaimClick}
+    >
+      {isSuccess ? t`Claimed` : t`Claim Rewards`}
+    </Button>
+  )
+}
+
+export default BtnClaimRewards

apps/main/src/components/PagePool/Claim/components/DetailsClaimableCrv.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { formatNumber } from '@/ui/utils'
+import { useClaimContext } from '@/components/PagePool/Claim/contextClaim'
+
+import Stats from '@/ui/Stats'
+
+export const DetailsClaimableCrv = () => {
+  const { claimableCrv, haveClaimableCrv, haveClaimableRewards } = useClaimContext()
+
+  return (
+    <>
+      {haveClaimableCrv && (
+        <Stats isOneLine isBorderBottom={haveClaimableRewards} label="CRV">
+          {formatNumber(claimableCrv)}
+        </Stats>
+      )}
+    </>
+  )
+}
+
+export default DetailsClaimableCrv

apps/main/src/components/PagePool/Claim/components/DetailsClaimableRewards.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { formatNumber } from '@/ui/utils'
+import { useClaimContext } from '@/components/PagePool/Claim/contextClaim'
+
+import Stats from '@/ui/Stats'
+
+const DetailsClaimableRewards: React.FC = () => {
+  const { claimableRewards } = useClaimContext()
+
+  return (
+    <>
+      {claimableRewards.map(({ token, symbol, amount }, idx) => {
+        const showBottomBorder = idx !== claimableRewards.length - 1
+        return (
+          <Stats isOneLine isBorderBottom={showBottomBorder} key={token} label={symbol}>
+            {formatNumber(amount)}
+          </Stats>
+        )
+      })}
+    </>
+  )
+}
+
+export default DetailsClaimableRewards

apps/main/src/components/PagePool/Claim/contextClaim.ts

@@ -0,0 +1,26 @@
+import type { ClaimType, ClaimableDetailsResp } from '@/entities/withdraw'
+
+import React, { createContext, useContext } from 'react'
+
+type ClaimContextType = Pick<ClaimableDetailsResp, 'claimableCrv' | 'claimableRewards'> & {
+  claimType: ClaimType
+  haveClaimableCrv: boolean
+  haveClaimableRewards: boolean
+  haveClaimables: boolean
+  isDisabled: boolean
+  isLoading: boolean
+  setClaimType: React.Dispatch<React.SetStateAction<ClaimType>>
+}
+
+export const ClaimContext = createContext<ClaimContextType | null>(null)
+export const ClaimContextProvider = ClaimContext.Provider
+
+export const useClaimContext = () => {
+  const claimContext = useContext(ClaimContext)
+
+  if (!claimContext) {
+    throw new Error('useFormWithdraw has to be used within <ClaimContext.Provider>')
+  }
+
+  return claimContext
+}