feat: adjust approval flow

KyberNetwork · Apr 25, 2024 · 46b122c · 46b122c
1 parent 3363ee0
commit 46b122c
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 102 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,3 +1,4 @@
+import { Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import { t } from '@lingui/macro'
 import { darken, rgba } from 'polished'
 import React, { ReactNode, useRef } from 'react'
@@ -366,7 +367,7 @@ export const ButtonApprove = ({
   tooltipMsg: string
   tokenSymbol: string | undefined
   approval: ApprovalState
-  approveCallback: () => Promise<void>
+  approveCallback: (customAllowance?: CurrencyAmount<Currency>) => Promise<void>
   disabled: boolean
   forceApprove?: boolean
 }) => {

diff --git a/src/components/SwapForm/SwapActionButton/index.tsx b/src/components/SwapForm/SwapActionButton/index.tsx
@@ -1,14 +1,14 @@
 import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import { useEffect, useState } from 'react'
+import { Flex } from 'rebass'
 import styled from 'styled-components'
 
 import { ButtonConfirmed, ButtonLight, ButtonPrimary } from 'components/Button'
-import Column from 'components/Column/index'
 import InfoHelper from 'components/InfoHelper'
 import Loader from 'components/Loader'
-import ProgressSteps from 'components/ProgressSteps'
 import { AutoRow, RowBetween, RowFit } from 'components/Row'
+import Select from 'components/Select'
 import SwapOnlyButton from 'components/SwapForm/SwapActionButton/SwapOnlyButton'
 import { BuildRouteResult } from 'components/SwapForm/hooks/useBuildRoute'
 import { SwapCallbackError } from 'components/swapv2/styleds'
@@ -20,13 +20,16 @@ import { PermitState, usePermit } from 'hooks/usePermit'
 import useTheme from 'hooks/useTheme'
 import { WrapType } from 'hooks/useWrapCallback'
 import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
-import ApprovalModal from 'pages/SwapV3/ApprovalModal'
-import { ApplicationModal } from 'state/application/actions'
-import { useToggleModal, useWalletModalToggle } from 'state/application/hooks'
+import { useWalletModalToggle } from 'state/application/hooks'
 import { DetailedRouteSummary } from 'types/route'
 
 import { Props as SwapOnlyButtonProps } from './SwapOnlyButton'
 
+enum AllowanceType {
+  EXACT = 'EXACT',
+  INFINITE = 'INFINITE',
+}
+
 const CustomPrimaryButton = styled(ButtonPrimary).attrs({
   id: 'swap-button',
 })`
@@ -133,19 +136,14 @@ const SwapActionButton: React.FC<Props> = ({
   // never show if price impact is above threshold in non degen mode
   const showApproveFlow =
     !swapInputError &&
-    (approval === ApprovalState.NOT_APPROVED ||
-      approval === ApprovalState.PENDING ||
-      (approvalSubmitted && approval === ApprovalState.APPROVED)) &&
+    (approval === ApprovalState.NOT_APPROVED || approval === ApprovalState.PENDING) &&
     permitState !== PermitState.SIGNED
 
-  const toggleApprovalModal = useToggleModal(ApplicationModal.SWAP_APPROVAL)
-
+  const [approvalType, setApprovalType] = useState(AllowanceType.INFINITE)
   const handleApproveClick = () => {
-    if (['COIN98', 'BRAVE', 'COINBASE'].includes(walletKey)) {
-      toggleApprovalModal()
-    } else {
-      approveCallback()
-    }
+    approveCallback(
+      approvalType === AllowanceType.EXACT && parsedAmountFromTypedValue ? parsedAmountFromTypedValue : undefined,
+    )
   }
 
   const approveTooltipText = () => {
@@ -258,34 +256,11 @@ const SwapActionButton: React.FC<Props> = ({
 
     if (showApproveFlow) {
       return (
-        <>
-          <RowBetween gap="12px">
-            {permitState === PermitState.NOT_APPLICABLE ? (
-              <ButtonConfirmed
-                onClick={handleApproveClick}
-                disabled={approval !== ApprovalState.NOT_APPROVED || approvalSubmitted}
-                altDisabledStyle={approval === ApprovalState.PENDING} // show solid button while waiting
-                confirmed={approval === ApprovalState.APPROVED}
-                style={{
-                  border: 'none',
-                  flex: 1,
-                }}
-              >
-                {approval === ApprovalState.PENDING ? (
-                  <AutoRow gap="6px" justify="center">
-                    <Trans>Approving</Trans> <Loader stroke="white" />
-                  </AutoRow>
-                ) : approvalSubmitted && approval === ApprovalState.APPROVED ? (
-                  <Trans>Approved</Trans>
-                ) : (
-                  <RowFit gap="4px">
-                    <InfoHelper color={theme.textReverse} placement="top" text={approveTooltipText()} />
-                    <Trans>Approve {currencyIn?.symbol}</Trans>
-                  </RowFit>
-                )}
-              </ButtonConfirmed>
-            ) : (
+        <div>
+          <RowBetween style={{ gap: '1rem' }}>
+            {permitState === PermitState.NOT_SIGNED && (
               <ButtonConfirmed
+                disabled={approval === ApprovalState.PENDING}
                 onClick={() => {
                   mixpanelHandler(MIXPANEL_TYPE.PERMIT_CLICK)
                   permitCallback()
@@ -317,12 +292,61 @@ const SwapActionButton: React.FC<Props> = ({
               </ButtonConfirmed>
             )}
 
-            <SwapOnlyButton minimal {...swapOnlyButtonProps} />
+            <ButtonLight
+              onClick={handleApproveClick}
+              disabled={approval === ApprovalState.PENDING}
+              style={{
+                border: 'none',
+                flex: 1,
+              }}
+            >
+              {approval === ApprovalState.PENDING ? (
+                <AutoRow gap="6px" justify="center">
+                  <Trans>Approving</Trans> <Loader stroke={theme.border} />
+                </AutoRow>
+              ) : (
+                <RowFit gap="4px">
+                  <InfoHelper color={theme.primary} placement="top" text={approveTooltipText()} />
+                  <Trans>Approve {currencyIn?.symbol}</Trans>
+                </RowFit>
+              )}
+            </ButtonLight>
+          </RowBetween>
+          <RowBetween>
+            <div />
+            <Select
+              value={approvalType}
+              style={{ marginTop: '1rem', fontSize: '14px', padding: 0, background: 'transparent' }}
+              optionStyle={{ fontSize: '14px' }}
+              options={[
+                {
+                  value: AllowanceType.INFINITE,
+                  label: 'Infinite Allowance',
+                  onSelect: () => setApprovalType(AllowanceType.INFINITE),
+                },
+                {
+                  value: AllowanceType.EXACT,
+                  label: 'Exact Allowance',
+                  onSelect: () => setApprovalType(AllowanceType.EXACT),
+                },
+              ]}
+              activeRender={selected =>
+                selected ? (
+                  <Flex>
+                    {selected.label}{' '}
+                    <InfoHelper
+                      text={
+                        selected.value === AllowanceType.EXACT
+                          ? 'You wish to give KyberSwap permission to use the exact allowance token amount as the amount in for this transaction, Subsequent transactions will require your permission again.'
+                          : 'You wish to give KyberSwap permission to use the selected token for transactions without any limit. You do not need to give permission again unless revoke.'
+                      }
+                    />
+                  </Flex>
+                ) : null
+              }
+            />
           </RowBetween>
-          <Column>
-            <ProgressSteps steps={[approval === ApprovalState.APPROVED]} />
-          </Column>
-        </>
+        </div>
       )
     }
 
@@ -339,7 +363,6 @@ const SwapActionButton: React.FC<Props> = ({
       {isDegenMode && errorWhileSwap ? (
         <SwapCallbackError style={{ margin: 0, zIndex: 'unset' }} error={errorWhileSwap} />
       ) : null}
-      <ApprovalModal typedValue={typedValue} currencyInput={currencyIn} onApprove={approveCallback} />
     </>
   )
 }

diff --git a/src/hooks/useApproveCallback.ts b/src/hooks/useApproveCallback.ts
@@ -36,7 +36,7 @@ export function useApproveCallback(
   amountToApprove?: CurrencyAmount<Currency>,
   spender?: string,
   forceApprove = false,
-): [ApprovalState, () => Promise<void>, TokenAmount | undefined] {
+): [ApprovalState, (customAllowance?: CurrencyAmount<Currency>) => Promise<void>, TokenAmount | undefined] {
   const { account } = useActiveWeb3React()
   const token = amountToApprove?.currency.wrapped
   const currentAllowance = useTokenAllowance(token, account ?? undefined, spender)

diff --git a/src/pages/AddLiquidity/TokenPair.tsx b/src/pages/AddLiquidity/TokenPair.tsx
@@ -709,7 +709,7 @@ const TokenPair = ({
                     <RowBetween>
                       {approvalA !== ApprovalState.APPROVED && (
                         <ButtonPrimary
-                          onClick={approveACallback}
+                          onClick={() => approveACallback()}
                           disabled={approvalA === ApprovalState.PENDING}
                           width={approvalB !== ApprovalState.APPROVED ? '48%' : '100%'}
                         >
@@ -724,7 +724,7 @@ const TokenPair = ({
                       )}
                       {approvalB !== ApprovalState.APPROVED && (
                         <ButtonPrimary
-                          onClick={approveBCallback}
+                          onClick={() => approveBCallback()}
                           disabled={approvalB === ApprovalState.PENDING}
                           width={approvalA !== ApprovalState.APPROVED ? '48%' : '100%'}
                         >

diff --git a/src/pages/AddLiquidity/ZapIn.tsx b/src/pages/AddLiquidity/ZapIn.tsx
@@ -749,7 +749,7 @@ const ZapIn = ({
                   (isDegenMode || priceImpactSeverity <= 3) && (
                     <RowBetween>
                       <ButtonPrimary
-                        onClick={approveCallback}
+                        onClick={() => approveCallback()}
                         disabled={
                           !isValid || approval === ApprovalState.PENDING || (priceImpactSeverity > 3 && !isDegenMode)
                         }

diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx
@@ -777,7 +777,7 @@ export default function AddLiquidity() {
             <>
               {showApprovalA && (
                 <ButtonPrimary
-                  onClick={approveACallback}
+                  onClick={() => approveACallback()}
                   disabled={approvalA === ApprovalState.PENDING}
                   width={upToMedium ? '100%' : 'fit-content'}
                   minWidth="150px"
@@ -793,7 +793,7 @@ export default function AddLiquidity() {
               )}
               {showApprovalB && (
                 <ButtonPrimary
-                  onClick={approveBCallback}
+                  onClick={() => approveBCallback()}
                   disabled={approvalB === ApprovalState.PENDING}
                   width={upToMedium ? '100%' : 'fit-content'}
                   minWidth="150px"

diff --git a/src/pages/CreatePool/index.tsx b/src/pages/CreatePool/index.tsx
@@ -765,7 +765,7 @@ export default function CreatePool() {
                         <RowBetween>
                           {approvalA !== ApprovalState.APPROVED && (
                             <ButtonPrimary
-                              onClick={approveACallback}
+                              onClick={() => approveACallback()}
                               disabled={approvalA === ApprovalState.PENDING}
                               width={approvalB !== ApprovalState.APPROVED ? '48%' : '100%'}
                             >
@@ -778,7 +778,7 @@ export default function CreatePool() {
                           )}
                           {approvalB !== ApprovalState.APPROVED && (
                             <ButtonPrimary
-                              onClick={approveBCallback}
+                              onClick={() => approveBCallback()}
                               disabled={approvalB === ApprovalState.PENDING}
                               width={approvalA !== ApprovalState.APPROVED ? '48%' : '100%'}
                             >

diff --git a/src/pages/IncreaseLiquidity/index.tsx b/src/pages/IncreaseLiquidity/index.tsx
@@ -402,7 +402,7 @@ export default function IncreaseLiquidity() {
               <RowBetween>
                 {showApprovalA && (
                   <ButtonPrimary
-                    onClick={approveACallback}
+                    onClick={() => approveACallback()}
                     disabled={approvalA === ApprovalState.PENDING}
                     width={showApprovalB ? '48%' : '100%'}
                   >
@@ -417,7 +417,7 @@ export default function IncreaseLiquidity() {
                 )}
                 {showApprovalB && (
                   <ButtonPrimary
-                    onClick={approveBCallback}
+                    onClick={() => approveBCallback()}
                     disabled={approvalB === ApprovalState.PENDING}
                     width={showApprovalA ? '48%' : '100%'}
                   >

diff --git a/src/pages/KyberDAO/StakeKNC/MigrateModal.tsx b/src/pages/KyberDAO/StakeKNC/MigrateModal.tsx
@@ -156,7 +156,7 @@ export default function MigrateModal({
             {account ? (
               <>
                 {(approval === ApprovalState.NOT_APPROVED || approval === ApprovalState.PENDING) && !error && (
-                  <ButtonPrimary onClick={approveCallback} disabled={approval === ApprovalState.PENDING}>
+                  <ButtonPrimary onClick={() => approveCallback()} disabled={approval === ApprovalState.PENDING}>
                     {approval === ApprovalState.PENDING ? 'Approving...' : 'Approve'}
                   </ButtonPrimary>
                 )}

diff --git a/src/pages/KyberDAO/StakeKNC/StakeKNCComponent.tsx b/src/pages/KyberDAO/StakeKNC/StakeKNCComponent.tsx
@@ -487,7 +487,7 @@ export default function StakeKNCComponent() {
                     activeTab === STAKE_TAB.Stake &&
                     [ChainId.MAINNET, ChainId.GÖRLI].includes(chainId) &&
                     !errorMessage && (
-                      <ButtonPrimary onClick={approveCallback} disabled={approvalKNC === ApprovalState.PENDING}>
+                      <ButtonPrimary onClick={() => approveCallback()} disabled={approvalKNC === ApprovalState.PENDING}>
                         {approvalKNC === ApprovalState.PENDING ? 'Approving...' : 'Approve'}
                       </ButtonPrimary>
                     )}

diff --git a/src/state/lists/updater.ts b/src/state/lists/updater.ts
@@ -35,47 +35,6 @@ export default function Updater(): null {
     const getTokens = async () => {
       ;[...MAINNET_NETWORKS, ChainId.GÖRLI].forEach(async chainId => {
         let tokens: TokenInfo[] = []
-        if (chainId === ChainId.MATIC) {
-          tokens.push(
-            {
-              chainId: ChainId.MATIC,
-              address: '0x8E4d8c5177B1eAaB8b651547c10AB7cdC750493E',
-              name: 'mockUSDT',
-              decimals: 6,
-              symbol: 'mockUSDT',
-              logoURI: 'https://cloudfront-us-east-1.images.arcpublishing.com/coindesk/KTF6M73FKBACNI5JQ4S3EW7MRI.png',
-            },
-            {
-              chainId: ChainId.MATIC,
-              address: '0xd5493B0FaeDCd5731b2290689fA186F192e9C68D',
-              name: 'mockUSDC',
-              decimals: 6,
-              symbol: 'mockUSDT',
-              logoURI: 'https://polygonscan.com/token/images/centre-usdc_32.png',
-            },
-            {
-              chainId: ChainId.MATIC,
-              address: '0x278b0dF229f06A9893006A6bC258F8Bc064Dbc1a',
-              name: 'mockAxlWstETH',
-              decimals: 18,
-              symbol: 'mockWstETH',
-            },
-            {
-              chainId: ChainId.MATIC,
-              address: '0xb7A775B927C91EEe14c42505d8cD0Eb87653A3E3',
-              name: 'mockAxlWstETH',
-              decimals: 18,
-              symbol: 'mockWstETH',
-            },
-            {
-              chainId: ChainId.MATIC,
-              address: '0x20AF3CdA82fD1301C0EFaC8bfeF1cF9a7f771D8E',
-              name: 'mockWMATIC',
-              decimals: 18,
-              symbol: 'mockWMATIC',
-            },
-          )
-        }
         const pageSize = 100
         const maximumPage = 15
         let page = 1