@b3dotfun/sdk 0.0.24 → 0.0.25

package/src/global-account/react/components/icons/EditIcon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+export interface EditIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function EditIcon({ className, size = 16, color = "white", style }: EditIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path
+        d="M5.79313 13.5001H3C2.86739 13.5001 2.74021 13.4474 2.64645 13.3536C2.55268 13.2599 2.5 13.1327 2.5 13.0001V10.207C2.50006 10.0745 2.55266 9.94753 2.64625 9.85383L10.3538 2.14633C10.4475 2.05263 10.5746 2 10.7072 2C10.8397 2 10.9669 2.05263 11.0606 2.14633L13.8538 4.93758C13.9474 5.03134 14.0001 5.15847 14.0001 5.29102C14.0001 5.42357 13.9474 5.5507 13.8538 5.64446L6.14625 13.3538C6.05255 13.4474 5.92556 13.5 5.79313 13.5001Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M8.5 4L12 7.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export default EditIcon;

package/src/global-account/react/components/icons/SignOutIcon.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export interface SignOutIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function SignOutIcon({ className, size = 16, color = "#676767", style }: SignOutIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path d="M7 2.5H3V13.5H7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M7 8H14" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M11.5 5.5L14 8L11.5 10.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export default SignOutIcon;

package/src/global-account/react/components/icons/SwapIcon.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+export interface SwapIconProps {
+  className?: string;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export function SwapIcon({ className, size = 24, color = "#3268EF", style }: SwapIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path d="M8.75 9H4.25V4.5" stroke={color} strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M4.25 9.00013L6.90125 6.34888C8.43666 4.81353 10.5154 3.94539 12.6868 3.93276C14.8581 3.92012 16.9468 4.764 18.5 6.28138"
+        stroke={color}
+        strokeWidth="2.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M16.25 15H20.75V19.5" stroke={color} strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M20.75 15L18.0988 17.6512C16.5633 19.1866 14.4846 20.0547 12.3132 20.0674C10.1419 20.08 8.05317 19.2361 6.5 17.7188"
+        stroke={color}
+        strokeWidth="2.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default SwapIcon;

package/src/global-account/react/hooks/useB3BalanceFromAddresses.ts

@@ -3,6 +3,7 @@ import { formatNumber } from "@b3dotfun/sdk/shared/utils/formatNumber";
 import { useQuery } from "@tanstack/react-query";
 import { createPublicClient, formatUnits, http } from "viem";
 import { base } from "viem/chains";
+import { fetchTokenPriceWithChange } from "./useTokenPrice";
 
 // ABI for just balanceOf
 const abi = [
@@ -28,9 +29,18 @@ async function fetchB3Balances(addresses: string[]): Promise<{
     address: string;
     balance: bigint;
     formatted: string;
+    balanceUsd: number;
+    balanceUsdFormatted: string;
+    priceChange24h: number | null;
   }[];
+  balanceUsd: number;
+  balanceUsdFormatted: string;
+  priceChange24h: number | null;
 }> {
   try {
+    // Fetch price with change data once (same for all addresses since it's the same token)
+    const priceData = await fetchTokenPriceWithChange(B3_TOKEN.address, B3_TOKEN.chainId, "usd");
+
     // Fetch all balances in parallel
     const balances = await Promise.all(
       addresses.map(async address => {
@@ -40,22 +50,30 @@ async function fetchB3Balances(addresses: string[]): Promise<{
           functionName: "balanceOf",
           args: [address as `0x${string}`],
         });
+        const balanceUsd = Number(formatUnits(balance, B3_TOKEN.decimals)) * priceData.price;
 
         return {
           address,
           balance,
           formatted: formatUnits(balance, B3_TOKEN.decimals),
+          balanceUsd,
+          balanceUsdFormatted: formatNumber(balanceUsd),
+          priceChange24h: priceData.priceChange24h,
         };
       }),
     );
 
     // Calculate total
     const totalBalance = balances.reduce((sum, { balance }) => sum + balance, BigInt(0));
+    const totalBalanceUsd = balances.reduce((sum, { balanceUsd }) => sum + balanceUsd, 0);
 
     return {
       totalBalance,
       formattedTotal: formatNumber(Number(formatUnits(totalBalance, B3_TOKEN.decimals))),
       breakdown: balances,
+      balanceUsd: totalBalanceUsd,
+      balanceUsdFormatted: formatNumber(totalBalanceUsd),
+      priceChange24h: priceData.priceChange24h,
     };
   } catch (error) {
     console.error("Error fetching B3 balances:", error);

package/src/global-account/react/hooks/useNativeBalance.tsx

@@ -3,6 +3,7 @@ import { formatNumber } from "@b3dotfun/sdk/shared/utils/formatNumber";
 import { useQuery } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { createPublicClient, formatEther, formatUnits, http } from "viem";
+import { fetchNativeTokenPriceWithChange } from "./useTokenPrice";
 interface NativeBalanceResponse {
   data: Array<{
     tokenDecimals: number;
@@ -30,21 +31,65 @@ async function fetchNativeBalance(address: string, chainIds: string) {
     return acc + Number(balance);
   }, 0);
 
+  // TODO: Revive me once CoinGecko supports B3
+  let usdBalances: Record<
+    number,
+    {
+      balance: number;
+      formatted: string;
+      priceChange24h: number | null;
+    }
+  > = {};
+
+  let globalPriceChange24h: number | null = null;
+
+  try {
+    for (const item of data.data) {
+      // Use chain ID once since native token ETH is the same across all chains
+      const priceData = await fetchNativeTokenPriceWithChange("eth");
+
+      // Store the price change globally (same for all chains since it's ETH)
+      if (globalPriceChange24h === null) {
+        globalPriceChange24h = priceData.priceChange24h;
+      }
+
+      usdBalances[item.chainId] = {
+        balance: total * priceData.price,
+        formatted: formatNumber(total * priceData.price),
+        priceChange24h: priceData.priceChange24h,
+      };
+    }
+  } catch (error) {
+    console.error("@@useNativeBalance:error in price calculation", error);
+  }
+
+  const totalUsd = Object.values(usdBalances).reduce((acc, curr) => acc + curr.balance, 0);
+
   return {
     total,
     formattedTotal: formatNumber(total),
-    breakdown: data.data.map(item => ({
-      chainId: item.chainId,
-      balance: BigInt(item.balance),
-      formatted: formatNumber(Number(formatUnits(BigInt(item.balance), item.tokenDecimals))),
-    })),
+    totalUsd,
+    formattedTotalUsd: formatNumber(totalUsd),
+    priceChange24h: globalPriceChange24h,
+    breakdown: data.data.map(item => {
+      const usdBalance = usdBalances[item.chainId]?.balance || 0;
+      const priceChange = usdBalances[item.chainId]?.priceChange24h || null;
+      return {
+        chainId: item.chainId,
+        balance: BigInt(item.balance),
+        formatted: formatNumber(Number(formatUnits(BigInt(item.balance), item.tokenDecimals))),
+        balanceUsd: usdBalance,
+        balanceUsdFormatted: formatNumber(usdBalance),
+        priceChange24h: priceChange,
+      };
+    }),
   };
 }
 
 export function useNativeBalance(address?: string, chainIds = "8333") {
   return useQuery({
     queryKey: ["nativeBalance", address, chainIds],
-    queryFn: () => fetchNativeBalance(address!, chainIds),
+    queryFn: () => fetchNativeBalance(address || "", chainIds),
     enabled: Boolean(address),
     staleTime: 30 * 1000, // Consider data fresh for 30 seconds
     gcTime: 5 * 60 * 1000, // Keep unused data in cache for 5 minutes

package/src/global-account/react/hooks/useTokenPrice.tsx

@@ -20,14 +20,110 @@ interface TokenPriceResponse {
   };
 }
 
-async function fetchTokenPrice(contractAddress: string, chainId: number, vsCurrency = "usd") {
+interface TokenPriceWithChangeResponse {
+  [contractAddress: string]: {
+    [key: string]: number; // For both currency prices and price change keys like "usd_24h_change"
+  };
+}
+
+interface NativeTokenPriceResponse {
+  data: {
+    id: string;
+    type: string;
+    attributes: {
+      token_prices: {
+        [address: string]: string;
+      };
+    };
+  };
+}
+
+export async function fetchNativeTokenPriceUsd(contractAddress: string, network: string) {
+  const response = await fetch(
+    `https://coingecko-api.sean-430.workers.dev?localkey=${process.env.NEXT_PUBLIC_DEVMODE_SHARED_SECRET}&url=https://pro-api.coingecko.com/api/v3/onchain/simple/networks/${network}/token_price/${contractAddress}`,
+    {
+      headers: {
+        accept: "application/json",
+      },
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch native token price: ${response.status} ${response.statusText}`);
+  }
+
+  const data: NativeTokenPriceResponse = await response.json();
+
+  // Find the price using case-insensitive address comparison
+  const prices = data.data?.attributes?.token_prices || {};
+  const price = Object.entries(prices).find(
+    ([address]) => address.toLowerCase() === contractAddress.toLowerCase(),
+  )?.[1];
+
+  if (!price) {
+    throw new Error(`No price data found for native token: ${contractAddress}`);
+  }
+
+  // Convert string price to number
+  const numericPrice = Number(price);
+  if (isNaN(numericPrice)) {
+    throw new Error(`Invalid price data for native token: ${contractAddress}`);
+  }
+
+  return numericPrice;
+}
+
+export async function fetchNativeTokenPriceWithChange(network: string) {
+  // For ETH, use the regular simple price API instead of on-chain API to get price changes
+  const coinId = network === "eth" ? "ethereum" : network;
+
+  const response = await fetch(
+    `https://coingecko-api.sean-430.workers.dev?localkey=${process.env.NEXT_PUBLIC_DEVMODE_SHARED_SECRET}&url=https://pro-api.coingecko.com/api/v3/simple/price?ids=${coinId}&vs_currencies=usd&include_24hr_change=true`,
+    {
+      headers: {
+        accept: "application/json",
+      },
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch native token price with change: ${response.status} ${response.statusText}`);
+  }
+
+  interface SimpleTokenPriceWithChangeResponse {
+    [coinId: string]: {
+      usd: number;
+      usd_24h_change: number;
+    };
+  }
+
+  const data: SimpleTokenPriceWithChangeResponse = await response.json();
+
+  if (!data[coinId]) {
+    throw new Error(`No price data found for coin: ${coinId}`);
+  }
+
+  const price = data[coinId].usd;
+  const priceChange = data[coinId].usd_24h_change;
+
+  if (typeof price !== "number") {
+    throw new Error(`Invalid price data for coin: ${coinId}`);
+  }
+
+  return {
+    price,
+    priceChange24h: priceChange || null,
+  };
+}
+
+export async function fetchTokenPrice(contractAddress: string, chainId: number, vsCurrency = "usd") {
   const platformId = getPlatformId(chainId as ChainId);
+
   const response = await fetch(
-    `https://pro-api.coingecko.com/api/v3/simple/token_price/${platformId}?contract_addresses=${contractAddress}&vs_currencies=${vsCurrency}`,
+    `https://coingecko-api.sean-430.workers.dev?localkey=${process.env.NEXT_PUBLIC_DEVMODE_SHARED_SECRET}&url=https://pro-api.coingecko.com/api/v3/simple/token_price/${platformId}?contract_addresses=${contractAddress}&vs_currencies=${vsCurrency}`,
     {
       headers: {
         accept: "application/json",
-        "x-cg-pro-api-key": process.env.COINGECKO_API_KEY as string,
       },
     },
   );
@@ -52,6 +148,45 @@ async function fetchTokenPrice(contractAddress: string, chainId: number, vsCurre
   return data[contractAddress][vsCurrency] as number;
 }
 
+export async function fetchTokenPriceWithChange(contractAddress: string, chainId: number, vsCurrency = "usd") {
+  const platformId = getPlatformId(chainId as ChainId);
+
+  const response = await fetch(
+    `https://coingecko-api.sean-430.workers.dev?localkey=${process.env.NEXT_PUBLIC_DEVMODE_SHARED_SECRET}&url=https://pro-api.coingecko.com/api/v3/simple/token_price/${platformId}?contract_addresses=${contractAddress}&vs_currencies=${vsCurrency}&include_24hr_change=true`,
+    {
+      headers: {
+        accept: "application/json",
+      },
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch token price with change: ${response.status} ${response.statusText}`);
+  }
+
+  const data: TokenPriceWithChangeResponse = await response.json();
+
+  // Check if the contract address exists in the response
+  if (!data[contractAddress]) {
+    throw new Error(`No price data found for contract address: ${contractAddress}`);
+  }
+
+  // Check if the requested currency exists in the response
+  if (typeof data[contractAddress][vsCurrency] !== "number") {
+    throw new Error(`No price data found for currency: ${vsCurrency}`);
+  }
+
+  // Get the price change key (e.g., "usd_24h_change")
+  const priceChangeKey = `${vsCurrency}_24h_change` as keyof (typeof data)[typeof contractAddress];
+  const priceChange = data[contractAddress][priceChangeKey] as number | undefined;
+
+  // Return the price and price change with proper type checking
+  return {
+    price: data[contractAddress][vsCurrency] as number,
+    priceChange24h: priceChange || null,
+  };
+}
+
 export function useTokenPrice({
   contractAddress,
   chainId = 8453, // Default to Base

package/src/global-account/react/hooks/useUnifiedChainSwitchAndExecute.ts

@@ -16,6 +16,14 @@ export interface UnifiedTransactionParams {
   value: bigint;
 }
 
+const partnerId = String(
+  process.env.PUBLIC_THIRDWEB_PARTNER_ID ||
+    process.env.NEXT_PUBLIC_THIRDWEB_PARTNER_ID ||
+    process.env.PUBLIC_GLOBAL_ACCOUNTS_PARTNER_ID ||
+    process.env.NEXT_PUBLIC_GLOBAL_ACCOUNTS_PARTNER_ID,
+);
+invariant(partnerId, "Partner ID is required");
+
 export function useUnifiedChainSwitchAndExecute() {
   const { data: walletClient } = useWalletClient();
   const { switchChainAsync } = useSwitchChain();
@@ -130,9 +138,7 @@ export function useUnifiedChainSwitchAndExecute() {
         // Check if we can use global-accounts-intents, if yes, create an intent.
         try {
           await app.service("global-accounts-intents").create({
-            partnerId: String(
-              process.env.PUBLIC_GLOBAL_ACCOUNTS_PARTNER_ID || process.env.NEXT_PUBLIC_GLOBAL_ACCOUNTS_PARTNER_ID,
-            ),
+            partnerId: partnerId,
             chainId: targetChainId,
             to: params.to,
             data: params.data || "0x",

package/src/global-account/react/stores/useModalStore.ts

@@ -1,5 +1,5 @@
-import { GenerateSigMintResponse } from "@b3dotfun/sdk/anyspend/types/signatureMint";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { GenerateSigMintResponse } from "@b3dotfun/sdk/anyspend/types/signatureMint";
 import { AllowedStrategy } from "@b3dotfun/sdk/global-account/react";
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
 import { Address, Chain } from "thirdweb";