@b3dotfun/sdk 0.0.40-test.6 → 0.0.41-alpha.0

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

@@ -42,13 +42,15 @@ import { motion } from "motion/react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { base } from "viem/chains";
+import { useFeatureFlags } from "../contexts/FeatureFlagsContext";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
 import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
-import { OrderStatus as OrderStatusDisplay } from "./common/OrderStatus";
 import { OrderToken } from "./common/OrderToken";
+import { PointsBadge } from "./common/PointsBadge";
+import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 
 enum PanelView {
@@ -59,6 +61,7 @@ enum PanelView {
   RECIPIENT_SELECTION,
   CRYPTO_PAYMENT_METHOD,
   FIAT_PAYMENT_METHOD,
+  POINTS_DETAIL,
 }
 
 function generateGetRelayQuoteRequest({
@@ -67,6 +70,7 @@ function generateGetRelayQuoteRequest({
   srcToken,
   dstChainId,
   dstToken,
+  recipientAddress,
   dstAmount,
   contractAddress,
   tokenId,
@@ -79,6 +83,7 @@ function generateGetRelayQuoteRequest({
   srcToken: components["schemas"]["Token"];
   dstChainId: number;
   dstToken: components["schemas"]["Token"];
+  recipientAddress: string | undefined;
   dstAmount: string;
   contractAddress: string;
   tokenId?: number | null;
@@ -95,6 +100,7 @@ function generateGetRelayQuoteRequest({
         srcTokenAddress: srcToken.address,
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
+        recipientAddress,
         price: dstAmount,
         contractAddress: contractAddress,
         tokenId: tokenId,
@@ -108,6 +114,7 @@ function generateGetRelayQuoteRequest({
         srcTokenAddress: srcToken.address,
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
+        recipientAddress,
         price: dstAmount,
         contractAddress: contractAddress,
       };
@@ -119,6 +126,7 @@ function generateGetRelayQuoteRequest({
         srcTokenAddress: srcToken.address,
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
+        recipientAddress,
         fundAmount: dstAmount,
         contractAddress: contractAddress,
       };
@@ -130,6 +138,7 @@ function generateGetRelayQuoteRequest({
         srcTokenAddress: srcToken.address,
         dstChain: dstChainId,
         dstTokenAddress: dstToken.address,
+        recipientAddress,
         payload: {
           amount: dstAmount,
           data: encodedData,
@@ -166,6 +175,7 @@ export function AnySpendCustom(props: {
   }) => React.JSX.Element;
   onSuccess?: (txHash?: string) => void;
   showRecipient?: boolean;
+  onShowPointsDetail?: () => void;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -192,6 +202,7 @@ function AnySpendCustomInner({
   header,
   onSuccess,
   showRecipient = true,
+  onShowPointsDetail,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
@@ -214,8 +225,10 @@ function AnySpendCustomInner({
   }) => React.JSX.Element;
   onSuccess?: (txHash?: string) => void;
   showRecipient?: boolean;
+  onShowPointsDetail?: () => void;
 }) {
   const hasMounted = useHasMounted();
+  const featureFlags = useFeatureFlags();
 
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -313,10 +326,11 @@ function AnySpendCustomInner({
       srcToken: activeTab === "fiat" ? USDC_BASE : srcToken,
       dstChainId: dstChainId,
       dstToken: dstToken,
+      recipientAddress,
       dstAmount: dstAmount,
       contractAddress: contractAddress,
-      tokenId: metadata.type === "mint_nft" ? metadata.nftContract.tokenId : undefined,
-      contractType: metadata.type === "mint_nft" ? metadata.nftContract.type : undefined,
+      tokenId: orderType === "mint_nft" ? metadata?.nftContract?.tokenId : undefined,
+      contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
       encodedData: encodedData,
       spenderAddress: spenderAddress,
     });
@@ -329,8 +343,8 @@ function AnySpendCustomInner({
     encodedData,
     metadata?.nftContract?.tokenId,
     metadata?.nftContract?.type,
-    metadata?.type,
     orderType,
+    recipientAddress,
     spenderAddress,
     srcChainId,
     srcToken,
@@ -427,7 +441,7 @@ function AnySpendCustomInner({
         recipientAddress,
         creatorAddress: currentWallet?.wallet?.address,
         nft:
-          metadata.type === "mint_nft"
+          orderType === "mint_nft"
             ? metadata.nftContract.type === "erc1155"
               ? {
                   type: "erc1155",
@@ -449,7 +463,7 @@ function AnySpendCustomInner({
                 }
             : undefined,
         tournament:
-          metadata.type === "join_tournament" || metadata.type === "fund_tournament"
+          orderType === "join_tournament" || orderType === "fund_tournament"
             ? {
                 ...metadata.tournament,
                 contractAddress: contractAddress,
@@ -458,13 +472,12 @@ function AnySpendCustomInner({
             : undefined,
         // only populate payload for custom tx
         payload:
-          metadata.type === "custom"
+          orderType === "custom"
             ? {
                 amount: dstAmount,
                 data: encodedData,
                 spenderAddress: spenderAddress,
                 to: contractAddress,
-                action: metadata.action,
               }
             : undefined,
       } as CreateOrderParams;
@@ -648,26 +661,25 @@ function AnySpendCustomInner({
       )}
     >
       {oat && (
-        <>
-          <OrderStatusDisplay order={oat.data.order} selectedCryptoPaymentMethod={selectedCryptoPaymentMethod} />
-          <OrderDetails
-            mode={mode}
-            order={oat.data.order}
-            depositTxs={oat.data.depositTxs}
-            relayTxs={oat.data.relayTxs}
-            executeTx={oat.data.executeTx}
-            refundTxs={oat.data.refundTxs}
-            cryptoPaymentMethod={activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
-            onBack={() => {
-              setOrderId(undefined);
-              setActivePanel(PanelView.CONFIRM_ORDER);
-              // Remove orderId from URL when canceling
-              const params = new URLSearchParams(searchParams.toString());
-              params.delete("orderId");
-              router.push(`${window.location.pathname}?${params.toString()}`);
-            }}
-          />
-        </>
+        <OrderDetails
+          mode={mode}
+          order={oat.data.order}
+          depositTxs={oat.data.depositTxs}
+          relayTxs={oat.data.relayTxs}
+          executeTx={oat.data.executeTx}
+          refundTxs={oat.data.refundTxs}
+          cryptoPaymentMethod={activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
+          selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+          onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+          onBack={() => {
+            setOrderId(undefined);
+            setActivePanel(PanelView.CONFIRM_ORDER);
+            // Remove orderId from URL when canceling
+            const params = new URLSearchParams(searchParams.toString());
+            params.delete("orderId");
+            router.push(`${window.location.pathname}?${params.toString()}`);
+          }}
+        />
       )}
       {mode === "page" && <div className="h-12" />}
     </div>
@@ -751,6 +763,23 @@ function AnySpendCustomInner({
     </div>
   );
 
+  // Render points badge if conditions are met
+  const renderPointsBadge = () => {
+    if (featureFlags.showPoints && anyspendQuote?.data?.pointsAmount && anyspendQuote.data.pointsAmount > 0) {
+      return (
+        <PointsBadge
+          pointsAmount={anyspendQuote.data.pointsAmount}
+          pointsMultiplier={anyspendQuote.data.pointsMultiplier}
+          onClick={() => {
+            onShowPointsDetail?.();
+            setActivePanel(PanelView.POINTS_DETAIL);
+          }}
+        />
+      );
+    }
+    return null;
+  };
+
   // Confirm order view.
   const confirmOrderView = (
     <div className={"relative mx-auto flex w-full flex-col items-center"}>
@@ -919,9 +948,12 @@ function AnySpendCustomInner({
                   transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
                   className="relative flex w-full items-center justify-between"
                 >
-                  <span className="text-as-tertiarry text-sm">
-                    Total <span className="text-as-tertiarry">(with fee)</span>
-                  </span>
+                  <div className="flex items-center gap-2">
+                    <span className="text-as-tertiarry text-sm">
+                      Total <span className="text-as-tertiarry">(with fee)</span>
+                    </span>
+                    {renderPointsBadge()}
+                  </div>
                   <span className="text-as-primary font-semibold">
                     {formattedSrcAmount || "--"} {srcToken.symbol}
                   </span>
@@ -1042,9 +1074,12 @@ function AnySpendCustomInner({
                 transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
                 className="relative flex w-full items-center justify-between"
               >
-                <span className="text-as-tertiarry text-sm">
-                  Total <span className="text-as-tertiarry">(USD)</span>
-                </span>
+                <div className="flex items-center gap-2">
+                  <span className="text-as-tertiarry text-sm">
+                    Total <span className="text-as-tertiarry">(USD)</span>
+                  </span>
+                  {renderPointsBadge()}
+                </div>
                 <span className="text-as-primary text-xl font-semibold">${srcFiatAmount || "0.00"}</span>
               </motion.div>
             </div>
@@ -1155,6 +1190,16 @@ function AnySpendCustomInner({
     </div>
   );
 
+  // Points detail view
+  const pointsDetailView = (
+    <div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
+      <PointsDetailPanel
+        pointsAmount={anyspendQuote?.data?.pointsAmount || 0}
+        onBack={() => setActivePanel(PanelView.CONFIRM_ORDER)}
+      />
+    </div>
+  );
+
   // Return the TransitionPanel with all views
   return (
     <StyleRoot>
@@ -1198,6 +1243,9 @@ function AnySpendCustomInner({
           <div key="fiat-payment-method-view" className="w-full">
             {fiatPaymentMethodView}
           </div>,
+          <div key="points-detail-view" className="w-full">
+            {pointsDetailView}
+          </div>,
         ]}
       </TransitionPanel>
     </StyleRoot>

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

@@ -36,12 +36,14 @@ export function AnySpendNFT({
   recipientAddress,
   nftContract,
   onSuccess,
+  onShowPointsDetail,
 }: {
   loadOrder?: string;
   mode?: "modal" | "page";
   recipientAddress?: string;
   nftContract: components["schemas"]["NftContract"];
   onSuccess?: (txHash?: string) => void;
+  onShowPointsDetail?: () => void;
 }) {
   const [imageUrlWithFallback, setFallbackImageUrl] = useState<string | null>(nftContract.imageUrl);
   const [isLoadingFallback, setIsLoadingFallback] = useState(false);
@@ -164,6 +166,7 @@ export function AnySpendNFT({
       }}
       header={header}
       onSuccess={onSuccess}
+      onShowPointsDetail={onShowPointsDetail}
     />
   );
 }

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

@@ -491,7 +491,6 @@ export function AnySpendStakeB3({
       contractAddress={ERC20Staking}
       encodedData={encodedData}
       metadata={{
-        type: "custom",
         action: "stake B3",
       }}
       header={header}

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

@@ -1,4 +1,5 @@
 import { B3_TOKEN } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Button, ShinyButton, StyleRoot, TransitionPanel } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import invariant from "invariant";
@@ -14,7 +15,7 @@ import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 import { ErrorSection } from "./common/ErrorSection";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
-import { OrderStatus } from "./common/OrderStatus";
+import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 
 import { ArrowDown } from "lucide-react";
@@ -36,6 +37,11 @@ export interface AnySpendDepositHypeProps {
   sourceTokenChainId?: number;
   onSuccess?: () => void;
   mainFooter?: React.ReactNode;
+  /**
+   * Called when a token is selected. Call event.preventDefault() to prevent default token selection behavior.
+   * Useful for handling special cases like B3 token selection.
+   */
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }
 
 export function AnySpendDepositHype(props: AnySpendDepositHypeProps) {
@@ -57,6 +63,7 @@ function AnySpendDepositHypeInner({
   sourceTokenChainId,
   onSuccess,
   mainFooter,
+  onTokenSelect,
 }: AnySpendDepositHypeProps) {
   // Use shared flow hook
   const {
@@ -202,6 +209,7 @@ function AnySpendDepositHypeInner({
               selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
               onSelectCryptoPaymentMethod={() => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD)}
               anyspendQuote={anyspendQuote}
+              onTokenSelect={onTokenSelect}
             />
           ) : (
             <motion.div
@@ -224,6 +232,8 @@ function AnySpendDepositHypeInner({
                 onDestinationChainChange={() => {}}
                 fiatPaymentMethodIndex={PanelView.FIAT_PAYMENT_METHOD}
                 recipientSelectionPanelIndex={PanelView.RECIPIENT_SELECTION}
+                anyspendQuote={anyspendQuote}
+                onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
               />
             </motion.div>
           )}
@@ -264,6 +274,7 @@ function AnySpendDepositHypeInner({
                 setSrcAmount(value);
               }}
               anyspendQuote={anyspendQuote}
+              onShowPointsDetail={() => setActivePanel(PanelView.POINTS_DETAIL)}
             />
           )}
         </div>
@@ -381,23 +392,22 @@ function AnySpendDepositHypeInner({
     <div className={"mx-auto w-[460px] max-w-full"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
-          <>
-            <OrderStatus order={oat.data.order} selectedCryptoPaymentMethod={selectedCryptoPaymentMethod} />
-            <OrderDetails
-              mode={mode}
-              order={oat.data.order}
-              depositTxs={oat.data.depositTxs}
-              relayTxs={oat.data.relayTxs}
-              executeTx={oat.data.executeTx}
-              refundTxs={oat.data.refundTxs}
-              cryptoPaymentMethod={paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
-              onBack={() => {
-                setOrderId(undefined);
-                setActivePanel(PanelView.MAIN);
-              }}
-              disableUrlParamManagement
-            />
-          </>
+          <OrderDetails
+            mode={mode}
+            order={oat.data.order}
+            depositTxs={oat.data.depositTxs}
+            relayTxs={oat.data.relayTxs}
+            executeTx={oat.data.executeTx}
+            refundTxs={oat.data.refundTxs}
+            cryptoPaymentMethod={paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
+            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+            onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+            onBack={() => {
+              setOrderId(undefined);
+              setActivePanel(PanelView.MAIN);
+            }}
+            disableUrlParamManagement
+          />
         )}
       </div>
     </div>
@@ -450,6 +460,13 @@ function AnySpendDepositHypeInner({
     />
   );
 
+  const pointsDetailView = (
+    <PointsDetailPanel
+      pointsAmount={anyspendQuote?.data?.pointsAmount || 0}
+      onBack={() => setActivePanel(PanelView.MAIN)}
+    />
+  );
+
   // If showing token selection, render with panel transitions
   return (
     <StyleRoot>
@@ -499,6 +516,9 @@ function AnySpendDepositHypeInner({
             <div key="loading-view" className={cn(mode === "page" && "p-6")}>
               {loadingView}
             </div>,
+            <div key="points-detail-view" className={cn(mode === "page" && "p-6")}>
+              {pointsDetailView}
+            </div>,
           ]}
         </TransitionPanel>
       </div>

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

@@ -141,10 +141,9 @@ export function AnyspendSignatureMint({
       dstChainId={signatureData.collection.chainId}
       dstToken={dstToken}
       dstAmount={price.toString()}
-      contractAddress={signatureData.collection.address!}
+      contractAddress={signatureData.collection.address || ""}
       encodedData={encodedData}
       metadata={{
-        type: "custom",
         action: "Signature Mint",
       }}
       header={header}

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

@@ -2,14 +2,14 @@
 
 import { RELAY_SOLANA_MAINNET_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-import { ShinyButton, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { ShinyButton, useAccountWallet, useProfile } from "@b3dotfun/sdk/global-account/react";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { motion } from "framer-motion";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { useAccount } from "wagmi";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
+import { PaymentMethodSwitch } from "./PaymentMethodSwitch";
 
 type Tournament = components["schemas"]["Tournament"];
 type NFT = components["schemas"]["NFT"];
@@ -24,6 +24,7 @@ interface ConnectWalletPaymentProps {
   tournament?: Tournament;
   nft?: NFT;
   cryptoPaymentMethod: CryptoPaymentMethodType;
+  onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
 }
 
 export default function ConnectWalletPayment({
@@ -35,10 +36,15 @@ export default function ConnectWalletPayment({
   tournament,
   nft,
   cryptoPaymentMethod,
+  onPaymentMethodChange,
 }: ConnectWalletPaymentProps) {
   const profile = useProfile({ address: order.recipientAddress });
   const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
-  const { address: connectedAddress } = useAccount();
+  const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
+  const connectedEvmAddress =
+    cryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+      ? connectedSmartWallet?.getAccount()?.address
+      : connectedEOAWallet?.getAccount()?.address;
 
   const srcToken = order.metadata.srcToken;
   const dstToken = order.metadata.dstToken;
@@ -94,9 +100,11 @@ export default function ConnectWalletPayment({
           Connected to:{" "}
           {order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
             ? centerTruncate(phantomWalletAddress, 6)
-            : centerTruncate(connectedAddress || "")}
+            : centerTruncate(connectedEvmAddress || "")}
         </span>
 
+        <PaymentMethodSwitch currentMethod={cryptoPaymentMethod} onMethodChange={onPaymentMethodChange} />
+
         <div className="mt-4">
           <OrderDetailsCollapsible
             order={order}

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

@@ -5,7 +5,6 @@ import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronRight } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef } from "react";
-import { useAccount } from "wagmi";
 import { components } from "../../../types/api";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderTokenAmount } from "./OrderTokenAmount";
@@ -25,6 +24,8 @@ interface CryptoPaySectionProps {
   onSelectCryptoPaymentMethod: () => void;
   // Quote data
   anyspendQuote?: any;
+  // Token selection callback
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }
 
 export function CryptoPaySection({
@@ -38,16 +39,19 @@ export function CryptoPaySection({
   selectedCryptoPaymentMethod,
   onSelectCryptoPaymentMethod,
   anyspendQuote,
+  onTokenSelect,
 }: CryptoPaySectionProps) {
-  const { address: connectedAddress, isConnected } = useAccount();
-  const { data: profileData } = useProfile({ address: connectedAddress });
-  const connectedName = profileData?.displayName;
-  const { address: globalAddress } = useAccountWallet();
+  const { connectedSmartWallet, connectedEOAWallet } = useAccountWallet();
   const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
 
   // Determine which address to use based on payment method
   const walletAddress =
-    selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET ? globalAddress : connectedAddress;
+    selectedCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
+      ? connectedSmartWallet?.getAccount()?.address
+      : connectedEOAWallet?.getAccount()?.address;
+
+  const { data: profileData } = useProfile({ address: walletAddress });
+  const connectedName = profileData?.displayName;
 
   // Add ref to track if we've applied metadata
   const appliedSrcMetadataRef = useRef(false);
@@ -92,9 +96,9 @@ export function CryptoPaySection({
         >
           {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
             <>
-              {isConnected ? (
+              {walletAddress ? (
                 <div className="flex items-center gap-1">
-                  {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
+                  {connectedName ? formatUsername(connectedName) : shortenAddress(walletAddress || "")}
                 </div>
               ) : (
                 "Connect wallet"
@@ -131,6 +135,7 @@ export function CryptoPaySection({
         setChainId={setSelectedSrcChainId}
         token={selectedSrcToken}
         setToken={setSelectedSrcToken}
+        onTokenSelect={onTokenSelect}
       />
       <div className="flex items-center justify-between">
         <div className="text-as-primary/50 flex h-5 items-center text-sm">