add swap widget in public token page

MananTank · MananTank · commit 2fe8436391ef · 2025-09-15T19:03:55.000+05:30
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
@@ -1,12 +1,15 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { useState } from "react";
 import type { Chain, ThirdwebClient } from "thirdweb";
-import { BuyWidget } from "thirdweb/react";
+import { BuyWidget, SwapWidget } from "thirdweb/react";
 import {
   reportAssetBuyFailed,
   reportAssetBuySuccessful,
 } from "@/analytics/report";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { parseError } from "@/utils/errorParser";
 import { getSDKTheme } from "@/utils/sdk-component-theme";
 
@@ -16,33 +19,89 @@ export function BuyTokenEmbed(props: {
   tokenAddress: string;
 }) {
   const { theme } = useTheme();
+  const [tab, setTab] = useState<"buy" | "swap">("swap");
+  const themeObj = getSDKTheme(theme === "light" ? "light" : "dark");
   return (
-    <BuyWidget
-      amount="1"
-      chain={props.chain}
-      className="!rounded-xl !w-full"
-      client={props.client}
-      connectOptions={{
-        autoConnect: false,
-      }}
-      onError={(e) => {
-        const errorMessage = parseError(e);
-        reportAssetBuyFailed({
-          assetType: "coin",
-          chainId: props.chain.id,
-          contractType: "DropERC20",
-          error: errorMessage,
-        });
-      }}
-      onSuccess={() => {
-        reportAssetBuySuccessful({
-          assetType: "coin",
-          chainId: props.chain.id,
-          contractType: "DropERC20",
-        });
-      }}
-      theme={getSDKTheme(theme === "light" ? "light" : "dark")}
-      tokenAddress={props.tokenAddress as `0x${string}`}
-    />
+    <div className="bg-card rounded-2xl border overflow-hidden flex flex-col">
+      <div className="flex gap-2 p-4 border-b border-dashed">
+        <TabButton
+          label="Swap"
+          onClick={() => setTab("swap")}
+          isActive={tab === "swap"}
+        />
+        <TabButton
+          label="Buy"
+          onClick={() => setTab("buy")}
+          isActive={tab === "buy"}
+        />
+      </div>
+
+      {tab === "buy" && (
+        <BuyWidget
+          amount="1"
+          chain={props.chain}
+          className="!rounded-2xl !w-full !border-none"
+          title=""
+          client={props.client}
+          connectOptions={{
+            autoConnect: false,
+          }}
+          onError={(e) => {
+            const errorMessage = parseError(e);
+            reportAssetBuyFailed({
+              assetType: "coin",
+              chainId: props.chain.id,
+              contractType: "DropERC20",
+              error: errorMessage,
+            });
+          }}
+          onSuccess={() => {
+            reportAssetBuySuccessful({
+              assetType: "coin",
+              chainId: props.chain.id,
+              contractType: "DropERC20",
+            });
+          }}
+          theme={themeObj}
+          tokenAddress={props.tokenAddress as `0x${string}`}
+        />
+      )}
+
+      {tab === "swap" && (
+        <SwapWidget
+          client={props.client}
+          theme={themeObj}
+          className="!rounded-2xl !border-none !w-full"
+          prefill={{
+            sellToken: {
+              chainId: props.chain.id,
+              tokenAddress: props.tokenAddress,
+            },
+            buyToken: {
+              chainId: props.chain.id,
+            },
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function TabButton(props: {
+  label: string;
+  onClick: () => void;
+  isActive: boolean;
+}) {
+  return (
+    <Button
+      onClick={props.onClick}
+      className={cn(
+        "rounded-full text-muted-foreground px-5 text-base bg-accent",
+        props.isActive && "text-foreground border-foreground",
+      )}
+      variant="outline"
+    >
+      {props.label}
+    </Button>
   );
 }
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
@@ -128,7 +128,7 @@ export type BuyWidgetProps = {
   amount: string;
 
   /**
-   * The title to display in the widget.
+   * The title to display in the widget. If `title` is explicity set to an empty string, the title will not be displayed.
    */
   title?: string;
 
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx b/packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx
@@ -19,6 +19,8 @@ export function WithHeader({
   client: ThirdwebClient;
 }) {
   const theme = useCustomTheme();
+  const showTitle = uiOptions.metadata?.title !== "";
+
   return (
     <Container flex="column">
       {/* image */}
@@ -36,25 +38,33 @@ export function WithHeader({
           }}
         />
       )}
+
       <Container flex="column" px="lg">
         <Spacer y="lg" />
 
-        {/* title */}
-        <Text color="primaryText" size="lg" weight={700}>
-          {uiOptions.metadata?.title || defaultTitle}
-        </Text>
-
-        {/* Description */}
-        {uiOptions.metadata?.description && (
+        {(showTitle || uiOptions.metadata?.description) && (
           <>
-            <Spacer y="xs" />
-            <Text color="secondaryText" size="sm">
-              {uiOptions.metadata?.description}
-            </Text>
+            {/* title */}
+            {showTitle && (
+              <Text color="primaryText" size="lg" weight={700}>
+                {uiOptions.metadata?.title || defaultTitle}
+              </Text>
+            )}
+
+            {/* Description */}
+            {uiOptions.metadata?.description && (
+              <>
+                <Spacer y="xs" />
+                <Text color="secondaryText" size="sm">
+                  {uiOptions.metadata?.description}
+                </Text>
+              </>
+            )}
+
+            <Spacer y="lg" />
           </>
         )}
 
-        <Spacer y="lg" />
         {children}
       </Container>
     </Container>
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
@@ -1,5 +1,9 @@
 import styled from "@emotion/styled";
-import { ChevronDownIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  DiscIcon,
+} from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { Buy, Sell } from "../../../../../bridge/index.js";
@@ -645,28 +649,26 @@ function SelectedTokenButton(props: {
       }}
     >
       {/* icons */}
-      <div
-        style={{
-          position: "relative",
-        }}
-      >
+      <Container relative color="secondaryText">
         {/* token icon */}
         <Img
+          key={props.selectedToken?.data?.iconUri}
           src={
-            props.selectedToken === undefined
+            props.selectedToken?.data === undefined
               ? undefined
-              : props.selectedToken.data?.iconUri || ""
+              : props.selectedToken.data.iconUri || ""
           }
           client={props.client}
           width={iconSize.lg}
           height={iconSize.lg}
+          skeletonColor="modalBg"
+          fallback={<DiscIcon width={iconSize.lg} height={iconSize.lg} />}
           style={{
             borderRadius: radius.full,
           }}
         />
 
         {/* chain icon */}
-
         <Container
           bg="modalBg"
           style={{
@@ -683,12 +685,13 @@ function SelectedTokenButton(props: {
             client={props.client}
             width={iconSize.sm}
             height={iconSize.sm}
+            skeletonColor="modalBg"
             style={{
               borderRadius: radius.full,
             }}
           />
         </Container>
-      </div>
+      </Container>
 
       {/* token symbol and chain name */}
       <Container flex="column" style={{ gap: "2px" }}>
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts
@@ -3,6 +3,7 @@ import type { Token } from "../../../../../bridge/index.js";
 import { tokens } from "../../../../../bridge/Token.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { isAddress } from "../../../../../utils/address.js";
+import { getThirdwebBaseUrl } from "../../../../../utils/domains.js";
 
 export function useTokens(options: {
   client: ThirdwebClient;
@@ -82,8 +83,10 @@ export function useTokenBalances(options: {
       if (!options.chainId) {
         throw new Error("Chain ID is required");
       }
+      const baseUrl = getThirdwebBaseUrl("bridge");
+      const isDev = baseUrl.includes("thirdweb-dev");
       const url = new URL(
-        `https://api.thirdweb.com/v1/wallets/${options.walletAddress}/tokens`,
+        `https://api.${isDev ? "thirdweb-dev" : "thirdweb"}.com/v1/wallets/${options.walletAddress}/tokens`,
       );
       url.searchParams.set("chainId", options.chainId.toString());
       url.searchParams.set("limit", options.limit.toString());
diff --git a/packages/thirdweb/src/react/web/ui/components/Img.tsx b/packages/thirdweb/src/react/web/ui/components/Img.tsx
@@ -2,7 +2,7 @@
 import { useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { resolveScheme } from "../../../../utils/ipfs.js";
-import { radius } from "../../../core/design-system/index.js";
+import { radius, type Theme } from "../../../core/design-system/index.js";
 import { Container } from "./basic.js";
 import { Skeleton } from "./Skeleton.js";
 
@@ -20,6 +20,7 @@ export const Img: React.FC<{
   fallbackImage?: string;
   fallback?: React.ReactNode;
   client: ThirdwebClient;
+  skeletonColor?: keyof Theme["colors"];
 }> = (props) => {
   const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
     "pending",
@@ -38,7 +39,14 @@ export const Img: React.FC<{
   const heightPx = `${props.height || props.width}px`;
 
   if (propSrc === undefined) {
-    return <Skeleton height={heightPx} width={widthPx} />;
+    return (
+      <Skeleton
+        height={heightPx}
+        width={widthPx}
+        color={props.skeletonColor}
+        style={props.style}
+      />
+    );
   }
 
   const getSrc = () => {
@@ -65,7 +73,14 @@ export const Img: React.FC<{
         position: "relative",
       }}
     >
-      {status === "pending" && <Skeleton height={heightPx} width={widthPx} />}
+      {status === "pending" && (
+        <Skeleton
+          height={heightPx}
+          width={widthPx}
+          color={props.skeletonColor}
+          style={props.style}
+        />
+      )}
       {status === "fallback" &&
         (props.fallback || (
           <Container
