@b3dotfun/sdk 0.0.29-alpha.0 → 0.0.29-alpha.2

package/dist/types/anyspend/react/components/AnyspendDepositHype.d.ts

@@ -1,4 +1,4 @@
-export declare function AnySpendDepositHype(props: {
+export interface AnySpendDepositHypeProps {
     loadOrder?: string;
     mode?: "modal" | "page";
     recipientAddress: string;
@@ -7,4 +7,6 @@ export declare function AnySpendDepositHype(props: {
     sourceTokenChainId?: number;
     onSuccess?: () => void;
     depositContractAddress?: string;
-}): import("react/jsx-runtime").JSX.Element;
+    mainFooter?: React.ReactNode;
+}
+export declare function AnySpendDepositHype(props: AnySpendDepositHypeProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/anyspend/react/components/common/OrderStatus.d.ts

@@ -1,4 +1,6 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 export declare const OrderStatus: import("react").NamedExoticComponent<{
     order: components["schemas"]["Order"];
+    selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
 }>;

package/dist/types/bondkit/abis/BondkitTokenABI.d.ts

@@ -627,7 +627,7 @@ export declare const BondkitTokenABI: readonly [{
     }];
     readonly name: "buy";
     readonly outputs: readonly [];
-    readonly stateMutability: "payable";
+    readonly stateMutability: "nonpayable";
     readonly type: "function";
 }, {
     readonly inputs: readonly [{
@@ -645,7 +645,7 @@ export declare const BondkitTokenABI: readonly [{
     }];
     readonly name: "buyFor";
     readonly outputs: readonly [];
-    readonly stateMutability: "payable";
+    readonly stateMutability: "nonpayable";
     readonly type: "function";
 }, {
     readonly inputs: readonly [];
@@ -1242,7 +1242,4 @@ export declare const BondkitTokenABI: readonly [{
     }];
     readonly stateMutability: "view";
     readonly type: "function";
-}, {
-    readonly stateMutability: "payable";
-    readonly type: "receive";
 }];

package/dist/types/global-account/react/stores/useModalStore.d.ts

@@ -273,8 +273,8 @@ export interface AnySpendBondKitProps extends BaseModalProps {
     imageUrl?: string;
     /** Token name to display */
     tokenName?: string;
-    /** Optional pre-filled ETH amount */
-    ethAmount?: string;
+    /** Optional pre-filled B3 amount */
+    b3Amount?: string;
     /** Callback function called when purchase is successful */
     onSuccess?: (txHash?: string) => void;
 }
@@ -300,6 +300,8 @@ export interface AnySpendDepositHypeProps extends BaseModalProps {
     paymentType?: "crypto" | "fiat";
     /** Deposit contract address */
     depositContractAddress: string;
+    /** Main footer */
+    mainFooter?: React.ReactNode;
     /** Callback function called when the deposit is successful */
     onSuccess?: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.29-alpha.0",
+  "version": "0.0.29-alpha.2",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/constants/index.ts

@@ -96,3 +96,5 @@ export const VENDOR_DISPLAY_NAMES = {
   stripe: "Stripe",
   unknown: "Unknown Vendor",
 } as const;
+
+export const DEPOSIT_HYPE_ACTION = "deposit_hype";

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

@@ -804,7 +804,7 @@ function AnySpendInner({
       <div className="relative flex flex-col gap-4">
         {oat && (
           <>
-            <OrderStatus order={oat.data.order} />
+            <OrderStatus order={oat.data.order} selectedCryptoPaymentMethod={selectedCryptoPaymentMethod} />
             <OrderDetails
               mode={mode}
               order={oat.data.order}

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

@@ -1,4 +1,3 @@
-import { BondkitToken } from "../../../bondkit";
 import {
   Button,
   GlareCardRounded,
@@ -12,7 +11,7 @@ import { baseMainnet } from "@b3dotfun/sdk/shared/constants/chains/supported";
 import { motion } from "motion/react";
 import { useEffect, useMemo, useState } from "react";
 import { createPublicClient, encodeFunctionData, formatEther, http, parseEther } from "viem";
-import { ABI_bondKit } from "../../abis/bondKit";
+import { BondkitToken, BondkitTokenABI } from "../../../bondkit";
 import { AnySpendCustom } from "./AnySpendCustom";
 
 // Debounce utility function
@@ -37,13 +36,13 @@ export function AnySpendBondKit({
   contractAddress,
   minTokensOut = "0",
   imageUrl,
-  ethAmount: initialEthAmount,
+  b3Amount: initialB3Amount,
   onSuccess,
 }: AnySpendBondKitProps) {
   const hasMounted = useHasMounted();
-  const [showAmountPrompt, setShowAmountPrompt] = useState(!initialEthAmount);
-  const [ethAmount, setEthAmount] = useState(initialEthAmount || "");
-  const [isAmountValid, setIsAmountValid] = useState(!!initialEthAmount);
+  const [showAmountPrompt, setShowAmountPrompt] = useState(!initialB3Amount);
+  const [b3Amount, setB3Amount] = useState(initialB3Amount || "");
+  const [isAmountValid, setIsAmountValid] = useState(!!initialB3Amount);
   const [validationError, setValidationError] = useState("");
   const [tokenName, setTokenName] = useState<string>("");
   const [tokenSymbol, setTokenSymbol] = useState<string>("");
@@ -76,12 +75,12 @@ export function AnySpendBondKit({
         const [name, symbol] = await Promise.all([
           basePublicClient.readContract({
             address: contractAddress as `0x${string}`,
-            abi: ABI_bondKit,
+            abi: BondkitTokenABI,
             functionName: "name",
           }),
           basePublicClient.readContract({
             address: contractAddress as `0x${string}`,
-            abi: ABI_bondKit,
+            abi: BondkitTokenABI,
             functionName: "symbol",
           }),
         ]);
@@ -99,12 +98,12 @@ export function AnySpendBondKit({
     }
   }, [contractAddress, basePublicClient]);
 
-  // Get native token data for the chain
+  // Get b3 token data
   const {
     data: tokenData,
     isError: isTokenError,
     isLoading,
-  } = useTokenData(baseMainnet.id, "0x0000000000000000000000000000000000000000");
+  } = useTokenData(baseMainnet.id, "0xB3B32F9f8827D4634fE7d973Fa1034Ec9fdDB3B3");
 
   // Convert token data to AnySpend Token type
   const dstToken = useMemo(() => {
@@ -144,17 +143,18 @@ export function AnySpendBondKit({
       }, 500),
     [bondkitTokenClient],
   );
-  // Fetch initial quote if ethAmount is provided
+
+  // Fetch initial quote if b3Amount is provided
   useEffect(() => {
-    if (initialEthAmount && bondkitTokenClient) {
-      debouncedGetQuote(initialEthAmount);
+    if (initialB3Amount && bondkitTokenClient) {
+      debouncedGetQuote(initialB3Amount);
     }
-  }, [initialEthAmount, bondkitTokenClient, debouncedGetQuote]);
+  }, [initialB3Amount, bondkitTokenClient, debouncedGetQuote]);
 
   const validateAndSetAmount = (value: string) => {
     // Allow empty input
     if (value === "") {
-      setEthAmount("");
+      setB3Amount("");
       setIsAmountValid(false);
       setValidationError("");
       setQuote(null);
@@ -173,7 +173,7 @@ export function AnySpendBondKit({
       return;
     }
 
-    // Prevent more than 18 decimal places (ETH precision)
+    // Prevent more than 18 decimal places (B3 precision)
     const parts = value.split(".");
     if (parts[1] && parts[1].length > 18) {
       return;
@@ -181,7 +181,7 @@ export function AnySpendBondKit({
 
     // Clean the input - remove leading zeros if not decimal
     const cleanedValue = value.startsWith("0") && !value.startsWith("0.") ? value.replace(/^0+/, "0") : value;
-    setEthAmount(cleanedValue);
+    setB3Amount(cleanedValue);
 
     try {
       const parsedAmount = parseEther(cleanedValue);
@@ -208,7 +208,7 @@ export function AnySpendBondKit({
           Buy {tokenName} ({tokenSymbol})
         </h2>
         <div className="flex w-full flex-col items-center space-y-2">
-          <span className="text-[28px] font-bold">{ethAmount} ETH</span>
+          <span className="text-[28px] font-bold">{b3Amount} B3</span>
           {quote && (
             <span className="text-lg">
               ≈ {formatNumberWithCommas(parseFloat(quote).toFixed(4))} {tokenSymbol}
@@ -294,7 +294,7 @@ export function AnySpendBondKit({
           >
             <div className="space-y-4">
               <div className="flex items-center justify-between">
-                <p className="text-as-primary/70 text-sm font-medium">ETH Amount</p>
+                <p className="text-as-primary/70 text-sm font-medium">B3 Amount</p>
               </div>
 
               <div className="relative">
@@ -302,19 +302,19 @@ export function AnySpendBondKit({
                   type="text"
                   inputMode="decimal"
                   placeholder="0.1"
-                  value={ethAmount}
+                  value={b3Amount}
                   onChange={e => validateAndSetAmount(e.target.value)}
-                  className={`h-14 px-4 text-lg ${!isAmountValid && ethAmount ? "border-as-red" : "border-b3-react-border"}`}
+                  className={`h-14 px-4 text-lg ${!isAmountValid && b3Amount ? "border-as-red" : "border-b3-react-border"}`}
                 />
               </div>
 
-              {!isAmountValid && ethAmount && <p className="text-as-red text-sm">{validationError}</p>}
+              {!isAmountValid && b3Amount && <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">{ethAmount || "0"} ETH</span>
+                    <span className="text-as-primary text-lg font-bold">{b3Amount || "0"} B3</span>
                   </div>
                 </div>
                 {isLoadingQuote ? (
@@ -333,11 +333,11 @@ export function AnySpendBondKit({
 
               <Button
                 onClick={() => {
-                  if (isAmountValid && ethAmount) {
+                  if (isAmountValid && b3Amount) {
                     setShowAmountPrompt(false);
                   }
                 }}
-                disabled={!isAmountValid || !ethAmount || isLoadingQuote}
+                disabled={!isAmountValid || !b3Amount || isLoadingQuote}
                 className="bg-as-brand hover:bg-as-brand/90 text-as-primary mt-4 h-14 w-full rounded-xl text-lg font-medium"
               >
                 Continue
@@ -350,9 +350,9 @@ export function AnySpendBondKit({
   }
 
   const encodedData = encodeFunctionData({
-    abi: ABI_bondKit,
+    abi: BondkitTokenABI,
     functionName: "buyFor",
-    args: [recipientAddress as `0x${string}`, BigInt(minTokensOut)],
+    args: [recipientAddress as `0x${string}`, parseEther(b3Amount), BigInt(minTokensOut)],
   });
 
   return (
@@ -362,7 +362,7 @@ export function AnySpendBondKit({
       orderType={"custom"}
       dstChainId={baseMainnet.id}
       dstToken={dstToken}
-      dstAmount={parseEther(ethAmount).toString()}
+      dstAmount={parseEther(b3Amount).toString()}
       contractAddress={contractAddress}
       encodedData={encodedData}
       metadata={{

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

@@ -649,7 +649,7 @@ function AnySpendCustomInner({
     >
       {oat && (
         <>
-          <OrderStatusDisplay order={oat.data.order} />
+          <OrderStatusDisplay order={oat.data.order} selectedCryptoPaymentMethod={selectedCryptoPaymentMethod} />
           <OrderDetails
             mode={mode}
             order={oat.data.order}

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

@@ -1,4 +1,4 @@
-import { B3_TOKEN } from "@b3dotfun/sdk/anyspend";
+import { B3_TOKEN, DEPOSIT_HYPE_ACTION } from "@b3dotfun/sdk/anyspend";
 import { Button, ShinyButton, StyleRoot, TransitionPanel } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import invariant from "invariant";
@@ -32,7 +32,7 @@ function generateEncodedDataForDepositHype(amount: string, beneficiary: string):
   return encodedData;
 }
 
-export function AnySpendDepositHype(props: {
+export interface AnySpendDepositHypeProps {
   loadOrder?: string;
   mode?: "modal" | "page";
   recipientAddress: string;
@@ -41,7 +41,10 @@ export function AnySpendDepositHype(props: {
   sourceTokenChainId?: number;
   onSuccess?: () => void;
   depositContractAddress?: string;
-}) {
+  mainFooter?: React.ReactNode;
+}
+
+export function AnySpendDepositHype(props: AnySpendDepositHypeProps) {
   const fingerprintConfig = getFingerprintConfig();
 
   return (
@@ -60,16 +63,8 @@ function AnySpendDepositHypeInner({
   sourceTokenChainId,
   onSuccess,
   depositContractAddress,
-}: {
-  loadOrder?: string;
-  mode?: "modal" | "page";
-  recipientAddress: string;
-  paymentType?: "crypto" | "fiat";
-  sourceTokenAddress?: string;
-  sourceTokenChainId?: number;
-  onSuccess?: () => void;
-  depositContractAddress?: string;
-}) {
+  mainFooter,
+}: AnySpendDepositHypeProps) {
   // Use shared flow hook
   const {
     activePanel,
@@ -185,6 +180,125 @@ function AnySpendDepositHypeInner({
     }
   };
 
+  const mainView = (
+    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-2">
+      {/* Header */}
+      <div className="mb-4 flex flex-col items-center gap-3 text-center">
+        <div>
+          <h1 className="text-as-primary text-xl font-bold">
+            {paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat"}
+          </h1>
+        </div>
+      </div>
+
+      <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
+        <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
+          {/* Send section */}
+          {paymentType === "crypto" ? (
+            <PaySection
+              paymentType="crypto"
+              selectedSrcChainId={selectedSrcChainId}
+              setSelectedSrcChainId={setSelectedSrcChainId}
+              selectedSrcToken={selectedSrcToken}
+              setSelectedSrcToken={setSelectedSrcToken}
+              srcAmount={srcAmount}
+              setSrcAmount={setSrcAmount}
+              setIsSrcInputDirty={setIsSrcInputDirty}
+              selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+              selectedFiatPaymentMethod={selectedFiatPaymentMethod}
+              onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
+              onSelectFiatPaymentMethod={() => setActivePanel(PanelView.FIAT_PAYMENT_METHOD)}
+              anyspendQuote={anyspendQuote}
+            />
+          ) : (
+            <motion.div
+              initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
+              animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+              transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
+            >
+              <PanelOnramp
+                srcAmountOnRamp={srcAmount}
+                setSrcAmountOnRamp={setSrcAmount}
+                selectedPaymentMethod={selectedFiatPaymentMethod}
+                setActivePanel={setActivePanel}
+                _recipientAddress={recipientAddress}
+                destinationToken={B3_TOKEN}
+                destinationChainId={base.id}
+                destinationAmount={dstAmount}
+                onDestinationTokenChange={() => {}}
+                onDestinationChainChange={() => {}}
+                fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
+              />
+            </motion.div>
+          )}
+
+          {/* Reverse swap direction section */}
+          <div
+            className={cn("relative -my-1 flex h-0 items-center justify-center", paymentType === "fiat" && "hidden")}
+          >
+            <Button
+              variant="ghost"
+              className={cn(
+                "swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
+              )}
+            >
+              <div className="relative flex items-center justify-center transition-opacity">
+                <ArrowDown className="text-as-primary/50 h-5 w-5" />
+              </div>
+            </Button>
+          </div>
+
+          {/* Receive section - Hidden when fiat tab is active */}
+          {paymentType === "crypto" && (
+            <CryptoReceiveSection
+              isDepositMode={false}
+              isBuyMode={true}
+              selectedRecipientAddress={recipientAddress}
+              recipientName={recipientName || undefined}
+              onSelectRecipient={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
+              dstAmount={dstAmount}
+              dstToken={B3_TOKEN}
+              selectedDstChainId={base.id}
+              setSelectedDstChainId={() => {}}
+              setSelectedDstToken={() => {}}
+              onChangeDstAmount={value => {
+                setIsSrcInputDirty(false);
+                setSrcAmount(value);
+              }}
+              anyspendQuote={anyspendQuote}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Error message section */}
+      <ErrorSection error={getAnyspendQuoteError} />
+
+      {/* Main button section */}
+      <motion.div
+        initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
+        animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+        transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
+        className={cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0")}
+      >
+        <ShinyButton
+          accentColor={"hsl(var(--as-brand))"}
+          disabled={btnInfo.disable}
+          onClick={onMainButtonClick}
+          className={cn(
+            "as-main-button relative w-full",
+            btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand",
+          )}
+          textClassName={cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white")}
+        >
+          {btnInfo.text}
+        </ShinyButton>
+      </motion.div>
+
+      {mainFooter ? mainFooter : null}
+    </div>
+  );
+
   // Handle crypto order creation
   const handleCryptoOrder = async () => {
     try {
@@ -209,7 +323,7 @@ function AnySpendDepositHypeInner({
           amount: depositAmountWei,
           data: encodedData,
           to: depositContractAddress,
-          action: "deposit HYPE",
+          action: DEPOSIT_HYPE_ACTION,
         },
       });
     } catch (err: any) {
@@ -274,7 +388,7 @@ function AnySpendDepositHypeInner({
           amount: depositAmountWei,
           data: encodedData,
           to: depositContractAddress,
-          action: "deposit HYPE",
+          action: DEPOSIT_HYPE_ACTION,
         },
       });
     } catch (err: any) {
@@ -289,7 +403,7 @@ function AnySpendDepositHypeInner({
       <div className="relative flex flex-col gap-4">
         {oat && (
           <>
-            <OrderStatus order={oat.data.order} />
+            <OrderStatus order={oat.data.order} selectedCryptoPaymentMethod={selectedCryptoPaymentMethod} />
             <OrderDetails
               mode={mode}
               order={oat.data.order}
@@ -388,119 +502,7 @@ function AnySpendDepositHypeInner({
         >
           {[
             <div key="main-view" className={cn(mode === "page" && "p-6")}>
-              <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-2">
-                {/* Header */}
-                <div className="mb-4 flex flex-col items-center gap-3 text-center">
-                  <div>
-                    <h1 className="text-as-primary text-xl font-bold">
-                      {paymentType === "crypto" ? "Deposit Crypto" : "Fund with Fiat"}
-                    </h1>
-                  </div>
-                </div>
-
-                <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
-                  <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
-                    {/* Send section */}
-                    {paymentType === "crypto" ? (
-                      <PaySection
-                        paymentType="crypto"
-                        selectedSrcChainId={selectedSrcChainId}
-                        setSelectedSrcChainId={setSelectedSrcChainId}
-                        selectedSrcToken={selectedSrcToken}
-                        setSelectedSrcToken={setSelectedSrcToken}
-                        srcAmount={srcAmount}
-                        setSrcAmount={setSrcAmount}
-                        setIsSrcInputDirty={setIsSrcInputDirty}
-                        selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
-                        selectedFiatPaymentMethod={selectedFiatPaymentMethod}
-                        onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
-                        onSelectFiatPaymentMethod={() => setActivePanel(PanelView.FIAT_PAYMENT_METHOD)}
-                        anyspendQuote={anyspendQuote}
-                      />
-                    ) : (
-                      <motion.div
-                        initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
-                        animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
-                        transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
-                      >
-                        <PanelOnramp
-                          srcAmountOnRamp={srcAmount}
-                          setSrcAmountOnRamp={setSrcAmount}
-                          selectedPaymentMethod={selectedFiatPaymentMethod}
-                          setActivePanel={setActivePanel}
-                          _recipientAddress={recipientAddress}
-                          destinationToken={B3_TOKEN}
-                          destinationChainId={base.id}
-                          destinationAmount={dstAmount}
-                          onDestinationTokenChange={() => {}}
-                          onDestinationChainChange={() => {}}
-                          fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
-                        />
-                      </motion.div>
-                    )}
-
-                    {/* Reverse swap direction section */}
-                    <Button
-                      variant="ghost"
-                      className={cn(
-                        "swap-direction-button border-as-stroke bg-as-surface-primary absolute left-1/2 top-[calc(50%+56px)] z-10 h-10 w-10 -translate-x-1/2 -translate-y-1/2 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
-                        paymentType === "fiat" && "hidden",
-                      )}
-                    >
-                      <div className="relative flex items-center justify-center transition-opacity">
-                        <ArrowDown className="text-as-primary/50 h-5 w-5" />
-                      </div>
-                    </Button>
-
-                    {/* Receive section - Hidden when fiat tab is active */}
-                    {paymentType === "crypto" && (
-                      <CryptoReceiveSection
-                        isDepositMode={false}
-                        isBuyMode={true}
-                        selectedRecipientAddress={recipientAddress}
-                        recipientName={recipientName || undefined}
-                        onSelectRecipient={() => setActivePanel(PanelView.RECIPIENT_SELECTION)}
-                        dstAmount={dstAmount}
-                        dstToken={B3_TOKEN}
-                        selectedDstChainId={base.id}
-                        setSelectedDstChainId={() => {}}
-                        setSelectedDstToken={() => {}}
-                        onChangeDstAmount={value => {
-                          setIsSrcInputDirty(false);
-                          setSrcAmount(value);
-                        }}
-                        anyspendQuote={anyspendQuote}
-                      />
-                    )}
-                  </div>
-                </div>
-
-                {/* Error message section */}
-                <ErrorSection error={getAnyspendQuoteError} />
-
-                {/* Main button section */}
-                <motion.div
-                  initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
-                  animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
-                  transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
-                  className={cn("mt-4 flex w-full max-w-[460px] flex-col gap-2", getAnyspendQuoteError && "mt-0")}
-                >
-                  <ShinyButton
-                    accentColor={"hsl(var(--as-brand))"}
-                    disabled={btnInfo.disable}
-                    onClick={onMainButtonClick}
-                    className={cn(
-                      "as-main-button relative w-full",
-                      btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand",
-                    )}
-                    textClassName={cn(
-                      btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white",
-                    )}
-                  >
-                    {btnInfo.text}
-                  </ShinyButton>
-                </motion.div>
-              </div>
+              {mainView}
             </div>,
             <div key="crypto-payment-method-view" className={cn(mode === "page" && "p-6")}>
               {cryptoPaymentMethodView}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { ALL_CHAINS, capitalizeFirstLetter, getChainName } from "@b3dotfun/sdk/anyspend";
+import { ALL_CHAINS, capitalizeFirstLetter, DEPOSIT_HYPE_ACTION, getChainName } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { CopyToClipboard } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
@@ -94,9 +94,11 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
                     : order.type === "fund_tournament"
                       ? "Fund tournament"
                       : order.type === "custom"
-                        ? order.metadata.action
-                          ? capitalizeFirstLetter(order.metadata.action)
-                          : "Contract execution"
+                        ? order.metadata.action === DEPOSIT_HYPE_ACTION
+                          ? "Deposit HYPE"
+                          : order.metadata.action
+                            ? capitalizeFirstLetter(order.metadata.action)
+                            : "Contract execution"
                         : ""}
               </div>
 
@@ -113,6 +115,10 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
                     <img src={tournament?.imageUrl} alt={tournament?.name || "Tournament"} className="h-5 w-5" />
                     <div>{tournament?.name || "Tournament"}</div>
                   </div>
+                ) : order.type === "custom" && order.metadata.action === DEPOSIT_HYPE_ACTION ? (
+                  <div className="flex items-center gap-2">
+                    <div>{formatTokenAmount(BigInt(order.payload.amount), dstToken.decimals)} HYPE</div>
+                  </div>
                 ) : null}
 
                 <div className="text-as-primary/50 flex items-center gap-2">

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

@@ -3,13 +3,20 @@ import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { useSearchParams } from "@b3dotfun/sdk/shared/react";
 import { Check, X } from "lucide-react";
 import { memo } from "react";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { Step, StepProgress } from "./StepProgress";
 
-export const OrderStatus = memo(function OrderStatus({ order }: { order: components["schemas"]["Order"] }) {
+export const OrderStatus = memo(function OrderStatus({
+  order,
+  selectedCryptoPaymentMethod,
+}: {
+  order: components["schemas"]["Order"];
+  selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
+}) {
   const isComplete = order.status === "executed";
   const { text, status: displayStatus, description } = getStatusDisplay(order);
   const searchParams = useSearchParams();
-  const cryptoPaymentMethod = searchParams.get("cryptoPaymentMethod");
+  const cryptoPaymentMethod = selectedCryptoPaymentMethod || searchParams.get("cryptoPaymentMethod");
 
   console.log("OrderStatus", displayStatus);
   console.log("OrderStatus", order);