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,6 +315,12 @@ export function PositionPage({
             </BadgeWrapper>
           </RowBetween>
         </AutoColumn>
+        <Row align="stretch">
+          {'result' in metadata ? (
+            <div style={{ marginRight: 12 }}>
+              <img src={metadata.result.image} />
+            </div>
+          ) : null}
           <DarkCard>
             <AutoColumn gap="lg">
               <ResponsiveGrid>
@@ -358,6 +367,7 @@ export function PositionPage({
               </ResponsiveGrid>
             </AutoColumn>
           </DarkCard>
+        </Row>
         <DarkCard>
           <AutoColumn gap="lg">
             <TYPE.label display="flex">