From 4542a489335f25b2e8e880e05bab17306f7a1473 Mon Sep 17 00:00:00 2001
From: kien-ngo <github@kien.ngo>
Date: Fri, 18 Oct 2024 23:58:59 +0000
Subject: [PATCH] [Dashboard] Add tokenURI section to the NFT page (#5035)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="1172" alt="image" src="https://github.com/user-attachments/assets/bef8ec5b-b453-43e1-bc90-f7156b3dd578">

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `TokenIdPage` component by adding functionality for displaying and copying the token URI of an NFT. It introduces a `CopyTextButton` and a link that opens the token URI in a new tab, improving user interaction and accessibility.

### Detailed summary
- Added import for `CopyTextButton`.
- Added import for `ExternalLinkIcon`.
- Introduced `Link` from `next/link`.
- Added `token URI` section in the UI.
- Implemented `CopyTextButton` to copy the `nft.tokenURI`.
- Added a button with a link that opens the `nft.tokenURI` in a new tab.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../nfts/[tokenId]/token-id.tsx               | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
index d74d9e6139a..80be8fb3b25 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
@@ -1,7 +1,9 @@
 "use client";
 
 import { WalletAddress } from "@/components/blocks/wallet-address";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import {
   Box,
@@ -15,15 +17,18 @@ import {
   useBreakpointValue,
 } from "@chakra-ui/react";
 import { useChainSlug } from "hooks/chains/chainSlug";
-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";
+import { shortenString } from "utils/usedapp-external";
 import { NftProperty } from "../components/nft-property";
 import { useNFTDrawerTabs } from "./useNftDrawerTabs";
 
@@ -65,6 +70,8 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
     tokenId,
   });
 
+  const client = useThirdwebClient();
+
   const { data: nft, isPending } = useReadContract(
     isErc721 ? getErc721NFT : getErc1155NFT,
     {
@@ -240,6 +247,28 @@ 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-1"
+                >
+                  <CopyTextButton
+                    textToCopy={nft.tokenURI}
+                    textToShow={shortenString(nft.tokenURI)}
+                    tooltip="The URI of this NFT"
+                    copyIconPosition="right"
+                  />
+                  <Button variant="ghost">
+                    <Link
+                      href={resolveScheme({ client, uri: nft.tokenURI })}
+                      target="_blank"
+                    >
+                      <ExternalLinkIcon className="size-4" />
+                    </Link>
+                  </Button>
+                </GridItem>
               </SimpleGrid>
             </Card>
             {properties ? (