@b3dotfun/sdk 0.0.65-test.5 → 0.0.66-alpha.0

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

@@ -45,6 +45,7 @@ import { toast } from "sonner";
 import { base } from "viem/chains";
 import { useFeatureFlags } from "../contexts/FeatureFlagsContext";
 import { useAutoSetActiveWalletFromWagmi } from "../hooks/useAutoSetActiveWalletFromWagmi";
+import { useCryptoPaymentMethodState } from "../hooks/useCryptoPaymentMethodState";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { FeeBreakDown } from "./common/FeeBreakDown";
@@ -250,10 +251,11 @@ function AnySpendCustomInner({
   );
   const [activeTab, setActiveTab] = useState<"crypto" | "fiat">(activeTabProps);
 
-  // Add state for selected payment methods
-  const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(
-    CryptoPaymentMethodType.NONE,
-  );
+  // Payment method state with dual-state system (auto + explicit user selection)
+  // Note: AnySpendCustom doesn't use auto-selection, only explicit user selection
+  const { setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods } =
+    useCryptoPaymentMethodState();
+
   const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState<FiatPaymentMethod>(FiatPaymentMethod.NONE);
 
   // Get current user's wallet
@@ -550,7 +552,7 @@ function AnySpendCustomInner({
     }
 
     // Check payment method selection for crypto tab
-    if (activeTab === "crypto" && selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+    if (activeTab === "crypto" && effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
       setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
       return;
     }
@@ -664,7 +666,7 @@ function AnySpendCustomInner({
   const historyView = (
     <div
       className={cn(
-        "mx-auto flex w-full max-w-2xl flex-col items-center",
+        "mx-auto flex w-full max-w-2xl flex-col items-center p-5",
         mode === "modal" && "bg-b3-react-background",
       )}
     >
@@ -693,12 +695,17 @@ function AnySpendCustomInner({
           relayTxs={oat.data.relayTxs}
           executeTx={oat.data.executeTx}
           refundTxs={oat.data.refundTxs}
-          cryptoPaymentMethod={activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
-          selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
-          onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+          cryptoPaymentMethod={activeTab === "fiat" ? CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod}
+          selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
+          onPaymentMethodChange={method => {
+            // When user explicitly changes payment method, set it as selected
+            setSelectedCryptoPaymentMethod(method);
+          }}
           onBack={() => {
             setOrderId(undefined);
             setActivePanel(PanelView.CONFIRM_ORDER);
+            // Reset payment methods when going back
+            resetPaymentMethods();
             // Remove orderId from URL when canceling
             const params = new URLSearchParams(searchParams.toString());
             params.delete("orderId");
@@ -832,7 +839,8 @@ function AnySpendCustomInner({
               )}
               onClick={() => {
                 setActiveTab("crypto");
-                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+                // Reset payment methods when switching tabs
+                resetPaymentMethods();
                 setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
               }}
             >
@@ -846,7 +854,8 @@ function AnySpendCustomInner({
                 )}
                 onClick={() => {
                   setActiveTab("fiat");
-                  setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+                  // Reset payment methods when switching tabs
+                  resetPaymentMethods();
                   setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
                 }}
               >
@@ -902,7 +911,7 @@ function AnySpendCustomInner({
                   className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors hover:text-blue-700"
                   onClick={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
                 >
-                  {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
+                  {effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
                     <>
                       {connectedAddress ? (
                         <>
@@ -915,7 +924,7 @@ function AnySpendCustomInner({
                       )}
                       <ChevronRight className="h-4 w-4" />
                     </>
-                  ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
+                  ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
                     <>
                       Transfer crypto
                       <ChevronRight className="h-4 w-4" />
@@ -1043,7 +1052,7 @@ function AnySpendCustomInner({
                     </div>
                   ) : !recipientAddress ? (
                     "Select recipient"
-                  ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE ? (
+                  ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE ? (
                     "Choose payment method"
                   ) : anyspendQuote ? (
                     <>
@@ -1237,11 +1246,17 @@ function AnySpendCustomInner({
   const cryptoPaymentMethodView = (
     <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
       <CryptoPaymentMethod
-        selectedPaymentMethod={selectedCryptoPaymentMethod}
-        setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
+        globalAddress={currentWallet?.wallet?.address}
+        globalWallet={currentWallet?.wallet}
+        selectedPaymentMethod={effectiveCryptoPaymentMethod}
+        setSelectedPaymentMethod={method => {
+          // When user explicitly selects a payment method, save it
+          setSelectedCryptoPaymentMethod(method);
+        }}
         isCreatingOrder={isCreatingOrder}
         onBack={() => setActivePanel(PanelView.CONFIRM_ORDER)}
         onSelectPaymentMethod={(method: CryptoPaymentMethodType) => {
+          // When user explicitly selects a payment method, save it and go back
           setSelectedCryptoPaymentMethod(method);
           setActivePanel(PanelView.CONFIRM_ORDER);
         }}

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

@@ -3,6 +3,7 @@ import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { Button, ShinyButton, StyleRoot, TransitionPanel, useAccountWallet } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import invariant from "invariant";
 import { ArrowDown, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
@@ -46,7 +47,9 @@ export interface AnySpendCustomExactInProps {
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
   customUsdInputValues?: string[];
   preferEoa?: boolean;
-  customExactInConfig: CustomExactInConfig;
+  customExactInConfig?: CustomExactInConfig;
+  orderType?: "hype_duel" | "custom_exact_in";
+  minDestinationAmount?: number;
   header?: ({
     anyspendPrice,
     isLoadingAnyspendPrice,
@@ -81,9 +84,11 @@ function AnySpendCustomExactInInner({
   customUsdInputValues,
   preferEoa,
   customExactInConfig,
+  orderType = "custom_exact_in",
+  minDestinationAmount,
   header,
 }: AnySpendCustomExactInProps) {
-  const actionLabel = customExactInConfig.action ?? "Custom Execution";
+  const actionLabel = customExactInConfig?.action ?? "Custom Execution";
 
   const DESTINATION_TOKEN_DETAILS = {
     SYMBOL: destinationToken.symbol ?? "TOKEN",
@@ -108,6 +113,7 @@ function AnySpendCustomExactInInner({
     isSrcInputDirty,
     setIsSrcInputDirty,
     selectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
     setSelectedCryptoPaymentMethod,
     selectedFiatPaymentMethod,
     setSelectedFiatPaymentMethod,
@@ -139,7 +145,7 @@ function AnySpendCustomExactInInner({
     destinationTokenChainId: destinationChainId,
     slippage: SLIPPAGE_PERCENT,
     disableUrlParamManagement: true,
-    orderType: "custom_exact_in",
+    orderType,
   });
 
   const { connectedEOAWallet } = useAccountWallet();
@@ -160,6 +166,14 @@ function AnySpendCustomExactInInner({
   const expectedDstAmountRaw = anyspendQuote?.data?.currencyOut?.amount ?? "0";
 
   const buildCustomPayload = (_recipient: string | undefined) => {
+    if (!customExactInConfig) {
+      // For hype_duel or other simple order types
+      return {
+        expectedDstAmount: expectedDstAmountRaw,
+      };
+    }
+
+    // For custom_exact_in with custom config
     return {
       amount: expectedDstAmountRaw,
       expectedDstAmount: expectedDstAmountRaw,
@@ -183,18 +197,42 @@ function AnySpendCustomExactInInner({
     if (!anyspendQuote || !anyspendQuote.success)
       return { text: "Get quote error", disable: true, error: true, loading: false };
 
+    // Check minimum destination amount if specified
+    // Check minimum destination amount if specified
+    if (
+      minDestinationAmount &&
+      anyspendQuote.data?.currencyOut?.amount &&
+      anyspendQuote.data.currencyOut.currency &&
+      anyspendQuote.data.currencyOut.currency.decimals != null
+    ) {
+      const rawAmountInWei = BigInt(anyspendQuote.data.currencyOut.amount);
+      const decimals = anyspendQuote.data.currencyOut.currency.decimals;
+      const actualAmount = parseFloat(formatUnits(rawAmountInWei.toString(), decimals));
+
+      if (actualAmount < minDestinationAmount) {
+        return {
+          text: `Minimum ${minDestinationAmount} ${DESTINATION_TOKEN_DETAILS.SYMBOL} deposit`,
+          disable: true,
+          error: true,
+          loading: false,
+        };
+      }
+    }
+
     if (paymentType === "crypto") {
-      if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+      if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
         return { text: "Choose payment method", disable: false, error: false, loading: false };
       }
       if (
         !hasEnoughBalance &&
         !isBalanceLoading &&
-        selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
+        effectiveCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
       ) {
         return { text: "Insufficient balance", disable: true, error: true, loading: false };
       }
-      return { text: `Execute ${actionLabel}`, disable: false, error: false, loading: false };
+      // Use different text based on order type
+      const buttonText = orderType === "hype_duel" ? "Continue to deposit" : `Execute ${actionLabel}`;
+      return { text: buttonText, disable: false, error: false, loading: false };
     }
 
     if (paymentType === "fiat") {
@@ -213,11 +251,14 @@ function AnySpendCustomExactInInner({
     selectedRecipientOrDefault,
     anyspendQuote,
     paymentType,
-    selectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
     selectedFiatPaymentMethod,
     hasEnoughBalance,
     isBalanceLoading,
     actionLabel,
+    minDestinationAmount,
+    DESTINATION_TOKEN_DETAILS.SYMBOL,
+    orderType,
   ]);
 
   const onMainButtonClick = async () => {
@@ -229,7 +270,7 @@ function AnySpendCustomExactInInner({
     }
 
     if (paymentType === "crypto") {
-      if (selectedCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
+      if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
         setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD);
         return;
       }
@@ -270,7 +311,7 @@ function AnySpendCustomExactInInner({
               setSrcAmount={setSrcAmount}
               isSrcInputDirty={isSrcInputDirty}
               setIsSrcInputDirty={setIsSrcInputDirty}
-              selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+              selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
               onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
               anyspendQuote={anyspendQuote}
               onTokenSelect={onTokenSelect}
@@ -383,7 +424,7 @@ function AnySpendCustomExactInInner({
 
       createOrder({
         recipientAddress: selectedRecipientOrDefault,
-        orderType: "custom_exact_in",
+        orderType,
         srcChain: selectedSrcChainId,
         dstChain: selectedDstChainId,
         srcToken: selectedSrcToken,
@@ -434,7 +475,7 @@ function AnySpendCustomExactInInner({
 
       createOnrampOrder({
         recipientAddress: selectedRecipientOrDefault,
-        orderType: "custom_exact_in",
+        orderType,
         dstChain: selectedDstChainId,
         dstToken: selectedDstToken,
         srcFiatAmount: srcAmount,
@@ -465,8 +506,8 @@ function AnySpendCustomExactInInner({
             relayTxs={oat.data.relayTxs}
             executeTx={oat.data.executeTx}
             refundTxs={oat.data.refundTxs}
-            cryptoPaymentMethod={paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
-            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+            cryptoPaymentMethod={paymentType === "fiat" ? CryptoPaymentMethodType.NONE : effectiveCryptoPaymentMethod}
+            selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod}
             onPaymentMethodChange={setSelectedCryptoPaymentMethod}
             onBack={() => {
               setOrderId(undefined);
@@ -499,6 +540,8 @@ function AnySpendCustomExactInInner({
 
   const cryptoPaymentMethodView = (
     <CryptoPaymentMethod
+      globalAddress={globalAddress}
+      globalWallet={undefined}
       selectedPaymentMethod={selectedCryptoPaymentMethod}
       setSelectedPaymentMethod={setSelectedCryptoPaymentMethod}
       isCreatingOrder={isCreatingOrder}

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

@@ -0,0 +1,81 @@
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
+import { base } from "viem/chains";
+import { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
+
+const DEPOSIT_FOR_FUNCTION_ABI = JSON.stringify([
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "user",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "amount",
+        type: "uint256",
+      },
+    ],
+    name: "depositFor",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+]);
+
+export function AnySpendDepositUpside({
+  loadOrder,
+  mode = "modal",
+  recipientAddress,
+  sourceTokenAddress,
+  sourceTokenChainId,
+  depositContractAddress,
+  token,
+  onSuccess,
+}: {
+  loadOrder?: string;
+  mode?: "modal" | "page";
+  recipientAddress: string;
+  sourceTokenAddress?: string;
+  sourceTokenChainId?: number;
+  depositContractAddress: string;
+  token: components["schemas"]["Token"];
+  onSuccess?: (amount: string) => void;
+}) {
+  if (!recipientAddress) return null;
+
+  const header = () => (
+    <>
+      <div className="from-b3-react-background to-as-on-surface-1 w-full rounded-t-lg bg-gradient-to-t">
+        <div className="mb-1 flex w-full flex-col items-center gap-2">
+          <span className="font-sf-rounded text-2xl font-semibold">Swap & Deposit {token.symbol}</span>
+        </div>
+      </div>
+    </>
+  );
+
+  const customExactInConfig = {
+    functionAbi: DEPOSIT_FOR_FUNCTION_ABI,
+    functionName: "depositFor",
+    functionArgs: [normalizeAddress(recipientAddress), "{{amount_out}}"],
+    to: depositContractAddress,
+    spenderAddress: depositContractAddress,
+    action: `deposit ${token.symbol}`,
+  };
+
+  return (
+    <AnySpendCustomExactIn
+      loadOrder={loadOrder}
+      mode={mode}
+      recipientAddress={recipientAddress}
+      sourceTokenAddress={sourceTokenAddress}
+      sourceTokenChainId={sourceTokenChainId}
+      destinationToken={token}
+      destinationChainId={base.id}
+      customExactInConfig={customExactInConfig}
+      header={header}
+      onSuccess={onSuccess}
+    />
+  );
+}