[Claim] Approve flow - GNO approve (#2130)

* useTransactionConfirmationModal: make hooks to simplify

* useREmainingAllowanceToApprove hook

* useApproveCallbackFromClaim hook

* index update draft 1

* style in approve

* remove test code

src/custom/hooks/useApproveCallback/index.ts

@@ -1,8 +1,9 @@
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { useActiveWeb3React } from '@src/hooks/web3'
 import { Field } from '@src/state/swap/actions'
 import { computeSlippageAdjustedAmounts } from 'utils/prices'
 import { useMemo } from 'react'
-import { GP_VAULT_RELAYER } from 'constants/index'
+import { GP_VAULT_RELAYER, V_COW_CONTRACT_ADDRESS } from 'constants/index'
 import TradeGp from 'state/swap/TradeGp'
 import { ZERO_PERCENT } from 'constants/misc'
 
@@ -30,3 +31,16 @@ export function useApproveCallbackFromTrade(
 
   return useApproveCallback(openTransactionConfirmationModal, closeModals, amountToApprove, vaultRelayer)
 }
+
+export function useApproveCallbackFromClaim(
+  openTransactionConfirmationModal: (message: string) => void,
+  closeModals: () => void,
+  amountToApprove: CurrencyAmount<Currency> | undefined
+) {
+  const { chainId } = useActiveWeb3React()
+
+  const vCowContract = chainId ? V_COW_CONTRACT_ADDRESS[chainId] : undefined
+
+  // Params: modal cbs, amountToApprove: token user is investing e.g, spender: vcow token contract
+  return useApproveCallback(openTransactionConfirmationModal, closeModals, amountToApprove, vCowContract)
+}

src/custom/hooks/useRemainingAllowanceToApprove.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
+import { useTokenAllowance } from 'hooks/useTokenAllowance'
+import { useActiveWeb3React } from 'hooks/web3'
+
+interface Params {
+  amountToApprove: CurrencyAmount<Currency> | undefined
+  spender: string | undefined
+}
+
+/**
+ * useRemainingAllowanceToApprove
+ * ======================
+ * @description returns allowance of a token against a spender
+ * and the remaining allowance IF allowance > remaining. Else is null
+ */
+export default function useRemainingAllowanceToApprove({ amountToApprove, spender }: Params) {
+  const { account } = useActiveWeb3React()
+  const allowance = useTokenAllowance(amountToApprove?.wrapped.currency, account ?? undefined, spender)
+
+  return useMemo(() => {
+    // syntactic sugar - useful in UI to show to users for granularity
+    // Remaining allowance starts off as undefined - aka 0
+    let remainingAllowanceToApprove: CurrencyAmount<Currency> | undefined = undefined
+    // If amountToApprove is > current allowance, let's return what the difference is
+    // e.g amountToApprove<100>.minus(currentAllowance<50>) = 50
+    // user now only needs to approve 50
+    if (allowance && amountToApprove?.greaterThan(allowance)) {
+      remainingAllowanceToApprove = amountToApprove.subtract(allowance)
+    }
+
+    return {
+      allowance,
+      needsApproval: !allowance || amountToApprove?.greaterThan(allowance),
+      remainingAllowanceToApprove,
+    }
+  }, [allowance, amountToApprove])
+}

src/custom/hooks/useTransactionConfirmationModal.tsx

@@ -0,0 +1,40 @@
+import { useState, useCallback } from 'react'
+import TransactionConfirmationModal from 'components/TransactionConfirmationModal'
+import { OperationType } from 'components/TransactionConfirmationModal'
+import { useOpenModal, useCloseModals, useModalOpen } from 'state/application/hooks'
+import { ApplicationModal } from 'state/application/reducer'
+
+export default function useTransactionConfirmationModal(
+  defaultOperationType: OperationType = OperationType.WRAP_ETHER
+) {
+  const [operationType, setOperationType] = useState<OperationType>(defaultOperationType)
+  const [transactionConfirmationModalMsg, setTransactionConfirmationModalMsg] = useState<string>()
+  const openTransactionConfirmationModalAux = useOpenModal(ApplicationModal.TRANSACTION_CONFIRMATION)
+  const closeModal = useCloseModals()
+  const showTransactionConfirmationModal = useModalOpen(ApplicationModal.TRANSACTION_CONFIRMATION)
+  const openModal = useCallback(
+    (message: string, operationType: OperationType) => {
+      setTransactionConfirmationModalMsg(message)
+      setOperationType(operationType)
+      openTransactionConfirmationModalAux()
+    },
+    [setTransactionConfirmationModalMsg, openTransactionConfirmationModalAux]
+  )
+
+  return {
+    openModal,
+    closeModal,
+    TransactionConfirmationModal: useCallback(
+      () => (
+        <TransactionConfirmationModal
+          attemptingTxn={true}
+          isOpen={showTransactionConfirmationModal}
+          pendingText={transactionConfirmationModalMsg}
+          onDismiss={closeModal}
+          operationType={operationType}
+        />
+      ),
+      [closeModal, operationType, showTransactionConfirmationModal, transactionConfirmationModalMsg]
+    ),
+  }
+}

src/custom/pages/Claim/index.tsx

@@ -59,10 +59,22 @@ import { useClaimDispatchers, useClaimState } from 'state/claim/hooks'
 import { ClaimStatus } from 'state/claim/actions'
 import { useAllClaimingTransactionIndices } from 'state/enhancedTransactions/hooks'
 
+import { ApprovalState, useApproveCallbackFromClaim } from 'hooks/useApproveCallback'
+import { OperationType } from 'components/TransactionConfirmationModal'
+import useTransactionConfirmationModal from 'hooks/useTransactionConfirmationModal'
+
+import { GNO } from 'constants/tokens'
+import { CurrencyAmount, MaxUint256 } from '@uniswap/sdk-core'
+import { SupportedChainId } from 'constants/chains'
+import { CheckCircle } from 'react-feather'
+import Row from 'components/Row'
+
+// Max approve amount
+const MAX_GNO_UINT256 = CurrencyAmount.fromRawAmount(GNO[SupportedChainId.RINKEBY], MaxUint256)
+const GNO_CLAIM_APPROVE_MESSAGE = 'Approving GNO for investing in vCOW'
+
 export default function Claim() {
   const { account, chainId } = useActiveWeb3React()
-  // Maintains state, updates Context Provider below
-  // useClaimReducer should only be used here, in nested components use "useClaimState"
 
   const {
     // address/ENS address
@@ -239,8 +251,24 @@ export default function Claim() {
     // setActiveClaimAccount and other dispatch fns are only here for TS. They are safe references.
   }, [account, isSearchUsed, setActiveClaimAccount, setInvestFlowStep, setIsInvestFlowActive])
 
+  // Transaction confirmation modal
+  const { TransactionConfirmationModal, openModal, closeModal } = useTransactionConfirmationModal(
+    OperationType.APPROVE_TOKEN
+  )
+
+  const [approveState, approveCallback] = useApproveCallbackFromClaim(
+    () => openModal(GNO_CLAIM_APPROVE_MESSAGE, OperationType.APPROVE_TOKEN),
+    closeModal,
+    // approve max unit256 amount
+    MAX_GNO_UINT256
+  )
+
+  const handleApproveGno = () => approveCallback()
+
   return (
     <PageWrapper>
+      {/* Approve confirmation modal */}
+      <TransactionConfirmationModal />
       {/* If claim is confirmed > trigger confetti effect */}
       <Confetti start={claimStatus === ClaimStatus.CONFIRMED} />
 
@@ -427,8 +455,18 @@ export default function Claim() {
                       </span>
                       <span>
                         <b>Token approval</b>
-                        <i>GNO not approved</i>
-                        <button>Approve GNO</button>
+                        <i>
+                          {approveState === ApprovalState.NOT_APPROVED ? (
+                            'GNO not approved'
+                          ) : (
+                            <Row>
+                              GNO approved <CheckCircle color="lightgreen" style={{ marginLeft: 5 }} />
+                            </Row>
+                          )}
+                        </i>
+                        {approveState === ApprovalState.NOT_APPROVED && (
+                          <button onClick={handleApproveGno}>Approve GNO</button>
+                        )}
                       </span>
                       <span>
                         <b>Max. investment available</b> <i>2,500.04 GNO</i>
@@ -474,7 +512,11 @@ export default function Claim() {
                       </span>
                       <span>
                         <b>Token approval</b>
-                        <i>Not needed for ETH!</i>
+                        <i>
+                          <Row>
+                            Not required for ETH! <CheckCircle color="lightgreen" style={{ marginLeft: 5 }} />
+                          </Row>
+                        </i>
                       </span>
                       <span>
                         <b>Max. investment available</b> <i>2,500.04 ETH</i>