drop the card in the position page

src/hooks/usePositionTokenURI.ts

@@ -0,0 +1,75 @@
+import { BigNumber } from 'ethers'
+import JSBI from 'jsbi'
+import { useMemo } from 'react'
+import { NEVER_RELOAD, useSingleCallResult } from '../state/multicall/hooks'
+import { useV3NFTPositionManagerContract } from './useContract'
+
+type TokenId = number | JSBI | BigNumber
+
+const STARTS_WITH = 'data:application/json;base64,'
+
+type UsePositionTokenURIResult =
+  | {
+      valid: true
+      loading: false
+      result: {
+        name: string
+        description: string
+        image: string
+      }
+    }
+  | {
+      valid: false
+      loading: false
+    }
+  | {
+      valid: true
+      loading: true
+    }
+
+export function usePositionTokenURI(tokenId: TokenId | undefined): UsePositionTokenURIResult {
+  const contract = useV3NFTPositionManagerContract()
+  const inputs = useMemo(() => [tokenId instanceof BigNumber ? tokenId.toHexString() : tokenId?.toString(16)], [
+    tokenId,
+  ])
+  const { result, error, loading, valid } = useSingleCallResult(contract, 'tokenURI', inputs, NEVER_RELOAD, 1_600_000)
+
+  return useMemo(() => {
+    if (error || !valid || !tokenId) {
+      return {
+        valid: false,
+        loading: false,
+      }
+    }
+    if (loading) {
+      return {
+        valid: true,
+        loading: true,
+      }
+    }
+    if (!result) {
+      return {
+        valid: false,
+        loading: false,
+      }
+    }
+    const [tokenURI] = result as [string]
+    if (!tokenURI || !tokenURI.startsWith(STARTS_WITH))
+      return {
+        valid: false,
+        loading: false,
+      }
+
+    try {
+      const json = JSON.parse(atob(tokenURI.slice(STARTS_WITH.length)))
+
+      return {
+        valid: true,
+        loading: false,
+        result: json,
+      }
+    } catch (error) {
+      return { valid: false, loading: false }
+    }
+  }, [error, loading, result, tokenId, valid])
+}

src/pages/Pool/PositionPage.tsx

@@ -5,10 +5,11 @@ import { useToken } from 'hooks/Tokens'
 import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
 import { Link, RouteComponentProps } from 'react-router-dom'
 import { unwrappedToken } from 'utils/wrappedCurrency'
+import { usePositionTokenURI } from '../../hooks/usePositionTokenURI'
 import { LoadingRows } from './styleds'
 import styled from 'styled-components'
 import { AutoColumn } from 'components/Column'
-import { RowBetween, RowFixed } from 'components/Row'
+import Row, { RowBetween, RowFixed } from 'components/Row'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import { ButtonText, TYPE } from 'theme'
 import Badge, { BadgeVariant } from 'components/Badge'
@@ -140,6 +141,8 @@ export function PositionPage({
   const token0 = useToken(token0Address)
   const token1 = useToken(token1Address)
 
+  const metadata = usePositionTokenURI(parsedTokenId)
+
   const currency0 = token0 ? unwrappedToken(token0) : undefined
   const currency1 = token1 ? unwrappedToken(token1) : undefined
 
@@ -312,52 +315,59 @@ export function PositionPage({
             </BadgeWrapper>
           </RowBetween>
         </AutoColumn>
-        <DarkCard>
+        <Row align="stretch">
-          <AutoColumn gap="lg">
+          {'result' in metadata ? (
-            <ResponsiveGrid>
+            <div style={{ marginRight: 12 }}>
-              <Label>Tokens</Label>
+              <img src={metadata.result.image} />
-              <Label end={true}>Liquidity</Label>
+            </div>
-              <Label end={true}>Fees</Label>
+          ) : null}
-            </ResponsiveGrid>
+          <DarkCard>
-            <ResponsiveGrid>
+            <AutoColumn gap="lg">
-              <RowFixed>
+              <ResponsiveGrid>
-                <CurrencyLogo currency={currencyQuote} />
+                <Label>Tokens</Label>
-                <TYPE.label ml="10px">{currencyQuote?.symbol}</TYPE.label>
+                <Label end={true}>Liquidity</Label>
-              </RowFixed>
+                <Label end={true}>Fees</Label>
-              <Label end={true}>
+              </ResponsiveGrid>
-                {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)}
+              <ResponsiveGrid>
-              </Label>
+                <RowFixed>
-              <Label end={true}>
+                  <CurrencyLogo currency={currencyQuote} />
-                {inverted
+                  <TYPE.label ml="10px">{currencyQuote?.symbol}</TYPE.label>
-                  ? feeValue0
+                </RowFixed>
-                    ? formatTokenAmount(feeValue0, 4)
+                <Label end={true}>
-                    : '-'
+                  {inverted ? position?.amount0.toSignificant(4) : position?.amount1.toSignificant(4)}
-                  : feeValue1
+                </Label>
-                  ? formatTokenAmount(feeValue1, 4)
+                <Label end={true}>
-                  : '-'}
+                  {inverted
-              </Label>
+                    ? feeValue0
-            </ResponsiveGrid>
+                      ? formatTokenAmount(feeValue0, 4)
-            <ResponsiveGrid>
+                      : '-'
-              <RowFixed>
+                    : feeValue1
-                <CurrencyLogo currency={currencyBase} />
-                <TYPE.label ml="10px">{currencyBase?.symbol}</TYPE.label>
-              </RowFixed>
-              <Label end={true}>
-                {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}
-              </Label>
-
-              <Label end={true}>
-                {inverted
-                  ? feeValue1
                     ? formatTokenAmount(feeValue1, 4)
-                    : '-'
+                    : '-'}
-                  : feeValue0
+                </Label>
-                  ? formatTokenAmount(feeValue0, 4)
+              </ResponsiveGrid>
-                  : '-'}
+              <ResponsiveGrid>
-              </Label>
+                <RowFixed>
-            </ResponsiveGrid>
+                  <CurrencyLogo currency={currencyBase} />
-          </AutoColumn>
+                  <TYPE.label ml="10px">{currencyBase?.symbol}</TYPE.label>
-        </DarkCard>
+                </RowFixed>
+                <Label end={true}>
+                  {inverted ? position?.amount1.toSignificant(4) : position?.amount0.toSignificant(4)}
+                </Label>
+
+                <Label end={true}>
+                  {inverted
+                    ? feeValue1
+                      ? formatTokenAmount(feeValue1, 4)
+                      : '-'
+                    : feeValue0
+                    ? formatTokenAmount(feeValue0, 4)
+                    : '-'}
+                </Label>
+              </ResponsiveGrid>
+            </AutoColumn>
+          </DarkCard>
+        </Row>
         <DarkCard>
           <AutoColumn gap="lg">
             <TYPE.label display="flex">