@b3dotfun/sdk 0.0.23 → 0.0.24-alpha.1

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

@@ -371,8 +371,10 @@ function AnySpendCustomInner({
   );
 
   // Get geo data and onramp options (after quote is available)
-  const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, isStripeOnrampSupported, stripeWeb2Support } =
-    useGeoOnrampOptions(isMainnet, srcFiatAmount);
+  const { geoData, isOnrampSupported, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(
+    isMainnet,
+    srcFiatAmount,
+  );
 
   useEffect(() => {
     if (oat?.data?.order.status === "executed") {
@@ -404,7 +406,7 @@ function AnySpendCustomInner({
 
   const isCreatingOrder = isCreatingRegularOrder || isCreatingOnrampOrder;
 
-  const { address: connectedAddress, name: connectedName, profile: connectedProfile } = useConnectedUserProfile();
+  const { address: connectedAddress, name: connectedName } = useConnectedUserProfile();
   const recipientProfile = useProfile({ address: recipientAddress });
   const recipientName = recipientProfile.data?.name;
 
@@ -556,7 +558,7 @@ function AnySpendCustomInner({
         vendor = "coinbase";
         paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || "";
       } else if (paymentMethod === FiatPaymentMethod.STRIPE) {
-        if (!isStripeOnrampSupported && (!stripeWeb2Support || !stripeWeb2Support.isSupport)) {
+        if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
           toast.error("Stripe not available");
           return;
         }
@@ -861,16 +863,8 @@ function AnySpendCustomInner({
                     <>
                       {connectedAddress ? (
                         <>
-                          {connectedProfile?.data?.avatar && (
-                            <img
-                              src={connectedProfile.data?.avatar || ""}
-                              alt="Connected Wallet"
-                              className="bg-as-primary h-6 w-6 rounded-full"
-                            />
-                          )}
                           <span className="text-as-tertiarry flex items-center gap-1">
-                            {connectedName && <span>{formatUsername(connectedName)}</span>}
-                            <span>{shortenAddress(connectedAddress || "")}</span>
+                            {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
                           </span>
                         </>
                       ) : (
@@ -1186,7 +1180,7 @@ function AnySpendCustomInner({
               ? PanelView.CONFIRM_ORDER
               : activePanel
         }
-        className={cn("w-full")}
+        className={cn("font-inter w-full")}
         variants={{
           enter: { x: 300, opacity: 0 },
           center: { x: 0, opacity: 1 },

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

@@ -5,10 +5,10 @@ import {
   Input,
   StyleRoot,
   TextLoop,
-  useChainSwitchWithAction,
   useHasMounted,
   useModalStore,
   useTokenBalance,
+  useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
@@ -18,7 +18,7 @@ import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { createPublicClient, encodeFunctionData, erc20Abi, http } from "viem";
 import { base } from "viem/chains";
-import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { useAccount, useWaitForTransactionReceipt } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom";
 import { EthIcon } from "./icons/EthIcon";
 import { SolIcon } from "./icons/SolIcon";
@@ -70,8 +70,7 @@ export function AnySpendStakeB3({
 
   // Wagmi hooks for direct staking
   const { address } = useAccount();
-  const { writeContractAsync } = useWriteContract();
-  const { switchChainAndExecute } = useChainSwitchWithAction();
+  const { switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
 
   // State for direct staking flow
   const [isStaking, setIsStaking] = useState(false);
@@ -191,41 +190,52 @@ export function AnySpendStakeB3({
     try {
       setIsStaking(true);
 
-      await switchChainAndExecute(base.id, async () => {
-        // Check current allowance
-        const allowance = await basePublicClient.readContract({
-          address: B3_TOKEN.address as `0x${string}`,
+      // Check current allowance
+      const allowance = await basePublicClient.readContract({
+        address: B3_TOKEN.address as `0x${string}`,
+        abi: erc20Abi,
+        functionName: "allowance",
+        args: [address, ERC20Staking as `0x${string}`],
+      });
+
+      // If allowance is insufficient, request approval first
+      if (allowance < BigInt(userStakeAmount)) {
+        toast.info("Approving B3 spending...");
+
+        const approvalData = encodeFunctionData({
           abi: erc20Abi,
-          functionName: "allowance",
-          args: [address, ERC20Staking as `0x${string}`],
+          functionName: "approve",
+          args: [ERC20Staking as `0x${string}`, BigInt(userStakeAmount)],
         });
 
-        // If allowance is insufficient, request approval
-        if (allowance < BigInt(userStakeAmount)) {
-          toast.info("Approving B3 spending...");
-
-          await writeContractAsync({
-            address: B3_TOKEN.address as `0x${string}`,
-            abi: erc20Abi,
-            functionName: "approve",
-            args: [ERC20Staking as `0x${string}`, BigInt(userStakeAmount)],
-          });
-
-          toast.info("Approval confirmed. Proceeding with stake...");
-        }
-
-        // Execute the stake
-        toast.info("Staking B3...");
-        const stakeHash = await writeContractAsync({
-          address: ERC20Staking as `0x${string}`,
-          abi: ABI_ERC20_STAKING,
-          functionName: "stake",
-          args: [BigInt(userStakeAmount), recipientAddress as `0x${string}`],
+        await switchChainAndExecute(base.id, {
+          to: B3_TOKEN.address as `0x${string}`,
+          data: approvalData,
+          value: BigInt(0),
         });
 
+        toast.info("Approval confirmed. Proceeding with stake...");
+      }
+
+      // Execute the stake
+      toast.info("Staking B3...");
+
+      const stakeData = encodeFunctionData({
+        abi: ABI_ERC20_STAKING,
+        functionName: "stake",
+        args: [BigInt(userStakeAmount), recipientAddress as `0x${string}`],
+      });
+
+      const stakeHash = await switchChainAndExecute(base.id, {
+        to: ERC20Staking as `0x${string}`,
+        data: stakeData,
+        value: BigInt(0),
+      });
+
+      if (stakeHash) {
         setStakingTxHash(stakeHash);
         toast.success("Staking transaction submitted!");
-      });
+      }
     } catch (error) {
       console.error("@@b3-stake:error:", error);
       toast.error("Staking failed. Please try again.");
@@ -375,10 +385,10 @@ export function AnySpendStakeB3({
 
             <Button
               onClick={confirmAmount}
-              disabled={!isAmountValid || !displayAmount || isStaking || isTxPending}
+              disabled={!isAmountValid || !displayAmount || isStaking || isTxPending || isSwitchingOrExecuting}
               className="bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium"
             >
-              {isStaking ? "Staking..." : isTxPending ? "Confirming..." : "Continue"}
+              {isStaking || isSwitchingOrExecuting ? "Staking..." : isTxPending ? "Confirming..." : "Continue"}
             </Button>
           </motion.div>
         </div>

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

@@ -0,0 +1,56 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@b3dotfun/sdk/shared/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => <AccordionPrimitive.Item ref={ref} className={cn("", className)} {...props} />);
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "border-as-border-secondary bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border px-4 py-3 text-left transition-colors hover:bg-gray-100/50 data-[state=open]:rounded-b-none dark:border-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-700/50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{children}</span>
+    <ChevronDown className="h-4 w-4 text-gray-500 transition-transform duration-200 data-[state=open]:rotate-180 dark:text-gray-400" />
+  </AccordionPrimitive.Trigger>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden"
+    {...props}
+  >
+    <div
+      className={cn(
+        "border-as-border-secondary bg-as-surface-secondary w-full rounded-b-xl border-x border-b py-2 pr-4",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -6,9 +6,7 @@ import { ShinyButton, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { motion } from "framer-motion";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { useMemo } from "react";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
-import { Step, StepProgress } from "./StepProgress";
 
 type Tournament = components["schemas"]["Tournament"];
 type NFT = components["schemas"]["NFT"];
@@ -48,35 +46,12 @@ export default function ConnectWalletPayment({
       : order.payload.expectedDstAmount.toString();
   const formattedExpectedDstAmount = formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
 
-  const steps: Step[] = useMemo(
-    () => [
-      {
-        id: 1,
-        title: "Connect Wallet",
-        description: "Connect your wallet to continue",
-      },
-      {
-        id: 2,
-        title: "Awaiting Payment",
-        description: "Send your payment to the address below",
-      },
-      {
-        id: 3,
-        title: "Complete Payment",
-        description: "Finalize your transaction",
-      },
-    ],
-    [],
-  );
-
   if (!srcToken || !dstToken) {
     return <div>Loading...</div>;
   }
 
   return (
     <div className="flex w-full flex-col items-center gap-6">
-      <StepProgress steps={steps} currentStepIndex={1} />
-
       {/* Payment Button */}
       <motion.div
         initial={{ opacity: 0, y: 20 }}

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

@@ -47,7 +47,6 @@ export function FiatPaymentMethodComponent({
   // Load geo-based onramp options like in PanelOnramp
   const {
     coinbaseAvailablePaymentMethods,
-    isStripeOnrampSupported,
     stripeWeb2Support,
     isLoading: isLoadingGeoOnramp,
   } = useGeoOnrampOptions(isMainnet, srcAmountOnRamp);
@@ -69,7 +68,7 @@ export function FiatPaymentMethodComponent({
   }
 
   // Add Stripe if available
-  if (isStripeOnrampSupported || (stripeWeb2Support && stripeWeb2Support.isSupport)) {
+  if (stripeWeb2Support && stripeWeb2Support.isSupport) {
     const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE);
     availablePaymentMethods.push({
       id: FiatPaymentMethod.STRIPE,