@b3dotfun/sdk 0.0.7-alpha.2 → 0.0.7-alpha.21

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

@@ -1,17 +1,14 @@
 import { ABI_ERC20_STAKING, B3_TOKEN, OrderType } from "@b3dotfun/sdk/anyspend";
-import { EthIcon } from "./icons/EthIcon";
-import { SolIcon } from "./icons/SolIcon";
-import { UsdcIcon } from "./icons/USDCIcon";
 import {
   Button,
   GlareCardRounded,
   Input,
+  StyleRoot,
   TextLoop,
+  useChainSwitchWithAction,
   useHasMounted,
   useModalStore,
-  useChainSwitchWithAction,
   useTokenBalance,
-  StyleRoot
 } from "@b3dotfun/sdk/global-account/react";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { motion } from "framer-motion";
@@ -23,10 +20,13 @@ import { createPublicClient, encodeFunctionData, erc20Abi, http } from "viem";
 import { base } from "viem/chains";
 import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
 import { AnySpendCustom } from "./AnySpendCustom";
+import { EthIcon } from "./icons/EthIcon";
+import { SolIcon } from "./icons/SolIcon";
+import { UsdcIcon } from "./icons/USDCIcon";
 
 const basePublicClient = createPublicClient({
   chain: base,
-  transport: http()
+  transport: http(),
 });
 
 const ERC20Staking = "0xbf04200be3cbf371467a539706393c81c470f523";
@@ -36,7 +36,7 @@ function generateEncodedDataForStakingB3(amount: string, beneficiary: string): s
   const encodedData = encodeFunctionData({
     abi: ABI_ERC20_STAKING,
     functionName: "stake",
-    args: [BigInt(amount), beneficiary]
+    args: [BigInt(amount), beneficiary],
   });
   return encodedData;
 }
@@ -47,7 +47,7 @@ export function AnySpendStakeB3({
   mode = "modal",
   recipientAddress,
   stakeAmount,
-  onSuccess
+  onSuccess,
 }: {
   isMainnet?: boolean;
   loadOrder?: string;
@@ -63,9 +63,9 @@ export function AnySpendStakeB3({
   const {
     formattedBalance: b3Balance,
     isLoading: isBalanceLoading,
-    rawBalance: b3RawBalance
+    rawBalance: b3RawBalance,
   } = useTokenBalance({
-    token: B3_TOKEN
+    token: B3_TOKEN,
   });
 
   // Wagmi hooks for direct staking
@@ -82,8 +82,8 @@ export function AnySpendStakeB3({
   const { isLoading: isTxPending, isSuccess: isTxSuccess } = useWaitForTransactionReceipt({
     hash: stakingTxHash as `0x${string}`,
     query: {
-      structuralSharing: false // Disable to avoid BigInt serialization issues
-    }
+      structuralSharing: false, // Disable to avoid BigInt serialization issues
+    },
   });
 
   // Show success modal when transaction is confirmed
@@ -197,7 +197,7 @@ export function AnySpendStakeB3({
           address: B3_TOKEN.address as `0x${string}`,
           abi: erc20Abi,
           functionName: "allowance",
-          args: [address, ERC20Staking as `0x${string}`]
+          args: [address, ERC20Staking as `0x${string}`],
         });
 
         // If allowance is insufficient, request approval
@@ -208,7 +208,7 @@ export function AnySpendStakeB3({
             address: B3_TOKEN.address as `0x${string}`,
             abi: erc20Abi,
             functionName: "approve",
-            args: [ERC20Staking as `0x${string}`, BigInt(userStakeAmount)]
+            args: [ERC20Staking as `0x${string}`, BigInt(userStakeAmount)],
           });
 
           toast.info("Approval confirmed. Proceeding with stake...");
@@ -220,7 +220,7 @@ export function AnySpendStakeB3({
           address: ERC20Staking as `0x${string}`,
           abi: ABI_ERC20_STAKING,
           functionName: "stake",
-          args: [BigInt(userStakeAmount), recipientAddress as `0x${string}`]
+          args: [BigInt(userStakeAmount), recipientAddress as `0x${string}`],
         });
 
         setStakingTxHash(stakeHash);
@@ -285,7 +285,7 @@ export function AnySpendStakeB3({
               animate={{
                 opacity: hasMounted ? 1 : 0,
                 y: hasMounted ? 0 : 20,
-                filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                filter: hasMounted ? "blur(0px)" : "blur(10px)",
               }}
               transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
               className="relative mx-auto size-48"
@@ -297,7 +297,7 @@ export function AnySpendStakeB3({
               animate={{
                 opacity: hasMounted ? 1 : 0,
                 y: hasMounted ? 0 : 20,
-                filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                filter: hasMounted ? "blur(0px)" : "blur(10px)",
               }}
               transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
             >
@@ -315,7 +315,7 @@ export function AnySpendStakeB3({
             animate={{
               opacity: hasMounted ? 1 : 0,
               y: hasMounted ? 0 : 20,
-              filter: hasMounted ? "blur(0px)" : "blur(10px)"
+              filter: hasMounted ? "blur(0px)" : "blur(10px)",
             }}
             transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
             className="bg-b3-react-background w-full p-6"
@@ -397,7 +397,7 @@ export function AnySpendStakeB3({
               animate={{
                 opacity: hasMounted ? 1 : 0,
                 y: hasMounted ? 0 : 20,
-                filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                filter: hasMounted ? "blur(0px)" : "blur(10px)",
               }}
               transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
               className="relative mx-auto mb-4 size-[120px]"
@@ -422,7 +422,7 @@ export function AnySpendStakeB3({
               animate={{
                 opacity: hasMounted ? 1 : 0,
                 y: hasMounted ? 0 : 20,
-                filter: hasMounted ? "blur(0px)" : "blur(10px)"
+                filter: hasMounted ? "blur(0px)" : "blur(10px)",
               }}
               transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
             >
@@ -437,7 +437,7 @@ export function AnySpendStakeB3({
             animate={{
               opacity: hasMounted ? 1 : 0,
               y: hasMounted ? 0 : 20,
-              filter: hasMounted ? "blur(0px)" : "blur(10px)"
+              filter: hasMounted ? "blur(0px)" : "blur(10px)",
             }}
             transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
             className="bg-b3-react-background w-full p-6"
@@ -483,7 +483,8 @@ export function AnySpendStakeB3({
       contractAddress={ERC20Staking}
       encodedData={encodedData}
       metadata={{
-        action: "stake B3"
+        type: OrderType.Custom,
+        action: "stake B3",
       }}
       header={header}
       onSuccess={onSuccess}

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

@@ -40,7 +40,7 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
     tournamentChainId,
     tournamentContractAddress,
     tournamentMetadata,
-    onSuccess
+    onSuccess,
   } = props;
 
   const dstToken = action === "join" ? props.tournamentEntryToken : props.tournamentFundToken;
@@ -48,7 +48,7 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
 
   const header = ({
     anyspendPrice,
-    isLoadingAnyspendPrice
+    isLoadingAnyspendPrice,
   }: {
     anyspendPrice: GetQuoteResponse | undefined;
     isLoadingAnyspendPrice: boolean;
@@ -72,7 +72,7 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
               <AnimatePresence mode="wait">
                 <div
                   className={cn("text-as-primary group flex items-center text-2xl font-semibold transition-all", {
-                    "opacity-0": isLoadingAnyspendPrice
+                    "opacity-0": isLoadingAnyspendPrice,
                   })}
                 >
                   {formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" })} (
@@ -100,7 +100,10 @@ export function AnySpendTournament(props: AnySpendTournamentProps) {
       dstAmount={dstAmount}
       contractAddress={tournamentContractAddress}
       encodedData="0x"
-      metadata={{ tournament: tournamentMetadata }}
+      metadata={{
+        type: action === "join" ? OrderType.JoinTournament : OrderType.FundTournament,
+        tournament: tournamentMetadata,
+      }}
       header={header}
       onSuccess={onSuccess}
       showRecipient={action === "join"}

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

@@ -0,0 +1,147 @@
+import { OrderType } from "@b3dotfun/sdk/anyspend";
+import { StyleRoot, useHasMounted, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import invariant from "@b3dotfun/sdk/shared/utils/debug";
+import { useMemo } from "react";
+import { encodeFunctionData, parseEther } from "viem";
+import { ABI_SIGNATURE_MINTING } from "../../abis/signature-minting";
+import { GenerateSigMintResponse } from "../../types/signature-mint";
+import { AnySpendCustom } from "./AnySpendCustom";
+
+// Helper function to determine if URL is a video
+function isVideoURL(url: string): boolean {
+  const videoExtensions = [".mp4", ".webm", ".ogg"];
+  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
+}
+
+function generateEncodedDataForSignatureMint(signatureData: GenerateSigMintResponse): string {
+  const { signature, payload } = signatureData;
+  invariant(signature, "Signature is required");
+  invariant(payload, "Payload is required");
+
+  const mintRequest = {
+    to: payload.to,
+    royaltyRecipient: payload.royaltyRecipient,
+    royaltyBps: BigInt(payload.royaltyBps || 0),
+    primarySaleRecipient: payload.primarySaleRecipient,
+    tokenId: BigInt(payload.tokenId || 0),
+    uri: payload.uri,
+    quantity: BigInt(payload.quantity || 1),
+    pricePerToken: parseEther(payload.price?.toString() || "0"),
+    currency: payload.currencyAddress,
+    validityStartTimestamp: BigInt(payload.mintStartTime || 0),
+    validityEndTimestamp: BigInt(payload.mintEndTime || 0),
+    uid: payload.uid as `0x${string}`,
+  };
+
+  const encodedData = encodeFunctionData({
+    abi: [ABI_SIGNATURE_MINTING[0]],
+    functionName: "mintWithSignature",
+    args: [mintRequest, signature as `0x${string}`],
+  });
+
+  return encodedData;
+}
+
+export function AnyspendSignatureMint({
+  loadOrder,
+  mode = "modal",
+  signatureData,
+  imageUrl,
+  onSuccess,
+}: {
+  loadOrder?: string;
+  mode?: "modal" | "page";
+  signatureData: GenerateSigMintResponse;
+  imageUrl?: string;
+  onSuccess?: () => void;
+}) {
+  const hasMounted = useHasMounted();
+
+  // Get token data
+  const { data: tokenData, isError: isTokenError } = useTokenData(
+    signatureData.collection.chainId,
+    signatureData.collection.signatureRequestBody?.currency,
+  );
+
+  // Convert token data to AnySpend Token type
+  const dstToken = useMemo(() => {
+    if (!tokenData) return null;
+
+    return {
+      address: tokenData.address,
+      chainId: signatureData.collection.chainId,
+      name: tokenData.name,
+      symbol: tokenData.symbol,
+      decimals: tokenData.decimals,
+      metadata: {
+        logoURI: tokenData.logoURI,
+      },
+    };
+  }, [tokenData, signatureData.collection.chainId]);
+
+  const mediaUrl = imageUrl || signatureData.payload.metadata.image || "https://cdn.b3.fun/nft-placeholder.png";
+  const isVideo = isVideoURL(mediaUrl);
+
+  const header = () => (
+    <>
+      <div className="relative mx-auto size-32">
+        {isVideo ? (
+          <video autoPlay loop muted playsInline className="size-full rounded-lg object-cover">
+            <source src={mediaUrl} type={`video/${mediaUrl.split(".").pop()}`} />
+            Your browser does not support the video tag.
+          </video>
+        ) : (
+          <img alt="nft preview" className="size-full rounded-lg object-cover" src={mediaUrl} />
+        )}
+      </div>
+      <div className="from-b3-react-background to-as-on-surface-1 mt-[-60px] w-full rounded-t-lg bg-gradient-to-t">
+        <div className="h-[60px] w-full" />
+        <div className="mb-1 flex w-full flex-col items-center gap-2 p-5">
+          <span className="font-sf-rounded text-2xl font-semibold">
+            {signatureData.payload.metadata.name || "Mint NFT"}{" "}
+            {Number(signatureData.payload.quantity) > 1 ? `(${signatureData.payload.quantity}x)` : ""}
+          </span>
+        </div>
+      </div>
+    </>
+  );
+
+  // If we don't have token data, show error state
+  if (!dstToken || isTokenError) {
+    return (
+      <StyleRoot>
+        <div className="b3-root b3-modal bg-b3-react-background flex w-full flex-col items-center p-8">
+          <p className="text-as-red text-center text-sm">
+            Failed to fetch payment token information for {signatureData.collection.signatureRequestBody?.currency} on
+            chain {signatureData.collection.chainId}. Please try again.
+          </p>
+        </div>
+      </StyleRoot>
+    );
+  }
+
+  const encodedData = generateEncodedDataForSignatureMint(signatureData);
+  const price = parseEther(signatureData.payload.price?.toString() || "0");
+
+  return (
+    <AnySpendCustom
+      isMainnet={true}
+      loadOrder={loadOrder}
+      mode={mode}
+      recipientAddress={signatureData.payload.to}
+      orderType={OrderType.Custom}
+      dstChainId={signatureData.collection.chainId}
+      dstToken={dstToken}
+      dstAmount={price.toString()}
+      contractAddress={signatureData.collection.address!}
+      encodedData={encodedData}
+      metadata={{
+        type: OrderType.Custom,
+        action: "Signature Mint",
+      }}
+      header={header}
+      onSuccess={onSuccess}
+      showRecipient={true}
+    />
+  );
+}

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

@@ -1,7 +1,7 @@
 export function ChainTokenIcon({
   chainUrl,
   tokenUrl,
-  className = ""
+  className = "",
 }: {
   chainUrl: string;
   tokenUrl: string;

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

@@ -12,6 +12,7 @@ import {
   getPaymentUrl,
   getStatusDisplay,
   isNativeToken,
+  OnrampVendor,
   Order,
   OrderStatus,
   OrderType,
@@ -20,21 +21,22 @@ import {
   RelayTransaction,
   zNft,
   zToken,
-  zTournament
+  zTournament,
 } from "@b3dotfun/sdk/anyspend";
 import {
-  CopyToClipboard,
   Badge,
+  Button,
+  CopyToClipboard,
   ShinyButton,
   Skeleton,
   TextLoop,
   TextShimmer,
-  Button,
   useAccountWallet,
   useChainSwitchWithAction,
+  useModalStore,
   useOnchainName,
-  useModalStore
 } from "@b3dotfun/sdk/global-account/react";
+import { useRouter, useSearchParams } from "@b3dotfun/sdk/shared/react/hooks";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
@@ -50,9 +52,8 @@ import {
   Home,
   Loader2,
   RefreshCcw,
-  SquareArrowOutUpRight
+  SquareArrowOutUpRight,
 } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
 import { QRCodeSVG } from "qrcode.react";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import TimeAgo from "react-timeago";
@@ -81,7 +82,7 @@ function getOrderSuccessText({
   formattedActualDstAmount,
   dstToken,
   recipientName,
-  centerTruncate
+  centerTruncate,
 }: {
   order: Order;
   tournament?: any;
@@ -207,7 +208,7 @@ export const OrderDetails = memo(function OrderDetails({
   relayTx,
   executeTx,
   refundTxs,
-  onBack
+  onBack,
 }: OrderDetailsProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -308,7 +309,7 @@ export const OrderDetails = memo(function OrderDetails({
           account: signer,
           chain: EVM_CHAINS[order.srcChain].viem,
           to: order.globalAddress as `0x${string}`,
-          value: BigInt(order.srcAmount)
+          value: BigInt(order.srcAmount),
         });
         setTxHash(hash);
       } else {
@@ -318,12 +319,12 @@ export const OrderDetails = memo(function OrderDetails({
           address: order.srcTokenAddress as `0x${string}`,
           abi: erc20Abi,
           functionName: "transfer",
-          args: [order.globalAddress as Address, BigInt(order.srcAmount)]
+          args: [order.globalAddress as Address, BigInt(order.srcAmount)],
         });
         setTxHash(hash);
       }
     },
-    [order]
+    [order],
   );
 
   // Main payment handler that triggers chain switch and payment
@@ -334,11 +335,34 @@ export const OrderDetails = memo(function OrderDetails({
 
   // When waitingForDeposit is true, we show a message to the user to wait for the deposit to be processed.
   const setWaitingForDeposit = useCallback(() => {
-    const params = new URLSearchParams(searchParams);
+    const params = new URLSearchParams(searchParams.toString());
     params.set("waitingForDeposit", "true");
     router.push(`?${params}`);
   }, [router, searchParams]);
 
+  // Clean up URL parameters before closing modal or navigating back
+  const cleanupUrlParams = useCallback(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.delete("waitingForDeposit");
+    params.delete("orderId");
+
+    // Only update URL if params were actually removed
+    if (params.toString() !== searchParams.toString()) {
+      router.push(`?${params}`);
+    }
+  }, [router, searchParams]);
+
+  // Helper functions that clean up URL params before executing actions
+  const handleCloseModal = useCallback(() => {
+    cleanupUrlParams();
+    setB3ModalOpen(false);
+  }, [cleanupUrlParams, setB3ModalOpen]);
+
+  const handleBack = useCallback(() => {
+    cleanupUrlParams();
+    onBack?.();
+  }, [cleanupUrlParams, onBack]);
+
   useEffect(() => {
     if (txSuccess) {
       toast.success("Transaction successful! We are processing your order.", { duration: 10000 });
@@ -413,7 +437,11 @@ export const OrderDetails = memo(function OrderDetails({
             ? depositTxs.map(dTx => (
                 <TransactionDetails
                   key={dTx.txHash}
-                  title={`Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`}
+                  title={
+                    order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                      ? `Received payment`
+                      : `Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`
+                  }
                   chainId={order.srcChain}
                   tx={dTx}
                   isProcessing={false}
@@ -441,7 +469,7 @@ export const OrderDetails = memo(function OrderDetails({
         )}
         <button
           className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
-          onClick={mode === "page" ? onBack : () => setB3ModalOpen(false)}
+          onClick={mode === "page" ? handleBack : handleCloseModal}
         >
           {mode === "page" ? (
             <>
@@ -471,7 +499,11 @@ export const OrderDetails = memo(function OrderDetails({
             ? depositTxs.map(dTxs => (
                 <TransactionDetails
                   key={dTxs.txHash}
-                  title={`Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`}
+                  title={
+                    order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                      ? `Received payment`
+                      : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`
+                  }
                   chainId={order.srcChain}
                   tx={dTxs}
                   isProcessing={false}
@@ -517,7 +549,7 @@ export const OrderDetails = memo(function OrderDetails({
                 formattedActualDstAmount: formattedActualDstAmount,
                 dstToken,
                 recipientName,
-                centerTruncate
+                centerTruncate,
               })}
               <ExternalLink className="ml-2 h-4 w-4" />
             </a>
@@ -530,7 +562,7 @@ export const OrderDetails = memo(function OrderDetails({
             textColor="text-white"
             className="flex w-full items-center gap-2"
             disabled={txLoading || isSwitchingOrExecuting}
-            onClick={() => setB3ModalOpen(false)}
+            onClick={handleCloseModal}
           >
             <span className="pl-4">Continue to Tournament</span>
             <ChevronRight className="h-4 w-4" />
@@ -540,7 +572,7 @@ export const OrderDetails = memo(function OrderDetails({
         {order.status === OrderStatus.Executed && (
           <button
             className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
-            onClick={mode === "page" ? onBack : () => setB3ModalOpen(false)}
+            onClick={mode === "page" ? handleBack : handleCloseModal}
           >
             {mode === "page" ? (
               <>
@@ -571,7 +603,11 @@ export const OrderDetails = memo(function OrderDetails({
             ? depositTxs.map(dTxs => (
                 <TransactionDetails
                   key={dTxs.txHash}
-                  title={`Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`}
+                  title={
+                    order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                      ? `Received payment`
+                      : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`
+                  }
                   chainId={order.srcChain}
                   tx={dTxs}
                   isProcessing={false}
@@ -641,7 +677,7 @@ export const OrderDetails = memo(function OrderDetails({
                 formattedActualDstAmount,
                 dstToken,
                 recipientName,
-                centerTruncate
+                centerTruncate,
               })}
               <ExternalLink className="ml-2 h-4 w-4" />
             </a>
@@ -654,7 +690,7 @@ export const OrderDetails = memo(function OrderDetails({
             textColor="text-white"
             className="flex w-full items-center gap-2"
             disabled={txLoading || isSwitchingOrExecuting}
-            onClick={() => setB3ModalOpen(false)}
+            onClick={handleCloseModal}
           >
             <span className="pl-4">Continue to Tournament</span>
             <ChevronRight className="h-4 w-4" />
@@ -664,7 +700,7 @@ export const OrderDetails = memo(function OrderDetails({
         {order.status === OrderStatus.Executed && (
           <button
             className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
-            onClick={mode === "page" ? onBack : () => setB3ModalOpen(false)}
+            onClick={mode === "page" ? handleBack : handleCloseModal}
           >
             {mode === "page" ? (
               <>
@@ -696,7 +732,11 @@ export const OrderDetails = memo(function OrderDetails({
           {(depositTxs || []).map((dTxs, index) => (
             <TransactionDetails
               key={dTxs.txHash}
-              title={`Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`}
+              title={
+                order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                  ? `Received payment`
+                  : `Received ${formatTokenAmount(BigInt(dTxs.amount), srcToken.decimals)} ${srcToken.symbol}`
+              }
               chainId={order.srcChain}
               tx={dTxs}
               isProcessing={index < (depositTxs || []).length - 1 ? false : !depositEnoughAmount}
@@ -730,7 +770,11 @@ export const OrderDetails = memo(function OrderDetails({
             />
           ) : (
             <TransactionDetails
-              title={`Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`}
+              title={
+                order.onrampMetadata?.vendor === OnrampVendor.StripeWeb2
+                  ? `Waiting for payment`
+                  : `Waiting for deposit ${formattedDepositDeficit} ${srcToken.symbol}`
+              }
               chainId={order.srcChain}
               tx={null}
               isProcessing={true}
@@ -863,9 +907,9 @@ export const OrderDetails = memo(function OrderDetails({
                       value={getPaymentUrl(
                         order.globalAddress,
                         BigInt(order.srcAmount),
-                        order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress
+                        order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress,
                       )}
-                      size={200}
+                      className="max-w-[200px]"
                     />
                     <div className="mt-3 flex items-center justify-center gap-2 text-sm">
                       <span className="label-style text-as-brand/70 text-sm">Scan with</span>
@@ -932,7 +976,7 @@ export const OrderDetails = memo(function OrderDetails({
                       .share({
                         title: "Complete Deposit",
                         text: "Complete your deposit on BSMNT.fun",
-                        url: permalink
+                        url: permalink,
                       })
                       .catch(error => console.log("Error sharing:", error));
                   } else {
@@ -1006,7 +1050,7 @@ export const OrderDetails = memo(function OrderDetails({
                     className={cn(
                       "h-3",
                       order.dstChain !== b3.id && "w-3 rounded-full",
-                      order.dstChain === b3.id && "h-4"
+                      order.dstChain === b3.id && "h-4",
                     )}
                   />
                 </div>
@@ -1054,7 +1098,7 @@ export const OrderDetails = memo(function OrderDetails({
 
       <button
         className="bg-as-on-surface-2 text-as-secondary flex w-full items-center justify-center gap-2 rounded-lg p-2"
-        onClick={onBack}
+        onClick={handleBack}
       >
         Cancel and start over <RefreshCcw className="ml-2 h-4 w-4" />
       </button>
@@ -1069,7 +1113,7 @@ function TransactionDetails({
   chainId,
   tx,
   isProcessing,
-  delay
+  delay,
 }: {
   title: string;
   chainId: number;
@@ -1097,7 +1141,7 @@ function TransactionDetails({
               transition={{ duration: 0.5, ease: "easeOut", delay }}
               className="bg-as-brand/70 absolute z-10 m-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/30 shadow-lg shadow-purple-500/30 backdrop-blur-sm"
               style={{
-                boxShadow: "0 0 15px 5px rgba(138, 43, 226, 0.2)"
+                boxShadow: "0 0 15px 5px rgba(138, 43, 226, 0.2)",
               }}
             >
               <CheckIcon className="text-as-primary h-3 w-3" />

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

@@ -43,7 +43,7 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
       key={`anyspend-${order.id}`}
       className={cn(
         "bg-as-light-brand/20 rounded-lg border p-4",
-        onSelectOrder && "hover:bg-as-light-brand/30 hover:border-as-brand cursor-pointer transition-colors"
+        onSelectOrder && "hover:bg-as-light-brand/30 hover:border-as-brand cursor-pointer transition-colors",
       )}
       onClick={() => onSelectOrder?.(order.id)}
     >
@@ -53,7 +53,7 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
             "px-3 py-1 text-xs",
             orderDisplayStatus === "processing" && "bg-yellow-500/10 text-yellow-500",
             orderDisplayStatus === "success" && "bg-green-500/10 text-green-500",
-            orderDisplayStatus === "failure" && "bg-red-500/10 text-red-500"
+            orderDisplayStatus === "failure" && "bg-red-500/10 text-red-500",
           )}
         >
           {orderStatusText}
@@ -160,7 +160,7 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
                         : expectedDstAmount
                           ? BigInt(expectedDstAmount)
                           : BigInt(0),
-                      dstToken.decimals
+                      dstToken.decimals,
                     )}{" "}
                     {dstToken.symbol}
                   </div>