Refactored deposit button components

GenerationSoftware · Oct 26, 2023 · 95e6058 · 95e6058
1 parent f24d198
commit 95e6058
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 98 deletions.
diff --git a/apps/app/messages/en.json b/apps/app/messages/en.json
@@ -156,6 +156,7 @@
     "max": "Max",
     "balance": "Balance:",
     "enterAnAmount": "Enter an amount",
+    "approvalButton": "Approve {symbol}",
     "exactApprovalButton": "Approve exact amount of {symbol}",
     "exactApprovalTx": "Exact {symbol} Approval",
     "infiniteApprovalButton": "Approve unlimited amount of {symbol}",

diff --git a/shared/react-components/components/Modals/DepositModal/DepositTxButton.tsx b/shared/react-components/components/Modals/DepositModal/DepositTxButton.tsx
@@ -9,10 +9,10 @@ import {
   useVaultTokenData
 } from '@generationsoftware/hyperstructure-react-hooks'
 import { Intl } from '@shared/types'
-import { Button, Spinner } from '@shared/ui'
-import { MAX_UINT_256 } from '@shared/utilities'
+import { Button } from '@shared/ui'
+import { MAX_UINT_256, NETWORK, WRAPPED_NATIVE_ASSETS } from '@shared/utilities'
 import { useAtomValue } from 'jotai'
-import { useEffect } from 'react'
+import { ReactNode, useEffect } from 'react'
 import { Address, parseUnits } from 'viem'
 import { useAccount, useNetwork } from 'wagmi'
 import { DepositModalView } from '.'
@@ -34,6 +34,7 @@ interface DepositTxButtonProps {
   intl?: {
     base?: Intl<
       | 'enterAnAmount'
+      | 'approvalButton'
       | 'exactApprovalButton'
       | 'exactApprovalTx'
       | 'infiniteApprovalButton'
@@ -173,89 +174,123 @@ export const DepositTxButton = (props: DepositTxButtonProps) => {
     allowance >= depositAmount &&
     isValidFormTokenAmount
 
+  // No deposit amount set
   if (depositAmount === 0n) {
     return (
       <Button color='transparent' fullSized={true} disabled={true}>
         {intl?.base?.('enterAnAmount') ?? 'Enter an amount'}
       </Button>
     )
-  } else if (isDataFetched && allowance < depositAmount) {
+  }
+
+  const ExactApprovalButton = (props: { children: ReactNode }) => (
+    <TransactionButton
+      chainId={vault.chainId}
+      isTxLoading={isWaitingExactApproval || isConfirmingExactApproval}
+      isTxSuccess={isSuccessfulExactApproval}
+      write={sendExactApproveTransaction}
+      txHash={exactApprovalTxHash}
+      txDescription={
+        intl?.base?.('exactApprovalTx', { symbol: tokenData?.symbol ?? '?' }) ??
+        `Exact ${tokenData?.symbol ?? '?'} Approval`
+      }
+      fullSized={true}
+      disabled={!approvalEnabled}
+      openConnectModal={openConnectModal}
+      openChainModal={openChainModal}
+      addRecentTransaction={addRecentTransaction}
+      innerClassName='flex gap-2 items-center'
+      intl={intl}
+    >
+      {props.children}
+    </TransactionButton>
+  )
+
+  const InfiniteApprovalButton = (props: { children: ReactNode }) => (
+    <TransactionButton
+      chainId={vault.chainId}
+      isTxLoading={isWaitingInfiniteApproval || isConfirmingInfiniteApproval}
+      isTxSuccess={isSuccessfulInfiniteApproval}
+      write={sendInfiniteApproveTransaction}
+      txHash={infiniteApprovalTxHash}
+      txDescription={
+        intl?.base?.('infiniteApprovalTx', { symbol: tokenData?.symbol ?? '?' }) ??
+        `Infinite ${tokenData?.symbol ?? '?'} Approval`
+      }
+      fullSized={true}
+      disabled={!approvalEnabled}
+      openConnectModal={openConnectModal}
+      openChainModal={openChainModal}
+      addRecentTransaction={addRecentTransaction}
+      color='transparent'
+      innerClassName='flex gap-2 items-center'
+      intl={intl}
+    >
+      {props.children}
+    </TransactionButton>
+  )
+
+  // Needs approval for wrapped native asset
+  if (
+    isDataFetched &&
+    tokenData.address.toLowerCase() === WRAPPED_NATIVE_ASSETS[tokenData.chainId as NETWORK] &&
+    (allowance < depositAmount || allowance > MAX_UINT_256 / 2n)
+  ) {
+    return (
+      <ExactApprovalButton>
+        {intl?.base?.('approvalButton', { symbol: tokenData.symbol }) ??
+          `Approve ${tokenData.symbol}`}
+      </ExactApprovalButton>
+    )
+  }
+
+  // Needs approval
+  if (isDataFetched && allowance < depositAmount) {
     return (
       <div className='flex flex-col w-full gap-4 md:gap-6'>
-        <TransactionButton
-          chainId={vault.chainId}
-          isTxLoading={isWaitingExactApproval || isConfirmingExactApproval}
-          isTxSuccess={isSuccessfulExactApproval}
-          write={sendExactApproveTransaction}
-          txHash={exactApprovalTxHash}
-          txDescription={
-            intl?.base?.('exactApprovalTx', { symbol: tokenData?.symbol ?? '?' }) ??
-            `Exact ${tokenData?.symbol} Approval`
-          }
-          fullSized={true}
-          disabled={!approvalEnabled}
-          openConnectModal={openConnectModal}
-          openChainModal={openChainModal}
-          addRecentTransaction={addRecentTransaction}
-          innerClassName='flex gap-2 items-center'
-          intl={intl}
-        >
-          {intl?.base?.('exactApprovalButton', { symbol: tokenData?.symbol ?? '?' }) ??
-            `Approve exact amount of ${tokenData?.symbol ?? <Spinner />}`}
-          <ExactApprovalTooltip tokenSymbol={tokenData?.symbol ?? '?'} intl={intl?.tooltips} />
-        </TransactionButton>
-        <TransactionButton
-          chainId={vault.chainId}
-          isTxLoading={isWaitingInfiniteApproval || isConfirmingInfiniteApproval}
-          isTxSuccess={isSuccessfulInfiniteApproval}
-          write={sendInfiniteApproveTransaction}
-          txHash={infiniteApprovalTxHash}
-          txDescription={
-            intl?.base?.('infiniteApprovalTx', { symbol: tokenData?.symbol ?? '?' }) ??
-            `Infinite ${tokenData?.symbol} Approval`
-          }
-          fullSized={true}
-          disabled={!approvalEnabled}
-          openConnectModal={openConnectModal}
-          openChainModal={openChainModal}
-          addRecentTransaction={addRecentTransaction}
-          color='transparent'
-          innerClassName='flex gap-2 items-center'
-          intl={intl}
-        >
-          {intl?.base?.('infiniteApprovalButton', { symbol: tokenData?.symbol ?? '?' }) ??
-            `Approve unlimited amount of ${tokenData?.symbol ?? <Spinner />}`}
-          <InfiniteApprovalTooltip tokenSymbol={tokenData?.symbol ?? '?'} intl={intl?.tooltips} />
-        </TransactionButton>
+        <ExactApprovalButton>
+          {intl?.base?.('exactApprovalButton', { symbol: tokenData.symbol }) ??
+            `Approve exact amount of ${tokenData.symbol}`}
+          <ExactApprovalTooltip tokenSymbol={tokenData.symbol} intl={intl?.tooltips} />
+        </ExactApprovalButton>
+        <InfiniteApprovalButton>
+          {intl?.base?.('infiniteApprovalButton', { symbol: tokenData.symbol }) ??
+            `Approve unlimited amount of ${tokenData.symbol}`}
+          <InfiniteApprovalTooltip tokenSymbol={tokenData.symbol} intl={intl?.tooltips} />
+        </InfiniteApprovalButton>
       </div>
     )
-  } else if (isDataFetched && modalView === 'main') {
+  }
+
+  // Prompt to review deposit
+  if (isDataFetched && modalView === 'main') {
     return (
       <Button onClick={() => setModalView('review')} fullSized={true} disabled={!depositEnabled}>
         {intl?.base?.('reviewDeposit') ?? 'Review Deposit'}
       </Button>
     )
-  } else {
-    return (
-      <TransactionButton
-        chainId={vault.chainId}
-        isTxLoading={isWaitingDeposit || isConfirmingDeposit}
-        isTxSuccess={isSuccessfulDeposit}
-        write={sendDepositTransaction}
-        txHash={depositTxHash}
-        txDescription={
-          intl?.base?.('depositTx', { symbol: tokenData?.symbol ?? '?' }) ??
-          `${tokenData?.symbol} Deposit`
-        }
-        fullSized={true}
-        disabled={!depositEnabled}
-        openConnectModal={openConnectModal}
-        openChainModal={openChainModal}
-        addRecentTransaction={addRecentTransaction}
-        intl={intl}
-      >
-        {intl?.base?.('confirmDeposit') ?? 'Confirm Deposit'}
-      </TransactionButton>
-    )
   }
+
+  // Deposit button
+  return (
+    <TransactionButton
+      chainId={vault.chainId}
+      isTxLoading={isWaitingDeposit || isConfirmingDeposit}
+      isTxSuccess={isSuccessfulDeposit}
+      write={sendDepositTransaction}
+      txHash={depositTxHash}
+      txDescription={
+        intl?.base?.('depositTx', { symbol: tokenData?.symbol ?? '?' }) ??
+        `${tokenData?.symbol} Deposit`
+      }
+      fullSized={true}
+      disabled={!depositEnabled}
+      openConnectModal={openConnectModal}
+      openChainModal={openChainModal}
+      addRecentTransaction={addRecentTransaction}
+      intl={intl}
+    >
+      {intl?.base?.('confirmDeposit') ?? 'Confirm Deposit'}
+    </TransactionButton>
+  )
 }
diff --git a/shared/react-components/components/Modals/DepositModal/DepositWithPermitTxButton.tsx b/shared/react-components/components/Modals/DepositModal/DepositWithPermitTxButton.tsx
@@ -206,19 +206,26 @@ export const DepositWithPermitTxButton = (props: DepositWithPermitTxButtonProps)
   const depositEnabled =
     isDataFetched && userBalance.amount >= depositAmount && isValidFormTokenAmount
 
+  // No deposit amount set
   if (depositAmount === 0n) {
     return (
       <Button color='transparent' fullSized={true} disabled={true}>
         {intl?.base?.('enterAnAmount') ?? 'Enter an amount'}
       </Button>
     )
-  } else if (isDataFetched && modalView === 'main') {
+  }
+
+  // Prompt to review deposit
+  if (isDataFetched && modalView === 'main') {
     return (
       <Button onClick={() => setModalView('review')} fullSized={true} disabled={!depositEnabled}>
         {intl?.base?.('reviewDeposit') ?? 'Review Deposit'}
       </Button>
     )
-  } else if (isDataFetched && allowance >= depositAmount) {
+  }
+
+  // Deposit button
+  if (isDataFetched && allowance >= depositAmount) {
     return (
       <TransactionButton
         chainId={vault.chainId}
@@ -240,29 +247,28 @@ export const DepositWithPermitTxButton = (props: DepositWithPermitTxButtonProps)
         {intl?.base?.('confirmDeposit') ?? 'Confirm Deposit'}
       </TransactionButton>
     )
-  } else {
-    return (
-      <TransactionButton
-        chainId={vault.chainId}
-        isTxLoading={
-          isWaitingApproval || isWaitingDepositWithPermit || isConfirmingDepositWithPermit
-        }
-        isTxSuccess={isSuccessfulDepositWithPermit}
-        write={isApproved ? sendDepositWithPermitTransaction : signApprove}
-        txHash={depositWithPermitTxHash}
-        txDescription={
-          intl?.base?.('depositTx', { symbol: tokenData?.symbol ?? '?' }) ??
-          `${tokenData?.symbol} Deposit`
-        }
-        fullSized={true}
-        disabled={!depositEnabled}
-        openConnectModal={openConnectModal}
-        openChainModal={openChainModal}
-        addRecentTransaction={addRecentTransaction}
-        intl={intl}
-      >
-        {intl?.base?.('confirmDeposit') ?? 'Confirm Deposit'}
-      </TransactionButton>
-    )
   }
+
+  // Sign + deposit with permit button
+  return (
+    <TransactionButton
+      chainId={vault.chainId}
+      isTxLoading={isWaitingApproval || isWaitingDepositWithPermit || isConfirmingDepositWithPermit}
+      isTxSuccess={isSuccessfulDepositWithPermit}
+      write={isApproved ? sendDepositWithPermitTransaction : signApprove}
+      txHash={depositWithPermitTxHash}
+      txDescription={
+        intl?.base?.('depositTx', { symbol: tokenData?.symbol ?? '?' }) ??
+        `${tokenData?.symbol} Deposit`
+      }
+      fullSized={true}
+      disabled={!depositEnabled}
+      openConnectModal={openConnectModal}
+      openChainModal={openChainModal}
+      addRecentTransaction={addRecentTransaction}
+      intl={intl}
+    >
+      {intl?.base?.('confirmDeposit') ?? 'Confirm Deposit'}
+    </TransactionButton>
+  )
 }
diff --git a/shared/react-components/components/Modals/DepositModal/index.tsx b/shared/react-components/components/Modals/DepositModal/index.tsx
@@ -43,6 +43,7 @@ export interface DepositModalProps {
       | 'max'
       | 'balance'
       | 'enterAnAmount'
+      | 'approvalButton'
       | 'exactApprovalButton'
       | 'exactApprovalTx'
       | 'infiniteApprovalButton'

diff --git a/shared/utilities/constants.ts b/shared/utilities/constants.ts
@@ -203,6 +203,30 @@ export const STABLECOINS: Record<NETWORK, { [address: Address]: string }> = {
   [NETWORK['arbitrum-goerli']]: {}
 }
 
+/**
+ * Wrapped native asset addresses (example: WETH, WMATIC, etc.)
+ *
+ * NOTE: All addresses are lowercase
+ */
+export const WRAPPED_NATIVE_ASSETS: Record<NETWORK, Address | null> = {
+  [NETWORK.mainnet]: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+  [NETWORK.goerli]: null,
+  [NETWORK.sepolia]: null,
+  [NETWORK.bsc]: '0xbb4cdb9cbd36b01bd1cbaebf2de08d9173bc095c',
+  [NETWORK['bsc-testnet']]: null,
+  [NETWORK.xdai]: null,
+  [NETWORK.polygon]: '0x0d500b1d8e8ef31e21c99d1db9a6444d3adf1270',
+  [NETWORK.mumbai]: null,
+  [NETWORK.optimism]: '0x4200000000000000000000000000000000000006',
+  [NETWORK['optimism-goerli']]: null,
+  [NETWORK.avalanche]: '0xb31f66aa3c1e785363f0875a1b74e27b85fd66c7',
+  [NETWORK.fuji]: null,
+  [NETWORK.celo]: null,
+  [NETWORK['celo-testnet']]: null,
+  [NETWORK.arbitrum]: '0x82af49447d8a07e3bd95bd0d56f35241523fbab1',
+  [NETWORK['arbitrum-goerli']]: null
+}
+
 /**
  * RNG auction addresses
  */