[TOOL-4897] Dashboard: Add Contract creator badge in Coin and NFT asset page (#7458)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces the `contractCreator` property to multiple components, allowing the display of the contract creator's address in the UI. It also adds a new function, `getContractCreator`, to retrieve the contract creator's information based on the contract's role.

### Detailed summary
- Added `contractCreator` prop to `NFTPublicPageLayout`, `ContractHeaderUI`, and `ContractCreatorBadge`.
- Implemented `getContractCreator` function to fetch the contract creator using `ThirdwebContract`.
- Updated `NFTPublicPage` and `ERC20PublicPage` to call `getContractCreator` and pass the result to the UI.
- Enhanced storybook stories to include `contractCreator` in various scenarios.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Added display of contract creator information on ERC20 and NFT public pages.
  * Introduced a badge showing the contract creator's address in the contract header section.

* **Enhancements**
  * Contract headers now conditionally show the creator badge if creator data is available.
  * Storybook stories for contract headers updated to include contract creator scenarios for improved UI previews.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/getContractCreator.tsx

@@ -0,0 +1,27 @@
+import type { ThirdwebContract } from "thirdweb";
+import { isOwnerSupported, owner } from "thirdweb/extensions/common";
+import {
+  getRoleMember,
+  isGetRoleAdminSupported,
+} from "thirdweb/extensions/permissions";
+
+export async function getContractCreator(
+  contract: ThirdwebContract,
+  functionSelectors: string[],
+) {
+  if (isOwnerSupported(functionSelectors)) {
+    return owner({
+      contract,
+    });
+  }
+
+  if (isGetRoleAdminSupported(functionSelectors)) {
+    return getRoleMember({
+      contract,
+      index: BigInt(0),
+      role: "admin",
+    });
+  }
+
+  return null;
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractCreatorBadge.tsx

@@ -0,0 +1,19 @@
+import type { ThirdwebContract } from "thirdweb";
+import { WalletAddress } from "@/components/blocks/wallet-address";
+
+export function ContractCreatorBadge(props: {
+  contractCreator: string;
+  clientContract: ThirdwebContract;
+}) {
+  return (
+    <div className="flex items-center gap-1.5 bg-card rounded-full px-2.5 py-1.5 border hover:bg-accent">
+      <span className="text-xs text-foreground">By</span>
+      <WalletAddress
+        address={props.contractCreator}
+        className="py-0 text-xs h-auto !no-underline"
+        client={props.clientContract.client}
+        iconClassName="size-3.5 hidden"
+      />
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx

@@ -88,6 +88,25 @@ export const WithImageAndMultipleSocialUrls: Story = {
   args: {
     chainMetadata: ethereumChainMetadata,
     clientContract: mockContract,
+    contractCreator: null,
+    image: mockTokenImage,
+    name: "Sample Token",
+    socialUrls: {
+      discord: mockSocialUrls.discord,
+      github: mockSocialUrls.github,
+      telegram: mockSocialUrls.telegram,
+      twitter: mockSocialUrls.twitter,
+      website: mockSocialUrls.website,
+    },
+    symbol: "SMPL",
+  },
+};
+
+export const WithContractCreator: Story = {
+  args: {
+    chainMetadata: ethereumChainMetadata,
+    clientContract: mockContract,
+    contractCreator: "0x1234567890123456789012345678901234567890",
     image: mockTokenImage,
     name: "Sample Token",
     socialUrls: {
@@ -105,6 +124,7 @@ export const WithBrokenImageAndSingleSocialUrl: Story = {
   args: {
     chainMetadata: ethereumChainMetadata,
     clientContract: mockContract,
+    contractCreator: null,
     image: "broken-image.png",
     name: "Sample Token",
     socialUrls: {
@@ -118,6 +138,7 @@ export const WithoutImageAndNoSocialUrls: Story = {
   args: {
     chainMetadata: ethereumChainMetadata,
     clientContract: mockContract,
+    contractCreator: null,
     image: undefined,
     name: "Sample Token",
     socialUrls: {},
@@ -129,6 +150,7 @@ export const LongNameAndLotsOfSocialUrls: Story = {
   args: {
     chainMetadata: ethereumChainMetadata,
     clientContract: mockContract,
+    contractCreator: null,
     image: "https://thirdweb.com/chain-icons/ethereum.svg",
     name: "This is a very long token name that should wrap to multiple lines",
     socialUrls: {
@@ -148,6 +170,7 @@ export const AllSocialUrls: Story = {
   args: {
     chainMetadata: ethereumChainMetadata,
     clientContract: mockContract,
+    contractCreator: null,
     image: "https://thirdweb.com/chain-icons/ethereum.svg",
     name: "Sample Token",
     socialUrls: {
@@ -171,6 +194,7 @@ export const InvalidSocialUrls: Story = {
   args: {
     chainMetadata: ethereumChainMetadata,
     clientContract: mockContract,
+    contractCreator: null,
     image: "https://thirdweb.com/chain-icons/ethereum.svg",
     name: "Sample Token",
     socialUrls: {
@@ -188,6 +212,7 @@ export const SomeSocialUrls: Story = {
   args: {
     chainMetadata: ethereumChainMetadata,
     clientContract: mockContract,
+    contractCreator: null,
     image: "https://thirdweb.com/chain-icons/ethereum.svg",
     name: "Sample Token",
     socialUrls: {

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx

@@ -19,6 +19,7 @@ import { YoutubeIcon } from "@/icons/brand-icons/YoutubeIcon";
 import { ChainIconClient } from "@/icons/ChainIcon";
 import { cn } from "@/lib/utils";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
+import { ContractCreatorBadge } from "./ContractCreatorBadge";
 
 const platformToIcons: Record<string, React.FC<{ className?: string }>> = {
   discord: DiscordIcon,
@@ -42,6 +43,7 @@ export function ContractHeaderUI(props: {
   clientContract: ThirdwebContract;
   socialUrls: object;
   imageClassName?: string;
+  contractCreator: string | null;
 }) {
   const socialUrls = useMemo(() => {
     const socialUrlsValue: { name: string; href: string }[] = [];
@@ -147,6 +149,13 @@ export function ContractHeaderUI(props: {
 
         {/* bottom row */}
         <div className="flex flex-row flex-wrap items-center gap-2">
+          {props.contractCreator && (
+            <ContractCreatorBadge
+              clientContract={props.clientContract}
+              contractCreator={props.contractCreator}
+            />
+          )}
+
           <ToolTipLabel
             contentClassName="max-w-[300px]"
             label={

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx

@@ -2,6 +2,8 @@ import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import { decimals, getActiveClaimCondition } from "thirdweb/extensions/erc20";
+import { resolveFunctionSelectors } from "@/lib/selectors";
+import { getContractCreator } from "../_components/getContractCreator";
 import { PageHeader } from "../_components/PageHeader";
 import { ContractHeaderUI } from "./_components/ContractHeader";
 import { TokenDropClaim } from "./_components/claim-tokens/claim-tokens-ui";
@@ -16,25 +18,33 @@ export async function ERC20PublicPage(props: {
   clientContract: ThirdwebContract;
   chainMetadata: ChainMetadata;
 }) {
-  const [contractMetadata, activeClaimCondition, tokenDecimals] =
-    await Promise.all([
-      getContractMetadata({
-        contract: props.serverContract,
-      }),
-      getActiveClaimConditionWithErrorHandler(props.serverContract),
-      decimals({
-        contract: props.serverContract,
-      }),
-    ]);
+  const [
+    contractMetadata,
+    activeClaimCondition,
+    tokenDecimals,
+    functionSelectors,
+  ] = await Promise.all([
+    getContractMetadata({
+      contract: props.serverContract,
+    }),
+    getActiveClaimConditionWithErrorHandler(props.serverContract),
+    decimals({
+      contract: props.serverContract,
+    }),
+    resolveFunctionSelectors(props.serverContract),
+  ]);
 
-  const claimConditionCurrencyMeta = activeClaimCondition
-    ? await getCurrencyMeta({
-        chain: props.serverContract.chain,
-        chainMetadata: props.chainMetadata,
-        client: props.serverContract.client,
-        currencyAddress: activeClaimCondition.currency,
-      }).catch(() => undefined)
-    : undefined;
+  const [contractCreator, claimConditionCurrencyMeta] = await Promise.all([
+    getContractCreator(props.serverContract, functionSelectors),
+    activeClaimCondition
+      ? getCurrencyMeta({
+          chain: props.serverContract.chain,
+          chainMetadata: props.chainMetadata,
+          client: props.serverContract.client,
+          currencyAddress: activeClaimCondition.currency,
+        }).catch(() => undefined)
+      : undefined,
+  ]);
 
   const buyEmbed = (
     <BuyEmbed
@@ -62,6 +72,7 @@ export async function ERC20PublicPage(props: {
         <ContractHeaderUI
           chainMetadata={props.chainMetadata}
           clientContract={props.clientContract}
+          contractCreator={contractCreator}
           image={contractMetadata.image}
           name={contractMetadata.name}
           socialUrls={

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page-layout.tsx

@@ -12,6 +12,7 @@ export function NFTPublicPageLayout(props: {
     [key: string]: unknown;
   };
   children: React.ReactNode;
+  contractCreator: string | null;
 }) {
   return (
     <div className="flex grow flex-col">
@@ -20,6 +21,7 @@ export function NFTPublicPageLayout(props: {
         <ContractHeaderUI
           chainMetadata={props.chainMetadata}
           clientContract={props.clientContract}
+          contractCreator={props.contractCreator}
           image={
             typeof props.contractMetadata.image === "string"
               ? props.contractMetadata.image

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/nft-page.tsx

@@ -6,6 +6,7 @@ import { ResponsiveLayout } from "@/components/blocks/Responsive";
 import { Skeleton } from "@/components/ui/skeleton";
 import { resolveFunctionSelectors } from "@/lib/selectors";
 import { cn } from "@/lib/utils";
+import { getContractCreator } from "../_components/getContractCreator";
 import { NFTPublicPageLayout } from "./nft-page-layout";
 import {
   BuyNFTDropCardServer,
@@ -35,15 +36,17 @@ export async function NFTPublicPage(props: {
       }),
     ]);
 
-  const nftDropClaimParams =
+  const [contractCreator, nftDropClaimParams] = await Promise.all([
+    getContractCreator(props.serverContract, functionSelectors),
     props.type === "erc721"
-      ? await getNFTDropClaimParams({
+      ? getNFTDropClaimParams({
           chainMetadata: props.chainMetadata,
           functionSelectors,
           serverContract: props.serverContract,
           totalNFTCount,
         })
-      : undefined;
+      : undefined,
+  ]);
 
   const _isTokenByIndexSupported =
     props.type === "erc721" && isTokenByIndexSupported(functionSelectors);
@@ -101,6 +104,7 @@ export async function NFTPublicPage(props: {
     <NFTPublicPageLayout
       chainMetadata={props.chainMetadata}
       clientContract={props.clientContract}
+      contractCreator={contractCreator}
       contractMetadata={contractMetadata}
     >
       <ResponsiveLayout