[Claim - Approve] -> USDC (#2154)

* USDC "by chain" * add and pass USDC approve data * InvestFlow -> better types, pass approveData * update types, use new props * edit approval state check
gnosis · Jan 14, 2022 · bd559e6 · bd559e6
1 parent 84a384d
commit bd559e6
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 37 deletions.
diff --git a/src/custom/constants/tokens/index.ts b/src/custom/constants/tokens/index.ts
@@ -1,7 +1,7 @@
 import { ChainId } from '@uniswap/sdk'
 import { WETH9, Token } from '@uniswap/sdk-core'
 import { DAI_RINKEBY, USDC_RINKEBY, USDT_RINKEBY, WBTC_RINKEBY } from 'utils/rinkeby/constants'
-import { DAI, USDC, USDT, WBTC } from 'constants/tokens'
+import { DAI, USDC as USDC_MAINNET, USDT, WBTC } from '@src/constants/tokens'
 import { USDC_XDAI, /*USDT_XDAI,*/ WBTC_XDAI, WETH_XDAI, WXDAI } from 'utils/xdai/constants'
 import { SupportedChainId } from 'constants/chains'
 import { V_COW_CONTRACT_ADDRESS } from 'constants/index'
@@ -17,13 +17,13 @@ const WETH_ADDRESS_MAINNET = WETH9[ChainId.MAINNET].address
 export const ADDRESS_IMAGE_OVERRIDE = {
   // Rinkeby
   [DAI_RINKEBY.address]: getTrustImage(DAI.address),
-  [USDC_RINKEBY.address]: getTrustImage(USDC.address),
+  [USDC_RINKEBY.address]: getTrustImage(USDC_MAINNET.address),
   [USDT_RINKEBY.address]: getTrustImage(USDT.address),
   [WBTC_RINKEBY.address]: getTrustImage(WBTC.address),
   [WETH9[ChainId.RINKEBY].address]: getTrustImage(WETH_ADDRESS_MAINNET),
 
   // xDai
-  [USDC_XDAI.address]: getTrustImage(USDC.address),
+  [USDC_XDAI.address]: getTrustImage(USDC_MAINNET.address),
   // [USDT_XDAI.address]: getTrustImage(USDT.address),
   [WBTC_XDAI.address]: getTrustImage(WBTC.address),
   [WXDAI.address]:
@@ -56,7 +56,7 @@ export const V_COW: Record<number, Token> = {
   ),
 }
 
-export const GNO: Record<number, Token> = {
+export const GNO: Record<SupportedChainId, Token> = {
   [SupportedChainId.MAINNET]: new Token(
     SupportedChainId.MAINNET,
     '0x6810e776880c02933d47db1b9fc05908e5386b96',
@@ -79,3 +79,9 @@ export const GNO: Record<number, Token> = {
     'Gnosis'
   ),
 }
+
+export const USDC_BY_CHAIN: Record<SupportedChainId, Token> = {
+  [SupportedChainId.MAINNET]: USDC_MAINNET,
+  [SupportedChainId.XDAI]: USDC_XDAI,
+  [SupportedChainId.RINKEBY]: USDC_RINKEBY,
+}
diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
@@ -31,7 +31,7 @@ const RangeStep = styled.button`
 
 const INVESTMENT_STEPS = [0, 25, 50, 75, 100]
 
-export default function InvestOption({ approveState, approveCallback, updateInvestAmount, claim }: InvestOptionProps) {
+export default function InvestOption({ approveData, updateInvestAmount, claim }: InvestOptionProps) {
   const { currencyAmount, price, cost: maxCost, investedAmount } = claim
 
   const { account } = useActiveWeb3React()
@@ -89,18 +89,26 @@ export default function InvestOption({ approveState, approveCallback, updateInve
           </span>
           <span>
             <b>Token approval</b>
-            <i>
-              {approveState === ApprovalState.NOT_APPROVED ? (
-                `${currencyAmount?.currency?.symbol} not approved`
-              ) : (
+            {approveData ? (
+              <i>
+                {approveData.approveState !== ApprovalState.APPROVED ? (
+                  `${currencyAmount?.currency?.symbol} not approved`
+                ) : (
+                  <Row>
+                    {currencyAmount?.currency?.symbol} approved{' '}
+                    <CheckCircle color="lightgreen" style={{ marginLeft: 5 }} />
+                  </Row>
+                )}
+              </i>
+            ) : (
+              <i>
                 <Row>
-                  {currencyAmount?.currency?.symbol} approved{' '}
-                  <CheckCircle color="lightgreen" style={{ marginLeft: 5 }} />
+                  Approval not required! <CheckCircle color="lightgreen" style={{ marginLeft: 5 }} />
                 </Row>
-              )}
-            </i>
-            {approveState === ApprovalState.NOT_APPROVED && (
-              <button onClick={approveCallback}>Approve {currencyAmount?.currency?.symbol}</button>
+              </i>
+            )}
+            {approveData && approveData.approveState !== ApprovalState.APPROVED && (
+              <button onClick={approveData.approveCallback}>Approve {currencyAmount?.currency?.symbol}</button>
             )}
           </span>
           <span>

diff --git a/src/custom/pages/Claim/InvestmentFlow/index.tsx b/src/custom/pages/Claim/InvestmentFlow/index.tsx
@@ -7,34 +7,47 @@ import {
   StepIndicator,
   Steps,
 } from 'pages/Claim/styled'
-import { useClaimState, useUserEnhancedClaimData } from 'state/claim/hooks'
+import { ClaimType, useClaimState, useUserEnhancedClaimData } from 'state/claim/hooks'
 import { ClaimCommonTypes, EnhancedUserClaimData } from '../types'
 import { ClaimStatus } from 'state/claim/actions'
 import { useActiveWeb3React } from 'hooks/web3'
 import { ApprovalState } from 'hooks/useApproveCallback'
 import InvestOption from './InvestOption'
 
-type InvestmentFlowProps = Pick<ClaimCommonTypes, 'hasClaims'> & {
-  isAirdropOnly: boolean
-  approveState: ApprovalState
-  approveCallback: () => void
-}
-
 export type InvestmentClaimProps = EnhancedUserClaimData & {
   investedAmount: string
 }
 
-export type InvestOptionProps = Pick<InvestmentFlowProps, 'approveCallback' | 'approveState'> & {
+export type InvestOptionProps = {
   claim: InvestmentClaimProps
   updateInvestAmount: (idx: number, investAmount: string) => void
+  approveData: { approveState: ApprovalState; approveCallback: () => void } | undefined
+}
+
+type InvestmentFlowProps = Pick<ClaimCommonTypes, 'hasClaims'> & {
+  isAirdropOnly: boolean
+  gnoApproveData: InvestOptionProps['approveData']
+  usdcApproveData: InvestOptionProps['approveData']
+}
+
+type TokenApproveName = 'gnoApproveData' | 'usdcApproveData'
+type TokenApproveData = {
+  [key in TokenApproveName]: InvestOptionProps['approveData'] | undefined
+}
+
+// map claim type to token approve data
+function _claimToTokenApproveData(claimType: ClaimType, tokenApproveData: TokenApproveData) {
+  switch (claimType) {
+    case ClaimType.GnoOption:
+      return tokenApproveData.gnoApproveData
+    case ClaimType.Investor:
+      return tokenApproveData.usdcApproveData
+    default:
+      return undefined
+  }
 }
 
-export default function InvestmentFlow({
-  hasClaims,
-  isAirdropOnly,
-  approveState,
-  approveCallback,
-}: InvestmentFlowProps) {
+export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenApproveData }: InvestmentFlowProps) {
   const { account } = useActiveWeb3React()
   const { activeClaimAccount, claimStatus, isInvestFlowActive, investFlowStep, selected } = useClaimState()
 
@@ -101,8 +114,7 @@ export default function InvestmentFlow({
           {investData.map((claim) => (
             <InvestOption
               key={claim.index}
-              approveState={approveState}
-              approveCallback={approveCallback}
+              approveData={_claimToTokenApproveData(claim.type, tokenApproveData)}
               updateInvestAmount={updateInvestAmount}
               claim={claim}
             />

diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx
@@ -33,9 +33,11 @@ import { useApproveCallbackFromClaim } from 'hooks/useApproveCallback'
 import { OperationType } from 'components/TransactionConfirmationModal'
 import useTransactionConfirmationModal from 'hooks/useTransactionConfirmationModal'
 
-import { GNO } from 'constants/tokens'
+import { GNO, USDC_BY_CHAIN } from 'constants/tokens'
+import { isSupportedChain } from 'utils/supportedChainId'
 
 const GNO_CLAIM_APPROVE_MESSAGE = 'Approving GNO for investing in vCOW'
+const USDC_CLAIM_APPROVE_MESSAGE = 'Approving USDC for investing in vCOW'
 
 export default function Claim() {
   const { account, chainId } = useActiveWeb3React()
@@ -202,12 +204,18 @@ export default function Claim() {
     OperationType.APPROVE_TOKEN
   )
 
-  const [approveState, approveCallback] = useApproveCallbackFromClaim(
+  const [gnoApproveState, gnoApproveCallback] = useApproveCallbackFromClaim(
     () => openModal(GNO_CLAIM_APPROVE_MESSAGE, OperationType.APPROVE_TOKEN),
     closeModal,
-    // TODO: this will break switching to Mainnet as GNO is not set to work outside rinkeby right now
     // approve max unit256 amount
-    chainId && GNO[chainId] ? CurrencyAmount.fromRawAmount(GNO[chainId], MaxUint256) : undefined
+    isSupportedChain(chainId) ? CurrencyAmount.fromRawAmount(GNO[chainId], MaxUint256) : undefined
+  )
+
+  const [usdcApproveState, usdcApproveCallback] = useApproveCallbackFromClaim(
+    () => openModal(USDC_CLAIM_APPROVE_MESSAGE, OperationType.APPROVE_TOKEN),
+    closeModal,
+    // approve max unit256 amount
+    isSupportedChain(chainId) ? CurrencyAmount.fromRawAmount(USDC_BY_CHAIN[chainId], MaxUint256) : undefined
   )
 
   return (
@@ -242,8 +250,14 @@ export default function Claim() {
       <InvestmentFlow
         isAirdropOnly={isAirdropOnly}
         hasClaims={hasClaims}
-        approveCallback={approveCallback}
-        approveState={approveState}
+        gnoApproveData={{
+          approveCallback: gnoApproveCallback,
+          approveState: gnoApproveState,
+        }}
+        usdcApproveData={{
+          approveCallback: usdcApproveCallback,
+          approveState: usdcApproveState,
+        }}
       />
 
       <FooterNavButtons>