[Dashboard] Add tokenURI section to the NFT page

Author: kien-ngo

apps/dashboard/src/contract-ui/tabs/nfts/components/token-id.tsx

@@ -2,6 +2,7 @@
 
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import {
   Box,
@@ -15,12 +16,14 @@ import {
   useBreakpointValue,
 } from "@chakra-ui/react";
 import { useNFTDrawerTabs } from "core-ui/nft-drawer/useNftDrawerTabs";
-import { ChevronLeftIcon } from "lucide-react";
+import { ChevronLeftIcon, ExternalLinkIcon } from "lucide-react";
+import Link from "next/link";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import { getNFT as getErc721NFT } from "thirdweb/extensions/erc721";
 import { getNFT as getErc1155NFT } from "thirdweb/extensions/erc1155";
 import { useReadContract } from "thirdweb/react";
+import { resolveScheme } from "thirdweb/storage";
 import { Badge, Button, Card, CodeBlock, Heading, Text } from "tw-components";
 import { AddressCopyButton } from "tw-components/AddressCopyButton";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
@@ -65,6 +68,8 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
     tokenId,
   });
 
+  const client = useThirdwebClient();
+
   const { data: nft, isPending } = useReadContract(
     isErc721 ? getErc721NFT : getErc1155NFT,
     {
@@ -240,6 +245,26 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                     </GridItem>
                   </>
                 )}
+                <GridItem colSpan={4}>
+                  <Heading size="label.md">Token URI</Heading>
+                </GridItem>
+                <GridItem
+                  colSpan={8}
+                  className="flex flex-row items-center gap-2"
+                >
+                  <AddressCopyButton
+                    size="xs"
+                    address={nft.tokenURI}
+                    title="Token URI"
+                    shortenAddress={true}
+                  />
+                  <Link
+                    href={resolveScheme({ client, uri: nft.tokenURI })}
+                    target="_blank"
+                  >
+                    <ExternalLinkIcon className="size-4" />
+                  </Link>
+                </GridItem>
               </SimpleGrid>
             </Card>
             {properties ? (