@b3dotfun/sdk 0.0.1-alpha.2 → 0.0.1-alpha.21

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

@@ -1,4 +1,5 @@
 import { B3_TOKEN, OrderType } from "@b3dotfun/sdk/anyspend";
+import { baseMainnet } from "@b3dotfun/sdk/shared/constants/chains/supported";
 import { EthIcon } from "./icons/EthIcon";
 import { SolIcon } from "./icons/SolIcon";
 import { UsdcIcon } from "./icons/USDCIcon";
@@ -19,7 +20,6 @@ import { ArrowRight, Loader2 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { createPublicClient, encodeFunctionData, erc20Abi, formatUnits, http } from "viem";
-import { base } from "viem/chains";
 import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom";
 
@@ -52,6 +52,20 @@ const SPIN_WHEEL_ABI = [
     outputs: [],
     stateMutability: "payable",
     type: "function"
+  },
+  {
+    inputs: [],
+    name: "getWheelInfo",
+    outputs: [
+      { internalType: "address", name: "creator_", type: "address" },
+      { internalType: "uint256", name: "startTime_", type: "uint256" },
+      { internalType: "uint256", name: "endTime_", type: "uint256" },
+      { internalType: "uint256", name: "totalPrizesAvailable_", type: "uint256" },
+      { internalType: "uint256", name: "prizesRequestedCount_", type: "uint256" },
+      { internalType: "enum SpinWheelV2.WheelState", name: "state_", type: "uint8" }
+    ],
+    stateMutability: "view",
+    type: "function"
   }
 ] as const;
 
@@ -62,6 +76,37 @@ interface PaymentConfig {
   entryModule: string;
 }
 
+interface WheelInfo {
+  creator_: string;
+  startTime_: bigint;
+  endTime_: bigint;
+  totalPrizesAvailable_: bigint;
+  prizesRequestedCount_: bigint;
+  state_: number;
+}
+
+type WheelStatus = "not_started" | "active" | "ended" | "sold_out";
+
+function getWheelStatus(wheelInfo: WheelInfo): WheelStatus {
+  const now = BigInt(Math.floor(Date.now() / 1000));
+  console.log("@@anyspend-buy-spin:now:", now);
+  console.log("@@anyspend-buy-spin:wheelInfo:", wheelInfo);
+
+  if (now < wheelInfo.startTime_) {
+    return "not_started";
+  }
+
+  if (now > wheelInfo.endTime_) {
+    return "ended";
+  }
+
+  if (wheelInfo.totalPrizesAvailable_ <= wheelInfo.prizesRequestedCount_) {
+    return "sold_out";
+  }
+
+  return "active";
+}
+
 function generateEncodedDataForBuyEntriesAndSpin(user: string, quantity: string): string {
   invariant(BigInt(quantity) > 0, "Quantity must be greater than zero");
   console.log("@@anyspend-buy-spin:encoded-data:", { user, quantity });
@@ -74,7 +119,7 @@ function generateEncodedDataForBuyEntriesAndSpin(user: string, quantity: string)
 }
 
 const basePublicClient = createPublicClient({
-  chain: base,
+  chain: baseMainnet,
   transport: http()
 });
 
@@ -85,6 +130,7 @@ export function AnySpendBuySpin({
   spinwheelContractAddress,
   chainId,
   recipientAddress,
+  prefillQuantity,
   onSuccess
 }: {
   isMainnet?: boolean;
@@ -93,6 +139,7 @@ export function AnySpendBuySpin({
   spinwheelContractAddress: string;
   chainId: number;
   recipientAddress: string;
+  prefillQuantity?: string;
   onSuccess?: (txHash?: string) => void;
 }) {
   const hasMounted = useHasMounted();
@@ -102,6 +149,7 @@ export function AnySpendBuySpin({
   const [paymentConfig, setPaymentConfig] = useState<PaymentConfig | null>(null);
   const [isLoadingConfig, setIsLoadingConfig] = useState(true);
   const [configError, setConfigError] = useState<string>("");
+  const [wheelInfo, setWheelInfo] = useState<WheelInfo | null>(null);
 
   // Fetch B3 token balance
   const {
@@ -120,24 +168,34 @@ export function AnySpendBuySpin({
   // State for direct buying flow (when user has B3 tokens)
   const [isBuying, setIsBuying] = useState(false);
   const [buyingTxHash, setBuyingTxHash] = useState<string>("");
-  const [showSuccessModal, setShowSuccessModal] = useState(false);
-
-  // Wait for transaction confirmation
-  const { isLoading: isTxPending, isSuccess: isTxSuccess } = useWaitForTransactionReceipt({
+  const {
+    isLoading: isTxPending,
+    isSuccess: isTxSuccess,
+    isError: isTxError,
+    error: txError
+  } = useWaitForTransactionReceipt({
     hash: buyingTxHash as `0x${string}`,
     query: {
       structuralSharing: false
     }
   });
 
-  // Show success modal when transaction is confirmed
+  // Handle transaction status
   useEffect(() => {
-    if (isTxSuccess && buyingTxHash) {
-      setShowAmountPrompt(false);
-      setShowSuccessModal(true);
+    if (!buyingTxHash) return;
+
+    if (isTxSuccess) {
+      setB3ModalOpen(false);
+      onSuccess?.(buyingTxHash);
+      toast.success("Spin purchase transaction confirmed!");
+      setIsBuying(false);
+    } else if (isTxError) {
+      console.error("@@anyspend-buy-spin:tx-error:", txError);
+      toast.error("Transaction failed. Please try again.");
+      setB3ModalOpen(false);
       setIsBuying(false);
     }
-  }, [isTxSuccess, buyingTxHash]);
+  }, [isTxSuccess, isTxError, buyingTxHash, onSuccess, setB3ModalOpen, txError]);
 
   // Spin quantity state
   const [userSpinQuantity, setUserSpinQuantity] = useState<string>("");
@@ -146,12 +204,21 @@ export function AnySpendBuySpin({
   const [validationError, setValidationError] = useState<string>("");
   const [displayQuantity, setDisplayQuantity] = useState<string>("");
   const [debouncedQuantity, setDebouncedQuantity] = useState<string>("");
+  const [debouncedUserSpinQuantity, setDebouncedUserSpinQuantity] = useState<string>("");
+
+  useEffect(() => {
+    if (prefillQuantity && wheelInfo) {
+      const remainingSpins = wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_;
+      const adjustedQuantity = BigInt(prefillQuantity) > remainingSpins ? remainingSpins.toString() : prefillQuantity;
+      validateAndSetQuantity(adjustedQuantity);
+    }
+  }, [prefillQuantity, wheelInfo]);
 
   // Calculate total cost
   const totalCost =
     paymentConfig && userSpinQuantity ? paymentConfig.pricePerEntry * BigInt(userSpinQuantity) : BigInt(0);
 
-  // Fetch payment configuration
+  // Fetch payment configuration and wheel info
   const fetchPaymentConfig = useCallback(async () => {
     if (!basePublicClient || !spinwheelContractAddress) return;
 
@@ -161,7 +228,7 @@ export function AnySpendBuySpin({
 
       console.log("@@anyspend-buy-spin:fetch-config:", { spinwheelContractAddress, chainId });
 
-      const [config, entryModuleAddress] = await Promise.all([
+      const [config, entryModuleAddress, wheelInfo] = await Promise.all([
         basePublicClient.readContract({
           address: spinwheelContractAddress as `0x${string}`,
           abi: SPIN_WHEEL_ABI,
@@ -171,6 +238,11 @@ export function AnySpendBuySpin({
           address: spinwheelContractAddress as `0x${string}`,
           abi: SPIN_WHEEL_ABI,
           functionName: "entryModule"
+        }),
+        basePublicClient.readContract({
+          address: spinwheelContractAddress as `0x${string}`,
+          abi: SPIN_WHEEL_ABI,
+          functionName: "getWheelInfo"
         })
       ]);
 
@@ -181,13 +253,17 @@ export function AnySpendBuySpin({
         entryModule: entryModuleAddress
       };
 
-      console.log("@@anyspend-buy-spin:config-fetched:", {
-        pricePerEntry: paymentConfig.pricePerEntry.toString(),
-        maxEntriesPerUser: paymentConfig.maxEntriesPerUser.toString(),
-        paymentRecipient: paymentConfig.paymentRecipient,
-        entryModule: paymentConfig.entryModule
-      });
+      const wheelInfoData: WheelInfo = {
+        creator_: wheelInfo[0],
+        startTime_: wheelInfo[1],
+        endTime_: wheelInfo[2],
+        totalPrizesAvailable_: wheelInfo[3],
+        prizesRequestedCount_: wheelInfo[4],
+        state_: wheelInfo[5]
+      };
+
       setPaymentConfig(paymentConfig);
+      setWheelInfo(wheelInfoData);
     } catch (error) {
       console.error("@@anyspend-buy-spin:config-error:", error);
       setConfigError("Failed to load spin wheel configuration");
@@ -206,6 +282,7 @@ export function AnySpendBuySpin({
   useEffect(() => {
     const timer = setTimeout(() => {
       setDebouncedQuantity(displayQuantity);
+      setDebouncedUserSpinQuantity(userSpinQuantity);
     }, 500);
 
     return () => clearTimeout(timer);
@@ -245,6 +322,16 @@ export function AnySpendBuySpin({
         return;
       }
 
+      // Check if quantity exceeds remaining entries
+      if (wheelInfo && BigInt(numValue) > wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_) {
+        setIsQuantityValid(false);
+        setUserSpinQuantity("");
+        setValidationError(
+          `Only ${(wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_).toString()} spins remaining`
+        );
+        return;
+      }
+
       setUserSpinQuantity(value);
       setIsQuantityValid(true);
       setValidationError("");
@@ -299,7 +386,7 @@ export function AnySpendBuySpin({
     } catch (error) {
       console.error("@@anyspend-buy-spin:error:", error);
       toast.error("Spin purchase failed. Please try again.");
-      setShowSuccessModal(false);
+      setB3ModalOpen(false);
     } finally {
       setIsBuying(false);
     }
@@ -378,6 +465,40 @@ export function AnySpendBuySpin({
   // Render quantity input prompt
   if (showAmountPrompt) {
     const pricePerEntry = formatUnits(paymentConfig.pricePerEntry, 18);
+    const remainingEntries = wheelInfo ? wheelInfo.totalPrizesAvailable_ - wheelInfo.prizesRequestedCount_ : 0n;
+    const wheelStatus = wheelInfo ? getWheelStatus(wheelInfo) : null;
+    const isSoldOut = wheelStatus === "sold_out";
+    const isActive = wheelStatus === "active";
+
+    const getStatusMessage = () => {
+      if (!wheelInfo) return null;
+
+      const formatDate = (timestamp: bigint) => {
+        return new Date(Number(timestamp) * 1000).toLocaleString();
+      };
+
+      switch (wheelStatus) {
+        case "not_started":
+          return {
+            title: "Spin Wheel Not Started",
+            message: `Starts at ${formatDate(wheelInfo.startTime_)}`
+          };
+        case "ended":
+          return {
+            title: "Spin Wheel Ended",
+            message: `Ended at ${formatDate(wheelInfo.endTime_)}`
+          };
+        case "sold_out":
+          return {
+            title: "All Spins Have Been Claimed",
+            message: "Stay tuned for the next spin wheel event!"
+          };
+        default:
+          return null;
+      }
+    };
+
+    const statusInfo = getStatusMessage();
 
     return (
       <StyleRoot>
@@ -391,7 +512,7 @@ export function AnySpendBuySpin({
                 filter: hasMounted ? "blur(0px)" : "blur(10px)"
               }}
               transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
-              className="mb-4 flex justify-center"
+              className={`flex justify-center ${isActive ? "mb-4" : ""}`}
             >
               <img
                 alt="B3 Token"
@@ -413,15 +534,33 @@ export function AnySpendBuySpin({
               transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
               className="text-center"
             >
-              <h2 className="font-sf-rounded text-as-primary mb-2 text-2xl font-bold">
-                {(() => {
-                  const hasEnoughBalance = b3RawBalance && totalCost <= b3RawBalance;
-                  return hasEnoughBalance || !debouncedQuantity ? "Buy Spins" : `Swap & Buy Spins`;
-                })()}
-              </h2>
-              <div className="bg-as-on-surface-2/50 inline-flex items-center gap-2 rounded-full border border-white/10 px-3 py-1 backdrop-blur-sm">
-                <p className="text-as-primary/80 text-sm">{pricePerEntry} $B3 per spin</p>
-              </div>
+              {isActive ? (
+                <>
+                  <h2 className="font-sf-rounded text-as-primary mb-4 text-2xl font-bold">
+                    {(() => {
+                      const hasEnoughBalance = b3RawBalance && totalCost <= b3RawBalance;
+                      return hasEnoughBalance || !debouncedQuantity ? "Buy Spins" : `Swap & Buy Spins`;
+                    })()}
+                  </h2>
+                  {wheelInfo && (
+                    <div className="inline-flex items-center gap-2">
+                      <div className="bg-as-brand/10 border-as-brand/10 inline-flex items-center rounded-full border px-3 py-1">
+                        <p className="text-as-brand text-sm font-medium">{pricePerEntry} $B3 per spin</p>
+                      </div>
+                      <div className="bg-as-brand/10 border-as-brand/10 inline-flex items-center rounded-full border px-3 py-1">
+                        <p className="text-as-brand text-sm font-medium">{remainingEntries.toString()} remaining</p>
+                      </div>
+                    </div>
+                  )}
+                </>
+              ) : (
+                statusInfo && (
+                  <div className="text-center">
+                    <p className="text-as-primary text-lg font-semibold">{statusInfo.title}</p>
+                    <p className="text-as-primary/70 mt-2 text-sm">{statusInfo.message}</p>
+                  </div>
+                )
+              )}
             </motion.div>
           </div>
 
@@ -435,163 +574,77 @@ export function AnySpendBuySpin({
             transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
             className="bg-b3-react-background w-full p-6"
           >
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <p className="text-as-primary/70 text-sm font-medium">Number of spins</p>
-                <span className="text-as-primary/50 flex items-center gap-1 text-sm">
-                  Available: {isBalanceLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : `${b3Balance} B3`}
-                </span>
-              </div>
+            {isActive ? (
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <p className="text-as-primary/70 text-sm font-medium">Number of spins</p>
+                  <span className="text-as-primary/50 flex items-center gap-1 text-sm">
+                    Available: {isBalanceLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : `${b3Balance} B3`}
+                  </span>
+                </div>
 
-              <div className="relative">
-                <Input
-                  onFocus={onFocusQuantityInput}
-                  type="text"
-                  placeholder="1"
-                  value={displayQuantity}
-                  onChange={e => validateAndSetQuantity(e.target.value)}
-                  className={`h-14 px-4 pr-20 text-lg ${!isQuantityValid && displayQuantity ? "border-as-red" : "border-b3-react-border"}`}
-                />
-                <div className="font-pack absolute right-4 top-1/2 -translate-y-1/2 text-lg font-medium text-blue-500/70">
-                  {displayQuantity === "1" ? "Spin" : "Spins"}
+                <div className="relative">
+                  <Input
+                    onFocus={onFocusQuantityInput}
+                    type="text"
+                    placeholder="1"
+                    value={displayQuantity}
+                    onChange={e => validateAndSetQuantity(e.target.value)}
+                    className={`h-14 px-4 pr-20 text-lg ${!isQuantityValid && displayQuantity ? "border-as-red" : "border-b3-react-border"}`}
+                  />
+                  <div className="font-pack absolute right-4 top-1/2 -translate-y-1/2 text-lg font-medium text-blue-500/70">
+                    {displayQuantity === "1" ? "Spin" : "Spins"}
+                  </div>
                 </div>
-              </div>
 
-              {!isQuantityValid && displayQuantity && <p className="text-as-red text-sm">{validationError}</p>}
+                {!isQuantityValid && displayQuantity && <p className="text-as-red text-sm">{validationError}</p>}
 
-              <div className="bg-as-on-surface-2/30 rounded-lg border border-white/10 p-4 backdrop-blur-sm">
-                <div className="flex items-center justify-between">
-                  <span className="text-as-primary/70 text-sm font-medium">Total Cost:</span>
-                  <div className="flex items-center gap-2">
-                    <span className="text-as-primary text-lg font-bold">
-                      {displayQuantity && isQuantityValid ? formatUnits(totalCost, 18) : "0"} B3
-                    </span>
+                <div className="bg-as-on-surface-2/30 rounded-lg border border-white/10 p-4 backdrop-blur-sm">
+                  <div className="flex items-center justify-between">
+                    <span className="text-as-primary/70 text-sm font-medium">Total Cost:</span>
+                    <div className="flex items-center gap-2">
+                      <span className="text-as-primary text-lg font-bold">
+                        {displayQuantity && isQuantityValid ? formatUnits(totalCost, 18) : "0"} B3
+                      </span>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
-
-            <div className="mt-4">
-              {(() => {
-                const hasEnoughBalance = b3RawBalance && totalCost <= b3RawBalance;
-
-                if (!hasEnoughBalance && debouncedQuantity) {
-                  return (
-                    <div className="bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5">
-                      <div className="flex items-center justify-center gap-2">
-                        <span className="text-as-primary text-sm font-semibold">Swap & buy from any token</span>
-                        <TextLoop>
-                          <EthIcon className="h-8 w-8" />
-                          <SolIcon className="h-8 w-8" />
-                          <UsdcIcon className="h-8 w-8" />
-                        </TextLoop>
-                        <ArrowRight className="text-as-primary h-4 w-4" />
-                        <img src="https://cdn.b3.fun/b3-coin-3d.png" className="h-7 w-7" alt="B3 Token" />
-                      </div>
-                      <p className="text-as-primary/50 text-sm font-medium">
-                        No problem, we'll help you swap to B3 for your spins!
-                      </p>
-                    </div>
-                  );
-                }
-              })()}
-            </div>
-
-            <Button
-              onClick={confirmQuantity}
-              disabled={!isQuantityValid || !displayQuantity || isBuying || isTxPending}
-              className="bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium"
-            >
-              {isBuying ? "Buying..." : isTxPending ? "Confirming..." : "Continue"}
-            </Button>
-          </motion.div>
-        </div>
-      </StyleRoot>
-    );
-  }
 
-  // Success Modal for Direct Buying
-  if (showSuccessModal) {
-    return (
-      <StyleRoot>
-        <div className="bg-b3-react-background flex w-full flex-col items-center">
-          <div className="w-full p-4">
-            <motion.div
-              initial={false}
-              animate={{
-                opacity: hasMounted ? 1 : 0,
-                y: hasMounted ? 0 : 20,
-                filter: hasMounted ? "blur(0px)" : "blur(10px)"
-              }}
-              transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
-              className="relative mx-auto mb-4 size-[120px]"
-            >
-              <div className="absolute inset-0 scale-95 rounded-[50%] bg-gradient-to-br from-green-500/30 to-blue-500/30 blur-xl"></div>
-              <GlareCardRounded className="overflow-hidden rounded-full border-none bg-gradient-to-br from-green-500/10 to-blue-500/10 backdrop-blur-sm">
-                <img
-                  alt="B3 Token"
-                  loading="lazy"
-                  width="120"
-                  height="120"
-                  decoding="async"
-                  data-nimg="1"
-                  className="size-full shrink-0 bg-transparent text-transparent"
-                  src="https://cdn.b3.fun/b3-coin-3d.png"
-                />
-                <div className="absolute inset-0 rounded-[50%] border border-white/20"></div>
-              </GlareCardRounded>
-            </motion.div>
-            <motion.div
-              initial={false}
-              animate={{
-                opacity: hasMounted ? 1 : 0,
-                y: hasMounted ? 0 : 20,
-                filter: hasMounted ? "blur(0px)" : "blur(10px)"
-              }}
-              transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
-              className="text-center"
-            >
-              <h2 className="font-sf-rounded mb-3 bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-3xl font-bold text-transparent">
-                🎉 Purchase Complete!
-              </h2>
-              <div className="bg-as-on-surface-2/50 inline-flex items-center gap-2 rounded-full border border-white/10 px-4 py-2 backdrop-blur-sm">
-                <span className="text-as-primary/80 text-sm font-medium">
-                  {userSpinQuantity} Spin{userSpinQuantity !== "1" ? "s" : ""} • {formatUnits(totalCost, 18)} B3
-                </span>
-              </div>
-            </motion.div>
-          </div>
+                <div className="mt-4">
+                  {(() => {
+                    const hasEnoughBalance = b3RawBalance && totalCost <= b3RawBalance;
+
+                    if (!hasEnoughBalance && debouncedQuantity) {
+                      return (
+                        <div className="bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5">
+                          <div className="flex items-center justify-center gap-2">
+                            <span className="text-as-primary text-sm font-semibold">Swap & buy from any token</span>
+                            <TextLoop>
+                              <EthIcon className="h-8 w-8" />
+                              <SolIcon className="h-8 w-8" />
+                              <UsdcIcon className="h-8 w-8" />
+                            </TextLoop>
+                            <ArrowRight className="text-as-primary h-4 w-4" />
+                            <img src="https://cdn.b3.fun/b3-coin-3d.png" className="h-7 w-7" alt="B3 Token" />
+                          </div>
+                          <p className="text-as-primary/50 text-sm font-medium">
+                            No problem, we'll help you swap to B3 for your spins!
+                          </p>
+                        </div>
+                      );
+                    }
+                  })()}
+                </div>
 
-          <motion.div
-            initial={false}
-            animate={{
-              opacity: hasMounted ? 1 : 0,
-              y: hasMounted ? 0 : 20,
-              filter: hasMounted ? "blur(0px)" : "blur(10px)"
-            }}
-            transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
-            className="bg-b3-react-background w-full p-6"
-          >
-            <div className="mb-6">
-              <a
-                href={`https://basescan.org/tx/${buyingTxHash}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-as-primary/70 hover:text-as-primary block break-all text-center font-mono text-sm underline transition-colors"
-              >
-                View transaction
-              </a>
-            </div>
-
-            <Button
-              onClick={() => {
-                setB3ModalOpen(false);
-                onSuccess?.(buyingTxHash);
-              }}
-              className="bg-as-brand hover:bg-as-brand/90 text-as-primary h-14 w-full rounded-xl text-lg font-medium"
-            >
-              Done
-            </Button>
+                <Button
+                  onClick={confirmQuantity}
+                  disabled={!isQuantityValid || !displayQuantity || isBuying || isTxPending}
+                  className="bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium"
+                >
+                  {isBuying ? "Buying..." : isTxPending ? "Confirming..." : "Continue"}
+                </Button>
+              </div>
+            ) : null}
           </motion.div>
         </div>
       </StyleRoot>

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

@@ -155,7 +155,11 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
                   <img src={dstToken.metadata.logoURI} alt={dstToken.symbol} className="h-6 w-6 rounded-full" />
                   <div className="text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-xl font-semibold">
                     {formatTokenAmount(
-                      actualDstAmount ? BigInt(actualDstAmount) : expectedDstAmount ? BigInt(expectedDstAmount) : 0n,
+                      actualDstAmount
+                        ? BigInt(actualDstAmount)
+                        : expectedDstAmount
+                          ? BigInt(expectedDstAmount)
+                          : BigInt(0),
                       dstToken.decimals
                     )}{" "}
                     {dstToken.symbol}

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

@@ -21,7 +21,7 @@ export function TokenBalance({
 
     // Calculate the amount based on percentage of balance
     // Multiply first, then divide to avoid BigInt truncation
-    const amount = percentage === 100 ? rawBalance : (rawBalance * BigInt(percentage)) / 100n;
+    const amount = percentage === 100 ? rawBalance : (rawBalance * BigInt(percentage)) / BigInt(100);
 
     onChangeInput(formatUnits(amount, token.decimals));
   };

package/src/anyspend/utils/chain.ts

@@ -311,6 +311,9 @@ export function getPaymentUrl(address: string, amount: bigint, currency: string)
 }
 
 export function getExplorerTxUrl(chainId: number, txHash: string) {
+  if (chainId === b3.id) {
+    return "https://explorer.b3.fun/b3/tx/" + txHash;
+  }
   if (EVM_CHAINS[chainId]) {
     return EVM_CHAINS[chainId].viem.blockExplorers?.default.url + "/tx/" + txHash;
   }

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

@@ -8,7 +8,7 @@ import {
 } from "@b3dotfun/sdk/anyspend/react";
 import { useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
-import { useB3 } from "./B3Provider";
+import { useB3 } from "./B3Provider/useB3";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";