[TOOL-4621] New ERC20 public contract page (#7177)

<!--

## 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 primarily focuses on enhancing the dashboard's functionality and user interface by updating environment variable usage, improving component layouts, and refining analytics features. It also introduces new components and modifies existing ones for better data handling and presentation.

### Detailed summary
- Added `NEXT_PUBLIC_DASHBOARD_CLIENT_ID` to `public-envs.ts`.
- Updated `CreateTokenAssetPage` to pass `teamSlug` and `projectSlug`.
- Changed `projectSlug` to use `project.slug` in `marketplace` page.
- Enhanced `EmptyChartState` to accept a `type` prop.
- Updated `getTokenStepTrackingData` to include "deploy" action.
- Introduced `LoadingDots` component for loading states.
- Refactored multiple layout components to include `TeamHeader`.
- Added new public page handling logic in various components.
- Updated analytics functions to utilize the new client ID.
- Improved error handling and response management in analytics API calls.
- Added `DecimalInput` component to replace standard input in `token-sale.tsx`.

> The following files were skipped due to too many changes: `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PriceChart.tsx`, `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx`

> ✨ 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 new layout components with team headers for various dashboard sections.
  - Introduced `LoadingDots` component for animated loading indicators.
  - Added `PublicPageConnectButton` and `PageHeader` components for public pages.
  - Implemented public ERC-20 token page with price charts, token stats, recent transfers, and buy token embed.
  - Added token claim card UI with transaction step feedback for purchasing tokens.
  - Added hooks for fetching token price data and token transfers.
  - Added utility to fetch currency metadata for tokens.
  - Added comprehensive contract analytics overview component.
  - Introduced `DecimalInput` component for validated decimal input handling.
  - Added new social media brand icons for Discord and Telegram.

- **Improvements**
  - Enhanced area and bar charts with customizable styles, tooltip formatting, and explicit empty state types.
  - Improved empty chart state visuals with new area chart gradients and replaced spinner with animated dots.
  - Unified environment variable usage for client IDs across API calls and client initializations.
  - Updated contract overview to display call-to-action banner linking to public asset pages for ERC-20 tokens.
  - Enhanced contract table to conditionally show contract address or asset page links based on context.
  - Improved primary dashboard button to link to asset pages when applicable.
  - Added redirects to public landing pages for unsupported contract views lacking project metadata.
  - Wrapped existing layouts with conditional team headers for consistent UI in public/private views.
  - Added pagination and detailed tables for recent token transfers.
  - Updated project slug usage in marketplace listings for accuracy.
  - Introduced dynamic time precision handling in analytics charts and tooltips.
  - Added optional balance check control to transaction and mismatch buttons.
  - Replaced local decimal input component with shared validated decimal input component.
  - Added optional target attribute for call-to-action links in upsell banners.
  - Refined accessibility and sizing of icon components.

- **Bug Fixes**
  - Fixed environment variable naming for client IDs to ensure consistent API integration.

- **Refactor**
  - Standardized header and layout components for a unified dashboard experience.
  - Replaced spinner with animated dots in loading states for smoother UX.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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_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_CLIENT_ID,
     },
   });
 

apps/dashboard/src/@/components/blocks/UpsellBannerCard.tsx

@@ -41,6 +41,7 @@ type UpsellBannerCardProps = {
   cta: {
     text: React.ReactNode;
     icon?: React.ReactNode;
+    target?: "_blank";
     link: string;
   };
   trackingCategory: string;
@@ -55,7 +56,7 @@ export function UpsellBannerCard(props: UpsellBannerCardProps) {
   return (
     <div
       className={cn(
-        "relative overflow-hidden rounded-lg border bg-gradient-to-r p-5",
+        "relative overflow-hidden rounded-lg border bg-gradient-to-r p-4 lg:p-6",
         color.border,
         color.bgFrom,
       )}
@@ -73,7 +74,7 @@ export function UpsellBannerCard(props: UpsellBannerCardProps) {
           {props.icon ? (
             <div
               className={cn(
-                "mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full",
+                "mt-0.5 hidden h-9 w-9 shrink-0 items-center justify-center rounded-full lg:flex",
                 color.iconBg,
               )}
             >
@@ -90,9 +91,7 @@ export function UpsellBannerCard(props: UpsellBannerCardProps) {
             >
               {props.title}
             </h3>
-            <p className={cn("mt-0.5 text-sm", color.desc)}>
-              {props.description}
-            </p>
+            <p className={cn("text-sm", color.desc)}>{props.description}</p>
           </div>
         </div>
 
@@ -108,6 +107,7 @@ export function UpsellBannerCard(props: UpsellBannerCardProps) {
             href={props.cta.link}
             category={props.trackingCategory}
             label={props.trackingLabel}
+            target={props.cta.target}
           >
             {props.cta.text}
             {props.cta.icon && <span className="ml-2">{props.cta.icon}</span>}

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/@/components/ui/decimal-input.tsx

@@ -0,0 +1,35 @@
+import { Input } from "./input";
+export function DecimalInput(props: {
+  value: string;
+  onChange: (value: string) => void;
+  maxValue?: number;
+  id?: string;
+  className?: string;
+}) {
+  return (
+    <Input
+      id={props.id}
+      type="text"
+      value={props.value}
+      className={props.className}
+      inputMode="decimal"
+      onChange={(e) => {
+        const number = Number(e.target.value);
+        // ignore if string becomes invalid number
+        if (Number.isNaN(number)) {
+          return;
+        }
+        if (props.maxValue && number > props.maxValue) {
+          return;
+        }
+        // replace leading multiple zeros with single zero
+        let cleanedValue = e.target.value.replace(/^0+/, "0");
+        // replace leading zero before decimal point
+        if (!cleanedValue.includes(".")) {
+          cleanedValue = cleanedValue.replace(/^0+/, "");
+        }
+        props.onChange(cleanedValue || "0");
+      }}
+    />
+  );
+}

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

@@ -1,4 +1,4 @@
-export const NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID =
+export const NEXT_PUBLIC_DASHBOARD_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_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_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_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_CLIENT_ID,
   );
 
   // based on the environment hit dev or production