Enter an address to check for any eligible vCOW claims.
Note: It is possible to claim for an account, using any wallet/account.
- {!account && (
-
{isConfirmed ? 'Claim successful!' : 'Claiming'}
+{isConfirmed ? 'Claim successful!' : isFailure ? 'Failed to claim' : 'Claiming'}
{!isConfirmed && (The claim transaction failed. Please check the network parameters and try again.
+You have other available claims on
+ This account has available claims on
{chainsWithClaims.map((chainId, index, array) => {
const changeNetworksCallback = () => callback(chainId)
diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx
index fe9068153..d2e59407b 100644
--- a/src/custom/pages/Claim/ClaimsTable.tsx
+++ b/src/custom/pages/Claim/ClaimsTable.tsx
@@ -5,9 +5,8 @@ import CowProtocolLogo from 'components/CowProtocolLogo'
import { ClaimStatus } from 'state/claim/actions'
// import { UserClaimDataDetails } from './types' TODO: fix in another PR
import { formatMax, formatSmartLocaleAware } from 'utils/format'
-import { EnhancedUserClaimData } from './types'
+import { ClaimCommonTypes, EnhancedUserClaimData } from './types'
import { useAllClaimingTransactionIndices } from 'state/enhancedTransactions/hooks'
-import { useUserEnhancedClaimData } from 'state/claim/hooks'
import { CustomLightSpinner } from 'theme'
import Circle from 'assets/images/blue-loader.svg'
@@ -20,10 +19,7 @@ import { COW_LINKS } from '.'
import SVG from 'react-inlinesvg'
import CowProtocolImage from 'assets/cow-swap/cowprotocol.svg'
-export type ClaimsTableProps = {
- isAirdropOnly: boolean
- hasClaims: boolean
-}
+export type ClaimsTableProps = Pick
// TODO: fix in other pr
type ClaimsTableRowProps = EnhancedUserClaimData & {
@@ -116,15 +112,13 @@ const ClaimsTableRow = ({
)
}
-export default function ClaimsTable({ isAirdropOnly, hasClaims }: ClaimsTableProps) {
+export default function ClaimsTable({ isAirdropOnly, claims, hasClaims }: ClaimsTableProps) {
const { selectedAll, selected, activeClaimAccount, claimStatus, isInvestFlowActive } = useClaimState()
const { setSelectedAll, setSelected } = useClaimDispatchers()
const pendingClaimsSet = useAllClaimingTransactionIndices()
- const userClaimData = useUserEnhancedClaimData(activeClaimAccount)
-
const { deployment: start, investmentDeadline, airdropDeadline } = useClaimTimeInfo()
const handleSelect = (event: React.ChangeEvent, index: number) => {
@@ -136,12 +130,12 @@ export default function ClaimsTable({ isAirdropOnly, hasClaims }: ClaimsTablePro
const handleSelectAll = (event: React.ChangeEvent) => {
const checked = event.target.checked
- const paid = getIndexes(getPaidClaims(userClaimData))
+ const paid = getIndexes(getPaidClaims(claims))
setSelected(checked ? paid : [])
setSelectedAll(checked)
}
- const paidClaims = getPaidClaims(userClaimData)
+ const paidClaims = getPaidClaims(claims)
useEffect(() => {
setSelectedAll(selected.length === paidClaims.length)
@@ -174,7 +168,7 @@ export default function ClaimsTable({ isAirdropOnly, hasClaims }: ClaimsTablePro
- {userClaimData.map((claim: EnhancedUserClaimData) => (
+ {claims.map((claim: EnhancedUserClaimData) => (
) {
const { claimStatus, activeClaimAccount, isInvestFlowActive } = useClaimState()
const isEligible = claimStatus === ClaimStatus.DEFAULT && !!activeClaimAccount && !isInvestFlowActive && hasClaims
diff --git a/src/custom/pages/Claim/FooterNavButtons.tsx b/src/custom/pages/Claim/FooterNavButtons.tsx
index a20b47960..eb277af9c 100644
--- a/src/custom/pages/Claim/FooterNavButtons.tsx
+++ b/src/custom/pages/Claim/FooterNavButtons.tsx
@@ -1,3 +1,5 @@
+import { ReactNode, useEffect, useRef } from 'react'
+import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
import { Trans } from '@lingui/macro'
import { isAddress } from '@ethersproject/address'
import {
@@ -10,11 +12,10 @@ import { ButtonPrimary, ButtonSecondary } from 'components/Button'
import { ClaimStatus } from 'state/claim/actions'
import { FooterNavButtons as FooterNavButtonsWrapper } from './styled'
import { useActiveWeb3React } from 'hooks/web3'
-import { ClaimsTableProps } from './ClaimsTable'
import { ClaimAddressProps } from './ClaimAddress'
-import { ReactNode } from 'react'
+import { ClaimCommonTypes } from 'pages/Claim/types'
-type FooterNavButtonsProps = Pick &
+type FooterNavButtonsProps = Pick &
Pick & {
isPaidClaimsOnly: boolean
resolvedAddress: string | null
@@ -53,28 +54,44 @@ export default function FooterNavButtons({
const hasError = useHasClaimInvestmentFlowError()
const hasZeroInvested = useHasZeroInvested()
+ const { error } = useWeb3React()
+
const isInputAddressValid = isAddress(resolvedAddress || '')
+ const buttonRef = useRef(null)
+
// User is connected and has some unclaimed claims
const isConnectedAndHasClaims = account && activeClaimAccount && hasClaims && claimStatus === ClaimStatus.DEFAULT
const noPaidClaimsSelected = !selected.length
+ useEffect(() => {
+ buttonRef?.current?.blur()
+ }, [activeClaimAccount])
+
let buttonContent: ReactNode = null
// Disconnected, show wallet connect
- if (!account) {
+ if (!account && activeClaimAccount) {
buttonContent = (
-
+
Connect a wallet
)
}
-
// User has no set active claim account and/or has claims, show claim account search
- if ((!activeClaimAccount || !hasClaims) && claimStatus === ClaimStatus.DEFAULT) {
+ else if (!hasClaims && claimStatus === ClaimStatus.DEFAULT) {
buttonContent = (
<>
-
- Check claimable vCOW
+
+ {error instanceof UnsupportedChainIdError ? (
+ Wrong Network
+ ) : (
+ Check claimable vCOW
+ )}
)
diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
index f4e8ee13a..7fc17066a 100644
--- a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
+++ b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
@@ -10,6 +10,7 @@ import {
InvestInput,
InvestAvailableBar,
UnderlineButton,
+ UserMessage,
WarningWrapper,
} from '../styled'
import { formatMax, formatSmartLocaleAware } from 'utils/format'
@@ -35,24 +36,27 @@ import { EnhancedUserClaimData } from '../types'
import { OperationType } from 'components/TransactionConfirmationModal'
import { ONE_HUNDRED_PERCENT } from 'constants/misc'
import { IS_TESTING_ENV } from '../const'
+import ImportantIcon from 'assets/cow-swap/important.svg'
+import SVG from 'react-inlinesvg'
const ErrorMessages = {
- NoBalance: (symbol = '') => `You don't have ${symbol} balance to invest`,
+ NoBalance: (symbol = '') =>
+ `You don't have ${symbol} balance to invest. Add sufficient ${symbol} balance or go back and uncheck ${symbol} as an investment option.`,
InsufficientBalanceSelf: (symbol = '') => `Insufficient ${symbol} balance to cover investment amount`,
InsufficientBalanceBehalf: (symbol = '') =>
`Your ${symbol} balance is not enough to cover 100% of the investment amount.`,
- OverMaxInvestment: `Your investment amount can't be above the maximum investment allowed`,
- InvestmentIsZero: `Your investment amount can't be zero`,
+ OverMaxInvestment: `Your investment amount can not be above the maximum investment allowed`,
+ InvestmentIsZero: `Your investment amount can not be zero`,
NotApproved: (symbol = '') => `Please approve ${symbol} token`,
- WaitForApproval: (symbol = '') => `Approving ${symbol}. Please wait until the transaction is mined`,
+ WaitForApproval: (symbol = '') => `Approving ${symbol}. Please wait until the transaction is mined.`,
}
const WarningMessages = {
InsufficientNativeBalance: (symbol = '', amount = '') =>
`You might not have enough ${symbol} to pay for the network transaction fee (estimated ${amount} ${symbol})`,
- NotMaxInvested: `Beware you won't be able to increase this amount after executing your transaction`,
+ NotMaxInvested: `Please note: after executing the transaction in the last step, you will not be able to invest anymore.`,
}
type InvestOptionProps = {
@@ -430,13 +434,19 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal
Receive: {formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || 0} vCOW
{/* Insufficient balance validation error */}
- {inputError && {inputError}}
+ {inputError && (
+
+
+ {inputError}
+
+ )}
{inputWarnings.length ? (
{inputWarnings.map((warning) => (
-
- {warning}
-
+
+
+ {warning}
+
))}
) : null}
diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx
index aa28e26c1..9afbcc353 100644
--- a/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx
+++ b/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx
@@ -1,11 +1,13 @@
import { ClaimType } from 'state/claim/hooks'
import { calculatePercentage } from 'state/claim/hooks/utils'
-import { TokenLogo, InvestAvailableBar } from 'pages/Claim/styled'
+import { TokenLogo, InvestAvailableBar, UserMessage } from 'pages/Claim/styled'
import { ClaimWithInvestmentData } from 'pages/Claim/types'
import CowProtocolLogo from 'components/CowProtocolLogo'
import { formatMax, formatSmartLocaleAware } from 'utils/format'
import { ONE_HUNDRED_PERCENT } from 'constants/misc'
import { AMOUNT_PRECISION } from 'constants/index'
+import ImportantIcon from 'assets/cow-swap/important.svg'
+import SVG from 'react-inlinesvg'
export type Props = { claim: ClaimWithInvestmentData }
@@ -58,9 +60,12 @@ export function InvestSummaryRow(props: Props): JSX.Element | null {
+
+
+ Note: You will not be able to invest anymore after claiming.
+
+
)}
)}
diff --git a/src/custom/pages/Claim/InvestmentFlow/index.tsx b/src/custom/pages/Claim/InvestmentFlow/index.tsx
index 333b7c9d2..aa5a2a938 100644
--- a/src/custom/pages/Claim/InvestmentFlow/index.tsx
+++ b/src/custom/pages/Claim/InvestmentFlow/index.tsx
@@ -4,7 +4,6 @@ import { CurrencyAmount } from '@uniswap/sdk-core'
import {
InvestFlow,
InvestContent,
- InvestFlowValidation,
InvestSummaryTable,
ClaimTable,
AccountClaimSummary,
@@ -21,7 +20,6 @@ import { FaqDrawer } from 'components/FaqDrawer'
import {
useClaimState,
- useUserEnhancedClaimData,
useClaimDispatchers,
useHasClaimInvestmentFlowError,
useSomeNotTouched,
@@ -71,8 +69,7 @@ const FAQ_DATA = [
},
]
-export type InvestmentFlowProps = Pick & {
- isAirdropOnly: boolean
+export type InvestmentFlowProps = Pick & {
modalCbs: {
openModal: (message: string, operationType: OperationType) => void
closeModal: () => void
@@ -149,12 +146,11 @@ function AccountDetails({ isClaimer, label, account, connectedAccount }: Account
)
}
-export default function InvestmentFlow({ hasClaims, isAirdropOnly, modalCbs }: InvestmentFlowProps) {
+export default function InvestmentFlow({ claims, hasClaims, isAirdropOnly, modalCbs }: InvestmentFlowProps) {
const { account } = useActiveWeb3React()
const { selected, activeClaimAccount, claimStatus, isInvestFlowActive, investFlowStep, investFlowData } =
useClaimState()
const { initInvestFlowData } = useClaimDispatchers()
- const claimData = useUserEnhancedClaimData(activeClaimAccount)
const hasError = useHasClaimInvestmentFlowError()
const someNotTouched = useSomeNotTouched()
@@ -162,10 +158,7 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, modalCbs }: I
// Filtering and splitting claims into free and selected paid claims
// `selectedClaims` are used on step 1 and 2
// `freeClaims` are used on step 2
- const [freeClaims, selectedClaims] = useMemo(
- () => _classifyAndFilterClaimData(claimData, selected),
- [claimData, selected]
- )
+ const [freeClaims, selectedClaims] = useMemo(() => _classifyAndFilterClaimData(claims, selected), [claims, selected])
// Merge all claims together again, with their investment data for step 2
const allClaims: ClaimWithInvestmentData[] = useMemo(
@@ -252,9 +245,17 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, modalCbs }: I
Fix the errors before continuing }
+ {hasError && (
+
+
+ Please first resolve all errors shown above to continue.
+
+ )}
{!hasError && someNotTouched && (
- Investment Amount is required to continue
+
+
+ Investment Amount is required to continue.
+
)}
) : null}
@@ -286,8 +287,8 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, modalCbs }: I
-
+
+
Important! Please make sure you intend to claim and send vCOW to the above mentioned receiving
account.
diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx
index 7335e3ea0..59e15d4dc 100644
--- a/src/custom/pages/Claim/index.tsx
+++ b/src/custom/pages/Claim/index.tsx
@@ -1,31 +1,33 @@
import { useCallback, useEffect, useMemo } from 'react'
+import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
+
import { useActiveWeb3React } from 'hooks/web3'
+import useENS from 'hooks/useENS'
+import useTransactionConfirmationModal from 'hooks/useTransactionConfirmationModal'
+import { useErrorModal } from 'hooks/useErrorMessageAndModal'
import { useUserEnhancedClaimData, useUserUnclaimedAmount, useClaimCallback, ClaimInput } from 'state/claim/hooks'
-import { PageWrapper, InnerPageWrapper } from 'pages/Claim/styled'
-import EligibleBanner from './EligibleBanner'
-import { getFreeClaims, hasPaidClaim, hasFreeClaim, prepareInvestClaims } from 'state/claim/hooks/utils'
import { useWalletModalToggle } from 'state/application/hooks'
-import Confetti from 'components/Confetti'
+import { getFreeClaims, hasPaidClaim, hasFreeClaim, prepareInvestClaims } from 'state/claim/hooks/utils'
+import { useClaimDispatchers, useClaimState } from 'state/claim/hooks'
+import { ClaimStatus } from 'state/claim/actions'
-import useENS from 'hooks/useENS'
+import { OperationType } from 'components/TransactionConfirmationModal'
+import Confetti from 'components/Confetti'
+import Loader from 'components/Loader'
-import ClaimNav from './ClaimNav'
-import { ClaimSummary } from './ClaimSummary'
-import ClaimAddress from './ClaimAddress'
+import { PageWrapper, InnerPageWrapper } from 'pages/Claim/styled'
import CanUserClaimMessage from './CanUserClaimMessage'
+import ClaimAddress from './ClaimAddress'
+import ClaimNav from './ClaimNav'
import ClaimingStatus from './ClaimingStatus'
+import ClaimsOnOtherChainsBanner from './ClaimsOnOtherChainsBanner'
import ClaimsTable from './ClaimsTable'
+import EligibleBanner from './EligibleBanner'
+import FooterNavButtons from './FooterNavButtons'
import InvestmentFlow from './InvestmentFlow'
+import { ClaimSummary } from './ClaimSummary'
-import { useClaimDispatchers, useClaimState } from 'state/claim/hooks'
-import { ClaimStatus } from 'state/claim/actions'
-
-import { OperationType } from 'components/TransactionConfirmationModal'
-import useTransactionConfirmationModal from 'hooks/useTransactionConfirmationModal'
-
-import { useErrorModal } from 'hooks/useErrorMessageAndModal'
-import FooterNavButtons from './FooterNavButtons'
-import ClaimsOnOtherChainsBanner from './ClaimsOnOtherChainsBanner'
+import usePrevious from 'hooks/usePrevious'
/* TODO: Replace URLs with the actual final URL destinations */
export const COW_LINKS = {
@@ -35,6 +37,10 @@ export const COW_LINKS = {
export default function Claim() {
const { account, chainId } = useActiveWeb3React()
+ const { error } = useWeb3React()
+
+ // get previous account
+ const previousAccount = usePrevious(account)
const {
// address/ENS address
@@ -81,7 +87,7 @@ export default function Claim() {
const { handleCloseError, handleSetError, ErrorModal } = useErrorModal()
// get user claim data
- const userClaimData = useUserEnhancedClaimData(activeClaimAccount)
+ const { claims: userClaimData, isLoading: isClaimDataLoading } = useUserEnhancedClaimData(activeClaimAccount)
// get total unclaimed amount
const unclaimedAmount = useUserUnclaimedAmount(activeClaimAccount)
@@ -93,15 +99,33 @@ export default function Claim() {
// claim callback
const { claimCallback, estimateGasCallback } = useClaimCallback(activeClaimAccount)
- // handle change account
- const handleChangeAccount = () => {
- setActiveClaimAccount('')
- setSelected([])
- setClaimStatus(ClaimStatus.DEFAULT)
+ // reset claim state
+ const resetClaimState = useCallback(
+ (account = '', ens = '') => {
+ setClaimStatus(ClaimStatus.DEFAULT)
+ setActiveClaimAccount(account)
+ setActiveClaimAccountENS(ens)
+ setSelected([])
+ },
+ [setActiveClaimAccount, setActiveClaimAccountENS, setClaimStatus, setSelected]
+ )
+
+ // handle account change
+ const handleAccountChange = useCallback(
+ (account = '') => {
+ resetClaimState(account)
+ setIsSearchUsed(false)
+ },
+ [resetClaimState, setIsSearchUsed]
+ )
+
+ // handle change account click
+ const handleChangeClick = useCallback(() => {
+ resetClaimState()
setIsSearchUsed(true)
- }
+ }, [resetClaimState, setIsSearchUsed])
- // check claim
+ // handle
const handleCheckClaim = () => {
setActiveClaimAccount(resolvedAddress || '')
setActiveClaimAccountENS(resolvedENS || '')
@@ -173,10 +197,32 @@ export default function Claim() {
setActiveClaimAccount(account)
}
+ // handle unsupported network
+ if (error instanceof UnsupportedChainIdError) {
+ handleAccountChange()
+ }
+
// properly reset the user to the claims table and initial investment flow
resetClaimUi()
// Depending on chainId even though it's not used because we want to reset the state on network change
- }, [account, activeClaimAccount, chainId, resolvedAddress, isSearchUsed, setActiveClaimAccount, resetClaimUi])
+ }, [
+ account,
+ activeClaimAccount,
+ chainId,
+ resolvedAddress,
+ isSearchUsed,
+ setActiveClaimAccount,
+ resetClaimUi,
+ error,
+ handleAccountChange,
+ ])
+
+ // handle account disconnect or account change after claim is confirmed
+ useEffect(() => {
+ if (!account || (account !== previousAccount && claimStatus === ClaimStatus.CONFIRMED)) {
+ handleAccountChange(account || '')
+ }
+ }, [account, claimStatus, previousAccount, handleAccountChange])
// Transaction confirmation modal
const { TransactionConfirmationModal, openModal, closeModal } = useTransactionConfirmationModal(
@@ -189,43 +235,54 @@ export default function Claim() {
- {/* Approve confirmation modal */}
-
)
diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts
index 63ea46db9..3dacf8b28 100644
--- a/src/custom/pages/Claim/styled.ts
+++ b/src/custom/pages/Claim/styled.ts
@@ -531,6 +531,50 @@ export const ClaimRow = styled.tr<{ isPending?: boolean }>`
}
`
+export const UserMessage = styled.div<{ variant?: string }>`
+ width: 100%;
+ border-radius: var(--border-radius);
+ padding: 12px 16px;
+ text-align: left;
+ display: flex;
+ background: ${({ variant, theme }) =>
+ variant === 'danger'
+ ? transparentize(0.9, theme.danger)
+ : variant === 'info'
+ ? transparentize(0.9, theme.blue2)
+ : transparentize(0.9, theme.attention)};
+ color: ${({ variant, theme }) =>
+ variant === 'danger' ? theme.danger : variant === 'info' ? theme.blue2 : darken(0.1, theme.attention)};
+ margin: 0 auto;
+ align-items: center;
+ font-size: 15px;
+ line-height: 1.3;
+ font-weight: 500;
+
+ ${({ theme }) => theme.mediaWidth.upToSmall`
+ padding: 24px;
+ `}
+
+ > svg {
+ height: 36px;
+ width: auto;
+ margin: 0 12px 0 0;
+
+ ${({ theme }) => theme.mediaWidth.upToSmall`
+ height: 28px;
+ `}
+ }
+
+ > svg > path {
+ fill: ${({ variant, theme }) =>
+ variant === 'danger' ? theme.danger : variant === 'info' ? theme.blue2 : darken(0.1, theme.attention)};
+ }
+
+ > span {
+ flex: 1 1 100%;
+ }
+`
+
export const ClaimAccount = styled.div`
display: flex;
flex-flow: row nowrap;
@@ -703,8 +747,8 @@ export const EligibleBanner = styled.div`
display: flex;
justify-content: center;
align-items: center;
- background: ${({ theme }) => transparentize(0.9, theme.attention)};
- color: ${({ theme }) => darken(0.1, theme.attention)};
+ background: ${({ theme }) => transparentize(0.9, theme.success)};
+ color: ${({ theme }) => theme.success};
margin: 0 auto 16px;
font-weight: 600;
@@ -719,7 +763,7 @@ export const EligibleBanner = styled.div`
height: 21px;
> path {
- fill: ${({ theme }) => darken(0.1, theme.attention)};
+ fill: ${({ theme }) => theme.success};
}
${({ theme }) => theme.mediaWidth.upToSmall`
@@ -737,7 +781,7 @@ export const InputField = styled.div`
flex-flow: row wrap;
background: ${({ theme }) => theme.currencyInput?.background};
width: 100%;
- margin: 0 0 24px;
+ margin: 0 0 15px;
> input {
background: transparent;
@@ -1166,6 +1210,10 @@ export const InvestInput = styled.span<{ disabled: boolean }>`
font-size: 15px;
width: 100%;
+ ${UserMessage} {
+ margin: 12px 0 0;
+ }
+
> div {
display: flex;
flex-flow: column wrap;
@@ -1376,19 +1424,6 @@ export const InvestSummary = styled.div`
}
`
-export const InvestFlowValidation = styled.div`
- width: 100%;
- border-radius: var(--border-radius);
- padding: 12px;
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
- background: rgb(255 0 0 / 25%);
- color: red;
- margin: 0 auto 16px;
-`
-
export const ClaimAccountButtons = styled.div`
display: flex;
flex-direction: column;
@@ -1697,40 +1732,6 @@ export const StepExplainer = styled.div`
}
`
-export const UserMessage = styled.div`
- width: 100%;
- border-radius: var(--border-radius);
- padding: 24px 40px;
- text-align: left;
- display: flex;
- background: ${({ theme }) => transparentize(0.9, theme.attention)};
- color: ${({ theme }) => darken(0.1, theme.attention)};
- margin: 0 auto;
- align-items: center;
-
- ${({ theme }) => theme.mediaWidth.upToSmall`
- padding: 24px;
- `}
-
- > svg {
- height: 36px;
- width: auto;
- margin: 0 12px 0 0;
-
- ${({ theme }) => theme.mediaWidth.upToSmall`
- height: 28px;
- `}
- }
-
- > svg > path {
- fill: ${({ theme }) => darken(0.1, theme.attention)};
- }
-
- > span {
- flex: 1 1 100%;
- }
-`
-
export const BannerExplainer = styled.div`
display: flex;
justify-content: space-between;
diff --git a/src/custom/pages/Claim/types.ts b/src/custom/pages/Claim/types.ts
index 8b2e7e579..607561256 100644
--- a/src/custom/pages/Claim/types.ts
+++ b/src/custom/pages/Claim/types.ts
@@ -6,6 +6,8 @@ import { GpEther } from 'constants/tokens'
export type ClaimCommonTypes = {
account: string | null | undefined
hasClaims: boolean
+ claims: EnhancedUserClaimData[]
+ isAirdropOnly: boolean
tokenCurrencyAmount: CurrencyAmount
handleChangeAccount: (e: SyntheticEvent) => void
}
diff --git a/src/custom/pages/Profile/index.tsx b/src/custom/pages/Profile/index.tsx
index bc9947f80..138882037 100644
--- a/src/custom/pages/Profile/index.tsx
+++ b/src/custom/pages/Profile/index.tsx
@@ -63,6 +63,7 @@ export default function Profile() {
return (
+ {chainId && chainId === ChainId.MAINNET &&
@@ -71,7 +72,6 @@ export default function Profile() {
{IS_CLAIMING_ENABLED && vCowBalance &&
- {chainId && chainId === ChainId.MAINNET &&
diff --git a/src/custom/pages/Rewards/index.tsx b/src/custom/pages/Rewards/index.tsx
deleted file mode 100644
index a64860d38..000000000
--- a/src/custom/pages/Rewards/index.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import Page, { Title, Content, GdocsListStyle } from 'components/Page'
-import styled from 'styled-components/macro'
-import { Trans } from '@lingui/macro'
-import CowsImg from 'assets/images/cows.png'
-import CopyHelper from 'components/Copy'
-
-const ButtonGroup = styled.div`
- display: flex;
- align-items: center;
- margin-top: 1rem;
-`
-
-const FlexContainer = styled.div`
- display: flex;
- align-items: flex-start;
-`
-
-const SecondaryButton = styled.div`
- width: 350px;
- height: 65px;
- border: 1px solid #3d3d3d;
- box-sizing: border-box;
- border-radius: 9px;
- font-size: 18px;
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 0 0.5rem;
- cursor: pointer;
-`
-
-const PrimaryButton = styled(SecondaryButton)`
- background: rgba(242, 103, 57, 0.78);
- color: white;
-`
-
-const TextGroup = styled.div`
- margin-left: 1.5rem;
-`
-
-const Wrapper = styled(Page)`
- ${GdocsListStyle}
-
- max-width: 1000px;
- padding-top: 1rem;
-
- span[role='img'] {
- font-size: 1.8em;
- }
-`
-
-export default function About() {
- return (
-
-
-
- 
- Copy to clipboard
-
-
-
-
- Create affiliate link
-
-
- Learn about the Affiliate Program
-
-
-
-
- )
-}
diff --git a/src/custom/state/application/updater.ts b/src/custom/state/application/updater.ts
index ddd82bac5..e20862fa2 100644
--- a/src/custom/state/application/updater.ts
+++ b/src/custom/state/application/updater.ts
@@ -4,7 +4,7 @@ import useIsWindowVisible from 'hooks/useIsWindowVisible'
import { useActiveWeb3React } from 'hooks/web3'
import ms from 'ms.macro'
import { useCallback, useEffect, useRef, useState } from 'react'
-import { api, CHAIN_TAG } from 'state/data/enhanced'
+// import { api, CHAIN_TAG } from 'state/data/enhanced'
import { useAppDispatch, useAppSelector } from 'state/hooks'
import { supportedChainId } from 'utils/supportedChainId'
import { switchToNetwork } from 'utils/switchToNetwork'
@@ -17,18 +17,18 @@ import {
updateChainId,
} from 'state/application/reducer'
-function useQueryCacheInvalidator() {
- const dispatch = useAppDispatch()
+// function useQueryCacheInvalidator() {
+// const dispatch = useAppDispatch()
- // subscribe to `chainId` changes in the redux store rather than Web3
- // this will ensure that when `invalidateTags` is called, the latest
- // `chainId` is available in redux to build the subgraph url
- const chainId = useAppSelector((state) => state.application.chainId)
+// // subscribe to `chainId` changes in the redux store rather than Web3
+// // this will ensure that when `invalidateTags` is called, the latest
+// // `chainId` is available in redux to build the subgraph url
+// const chainId = useAppSelector((state) => state.application.chainId)
- useEffect(() => {
- dispatch(api.util.invalidateTags([CHAIN_TAG]))
- }, [chainId, dispatch])
-}
+// useEffect(() => {
+// dispatch(api.util.invalidateTags([CHAIN_TAG]))
+// }, [chainId, dispatch])
+// }
const NETWORK_HEALTH_CHECK_MS = ms`15s`
const DEFAULT_MS_BEFORE_WARNING = ms`10m`
@@ -78,7 +78,7 @@ export default function Updater(): null {
})
useBlockWarningTimer()
- useQueryCacheInvalidator()
+ // useQueryCacheInvalidator()
const blockNumberCallback = useCallback(
(blockNumber: number) => {
diff --git a/src/custom/state/claim/actions.ts b/src/custom/state/claim/actions.ts
index a760175c7..6496302cb 100644
--- a/src/custom/state/claim/actions.ts
+++ b/src/custom/state/claim/actions.ts
@@ -6,6 +6,7 @@ export enum ClaimStatus {
ATTEMPTING = 'ATTEMPTING',
SUBMITTED = 'SUBMITTED',
CONFIRMED = 'CONFIRMED',
+ FAILED = 'FAILED',
}
export type ClaimActions = {
diff --git a/src/custom/state/claim/hooks/index.ts b/src/custom/state/claim/hooks/index.ts
index 270e1a8e6..60febf164 100644
--- a/src/custom/state/claim/hooks/index.ts
+++ b/src/custom/state/claim/hooks/index.ts
@@ -29,7 +29,7 @@ import {
import { SupportedChainId } from 'constants/chains'
import { useAllClaimingTransactionIndices } from 'state/enhancedTransactions/hooks'
-export { useUserClaimData } from '@src/state/claim/hooks'
+export { useUserClaimData, useUserHasAvailableClaim } from '@src/state/claim/hooks'
import { AppDispatch } from 'state'
import { useSelector, useDispatch } from 'react-redux'
@@ -130,15 +130,22 @@ type ClassifiedUserClaims = {
available: UserClaims
expired: UserClaims
claimed: UserClaims
+ isLoading: boolean
}
/**
* Gets all user claims, classified
- *
- * @param account
*/
export function useClassifiedUserClaims(account: Account, optionalChainId?: SupportedChainId): ClassifiedUserClaims {
- const userClaims = useUserClaims(account, optionalChainId)
+ const { claims: userClaims, isLoading: areClaimsLoading } = useUserClaims(account, optionalChainId)
+
+ const [isLoading, setIsLoading] = useState(true)
+ const [claims, setClaims] = useState>({
+ available: [],
+ claimed: [],
+ expired: [],
+ })
+
const contract = useVCowContract()
const { isInvestmentWindowOpen, isAirdropWindowOpen } = useClaimTimeInfo()
@@ -149,18 +156,28 @@ export function useClassifiedUserClaims(account: Account, optionalChainId?: Supp
const results = useSingleContractMultipleData(contract, 'isClaimed', claimIndexes)
- return useMemo(() => {
+ useEffect(() => {
const available: UserClaims = []
const expired: UserClaims = []
const claimed: UserClaims = []
+ setClaims({ available, expired, claimed })
+
if (!userClaims || userClaims.length === 0) {
- return { available, expired, claimed }
+ setIsLoading(false)
+ return
}
+ let isContractCallLoading = false
+
results.forEach((result, index) => {
const claim = userClaims[index]
+ // Use the loading state from the multicall results
+ if (!isContractCallLoading && result.loading) {
+ isContractCallLoading = true
+ }
+
if (
result.valid && // result is valid
!result.loading && // result is not loading
@@ -174,38 +191,27 @@ export function useClassifiedUserClaims(account: Account, optionalChainId?: Supp
}
})
- return { available, expired, claimed }
+ setIsLoading(isContractCallLoading)
+ setClaims({ available, expired, claimed })
}, [isAirdropWindowOpen, isInvestmentWindowOpen, results, userClaims])
+
+ return { ...claims, isLoading: isLoading || areClaimsLoading }
}
/**
* Gets an array of available claims
*
* Syntactic sugar on top of `useClassifiedUserClaims`
- *
- * @param account
*/
-export function useUserAvailableClaims(account: Account, optionalChainId?: SupportedChainId): UserClaims {
- const { available } = useClassifiedUserClaims(account, optionalChainId)
+export function useUserAvailableClaims(account: Account, optionalChainId?: SupportedChainId): UserClaimsResult {
+ const { available, isLoading } = useClassifiedUserClaims(account, optionalChainId)
- return available
-}
-
-/**
- * Returns whether the user has any available claim
- * Syntactic sugar on top of `useUserAvailableClaims`
- *
- * @param account
- */
-export function useUserHasAvailableClaim(account: Account): boolean {
- const availableClaims = useUserAvailableClaims(account)
-
- return availableClaims.length > 0
+ return { claims: available, isLoading }
}
export function useUserUnclaimedAmount(account: string | null | undefined): CurrencyAmount | undefined {
const { chainId } = useActiveWeb3React()
- const claims = useUserAvailableClaims(account)
+ const { claims } = useUserAvailableClaims(account)
const pendingIndices = useAllClaimingTransactionIndices()
const vCow = chainId ? V_COW[chainId] : undefined
@@ -224,17 +230,21 @@ export function useUserUnclaimedAmount(account: string | null | undefined): Curr
return CurrencyAmount.fromRawAmount(vCow, JSBI.BigInt(totalAmount))
}
+type UserClaimsResult = {
+ claims: UserClaims | null
+ isLoading: boolean
+}
+
/**
* Gets user claims from claim repo
* Stores fetched claims in local state
- *
- * @param account
*/
-export function useUserClaims(account: Account, optionalChainId?: SupportedChainId): UserClaims | null {
+export function useUserClaims(account: Account, optionalChainId?: SupportedChainId): UserClaimsResult {
const { chainId: connectedChain } = useActiveWeb3React()
const chainId = optionalChainId || connectedChain
const [claimInfo, setClaimInfo] = useState<{ [account: string]: UserClaims | null }>({})
+ const [isLoading, setIsLoading] = useState(false)
// We'll have claims on multiple networks
const claimKey = chainId && account && `${chainId}:${account}`
@@ -244,6 +254,8 @@ export function useUserClaims(account: Account, optionalChainId?: SupportedChain
return
}
+ setIsLoading(true)
+
fetchClaims(account, chainId)
.then((accountClaimInfo) =>
setClaimInfo((claimInfo) => {
@@ -261,9 +273,10 @@ export function useUserClaims(account: Account, optionalChainId?: SupportedChain
}
})
})
+ .finally(() => setIsLoading(false))
}, [account, chainId, claimKey])
- return claimKey ? claimInfo[claimKey] : null
+ return { claims: claimKey ? claimInfo[claimKey] : null, isLoading }
}
/**
@@ -414,7 +427,7 @@ export function useClaimCallback(account: string | null | undefined): {
} {
// get claim data for given account
const { chainId, account: connectedAccount } = useActiveWeb3React()
- const claims = useUserAvailableClaims(account)
+ const { claims } = useUserAvailableClaims(account)
const vCowContract = useVCowContract()
const nativeTokenPrice = useNativeTokenPrice()
@@ -426,7 +439,7 @@ export function useClaimCallback(account: string | null | undefined): {
const getClaimArgs = useCallback(
async function (claimInput: ClaimInput[]): Promise {
- if (claims.length === 0) {
+ if (!claims || claims.length === 0) {
throw new Error('User has no claims')
}
if (claimInput.length === 0) {
@@ -869,6 +882,11 @@ export function useHasZeroInvested(): boolean {
}, [investFlowData])
}
+type UseUserEnhancedClaimDataResult = {
+ claims: EnhancedUserClaimData[]
+ isLoading: boolean
+}
+
/**
* Gets an array of available claims parsed and sorted for the UI
*
@@ -876,21 +894,23 @@ export function useHasZeroInvested(): boolean {
*
* @param account
*/
-export function useUserEnhancedClaimData(account: Account): EnhancedUserClaimData[] {
- const { available } = useClassifiedUserClaims(account)
+export function useUserEnhancedClaimData(account: Account): UseUserEnhancedClaimDataResult {
+ const { available, isLoading } = useClassifiedUserClaims(account)
const { chainId: preCheckChainId } = useActiveWeb3React()
const native = useNativeTokenPrice()
const gno = useGnoPrice()
const usdc = useUsdcPrice()
- const sorted = useMemo(() => available.sort(_sortTypes), [available])
-
- return useMemo(() => {
+ const claims = useMemo(() => {
const chainId = supportedChainId(preCheckChainId)
if (!chainId || !native || !gno || !usdc) return []
+ const sorted = available.sort(_sortTypes)
+
return sorted.map((claim) => _enhanceClaimData(claim, chainId, { native, gno, usdc }))
- }, [gno, native, preCheckChainId, sorted, usdc])
+ }, [available, gno, native, preCheckChainId, usdc])
+
+ return { claims, isLoading }
}
function _sortTypes(a: UserClaimData, b: UserClaimData): number {
diff --git a/src/custom/state/claim/middleware.ts b/src/custom/state/claim/middleware.ts
index 9951e5fba..8573fd7f3 100644
--- a/src/custom/state/claim/middleware.ts
+++ b/src/custom/state/claim/middleware.ts
@@ -1,8 +1,8 @@
-import { Middleware, isAnyOf } from '@reduxjs/toolkit'
-import { getCowSoundSuccess, getCowSoundSend } from 'utils/sound'
+import { isAnyOf, Middleware } from '@reduxjs/toolkit'
+import { getCowSoundSend, getCowSoundSuccess } from 'utils/sound'
import { AppState } from 'state'
-import { finalizeTransaction, addTransaction } from '../enhancedTransactions/actions'
-import { setClaimStatus, ClaimStatus } from './actions'
+import { addTransaction, finalizeTransaction } from '../enhancedTransactions/actions'
+import { ClaimStatus, setClaimStatus } from './actions'
const isFinalizeTransaction = isAnyOf(finalizeTransaction)
const isAddTransaction = isAnyOf(addTransaction)
@@ -25,9 +25,20 @@ export const claimMinedMiddleware: Middleware, AppState>
const transaction = store.getState().transactions[chainId][hash]
if (transaction.claim) {
- console.debug('[stat:claim:middleware] Claim transaction finalized', transaction.hash, transaction.claim)
- store.dispatch(setClaimStatus(ClaimStatus.CONFIRMED))
- cowSound = getCowSoundSuccess()
+ const status = transaction.receipt?.status
+ console.debug(
+ `[stat:claim:middleware] Claim transaction finalized withs status ${status}`,
+ transaction.hash,
+ transaction.claim
+ )
+ if (status === 1) {
+ // success
+ store.dispatch(setClaimStatus(ClaimStatus.CONFIRMED))
+ cowSound = getCowSoundSuccess()
+ } else {
+ // not success...
+ store.dispatch(setClaimStatus(ClaimStatus.FAILED))
+ }
}
}
diff --git a/src/custom/state/claim/updater.tsx b/src/custom/state/claim/updater.tsx
index bb4eff9fe..c7761c627 100644
--- a/src/custom/state/claim/updater.tsx
+++ b/src/custom/state/claim/updater.tsx
@@ -1,19 +1,24 @@
import { useEffect } from 'react'
import { SupportedChainId } from 'constants/chains'
-import { useActiveWeb3React } from 'hooks/web3'
-import { useClaimDispatchers, useUserAvailableClaims } from './hooks'
+import { useClaimDispatchers, useClaimState, useUserAvailableClaims } from './hooks'
export default function Updater() {
- const { account } = useActiveWeb3React()
+ const { activeClaimAccount } = useClaimState()
const { setHasClaimsOnOtherChains } = useClaimDispatchers()
- const mainnetAvailable = useUserAvailableClaims(account, SupportedChainId.MAINNET)
- const gnosisAvailable = useUserAvailableClaims(account, SupportedChainId.XDAI)
+ const { claims: mainnetAvailable } = useUserAvailableClaims(activeClaimAccount, SupportedChainId.MAINNET)
+ const { claims: gnosisAvailable } = useUserAvailableClaims(activeClaimAccount, SupportedChainId.XDAI)
useEffect(() => {
- setHasClaimsOnOtherChains({ chain: SupportedChainId.MAINNET, hasClaims: mainnetAvailable.length > 0 })
- setHasClaimsOnOtherChains({ chain: SupportedChainId.XDAI, hasClaims: gnosisAvailable.length > 0 })
- }, [mainnetAvailable.length, gnosisAvailable.length, setHasClaimsOnOtherChains])
+ setHasClaimsOnOtherChains({
+ chain: SupportedChainId.MAINNET,
+ hasClaims: Boolean(mainnetAvailable && mainnetAvailable.length > 0),
+ })
+ setHasClaimsOnOtherChains({
+ chain: SupportedChainId.XDAI,
+ hasClaims: Boolean(gnosisAvailable && gnosisAvailable.length > 0),
+ })
+ }, [setHasClaimsOnOtherChains, mainnetAvailable, gnosisAvailable])
return null
}
diff --git a/src/custom/state/enhancedTransactions/hooks/index.ts b/src/custom/state/enhancedTransactions/hooks/index.ts
index ced781e23..66328f068 100644
--- a/src/custom/state/enhancedTransactions/hooks/index.ts
+++ b/src/custom/state/enhancedTransactions/hooks/index.ts
@@ -131,8 +131,8 @@ export function useAllClaimingTransactions() {
export function useAllClaimingTransactionIndices() {
const claimingTransactions = useAllClaimingTransactions()
return useMemo(() => {
- const flattenedClaimingTransactions = claimingTransactions.reduce((acc, { claim }) => {
- if (claim && claim.indices) {
+ const flattenedClaimingTransactions = claimingTransactions.reduce((acc, { claim, receipt }) => {
+ if (claim && claim.indices && !receipt) {
acc.push(...claim.indices)
}
return acc
diff --git a/src/custom/state/index.ts b/src/custom/state/index.ts
index d0dd2a00e..c82096b1b 100644
--- a/src/custom/state/index.ts
+++ b/src/custom/state/index.ts
@@ -5,15 +5,15 @@ import application from 'state/application/reducer'
// import { updateVersion } from '@src/state/global/actions'
import user from '@src/state/user/reducer'
import swap from '@src/state/swap/reducer'
-import mint from '@src/state/mint/reducer'
-import mintV3 from '@src/state/mint/v3/reducer'
+// import mint from '@src/state/mint/reducer'
+// import mintV3 from '@src/state/mint/v3/reducer'
// import lists from '@src/state/lists/reducer'
-import burn from '@src/state/burn/reducer'
-import burnV3 from '@src/state/burn/v3/reducer'
+// import burn from '@src/state/burn/reducer'
+// import burnV3 from '@src/state/burn/v3/reducer'
import logs from '@src/state/logs/slice'
import multicall from '@src/state/multicall/reducer'
-import { api as dataApi } from '@src/state/data/slice'
-import { routingApi } from '@src/state/routing/slice'
+// import { api as dataApi } from '@src/state/data/slice'
+// import { routingApi } from '@src/state/routing/slice'
// CUSTOM REDUCERS
import lists from 'state/lists/reducer'
import orders from 'state/orders/reducer'
@@ -33,15 +33,15 @@ const UNISWAP_REDUCERS = {
application,
user,
swap,
- mint,
- mintV3,
- burn,
- burnV3,
+ // mint,
+ // mintV3,
+ // burn,
+ // burnV3,
multicall,
// lists,
logs,
- [dataApi.reducerPath]: dataApi.reducer,
- [routingApi.reducerPath]: routingApi.reducer,
+ // [dataApi.reducerPath]: dataApi.reducer,
+ // [routingApi.reducerPath]: routingApi.reducer,
}
const reducers = {
@@ -62,8 +62,8 @@ const store = configureStore({
reducer: reducers,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({ thunk: true, serializableCheck: false })
- .concat(dataApi.middleware)
- .concat(routingApi.middleware)
+ // .concat(dataApi.middleware)
+ // .concat(routingApi.middleware)
.concat(save({ states: PERSISTED_KEYS, debounce: 1000 }))
.concat(popupMiddleware)
.concat(claimMinedMiddleware)
diff --git a/src/custom/theme/baseTheme.tsx b/src/custom/theme/baseTheme.tsx
index e3b9ecdd0..a76639bd5 100644
--- a/src/custom/theme/baseTheme.tsx
+++ b/src/custom/theme/baseTheme.tsx
@@ -63,6 +63,7 @@ export function colors(darkMode: boolean): Colors {
// ****** other ******
blue1: '#3F77FF',
+ blue2: darkMode ? '#a3beff' : '#0c40bf',
purple: '#8958FF',
yellow: '#fff6dc',
greenShade: '#376c57',
@@ -72,7 +73,7 @@ export function colors(darkMode: boolean): Colors {
// states
success: darkMode ? '#00d897' : '#00815a',
- danger: '#f1356e',
+ danger: darkMode ? '#f7a7a7' : '#8f0000',
pending: '#43758C',
attention: '#ff5722',
diff --git a/src/custom/theme/styled.d.ts b/src/custom/theme/styled.d.ts
index c9de70d07..cc725cf12 100644
--- a/src/custom/theme/styled.d.ts
+++ b/src/custom/theme/styled.d.ts
@@ -12,6 +12,7 @@ export interface Colors extends ColorsUniswap {
blueShade: Color
blueShade2: Color
blueShade3: Color
+ blue2: Color
success: Color
danger: Color
pending: Color
diff --git a/src/state/burn/hooks.tsx b/src/state/burn/hooks.tsx
index db1eb5861..dda8a6d1c 100644
--- a/src/state/burn/hooks.tsx
+++ b/src/state/burn/hooks.tsx
@@ -3,7 +3,7 @@ import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
import { Pair } from '@uniswap/v2-sdk'
import JSBI from 'jsbi'
import { ReactNode, useCallback } from 'react'
-import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { useAppDispatch, useAppSelector } from '@src/state/hooks'
import { useTotalSupply } from '../../hooks/useTotalSupply'
import { useV2Pair } from '../../hooks/useV2Pairs'
diff --git a/src/state/burn/v3/hooks.ts b/src/state/burn/v3/hooks.ts
index 94f10ed90..9f865f197 100644
--- a/src/state/burn/v3/hooks.ts
+++ b/src/state/burn/v3/hooks.ts
@@ -10,7 +10,7 @@ import { PositionDetails } from 'types/position'
import { AppState } from '../../index'
import { selectPercent } from './actions'
import { unwrappedToken } from 'utils/unwrappedToken'
-import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { useAppDispatch, useAppSelector } from '@src/state/hooks'
// eslint-disable-next-line no-restricted-imports
import { t } from '@lingui/macro'
diff --git a/src/state/burn/v3/hooks.tsx b/src/state/burn/v3/hooks.tsx
index f91e7d496..80f1abf57 100644
--- a/src/state/burn/v3/hooks.tsx
+++ b/src/state/burn/v3/hooks.tsx
@@ -6,7 +6,7 @@ import { usePool } from 'hooks/usePools'
import { useV3PositionFees } from 'hooks/useV3PositionFees'
import { useActiveWeb3React } from 'hooks/web3'
import { ReactNode, useCallback, useMemo } from 'react'
-import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { useAppDispatch, useAppSelector } from '@src/state/hooks'
import { PositionDetails } from 'types/position'
import { unwrappedToken } from 'utils/unwrappedToken'
diff --git a/src/state/mint/hooks.tsx b/src/state/mint/hooks.tsx
index 8e3b79009..0172389ae 100644
--- a/src/state/mint/hooks.tsx
+++ b/src/state/mint/hooks.tsx
@@ -3,7 +3,7 @@ import { Currency, CurrencyAmount, Percent, Price, Token } from '@uniswap/sdk-co
import { Pair } from '@uniswap/v2-sdk'
import JSBI from 'jsbi'
import { ReactNode, useCallback, useMemo } from 'react'
-import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { useAppDispatch, useAppSelector } from '@src/state/hooks'
import { useTotalSupply } from '../../hooks/useTotalSupply'
import { PairState, useV2Pair } from '../../hooks/useV2Pairs'
diff --git a/src/state/mint/v3/hooks.ts b/src/state/mint/v3/hooks.ts
index ad3cff7a2..5666f2083 100644
--- a/src/state/mint/v3/hooks.ts
+++ b/src/state/mint/v3/hooks.ts
@@ -32,7 +32,7 @@ import {
} from './actions'
import { tryParseTick } from './utils'
import { usePool } from 'hooks/usePools'
-import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { useAppDispatch, useAppSelector } from '@src/state/hooks'
export function useV3MintState(): AppState['mintV3'] {
return useAppSelector((state) => state.mintV3)
Ready to claim your vCOW?
- Cowswap Affiliate Program
-
-
-
- 🥛
-
- Milk taste better, when shared with friends!
-
-
-
-
- - You love CowSwap, we know that, but what if we told you you can let others love it too and get some - rewards for doing so. -
--
Join CowSwap affiliate program, and start now accring rewards every time they trade.
-- The best part, is your referrals will also get rewards for trading if they join CowSwap using your link. -
- Create your referral link now: -