[TOOL-4621] New ERC20 public contract page

Author: MananTank

apps/dashboard/src/@/actions/getWalletNFTs.ts

@@ -12,7 +12,7 @@ import type { WalletNFT } from "lib/wallet/nfts/types";
 import { getVercelEnv } from "../../lib/vercel-utils";
 import { isAlchemySupported } from "../../lib/wallet/nfts/isAlchemySupported";
 import { isMoralisSupported } from "../../lib/wallet/nfts/isMoralisSupported";
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "../constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "../constants/public-envs";
 import { MORALIS_API_KEY } from "../constants/server-envs";
 
 type WalletNFTApiReturn =
@@ -149,7 +149,7 @@ async function getWalletNFTsFromInsight(params: {
 
   const response = await fetch(url, {
     headers: {
-      "x-client-id": NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+      "x-client-id": NEXT_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
     },
   });
 

apps/dashboard/src/@/components/blocks/charts/area-chart.tsx

@@ -46,8 +46,12 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
   // chart className
   chartClassName?: string;
   isPending: boolean;
+  className?: string;
+  cardContentClassName?: string;
   hideLabel?: boolean;
   toolTipLabelFormatter?: (label: string, payload: unknown) => React.ReactNode;
+  toolTipValueFormatter?: (value: unknown) => React.ReactNode;
+  emptyChartState?: React.ReactElement;
 };
 
 export function ThirdwebAreaChart<TConfig extends ChartConfig>(
@@ -56,7 +60,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
   const configKeys = useMemo(() => Object.keys(props.config), [props.config]);
 
   return (
-    <Card>
+    <Card className={props.className}>
       {props.header && (
         <CardHeader>
           <CardTitle className={cn("mb-2", props.header.titleClassName)}>
@@ -70,12 +74,16 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
 
       {props.customHeader && props.customHeader}
 
-      <CardContent className={cn(!props.header && "pt-6")}>
+      <CardContent
+        className={cn(!props.header && "pt-6", props.cardContentClassName)}
+      >
         <ChartContainer config={props.config} className={props.chartClassName}>
           {props.isPending ? (
             <LoadingChartState />
           ) : props.data.length === 0 ? (
-            <EmptyChartState />
+            <EmptyChartState type="area">
+              {props.emptyChartState}
+            </EmptyChartState>
           ) : (
             <AreaChart accessibilityLayer data={props.data}>
               <CartesianGrid vertical={false} />
@@ -100,6 +108,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
                       props.hideLabel !== undefined ? props.hideLabel : true
                     }
                     labelFormatter={props.toolTipLabelFormatter}
+                    valueFormatter={props.toolTipValueFormatter}
                   />
                 }
               />

apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx

@@ -75,7 +75,9 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
           {props.isPending ? (
             <LoadingChartState />
           ) : props.data.length === 0 ? (
-            <EmptyChartState>{props.emptyChartState}</EmptyChartState>
+            <EmptyChartState type="bar">
+              {props.emptyChartState}
+            </EmptyChartState>
           ) : (
             <BarChart accessibilityLayer data={props.data}>
               <CartesianGrid vertical={false} />

apps/dashboard/src/@/components/ui/LoadingDots.tsx

@@ -0,0 +1,10 @@
+export function LoadingDots() {
+  return (
+    <div className="fade-in-0 flex animate-in gap-2 duration-300">
+      <span className="sr-only">Loading...</span>
+      <div className="size-4 animate-bounce rounded-full bg-foreground [animation-delay:-0.3s]" />
+      <div className="size-4 animate-bounce rounded-full bg-foreground [animation-delay:-0.15s]" />
+      <div className="size-4 animate-bounce rounded-full bg-foreground" />
+    </div>
+  );
+}

apps/dashboard/src/@/constants/public-envs.ts

@@ -1,4 +1,4 @@
-export const NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID =
+export const NEXT_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID =
   process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID || "";
 
 export const NEXT_PUBLIC_NEBULA_APP_CLIENT_ID =

apps/dashboard/src/@/constants/thirdweb.server.ts

@@ -1,5 +1,5 @@
 import {
-  NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+  NEXT_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
   NEXT_PUBLIC_IPFS_GATEWAY_URL,
 } from "@/constants/public-envs";
 import {
@@ -76,7 +76,7 @@ export function getConfiguredThirdwebClient(options: {
   return createThirdwebClient({
     teamId: options.teamId,
     secretKey: options.secretKey,
-    clientId: NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+    clientId: NEXT_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
     config: {
       storage: {
         gatewayUrl: NEXT_PUBLIC_IPFS_GATEWAY_URL,

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/layout.tsx

@@ -0,0 +1,16 @@
+import { TeamHeader } from "../../team/components/TeamHeader/team-header";
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex grow flex-col">
+      <div className="border-border border-b bg-card">
+        <TeamHeader />
+      </div>
+      {children}
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx

@@ -4,7 +4,7 @@ import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { isProd } from "@/constants/env-utils";
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "@/constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "@/constants/public-envs";
 import { useQuery } from "@tanstack/react-query";
 import { CircleCheckIcon, XIcon } from "lucide-react";
 import { hostnameEndsWith } from "utils/url";
@@ -14,7 +14,7 @@ function useChainStatswithRPC(_rpcUrl: string) {
   let rpcUrl = _rpcUrl.replace(
     // eslint-disable-next-line no-template-curly-in-string
     "${THIRDWEB_API_KEY}",
-    NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+    NEXT_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
   );
 
   // based on the environment hit dev or production

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx

@@ -24,6 +24,7 @@ import {
   getAuthToken,
   getAuthTokenWalletAddress,
 } from "../../../../api/lib/getAuthToken";
+import { TeamHeader } from "../../../../team/components/TeamHeader/team-header";
 import { StarButton } from "../../components/client/star-button";
 import { getChain, getChainMetadata } from "../../utils";
 import { AddChainToWallet } from "./components/client/add-chain-to-wallet";
@@ -95,7 +96,10 @@ The following is the user's message:
   }
 
   return (
-    <>
+    <div className="flex grow flex-col">
+      <div className="border-border border-b bg-card">
+        <TeamHeader />
+      </div>
       <NebulaChatButton
         isLoggedIn={!!authToken}
         networks={chain.testnet ? "testnet" : "mainnet"}
@@ -225,7 +229,7 @@ The following is the user's message:
           {children}
         </div>
       </div>
-    </>
+    </div>
   );
 }
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx

@@ -82,21 +82,19 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
               </h1>
             )}
 
-            {chain && (
-              <Link
-                href={`/${chain.slug}`}
-                className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-card px-2.5 py-1.5 hover:bg-accent"
-              >
-                <ChainIconClient
-                  src={chain.icon?.url}
-                  client={client}
-                  className="size-4"
-                />
-                {cleanedChainName && (
-                  <span className="text-xs">{cleanedChainName}</span>
-                )}
-              </Link>
-            )}
+            <Link
+              href={`/${chain.slug}`}
+              className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-card px-2.5 py-1.5 hover:bg-accent"
+            >
+              <ChainIconClient
+                src={chain.icon?.url}
+                client={client}
+                className="size-4"
+              />
+              {cleanedChainName && (
+                <span className="text-xs">{cleanedChainName}</span>
+              )}
+            </Link>
           </div>
         )}
 
@@ -115,7 +113,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
           <CopyAddressButton
             address={address}
             copyIconPosition="left"
-            className="bg-card text-xs"
+            className="bg-card px-2.5 py-1.5 text-xs"
             variant="outline"
           />