@b3dotfun/sdk 0.0.1-alpha.1

package/src/global-account/react/components/SignInWithB3/components/PermissionItem.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import type { JSX } from "react";
+import { ReactNode } from "react";
+
+interface PermissionItemProps {
+  title: string;
+  description: string | JSX.Element;
+  icon: string | ReactNode;
+  className?: string;
+}
+
+export function PermissionItem({ title, description, icon, className }: PermissionItemProps) {
+  return (
+    <div className={cn("bg-b3-react-card flex items-center gap-5 rounded-lg border p-5 py-4", className)}>
+      <div className="text-2xl opacity-30">{icon}</div>
+      <div>
+        <h3 className="text-lg font-medium">{title}</h3>
+        <p className="text-b3-react-muted-foreground text-sm opacity-70">{description}</p>
+      </div>
+    </div>
+  );
+}

package/src/global-account/react/components/SignInWithB3/components/WalletRow.tsx

@@ -0,0 +1,32 @@
+import { WalletIcon, WalletName, WalletProvider } from "thirdweb/react";
+import { WalletId } from "thirdweb/wallets";
+import { Button } from "../../custom/Button";
+
+export function WalletRow({
+  walletId,
+  onClick,
+  isLoading
+}: {
+  walletId: WalletId;
+  onClick: () => void;
+  isLoading: boolean;
+}) {
+  return (
+    <WalletProvider key={walletId} id={walletId as WalletId}>
+      <Button
+        onClick={onClick}
+        disabled={isLoading}
+        className="flex w-full items-center justify-normal gap-3 rounded-lg border border-gray-200 bg-transparent px-4 py-3 text-gray-900 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800"
+      >
+        <WalletIcon
+          className="h-12 w-12"
+          loadingComponent={<div className="h-8 w-8 animate-pulse rounded-full bg-gray-200 dark:bg-gray-700" />}
+        />
+        <WalletName
+          className="font-bold text-gray-900 dark:text-gray-100"
+          loadingComponent={<div className="h-4 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />}
+        />
+      </Button>
+    </WalletProvider>
+  );
+}

package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx

@@ -0,0 +1,135 @@
+import { useB3 } from "@b3dotfun/sdk/global-account/react/components/B3Provider";
+import useAuthentication from "@b3dotfun/sdk/global-account/react/hooks/useAuthentication";
+import useQueryB3 from "@b3dotfun/sdk/global-account/react/hooks/useQueryB3";
+import { useAuthStore } from "@b3dotfun/sdk/global-account/react/stores/useAuthStore";
+import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { Chain } from "thirdweb";
+import { ConnectEmbed, darkTheme, lightTheme } from "thirdweb/react";
+import { Account, ecosystemWallet, SingleStepAuthArgsType } from "thirdweb/wallets";
+/**
+ * Props for the LoginStep component
+ */
+interface LoginStepProps {
+  /** Callback function called when login is successful */
+  onSuccess: (account: Account) => Promise<void>;
+  /** Optional callback function called when an error occurs */
+  onError?: (error: Error) => Promise<void>;
+  /** Partner ID used for authentication */
+  partnerId: string;
+  /** Blockchain chain information */
+  chain: Chain;
+  /** Optional authentication strategy options */
+  strategyOptions?: SingleStepAuthArgsType;
+}
+
+interface LoginStepContainerProps {
+  children: React.ReactNode;
+  partnerId?: string;
+}
+
+export function LoginStepContainer({ children, partnerId }: LoginStepContainerProps) {
+  const { data: partner } = useQueryB3(
+    "global-accounts-partners",
+    "find",
+    {
+      query: {
+        partnerId,
+        $limit: 1
+      }
+    },
+    !!partnerId
+  );
+
+  const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
+
+  return (
+    <div className="flex flex-col items-center justify-center py-6">
+      {partnerLogo && <img src={partnerLogo} alt="Partner Logo" className="mb-4 h-12 w-auto object-contain" />}
+      {children}
+      <h2 className="mt-3 flex items-center gap-2 text-lg font-bold">
+        Powered by
+        <img alt="B3 Logo" className="h-5" src="https://cdn.b3.fun/b3_logo.svg" />
+        Connect
+      </h2>
+    </div>
+  );
+}
+
+export function LoginStep({ onSuccess, onError, partnerId, chain }: LoginStepProps) {
+  const wallet = ecosystemWallet(ecosystemWalletId, {
+    partnerId: partnerId
+  });
+
+  const { theme } = useB3();
+  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+  const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
+  const { logout } = useAuthentication(partnerId);
+
+  return (
+    <LoginStepContainer partnerId={partnerId}>
+      <ConnectEmbed
+        showThirdwebBranding={false}
+        client={client}
+        chain={chain}
+        wallets={[wallet]}
+        theme={
+          theme === "light"
+            ? lightTheme({
+                colors: {
+                  modalBg: "hsl(var(--b3-react-background))"
+                }
+              })
+            : darkTheme({
+                colors: {
+                  modalBg: "hsl(var(--b3-react-background))"
+                }
+              })
+        }
+        autoConnect
+        style={{
+          width: "100%",
+          height: "100%",
+          border: 0
+        }}
+        // TODO: Integrate with SIWE in useSIWE
+        // auth={{
+        //   isLoggedIn: async (address) => {
+        //     console.log("checking if logged in!", { address });
+        //     return await isLoggedIn();
+        //   },
+        //   doLogin: async (params) => {
+        //     console.log("logging in!");
+        //     await login(params);
+        //   },
+        //   getLoginPayload: async ({ address }) =>
+        //     generatePayload({ address }),
+        //   doLogout: async () => {
+        //     console.log("logging out!");
+        //     await logout();
+        //   },
+        // }}
+        header={{
+          title: "Sign in with B3",
+          titleIcon: "https://cdn.b3.fun/b3_logo.svg"
+        }}
+        onConnect={async wallet => {
+          try {
+            setIsAuthenticating(true);
+            console.log("connected!", wallet);
+            const account = wallet.getAccount();
+            if (!account) throw new Error("No account found");
+            await onSuccess(account);
+            setIsAuthenticated(true);
+          } catch (error) {
+            await onError?.(error as Error);
+            await logout();
+            setIsAuthenticated(false);
+          } finally {
+            setIsAuthenticating(false);
+          }
+        }}
+      />
+    </LoginStepContainer>
+  );
+}

package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx

@@ -0,0 +1,148 @@
+import { Button } from "@b3dotfun/sdk/global-account/react/components/custom/Button";
+import AuthButton from "@b3dotfun/sdk/global-account/react/components/SignInWithB3/components/AuthButton";
+import { WalletRow } from "@b3dotfun/sdk/global-account/react/components/SignInWithB3/components/WalletRow";
+import { LoginStepContainer } from "@b3dotfun/sdk/global-account/react/components/SignInWithB3/steps/LoginStep";
+import {
+  AllowedStrategy,
+  getConnectOptionsFromStrategy,
+  isWalletType
+} from "@b3dotfun/sdk/global-account/react/components/SignInWithB3/utils/signInUtils";
+import useAuthentication from "@b3dotfun/sdk/global-account/react/hooks/useAuthentication";
+import { useConnect } from "@b3dotfun/sdk/global-account/react/hooks/useConnect";
+import { useAuthStore } from "@b3dotfun/sdk/global-account/react/stores/useAuthStore";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { useState } from "react";
+import { Chain } from "thirdweb";
+import { useConnect as useConnectTW } from "thirdweb/react";
+import { Account, createWallet, Wallet, WalletId } from "thirdweb/wallets";
+
+interface LoginStepCustomProps {
+  automaticallySetFirstEoa: boolean;
+  onSuccess: (account: Account) => Promise<void>;
+  onError?: (error: Error) => Promise<void>;
+  partnerId: string;
+  chain: Chain;
+  strategies: AllowedStrategy[];
+  maxInitialWallets?: number;
+}
+
+export function LoginStepCustom({
+  onSuccess,
+  onError,
+  partnerId,
+  chain,
+  strategies,
+  maxInitialWallets = 2,
+  automaticallySetFirstEoa
+}: LoginStepCustomProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [showAllWallets, setShowAllWallets] = useState(false);
+  const { connect } = useConnect(partnerId, chain);
+  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
+  const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
+  const { logout } = useAuthentication(partnerId);
+  const { connect: connectTW } = useConnectTW();
+
+  // Split strategies into auth and wallet types
+  const authStrategies = strategies.filter(s => !isWalletType(s));
+  const walletStrategies = strategies.filter(isWalletType);
+  const initialWallets = walletStrategies.slice(0, maxInitialWallets);
+  const additionalWallets = walletStrategies.slice(maxInitialWallets);
+
+  const handleConnect = async (strategy: AllowedStrategy) => {
+    try {
+      setIsLoading(true);
+      setIsAuthenticating(true);
+      const options = getConnectOptionsFromStrategy(strategy);
+      let connectResult: Wallet | null;
+
+      if (automaticallySetFirstEoa) {
+        if (!options.wallet?.id) {
+          throw new Error("Wallet ID is required");
+        }
+        connectResult = await connectTW(async () => {
+          const wallet = createWallet(options.wallet?.id as WalletId);
+          await wallet.connect({
+            client
+          });
+
+          return wallet;
+        });
+      } else {
+        // @ts-expect-error we have custom strategies too and we also get things like "apple" isn't assignable to "wallet"
+        connectResult = await connect(options);
+      }
+
+      const account = connectResult?.getAccount();
+      console.log("@@gio:connectResult", { connectResult, account, options });
+      if (!account) throw new Error("Failed to connect");
+      await onSuccess(account);
+      setIsAuthenticated(true);
+    } catch (error) {
+      await onError?.(error as Error);
+      await logout();
+      setIsAuthenticated(false);
+    } finally {
+      setIsLoading(false);
+      setIsAuthenticating(false);
+    }
+  };
+
+  return (
+    <LoginStepContainer partnerId={partnerId}>
+      {/* Auth Strategies */}
+      {authStrategies.length > 0 && (
+        <div className="mb-6 grid w-full grid-cols-4 gap-4">
+          {authStrategies.map(strategy => {
+            console.log("strategy", strategy);
+            return (
+              <AuthButton
+                key={strategy}
+                strategy={strategy}
+                onClick={() => handleConnect(strategy)}
+                isLoading={isLoading}
+              />
+            );
+          })}
+        </div>
+      )}
+
+      {/* Initial Wallet List */}
+      <div className="mb-4 w-full space-y-2">
+        {initialWallets.map(walletId => (
+          <WalletRow
+            key={walletId}
+            walletId={walletId as WalletId}
+            onClick={() => handleConnect(walletId)}
+            isLoading={isLoading}
+          />
+        ))}
+      </div>
+
+      {/* Additional Wallets Section */}
+      {additionalWallets.length > 0 && (
+        <div className="w-full">
+          <Button
+            onClick={() => setShowAllWallets(!showAllWallets)}
+            className="mb-2 w-full bg-transparent text-gray-600 hover:bg-gray-100"
+          >
+            {showAllWallets ? "Show less" : "More options"}
+          </Button>
+
+          {showAllWallets && (
+            <div className="max-h-60 space-y-2 overflow-y-auto">
+              {additionalWallets.map(walletId => (
+                <WalletRow
+                  key={walletId}
+                  walletId={walletId as WalletId}
+                  onClick={() => handleConnect(walletId)}
+                  isLoading={isLoading}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </LoginStepContainer>
+  );
+}

package/src/global-account/react/components/SignInWithB3/utils/signInUtils.ts

@@ -0,0 +1,70 @@
+import { Chain } from "thirdweb";
+import { createWallet, SingleStepAuthArgsType, Wallet } from "thirdweb/wallets";
+
+type WalletType = Wallet["id"];
+type StrategyType = SingleStepAuthArgsType["strategy"];
+type CustomStrategyType = "basement" | "privy";
+
+type AllowedStrategies = StrategyType | WalletType | CustomStrategyType;
+const customStrategies = ["basement", "privy"] as const;
+// type CustomStrategy = (typeof customStrategies)[number];
+
+export const allowedStrategies = [
+  // Auth strategies
+  "apple",
+  "google",
+  "x",
+  "discord",
+  // "github",
+  "guest",
+
+  // Wallet IDs
+  "walletConnect",
+  "io.metamask",
+  "com.coinbase.wallet",
+
+  // Custom strategies
+  // TODO: Audit we don't use "privy" directly anymore
+  ...customStrategies
+] as const;
+
+export type AllowedStrategy = (typeof allowedStrategies)[number];
+
+export function isWalletType(strategy: AllowedStrategies): strategy is WalletType {
+  // Check if it's a known wallet ID pattern (com.*, io.*, etc.)
+  const walletIdPattern = /^(com\.|io\.|app\.|xyz\.|me\.|org\.|pro\.)/;
+  return strategy === "walletConnect" || walletIdPattern.test(strategy);
+}
+
+export function isStrategyType(strategy: AllowedStrategies): strategy is StrategyType {
+  return !isWalletType(strategy);
+}
+
+export function getConnectOptionsFromStrategy(strategy: AllowedStrategy): {
+  strategy: StrategyType;
+  wallet?: Wallet;
+  chain?: Chain; // required for SIWE, which we do custom atm
+} {
+  if (!allowedStrategies.includes(strategy)) {
+    throw new Error(`Invalid strategy: ${strategy}`);
+  }
+
+  if (isWalletType(strategy)) {
+    return { strategy: "wallet" as const, wallet: createWallet(strategy) };
+  } else {
+    // @ts-expect-error we have custom strategies too
+    return { strategy };
+  }
+}
+
+export const strategyIcons: Record<string, string> = {
+  google: "https://cdn.b3.fun/google.svg",
+  x: "https://cdn.b3.fun/x.svg?1",
+  discord: "https://cdn.b3.fun/discord.svg",
+  apple: "https://cdn.b3.fun/apple.svg",
+  guest: "https://cdn.b3.fun/incognito.svg"
+  // Add more strategies as needed
+};
+// Test it
+// console.log(getConnectOptionsFromStrategy("io.metamask"));
+// console.log(getConnectOptionsFromStrategy("google"));

package/src/global-account/react/components/StyleRoot.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from "react";
+import { useB3 } from "./B3Provider";
+
+export default function StyleRoot({ children, id }: PropsWithChildren<{ id?: string }>) {
+  const { theme: b3Theme } = useB3();
+  // eslint-disable-next-line tailwindcss/no-custom-classname
+  return (
+    <div className="b3-root" id={id} data-theme={b3Theme}>
+      {children}
+    </div>
+  );
+}

package/src/global-account/react/components/Transak/TransakModal.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useB3 } from "@b3dotfun/sdk/global-account";
+import { TextShimmer } from "@b3dotfun/sdk/global-account/react/components/ui/text-shimmer";
+import { useAccountWallet } from "@b3dotfun/sdk/global-account/react/hooks/useAccountWallet";
+import { useModalStore } from "@b3dotfun/sdk/global-account/react/stores/useModalStore";
+import debug from "@b3dotfun/sdk/shared/utils/debug";
+import { Transak, TransakConfig } from "@transak/transak-sdk";
+import { Loader2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+export default function TransakModal() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [_error, setError] = useState<Error | null>(null);
+
+  const account = useAccountWallet();
+  const { environment } = useB3();
+
+  console.log(`process.env.NEXT_PUBLIC_TRANSAK_API_KEY`, process.env.NEXT_PUBLIC_TRANSAK_API_KEY); // d1f4e8be-cacb-4cfa-b2cd-c591084b5ef6
+
+  const transakConfig = useMemo((): TransakConfig => {
+    return {
+      apiKey: process.env.NEXT_PUBLIC_TRANSAK_API_KEY || "", // (Required)
+      // Yes, I know it looks weird to use isDevelopment for staging, but this is how this was done on Basement. Leaving till confirming difference
+      environment: environment === "development" ? Transak.ENVIRONMENTS.STAGING : Transak.ENVIRONMENTS.PRODUCTION, // (Required)
+      containerId: "transakMount", // Id of the element where you want to initialize the iframe
+      themeColor: "0c68e9",
+      widgetHeight: "650px",
+      productsAvailed: "BUY",
+      hideMenu: true,
+      colorMode: "DARK",
+      backgroundColors: "000000", // TODO: figure out why this doesn't work
+      exchangeScreenTitle: "Buy ETH on B3",
+      isFeeCalculationHidden: true,
+      cryptoCurrencyCode: "ETH",
+      network: "b3"
+    };
+  }, [environment]);
+
+  const { ready } = useB3();
+  const modalOptions = useModalStore(state => state.contentType);
+  const isOnRamp = modalOptions?.type === "transak";
+  const destinationWalletAddress = isOnRamp ? modalOptions?.destinationWalletAddress : undefined;
+  const defaultCryptoAmount = isOnRamp ? modalOptions?.defaultCryptoAmount : undefined;
+  const onSuccess = isOnRamp ? modalOptions?.onSuccess : undefined;
+  const fiatAmount = isOnRamp ? modalOptions?.fiatAmount : undefined;
+  const countryCode = isOnRamp ? modalOptions?.countryCode : undefined;
+
+  useEffect(() => {
+    if (!ready || !isOnRamp) return;
+
+    const config = {
+      ...transakConfig,
+      walletAddress: destinationWalletAddress || account?.address, // In the future, this should be set to the new global B3 SCW address
+      defaultCryptoAmount,
+      disableWalletAddressForm: !!destinationWalletAddress || !!account?.address, // Only disable the form if we have an address
+      fiatAmount: fiatAmount,
+      countryCode: countryCode
+    };
+
+    const transak = new Transak(config);
+
+    try {
+      transak.init();
+
+      // Add event listeners
+      Transak.on("*", data => {
+        debug("@@transak", data);
+      });
+
+      Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
+        setIsLoading(false);
+        debug("@@transak", "Transak SDK closed!");
+      });
+
+      Transak.on(Transak.EVENTS.TRANSAK_WIDGET_INITIALISED, () => {
+        debug("@@transak", "Transak SDK initialized!");
+        setIsLoading(false);
+      });
+
+      Transak.on(Transak.EVENTS.TRANSAK_ORDER_FAILED, orderData => {
+        debug("@@transak", orderData);
+        toast.error("Oh no! Something went wrong. Please try again.");
+      });
+
+      Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, orderData => {
+        debug("@@transak", orderData);
+        toast.success("Successfully purchased ETH with credit card!");
+        onSuccess?.();
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to initialize Transak"));
+      toast.error("Oh no! Something went wrong. Please try again.");
+      setIsLoading(false);
+    }
+
+    // Cleanup code
+    return () => {
+      transak.close();
+    };
+  }, [
+    ready,
+    account?.address,
+    destinationWalletAddress,
+    defaultCryptoAmount,
+    isOnRamp,
+    onSuccess,
+    fiatAmount,
+    transakConfig,
+    countryCode
+  ]);
+
+  return (
+    <>
+      {isLoading && (
+        <div className="flex h-full min-h-[650px] flex-col items-center justify-center gap-4">
+          <Loader2 className="h-24 w-24 animate-spin opacity-10" />
+          <TextShimmer>Powering up our credit card processor...</TextShimmer>
+        </div>
+      )}
+      <div
+        id="transakMount"
+        style={{
+          display: isLoading ? "none" : "block",
+          width: "100%",
+          height: "650px",
+          borderRadius: "25px",
+          overflow: "hidden"
+        }}
+      />
+    </>
+  );
+}

package/src/global-account/react/components/custom/Button.tsx

@@ -0,0 +1,54 @@
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-b3-react-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      // TODO: these variats aren't working atm maybe since TW isn't properly installed on react sdk
+      variant: {
+        default: "bg-b3-react-primary text-b3-react-primary-foreground shadow hover:bg-b3-react-primary/90",
+        destructive: "bg-destructive text-destructive-b3-react-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-b3-react-foreground",
+        secondary: "bg-secondary text-secondary-b3-react-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-b3-react-foreground",
+        link: "text-b3-react-primary underline-offset-4 hover:underline",
+        b3: "bg-[#3368ef] text-white hover:bg-[#3368ef]/90"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "outline";
+  size?: "default" | "sm" | "lg";
+  className?: string;
+}
+
+export function Button({ variant = "default", className, ...props }: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        "flex items-center justify-center rounded-lg px-4 py-2 font-medium transition-colors",
+        variant === "default" && "bg-b3-react-primary text-b3-react-primary-foreground hover:bg-b3-react-primary/90",
+        variant === "outline" &&
+          "border-input bg-b3-react-background hover:bg-accent hover:text-accent-b3-react-foreground border",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { buttonVariants };

package/src/global-account/react/components/custom/ClientOnly.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useHasMounted } from "@b3dotfun/sdk/global-account/react/hooks/useHasMounted";
+import React from "react";
+
+interface ClientOnlyProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export default function ClientOnly({ children, fallback }: ClientOnlyProps) {
+  const hasMounted = useHasMounted();
+
+  // During SSR and initial client render, show fallback
+  if (!hasMounted) {
+    return fallback || null;
+  }
+
+  return children;
+}

package/src/global-account/react/components/custom/CopyToClipboard.tsx

@@ -0,0 +1,47 @@
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+
+interface CopyToClipboardProps {
+  text?: string;
+  onCopy?: () => void;
+  children?: React.ReactNode;
+}
+
+export function CopyToClipboard({ text, onCopy, children }: CopyToClipboardProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    if (!text) return;
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    onCopy?.();
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  if (children) {
+    return (
+      <div onClick={handleCopy} className="cursor-pointer">
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      onClick={handleCopy}
+      className="text-b3-react-muted-foreground hover:text-b3-react-foreground flex cursor-pointer items-center gap-1 text-xs transition-all duration-200"
+    >
+      {copied ? (
+        <>
+          <Check className="h-4 w-4" />
+          <span>Copied</span>
+        </>
+      ) : (
+        <>
+          <Copy className="h-4 w-4" />
+          <span>Copy</span>
+        </>
+      )}
+    </div>
+  );
+}