@b3dotfun/sdk 0.0.1-alpha.23 → 0.0.1-alpha.4

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

@@ -1,5 +1,4 @@
 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";
@@ -20,6 +19,7 @@ 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,20 +52,6 @@ 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;
 
@@ -76,37 +62,6 @@ 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 });
@@ -119,7 +74,7 @@ function generateEncodedDataForBuyEntriesAndSpin(user: string, quantity: string)
 }
 
 const basePublicClient = createPublicClient({
-  chain: baseMainnet,
+  chain: base,
   transport: http()
 });
 
@@ -130,7 +85,6 @@ export function AnySpendBuySpin({
   spinwheelContractAddress,
   chainId,
   recipientAddress,
-  prefillQuantity,
   onSuccess
 }: {
   isMainnet?: boolean;
@@ -139,7 +93,6 @@ export function AnySpendBuySpin({
   spinwheelContractAddress: string;
   chainId: number;
   recipientAddress: string;
-  prefillQuantity?: string;
   onSuccess?: (txHash?: string) => void;
 }) {
   const hasMounted = useHasMounted();
@@ -149,7 +102,6 @@ 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 {
@@ -168,34 +120,24 @@ export function AnySpendBuySpin({
   // State for direct buying flow (when user has B3 tokens)
   const [isBuying, setIsBuying] = useState(false);
   const [buyingTxHash, setBuyingTxHash] = useState<string>("");
-  const {
-    isLoading: isTxPending,
-    isSuccess: isTxSuccess,
-    isError: isTxError,
-    error: txError
-  } = useWaitForTransactionReceipt({
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+
+  // Wait for transaction confirmation
+  const { isLoading: isTxPending, isSuccess: isTxSuccess } = useWaitForTransactionReceipt({
     hash: buyingTxHash as `0x${string}`,
     query: {
       structuralSharing: false
     }
   });
 
-  // Handle transaction status
+  // Show success modal when transaction is confirmed
   useEffect(() => {
-    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);
+    if (isTxSuccess && buyingTxHash) {
+      setShowAmountPrompt(false);
+      setShowSuccessModal(true);
       setIsBuying(false);
     }
-  }, [isTxSuccess, isTxError, buyingTxHash, onSuccess, setB3ModalOpen, txError]);
+  }, [isTxSuccess, buyingTxHash]);
 
   // Spin quantity state
   const [userSpinQuantity, setUserSpinQuantity] = useState<string>("");
@@ -204,21 +146,12 @@ 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 and wheel info
+  // Fetch payment configuration
   const fetchPaymentConfig = useCallback(async () => {
     if (!basePublicClient || !spinwheelContractAddress) return;
 
@@ -228,7 +161,7 @@ export function AnySpendBuySpin({
 
       console.log("@@anyspend-buy-spin:fetch-config:", { spinwheelContractAddress, chainId });
 
-      const [config, entryModuleAddress, wheelInfo] = await Promise.all([
+      const [config, entryModuleAddress] = await Promise.all([
         basePublicClient.readContract({
           address: spinwheelContractAddress as `0x${string}`,
           abi: SPIN_WHEEL_ABI,
@@ -238,11 +171,6 @@ 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"
         })
       ]);
 
@@ -253,17 +181,13 @@ export function AnySpendBuySpin({
         entryModule: entryModuleAddress
       };
 
-      const wheelInfoData: WheelInfo = {
-        creator_: wheelInfo[0],
-        startTime_: wheelInfo[1],
-        endTime_: wheelInfo[2],
-        totalPrizesAvailable_: wheelInfo[3],
-        prizesRequestedCount_: wheelInfo[4],
-        state_: wheelInfo[5]
-      };
-
+      console.log("@@anyspend-buy-spin:config-fetched:", {
+        pricePerEntry: paymentConfig.pricePerEntry.toString(),
+        maxEntriesPerUser: paymentConfig.maxEntriesPerUser.toString(),
+        paymentRecipient: paymentConfig.paymentRecipient,
+        entryModule: paymentConfig.entryModule
+      });
       setPaymentConfig(paymentConfig);
-      setWheelInfo(wheelInfoData);
     } catch (error) {
       console.error("@@anyspend-buy-spin:config-error:", error);
       setConfigError("Failed to load spin wheel configuration");
@@ -282,7 +206,6 @@ export function AnySpendBuySpin({
   useEffect(() => {
     const timer = setTimeout(() => {
       setDebouncedQuantity(displayQuantity);
-      setDebouncedUserSpinQuantity(userSpinQuantity);
     }, 500);
 
     return () => clearTimeout(timer);
@@ -315,23 +238,13 @@ export function AnySpendBuySpin({
       }
 
       // Check maximum entries per user (0 means no limit)
-      if (paymentConfig && paymentConfig.maxEntriesPerUser > 0n && BigInt(numValue) > paymentConfig.maxEntriesPerUser) {
+      if (paymentConfig && paymentConfig.maxEntriesPerUser > BigInt(0) && BigInt(numValue) > paymentConfig.maxEntriesPerUser) {
         setIsQuantityValid(false);
         setUserSpinQuantity("");
         setValidationError(`Maximum ${paymentConfig.maxEntriesPerUser.toString()} spins allowed`);
         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("");
@@ -386,7 +299,7 @@ export function AnySpendBuySpin({
     } catch (error) {
       console.error("@@anyspend-buy-spin:error:", error);
       toast.error("Spin purchase failed. Please try again.");
-      setB3ModalOpen(false);
+      setShowSuccessModal(false);
     } finally {
       setIsBuying(false);
     }
@@ -465,40 +378,6 @@ 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>
@@ -512,7 +391,7 @@ export function AnySpendBuySpin({
                 filter: hasMounted ? "blur(0px)" : "blur(10px)"
               }}
               transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
-              className={`flex justify-center ${isActive ? "mb-4" : ""}`}
+              className="mb-4 flex justify-center"
             >
               <img
                 alt="B3 Token"
@@ -534,33 +413,15 @@ export function AnySpendBuySpin({
               transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
               className="text-center"
             >
-              {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>
-                )
-              )}
+              <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>
             </motion.div>
           </div>
 
@@ -574,77 +435,163 @@ export function AnySpendBuySpin({
             transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
             className="bg-b3-react-background w-full p-6"
           >
-            {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="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>
+              <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>
 
-                {!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>
+              <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 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>
+    );
+  }
 
-                <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>
+  // 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>
-            ) : null}
+            </motion.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>
           </motion.div>
         </div>
       </StyleRoot>

package/src/anyspend/utils/chain.ts

@@ -311,9 +311,6 @@ 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/useB3";
+import { useB3 } from "./B3Provider";
 import { ManageAccount } from "./ManageAccount/ManageAccount";
 import { RequestPermissions } from "./RequestPermissions/RequestPermissions";
 import { SignInWithB3Flow } from "./SignInWithB3/SignInWithB3Flow";

package/src/global-account/react/components/{B3Provider/B3Provider.native.tsx → B3Provider.native.tsx}

@@ -6,7 +6,6 @@ import { Account } from "thirdweb/wallets";
 // import { RelayKitProviderWrapper } from "./RelayKitProviderWrapper";
 
 import { User } from "@b3dotfun/sdk/global-account/types/b3-api.types";
-import { B3Context, B3ContextType } from "./types";
 
 /**
  * Default permissions configuration for B3 provider
@@ -18,6 +17,51 @@ const DEFAULT_PERMISSIONS = {
   endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365) // 1 year from now
 };
 
+/**
+ * Context type for B3Provider
+ */
+
+export interface B3ContextType {
+  account?: Account;
+  user?: User;
+  setAccount: (account: Account) => void;
+  setUser: (user?: User) => void;
+  initialized: boolean;
+  ready: boolean;
+  environment?: "development" | "production";
+  defaultPermissions?: PermissionsConfig;
+  theme: "light" | "dark";
+}
+
+/**
+ * Context for B3 provider
+ */
+export const B3Context = createContext<B3ContextType>({
+  account: undefined,
+  user: undefined,
+  setAccount: () => {},
+  setUser: () => {},
+  initialized: false,
+  ready: false,
+  environment: "development",
+  theme: "light"
+});
+
+/**
+ * Hook to access the B3 context
+ * @throws Error if used outside a B3Provider
+ */
+export function useB3() {
+  const context = useContext(B3Context);
+
+  if (!context.initialized) {
+    throw new Error("useB3 must be used within a B3Provider");
+  }
+
+  // Return a stable reference
+  return useMemo(() => context, [context]);
+}
+
 // Create queryClient instance
 const queryClient = new QueryClient();
 
@@ -81,9 +125,6 @@ export function InnerProvider({
     <B3Context.Provider
       value={{
         account: effectiveAccount,
-        automaticallySetFirstEoa: false,
-        setWallet: () => {},
-        wallet: undefined,
         setAccount,
         user,
         setUser,