[Dashboard] Add Media URI to token page (#5088)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `TokenIdPage` component by adding a section to display the media URI of an NFT, including a button to copy the URI and a link to view it externally.

### Detailed summary
- Added a conditional rendering block to display the media URI if `nft.metadata.image` exists.
- Included a `GridItem` for the "Media URI" heading.
- Added a `CopyTextButton` to copy the media URI.
- Added a button with a link to the media URI, featuring an `ExternalLinkIcon`.

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

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx

@@ -260,7 +260,7 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                     tooltip="The URI of this NFT"
                     copyIconPosition="right"
                   />
-                  <Button variant="ghost">
+                  <Button variant="ghost" size="sm">
                     <Link
                       href={resolveScheme({ client, uri: nft.tokenURI })}
                       target="_blank"
@@ -269,6 +269,35 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                     </Link>
                   </Button>
                 </GridItem>
+                {nft.metadata.image && (
+                  <>
+                    <GridItem colSpan={4}>
+                      <Heading size="label.md">Media URI</Heading>
+                    </GridItem>
+                    <GridItem
+                      colSpan={8}
+                      className="flex flex-row items-center gap-1"
+                    >
+                      <CopyTextButton
+                        textToCopy={nft.metadata.image}
+                        textToShow={shortenString(nft.metadata.image)}
+                        tooltip="The media URI of this NFT"
+                        copyIconPosition="right"
+                      />
+                      <Button variant="ghost" size="sm">
+                        <Link
+                          href={resolveScheme({
+                            client,
+                            uri: nft.metadata.image,
+                          })}
+                          target="_blank"
+                        >
+                          <ExternalLinkIcon className="size-4" />
+                        </Link>
+                      </Button>
+                    </GridItem>
+                  </>
+                )}
               </SimpleGrid>
             </Card>
             {properties ? (