@b3dotfun/sdk 0.0.30-alpha.9 → 0.0.31

package/src/anyspend/react/components/AnyspendSignatureMint.tsx

@@ -18,15 +18,15 @@ function generateEncodedDataForSignatureMint(signatureData: GenerateSigMintRespo
   invariant(payload, "Payload is required");
 
   const mintRequest = {
-    to: payload.to,
-    royaltyRecipient: payload.royaltyRecipient,
+    to: payload.to as `0x${string}`,
+    royaltyRecipient: payload.royaltyRecipient as `0x${string}`,
     royaltyBps: BigInt(payload.royaltyBps || 0),
-    primarySaleRecipient: payload.primarySaleRecipient,
+    primarySaleRecipient: payload.primarySaleRecipient as `0x${string}`,
     tokenId: BigInt(payload.tokenId || 0),
     uri: payload.uri,
     quantity: BigInt(payload.quantity || 1),
     pricePerToken: parseEther(payload.price?.toString() || "0"),
-    currency: payload.currencyAddress,
+    currency: payload.currencyAddress as `0x${string}`,
     validityStartTimestamp: BigInt(payload.mintStartTime || 0),
     validityEndTimestamp: BigInt(payload.mintEndTime || 0),
     uid: payload.uid as `0x${string}`,

package/src/anyspend/react/components/common/CryptoReceiveSection.tsx

@@ -24,6 +24,9 @@ interface CryptoReceiveSectionProps {
   onChangeDstAmount?: (value: string) => void;
   // Quote data
   anyspendQuote?: any;
+  // custom dst token data
+  dstTokenSymbol?: string;
+  dstTokenLogoURI?: string;
 }
 
 export function CryptoReceiveSection({
@@ -39,6 +42,8 @@ export function CryptoReceiveSection({
   setSelectedDstToken,
   onChangeDstAmount,
   anyspendQuote,
+  dstTokenSymbol,
+  dstTokenLogoURI,
 }: CryptoReceiveSectionProps) {
   return (
     <motion.div
@@ -72,10 +77,14 @@ export function CryptoReceiveSection({
         <div className="flex items-center justify-between">
           <div className="text-as-primary text-2xl font-bold">{dstAmount || "0"}</div>
           <div className="bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3">
-            {dstToken.metadata?.logoURI && (
-              <img src={dstToken.metadata.logoURI} alt={dstToken.symbol} className="h-8 w-8 rounded-full" />
+            {(dstTokenLogoURI || dstToken.metadata?.logoURI) && (
+              <img
+                src={dstTokenLogoURI || dstToken.metadata?.logoURI}
+                alt={dstTokenSymbol || dstToken.symbol}
+                className="h-8 w-8 rounded-full"
+              />
             )}
-            <span className="text-as-brand text-lg font-bold">{dstToken.symbol}</span>
+            <span className="text-as-brand text-lg font-bold">{dstTokenSymbol || dstToken.symbol}</span>
           </div>
         </div>
       ) : (

package/src/anyspend/react/components/common/PanelOnramp.tsx

@@ -2,7 +2,7 @@ import { useCoinbaseOnrampOptions, useGeoOnrampOptions } from "@b3dotfun/sdk/any
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { ALL_CHAINS } from "@b3dotfun/sdk/anyspend/utils/chain";
 import { Input, useGetGeo, useProfile } from "@b3dotfun/sdk/global-account/react";
-import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { cn, formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { ChevronRight, Wallet } from "lucide-react";
 import { useRef } from "react";
@@ -23,6 +23,8 @@ export function PanelOnramp({
   onDestinationChainChange,
   fiatPaymentMethodIndex,
   recipientSelectionPanelIndex,
+  dstTokenSymbol,
+  hideDstToken = false,
 }: {
   srcAmountOnRamp: string;
   setSrcAmountOnRamp: (amount: string) => void;
@@ -36,6 +38,8 @@ export function PanelOnramp({
   onDestinationChainChange?: (chainId: number) => void;
   fiatPaymentMethodIndex: number;
   recipientSelectionPanelIndex: number;
+  dstTokenSymbol?: string;
+  hideDstToken?: boolean;
 }) {
   // Get geo-based onramp options to access fee information
   const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
@@ -163,7 +167,7 @@ export function PanelOnramp({
         </div>
 
         {/* Quick Amount Buttons */}
-        <div className="mx-auto mb-6 inline-grid grid-cols-4 gap-2">
+        <div className={cn("mx-auto mb-6 inline-grid grid-cols-4 gap-2", hideDstToken && "mb-0")}>
           {["5", "10", "20", "25"].map(value => (
             <button
               key={value}
@@ -180,7 +184,7 @@ export function PanelOnramp({
         </div>
 
         {/* Token Display */}
-        {destinationToken && destinationChainId && (
+        {destinationToken && destinationChainId && !hideDstToken && (
           <OrderTokenAmountFiat
             address={_recipientAddress}
             context="to"
@@ -226,7 +230,7 @@ export function PanelOnramp({
           <span className="text-as-tertiarry text-sm">Expected to receive</span>
           <div className="flex items-center gap-2">
             <span className="text-as-primary font-semibold">
-              {destinationAmount || "0"} {destinationToken?.symbol || ""}
+              {destinationAmount || "0"} {dstTokenSymbol || destinationToken?.symbol || ""}
             </span>
             <span className="text-as-tertiarry text-sm">
               on {destinationChainId ? ALL_CHAINS[destinationChainId]?.name : ""}

package/src/global-account/react/components/ManageAccount/BalanceContent.tsx

@@ -0,0 +1,228 @@
+import {
+  Button,
+  CopyToClipboard,
+  useAuthentication,
+  useB3BalanceFromAddresses,
+  useModalStore,
+  useNativeBalance,
+  useProfile,
+} from "@b3dotfun/sdk/global-account/react";
+import { BankIcon } from "@b3dotfun/sdk/global-account/react/components/icons/BankIcon";
+import { SignOutIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SignOutIcon";
+import { SwapIcon } from "@b3dotfun/sdk/global-account/react/components/icons/SwapIcon";
+import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { Loader2, Pencil } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useActiveAccount } from "thirdweb/react";
+import useFirstEOA from "../../hooks/useFirstEOA";
+import { B3TokenIcon, EthereumTokenIcon } from "../TokenIcon";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion";
+import { TokenBalanceRow } from "./TokenBalanceRow";
+
+interface BalanceContentProps {
+  onLogout?: () => void;
+  partnerId: string;
+}
+
+function centerTruncate(str: string, length = 4) {
+  if (str.length <= length * 2) return str;
+  return `${str.slice(0, length)}...${str.slice(-length)}`;
+}
+
+export function BalanceContent({ onLogout, partnerId }: BalanceContentProps) {
+  const account = useActiveAccount();
+  const { address: eoaAddress, info: eoaInfo } = useFirstEOA();
+  const { data: profile } = useProfile({
+    address: eoaAddress || account?.address,
+    fresh: true,
+  });
+  const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
+  const { logout } = useAuthentication(partnerId);
+  const [logoutLoading, setLogoutLoading] = useState(false);
+  const [openAccordions, setOpenAccordions] = useState<string[]>([]);
+  const hasExpandedRef = useRef(false);
+
+  console.log("eoaAddress", eoaAddress);
+  console.log("account?.address", account?.address);
+
+  // Balance data fetching
+  const { data: eoaNativeBalance, isLoading: eoaNativeLoading } = useNativeBalance(eoaAddress);
+  const { data: eoaB3Balance, isLoading: eoaB3Loading } = useB3BalanceFromAddresses(eoaAddress);
+  const { data: b3Balance, isLoading: b3Loading } = useB3BalanceFromAddresses(account?.address);
+  const { data: nativeBalance, isLoading: nativeLoading } = useNativeBalance(account?.address);
+
+  // Calculate total USD values for comparison
+  const globalAccountTotalUsd = (b3Balance?.balanceUsd || 0) + (nativeBalance?.totalUsd || 0);
+  const eoaTotalUsd = (eoaB3Balance?.balanceUsd || 0) + (eoaNativeBalance?.totalUsd || 0);
+
+  // Check if both data sets are ready (not loading and have data)
+  const isGlobalDataReady = !b3Loading && !nativeLoading && b3Balance !== undefined && nativeBalance !== undefined;
+  const isEoaDataReady =
+    !eoaAddress || (!eoaB3Loading && !eoaNativeLoading && eoaB3Balance !== undefined && eoaNativeBalance !== undefined);
+  const isBothDataReady = isGlobalDataReady && isEoaDataReady;
+
+  // Reset expansion flag when component mounts
+  useEffect(() => {
+    hasExpandedRef.current = false;
+    setOpenAccordions([]);
+  }, []);
+
+  // Auto-expand the appropriate section when data becomes ready
+  useEffect(() => {
+    if (isBothDataReady && !hasExpandedRef.current && eoaAddress && account?.address) {
+      hasExpandedRef.current = true;
+
+      // Determine which section to expand based on higher balance
+      if (globalAccountTotalUsd === 0 && eoaTotalUsd === 0) {
+        // If both have 0 balance, expand global account by default
+        setOpenAccordions(["global-account"]);
+      } else if (globalAccountTotalUsd >= eoaTotalUsd) {
+        setOpenAccordions(["global-account"]);
+      } else {
+        setOpenAccordions(["eoa-account"]);
+      }
+    }
+  }, [isBothDataReady, globalAccountTotalUsd, eoaTotalUsd, eoaAddress, account?.address]);
+
+  const onLogoutEnhanced = async () => {
+    setLogoutLoading(true);
+    await logout();
+    onLogout?.();
+    setB3ModalOpen(false);
+    setLogoutLoading(false);
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Profile Section */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="relative">
+            {profile?.avatar ? (
+              <img src={profile?.avatar} alt="Profile" className="size-24 rounded-full" />
+            ) : (
+              <div className="bg-b3-primary-wash size-24 rounded-full" />
+            )}
+            <div className="bg-b3-grey border-b3-background absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4">
+              <Pencil size={16} className="text-b3-background" />
+            </div>
+          </div>
+          <div>
+            <h2 className="text-b3-grey text-xl font-semibold">
+              {profile?.displayName || formatUsername(profile?.name || "")}
+            </h2>
+            <div className="border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors">
+              <span className="text-b3-foreground-muted font-mono text-xs">
+                {centerTruncate(account?.address || "", 6)}
+              </span>
+              <CopyToClipboard text={account?.address || ""} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="grid grid-cols-2 gap-3">
+        <Button
+          className="manage-account-deposit bg-b3-primary-wash hover:bg-b3-primary-wash/70 h-[84px] w-full flex-col items-start gap-2 rounded-2xl"
+          onClick={() => {
+            setB3ModalOpen(true);
+            setB3ModalContentType({
+              type: "anySpend",
+              defaultActiveTab: "fiat",
+              showBackButton: true,
+            });
+          }}
+        >
+          <BankIcon size={24} className="text-b3-primary-blue shrink-0" />
+          <div className="text-b3-grey font-neue-montreal-semibold">Deposit</div>
+        </Button>
+        <Button
+          className="manage-account-swap bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex h-[84px] w-full flex-col items-start gap-2 rounded-2xl"
+          onClick={() => {
+            setB3ModalOpen(true);
+            setB3ModalContentType({
+              type: "anySpend",
+              showBackButton: true,
+            });
+          }}
+        >
+          <SwapIcon size={24} className="text-b3-primary-blue" />
+          <div className="text-b3-grey font-neue-montreal-semibold">Swap</div>
+        </Button>
+      </div>
+
+      {/* Balance Sections with Accordions */}
+      <Accordion type="multiple" value={openAccordions} onValueChange={setOpenAccordions} className="space-y-2">
+        {/* Global Account Balance Section */}
+        <AccordionItem value="global-account" className="border-none">
+          <AccordionTrigger className="text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline">
+            <span>Balance</span>
+          </AccordionTrigger>
+          <AccordionContent className="space-y-4">
+            <TokenBalanceRow
+              icon={<B3TokenIcon className="size-10" />}
+              name="B3"
+              balance={`${b3Balance?.formattedTotal || "0.00"} B3`}
+              usdValue={b3Balance?.balanceUsdFormatted || "0.00"}
+              priceChange={b3Balance?.priceChange24h}
+            />
+            <TokenBalanceRow
+              icon={<EthereumTokenIcon className="size-10" />}
+              name="Ethereum"
+              balance={`${nativeBalance?.formattedTotal || "0.00"} ETH`}
+              usdValue={nativeBalance?.formattedTotalUsd || "0.00"}
+              priceChange={nativeBalance?.priceChange24h}
+            />
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* EOA Account Balance Section */}
+        {eoaAddress && (
+          <AccordionItem value="eoa-account" className="border-none">
+            <AccordionTrigger className="text-b3-grey font-neue-montreal-semibold py-2 hover:no-underline">
+              <div className="flex items-center gap-3">
+                <span>Connected {eoaInfo?.data?.name || "Wallet"}</span>
+                <div className="border-b3-line bg-b3-line/20 hover:bg-b3-line/40 flex w-fit items-center gap-2 rounded-full border px-3 py-1 transition-colors">
+                  <span className="text-b3-foreground-muted font-mono text-xs">{centerTruncate(eoaAddress, 6)}</span>
+                  <CopyToClipboard text={eoaAddress} />
+                </div>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="space-y-4">
+              <TokenBalanceRow
+                icon={<B3TokenIcon className="size-10" />}
+                name="B3"
+                balance={`${eoaB3Balance?.formattedTotal || "0.00"} B3`}
+                usdValue={eoaB3Balance?.balanceUsdFormatted || "0.00"}
+                priceChange={eoaB3Balance?.priceChange24h}
+              />
+              <TokenBalanceRow
+                icon={<EthereumTokenIcon className="size-10" />}
+                name="Ethereum"
+                balance={`${eoaNativeBalance?.formattedTotal || "0.00"} ETH`}
+                usdValue={eoaNativeBalance?.formattedTotalUsd || "0.00"}
+                priceChange={eoaNativeBalance?.priceChange24h}
+              />
+            </AccordionContent>
+          </AccordionItem>
+        )}
+      </Accordion>
+
+      {/* Sign Out */}
+      <button
+        className="border-b3-line hover:bg-b3-line relative flex w-full items-center justify-center rounded-2xl border p-4 transition-colors"
+        onClick={onLogoutEnhanced}
+      >
+        <span className="font-neue-montreal-semibold text-b3-grey">Sign out</span>
+        <div className="absolute right-4">
+          {logoutLoading ? (
+            <Loader2 className="animate-spin" size={16} />
+          ) : (
+            <SignOutIcon size={16} className="text-b3-grey" />
+          )}
+        </div>
+      </button>
+    </div>
+  );
+}

package/src/global-account/react/components/ManageAccount/ContentTokens.tsx

@@ -15,6 +15,7 @@ import { toast } from "sonner";
 import { useActiveAccount } from "thirdweb/react";
 import { encodeFunctionData, erc20Abi, isAddress, parseUnits } from "viem";
 import { SimBalanceItem } from "../../hooks/useSimBalance";
+import invariant from "invariant";
 
 // Panel view enum for managing navigation between token list and send form
 enum TokenPanelView {
@@ -172,6 +173,8 @@ export function ContentTokens({ activeTab }: ContentTokensProps) {
       };
 
       try {
+        invariant(isAddress(recipientAddress), "Recipient address is not a valid address");
+
         const sendTokenData = encodeFunctionData({
           abi: erc20Abi,
           functionName: "transfer",