@b3dotfun/sdk 0.0.62 → 0.0.63-alpha.1

package/src/anyspend/utils/orderPayload.ts

@@ -1,5 +1,5 @@
-import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 
 export type OrderParams = {
   orderType: components["schemas"]["Order"]["type"];
@@ -48,6 +48,8 @@ export const buildPayload = (orderType: components["schemas"]["Order"]["type"],
       };
     case "custom":
       return { ...payload };
+    case "custom_exact_in":
+      return { ...payload, expectedDstAmount };
     case "hype_duel":
       return {
         expectedDstAmount,
@@ -73,6 +75,8 @@ export const buildMetadata = (orderType: components["schemas"]["Order"]["type"],
       return { ...baseMetadata, tournament };
     case "custom":
       return { ...baseMetadata, action: payload.action };
+    case "custom_exact_in":
+      return { ...baseMetadata, action: payload.action };
     case "hype_duel":
       return { ...baseMetadata };
     default:

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

@@ -5,25 +5,28 @@ import {
   AnySpendNFT,
   AnyspendSignatureMint,
   AnySpendStakeB3,
+  AnySpendStakeB3ExactIn,
   AnySpendTournament,
   OrderHistory,
 } from "@b3dotfun/sdk/anyspend/react";
 import { AnySpendDepositHype } from "@b3dotfun/sdk/anyspend/react/components/AnyspendDepositHype";
 import { AnySpendStakeUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendStakeUpside";
+import { AnySpendStakeUpsideExactIn } from "@b3dotfun/sdk/anyspend/react/components/AnySpendStakeUpsideExactIn";
 import { useGlobalWalletState } from "@b3dotfun/sdk/anyspend/utils";
 import { useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useEffect, useRef } from "react";
+import { useSetActiveWallet } from "thirdweb/react";
 import { AvatarEditor } from "./AvatarEditor/AvatarEditor";
 import { useB3 } from "./B3Provider/useB3";
 import { LinkAccount } from "./LinkAccount/LinkAccount";
+import { ProfileEditor } from "./ProfileEditor/ProfileEditor";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./ui/dialog";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./ui/drawer";
-import { useSetActiveWallet } from "thirdweb/react";
 
 const debug = debugB3React("B3DynamicModal");
 
@@ -56,7 +59,9 @@ export function B3DynamicModal() {
     "anySpendJoinTournament",
     "anySpendFundTournament",
     "anySpendStakeB3",
+    "anySpendStakeB3ExactIn",
     "anySpendStakeUpside",
+    "anySpendStakeUpsideExactIn",
     "anySpendBuySpin",
     "anySpendOrderHistory",
     "signInWithB3",
@@ -64,6 +69,7 @@ export function B3DynamicModal() {
     "anySpendBondKit",
     "linkAccount",
     "avatarEditor",
+    "profileEditor",
   ];
 
   const freestyleTypes = [
@@ -71,7 +77,9 @@ export function B3DynamicModal() {
     "anySpendJoinTournament",
     "anySpendFundTournament",
     "anySpendStakeB3",
+    "anySpendStakeB3ExactIn",
     "anySpendStakeUpside",
+    "anySpendStakeUpsideExactIn",
     "anySpendBuySpin",
     "anySpendSignatureMint",
     "anySpendBondKit",
@@ -120,8 +128,12 @@ export function B3DynamicModal() {
         return <OrderHistory onBack={() => {}} mode="modal" />;
       case "anySpendStakeB3":
         return <AnySpendStakeB3 {...contentType} mode="modal" />;
+      case "anySpendStakeB3ExactIn":
+        return <AnySpendStakeB3ExactIn {...contentType} mode="modal" />;
       case "anySpendStakeUpside":
         return <AnySpendStakeUpside {...contentType} mode="modal" />;
+      case "anySpendStakeUpsideExactIn":
+        return <AnySpendStakeUpsideExactIn {...contentType} mode="modal" />;
       case "anySpendBuySpin":
         return <AnySpendBuySpin {...contentType} mode="modal" />;
       case "anySpendSignatureMint":
@@ -134,6 +146,8 @@ export function B3DynamicModal() {
         return <AnySpendDepositHype {...contentType} mode="modal" />;
       case "avatarEditor":
         return <AvatarEditor onSetAvatar={contentType.onSuccess} />;
+      case "profileEditor":
+        return <ProfileEditor onSuccess={contentType.onSuccess} />;
       // Add other modal types here
       default:
         return null;
@@ -152,8 +166,8 @@ export function B3DynamicModal() {
           contentClass,
           "rounded-2xl bg-white shadow-xl dark:bg-gray-900",
           "border border-gray-200 dark:border-gray-800",
-          // Remove default width classes for avatar editor
-          contentType?.type === "avatarEditor"
+          // Remove default width classes for avatar editor and profile editor
+          contentType?.type === "avatarEditor" || contentType?.type === "profileEditor"
             ? "!w-[90vw] !max-w-none" // Use !important to override default styles
             : "mx-auto w-full max-w-md sm:max-w-lg",
         )}
@@ -189,7 +203,7 @@ export function B3DynamicModal() {
           {renderContent()}
         </div>
       </ModalContent>
-      {contentType?.type === "avatarEditor" && (
+      {(contentType?.type === "avatarEditor" || contentType?.type === "profileEditor") && (
         <button
           onClick={() => setB3ModalOpen(false)}
           className="fixed right-5 top-5 z-[100] cursor-pointer text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"

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

@@ -50,10 +50,10 @@ export function BalanceContent({ onLogout, showDeposit = true, showSwap = true }
 
   const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
 
-  const handleEditAvatar = () => {
+  const handleEditProfile = () => {
     setB3ModalOpen(true);
     setB3ModalContentType({
-      type: "avatarEditor",
+      type: "profileEditor",
       showBackButton: true,
       onSuccess: () => {
         // navigate back on success
@@ -125,7 +125,7 @@ export function BalanceContent({ onLogout, showDeposit = true, showSwap = true }
               <div className="bg-b3-primary-wash size-24 rounded-full" />
             )}
             <button
-              onClick={handleEditAvatar}
+              onClick={handleEditProfile}
               className="bg-b3-grey border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-8 items-center justify-center rounded-full border-4 transition-colors"
             >
               <Pencil size={16} className="text-b3-background" />
@@ -133,7 +133,7 @@ export function BalanceContent({ onLogout, showDeposit = true, showSwap = true }
           </div>
           <div className="global-account-profile-info">
             <h2 className="text-b3-grey text-xl font-semibold">
-              {profile?.displayName || formatUsername(profile?.name || "")}
+              {user?.username || profile?.displayName || formatUsername(profile?.name || "")}
             </h2>
             <div className="address-button 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">

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

@@ -0,0 +1,265 @@
+"use client";
+
+import { Users } from "@b3dotfun/b3-api";
+import app from "@b3dotfun/sdk/global-account/app";
+import { Button, useB3, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { getIpfsUrl } from "@b3dotfun/sdk/shared/utils/ipfs";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { Check, Loader2, Upload, X } from "lucide-react";
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import { useActiveAccount } from "thirdweb/react";
+import { upload } from "thirdweb/storage";
+
+const debug = debugB3React("ProfileEditor");
+
+interface ProfileEditorProps {
+  onSuccess?: () => void;
+  className?: string;
+}
+
+export function ProfileEditor({ onSuccess, className }: ProfileEditorProps) {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [username, setUsername] = useState<string>("");
+  const [isUploading, setIsUploading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { user, setUser } = useB3();
+
+  const account = useActiveAccount();
+  const { data: profile, refetch: refreshProfile } = useProfile({
+    address: account?.address,
+    fresh: true,
+  });
+
+  const rawAvatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profile?.avatar;
+  const avatarUrl = validateImageUrl(rawAvatarUrl);
+  const safePreviewUrl = validateImageUrl(previewUrl);
+  const hasAvatar = !!avatarUrl;
+  const currentUsername = user?.username || "";
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!file.type.startsWith("image/")) {
+        toast.error("Please select an image file");
+        return;
+      }
+
+      // Validate file size (max 5MB)
+      if (file.size > 5 * 1024 * 1024) {
+        toast.error("File size must be less than 5MB");
+        return;
+      }
+
+      setSelectedFile(file);
+
+      // Create preview URL
+      const url = URL.createObjectURL(file);
+      setPreviewUrl(url);
+    }
+  };
+
+  const handleRemoveFile = () => {
+    setSelectedFile(null);
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+      setPreviewUrl(null);
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleSave = async () => {
+    // Check if there are any changes
+    const hasAvatarChange = selectedFile !== null;
+    const hasUsernameChange = username.trim() !== "" && username !== currentUsername;
+
+    if (!hasAvatarChange && !hasUsernameChange) {
+      toast.error("Please make at least one change");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      let ipfsUrl: string | undefined;
+
+      // Upload avatar if selected
+      if (hasAvatarChange && selectedFile) {
+        debug("Starting upload to IPFS", selectedFile);
+        setIsUploading(true);
+
+        ipfsUrl = await upload({
+          client,
+          files: [selectedFile],
+        });
+
+        debug("Upload successful", ipfsUrl);
+        setIsUploading(false);
+      }
+
+      // Update user profile
+      let updatedUser = user as Users | undefined;
+
+      // If both avatar and username need updating, do them sequentially
+      // Update avatar first if uploaded
+      if (ipfsUrl) {
+        // @ts-expect-error this resolved fine, look into why expect-error needed
+        updatedUser = await app.service("users").setAvatar(
+          {
+            avatar: ipfsUrl,
+          },
+          // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+          {},
+        );
+      }
+
+      // Update username if changed (this will use the updated user from avatar change if both were updated)
+      if (hasUsernameChange && user?._id) {
+        // @ts-expect-error this resolved fine, look into why expect-error needed
+        updatedUser = await app.service("users").registerUsername(
+          { username: username },
+          // @ts-expect-error - our typed client is expecting context even though it's set elsewhere
+          {},
+        );
+      }
+
+      // Update user state
+      setUser(updatedUser);
+
+      // Refresh profile to get updated data
+      await refreshProfile();
+
+      // Show success message
+      const changes = [];
+      if (hasAvatarChange) changes.push("avatar");
+      if (hasUsernameChange) changes.push("username");
+      toast.success(`Successfully updated ${changes.join(" and ")}!`);
+
+      onSuccess?.();
+
+      // Clean up
+      handleRemoveFile();
+      setUsername("");
+    } catch (error) {
+      debug("Error updating profile:", error);
+      toast.error("Failed to update profile. Please try again.");
+    } finally {
+      setIsUploading(false);
+      setIsSaving(false);
+    }
+  };
+
+  const handleFileInputClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const isLoading = isUploading || isSaving;
+  const hasChanges = selectedFile !== null || (username.trim() !== "" && username !== currentUsername);
+
+  return (
+    <div className={cn("flex flex-col items-center justify-center space-y-6 p-8", className)}>
+      <div className="space-y-2 text-center">
+        <h2 className="font-neue-montreal-semibold text-b3-grey text-2xl">Edit Your Profile</h2>
+        <p className="text-b3-foreground-muted font-neue-montreal-medium">Update your avatar and username</p>
+      </div>
+
+      {/* Avatar Section */}
+      <div className="w-full max-w-md space-y-4">
+        <div className="space-y-2">
+          <label className="text-b3-grey font-neue-montreal-semibold text-sm">Avatar</label>
+
+          {/* Current/Preview Avatar */}
+          <div className="flex justify-center">
+            {safePreviewUrl || avatarUrl ? (
+              <div className="relative">
+                <div className="border-b3-primary-blue h-32 w-32 overflow-hidden rounded-full border-4">
+                  <img
+                    src={safePreviewUrl || avatarUrl || ""}
+                    alt={safePreviewUrl ? "Preview" : "Current avatar"}
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+                {safePreviewUrl && (
+                  <button
+                    onClick={handleRemoveFile}
+                    className="bg-b3-negative absolute -right-2 -top-2 flex h-8 w-8 items-center justify-center rounded-full text-white transition-colors hover:bg-red-600"
+                    disabled={isLoading}
+                  >
+                    <X size={16} />
+                  </button>
+                )}
+              </div>
+            ) : (
+              <div className="bg-b3-primary-wash h-32 w-32 rounded-full" />
+            )}
+          </div>
+
+          {/* Upload Button */}
+          {!selectedFile && (
+            <Button variant="outline" onClick={handleFileInputClick} disabled={isLoading} className="w-full">
+              <Upload className="mr-2 h-4 w-4" />
+              {hasAvatar ? "Change Avatar" : "Upload Avatar"}
+            </Button>
+          )}
+
+          {/* Hidden file input */}
+          <input ref={fileInputRef} type="file" accept="image/*" onChange={handleFileSelect} className="hidden" />
+        </div>
+
+        {/* Username Section */}
+        <div className="space-y-2">
+          <label htmlFor="username" className="text-b3-grey font-neue-montreal-semibold text-sm">
+            Username
+          </label>
+          <input
+            id="username"
+            type="text"
+            value={username}
+            onChange={e => setUsername(e.target.value)}
+            placeholder={currentUsername || "Enter username"}
+            className="border-b3-line bg-b3-background text-b3-grey placeholder:text-b3-foreground-muted font-neue-montreal-medium focus:border-b3-primary-blue w-full rounded-lg border px-4 py-3 transition-colors focus:outline-none"
+            disabled={isLoading}
+          />
+          {currentUsername && (
+            <p className="text-b3-foreground-muted font-neue-montreal-medium text-xs">Current: {currentUsername}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex w-full max-w-md gap-3">
+        <Button
+          onClick={handleSave}
+          disabled={isLoading || !hasChanges}
+          className="bg-b3-primary-blue hover:bg-b3-primary-blue/90 flex-1 text-white disabled:opacity-50"
+        >
+          {isLoading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              {isUploading ? "Uploading..." : "Saving..."}
+            </>
+          ) : (
+            <>
+              <Check className="mr-2 h-4 w-4" />
+              Save Changes
+            </>
+          )}
+        </Button>
+      </div>
+
+      {/* Help Text */}
+      <div className="text-b3-foreground-muted font-neue-montreal-medium max-w-md text-center text-xs">
+        <p>
+          Your avatar will be uploaded to IPFS and stored securely. Make sure you have the rights to use this image.
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -39,6 +39,7 @@ export function SignInWithB3Flow({
   const { setB3ModalContentType, setB3ModalOpen, isOpen } = useModalStore();
   const account = useActiveAccount();
   const isAuthenticating = useAuthStore(state => state.isAuthenticating);
+  const isAuthenticated = useAuthStore(state => state.isAuthenticated);
   const isConnected = useAuthStore(state => state.isConnected);
   const [refetchCount, setRefetchCount] = useState(0);
   const [refetchError, setRefetchError] = useState<string | null>(null);
@@ -92,7 +93,7 @@ export function SignInWithB3Flow({
       source,
     });
 
-    if (isConnected) {
+    if (isConnected && isAuthenticated) {
       // Check if we already have a signer for this partner
       const hasExistingSigner = signers?.some(signer => signer.partner.id === partnerId);
       if (hasExistingSigner) {
@@ -139,6 +140,7 @@ export function SignInWithB3Flow({
     signersEnabled,
     isConnected,
     isAuthenticating,
+    isAuthenticated,
     isOpen,
   ]);
 

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

@@ -86,8 +86,8 @@ export function LoginStep({ onSuccess, chain }: LoginStepProps) {
           titleIcon: "https://cdn.b3.fun/b3_logo.svg",
         }}
         className="b3-login-step"
-        onConnect={async wallet => {
-          await onConnect(wallet);
+        onConnect={async (wallet, allConnectedWallets) => {
+          await onConnect(wallet, allConnectedWallets);
           const account = wallet.getAccount();
           if (!account) throw new Error("No account found");
           await onSuccess(account);

package/src/global-account/react/components/index.ts

@@ -19,6 +19,10 @@ export { getConnectOptionsFromStrategy, isWalletType, type AllowedStrategy } fro
 // ManageAccount Components
 export { ManageAccount } from "./ManageAccount/ManageAccount";
 
+// Profile Components
+export { AvatarEditor } from "./AvatarEditor/AvatarEditor";
+export { ProfileEditor } from "./ProfileEditor/ProfileEditor";
+
 // RequestPermissions Components
 export { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 export { RequestPermissionsButton } from "./RequestPermissions/RequestPermissionsButton";

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

@@ -38,11 +38,12 @@ export { useSearchParamsSSR } from "./useSearchParamsSSR";
 export { useSimBalance } from "./useSimBalance";
 export { useSiwe } from "./useSiwe";
 export { useTokenBalance } from "./useTokenBalance";
+export { useTokenBalanceDirect } from "./useTokenBalanceDirect";
 export { useTokenBalancesByChain } from "./useTokenBalancesByChain";
 export { useTokenData } from "./useTokenData";
 export { useTokenFromUrl } from "./useTokenFromUrl";
 export { useTokenPrice } from "./useTokenPrice";
 export { useTokenPriceWithFallback } from "./useTokenPriceWithFallback";
 export { useTokensFromAddress } from "./useTokensFromAddress";
-export { useUnifiedChainSwitchAndExecute } from "./useUnifiedChainSwitchAndExecute";
 export { useURLParams } from "./useURLParams";
+export { useUnifiedChainSwitchAndExecute } from "./useUnifiedChainSwitchAndExecute";

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

@@ -164,7 +164,15 @@ export function useAuthentication(partnerId: string) {
   );
 
   const onConnect = useCallback(
-    async (wallet: Wallet) => {
+    async (_walleAutoConnectedWith: Wallet, allConnectedWallets: Wallet[]) => {
+      debug("@@useAuthentication:onConnect", { _walleAutoConnectedWith, allConnectedWallets });
+
+      const wallet = allConnectedWallets.find(wallet => wallet.id.startsWith("ecosystem."));
+
+      if (!wallet) {
+        throw new Error("No smart wallet found during auto-connect");
+      }
+
       debug("@@useAuthentication:onConnect", { wallet });
 
       try {
@@ -243,7 +251,7 @@ export function useAuthentication(partnerId: string) {
   const { isLoading: useAutoConnectLoading } = useAutoConnect({
     client,
     wallets: [wallet],
-    onConnect: onConnect,
+    onConnect,
   });
 
   /**

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

@@ -26,10 +26,11 @@ export interface SimBalanceResponse {
   balances: SimBalanceItem[];
 }
 
-async function fetchSimBalance(address: string): Promise<SimBalanceResponse> {
+async function fetchSimBalance(address: string, chainIdsParam: number[]): Promise<SimBalanceResponse> {
   if (!address) throw new Error("Address is required");
 
-  let url = `https://simdune-api.sean-430.workers.dev/?url=https://api.sim.dune.com/v1/evm/balances/${address}?metadata=logo&chain_ids=mainnet`;
+  const chainIds = chainIdsParam.length === 0 ? "mainnet" : chainIdsParam.join(",");
+  let url = `https://simdune-api.sean-430.workers.dev/?url=https://api.sim.dune.com/v1/evm/balances/${address}?metadata=logo&chain_ids=${chainIds}`;
   if (process.env.NEXT_PUBLIC_LOCAL_KEY) {
     url += `&localkey=${process.env.NEXT_PUBLIC_LOCAL_KEY}`;
   }
@@ -44,12 +45,12 @@ async function fetchSimBalance(address: string): Promise<SimBalanceResponse> {
   return balanceData;
 }
 
-export function useSimBalance(address?: string) {
+export function useSimBalance(address?: string, chainIdsParam?: number[]) {
   return useQuery({
-    queryKey: ["simBalance", address],
+    queryKey: ["simBalance", address, chainIdsParam],
     queryFn: () => {
       if (!address) throw new Error("Address is required");
-      return fetchSimBalance(address);
+      return fetchSimBalance(address, chainIdsParam || []);
     },
     enabled: Boolean(address),
   });

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

@@ -0,0 +1,84 @@
+"use client";
+
+import { isNativeToken } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
+import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
+import { getERC20Balances, getNativeTokenBalance } from "@b3dotfun/sdk/shared/utils/thirdweb-insights";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
+
+interface UseTokenBalanceProps {
+  token: components["schemas"]["Token"];
+  address?: string;
+}
+
+export interface TokenBalanceResult {
+  rawBalance: bigint | null;
+  formattedBalance: string;
+  isLoading: boolean;
+}
+
+export function useTokenBalanceDirect({ token, address }: UseTokenBalanceProps): TokenBalanceResult {
+  const account = useAccountWallet();
+
+  const effectiveAddress = address || account?.address;
+
+  const {
+    data: tokenBalance,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useQuery({
+    queryKey: ["tokenBalance", effectiveAddress, token.chainId, token.address],
+    queryFn: async (): Promise<{ formatted: string; raw: bigint | null }> => {
+      if (!effectiveAddress) return { formatted: "0", raw: null };
+
+      if (isNativeToken(token.address)) {
+        const nativeToken = await getNativeTokenBalance(effectiveAddress, token.chainId);
+        if (nativeToken && nativeToken.balance) {
+          const rawBalance = nativeToken.balance;
+          return {
+            formatted: formatTokenAmount(BigInt(rawBalance), Number(nativeToken.decimals || 18)),
+            raw: BigInt(rawBalance),
+          };
+        }
+        return { formatted: "0", raw: null };
+      }
+
+      const response = await getERC20Balances(effectiveAddress, {
+        chainIds: [token.chainId],
+        includeSpam: false,
+      });
+      const tokenBalance = response.data?.find(t => t.token_address === token.address);
+      if (tokenBalance?.balance) {
+        return {
+          formatted: formatTokenAmount(BigInt(tokenBalance.balance), Number(tokenBalance.decimals || 18)),
+          raw: BigInt(tokenBalance.balance),
+        };
+      }
+      return { formatted: "0", raw: null };
+    },
+    enabled: !!effectiveAddress,
+    staleTime: 30000,
+    gcTime: 5 * 60 * 1000,
+    retry: 2,
+    structuralSharing: false,
+  });
+
+  // Force a refetch when the wallet or token changes
+  useEffect(() => {
+    if (effectiveAddress) {
+      refetch();
+    }
+  }, [effectiveAddress, token.address, token.chainId, token.symbol, refetch]);
+
+  // Determine if we're actually loading
+  const isActuallyLoading = !effectiveAddress || isLoading || (isFetching && !tokenBalance);
+
+  return {
+    rawBalance: tokenBalance?.raw || BigInt(0),
+    formattedBalance: tokenBalance?.formatted || "0",
+    isLoading: isActuallyLoading,
+  };
+}

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

@@ -1,9 +1,9 @@
 "use client";
 
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { getCoingeckoChainInfo } from "@b3dotfun/sdk/shared/constants/chains/supported";
 import { useSearchParams } from "@b3dotfun/sdk/shared/react/hooks";
 import { useQuery } from "@tanstack/react-query";
-import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 interface UseTokenFromUrlOptions {
   /**
@@ -59,14 +59,15 @@ export function useTokenFromUrl({ defaultToken, prefix }: UseTokenFromUrlOptions
   const currencyParam = searchParams.get(`${prefix}Currency`);
   const chainIdParam = searchParams.get(`${prefix}ChainId`);
 
+  // Determine network based on chainId
+  const chainInfo = chainIdParam ? getCoingeckoChainInfo(Number(chainIdParam)) : null;
+  const network = chainInfo?.coingecko_id || "";
+
   // Determine if we should fetch token info
   const shouldFetchToken = Boolean(
-    currencyParam && chainIdParam && currencyParam.toLowerCase() !== defaultToken.address.toLowerCase(),
+    currencyParam && chainIdParam && chainInfo && currencyParam.toLowerCase() !== defaultToken.address.toLowerCase(),
   );
 
-  // Determine network based on chainId
-  const network = chainIdParam ? getCoingeckoChainInfo(Number(chainIdParam)).coingecko_id : "";
-
   const { data: tokenInfo, isError } = useQuery({
     queryKey: ["tokenInfo", network, currencyParam],
     queryFn: () => fetchTokenInfo(network, currencyParam || ""),