From bd559e6a513fc46d70fa52548a66a5684d4186fa Mon Sep 17 00:00:00 2001 From: David Date: Fri, 14 Jan 2022 18:00:52 +0000 Subject: [PATCH] [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 --- src/custom/constants/tokens/index.ts | 14 ++++-- .../Claim/InvestmentFlow/InvestOption.tsx | 30 ++++++++----- .../pages/Claim/InvestmentFlow/index.tsx | 44 ++++++++++++------- src/custom/pages/Claim/index.tsx | 26 ++++++++--- 4 files changed, 77 insertions(+), 37 deletions(-) diff --git a/src/custom/constants/tokens/index.ts b/src/custom/constants/tokens/index.ts index 3071dfe68..19f69f168 100644 --- 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 = { ), } -export const GNO: Record = { +export const GNO: Record = { [SupportedChainId.MAINNET]: new Token( SupportedChainId.MAINNET, '0x6810e776880c02933d47db1b9fc05908e5386b96', @@ -79,3 +79,9 @@ export const GNO: Record = { 'Gnosis' ), } + +export const USDC_BY_CHAIN: Record = { + [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 index 8a0d136ce..c085cc5c2 100644 --- 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 Token approval - - {approveState === ApprovalState.NOT_APPROVED ? ( - `${currencyAmount?.currency?.symbol} not approved` - ) : ( + {approveData ? ( + + {approveData.approveState !== ApprovalState.APPROVED ? ( + `${currencyAmount?.currency?.symbol} not approved` + ) : ( + + {currencyAmount?.currency?.symbol} approved{' '} + + + )} + + ) : ( + - {currencyAmount?.currency?.symbol} approved{' '} - + Approval not required! - )} - - {approveState === ApprovalState.NOT_APPROVED && ( - + + )} + {approveData && approveData.approveState !== ApprovalState.APPROVED && ( + )} diff --git a/src/custom/pages/Claim/InvestmentFlow/index.tsx b/src/custom/pages/Claim/InvestmentFlow/index.tsx index de45f8de2..1d77eb449 100644 --- 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 & { - isAirdropOnly: boolean - approveState: ApprovalState - approveCallback: () => void -} - export type InvestmentClaimProps = EnhancedUserClaimData & { investedAmount: string } -export type InvestOptionProps = Pick & { +export type InvestOptionProps = { claim: InvestmentClaimProps updateInvestAmount: (idx: number, investAmount: string) => void + approveData: { approveState: ApprovalState; approveCallback: () => void } | undefined +} + +type InvestmentFlowProps = Pick & { + 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) => ( diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx index 917b1d187..b8c233f7e 100644 --- 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() {