diff --git a/src/components/addLiquidity/OwnershipWarning.tsx b/src/components/addLiquidity/OwnershipWarning.tsx new file mode 100644 index 0000000000..fc75afd141 --- /dev/null +++ b/src/components/addLiquidity/OwnershipWarning.tsx @@ -0,0 +1,46 @@ +import { Trans } from '@lingui/macro' +import { AlertTriangle } from 'react-feather' +import styled from 'styled-components/macro' +import { ThemedText } from 'theme' + +const ExplainerText = styled.div` + color: ${({ theme }) => theme.textSecondary}; +` +const TitleRow = styled.div` + align-items: center; + display: flex; + flex-direction: row; + color: ${({ theme }) => theme.accentWarning}; + margin-bottom: 8px; +` +const Wrapper = styled.div` + background-color: ${({ theme }) => theme.accentWarningSoft}; + border-radius: 16px; + margin-top: 12px; + max-width: 480px; + padding: 12px 20px; + width: 100%; +` + +interface OwnershipWarningProps { + ownerAddress: string +} + +const OwnershipWarning = ({ ownerAddress }: OwnershipWarningProps) => ( + + + + + Warning + + + + + You are not the owner of this LP position. You will not be able to withdraw the liquidity from this position + unless you own the following address: {ownerAddress} + + + +) + +export default OwnershipWarning diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index d46bce49a1..8017fe3635 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/src/pages/AddLiquidity/index.tsx @@ -6,10 +6,12 @@ import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core' import { FeeAmount, NonfungiblePositionManager } from '@uniswap/v3-sdk' import { useWeb3React } from '@web3-react/core' +import OwnershipWarning from 'components/addLiquidity/OwnershipWarning' import { sendEvent } from 'components/analytics' import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter' import { useToggleWalletDrawer } from 'components/WalletDropdown' import usePrevious from 'hooks/usePrevious' +import { useSingleCallResult } from 'lib/hooks/multicall' import { useCallback, useEffect, useMemo, useState } from 'react' import { AlertTriangle } from 'react-feather' import { useNavigate, useParams, useSearchParams } from 'react-router-dom' @@ -21,6 +23,7 @@ import { useV3MintState, } from 'state/mint/v3/hooks' import { useTheme } from 'styled-components/macro' +import { addressesAreEquivalent } from 'utils/addressesAreEquivalent' import { ButtonError, ButtonLight, ButtonPrimary, ButtonText } from '../../components/Button' import { BlueCard, OutlineCard, YellowCard } from '../../components/Card' @@ -548,6 +551,12 @@ export default function AddLiquidity() { }), [usdcValueCurrencyB] ) + + const owner = useSingleCallResult(tokenId ? positionManager : null, 'ownerOf', [tokenId]).result?.[0] + const ownsNFT = + addressesAreEquivalent(owner, account) || addressesAreEquivalent(existingPositionDetails?.operator, account) + const showOwnershipWarning = Boolean(account && !ownsNFT) + return ( <> @@ -912,6 +921,7 @@ export default function AddLiquidity() { + {showOwnershipWarning && } {addIsUnsupported && ( { + it('should return false for undefined addresses', () => { + expect(addressesAreEquivalent(undefined, undefined)).toBe(false) + }) + it('should return true for mismatched checksum equivalence', () => { + expect( + addressesAreEquivalent( + '0x48c89D77ae34Ae475e4523b25aB01e363dce5A78', + '0x48c89D77ae34Ae475e4523b25aB01e363dce5A78'.toLowerCase() + ) + ).toBe(true) + }) + it('should return true for simple equivalence', () => { + expect( + addressesAreEquivalent('0x48c89D77ae34Ae475e4523b25aB01e363dce5A78', '0x48c89D77ae34Ae475e4523b25aB01e363dce5A78') + ).toBe(true) + }) +}) diff --git a/src/utils/addressesAreEquivalent.ts b/src/utils/addressesAreEquivalent.ts new file mode 100644 index 0000000000..2a8198de62 --- /dev/null +++ b/src/utils/addressesAreEquivalent.ts @@ -0,0 +1,4 @@ +export function addressesAreEquivalent(a?: string, b?: string) { + if (!a || !b) return false + return a === b || a.toLowerCase() === b.toLowerCase() +}