From 3b1e16c8b709f61ab4ab751e5be14fc438f4e4ce Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Thu, 29 May 2025 23:03:08 +0000
Subject: [PATCH] [TOOL-4621] New ERC20 public contract page (#7177)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 -->
---
 apps/dashboard/src/@/actions/getWalletNFTs.ts |   4 +-
 .../@/components/blocks/UpsellBannerCard.tsx  |  10 +-
 .../@/components/blocks/charts/area-chart.tsx |  15 +-
 .../@/components/blocks/charts/bar-chart.tsx  |   4 +-
 .../src/@/components/ui/LoadingDots.tsx       |  10 +
 .../src/@/components/ui/decimal-input.tsx     |  35 ++
 apps/dashboard/src/@/constants/public-envs.ts |   2 +-
 .../src/@/constants/thirdweb.server.ts        |   4 +-
 .../app/(app)/(dashboard)/(bridge)/layout.tsx |  16 +
 .../components/client/live-stats.tsx          |   4 +-
 .../(chain)/[chain_id]/(chainPage)/layout.tsx |   8 +-
 .../_layout/metadata-header.tsx               |  30 +-
 .../_layout/primary-dashboard-button.tsx      |  12 +-
 .../[contractAddress]/_utils/newPublicPage.ts |  31 ++
 .../analytics/shared-analytics-page.tsx       |  13 +
 .../shared-claim-conditions-page.tsx          |  13 +
 .../code/shared-code-page.tsx                 |  14 +
 .../cross-chain/shared-cross-chain-page.tsx   |  14 +
 .../events/shared-events-page.tsx             |  14 +
 .../explorer/shared-explorer-page.tsx         |  14 +
 .../overview/ContractOverviewPage.tsx         |  18 +
 .../overview/components/Analytics.tsx         | 169 +++++---
 .../permissions/shared-permissions-page.tsx   |  14 +
 .../public-pages/_components/PageHeader.tsx   |  26 ++
 .../_components/PublicPageConnectButton.tsx   |  40 ++
 .../_components/ContractHeader.stories.tsx    | 199 ++++++++++
 .../erc20/_components/ContractHeader.tsx      | 220 +++++++++++
 .../erc20/_components/PayEmbedSection.tsx     |  46 +++
 .../erc20/_components/PriceChart.tsx          | 314 +++++++++++++++
 .../erc20/_components/RecentTransfers.tsx     | 237 +++++++++++
 .../claim-tokens/claim-tokens-ui.stories.tsx  |  86 ++++
 .../claim-tokens/claim-tokens-ui.tsx          | 368 ++++++++++++++++++
 .../contract-analytics/contract-analytics.tsx |  67 ++++
 .../erc20/_hooks/useTokenPriceData.ts         |  56 +++
 .../erc20/_hooks/useTokenTransfers.ts         |  54 +++
 .../erc20/_utils/getCurrencyMeta.ts           |  44 +++
 .../public-pages/erc20/erc20.tsx              | 175 +++++++++
 .../settings/shared-settings-page.tsx         |  14 +
 .../[contractAddress]/shared-layout.tsx       |  99 +++--
 .../shared-overview-page.tsx                  |  45 +++
 .../sources/shared-sources-page.tsx           |  14 +
 .../[contractAddress]/tokens/shared-page.tsx  |  14 +
 .../(chain)/[chain_id]/tx/layout.tsx          |  16 +
 .../(dashboard)/(chain)/chainlist/layout.tsx  |  16 +
 .../(app)/(dashboard)/contracts/layout.tsx    |  16 +
 .../app/(app)/(dashboard)/explore/layout.tsx  |  16 +
 .../src/app/(app)/(dashboard)/layout.tsx      |   4 -
 .../app/(app)/(dashboard)/profile/layout.tsx  |  16 +
 .../(dashboard)/published-contract/layout.tsx |  16 +
 .../app/(app)/(dashboard)/support/layout.tsx  |  16 +
 .../app/(app)/(dashboard)/tools/layout.tsx    |  58 +--
 .../assets/create/create-token-page-impl.tsx  |  28 ++
 .../create/create-token-page.client.tsx       |   4 +
 .../create/create-token-page.stories.tsx      |   4 +
 .../assets/create/distribution/token-sale.tsx |  37 +-
 .../assets/create/launch/launch-token.tsx     |   6 +-
 .../(sidebar)/assets/create/page.tsx          |   2 +
 .../(sidebar)/assets/create/tracking.ts       |   2 +-
 .../(marketplace)/direct-listings/page.tsx    |   2 +-
 .../team/components/Analytics/BarChart.tsx    |   2 +-
 apps/dashboard/src/app/bridge/constants.ts    |   4 +-
 .../CustomChat/CustomChatButton.tsx           |   4 +-
 apps/dashboard/src/app/pay/constants.ts       |   4 +-
 .../analytics/empty-chart-state.tsx           |  60 ++-
 .../src/components/buttons/MismatchButton.tsx |  12 +-
 .../components/buttons/TransactionButton.tsx  |   3 +
 .../tables/contract-table.tsx                 |  38 +-
 .../icons/brand-icons/DiscordIcon.tsx         |  28 ++
 .../icons/brand-icons/TelegramIcon.tsx        |  17 +
 .../components/icons/brand-icons/XIcon.tsx    |  15 +-
 .../analytics/contract-event-breakdown.ts     |   4 +-
 .../src/data/analytics/contract-events.ts     |   4 +-
 .../analytics/contract-function-breakdown.ts  |   4 +-
 .../data/analytics/contract-transactions.ts   |   4 +-
 .../analytics/contract-wallet-analytics.ts    |   4 +-
 .../data/analytics/total-contract-events.ts   |   4 +-
 .../analytics/total-contract-transactions.ts  |   4 +-
 .../data/analytics/total-unique-wallets.ts    |   4 +-
 78 files changed, 2820 insertions(+), 244 deletions(-)
 create mode 100644 apps/dashboard/src/@/components/ui/LoadingDots.tsx
 create mode 100644 apps/dashboard/src/@/components/ui/decimal-input.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(bridge)/layout.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/newPublicPage.ts
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PageHeader.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PriceChart.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.stories.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/contract-analytics/contract-analytics.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenPriceData.ts
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenTransfers.ts
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_utils/getCurrencyMeta.ts
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/layout.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/chainlist/layout.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/contracts/layout.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/explore/layout.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/profile/layout.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/published-contract/layout.tsx
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/support/layout.tsx
 create mode 100644 apps/dashboard/src/components/icons/brand-icons/DiscordIcon.tsx
 create mode 100644 apps/dashboard/src/components/icons/brand-icons/TelegramIcon.tsx

diff --git a/apps/dashboard/src/@/actions/getWalletNFTs.ts b/apps/dashboard/src/@/actions/getWalletNFTs.ts
index acf1286db0e..291e4a820bf 100644
--- a/apps/dashboard/src/@/actions/getWalletNFTs.ts
+++ b/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,
     },
   });
 
diff --git a/apps/dashboard/src/@/components/blocks/UpsellBannerCard.tsx b/apps/dashboard/src/@/components/blocks/UpsellBannerCard.tsx
index 04f86fbb030..a27dd16bd63 100644
--- a/apps/dashboard/src/@/components/blocks/UpsellBannerCard.tsx
+++ b/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>}
diff --git a/apps/dashboard/src/@/components/blocks/charts/area-chart.tsx b/apps/dashboard/src/@/components/blocks/charts/area-chart.tsx
index a944c819886..fab6079ee65 100644
--- a/apps/dashboard/src/@/components/blocks/charts/area-chart.tsx
+++ b/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}
                   />
                 }
               />
diff --git a/apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx b/apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx
index f89ef6ec9d3..799ed703dc5 100644
--- a/apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx
+++ b/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} />
diff --git a/apps/dashboard/src/@/components/ui/LoadingDots.tsx b/apps/dashboard/src/@/components/ui/LoadingDots.tsx
new file mode 100644
index 00000000000..864f4c60027
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/dashboard/src/@/components/ui/decimal-input.tsx b/apps/dashboard/src/@/components/ui/decimal-input.tsx
new file mode 100644
index 00000000000..2c9f251c3c5
--- /dev/null
+++ b/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");
+      }}
+    />
+  );
+}
diff --git a/apps/dashboard/src/@/constants/public-envs.ts b/apps/dashboard/src/@/constants/public-envs.ts
index 789b5737f46..58bbe701ddf 100644
--- a/apps/dashboard/src/@/constants/public-envs.ts
+++ b/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 =
diff --git a/apps/dashboard/src/@/constants/thirdweb.server.ts b/apps/dashboard/src/@/constants/thirdweb.server.ts
index e4b6ce0f2f1..07b68599c6d 100644
--- a/apps/dashboard/src/@/constants/thirdweb.server.ts
+++ b/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,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/layout.tsx
new file mode 100644
index 00000000000..df8af93e28d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
index 225559e7038..3506a49963b 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx
+++ b/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
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
index ac0bfb13101..1889279a110 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
+++ b/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>
   );
 }
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
index 3ea03d70cb2..a2d3b812ed3 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx
+++ b/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"
           />
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx
index 65ce88755df..4da649b8f1d 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx
@@ -81,7 +81,17 @@ export const PrimaryDashboardButton: React.FC<AddToDashboardCardProps> = ({
 
   // if user is on a project page
   if (projectMeta) {
-    return null;
+    return (
+      <Button variant="default" asChild>
+        <Link
+          href={`/${contractInfo.chainSlug}/${contractAddress}`}
+          target="_blank"
+          className="gap-2"
+        >
+          View Asset Page <ExternalLinkIcon className="size-3.5" />
+        </Link>
+      </Button>
+    );
   }
 
   return (
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/newPublicPage.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/newPublicPage.ts
new file mode 100644
index 00000000000..a463ba6c491
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/newPublicPage.ts
@@ -0,0 +1,31 @@
+import { resolveFunctionSelectors } from "lib/selectors";
+import type { ThirdwebContract } from "thirdweb";
+import { isERC20 } from "thirdweb/extensions/erc20";
+
+export type NewPublicPageType = "erc20";
+
+export async function shouldRenderNewPublicPage(
+  contract: ThirdwebContract,
+): Promise<false | { type: NewPublicPageType }> {
+  try {
+    const functionSelectors = await resolveFunctionSelectors(contract).catch(
+      () => undefined,
+    );
+
+    if (!functionSelectors) {
+      return false;
+    }
+
+    const isERC20Contract = isERC20(functionSelectors);
+
+    if (isERC20Contract) {
+      return {
+        type: "erc20",
+      };
+    }
+
+    return false;
+  } catch {
+    return false;
+  }
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx
index 9ff09746499..436237b44e6 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx
@@ -5,6 +5,7 @@ import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]
 import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
 import { ContractAnalyticsPage } from "./ContractAnalyticsPage";
 
 export async function SharedAnalyticsPage(props: {
@@ -22,6 +23,18 @@ export async function SharedAnalyticsPage(props: {
     notFound();
   }
 
+  // new public page can't show /analytics page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
   const [
     { eventSelectorToName, writeFnSelectorToName },
     { isInsightSupported },
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/claim-conditions/shared-claim-conditions-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/claim-conditions/shared-claim-conditions-page.tsx
index 698b1a20086..c02c148fa31 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/claim-conditions/shared-claim-conditions-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/claim-conditions/shared-claim-conditions-page.tsx
@@ -4,6 +4,7 @@ import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[
 import { ClaimConditions } from "../_components/claim-conditions/claim-conditions";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
 import { ClaimConditionsClient } from "./ClaimConditions.client";
 
 export async function SharedClaimConditionsPage(props: {
@@ -22,6 +23,18 @@ export async function SharedClaimConditionsPage(props: {
     notFound();
   }
 
+  // new public page can't show /claim-conditions page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
   const { clientContract, serverContract, isLocalhostChain } = info;
 
   if (isLocalhostChain) {
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/code/shared-code-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/code/shared-code-page.tsx
index 1f83d45e0ec..ac7281d408f 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/code/shared-code-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/code/shared-code-page.tsx
@@ -1,7 +1,9 @@
 import { notFound } from "next/navigation";
 import { resolveContractAbi } from "thirdweb/contract";
 import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
 import { ContractCodePage } from "./contract-code-page";
 import { ContractCodePageClient } from "./contract-code-page.client";
 
@@ -20,6 +22,18 @@ export async function SharedCodePage(props: {
     notFound();
   }
 
+  // new public page can't show /code page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
   const { clientContract, serverContract, chainMetadata, isLocalhostChain } =
     info;
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/shared-cross-chain-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/shared-cross-chain-page.tsx
index 95b706faa3e..181da3ef249 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/shared-cross-chain-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/shared-cross-chain-page.tsx
@@ -20,8 +20,10 @@ import { eth_getCode, getRpcClient } from "thirdweb/rpc";
 import type { TransactionReceipt } from "thirdweb/transaction";
 import { type AbiFunction, decodeFunctionData } from "thirdweb/utils";
 import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
 import { DataTable } from "./data-table";
 import { NoCrossChainPrompt } from "./no-crosschain-prompt";
 
@@ -48,6 +50,18 @@ export async function SharedCrossChainPage(props: {
     notFound();
   }
 
+  // new public page can't show /cross-chain page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
   const { clientContract, serverContract } = info;
 
   const isModularCore = (await getContractPageMetadata(serverContract))
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/shared-events-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/shared-events-page.tsx
index 28df9f5db48..cf089d87dfb 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/shared-events-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/shared-events-page.tsx
@@ -1,6 +1,8 @@
 import { notFound } from "next/navigation";
 import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
 import { EventsFeed } from "./events-feed";
 
 export async function SharedEventsPage(props: {
@@ -18,6 +20,18 @@ export async function SharedEventsPage(props: {
     notFound();
   }
 
+  // new public page can't show /events page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
   return (
     <EventsFeed
       contract={info.clientContract}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/shared-explorer-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/shared-explorer-page.tsx
index 279fda48104..efaac5d00d7 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/shared-explorer-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/shared-explorer-page.tsx
@@ -1,7 +1,9 @@
 import { notFound } from "next/navigation";
 import { resolveContractAbi } from "thirdweb/contract";
 import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
 import { ContractExplorerPage } from "./ContractExplorerPage";
 import { ContractExplorerPageClient } from "./ContractExplorerPage.client";
 
@@ -21,6 +23,18 @@ export async function SharedExplorerPage(props: {
     notFound();
   }
 
+  // new public page can't show /explorer page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
   const { clientContract, serverContract, chainMetadata, isLocalhostChain } =
     info;
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx
index 4114791bf89..9c304637b1f 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx
@@ -1,3 +1,5 @@
+import { UpsellBannerCard } from "@/components/blocks/UpsellBannerCard";
+import { ExternalLinkIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
 import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { TokenDetailsCard } from "../tokens/components/supply";
@@ -43,6 +45,22 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
   return (
     <div className="flex flex-col gap-10 lg:flex-row lg:gap-8">
       <div className="flex grow flex-col gap-10 overflow-hidden">
+        {isErc20 && (
+          <UpsellBannerCard
+            title="Public asset page available"
+            description="A public page is available for this contract for anyone to buy this asset"
+            cta={{
+              text: "View asset page",
+              icon: <ExternalLinkIcon className="size-4" />,
+              target: "_blank",
+              link: `/${chainSlug}/${contract.address}`,
+            }}
+            trackingCategory="erc20-contract"
+            trackingLabel="view-asset-page"
+            accentColor="blue"
+          />
+        )}
+
         <ContractChecklist
           isErc721={isErc721}
           isErc1155={isErc1155}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx
index 95d8a17f992..d7132f9c04a 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx
@@ -7,6 +7,7 @@ import {
   useContractTransactionAnalytics,
   useContractUniqueWalletAnalytics,
 } from "data/analytics/hooks";
+import { differenceInCalendarDays, formatDate } from "date-fns";
 import { useTrack } from "hooks/analytics/useTrack";
 import { ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
@@ -14,8 +15,14 @@ import { useMemo, useState } from "react";
 import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { buildContractPagePath } from "../../_utils/contract-page-path";
 
-function getDayKey(date: Date) {
-  return date.toISOString().split("T")[0];
+function getDateKey(date: Date, precision: "day" | "hour") {
+  const dayKey = date.toISOString().split("T")[0];
+  if (precision === "day") {
+    return dayKey;
+  }
+
+  const hourKey = date.getHours();
+  return `${dayKey}-${hourKey}`;
 }
 
 export function ContractAnalyticsOverviewCard(props: {
@@ -34,60 +41,13 @@ export function ContractAnalyticsOverviewCard(props: {
     })(),
   );
   const [endDate] = useState(new Date());
-
-  const wallets = useContractUniqueWalletAnalytics({
-    chainId: props.chainId,
-    contractAddress: props.contractAddress,
-    startDate,
-    endDate,
-  });
-
-  const transactions = useContractTransactionAnalytics({
+  const { data, precision, isPending } = useContractAnalyticsOverview({
     chainId: props.chainId,
     contractAddress: props.contractAddress,
     startDate,
     endDate,
   });
 
-  const events = useContractEventAnalytics({
-    chainId: props.chainId,
-    contractAddress: props.contractAddress,
-    startDate,
-    endDate,
-  });
-
-  const isPending =
-    wallets.isPending || transactions.isPending || events.isPending;
-
-  const mergedData = useMemo(() => {
-    if (isPending) {
-      return undefined;
-    }
-
-    const time = (wallets.data || transactions.data || events.data || []).map(
-      (wallet) => wallet.time,
-    );
-
-    return time.map((time) => {
-      const wallet = wallets.data?.find(
-        (wallet) => getDayKey(wallet.time) === getDayKey(time),
-      );
-      const transaction = transactions.data?.find(
-        (transaction) => getDayKey(transaction.time) === getDayKey(time),
-      );
-      const event = events.data?.find((event) => {
-        return getDayKey(event.time) === getDayKey(time);
-      });
-
-      return {
-        time,
-        wallets: wallet?.count || 0,
-        transactions: transaction?.count || 0,
-        events: event?.count || 0,
-      };
-    });
-  }, [wallets.data, transactions.data, events.data, isPending]);
-
   const analyticsPath = buildContractPagePath({
     projectMeta: props.projectMeta,
     chainIdOrSlug: props.chainSlug,
@@ -111,10 +71,11 @@ export function ContractAnalyticsOverviewCard(props: {
           color: "hsl(var(--chart-3))",
         },
       }}
-      data={mergedData || []}
+      data={data || []}
       isPending={isPending}
       showLegend
       chartClassName="aspect-[1.5] lg:aspect-[3]"
+      toolTipLabelFormatter={toolTipLabelFormatterWithPrecision(precision)}
       customHeader={
         <div className="flex items-center justify-between gap-4 border-b p-6 py-4">
           <h2 className="font-semibold text-xl tracking-tight">Analytics</h2>
@@ -141,3 +102,109 @@ export function ContractAnalyticsOverviewCard(props: {
     />
   );
 }
+
+export function useContractAnalyticsOverview(props: {
+  chainId: number;
+  contractAddress: string;
+  startDate: Date;
+  endDate: Date;
+}) {
+  const { chainId, contractAddress, startDate, endDate } = props;
+  const wallets = useContractUniqueWalletAnalytics({
+    chainId: chainId,
+    contractAddress: contractAddress,
+    startDate,
+    endDate,
+  });
+
+  const transactions = useContractTransactionAnalytics({
+    chainId: chainId,
+    contractAddress: contractAddress,
+    startDate,
+    endDate,
+  });
+
+  const events = useContractEventAnalytics({
+    chainId: chainId,
+    contractAddress: contractAddress,
+    startDate,
+    endDate,
+  });
+
+  const isPending =
+    wallets.isPending || transactions.isPending || events.isPending;
+
+  const { data, precision } = useMemo(() => {
+    if (isPending) {
+      return {
+        data: undefined,
+        precision: "day" as const,
+      };
+    }
+
+    const time = (wallets.data || transactions.data || events.data || []).map(
+      (wallet) => wallet.time,
+    );
+
+    // if the time difference between the first and last time is less than 3 days - use hour precision
+    const firstTime = time[0];
+    const lastTime = time[time.length - 1];
+    const timeDiff =
+      firstTime && lastTime
+        ? differenceInCalendarDays(lastTime, firstTime)
+        : undefined;
+
+    const precision: "day" | "hour" = !timeDiff
+      ? "hour"
+      : timeDiff < 3
+        ? "hour"
+        : "day";
+
+    return {
+      data: time.map((time) => {
+        const wallet = wallets.data?.find(
+          (wallet) =>
+            getDateKey(wallet.time, precision) === getDateKey(time, precision),
+        );
+        const transaction = transactions.data?.find(
+          (transaction) =>
+            getDateKey(transaction.time, precision) ===
+            getDateKey(time, precision),
+        );
+
+        const event = events.data?.find((event) => {
+          return (
+            getDateKey(event.time, precision) === getDateKey(time, precision)
+          );
+        });
+
+        return {
+          time,
+          wallets: wallet?.count || 0,
+          transactions: transaction?.count || 0,
+          events: event?.count || 0,
+        };
+      }),
+      precision,
+    };
+  }, [wallets.data, transactions.data, events.data, isPending]);
+
+  return {
+    data,
+    precision,
+    isPending,
+  };
+}
+
+export function toolTipLabelFormatterWithPrecision(precision: "day" | "hour") {
+  return function toolTipLabelFormatter(_v: string, item: unknown) {
+    if (Array.isArray(item)) {
+      const time = item[0].payload.time as number;
+      return formatDate(
+        new Date(time),
+        precision === "day" ? "MMM d, yyyy" : "MMM d, yyyy hh:mm a",
+      );
+    }
+    return undefined;
+  };
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/shared-permissions-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/shared-permissions-page.tsx
index 877506d5207..6bee04d58a6 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/shared-permissions-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/shared-permissions-page.tsx
@@ -1,7 +1,9 @@
 import { notFound } from "next/navigation";
 import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
 import { ContractPermissionsPage } from "./ContractPermissionsPage";
 import { ContractPermissionsPageClient } from "./ContractPermissionsPage.client";
 
@@ -21,6 +23,18 @@ export async function SharedPermissionsPage(props: {
     notFound();
   }
 
+  // new public page can't show /permissions page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
   const { clientContract, serverContract, isLocalhostChain } = info;
   if (isLocalhostChain) {
     return (
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PageHeader.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PageHeader.tsx
new file mode 100644
index 00000000000..9ab0b2c8073
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PageHeader.tsx
@@ -0,0 +1,26 @@
+import { ToggleThemeButton } from "@/components/color-mode-toggle";
+import Link from "next/link";
+import { ThirdwebMiniLogo } from "../../../../../../components/ThirdwebMiniLogo";
+import { PublicPageConnectButton } from "./PublicPageConnectButton";
+
+export function PageHeader() {
+  return (
+    <div className="border-b border-dashed">
+      <header className="container flex max-w-8xl justify-between py-3">
+        <div className="flex items-center gap-4">
+          <Link href="/team" className="flex items-center gap-2">
+            <ThirdwebMiniLogo className="h-6" />
+            <span className="hidden font-bold text-2xl tracking-tight lg:block">
+              thirdweb
+            </span>
+          </Link>
+        </div>
+
+        <div className="flex items-center gap-5">
+          <ToggleThemeButton />
+          <PublicPageConnectButton />
+        </div>
+      </header>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton.tsx
new file mode 100644
index 00000000000..0e1aede509a
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PublicPageConnectButton.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
+import { useAllChainsData } from "hooks/chains/allChains";
+import { useTheme } from "next-themes";
+import { ConnectButton } from "thirdweb/react";
+
+const client = getClientThirdwebClient();
+
+export function PublicPageConnectButton(props: {
+  connectButtonClassName?: string;
+}) {
+  const { theme } = useTheme();
+  const t = theme === "light" ? "light" : "dark";
+  const { allChainsV5 } = useAllChainsData();
+
+  return (
+    <ConnectButton
+      theme={getSDKTheme(t)}
+      client={client}
+      connectModal={{
+        privacyPolicyUrl: "/privacy-policy",
+        termsOfServiceUrl: "/terms",
+        showThirdwebBranding: false,
+      }}
+      connectButton={{
+        className: props.connectButtonClassName,
+      }}
+      appMetadata={{
+        name: "thirdweb",
+        logoUrl: "https://thirdweb.com/favicon.ico",
+        url: "https://thirdweb.com",
+      }}
+      chains={allChainsV5}
+      // we have an AutoConnect already added in root layout with AA configuration
+      autoConnect={false}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx
new file mode 100644
index 00000000000..a2bd697d625
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx
@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { storybookThirdwebClient } from "stories/utils";
+import { getContract } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { ThirdwebProvider } from "thirdweb/react";
+import { ContractHeaderUI } from "./ContractHeader";
+
+const meta = {
+  title: "ERC20/ContractHeader",
+  component: ContractHeaderUI,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThirdwebProvider>
+        <div className="container max-w-7xl py-10">
+          <Story />
+        </div>
+      </ThirdwebProvider>
+    ),
+  ],
+} satisfies Meta<typeof ContractHeaderUI>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockTokenImage =
+  "ipfs://ipfs/QmXYgTEavjF6c9X1a2pt5E379MYqSwFzzKvsUbSnRiSUEc/ea207d218948137.67aa26cfbd956.png";
+
+const ethereumChainMetadata: ChainMetadata = {
+  name: "Ethereum Mainnet",
+  chain: "ethereum",
+  chainId: 1,
+  networkId: 1,
+  nativeCurrency: {
+    name: "Ether",
+    symbol: "ETH",
+    decimals: 18,
+  },
+  rpc: ["https://eth.llamarpc.com"],
+  shortName: "eth",
+  slug: "ethereum",
+  testnet: false,
+  icon: {
+    url: "https://thirdweb.com/chain-icons/ethereum.svg",
+    width: 24,
+    height: 24,
+    format: "svg",
+  },
+  explorers: [
+    {
+      name: "Etherscan",
+      url: "https://etherscan.io",
+      standard: "EIP3091",
+    },
+  ],
+  stackType: "evm",
+};
+
+const mockContract = getContract({
+  client: storybookThirdwebClient,
+  chain: {
+    id: 1,
+    name: "Ethereum",
+    rpc: "https://eth.llamarpc.com",
+  },
+  address: "0x1234567890123456789012345678901234567890",
+});
+
+const mockSocialUrls = {
+  twitter: "https://twitter.com",
+  discord: "https://discord.gg",
+  telegram: "https://web.telegram.org/",
+  website: "https://example.com",
+  github: "https://github.com",
+  linkedin: "https://linkedin.com",
+  tiktok: "https://tiktok.com",
+  instagram: "https://instagram.com",
+  custom: "https://example.com",
+  reddit: "https://reddit.com",
+  youtube: "https://youtube.com",
+};
+
+export const WithImageAndMultipleSocialUrls: Story = {
+  args: {
+    name: "Sample Token",
+    symbol: "SMPL",
+    image: mockTokenImage,
+    chainMetadata: ethereumChainMetadata,
+    clientContract: mockContract,
+    socialUrls: {
+      twitter: mockSocialUrls.twitter,
+      discord: mockSocialUrls.discord,
+      telegram: mockSocialUrls.telegram,
+      website: mockSocialUrls.website,
+      github: mockSocialUrls.github,
+    },
+  },
+};
+
+export const WithBrokenImageAndSingleSocialUrl: Story = {
+  args: {
+    name: "Sample Token",
+    symbol: "SMPL",
+    image: "broken-image.png",
+    chainMetadata: ethereumChainMetadata,
+    clientContract: mockContract,
+    socialUrls: {
+      website: mockSocialUrls.website,
+    },
+  },
+};
+
+export const WithoutImageAndNoSocialUrls: Story = {
+  args: {
+    name: "Sample Token",
+    symbol: "SMPL",
+    image: undefined,
+    chainMetadata: ethereumChainMetadata,
+    clientContract: mockContract,
+    socialUrls: {},
+  },
+};
+
+export const LongNameAndLotsOfSocialUrls: Story = {
+  args: {
+    name: "This is a very long token name that should wrap to multiple lines",
+    symbol: "LONG",
+    image: "https://thirdweb.com/chain-icons/ethereum.svg",
+    chainMetadata: ethereumChainMetadata,
+    clientContract: mockContract,
+    socialUrls: {
+      twitter: mockSocialUrls.twitter,
+      discord: mockSocialUrls.discord,
+      telegram: mockSocialUrls.telegram,
+      reddit: mockSocialUrls.reddit,
+      youtube: mockSocialUrls.youtube,
+      website: mockSocialUrls.website,
+      github: mockSocialUrls.github,
+    },
+  },
+};
+
+export const AllSocialUrls: Story = {
+  args: {
+    name: "Sample Token",
+    symbol: "SMPL",
+    image: "https://thirdweb.com/chain-icons/ethereum.svg",
+    chainMetadata: ethereumChainMetadata,
+    clientContract: mockContract,
+    socialUrls: {
+      twitter: mockSocialUrls.twitter,
+      discord: mockSocialUrls.discord,
+      telegram: mockSocialUrls.telegram,
+      reddit: mockSocialUrls.reddit,
+      youtube: mockSocialUrls.youtube,
+      website: mockSocialUrls.website,
+      github: mockSocialUrls.github,
+      linkedin: mockSocialUrls.linkedin,
+      tiktok: mockSocialUrls.tiktok,
+      instagram: mockSocialUrls.instagram,
+      custom: mockSocialUrls.custom,
+    },
+  },
+};
+
+export const InvalidSocialUrls: Story = {
+  args: {
+    name: "Sample Token",
+    symbol: "SMPL",
+    image: "https://thirdweb.com/chain-icons/ethereum.svg",
+    chainMetadata: ethereumChainMetadata,
+    clientContract: mockContract,
+    socialUrls: {
+      twitter: "invalid-url",
+      discord: "invalid-url",
+      telegram: "invalid-url",
+      reddit: "",
+      youtube: mockSocialUrls.youtube,
+    },
+  },
+};
+
+export const SomeSocialUrls: Story = {
+  args: {
+    name: "Sample Token",
+    symbol: "SMPL",
+    image: "https://thirdweb.com/chain-icons/ethereum.svg",
+    chainMetadata: ethereumChainMetadata,
+    clientContract: mockContract,
+    socialUrls: {
+      website: mockSocialUrls.website,
+      twitter: mockSocialUrls.twitter,
+    },
+  },
+};
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
new file mode 100644
index 00000000000..f5c02f413cf
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
@@ -0,0 +1,220 @@
+import { Img } from "@/components/blocks/Img";
+import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
+import { Button } from "@/components/ui/button";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
+import { cn } from "@/lib/utils";
+import { ChainIconClient } from "components/icons/ChainIcon";
+import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
+import { InstagramIcon } from "components/icons/brand-icons/InstagramIcon";
+import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
+import { RedditIcon } from "components/icons/brand-icons/RedditIcon";
+import { TiktokIcon } from "components/icons/brand-icons/TiktokIcon";
+import { XIcon as TwitterXIcon } from "components/icons/brand-icons/XIcon";
+import { YoutubeIcon } from "components/icons/brand-icons/YoutubeIcon";
+import { ExternalLinkIcon, GlobeIcon } from "lucide-react";
+import Link from "next/link";
+import { useMemo } from "react";
+import type { ThirdwebContract } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { DiscordIcon } from "../../../../../../../../../components/icons/brand-icons/DiscordIcon";
+import { TelegramIcon } from "../../../../../../../../../components/icons/brand-icons/TelegramIcon";
+
+const platformToIcons: Record<string, React.FC<{ className?: string }>> = {
+  twitter: TwitterXIcon,
+  x: TwitterXIcon,
+  discord: DiscordIcon,
+  telegram: TelegramIcon,
+  reddit: RedditIcon,
+  website: GlobeIcon,
+  github: GithubIcon,
+  youtube: YoutubeIcon,
+  instagram: InstagramIcon,
+  tiktok: TiktokIcon,
+  linkedin: LinkedInIcon,
+};
+
+export function ContractHeaderUI(props: {
+  name: string;
+  symbol: string | undefined;
+  image: string | undefined;
+  chainMetadata: ChainMetadata;
+  clientContract: ThirdwebContract;
+  socialUrls: object;
+}) {
+  const socialUrls = useMemo(() => {
+    const socialUrlsValue: { name: string; href: string }[] = [];
+    for (const [key, value] of Object.entries(props.socialUrls)) {
+      if (
+        typeof value === "string" &&
+        typeof key === "string" &&
+        isValidUrl(value)
+      ) {
+        socialUrlsValue.push({ name: key, href: value });
+      }
+    }
+
+    return socialUrlsValue;
+  }, [props.socialUrls]);
+
+  const cleanedChainName = props.chainMetadata?.name
+    ?.replace("Mainnet", "")
+    .trim();
+
+  const explorersToShow = getExplorersToShow(props.chainMetadata);
+
+  return (
+    <div className="flex flex-col items-start gap-4 border-b border-dashed py-8 lg:flex-row lg:items-center">
+      {props.image && (
+        <Img
+          className="size-20 shrink-0 rounded-full border bg-muted"
+          src={
+            props.image
+              ? resolveSchemeWithErrorHandler({
+                  uri: props.image,
+                  client: props.clientContract.client,
+                })
+              : ""
+          }
+          fallback={
+            <div className="flex items-center justify-center font-bold text-3xl text-muted-foreground/80">
+              {props.name[0]}
+            </div>
+          }
+        />
+      )}
+
+      <div className="flex flex-col gap-3">
+        {/* top row */}
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col flex-wrap gap-3 lg:flex-row lg:items-center">
+            <h1 className="line-clamp-2 font-bold text-2xl tracking-tight lg:text-3xl">
+              {props.name}
+            </h1>
+
+            <div className="flex flex-wrap gap-2">
+              <Link
+                href={`/${props.chainMetadata.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={props.chainMetadata.icon?.url || ""}
+                  client={props.clientContract.client}
+                  className="size-4"
+                />
+                {cleanedChainName && (
+                  <span className="text-xs">{cleanedChainName}</span>
+                )}
+              </Link>
+
+              {socialUrls
+                .toSorted((a, b) => {
+                  const aIcon = platformToIcons[a.name.toLowerCase()];
+                  const bIcon = platformToIcons[b.name.toLowerCase()];
+
+                  if (aIcon && bIcon) {
+                    return 0;
+                  }
+
+                  if (aIcon) {
+                    return -1;
+                  }
+
+                  return 1;
+                })
+                .map(({ name, href }) => (
+                  <SocialLink
+                    key={name}
+                    name={name}
+                    href={href}
+                    icon={platformToIcons[name.toLowerCase()]}
+                  />
+                ))}
+            </div>
+          </div>
+        </div>
+
+        {/* bottom row */}
+        <div className="flex flex-row flex-wrap items-center gap-2">
+          <CopyAddressButton
+            address={props.clientContract.address}
+            copyIconPosition="left"
+            className="rounded-full bg-card px-2.5 py-1.5 text-xs"
+            variant="outline"
+          />
+
+          {explorersToShow?.map((validBlockExplorer) => (
+            <BadgeLink
+              key={validBlockExplorer.url}
+              name={validBlockExplorer.name}
+              href={`${validBlockExplorer.url.endsWith("/") ? validBlockExplorer.url : `${validBlockExplorer.url}/`}address/${props.clientContract.address}`}
+            />
+          ))}
+
+          {/* TODO - render social links here */}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function isValidUrl(url: string) {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function getExplorersToShow(chainMetadata: ChainMetadata) {
+  const validBlockExplorers = chainMetadata.explorers
+    ?.filter((e) => e.standard === "EIP3091")
+    ?.slice(0, 2);
+
+  return validBlockExplorers?.slice(0, 1);
+}
+
+function BadgeLink(props: {
+  name: string;
+  href: string;
+}) {
+  return (
+    <Button
+      variant="outline"
+      asChild
+      className="!h-auto gap-2 rounded-full bg-card px-3 py-1.5 text-xs capitalize"
+    >
+      <Link href={props.href} target="_blank">
+        {props.name}
+        <ExternalLinkIcon className="size-3 text-muted-foreground/70" />
+      </Link>
+    </Button>
+  );
+}
+
+function SocialLink(props: {
+  name: string;
+  href: string;
+  icon?: React.FC<{ className?: string }>;
+}) {
+  return (
+    <ToolTipLabel label={props.name} contentClassName="capitalize">
+      <Button
+        variant="outline"
+        asChild
+        className={cn(
+          "!h-auto gap-2 rounded-full bg-card px-3 py-1.5 text-xs capitalize",
+          props.icon && "rounded-full p-1.5",
+        )}
+      >
+        <Link href={props.href} target="_blank" className="capitalize">
+          {props.icon ? <props.icon className="size-4" /> : props.name}
+          {!props.icon && (
+            <ExternalLinkIcon className="size-3 text-muted-foreground/70" />
+          )}
+        </Link>
+      </Button>
+    </ToolTipLabel>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx
new file mode 100644
index 00000000000..f384e7bc4e1
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import type { Chain, ThirdwebClient } from "thirdweb";
+import { PayEmbed } from "thirdweb/react";
+import { getSDKTheme } from "../../../../../../../components/sdk-component-theme";
+
+export function BuyTokenEmbed(props: {
+  client: ThirdwebClient;
+  chain: Chain;
+  tokenSymbol: string;
+  tokenName: string;
+  tokenAddress: string;
+}) {
+  const { theme } = useTheme();
+  return (
+    <PayEmbed
+      className="!rounded-xl !w-full"
+      client={props.client}
+      payOptions={{
+        mode: "fund_wallet",
+        metadata: {
+          name: `Buy ${props.tokenSymbol}`,
+        },
+        prefillBuy: {
+          chain: props.chain,
+          token: {
+            name: props.tokenName,
+            symbol: props.tokenSymbol,
+            address: props.tokenAddress,
+          },
+          amount: "1",
+          allowEdits: {
+            token: false,
+            chain: false,
+            amount: true,
+          },
+        },
+      }}
+      theme={getSDKTheme(theme === "light" ? "light" : "dark")}
+      connectOptions={{
+        autoConnect: false,
+      }}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PriceChart.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PriceChart.tsx
new file mode 100644
index 00000000000..3507c6e9a8a
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PriceChart.tsx
@@ -0,0 +1,314 @@
+"use client";
+
+import { ThirdwebAreaChart } from "@/components/blocks/charts/area-chart";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { SkeletonContainer } from "@/components/ui/skeleton";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { differenceInCalendarDays, formatDate } from "date-fns";
+import { ArrowUpIcon, InfoIcon } from "lucide-react";
+import { ArrowDownIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useTokenPriceData } from "../_hooks/useTokenPriceData";
+
+function PriceChartUI(props: {
+  isPending: boolean;
+  showTimeOfDay: boolean;
+  data: Array<{
+    date: string;
+    price_usd: number;
+    price_usd_cents: number;
+  }>;
+}) {
+  const data = props.data.map((item) => ({
+    price: item.price_usd,
+    time: new Date(item.date).getTime(),
+  }));
+
+  return (
+    <ThirdwebAreaChart
+      className="border-none bg-background p-0"
+      cardContentClassName="p-0"
+      config={{
+        price: {
+          label: "Price",
+          color: "hsl(var(--chart-1))",
+        },
+      }}
+      data={data}
+      isPending={props.isPending}
+      chartClassName="aspect-[1.5] lg:aspect-[3]"
+      hideLabel={false}
+      toolTipLabelFormatter={getTooltipLabelFormatter(props.showTimeOfDay)}
+      toolTipValueFormatter={(value) => {
+        return tokenPriceUSDFormatter.format(value as number);
+      }}
+    />
+  );
+}
+
+const tokenPriceUSDFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 10,
+  roundingMode: "halfEven",
+  notation: "compact",
+});
+
+const marketCapFormatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+  roundingMode: "halfEven",
+  notation: "compact",
+});
+
+const holdersFormatter = new Intl.NumberFormat("en-US", {
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+  notation: "compact",
+});
+
+const percentChangeFormatter = new Intl.NumberFormat("en-US", {
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 2,
+});
+
+function getTooltipLabelFormatter(includeTimeOfDay: boolean) {
+  return (_v: string, item: unknown) => {
+    if (Array.isArray(item)) {
+      const time = item[0].payload.time as number;
+      return formatDate(
+        new Date(time),
+        includeTimeOfDay ? "MMM d, yyyy hh:mm a" : "MMM d, yyyy",
+      );
+    }
+    return undefined;
+  };
+}
+
+export function TokenStats(params: {
+  chainId: number;
+  contractAddress: string;
+}) {
+  const tokenPriceQuery = useTokenPriceData(params);
+  const [interval, setInterval] = useState<Interval>("max");
+
+  const tokenPriceData = tokenPriceQuery.data;
+
+  const filteredHistoricalPrices = useMemo(() => {
+    const currentDate = new Date();
+
+    if (tokenPriceData?.type === "no-data") {
+      return [];
+    }
+
+    return tokenPriceData?.data?.historical_prices.filter((item) => {
+      const date = new Date(item.date);
+      const maxDiff =
+        interval === "24h"
+          ? 1
+          : interval === "7d"
+            ? 7
+            : interval === "30d"
+              ? 30
+              : interval === "1y"
+                ? 365
+                : Number.MAX_SAFE_INTEGER;
+
+      return differenceInCalendarDays(currentDate, date) <= maxDiff;
+    });
+  }, [tokenPriceData, interval]);
+
+  const priceUsd =
+    tokenPriceData?.type === "no-data" || tokenPriceQuery.isError
+      ? "N/A"
+      : tokenPriceData?.data?.price_usd;
+
+  const percentChange24h =
+    tokenPriceData?.type === "no-data" || tokenPriceQuery.isError
+      ? "N/A"
+      : tokenPriceData?.data?.percent_change_24h;
+
+  const marketCap =
+    tokenPriceData?.type === "no-data" || tokenPriceQuery.isError
+      ? "N/A"
+      : tokenPriceData?.data?.market_cap_usd;
+
+  const holders =
+    tokenPriceData?.type === "no-data" || tokenPriceQuery.isError
+      ? "N/A"
+      : tokenPriceData?.data?.holders;
+
+  return (
+    <div>
+      {/* price and change */}
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <p className="mb-1 text-muted-foreground text-sm">Current Price</p>
+          <div className="flex items-center gap-2">
+            <SkeletonContainer
+              loadedData={priceUsd}
+              skeletonData={10.0001}
+              render={(v) => {
+                return (
+                  <p className="font-bold text-4xl tracking-tight">
+                    {typeof v === "number"
+                      ? tokenPriceUSDFormatter.format(v)
+                      : v}
+                  </p>
+                );
+              }}
+            />
+            <SkeletonContainer
+              loadedData={percentChange24h}
+              skeletonData={0.001}
+              render={(data) => {
+                if (typeof data === "string") {
+                  return null;
+                }
+
+                const formattedAbsChange = percentChangeFormatter.format(
+                  Math.abs(data),
+                );
+
+                const isAlmostZero =
+                  formattedAbsChange === percentChangeFormatter.format(0);
+
+                return (
+                  <Badge
+                    variant={
+                      isAlmostZero
+                        ? "default"
+                        : data > 0
+                          ? "success"
+                          : "destructive"
+                    }
+                    className="gap-2 text-sm"
+                  >
+                    <div className="flex items-center gap-0.5">
+                      {isAlmostZero ? null : data > 0 ? (
+                        <ArrowUpIcon className="size-3" />
+                      ) : (
+                        <ArrowDownIcon className="size-3" />
+                      )}
+                      <span>
+                        {isAlmostZero ? "~0%" : `${formattedAbsChange}%`}
+                      </span>
+                    </div>
+                    <span>(1d)</span>
+                  </Badge>
+                );
+              }}
+            />
+          </div>
+        </div>
+
+        <IntervalSelector interval={interval} setInterval={setInterval} />
+      </div>
+
+      <div className="h-4" />
+      <PriceChartUI
+        showTimeOfDay={interval === "24h"}
+        isPending={tokenPriceQuery.isPending}
+        data={filteredHistoricalPrices || []}
+      />
+
+      <div className="mt-8 flex gap-6 border-y border-dashed py-4 [&>*:not(:first-child)]:border-l [&>*:not(:first-child)]:border-dashed [&>*:not(:first-child)]:pl-5 [&>*]:grow">
+        <TokenStat
+          value={
+            typeof marketCap === "number"
+              ? marketCapFormatter.format(marketCap)
+              : marketCap
+          }
+          skeletonData={"1000000000"}
+          label="Market Cap"
+          tooltip="Market capitalization is the total value of all tokens in circulation, calculated by multiplying the current price by the circulating supply"
+        />
+
+        <TokenStat
+          skeletonData={"1000000000"}
+          value={
+            // show 0 value as N/A
+            holders === 0
+              ? "N/A"
+              : typeof holders === "number"
+                ? holdersFormatter.format(holders)
+                : holders
+          }
+          label="Number of Holders"
+          tooltip="The total number of unique wallet addresses that currently hold this token on the blockchain"
+        />
+      </div>
+    </div>
+  );
+}
+
+function TokenStat<T extends string | number>(props: {
+  value: T | undefined;
+  skeletonData: T;
+  label: string;
+  tooltip: string;
+}) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <div className="flex items-center gap-1.5">
+        <p className="text-muted-foreground text-sm">{props.label}</p>
+        <ToolTipLabel label={props.tooltip}>
+          <InfoIcon className="size-3.5 text-muted-foreground" />
+        </ToolTipLabel>
+      </div>
+      <div className="flex">
+        <SkeletonContainer
+          skeletonData={props.skeletonData}
+          loadedData={props.value}
+          render={(v) => {
+            return (
+              <p className="font-semibold text-foreground text-xl tracking-tight">
+                {v}
+              </p>
+            );
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+type Interval = "24h" | "7d" | "30d" | "1y" | "max";
+
+function IntervalSelector(props: {
+  interval: Interval;
+  setInterval: (timeframe: Interval) => void;
+}) {
+  const intervals: Record<Interval, string> = {
+    "24h": "1D",
+    "7d": "1W",
+    "30d": "1M",
+    "1y": "1Y",
+    max: "MAX",
+  };
+
+  return (
+    <div className="flex gap-2">
+      {Object.entries(intervals).map(([key, value]) => (
+        <Button
+          key={key}
+          variant="outline"
+          className={cn(
+            "rounded-full",
+            props.interval === key && "border-active-border bg-accent",
+          )}
+          size="sm"
+          onClick={() => props.setInterval(key as Interval)}
+          tabIndex={0}
+        >
+          {value}
+        </Button>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx
new file mode 100644
index 00000000000..0a52fbc4ef6
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/RecentTransfers.tsx
@@ -0,0 +1,237 @@
+"use client";
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import { formatDistanceToNow } from "date-fns";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ExternalLinkIcon,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { type ThirdwebContract, toTokens } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import {
+  type TokenTransfersData,
+  useTokenTransfers,
+} from "../_hooks/useTokenTransfers";
+
+const tokenAmountFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 3,
+  minimumFractionDigits: 0,
+});
+
+function RecentTransfersUI(props: {
+  data: TokenTransfersData[];
+  tokenMetadata: {
+    decimals: number;
+    symbol: string;
+  };
+  isPending: boolean;
+  rowsPerPage: number;
+  page: number;
+  setPage: (page: number) => void;
+  explorerUrl: string;
+}) {
+  return (
+    <div>
+      <div className="mb-4">
+        <h2 className="font-semibold text-xl tracking-tight">
+          Recent Transfers
+        </h2>
+        <p className="text-muted-foreground text-sm">
+          Track all token transfers with detailed information about senders,
+          recipients, amounts, and transaction timestamps
+        </p>
+      </div>
+
+      <TableContainer className="rounded-b-none">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>From</TableHead>
+              <TableHead>To</TableHead>
+              <TableHead>Amount</TableHead>
+              <TableHead>Time</TableHead>
+              <TableHead>Transaction</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {props.isPending
+              ? Array.from({ length: props.rowsPerPage }).map((_, index) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                  <SkeletonRow key={index} />
+                ))
+              : props.data.map((transfer) => (
+                  <TableRow
+                    className="fade-in-0 animate-in duration-300"
+                    key={
+                      transfer.transaction_hash +
+                      transfer.amount +
+                      transfer.block_number +
+                      transfer.from_address
+                    }
+                  >
+                    <TableCell className="text-sm">
+                      <WalletAddress address={transfer.from_address} />
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      <WalletAddress address={transfer.to_address} />
+                    </TableCell>
+                    <TableCell className="text-sm ">
+                      <div className="flex items-center gap-1.5">
+                        <span>
+                          {tokenAmountFormatter.format(
+                            Number(
+                              toTokens(
+                                BigInt(transfer.amount),
+                                props.tokenMetadata.decimals,
+                              ),
+                            ),
+                          )}
+                        </span>
+                        <span className="text-muted-foreground text-xs">
+                          {props.tokenMetadata.symbol}
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      {formatDistanceToNow(new Date(transfer.block_timestamp), {
+                        addSuffix: true,
+                      })}
+                    </TableCell>
+                    <TableCell>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        asChild
+                      >
+                        <a
+                          href={`${props.explorerUrl}/tx/${transfer.transaction_hash}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={cn(
+                            "flex items-center justify-center",
+                            "hover:bg-accent hover:text-accent-foreground",
+                          )}
+                        >
+                          <ExternalLinkIcon className="h-4 w-4" />
+                        </a>
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+          </TableBody>
+        </Table>
+
+        {props.data.length === 0 && !props.isPending && (
+          <div className="flex w-full items-center justify-center py-20">
+            <p className="text-muted-foreground">No transfers found</p>
+          </div>
+        )}
+      </TableContainer>
+
+      <div className="flex items-center justify-end gap-3 rounded-b-lg border-x border-b bg-card px-6 py-5">
+        <Button
+          variant="outline"
+          size="sm"
+          className="gap-1.5 bg-background"
+          disabled={props.page === 0 || props.isPending}
+          onClick={() => props.setPage(props.page - 1)}
+        >
+          <ChevronLeftIcon className="size-4 text-muted-foreground" />
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={props.isPending || props.data.length === 0}
+          className="gap-1.5 bg-background"
+          onClick={() => props.setPage(props.page + 1)}
+        >
+          Next
+          <ChevronRightIcon className="size-4 text-muted-foreground" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function SkeletonRow() {
+  return (
+    <TableRow className="fade-in-0 h-[73px] animate-in duration-300">
+      <TableCell>
+        <Skeleton className="h-6 w-[145px]" />
+      </TableCell>
+      <TableCell>
+        <Skeleton className="h-6 w-[145px]" />
+      </TableCell>
+      <TableCell>
+        <Skeleton className="h-6 w-32" />
+      </TableCell>
+      <TableCell>
+        <Skeleton className="h-6 w-32" />
+      </TableCell>
+      <TableCell>
+        <Skeleton className="h-6 w-6" />
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export function RecentTransfers(props: {
+  clientContract: ThirdwebContract;
+  tokenSymbol: string;
+  chainMetadata: ChainMetadata;
+  decimals: number;
+}) {
+  const rowsPerPage = 10;
+  const [page, setPage] = useState(0);
+  const [hasFetchedOnce, setHasFetchedOnce] = useState(false);
+
+  const tokenQuery = useTokenTransfers({
+    chainId: props.clientContract.chain.id,
+    contractAddress: props.clientContract.address,
+    page,
+    limit: rowsPerPage,
+  });
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!tokenQuery.isPending) {
+      setHasFetchedOnce(true);
+    }
+  }, [tokenQuery.isPending]);
+
+  return (
+    <div>
+      <RecentTransfersUI
+        data={tokenQuery.data ?? []}
+        isPending={tokenQuery.isPending && !hasFetchedOnce}
+        rowsPerPage={rowsPerPage}
+        tokenMetadata={{
+          decimals: props.decimals,
+          symbol: props.tokenSymbol,
+        }}
+        page={page}
+        setPage={setPage}
+        explorerUrl={
+          props.chainMetadata.explorers?.[0]?.url ||
+          `https://thirdweb.com/${props.chainMetadata.slug}`
+        }
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.stories.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.stories.tsx
new file mode 100644
index 00000000000..8a8f0d9474b
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.stories.tsx
@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { storybookThirdwebClient } from "stories/utils";
+import { getContract } from "thirdweb";
+import { baseSepolia } from "thirdweb/chains";
+import { ThirdwebProvider } from "thirdweb/react";
+import { ClaimTokenCardUI } from "./claim-tokens-ui";
+
+const meta = {
+  title: "ERC20/ClaimTokenCardUI",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThirdwebProvider>
+        <div className="py-10">
+          <div className="mx-auto w-96">
+            <Story />
+          </div>
+        </div>
+      </ThirdwebProvider>
+    ),
+  ],
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Variants: Story = {
+  args: {},
+};
+
+const mockContract = getContract({
+  client: storybookThirdwebClient,
+  chain: baseSepolia,
+  address: "0xD6866d1EcB82D37556B6cFEc0dFE8800D8b4B50A",
+});
+
+const claimConditionCurrency = {
+  address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+  decimals: 18,
+  symbol: "ETH",
+};
+
+const mockClaimCondition = {
+  startTimestamp: 1747918865n,
+  maxClaimableSupply:
+    115792089237316195423570985008687907853269984665640564039457584007913129639935n,
+  supplyClaimed: 790000000000000000000000n,
+  quantityLimitPerWallet: 0n,
+  merkleRoot:
+    "0x369b56a08dc68160042e86415132e683545596577b2f6afa272046c18cbab38b",
+  pricePerToken: 0n,
+  currency: claimConditionCurrency.address,
+  metadata: "ipfs://QmPgawkS1jYSudujQGzx2UbodZzNPbMgWto1LPEba1Pxpj/0",
+};
+
+function Story() {
+  return (
+    <ClaimTokenCardUI
+      contract={mockContract}
+      name="Example Token"
+      symbol="EXP"
+      claimCondition={mockClaimCondition}
+      claimConditionCurrency={claimConditionCurrency}
+      chainMetadata={{
+        stackType: "evm",
+        chainId: 11155111,
+        name: "Sepolia",
+        chain: "ETH",
+        shortName: "sep",
+        nativeCurrency: {
+          name: "Sepolia Ether",
+          symbol: "ETH",
+          decimals: 18,
+        },
+        rpc: ["https://11155111.rpc.thirdweb.com/${THIRDWEB_API_KEY}"],
+        testnet: true,
+        slug: "sepolia",
+      }}
+      decimals={18}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
new file mode 100644
index 00000000000..152a64ac56c
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
@@ -0,0 +1,368 @@
+"use client";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Label } from "@/components/ui/label";
+import { SkeletonContainer } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { TransactionButton } from "components/buttons/TransactionButton";
+import { CheckIcon, CircleIcon, XIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  type ThirdwebContract,
+  padHex,
+  sendAndConfirmTransaction,
+  toTokens,
+  waitForReceipt,
+} from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import {
+  claimTo,
+  type getActiveClaimCondition,
+  getApprovalForTransaction,
+} from "thirdweb/extensions/erc20";
+import { useActiveAccount, useSendTransaction } from "thirdweb/react";
+import { getClaimParams } from "thirdweb/utils";
+import { tryCatch } from "utils/try-catch";
+import { DecimalInput } from "../../../../../../../../../../@/components/ui/decimal-input";
+import { getSDKTheme } from "../../../../../../../../components/sdk-component-theme";
+import { PublicPageConnectButton } from "../../../_components/PublicPageConnectButton";
+import { getCurrencyMeta } from "../../_utils/getCurrencyMeta";
+
+type ActiveClaimCondition = Awaited<ReturnType<typeof getActiveClaimCondition>>;
+
+// TODO UI improvements - show how many tokens connected wallet can claim at max
+
+export function ClaimTokenCardUI(props: {
+  contract: ThirdwebContract;
+  name: string;
+  symbol: string | undefined;
+  claimCondition: ActiveClaimCondition;
+  chainMetadata: ChainMetadata;
+  decimals: number;
+  claimConditionCurrency: {
+    decimals: number;
+    symbol: string;
+  };
+}) {
+  const [quantity, setQuantity] = useState("1");
+  const account = useActiveAccount();
+  const { theme } = useTheme();
+  const sendClaimTx = useSendTransaction({
+    payModal: {
+      theme: getSDKTheme(theme === "light" ? "light" : "dark"),
+    },
+  });
+  const [stepsUI, setStepsUI] = useState<
+    | undefined
+    | {
+        approve: undefined | "idle" | "pending" | "success" | "error";
+        claim: "idle" | "pending" | "success" | "error";
+      }
+  >(undefined);
+
+  const approveAndClaim = useMutation({
+    mutationFn: async () => {
+      if (!account) {
+        toast.error("Wallet is not connected");
+        return;
+      }
+
+      setStepsUI(undefined);
+
+      const transaction = claimTo({
+        contract: props.contract,
+        to: account.address,
+        quantity: String(quantity),
+        from: account.address,
+      });
+
+      const approveTx = await getApprovalForTransaction({
+        transaction,
+        account,
+      });
+
+      if (approveTx) {
+        setStepsUI({
+          approve: "pending",
+          claim: "idle",
+        });
+
+        const approveTxResult = await tryCatch(
+          sendAndConfirmTransaction({
+            transaction: approveTx,
+            account,
+          }),
+        );
+
+        if (approveTxResult.error) {
+          setStepsUI({
+            approve: "error",
+            claim: "idle",
+          });
+          console.error(approveTxResult.error);
+          toast.error("Failed to approve spending", {
+            description: approveTxResult.error.message,
+          });
+          return;
+        }
+
+        setStepsUI({
+          approve: "success",
+          claim: "pending",
+        });
+      }
+
+      async function sendAndConfirm() {
+        const result = await sendClaimTx.mutateAsync(transaction);
+        await waitForReceipt(result);
+      }
+
+      setStepsUI({
+        approve: approveTx ? "success" : undefined,
+        claim: "pending",
+      });
+
+      const claimTxResult = await tryCatch(sendAndConfirm());
+      if (claimTxResult.error) {
+        setStepsUI({
+          approve: approveTx ? "success" : undefined,
+          claim: "error",
+        });
+        console.error(claimTxResult.error);
+        toast.error("Failed to claim tokens", {
+          description: claimTxResult.error.message,
+        });
+        return;
+      }
+
+      setStepsUI({
+        approve: approveTx ? "success" : undefined,
+        claim: "success",
+      });
+
+      toast.success("Tokens claimed successfully");
+    },
+  });
+
+  const claimParamsQuery = useQuery({
+    queryKey: ["claim-params", props.contract.address, account?.address],
+    queryFn: async () => {
+      const defaultPricing = {
+        pricePerTokenWei: props.claimCondition.pricePerToken,
+        currencyAddress: props.claimCondition.currency,
+        decimals: props.claimConditionCurrency.decimals,
+        symbol: props.claimConditionCurrency.symbol,
+      };
+
+      if (!account) {
+        return defaultPricing;
+      }
+
+      const merkleRoot = props.claimCondition.merkleRoot;
+      if (!merkleRoot || merkleRoot === padHex("0x", { size: 32 })) {
+        return defaultPricing;
+      }
+
+      const claimParams = await getClaimParams({
+        contract: props.contract,
+        to: account.address,
+        quantity: 1n, // not relevant
+        type: "erc20",
+        tokenDecimals: props.decimals,
+        from: account.address,
+      });
+
+      const meta = await getCurrencyMeta({
+        currencyAddress: claimParams.currency,
+        chainMetadata: props.chainMetadata,
+        chain: props.contract.chain,
+        client: props.contract.client,
+      });
+
+      return {
+        pricePerTokenWei: claimParams.pricePerToken,
+        currencyAddress: claimParams.currency,
+        decimals: meta.decimals,
+        symbol: meta.symbol,
+      };
+    },
+  });
+
+  const claimParamsData = claimParamsQuery.data;
+
+  return (
+    <div className="rounded-xl border bg-card ">
+      <div className="border-b px-4 py-5 lg:px-5">
+        <h2 className="font-bold text-lg">Buy {props.symbol}</h2>
+        <p className="text-muted-foreground text-sm">
+          Buy tokens from the primary sale
+        </p>
+      </div>
+
+      <div className="p-4 lg:p-5">
+        <div>
+          <div className="space-y-2">
+            <Label htmlFor="token-amount">Tokens</Label>
+            <PriceInput
+              quantity={quantity}
+              setQuantity={setQuantity}
+              id="token-amount"
+              symbol={props.symbol}
+            />
+            {/* <p className="text-xs text-muted-foreground">Maximum purchasable: {tokenData.maxPurchasable} tokens</p> */}
+          </div>
+
+          <div className="h-4" />
+
+          <div className="space-y-3 rounded-lg bg-muted/50 p-3">
+            {/* Price per token */}
+            <div className="flex justify-between font-medium text-sm">
+              <span>Price per token</span>
+
+              <SkeletonContainer
+                skeletonData={`0.00 ${props.claimConditionCurrency.symbol}`}
+                loadedData={
+                  claimParamsData
+                    ? `${toTokens(
+                        claimParamsData.pricePerTokenWei,
+                        claimParamsData.decimals,
+                      )} ${claimParamsData.symbol}`
+                    : undefined
+                }
+                render={(v) => {
+                  return <span className="">{v}</span>;
+                }}
+              />
+            </div>
+
+            {/* Quantity */}
+            <div className="flex justify-between font-medium text-sm">
+              <span>Quantity</span>
+              <span>{quantity}</span>
+            </div>
+
+            {/* Total Price */}
+            <div className="border-active-border border-t border-dashed pt-4">
+              <div className="flex justify-between font-semibold text-sm">
+                <span>Total Price</span>
+                <SkeletonContainer
+                  skeletonData={"0.00 ETH"}
+                  loadedData={
+                    claimParamsData
+                      ? `${
+                          Number(
+                            toTokens(
+                              claimParamsData.pricePerTokenWei,
+                              claimParamsData.decimals,
+                            ),
+                          ) * Number(quantity)
+                        } ${claimParamsData.symbol}`
+                      : undefined
+                  }
+                  render={(v) => {
+                    return <span>{v}</span>;
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="h-6" />
+
+          {account ? (
+            <TransactionButton
+              transactionCount={undefined}
+              checkBalance={false}
+              isLoggedIn={true}
+              isPending={approveAndClaim.isPending}
+              onClick={async () => {
+                approveAndClaim.mutate();
+              }}
+              variant="default"
+              className="!w-full"
+              txChainID={props.contract.chain.id}
+              disabled={approveAndClaim.isPending || !claimParamsData}
+            >
+              Buy
+            </TransactionButton>
+          ) : (
+            <PublicPageConnectButton connectButtonClassName="!w-full" />
+          )}
+
+          {/* only show steps if approval is required */}
+          {stepsUI?.approve && (
+            <div className="mt-6 border-t border-dashed pt-3">
+              <h2 className="mb-2 font-semibold">Status</h2>
+              <div className="space-y-2">
+                {stepsUI.approve && (
+                  <StepUI title="Approve Spending" status={stepsUI.approve} />
+                )}
+
+                {stepsUI.claim && (
+                  <StepUI title={"Buy Tokens"} status={stepsUI.claim} />
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type Status = "idle" | "pending" | "success" | "error";
+
+const statusToIcon: Record<Status, React.FC<{ className: string }>> = {
+  pending: Spinner,
+  success: CheckIcon,
+  error: XIcon,
+  idle: CircleIcon,
+};
+
+function StepUI(props: {
+  title: string;
+  status: Status;
+}) {
+  const Icon = statusToIcon[props.status];
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2",
+        props.status === "pending" && "text-blue-500",
+        props.status === "success" && "text-green-500",
+        props.status === "error" && "text-red-500",
+      )}
+    >
+      <Icon className="size-4" />
+      <p className="font-medium text-sm">{props.title}</p>
+    </div>
+  );
+}
+
+function PriceInput(props: {
+  quantity: string;
+  setQuantity: (quantity: string) => void;
+  id: string;
+  symbol: string | undefined;
+}) {
+  return (
+    <div className="relative">
+      <DecimalInput
+        id={props.id}
+        value={String(props.quantity)}
+        onChange={(value) => {
+          console.log("value", value);
+          props.setQuantity(value);
+        }}
+        className="!text-2xl h-auto truncate bg-muted/50 pr-14 font-bold"
+      />
+      {props.symbol && (
+        <div className="-translate-y-1/2 absolute top-1/2 right-4 font-semibold text-base text-muted-foreground">
+          {props.symbol}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/contract-analytics/contract-analytics.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/contract-analytics/contract-analytics.tsx
new file mode 100644
index 00000000000..297574dad0c
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/contract-analytics/contract-analytics.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { ThirdwebAreaChart } from "@/components/blocks/charts/area-chart";
+import {} from "data/analytics/hooks";
+import { useState } from "react";
+import {
+  toolTipLabelFormatterWithPrecision,
+  useContractAnalyticsOverview,
+} from "../../../../overview/components/Analytics";
+
+export function ContractAnalyticsOverview(props: {
+  contractAddress: string;
+  chainId: number;
+  chainSlug: string;
+}) {
+  const [startDate] = useState(
+    (() => {
+      const date = new Date();
+      date.setDate(date.getDate() - 14);
+      return date;
+    })(),
+  );
+  const [endDate] = useState(new Date());
+
+  const { data, precision, isPending } = useContractAnalyticsOverview({
+    chainId: props.chainId,
+    contractAddress: props.contractAddress,
+    startDate,
+    endDate,
+  });
+
+  return (
+    <div>
+      <div className="flex flex-col">
+        <h2 className="font-semibold text-xl tracking-tight">Analytics</h2>
+        <p className="mb-3 text-muted-foreground text-sm">
+          View trends in unique wallets, transactions, and events over time for
+          this contract
+        </p>
+      </div>
+      <ThirdwebAreaChart
+        className="border-none bg-background p-0"
+        cardContentClassName="p-0"
+        config={{
+          wallets: {
+            label: "Unique Wallets",
+            color: "hsl(var(--chart-1))",
+          },
+          transactions: {
+            label: "Transactions",
+            color: "hsl(var(--chart-2))",
+          },
+          events: {
+            label: "Events",
+            color: "hsl(var(--chart-3))",
+          },
+        }}
+        data={data || []}
+        isPending={isPending}
+        showLegend
+        hideLabel={false}
+        chartClassName="aspect-[1.5] lg:aspect-[3]"
+        toolTipLabelFormatter={toolTipLabelFormatterWithPrecision(precision)}
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenPriceData.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenPriceData.ts
new file mode 100644
index 00000000000..a3966a81057
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenPriceData.ts
@@ -0,0 +1,56 @@
+import { isProd } from "@/constants/env-utils";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
+import { useQuery } from "@tanstack/react-query";
+
+type TokenPriceData = {
+  price_usd: number;
+  price_usd_cents: number;
+  percent_change_24h: number;
+  market_cap_usd: number;
+  volume_24h_usd: number;
+  volume_change_24h: number;
+  holders: number;
+  historical_prices: Array<{
+    date: string;
+    price_usd: number;
+    price_usd_cents: number;
+  }>;
+};
+
+export function useTokenPriceData(params: {
+  chainId: number;
+  contractAddress: string;
+}) {
+  return useQuery({
+    queryKey: ["token-price-chart", params.chainId, params.contractAddress],
+    retry: false,
+    retryOnMount: false,
+    refetchOnWindowFocus: false,
+    queryFn: async () => {
+      const url = new URL(
+        `https://insight.${isProd ? "thirdweb" : "thirdweb-dev"}.com/v1/tokens/price`,
+      );
+
+      url.searchParams.set("include_historical_prices", "true");
+      url.searchParams.set("chain_id", params.chainId.toString());
+      url.searchParams.set("address", params.contractAddress);
+      url.searchParams.set("include_holders", "true");
+      url.searchParams.set("clientId", NEXT_PUBLIC_DASHBOARD_CLIENT_ID);
+
+      const res = await fetch(url);
+      if (!res.ok) {
+        throw new Error(await res.text());
+      }
+
+      const json = await res.json();
+      const priceData = json.data[0] as TokenPriceData | undefined;
+      return priceData
+        ? {
+            type: "data-found" as const,
+            data: priceData,
+          }
+        : { type: "no-data" as const };
+    },
+    refetchInterval: 5000,
+  });
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenTransfers.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenTransfers.ts
new file mode 100644
index 00000000000..a4afca3d8c2
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenTransfers.ts
@@ -0,0 +1,54 @@
+import { isProd } from "@/constants/env-utils";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
+import { useQuery } from "@tanstack/react-query";
+
+export type TokenTransfersData = {
+  from_address: string;
+  to_address: string;
+  contract_address: string;
+  block_number: string;
+  block_timestamp: string;
+  log_index: string;
+  transaction_hash: string;
+  transfer_type: string;
+  chain_id: number;
+  token_type: string;
+  amount: string;
+};
+
+export function useTokenTransfers(params: {
+  chainId: number;
+  contractAddress: string;
+  page: number;
+  limit: number;
+}) {
+  return useQuery({
+    queryKey: ["token-transfers", params],
+    retry: false,
+    retryOnMount: false,
+    refetchOnWindowFocus: false,
+    queryFn: async () => {
+      const domain = isProd ? "thirdweb" : "thirdweb-dev";
+      const url = new URL(
+        `https://insight.${domain}.com/v1/tokens/transfers/${params.contractAddress}`,
+      );
+
+      url.searchParams.set("include_historical_prices", "true");
+      url.searchParams.set("chain_id", params.chainId.toString());
+      url.searchParams.set("include_holders", "true");
+      url.searchParams.set("page", params.page.toString());
+      url.searchParams.set("limit", params.limit.toString());
+      url.searchParams.set("clientId", NEXT_PUBLIC_DASHBOARD_CLIENT_ID);
+
+      const res = await fetch(url);
+      if (!res.ok) {
+        throw new Error(await res.text());
+      }
+
+      const json = await res.json();
+      const data = json.data as TokenTransfersData[];
+      return data;
+    },
+    refetchInterval: 5000,
+  });
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_utils/getCurrencyMeta.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_utils/getCurrencyMeta.ts
new file mode 100644
index 00000000000..9819e1a3b2c
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_utils/getCurrencyMeta.ts
@@ -0,0 +1,44 @@
+import { type ThirdwebClient, getContract } from "thirdweb";
+import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
+import { getAddress } from "thirdweb";
+import type { Chain, ChainMetadata } from "thirdweb/chains";
+import { symbol } from "thirdweb/extensions/common";
+import { decimals } from "thirdweb/extensions/erc20";
+
+export async function getCurrencyMeta(params: {
+  currencyAddress: string;
+  chainMetadata: ChainMetadata;
+  chain: Chain;
+  client: ThirdwebClient;
+}): Promise<{
+  decimals: number;
+  symbol: string;
+}> {
+  // if native token
+  if (getAddress(params.currencyAddress) === getAddress(NATIVE_TOKEN_ADDRESS)) {
+    return {
+      decimals: params.chainMetadata.nativeCurrency.decimals,
+      symbol: params.chainMetadata.nativeCurrency.symbol,
+    };
+  }
+
+  const currencyTokenContract = getContract({
+    address: params.currencyAddress,
+    chain: params.chain,
+    client: params.client,
+  });
+
+  const [currencyDecimals, currencySymbol] = await Promise.all([
+    decimals({
+      contract: currencyTokenContract,
+    }),
+    symbol({
+      contract: currencyTokenContract,
+    }),
+  ]);
+
+  return {
+    decimals: currencyDecimals,
+    symbol: currencySymbol,
+  };
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
new file mode 100644
index 00000000000..dfb3b572fe6
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
@@ -0,0 +1,175 @@
+import type { ThirdwebContract } from "thirdweb";
+import {} from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { getContractMetadata } from "thirdweb/extensions/common";
+import { decimals, getActiveClaimCondition } from "thirdweb/extensions/erc20";
+import { PageHeader } from "../_components/PageHeader";
+import { ContractHeaderUI } from "./_components/ContractHeader";
+import { BuyTokenEmbed } from "./_components/PayEmbedSection";
+import { TokenStats } from "./_components/PriceChart";
+import { RecentTransfers } from "./_components/RecentTransfers";
+import { ClaimTokenCardUI } from "./_components/claim-tokens/claim-tokens-ui";
+import { ContractAnalyticsOverview } from "./_components/contract-analytics/contract-analytics";
+import { getCurrencyMeta } from "./_utils/getCurrencyMeta";
+
+export async function ERC20PublicPage(props: {
+  serverContract: ThirdwebContract;
+  clientContract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+}) {
+  const [contractMetadata, activeClaimCondition, tokenDecimals] =
+    await Promise.all([
+      getContractMetadata({
+        contract: props.serverContract,
+      }),
+      getActiveClaimConditionWithErrorHandler(props.serverContract),
+      decimals({
+        contract: props.serverContract,
+      }),
+    ]);
+
+  const claimConditionCurrencyMeta = activeClaimCondition
+    ? await getCurrencyMeta({
+        currencyAddress: activeClaimCondition.currency,
+        chainMetadata: props.chainMetadata,
+        chain: props.serverContract.chain,
+        client: props.serverContract.client,
+      }).catch(() => undefined)
+    : undefined;
+
+  const buyEmbed = (
+    <BuyEmbed
+      clientContract={props.clientContract}
+      chainMetadata={props.chainMetadata}
+      tokenDecimals={tokenDecimals}
+      tokenName={contractMetadata.name}
+      tokenSymbol={contractMetadata.symbol}
+      tokenAddress={props.clientContract.address}
+      claimConditionMeta={
+        activeClaimCondition && claimConditionCurrencyMeta
+          ? {
+              activeClaimCondition,
+              claimConditionCurrency: claimConditionCurrencyMeta,
+            }
+          : undefined
+      }
+    />
+  );
+
+  return (
+    <div className="flex grow flex-col">
+      <PageHeader />
+      <div className="container flex max-w-8xl grow flex-col">
+        <ContractHeaderUI
+          chainMetadata={props.chainMetadata}
+          clientContract={props.clientContract}
+          image={contractMetadata.image}
+          name={contractMetadata.name}
+          symbol={contractMetadata.symbol}
+          socialUrls={
+            typeof contractMetadata.social_urls === "object" &&
+            contractMetadata.social_urls !== null
+              ? contractMetadata.social_urls
+              : {}
+          }
+        />
+
+        <div className="h-6" />
+
+        <div className="flex flex-col gap-8 pb-20 xl:flex-row">
+          <div className="flex grow flex-col gap-8 overflow-hidden">
+            {activeClaimCondition ? (
+              <div className="border-b border-dashed pb-6">
+                <ContractAnalyticsOverview
+                  contractAddress={props.clientContract.address}
+                  chainId={props.chainMetadata.chainId}
+                  chainSlug={props.chainMetadata.slug}
+                />
+              </div>
+            ) : (
+              <TokenStats
+                chainId={props.chainMetadata.chainId}
+                contractAddress={props.clientContract.address}
+              />
+            )}
+
+            <div className="xl:hidden">{buyEmbed}</div>
+
+            <RecentTransfers
+              clientContract={props.clientContract}
+              tokenSymbol={contractMetadata.symbol}
+              chainMetadata={props.chainMetadata}
+              decimals={tokenDecimals}
+            />
+
+            {!activeClaimCondition && (
+              <ContractAnalyticsOverview
+                contractAddress={props.clientContract.address}
+                chainId={props.chainMetadata.chainId}
+                chainSlug={props.chainMetadata.slug}
+              />
+            )}
+          </div>
+          <div className="hidden xl:block xl:w-96">
+            <div className="-mt-6 sticky top-0 pt-6">{buyEmbed}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BuyEmbed(props: {
+  clientContract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+  tokenDecimals: number;
+  tokenName: string;
+  tokenSymbol: string;
+  tokenAddress: string;
+  claimConditionMeta:
+    | {
+        activeClaimCondition: ActiveClaimCondition;
+        claimConditionCurrency: {
+          decimals: number;
+          symbol: string;
+        };
+      }
+    | undefined;
+}) {
+  if (!props.claimConditionMeta) {
+    return (
+      <BuyTokenEmbed
+        client={props.clientContract.client}
+        chain={props.clientContract.chain}
+        tokenSymbol={props.tokenSymbol}
+        tokenName={props.tokenName}
+        tokenAddress={props.clientContract.address}
+      />
+    );
+  }
+
+  return (
+    <ClaimTokenCardUI
+      contract={props.clientContract}
+      decimals={props.tokenDecimals}
+      name={props.tokenName}
+      symbol={props.tokenSymbol}
+      chainMetadata={props.chainMetadata}
+      claimCondition={props.claimConditionMeta.activeClaimCondition}
+      claimConditionCurrency={props.claimConditionMeta.claimConditionCurrency}
+    />
+  );
+}
+
+async function getActiveClaimConditionWithErrorHandler(
+  contract: ThirdwebContract,
+) {
+  try {
+    const activeClaimCondition = await getActiveClaimCondition({ contract });
+    return activeClaimCondition;
+  } catch {
+    return undefined;
+  }
+}
+
+type ActiveClaimCondition = Awaited<ReturnType<typeof getActiveClaimCondition>>;
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/shared-settings-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/shared-settings-page.tsx
index a35d46be95e..3ee088bd2f7 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/shared-settings-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/shared-settings-page.tsx
@@ -3,8 +3,10 @@ import { notFound } from "next/navigation";
 import type { ThirdwebContract } from "thirdweb";
 import { getPlatformFeeInfo } from "thirdweb/extensions/common";
 import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
 import { ContractSettingsPage } from "./ContractSettingsPage";
 import { ContractSettingsPageClient } from "./ContractSettingsPage.client";
 
@@ -24,6 +26,18 @@ export async function SharedContractSettingsPage(props: {
     notFound();
   }
 
+  // new public page can't show /settings page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
   const { clientContract, serverContract, isLocalhostChain } = info;
 
   if (isLocalhostChain) {
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx
index edea62ddeae..e4d69861f94 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx
@@ -11,6 +11,7 @@ import { NebulaChatButton } from "../../../../../nebula-app/(app)/components/Flo
 import { examplePrompts } from "../../../../../nebula-app/(app)/data/examplePrompts";
 import { getAuthTokenWalletAddress } from "../../../../api/lib/getAuthToken";
 import type { ProjectMeta } from "../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { TeamHeader } from "../../../../team/components/TeamHeader/team-header";
 import { ConfigureCustomChain } from "./_layout/ConfigureCustomChain";
 import { getContractMetadataHeaderData } from "./_layout/contract-metadata";
 import { ContractPageLayout } from "./_layout/contract-page-layout";
@@ -19,6 +20,7 @@ import { supportedERCs } from "./_utils/detectedFeatures/supportedERCs";
 import { getContractPageParamsInfo } from "./_utils/getContractFromParams";
 import { getContractPageMetadata } from "./_utils/getContractPageMetadata";
 import { getContractPageSidebarLinks } from "./_utils/getContractPageSidebarLinks";
+import { shouldRenderNewPublicPage } from "./_utils/newPublicPage";
 
 export async function SharedContractLayout(props: {
   contractAddress: string;
@@ -53,17 +55,27 @@ export async function SharedContractLayout(props: {
 
   if (isLocalhostChain) {
     return (
-      <ContractPageLayoutClient
-        chainMetadata={chainMetadata}
-        contract={clientContract}
-        teamsAndProjects={teamsAndProjects}
-        projectMeta={props.projectMeta}
-      >
-        {props.children}
-      </ContractPageLayoutClient>
+      <ConditionalTeamHeaderLayout projectMeta={props.projectMeta}>
+        <ContractPageLayoutClient
+          chainMetadata={chainMetadata}
+          contract={clientContract}
+          teamsAndProjects={teamsAndProjects}
+          projectMeta={props.projectMeta}
+        >
+          {props.children}
+        </ContractPageLayoutClient>
+      </ConditionalTeamHeaderLayout>
     );
   }
 
+  // if rendering new public page - do not render the old layout
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      return props.children;
+    }
+  }
+
   const [
     isValidContract,
     contractPageMetadata,
@@ -99,31 +111,33 @@ Users may be considering integrating the contract into their applications. Discu
 The following is the user's message:`;
 
   return (
-    <ContractPageLayout
-      chainMetadata={chainMetadata}
-      contract={clientContract}
-      sidebarLinks={sidebarLinks}
-      dashboardContractMetadata={contractMetadata}
-      externalLinks={externalLinks}
-      teamsAndProjects={teamsAndProjects}
-      projectMeta={props.projectMeta}
-    >
-      <NebulaChatButton
-        isLoggedIn={!!accountAddress}
-        networks={info.chainMetadata.testnet ? "testnet" : "mainnet"}
-        isFloating={true}
-        pageType="contract"
-        label="Ask AI about this contract"
-        client={clientContract.client}
-        nebulaParams={{
-          messagePrefix: contractPromptPrefix,
-          chainIds: [chainId],
-          wallet: accountAddress ?? undefined,
-        }}
-        examplePrompts={examplePrompts}
-      />
-      {props.children}
-    </ContractPageLayout>
+    <ConditionalTeamHeaderLayout projectMeta={props.projectMeta}>
+      <ContractPageLayout
+        chainMetadata={chainMetadata}
+        contract={clientContract}
+        sidebarLinks={sidebarLinks}
+        dashboardContractMetadata={contractMetadata}
+        externalLinks={externalLinks}
+        teamsAndProjects={teamsAndProjects}
+        projectMeta={props.projectMeta}
+      >
+        <NebulaChatButton
+          isLoggedIn={!!accountAddress}
+          networks={info.chainMetadata.testnet ? "testnet" : "mainnet"}
+          isFloating={true}
+          pageType="contract"
+          label="Ask AI about this contract"
+          client={clientContract.client}
+          nebulaParams={{
+            messagePrefix: contractPromptPrefix,
+            chainIds: [chainId],
+            wallet: accountAddress ?? undefined,
+          }}
+          examplePrompts={examplePrompts}
+        />
+        {props.children}
+      </ContractPageLayout>
+    </ConditionalTeamHeaderLayout>
   );
 }
 
@@ -216,3 +230,22 @@ export async function generateContractLayoutMetadata(params: {
     };
   }
 }
+
+function ConditionalTeamHeaderLayout({
+  children,
+  projectMeta,
+}: { children: React.ReactNode; projectMeta: ProjectMeta | undefined }) {
+  // if inside a project page - do not another team header
+  if (projectMeta) {
+    return children;
+  }
+
+  return (
+    <div className="flex grow flex-col">
+      <div className="border-border border-b bg-card">
+        <TeamHeader />
+      </div>
+      {children}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-overview-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-overview-page.tsx
index 3d3faf5e75a..74ab5df780f 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-overview-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-overview-page.tsx
@@ -1,11 +1,18 @@
 import { notFound } from "next/navigation";
 import { ErrorBoundary } from "react-error-boundary";
+import type { ThirdwebContract } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
 import type { ProjectMeta } from "../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { getContractPageParamsInfo } from "./_utils/getContractFromParams";
 import { getContractPageMetadata } from "./_utils/getContractPageMetadata";
+import {
+  type NewPublicPageType,
+  shouldRenderNewPublicPage,
+} from "./_utils/newPublicPage";
 import { ContractOverviewPage } from "./overview/ContractOverviewPage";
 import { PublishedBy } from "./overview/components/published-by.server";
 import { ContractOverviewPageClient } from "./overview/contract-overview-page.client";
+import { ERC20PublicPage } from "./public-pages/erc20/erc20";
 
 export async function SharedContractOverviewPage(props: {
   contractAddress: string;
@@ -24,6 +31,7 @@ export async function SharedContractOverviewPage(props: {
 
   const { clientContract, serverContract, chainMetadata, isLocalhostChain } =
     info;
+
   if (isLocalhostChain) {
     return (
       <ContractOverviewPageClient
@@ -34,6 +42,21 @@ export async function SharedContractOverviewPage(props: {
     );
   }
 
+  // for public page
+  if (!props.projectMeta) {
+    const renderNewPublicPage = await shouldRenderNewPublicPage(serverContract);
+    if (renderNewPublicPage) {
+      return (
+        <RenderNewPublicContractPage
+          serverContract={serverContract}
+          clientContract={clientContract}
+          chainMetadata={chainMetadata}
+          type={renderNewPublicPage.type}
+        />
+      );
+    }
+  }
+
   const contractPageMetadata = await getContractPageMetadata(serverContract);
 
   return (
@@ -59,3 +82,25 @@ export async function SharedContractOverviewPage(props: {
     />
   );
 }
+
+function RenderNewPublicContractPage(props: {
+  serverContract: ThirdwebContract;
+  clientContract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+  type: NewPublicPageType;
+}) {
+  switch (props.type) {
+    case "erc20": {
+      return (
+        <ERC20PublicPage
+          serverContract={props.serverContract}
+          clientContract={props.clientContract}
+          chainMetadata={props.chainMetadata}
+        />
+      );
+    }
+    default: {
+      return null;
+    }
+  }
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/shared-sources-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/shared-sources-page.tsx
index 07f30aca14a..b1b54816993 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/shared-sources-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/sources/shared-sources-page.tsx
@@ -1,6 +1,8 @@
 import { notFound } from "next/navigation";
 import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
 import { ContractSourcesPage } from "./ContractSourcesPage";
 
 export async function SharedContractSourcesPage(props: {
@@ -18,5 +20,17 @@ export async function SharedContractSourcesPage(props: {
     notFound();
   }
 
+  // new public page can't show /sources page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
   return <ContractSourcesPage contract={info.clientContract} />;
 }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx
index cf5e0f398b8..49c28f18dc3 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx
@@ -4,8 +4,10 @@ import {
   isMintToSupported,
 } from "thirdweb/extensions/erc20";
 import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
 import { ContractTokensPage } from "./ContractTokensPage";
 import { ContractTokensPageClient } from "./ContractTokensPage.client";
 
@@ -25,6 +27,18 @@ export async function SharedContractTokensPage(props: {
     notFound();
   }
 
+  // new public page can't show /tokens page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
   if (info.isLocalhostChain) {
     return (
       <ContractTokensPageClient
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/layout.tsx
new file mode 100644
index 00000000000..54487a6a596
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/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>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/chainlist/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/chainlist/layout.tsx
new file mode 100644
index 00000000000..5e413be4947
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/chainlist/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>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/contracts/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/contracts/layout.tsx
new file mode 100644
index 00000000000..df8af93e28d
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/contracts/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>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/explore/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/explore/layout.tsx
new file mode 100644
index 00000000000..df8af93e28d
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/explore/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>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/layout.tsx
index 24f27ebc40c..bf871c68266 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/layout.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/layout.tsx
@@ -1,6 +1,5 @@
 import { AppFooter } from "@/components/blocks/app-footer";
 import { ErrorProvider } from "../../../contexts/error-handler";
-import { TeamHeader } from "../team/components/TeamHeader/team-header";
 
 export default function DashboardLayout(props: {
   children: React.ReactNode;
@@ -8,9 +7,6 @@ export default function DashboardLayout(props: {
   return (
     <ErrorProvider>
       <div className="flex min-h-dvh flex-col bg-background">
-        <div className="border-border border-b bg-card">
-          <TeamHeader />
-        </div>
         <div className="flex grow flex-col">{props.children}</div>
         <AppFooter />
       </div>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/profile/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/profile/layout.tsx
new file mode 100644
index 00000000000..df8af93e28d
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/profile/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>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/published-contract/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/layout.tsx
new file mode 100644
index 00000000000..df8af93e28d
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/published-contract/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>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/support/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/support/layout.tsx
new file mode 100644
index 00000000000..df8af93e28d
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/support/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>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/tools/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/tools/layout.tsx
index d07391bb8c8..2db4b33569d 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/tools/layout.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/tools/layout.tsx
@@ -1,5 +1,6 @@
 import { SidebarLayout } from "@/components/blocks/SidebarLayout";
 import type { Metadata } from "next";
+import { TeamHeader } from "../../team/components/TeamHeader/team-header";
 
 export const metadata: Metadata = {
   title: "thirdweb Blockchain Tools",
@@ -11,31 +12,36 @@ export default function ToolLayout({
   children,
 }: { children: React.ReactNode }) {
   return (
-    <SidebarLayout
-      sidebarLinks={[
-        {
-          label: "Transaction Simulator",
-          href: "/tools/transaction-simulator",
-        },
-        {
-          label: "Wei Converter",
-          href: "/tools/wei-converter",
-        },
-        {
-          label: "Hex Converter",
-          href: "/tools/hex-converter",
-        },
-        {
-          label: "Unix Time Converter",
-          href: "/tools/unixtime-converter",
-        },
-        {
-          label: "Keccak-256 Converter",
-          href: "/tools/keccak256-converter",
-        },
-      ]}
-    >
-      {children}
-    </SidebarLayout>
+    <div className="flex grow flex-col">
+      <div className="border-border border-b bg-card">
+        <TeamHeader />
+      </div>
+      <SidebarLayout
+        sidebarLinks={[
+          {
+            label: "Transaction Simulator",
+            href: "/tools/transaction-simulator",
+          },
+          {
+            label: "Wei Converter",
+            href: "/tools/wei-converter",
+          },
+          {
+            label: "Hex Converter",
+            href: "/tools/hex-converter",
+          },
+          {
+            label: "Unix Time Converter",
+            href: "/tools/unixtime-converter",
+          },
+          {
+            label: "Keccak-256 Converter",
+            href: "/tools/keccak256-converter",
+          },
+        ]}
+      >
+        {children}
+      </SidebarLayout>
+    </div>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page-impl.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page-impl.tsx
index 5c3e728cbad..f704d2b8a84 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page-impl.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page-impl.tsx
@@ -38,6 +38,8 @@ export function CreateTokenAssetPage(props: {
   client: ThirdwebClient;
   teamId: string;
   projectId: string;
+  teamSlug: string;
+  projectSlug: string;
 }) {
   const account = useActiveAccount();
   const { idToChain } = useAllChainsData();
@@ -51,6 +53,14 @@ export function CreateTokenAssetPage(props: {
       throw new Error("No Connected Wallet");
     }
 
+    trackEvent(
+      getTokenStepTrackingData({
+        action: "deploy",
+        chainId: Number(formValues.chain),
+        status: "attempt",
+      }),
+    );
+
     trackEvent(
       getTokenDeploymentTrackingData("attempt", Number(formValues.chain)),
     );
@@ -90,6 +100,14 @@ export function CreateTokenAssetPage(props: {
         },
       });
 
+      trackEvent(
+        getTokenStepTrackingData({
+          action: "deploy",
+          chainId: Number(formValues.chain),
+          status: "success",
+        }),
+      );
+
       trackEvent(
         getTokenDeploymentTrackingData("success", Number(formValues.chain)),
       );
@@ -110,6 +128,14 @@ export function CreateTokenAssetPage(props: {
         contractAddress: contractAddress,
       };
     } catch (e) {
+      trackEvent(
+        getTokenStepTrackingData({
+          action: "deploy",
+          chainId: Number(formValues.chain),
+          status: "error",
+        }),
+      );
+
       trackEvent(
         getTokenDeploymentTrackingData("error", Number(formValues.chain)),
       );
@@ -352,6 +378,8 @@ export function CreateTokenAssetPage(props: {
     <CreateTokenAssetPageUI
       accountAddress={props.accountAddress}
       client={props.client}
+      teamSlug={props.teamSlug}
+      projectSlug={props.projectSlug}
       onLaunchSuccess={() => {
         revalidatePathAction(
           `/team/${props.teamId}/project/${props.projectId}/assets`,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.client.tsx
index cd9c5630636..10b6f27a971 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.client.tsx
@@ -35,6 +35,8 @@ export function CreateTokenAssetPageUI(props: {
   client: ThirdwebClient;
   createTokenFunctions: CreateTokenFunctions;
   onLaunchSuccess: () => void;
+  teamSlug: string;
+  projectSlug: string;
 }) {
   const [step, setStep] = useState<"token-info" | "distribution" | "launch">(
     "token-info",
@@ -114,6 +116,8 @@ export function CreateTokenAssetPageUI(props: {
 
       {step === "launch" && (
         <LaunchTokenStatus
+          teamSlug={props.teamSlug}
+          projectSlug={props.projectSlug}
           client={props.client}
           onLaunchSuccess={props.onLaunchSuccess}
           onPrevious={() => {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.stories.tsx
index e40c3b0cd2d..6001789c432 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.stories.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/create-token-page.stories.tsx
@@ -41,6 +41,8 @@ const mockCreateTokenFunctions = {
 export const Default: Story = {
   args: {
     accountAddress: "0x1234567890123456789012345678901234567890",
+    teamSlug: "test-team",
+    projectSlug: "test-project",
     client: storybookThirdwebClient,
     createTokenFunctions: mockCreateTokenFunctions,
     onLaunchSuccess: () => {},
@@ -50,6 +52,8 @@ export const Default: Story = {
 export const ErrorOnDeploy: Story = {
   args: {
     accountAddress: "0x1234567890123456789012345678901234567890",
+    teamSlug: "test-team",
+    projectSlug: "test-project",
     client: storybookThirdwebClient,
     onLaunchSuccess: () => {},
     createTokenFunctions: {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-sale.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-sale.tsx
index 37d26407b2e..877720bed4c 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-sale.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-sale.tsx
@@ -3,7 +3,7 @@
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { TokenSelector } from "@/components/blocks/TokenSelector";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
-import { Input } from "@/components/ui/input";
+import { DecimalInput } from "@/components/ui/decimal-input";
 import { Switch } from "@/components/ui/switch";
 import type { ThirdwebClient } from "thirdweb";
 import type { TokenDistributionForm } from "../form";
@@ -112,38 +112,3 @@ export function TokenSaleSection(props: {
     </DynamicHeight>
   );
 }
-
-function DecimalInput(props: {
-  value: string;
-  onChange: (value: string) => void;
-  maxValue?: number;
-}) {
-  return (
-    <Input
-      type="text"
-      value={props.value}
-      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");
-      }}
-    />
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx
index ad307554c2a..1a66ac53d2f 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/launch/launch-token.tsx
@@ -33,6 +33,8 @@ export function LaunchTokenStatus(props: {
   onPrevious: () => void;
   client: ThirdwebClient;
   onLaunchSuccess: () => void;
+  teamSlug: string;
+  projectSlug: string;
 }) {
   const formValues = props.values;
   const { createTokenFunctions } = props;
@@ -100,7 +102,9 @@ export function LaunchTokenStatus(props: {
         retryLabel: "Failed to deploy contract",
         execute: createSequenceExecutorFn(0, async (values) => {
           const result = await createTokenFunctions.deployContract(values);
-          setContractLink(`/${values.chain}/${result.contractAddress}`);
+          setContractLink(
+            `/team/${props.teamSlug}/${props.projectSlug}/contract/${values.chain}/${result.contractAddress}`,
+          );
         }),
       },
       {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/page.tsx
index f0baa6e1e5a..c46db4a6bae 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/page.tsx
@@ -57,6 +57,8 @@ export default async function Page(props: {
       />
       <div className="container max-w-5xl pt-8 pb-32">
         <CreateTokenAssetPage
+          teamSlug={params.team_slug}
+          projectSlug={params.project_slug}
           accountAddress={accountAddress}
           client={client}
           teamId={team.id}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts
index efae14906af..2da4e7e7cbc 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/tracking.ts
@@ -15,7 +15,7 @@ export function getTokenDeploymentTrackingData(
 
 // example: asset.claim-conditions.attempt
 export function getTokenStepTrackingData(params: {
-  action: "claim-conditions" | "airdrop" | "mint";
+  action: "claim-conditions" | "airdrop" | "mint" | "deploy";
   chainId: number;
   status: "attempt" | "success" | "error";
 }) {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/(marketplace)/direct-listings/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/(marketplace)/direct-listings/page.tsx
index dd33fe38824..6f0ea247a00 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/(marketplace)/direct-listings/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/(marketplace)/direct-listings/page.tsx
@@ -19,7 +19,7 @@ export default async function Page(props: {
       chainIdOrSlug={params.chainIdOrSlug}
       projectMeta={{
         teamId: project.teamId,
-        projectSlug: params.project_slug,
+        projectSlug: project.slug,
         teamSlug: params.team_slug,
       }}
       isLoggedIn={true}
diff --git a/apps/dashboard/src/app/(app)/team/components/Analytics/BarChart.tsx b/apps/dashboard/src/app/(app)/team/components/Analytics/BarChart.tsx
index e3f5c7c2ccc..80149b12cfc 100644
--- a/apps/dashboard/src/app/(app)/team/components/Analytics/BarChart.tsx
+++ b/apps/dashboard/src/app/(app)/team/components/Analytics/BarChart.tsx
@@ -42,7 +42,7 @@ export function BarChart({
       className="aspect-auto h-[250px] w-full pt-6"
     >
       {data.length === 0 || data.every((d) => d[activeKey] === 0) ? (
-        <EmptyChartState> {emptyChartContent} </EmptyChartState>
+        <EmptyChartState type="bar"> {emptyChartContent} </EmptyChartState>
       ) : (
         <RechartsBarChart
           accessibilityLayer
diff --git a/apps/dashboard/src/app/bridge/constants.ts b/apps/dashboard/src/app/bridge/constants.ts
index 1a0db33635f..f8ddb246926 100644
--- a/apps/dashboard/src/app/bridge/constants.ts
+++ b/apps/dashboard/src/app/bridge/constants.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 {
@@ -34,7 +34,7 @@ function getBridgeThirdwebClient() {
 
   return createThirdwebClient({
     secretKey: undefined,
-    clientId: NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+    clientId: NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
     config: {
       storage: {
         gatewayUrl: NEXT_PUBLIC_IPFS_GATEWAY_URL,
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatButton.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatButton.tsx
index 72801f5a5b9..1ca4f4b8563 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatButton.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatButton.tsx
@@ -5,13 +5,13 @@ import { cn } from "@/lib/utils";
 import { MessageCircleIcon, XIcon } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 import { createThirdwebClient } from "thirdweb";
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "../../../../../@/constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "../../../../../@/constants/public-envs";
 import { useTrack } from "../../../../../hooks/analytics/useTrack";
 import CustomChatContent from "./CustomChatContent";
 
 // Create a thirdweb client for the chat functionality
 const client = createThirdwebClient({
-  clientId: NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+  clientId: NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
 });
 
 export function CustomChatButton(props: {
diff --git a/apps/dashboard/src/app/pay/constants.ts b/apps/dashboard/src/app/pay/constants.ts
index eaac2b835d3..1471051ef90 100644
--- a/apps/dashboard/src/app/pay/constants.ts
+++ b/apps/dashboard/src/app/pay/constants.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 {
@@ -33,7 +33,7 @@ function getPayThirdwebClient() {
 
   return createThirdwebClient({
     secretKey: undefined,
-    clientId: NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+    clientId: NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
     config: {
       storage: {
         gatewayUrl: NEXT_PUBLIC_IPFS_GATEWAY_URL,
diff --git a/apps/dashboard/src/components/analytics/empty-chart-state.tsx b/apps/dashboard/src/components/analytics/empty-chart-state.tsx
index 9dfd382f935..427f7bc227c 100644
--- a/apps/dashboard/src/components/analytics/empty-chart-state.tsx
+++ b/apps/dashboard/src/components/analytics/empty-chart-state.tsx
@@ -1,9 +1,8 @@
 "use client";
-
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { LoadingDots } from "@/components/ui/LoadingDots";
 import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
 import { useMemo } from "react";
-import { Bar, BarChart } from "recharts";
+import { Area, AreaChart, Bar, BarChart } from "recharts";
 
 type FakeCartData = {
   value: number;
@@ -22,7 +21,10 @@ const skeletonChartConfig = {
   },
 } satisfies ChartConfig;
 
-export function EmptyChartState({ children }: { children?: React.ReactNode }) {
+export function EmptyChartState({
+  children,
+  type,
+}: { children?: React.ReactNode; type: "bar" | "area" }) {
   const barChartData = useMemo(() => generateRandomData(), []);
 
   return (
@@ -30,35 +32,63 @@ export function EmptyChartState({ children }: { children?: React.ReactNode }) {
       <div className="absolute inset-0 z-[1] flex flex-col items-center justify-center font-medium text-base text-muted-foreground">
         {children ?? "No data available"}
       </div>
-      <SkeletonBarChart data={barChartData} />
+      <SkeletonBarChart data={barChartData} type={type} />
     </div>
   );
 }
 
 export function LoadingChartState() {
   return (
-    <div className="pointer-events-none flex h-full w-full items-center justify-center rounded-lg bg-muted/50">
-      <Spinner className="size-10" />
+    <div className="pointer-events-none flex h-full w-full items-center justify-center rounded-lg bg-muted/30">
+      <LoadingDots />
     </div>
   );
 }
 
 function SkeletonBarChart(props: {
   data: FakeCartData[];
+  type: "bar" | "area";
 }) {
   return (
     <ChartContainer
       config={skeletonChartConfig}
       className="pointer-events-none h-full w-full blur-[5px]"
     >
-      <BarChart
-        data={props.data}
-        margin={{
-          top: 20,
-        }}
-      >
-        <Bar dataKey="value" fill="var(--color-value)" radius={8} />
-      </BarChart>
+      {props.type === "bar" ? (
+        <BarChart
+          data={props.data}
+          margin={{
+            top: 20,
+          }}
+        >
+          <Bar dataKey="value" fill="var(--color-value)" radius={8} />
+        </BarChart>
+      ) : (
+        <AreaChart
+          data={props.data}
+          margin={{
+            top: 20,
+          }}
+        >
+          <defs>
+            <linearGradient id="fill_area_skeleton" x1="0" y1="0" x2="0" y2="1">
+              <stop
+                offset="5%"
+                stopColor={"hsl(var(--muted-foreground)/0.5)"}
+                stopOpacity={0.8}
+              />
+              <stop offset="95%" stopColor="transparent" stopOpacity={0.1} />
+            </linearGradient>
+          </defs>
+          <Area
+            type="natural"
+            dataKey="value"
+            stroke="hsl(var(--muted-foreground))"
+            fill="url(#fill_area_skeleton)"
+            radius={8}
+          />
+        </AreaChart>
+      )}
     </ChartContainer>
   );
 }
diff --git a/apps/dashboard/src/components/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx
index ccd6e65976d..49738791678 100644
--- a/apps/dashboard/src/components/buttons/MismatchButton.tsx
+++ b/apps/dashboard/src/components/buttons/MismatchButton.tsx
@@ -80,13 +80,20 @@ type MistmatchButtonProps = React.ComponentProps<typeof Button> & {
   txChainId: number;
   isLoggedIn: boolean;
   isPending: boolean;
+  checkBalance?: boolean;
 };
 
 export const MismatchButton = forwardRef<
   HTMLButtonElement,
   MistmatchButtonProps
 >((props, ref) => {
-  const { txChainId, isLoggedIn, isPending, ...buttonProps } = props;
+  const {
+    txChainId,
+    isLoggedIn,
+    isPending,
+    checkBalance = true,
+    ...buttonProps
+  } = props;
   const account = useActiveAccount();
   const wallet = useActiveWallet();
   const activeWalletChain = useActiveWalletChain();
@@ -150,7 +157,8 @@ export const MismatchButton = forwardRef<
   }
 
   const isBalanceRequired =
-    wallet.id === "smart" ? false : !GAS_FREE_CHAINS.includes(txChainId);
+    checkBalance &&
+    (wallet.id === "smart" ? false : !GAS_FREE_CHAINS.includes(txChainId));
 
   const notEnoughBalance =
     (txChainBalance.data?.value || 0n) === 0n && isBalanceRequired;
diff --git a/apps/dashboard/src/components/buttons/TransactionButton.tsx b/apps/dashboard/src/components/buttons/TransactionButton.tsx
index fd3ad2c6036..6673d472dab 100644
--- a/apps/dashboard/src/components/buttons/TransactionButton.tsx
+++ b/apps/dashboard/src/components/buttons/TransactionButton.tsx
@@ -29,6 +29,7 @@ type TransactionButtonProps = Omit<ButtonProps, "variant"> & {
   txChainID: number;
   variant?: "destructive" | "primary" | "default";
   isLoggedIn: boolean;
+  checkBalance?: boolean;
 };
 
 export const TransactionButton: React.FC<TransactionButtonProps> = ({
@@ -38,6 +39,7 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
   txChainID,
   variant,
   isLoggedIn,
+  checkBalance,
   ...restButtonProps
 }) => {
   const activeWallet = useActiveWallet();
@@ -68,6 +70,7 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
           txChainId={txChainID}
           {...restButtonProps}
           disabled={disabled}
+          checkBalance={checkBalance}
           className={cn("relative overflow-hidden", restButtonProps.className)}
           style={{
             paddingLeft: transactionCount
diff --git a/apps/dashboard/src/components/contract-components/tables/contract-table.tsx b/apps/dashboard/src/components/contract-components/tables/contract-table.tsx
index 1065844643a..5354efba474 100644
--- a/apps/dashboard/src/components/contract-components/tables/contract-table.tsx
+++ b/apps/dashboard/src/components/contract-components/tables/contract-table.tsx
@@ -156,7 +156,11 @@ export function ContractTableUI(props: {
                   }}
                 />
               </TableHead>
-              <TableHead>Contract Address</TableHead>
+              {props.variant === "contract" && (
+                <TableHead>Contract Address</TableHead>
+              )}
+
+              {props.variant === "asset" && <TableHead> Asset Page</TableHead>}
               <TableHead>Actions</TableHead>
             </TableRow>
           </TableHeader>
@@ -193,14 +197,30 @@ export function ContractTableUI(props: {
                     />
                   </TableCell>
 
-                  <TableCell>
-                    <CopyAddressButton
-                      copyIconPosition="left"
-                      address={contract.contractAddress}
-                      variant="ghost"
-                      className="-translate-x-2 relative z-10"
-                    />
-                  </TableCell>
+                  {props.variant === "contract" && (
+                    <TableCell>
+                      <CopyAddressButton
+                        copyIconPosition="left"
+                        address={contract.contractAddress}
+                        variant="ghost"
+                        className="-translate-x-2 relative z-10"
+                      />
+                    </TableCell>
+                  )}
+
+                  {props.variant === "asset" && (
+                    <TableCell>
+                      <Button variant="ghost" asChild size="sm">
+                        <Link
+                          href={`/${contract.chainId}/${contract.contractAddress}`}
+                          target="_blank"
+                          className="-translate-x-2 relative z-10 flex items-center gap-1.5 text-muted-foreground"
+                        >
+                          View <ExternalLinkIcon className="size-3" />
+                        </Link>
+                      </Button>
+                    </TableCell>
+                  )}
 
                   <TableCell>
                     <ContractActionsCell
diff --git a/apps/dashboard/src/components/icons/brand-icons/DiscordIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/DiscordIcon.tsx
new file mode 100644
index 00000000000..30bb83ae939
--- /dev/null
+++ b/apps/dashboard/src/components/icons/brand-icons/DiscordIcon.tsx
@@ -0,0 +1,28 @@
+import type { SVGProps } from "react";
+
+export function DiscordIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      enable-background="new 0 0 100 100"
+      viewBox="0 0 100 100"
+      {...props}
+      fill="currentColor"
+      width={20}
+      height={20}
+      role="presentation"
+    >
+      <path
+        id="Layer_2"
+        d="M85.778,24.561c-11.641-8.71-22.793-8.466-22.793-8.466s-1.14,1.302-1.14,1.302c13.839,4.152,20.27,10.257,20.27,10.257
+		c-19.799-10.901-45.019-10.823-65.613,0c0,0,6.675-6.431,21.328-10.583c0,0-0.814-0.977-0.814-0.977s-11.071-0.244-22.793,8.466
+		c0,0-11.722,21.084-11.722,47.052c0,0,6.838,11.722,24.829,12.292c0,0,3.012-3.582,5.454-6.675
+		c-10.339-3.093-14.246-9.524-14.246-9.524c6.495,4.064,13.063,6.608,21.247,8.222c13.316,2.741,29.879-0.077,42.249-8.222
+		c0,0-4.07,6.594-14.734,9.606c2.442,3.012,5.373,6.512,5.373,6.512C90.662,83.254,97.5,71.532,97.5,71.613
+		C97.5,45.645,85.778,24.561,85.778,24.561z M34.818,64.043c-4.559,0-8.303-3.989-8.303-8.955c0.333-11.892,16.357-11.855,16.607,0
+		C43.121,60.054,39.458,64.043,34.818,64.043z M64.531,64.043c-4.559,0-8.303-3.989-8.303-8.955c0.366-11.869,16.19-11.874,16.607,0
+		C72.834,60.054,69.171,64.043,64.531,64.043z"
+      />
+    </svg>
+  );
+}
diff --git a/apps/dashboard/src/components/icons/brand-icons/TelegramIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/TelegramIcon.tsx
new file mode 100644
index 00000000000..f9cc12b4edb
--- /dev/null
+++ b/apps/dashboard/src/components/icons/brand-icons/TelegramIcon.tsx
@@ -0,0 +1,17 @@
+import type { SVGProps } from "react";
+
+export function TelegramIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      {...props}
+      fill="currentColor"
+      width={24}
+      height={24}
+      role="presentation"
+    >
+      <path d="m12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12c0-6.627-5.373-12-12-12zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295-.002 0-.003 0-.005 0l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.658-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.941z" />
+    </svg>
+  );
+}
diff --git a/apps/dashboard/src/components/icons/brand-icons/XIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/XIcon.tsx
index 582ea65c087..786ca8117c2 100644
--- a/apps/dashboard/src/components/icons/brand-icons/XIcon.tsx
+++ b/apps/dashboard/src/components/icons/brand-icons/XIcon.tsx
@@ -3,16 +3,17 @@ import type { SVGProps } from "react";
 export const XIcon = (props: SVGProps<SVGSVGElement>) => {
   return (
     <svg
-      role="img"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
       fill="currentColor"
-      width={24}
-      height={24}
+      height="20"
+      viewBox="0 0 16 16"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
       {...props}
     >
-      <title>X</title>
-      <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+      <g id="Twitter">
+        <path d="M9.14163 7.19284L13.6089 2H12.5503L8.67137 6.50887L5.57328 2H2L6.68492 8.81821L2 14.2637H3.05866L7.15491 9.50218L10.4267 14.2637H14L9.14163 7.19284ZM7.69165 8.87828L7.21697 8.19934L3.44011 2.79694H5.06615L8.11412 7.15685L8.5888 7.83579L12.5508 13.503H10.9248L7.69165 8.87828Z" />
+      </g>
     </svg>
   );
 };
diff --git a/apps/dashboard/src/data/analytics/contract-event-breakdown.ts b/apps/dashboard/src/data/analytics/contract-event-breakdown.ts
index d4a048395a0..3f2dc126832 100644
--- a/apps/dashboard/src/data/analytics/contract-event-breakdown.ts
+++ b/apps/dashboard/src/data/analytics/contract-event-breakdown.ts
@@ -1,5 +1,5 @@
 import { getUnixTime } from "date-fns";
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "../../@/constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "../../@/constants/public-envs";
 import { getVercelEnv } from "../../lib/vercel-utils";
 
 type InsightAggregationEntry = {
@@ -46,7 +46,7 @@ export async function getContractEventBreakdown(params: {
     `https://insight.${thirdwebDomain}.com/v1/events/${params.contractAddress}?${queryParams}`,
     {
       headers: {
-        "x-client-id": NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+        "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
       },
     },
   );
diff --git a/apps/dashboard/src/data/analytics/contract-events.ts b/apps/dashboard/src/data/analytics/contract-events.ts
index 1afee3eca36..a2b3164d40e 100644
--- a/apps/dashboard/src/data/analytics/contract-events.ts
+++ b/apps/dashboard/src/data/analytics/contract-events.ts
@@ -1,5 +1,5 @@
 import { getUnixTime } from "date-fns";
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "../../@/constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "../../@/constants/public-envs";
 import { getVercelEnv } from "../../lib/vercel-utils";
 
 // This is weird aggregation response type, this will be changed later in insight
@@ -49,7 +49,7 @@ export async function getContractEventAnalytics(params: {
     `https://insight.${thirdwebDomain}.com/v1/events/${params.contractAddress}?${queryParams}`,
     {
       headers: {
-        "x-client-id": NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+        "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
       },
     },
   );
diff --git a/apps/dashboard/src/data/analytics/contract-function-breakdown.ts b/apps/dashboard/src/data/analytics/contract-function-breakdown.ts
index f92b13c1bdd..92a47f22ec9 100644
--- a/apps/dashboard/src/data/analytics/contract-function-breakdown.ts
+++ b/apps/dashboard/src/data/analytics/contract-function-breakdown.ts
@@ -1,5 +1,5 @@
 import { getUnixTime } from "date-fns";
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "../../@/constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "../../@/constants/public-envs";
 import { getVercelEnv } from "../../lib/vercel-utils";
 
 type InsightAggregationEntry = {
@@ -46,7 +46,7 @@ export async function getContractFunctionBreakdown(params: {
     `https://insight.${thirdwebDomain}.com/v1/transactions/${params.contractAddress}?${queryParams}`,
     {
       headers: {
-        "x-client-id": NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+        "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
       },
     },
   );
diff --git a/apps/dashboard/src/data/analytics/contract-transactions.ts b/apps/dashboard/src/data/analytics/contract-transactions.ts
index 7ba6188b050..eb5e840d231 100644
--- a/apps/dashboard/src/data/analytics/contract-transactions.ts
+++ b/apps/dashboard/src/data/analytics/contract-transactions.ts
@@ -1,4 +1,4 @@
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "@/constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
 import { getUnixTime } from "date-fns";
 import { getVercelEnv } from "../../lib/vercel-utils";
 
@@ -49,7 +49,7 @@ export async function getContractTransactionAnalytics(params: {
     `https://insight.${thirdwebDomain}.com/v1/transactions/${params.contractAddress}?${queryParams}`,
     {
       headers: {
-        "x-client-id": NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+        "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
       },
     },
   );
diff --git a/apps/dashboard/src/data/analytics/contract-wallet-analytics.ts b/apps/dashboard/src/data/analytics/contract-wallet-analytics.ts
index 06fb7b97336..f85540fce67 100644
--- a/apps/dashboard/src/data/analytics/contract-wallet-analytics.ts
+++ b/apps/dashboard/src/data/analytics/contract-wallet-analytics.ts
@@ -1,5 +1,5 @@
 import { getUnixTime } from "date-fns";
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "../../@/constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "../../@/constants/public-envs";
 import { getVercelEnv } from "../../lib/vercel-utils";
 
 // This is weird aggregation response type, this will be changed later in insight
@@ -49,7 +49,7 @@ export async function getContractUniqueWalletAnalytics(params: {
     `https://insight.${thirdwebDomain}.com/v1/transactions/${params.contractAddress}?${queryParams}`,
     {
       headers: {
-        "x-client-id": NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+        "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
       },
     },
   );
diff --git a/apps/dashboard/src/data/analytics/total-contract-events.ts b/apps/dashboard/src/data/analytics/total-contract-events.ts
index 57632b97f4e..119e6443c43 100644
--- a/apps/dashboard/src/data/analytics/total-contract-events.ts
+++ b/apps/dashboard/src/data/analytics/total-contract-events.ts
@@ -1,4 +1,4 @@
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "@/constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
 import { getVercelEnv } from "../../lib/vercel-utils";
 
 // This is weird aggregation response type, this will be changed later in insight
@@ -28,7 +28,7 @@ export async function getTotalContractEvents(params: {
     `https://insight.${thirdwebDomain}.com/v1/events/${params.contractAddress}?${queryParams}`,
     {
       headers: {
-        "x-client-id": NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+        "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
       },
     },
   );
diff --git a/apps/dashboard/src/data/analytics/total-contract-transactions.ts b/apps/dashboard/src/data/analytics/total-contract-transactions.ts
index 22c7504d04d..4fda3c35c38 100644
--- a/apps/dashboard/src/data/analytics/total-contract-transactions.ts
+++ b/apps/dashboard/src/data/analytics/total-contract-transactions.ts
@@ -1,4 +1,4 @@
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "../../@/constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "../../@/constants/public-envs";
 import { getVercelEnv } from "../../lib/vercel-utils";
 
 // This is weird aggregation response type, this will be changed later in insight
@@ -28,7 +28,7 @@ export async function getTotalContractTransactions(params: {
     `https://insight.${thirdwebDomain}.com/v1/transactions/${params.contractAddress}?${queryParams}`,
     {
       headers: {
-        "x-client-id": NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+        "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
       },
     },
   );
diff --git a/apps/dashboard/src/data/analytics/total-unique-wallets.ts b/apps/dashboard/src/data/analytics/total-unique-wallets.ts
index 4006ce4e719..a2cb75b0b10 100644
--- a/apps/dashboard/src/data/analytics/total-unique-wallets.ts
+++ b/apps/dashboard/src/data/analytics/total-unique-wallets.ts
@@ -1,4 +1,4 @@
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "@/constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
 import { getVercelEnv } from "../../lib/vercel-utils";
 
 // This is weird aggregation response type, this will be changed later in insight
@@ -28,7 +28,7 @@ export async function getTotalContractUniqueWallets(params: {
     `https://insight.${thirdwebDomain}.com/v1/transactions/${params.contractAddress}?${queryParams}`,
     {
       headers: {
-        "x-client-id": NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+        "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
       },
     },
   );