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