From 8bb8cf4cd106f5d604b32a78f63b61947bcf6f12 Mon Sep 17 00:00:00 2001 From: David Date: Thu, 20 Jan 2022 15:00:06 +0000 Subject: [PATCH] [CLAIM - Approve] Wire new approve logic into app (fixes broken merge stuff also) (#2233) * move approve logic from Claim > InvestOption * helper utils * tweak claim approve hook * apply @nenadV91's suggested fix * path --- src/custom/hooks/useApproveCallback/index.ts | 37 +++++++++-- .../Claim/InvestmentFlow/InvestOption.tsx | 66 ++++++++++++++----- .../pages/Claim/InvestmentFlow/index.tsx | 43 ++---------- src/custom/pages/Claim/index.tsx | 39 +---------- src/custom/state/claim/hooks/utils.ts | 21 +++++- src/custom/state/swap/extension.ts | 6 ++ 6 files changed, 112 insertions(+), 100 deletions(-) diff --git a/src/custom/hooks/useApproveCallback/index.ts b/src/custom/hooks/useApproveCallback/index.ts index c8d6f6512..f881ca567 100644 --- a/src/custom/hooks/useApproveCallback/index.ts +++ b/src/custom/hooks/useApproveCallback/index.ts @@ -1,4 +1,4 @@ -import { Percent } from '@uniswap/sdk-core' +import { Currency, CurrencyAmount, MaxUint256, Percent } from '@uniswap/sdk-core' import { useActiveWeb3React } from '@src/hooks/web3' import { Field } from '@src/state/swap/actions' import { computeSlippageAdjustedAmounts } from 'utils/prices' @@ -9,6 +9,11 @@ import TradeGp from 'state/swap/TradeGp' import { ApproveCallbackParams, useApproveCallback } from './useApproveCallbackMod' export { ApprovalState, useApproveCallback } from './useApproveCallbackMod' +import { ClaimType } from 'state/claim/hooks' +import { supportedChainId } from 'utils/supportedChainId' +import { tryAtomsToCurrency } from 'state/swap/extension' +import { EnhancedUserClaimData } from 'pages/Claim/types' + type ApproveCallbackFromTradeParams = Pick< ApproveCallbackParams, 'openTransactionConfirmationModal' | 'closeModals' | 'amountToCheckAgainstAllowance' @@ -50,24 +55,44 @@ export type OptionalApproveCallbackParams = { transactionSummary: string } -type ApproveCallbackFromClaimParams = Omit +type ApproveCallbackFromClaimParams = Omit< + ApproveCallbackParams, + 'spender' | 'amountToApprove' | 'amountToCheckAgainstAllowance' +> & { + claim: EnhancedUserClaimData + investmentAmount: string | undefined +} export function useApproveCallbackFromClaim({ openTransactionConfirmationModal, closeModals, - amountToApprove, - amountToCheckAgainstAllowance, + claim, + investmentAmount, }: ApproveCallbackFromClaimParams) { const { chainId } = useActiveWeb3React() + const supportedChain = supportedChainId(chainId) const vCowContract = chainId ? V_COW_CONTRACT_ADDRESS[chainId] : undefined + // Claim only approves GNO and USDC (GnoOption & Investor, respectively.) + const approveAmounts = useMemo(() => { + if (supportedChain && (claim.type === ClaimType.GnoOption || claim.type === ClaimType.Investor)) { + const investmentCurrency = claim.currencyAmount?.currency as Currency + const amountToCheckAgainstAllowance = tryAtomsToCurrency(investmentAmount, investmentCurrency) + return { + amountToApprove: CurrencyAmount.fromRawAmount(investmentCurrency, MaxUint256), + amountToCheckAgainstAllowance, + } + } + return undefined + }, [claim, investmentAmount, supportedChain]) + // Params: modal cbs, amountToApprove: token user is investing e.g, spender: vcow token contract return useApproveCallback({ openTransactionConfirmationModal, closeModals, - amountToApprove, spender: vCowContract, - amountToCheckAgainstAllowance, + amountToApprove: approveAmounts?.amountToApprove, + amountToCheckAgainstAllowance: approveAmounts?.amountToCheckAgainstAllowance, }) } diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx index eb120c664..055a48772 100644 --- a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx +++ b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx @@ -6,11 +6,11 @@ import { InvestTokenGroup, TokenLogo, InvestSummary, InvestInput, InvestAvailabl import { formatSmartLocaleAware } from 'utils/format' import Row from 'components/Row' import CheckCircle from 'assets/cow-swap/check.svg' -import { InvestOptionProps } from '.' -import { ApprovalState } from 'hooks/useApproveCallback' +import { InvestmentFlowProps } from '.' +import { ApprovalState, useApproveCallbackFromClaim } from 'hooks/useApproveCallback' import { useCurrencyBalance } from 'state/wallet/hooks' import { useActiveWeb3React } from 'hooks/web3' -import { useClaimDispatchers, useClaimState } from 'state/claim/hooks' +import { ClaimType, useClaimDispatchers, useClaimState } from 'state/claim/hooks' import { StyledNumericalInput } from 'components/CurrencyInputPanel/CurrencyInputPanelMod' import { ButtonConfirmed } from 'components/Button' @@ -20,6 +20,8 @@ import { useErrorModal } from 'hooks/useErrorMessageAndModal' import { tryParseAmount } from 'state/swap/hooks' import { calculateInvestmentAmounts, calculatePercentage } from 'state/claim/hooks/utils' import { AMOUNT_PRECISION, PERCENTAGE_PRECISION } from 'constants/index' +import { EnhancedUserClaimData } from '../types' +import { OperationType } from 'components/TransactionConfirmationModal' const ErrorMsgs = { InsufficientBalance: (symbol = '') => `Insufficient ${symbol} balance to cover investment amount`, @@ -28,14 +30,45 @@ const ErrorMsgs = { NotApproved: (symbol = '') => `Please approve ${symbol} token`, } -export default function InvestOption({ approveData, claim, optionIndex }: InvestOptionProps) { +type InvestOptionProps = { + claim: EnhancedUserClaimData + optionIndex: number + openModal: InvestmentFlowProps['modalCbs']['openModal'] + closeModal: InvestmentFlowProps['modalCbs']['closeModal'] +} + +const _claimApproveMessageMap = (type: ClaimType) => { + switch (type) { + case ClaimType.GnoOption: + return 'Approving GNO for investing in vCOW' + case ClaimType.Investor: + return 'Approving USDC for investing in vCOW' + // Shouldn't happen, type safe + default: + return 'Unknown token approval. Please check configuration.' + } +} + +export default function InvestOption({ claim, optionIndex, openModal, closeModal }: InvestOptionProps) { const { currencyAmount, price, cost: maxCost } = claim + + const { account } = useActiveWeb3React() const { updateInvestAmount, updateInvestError } = useClaimDispatchers() const { investFlowData, activeClaimAccount } = useClaimState() - const { handleSetError, handleCloseError, ErrorModal } = useErrorModal() + const investmentAmount = investFlowData[optionIndex].investedAmount - const { account } = useActiveWeb3React() + // Approve hooks + const [approveState, approveCallback] = useApproveCallbackFromClaim({ + openTransactionConfirmationModal: () => openModal(_claimApproveMessageMap(claim.type), OperationType.APPROVE_TOKEN), + closeModals: closeModal, + claim, + investmentAmount, + }) + + const isEtherApproveState = approveState === ApprovalState.UNKNOWN + + const { handleSetError, handleCloseError, ErrorModal } = useErrorModal() const [percentage, setPercentage] = useState('0') const [typedValue, setTypedValue] = useState('0') @@ -63,7 +96,7 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest const isSelfClaiming = account === activeClaimAccount const noBalance = !balance || balance.equalTo('0') - const isApproved = approveData?.approveState === ApprovalState.APPROVED + const isApproved = approveState === ApprovalState.APPROVED const isNative = token?.isNative // on invest max amount click handler @@ -76,9 +109,6 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest setTypedValue(value.toExact() || '') }, [balance, maxCost, noBalance]) - // Cache approveData methods - const approveCallback = approveData?.approveCallback - const approveState = approveData?.approveState // Save "local" approving state (pre-BC) for rendering spinners etc const [approving, setApproving] = useState(false) const handleApprove = useCallback(async () => { @@ -100,8 +130,8 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest }, [approveCallback, handleCloseError, handleSetError, token?.symbol]) const vCowAmount = useMemo( - () => calculateInvestmentAmounts(claim, investedAmount)?.vCowAmount, - [claim, investedAmount] + () => calculateInvestmentAmounts(claim, investmentAmount)?.vCowAmount, + [claim, investmentAmount] ) // if there is investmentAmount in redux state for this option set it as typedValue @@ -212,9 +242,9 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest Token approval - {approveData ? ( + {!isEtherApproveState ? ( - {approveData.approveState !== ApprovalState.APPROVED ? ( + {approveState !== ApprovalState.APPROVED ? ( `${currencyAmount?.currency?.symbol} not approved` ) : ( @@ -231,8 +261,8 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest )} - {/* Approve button - @biocom styles for this found in ./styled > InputSummary > ${ButtonPrimary}*/} - {approveData && approveState !== ApprovalState.APPROVED && ( + {/* Token Approve buton - not shown for ETH */} + {!isEtherApproveState && approveState !== ApprovalState.APPROVED && ( {approving || approveState === ApprovalState.PENDING ? ( - ) : approveData ? ( + ) : ( Approve {currencyAmount?.currency?.symbol} - ) : null} + )} )} diff --git a/src/custom/pages/Claim/InvestmentFlow/index.tsx b/src/custom/pages/Claim/InvestmentFlow/index.tsx index 4ac267ad6..79f6c9081 100644 --- a/src/custom/pages/Claim/InvestmentFlow/index.tsx +++ b/src/custom/pages/Claim/InvestmentFlow/index.tsx @@ -15,7 +15,6 @@ import { ClaimSummaryView } from 'pages/Claim/ClaimSummary' import { Stepper } from 'components/Stepper' import { - ClaimType, useClaimState, useUserEnhancedClaimData, useClaimDispatchers, @@ -25,13 +24,13 @@ import { ClaimStatus } from 'state/claim/actions' import { InvestClaim } from 'state/claim/reducer' import { calculateInvestmentAmounts } from 'state/claim/hooks/utils' -import { ApprovalState, OptionalApproveCallbackParams } from 'hooks/useApproveCallback' import { useActiveWeb3React } from 'hooks/web3' import InvestOption from './InvestOption' import { ClaimCommonTypes, ClaimWithInvestmentData, EnhancedUserClaimData } from '../types' import { COW_LINKS } from 'pages/Claim' import { ExternalLink } from 'theme' +import { OperationType } from 'components/TransactionConfirmationModal' const STEPS_DATA = [ { @@ -47,34 +46,11 @@ const STEPS_DATA = [ }, ] -export type InvestOptionProps = { - claim: EnhancedUserClaimData - optionIndex: number - approveData: - | { approveState: ApprovalState; approveCallback: (optionalParams?: OptionalApproveCallbackParams) => void } - | undefined -} - -type InvestmentFlowProps = Pick & { +export 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 + modalCbs: { + openModal: (message: string, operationType: OperationType) => void + closeModal: () => void } } @@ -118,7 +94,7 @@ function _calculateTotalVCow(allClaims: ClaimWithInvestmentData[]) { ) } -export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenApproveData }: InvestmentFlowProps) { +export default function InvestmentFlow({ hasClaims, isAirdropOnly, modalCbs }: InvestmentFlowProps) { const { account } = useActiveWeb3React() const { selected, activeClaimAccount, claimStatus, isInvestFlowActive, investFlowStep, investFlowData } = useClaimState() @@ -202,12 +178,7 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro

{selectedClaims.map((claim, index) => ( - + ))} {hasError && Fix the errors before continuing} diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx index 8279a8b71..88fe97553 100644 --- a/src/custom/pages/Claim/index.tsx +++ b/src/custom/pages/Claim/index.tsx @@ -1,5 +1,4 @@ import { useCallback, useEffect, useMemo } from 'react' -import { CurrencyAmount, MaxUint256 } from '@uniswap/sdk-core' import { useActiveWeb3React } from 'hooks/web3' import { useUserEnhancedClaimData, useUserUnclaimedAmount, useClaimCallback, ClaimInput } from 'state/claim/hooks' import { PageWrapper } from 'pages/Claim/styled' @@ -21,12 +20,9 @@ import InvestmentFlow from './InvestmentFlow' import { useClaimDispatchers, useClaimState } from 'state/claim/hooks' import { ClaimStatus } from 'state/claim/actions' -import { useApproveCallbackFromClaim } from 'hooks/useApproveCallback' import { OperationType } from 'components/TransactionConfirmationModal' import useTransactionConfirmationModal from 'hooks/useTransactionConfirmationModal' -import { GNO, USDC_BY_CHAIN } from 'constants/tokens' -import { isSupportedChain } from 'utils/supportedChainId' import { useErrorModal } from 'hooks/useErrorMessageAndModal' import FooterNavButtons from './FooterNavButtons' @@ -40,7 +36,7 @@ export const COW_LINKS = { } export default function Claim() { - const { account, chainId } = useActiveWeb3React() + const { account } = useActiveWeb3React() const { // address/ENS address @@ -182,26 +178,6 @@ export default function Claim() { OperationType.APPROVE_TOKEN ) - const [gnoApproveState, gnoApproveCallback] = useApproveCallbackFromClaim({ - openTransactionConfirmationModal: () => openModal(GNO_CLAIM_APPROVE_MESSAGE, OperationType.APPROVE_TOKEN), - closeModals: closeModal, - // approve max unit256 amount - amountToApprove: isSupportedChain(chainId) ? CurrencyAmount.fromRawAmount(GNO[chainId], MaxUint256) : undefined, - // TODO: enable, fix this - // amountToCheckAgainstAllowance: investmentAmountAsCurrency, - }) - - const [usdcApproveState, usdcApproveCallback] = useApproveCallbackFromClaim({ - openTransactionConfirmationModal: () => openModal(USDC_CLAIM_APPROVE_MESSAGE, OperationType.APPROVE_TOKEN), - closeModals: closeModal, - // approve max unit256 amount - amountToApprove: isSupportedChain(chainId) - ? CurrencyAmount.fromRawAmount(USDC_BY_CHAIN[chainId], MaxUint256) - : undefined, - // TODO: enable, fix this - // amountToCheckAgainstAllowance: investmentAmountAsCurrency, - }) - return ( {/* Approve confirmation modal */} @@ -231,18 +207,7 @@ export default function Claim() { {/* IS Airdrop + investing (advanced) */} {/* Investing vCOW flow (advanced) */} - + CurrencyAmount.fromRawAmount(currency, JSBI.BigInt(amount)) +export const tryAtomsToCurrency = (atoms: string | undefined, currency: Currency | undefined) => { + if (!atoms || !currency) return undefined + + return stringToCurrency(atoms, currency) +} + /** * useTradeExactInWithFee * @description wraps useTradeExactIn and returns an extended trade object with the fee adjusted values