@b3dotfun/sdk 0.0.33 → 0.0.34-alpha.1

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

@@ -0,0 +1,144 @@
+"use client";
+
+import {
+  ALL_CHAINS,
+  getChainName,
+  getPaymentUrl,
+  RELAY_ETH_ADDRESS,
+  RELAY_SOLANA_MAINNET_CHAIN_ID,
+} from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { Badge, CopyToClipboard, ShinyButton, TextLoop } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils";
+import { b3 } from "viem/chains";
+
+import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
+import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust } from "@web3icons/react";
+import { ChevronRight, Copy, Loader2 } from "lucide-react";
+import { motion } from "motion/react";
+import { QRCodeSVG } from "qrcode.react";
+import { toast } from "sonner";
+
+interface InsufficientDepositPaymentProps {
+  order: components["schemas"]["Order"];
+  srcToken: components["schemas"]["Token"];
+  depositDeficit: bigint;
+  phantomWalletAddress: string | null;
+  txLoading: boolean;
+  isSwitchingOrExecuting: boolean;
+  onPayment: () => Promise<void>;
+}
+
+export function InsufficientDepositPayment({
+  order,
+  srcToken,
+  depositDeficit,
+  phantomWalletAddress,
+  txLoading,
+  isSwitchingOrExecuting,
+  onPayment,
+}: InsufficientDepositPaymentProps) {
+  const depositDeficitAmount = formatUnits(depositDeficit.toString(), srcToken.decimals);
+  return (
+    <div className="insufficient-deposit-payment relative flex w-full flex-1 flex-col">
+      <div className="flex flex-col gap-1">
+        <span className="insufficient-deposit-payment-text text-as-primary/50">Please send remaining</span>
+        <div className="flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0">
+          <CopyToClipboard
+            text={depositDeficitAmount}
+            onCopy={() => {
+              toast.success("Copied to clipboard");
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <strong className="border-as-brand text-as-primary border-b-2 pb-1 text-2xl font-semibold sm:text-xl">
+                {depositDeficitAmount} {srcToken.symbol}
+              </strong>
+              <Copy className="text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" />
+            </div>
+          </CopyToClipboard>
+
+          <Badge variant="outline" className="flex h-10 items-center gap-2 px-3 py-1 pr-2 text-sm">
+            on {getChainName(order.srcChain)}
+            <img
+              src={ALL_CHAINS[order.srcChain].logoUrl}
+              alt={getChainName(order.srcChain)}
+              className={cn("h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none")}
+            />
+          </Badge>
+        </div>
+        <span className={"text-as-primary/50 mb-1 mt-2"}> to the address:</span>
+      </div>
+      <CopyToClipboard
+        text={order.globalAddress}
+        onCopy={() => {
+          toast.success("Copied to clipboard");
+        }}
+      >
+        <div className="payment-address bg-b3-react-background border-b3-react-border hover:border-as-brand group flex cursor-pointer items-center justify-between gap-4 rounded-lg border p-3 px-4 shadow-md transition-all duration-200">
+          <div className="text-as-primary overflow-hidden text-ellipsis whitespace-nowrap text-sm">
+            {order.globalAddress}
+          </div>
+          <Copy className="group-hover:text-as-brand text-as-primary/50 h-5 w-5 cursor-pointer transition-all duration-200" />
+        </div>
+      </CopyToClipboard>
+
+      <div className="payment-buttons mt-4 flex w-full flex-col items-center gap-2">
+        <ShinyButton
+          accentColor={"hsl(var(--as-brand))"}
+          textColor="text-white"
+          className="flex w-5/6 max-w-[400px] items-center gap-2 sm:px-0"
+          disabled={txLoading || isSwitchingOrExecuting}
+          onClick={onPayment}
+        >
+          {txLoading ? (
+            <>
+              Transaction Pending
+              <Loader2 className="ml-2 h-5 w-5 animate-spin" />
+            </>
+          ) : (
+            <>
+              <span className="whitespace-nowrap pl-4 text-lg md:text-sm">
+                {order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID && phantomWalletAddress
+                  ? "Pay from Phantom Wallet"
+                  : "Pay from Connected Wallet"}
+              </span>
+              <ChevronRight className="h-4 w-4" />
+            </>
+          )}
+        </ShinyButton>
+
+        <div>Or</div>
+
+        <motion.div
+          initial={{ opacity: 0, filter: "blur(10px)" }}
+          animate={{ opacity: 1, filter: "blur(0px)" }}
+          transition={{ duration: 0.5, ease: "easeInOut" }}
+          className="flex w-full items-center justify-evenly gap-4"
+        >
+          <div className="qr-code flex flex-col items-center rounded-lg pb-3">
+            <QRCodeSVG
+              value={getPaymentUrl(
+                order.globalAddress,
+                BigInt(depositDeficit),
+                order.srcTokenAddress === RELAY_ETH_ADDRESS ? srcToken?.symbol || "ETH" : order.srcTokenAddress,
+                order.srcChain,
+                srcToken?.decimals,
+              )}
+              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>
+              <TextLoop interval={3}>
+                <WalletMetamask className="h-5 w-5" variant="branded" />
+                <WalletCoinbase className="h-5 w-5" variant="branded" />
+                <WalletPhantom className="h-5 w-5" variant="branded" />
+                <WalletTrust className="h-5 w-5" variant="branded" />
+              </TextLoop>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

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

@@ -22,6 +22,7 @@ import {
   TextLoop,
   TextShimmer,
   useAccountWallet,
+  useB3,
   useModalStore,
   useProfile,
   useUnifiedChainSwitchAndExecute,
@@ -30,7 +31,7 @@ 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";
-import { useColorMode } from "@chakra-ui/react";
+
 import {
   createAssociatedTokenAccountInstruction,
   createTransferCheckedInstruction,
@@ -50,6 +51,7 @@ import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";
 import ConnectWalletPayment from "./ConnectWalletPayment";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import { InsufficientDepositPayment } from "./InsufficientDepositPayment";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
 import PaymentVendorUI from "./PaymentVendorUI";
 import { TransferCryptoDetails } from "./TransferCryptoDetails";
@@ -57,10 +59,10 @@ import { TransferCryptoDetails } from "./TransferCryptoDetails";
 interface OrderDetailsProps {
   mode?: "modal" | "page";
   order: components["schemas"]["Order"];
-  depositTxs: components["schemas"]["DepositTx"][] | null;
-  relayTx: components["schemas"]["RelayTx"] | null;
+  depositTxs: components["schemas"]["DepositTx"][];
+  relayTxs: components["schemas"]["RelayTx"][];
   executeTx: components["schemas"]["ExecuteTx"] | null;
-  refundTxs: components["schemas"]["RefundTx"][] | null;
+  refundTxs: components["schemas"]["RefundTx"][];
   cryptoPaymentMethod?: CryptoPaymentMethodType; // Now optional since we read from URL
   onBack?: () => void;
   disableUrlParamManagement?: boolean; // When true, will not modify URL parameters
@@ -104,6 +106,9 @@ function getOrderSuccessText({
       }
       actionText = order.metadata.action || `executed contract`;
       return `Successfully ${actionText}`;
+    case "hype_duel":
+      actionText = `deposited ${formattedActualDstAmount || "--"} HYPE`;
+      return `Successfully ${actionText} to ${recipient}`;
     default:
       throw new Error("Invalid order type");
   }
@@ -198,7 +203,7 @@ export const OrderDetails = memo(function OrderDetails({
   mode = "modal",
   order,
   depositTxs,
-  relayTx,
+  relayTxs,
   executeTx,
   refundTxs,
   cryptoPaymentMethod,
@@ -208,6 +213,10 @@ export const OrderDetails = memo(function OrderDetails({
   const router = useRouter();
   const searchParams = useSearchParams();
 
+  // Get theme from B3Provider context
+  const { theme } = useB3();
+  const colorMode = theme || "light";
+
   // Read crypto payment method from URL parameters
   const cryptoPaymentMethodFromUrl = searchParams.get("cryptoPaymentMethod") as CryptoPaymentMethodType | null;
   const effectiveCryptoPaymentMethod =
@@ -233,8 +242,6 @@ export const OrderDetails = memo(function OrderDetails({
 
   const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
 
-  const { colorMode } = useColorMode();
-
   const roundedUpSrcAmount = useMemo(() => {
     // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
     // Use 21 significant digits (max allowed by Intl.NumberFormat)
@@ -245,22 +252,42 @@ export const OrderDetails = memo(function OrderDetails({
     return roundTokenAmount(formattedSrcAmount);
   }, [order.srcAmount, srcToken]);
 
+  // Calculate deposit amounts - moved here to be used in useCallback hooks
+  const depositedAmount = useMemo(() => {
+    return depositTxs ? depositTxs.reduce((acc, curr) => acc + BigInt(curr.amount), BigInt(0)) : BigInt(0);
+  }, [depositTxs]);
+
+  const depositDeficit = useMemo(() => {
+    return BigInt(order.srcAmount) - depositedAmount;
+  }, [order.srcAmount, depositedAmount]);
+
+  const depositEnoughAmount = useMemo(() => {
+    return depositDeficit <= BigInt(0);
+  }, [depositDeficit]);
+
+  const formattedDepositDeficit = useMemo(() => {
+    return formatTokenAmount(BigInt(depositDeficit), srcToken.decimals);
+  }, [depositDeficit, srcToken.decimals]);
+
   // Unified payment handler for both EOA and AA wallets
   const handleUnifiedPaymentProcess = useCallback(async () => {
     let txData: `0x${string}` | undefined;
     let value: bigint;
     let to: `0x${string}`;
 
+    // Use the existing depositDeficit calculation to determine amount to send
+    const amountToSend = depositDeficit > BigInt(0) ? depositDeficit : BigInt(order.srcAmount);
+
     if (isNativeToken(order.srcTokenAddress)) {
       // Native token transfer
       to = order.globalAddress as `0x${string}`;
-      value = BigInt(order.srcAmount);
+      value = amountToSend;
     } else {
       // ERC20 token transfer - encode the transfer function call using proper ABI
       txData = encodeFunctionData({
         abi: erc20Abi,
         functionName: "transfer",
-        args: [order.globalAddress as `0x${string}`, BigInt(order.srcAmount)],
+        args: [order.globalAddress as `0x${string}`, amountToSend],
       });
       to = order.srcTokenAddress as `0x${string}`;
       value = BigInt(0);
@@ -271,13 +298,15 @@ export const OrderDetails = memo(function OrderDetails({
     if (txHash) {
       setTxHash(txHash as `0x${string}`);
     }
-  }, [order, switchChainAndExecuteWithEOA]);
+  }, [order, switchChainAndExecuteWithEOA, depositDeficit]);
 
   // Main payment handler that triggers chain switch and payment
   const handlePayment = async () => {
     console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
     if (order.srcChain === RELAY_SOLANA_MAINNET_CHAIN_ID) {
-      await initiatePhantomTransfer(order.srcAmount, order.srcTokenAddress, order.globalAddress);
+      // Use the existing depositDeficit calculation to determine amount to send
+      const amountToSend = depositDeficit > BigInt(0) ? depositDeficit.toString() : order.srcAmount;
+      await initiatePhantomTransfer(amountToSend, order.srcTokenAddress, order.globalAddress);
     } else {
       // Use unified payment process for both EOA and AA wallets
       await handleUnifiedPaymentProcess();
@@ -361,13 +390,6 @@ export const OrderDetails = memo(function OrderDetails({
     ? formatTokenAmount(BigInt(actualDstAmount), dstToken.decimals)
     : undefined;
 
-  const depositedAmount = depositTxs
-    ? depositTxs.reduce((acc, curr) => acc + BigInt(curr.amount), BigInt(0))
-    : BigInt(0);
-  const depositDeficit = BigInt(order.srcAmount) - depositedAmount;
-  const depositEnoughAmount = depositDeficit <= BigInt(0);
-  const formattedDepositDeficit = formatTokenAmount(BigInt(depositDeficit), srcToken.decimals);
-
   const { text: statusText, status: statusDisplay } = getStatusDisplay(order);
 
   const initiatePhantomTransfer = async (amountLamports: string, tokenAddress: string, recipientAddress: string) => {
@@ -537,7 +559,7 @@ export const OrderDetails = memo(function OrderDetails({
     }
   };
 
-  if (refundTxs) {
+  if (refundTxs.length > 0) {
     return (
       <>
         <OrderDetailsCollapsible
@@ -551,7 +573,7 @@ export const OrderDetails = memo(function OrderDetails({
         <Accordion type="single" collapsible className="w-full">
           <AccordionItem value="refund-details">
             <AccordionTrigger>Transaction Details</AccordionTrigger>
-            <AccordionContent>
+            <AccordionContent className="pl-2">
               <div className="relative flex w-full flex-col gap-4">
                 <div className="bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2">
                   <motion.div
@@ -628,7 +650,7 @@ export const OrderDetails = memo(function OrderDetails({
         <Accordion type="single" collapsible className="w-full">
           <AccordionItem value="execute-details">
             <AccordionTrigger>Transaction Details</AccordionTrigger>
-            <AccordionContent>
+            <AccordionContent className="pl-2">
               <div className="relative flex w-full flex-col gap-4">
                 <div className="bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2">
                   <motion.div
@@ -653,13 +675,19 @@ export const OrderDetails = memo(function OrderDetails({
                       />
                     ))
                   : null}
-                <TransactionDetails
-                  title="Processed Transaction"
-                  chainId={order.srcChain}
-                  tx={relayTx}
-                  delay={0.5}
-                  isProcessing={false}
-                />
+                {relayTxs
+                  ? relayTxs.map(relayTx => (
+                      <TransactionDetails
+                        key={relayTx.txHash}
+                        title="Processed Transaction"
+                        chainId={relayTx.chain}
+                        tx={relayTx}
+                        delay={0.5}
+                        isProcessing={false}
+                      />
+                    ))
+                  : null}
+
                 <TransactionDetails
                   title={
                     order.type === "swap"
@@ -733,7 +761,7 @@ export const OrderDetails = memo(function OrderDetails({
     );
   }
 
-  if (relayTx && relayTx.status === "success") {
+  if (relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) {
     return (
       <>
         <OrderDetailsCollapsible
@@ -747,7 +775,7 @@ export const OrderDetails = memo(function OrderDetails({
         <Accordion type="single" collapsible className="w-full">
           <AccordionItem value="more-details">
             <AccordionTrigger>More Details</AccordionTrigger>
-            <AccordionContent>
+            <AccordionContent className="pl-2">
               <div className="relative flex w-full flex-col gap-4">
                 <div className="bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2">
                   <motion.div
@@ -772,59 +800,42 @@ export const OrderDetails = memo(function OrderDetails({
                       />
                     ))
                   : null}
-                {/* If the source and destination chains are the same, AnySpend doesn't have executeTransaction */}
-                {order.srcChain === order.dstChain ? (
+                {relayTxs.map(relayTx => (
+                  <TransactionDetails
+                    title="Processed Transaction"
+                    chainId={relayTx.chain}
+                    isProcessing={false}
+                    tx={relayTx}
+                    delay={0.5}
+                  />
+                ))}
+                {order.status === "executing" && (
                   <TransactionDetails
                     title={
                       order.type === "swap"
-                        ? "Processed Swap"
+                        ? "Processing Swap"
                         : order.type === "mint_nft"
-                          ? "Minted NFT"
+                          ? "Minting NFT"
                           : order.type === "join_tournament"
-                            ? "Joined Tournament"
+                            ? "Joining Tournament"
                             : order.type === "fund_tournament"
-                              ? "Funded Tournament"
-                              : "Processed Transaction"
+                              ? "Funding Tournament"
+                              : order.type === "hype_duel"
+                                ? "Depositing Hype Duel"
+                                : "Processing Bridge"
                     }
-                    chainId={order.srcChain}
-                    isProcessing={false}
-                    tx={relayTx}
-                    delay={0.5}
+                    chainId={order.dstChain}
+                    isProcessing={true}
+                    tx={null}
+                    delay={1}
                   />
-                ) : (
-                  <>
-                    <TransactionDetails
-                      title="Processed Transaction"
-                      chainId={order.srcChain}
-                      isProcessing={false}
-                      tx={relayTx}
-                      delay={0.5}
-                    />
-                    <TransactionDetails
-                      title={
-                        order.type === "swap"
-                          ? "Processing Swap"
-                          : order.type === "mint_nft"
-                            ? "Minting NFT"
-                            : order.type === "join_tournament"
-                              ? "Joining Tournament"
-                              : order.type === "fund_tournament"
-                                ? "Funding Tournament"
-                                : "Processing Bridge"
-                      }
-                      chainId={order.dstChain}
-                      isProcessing={true}
-                      tx={executeTx}
-                      delay={1}
-                    />
-                  </>
                 )}
               </div>
             </AccordionContent>
           </AccordionItem>
         </Accordion>
 
-        <div className="flex w-full flex-col gap-8">
+        {/* <div className="flex w-full flex-col gap-8">
           <Button variant="link" asChild>
             <a
               href={getExplorerTxUrl(order.dstChain, relayTx.txHash)}
@@ -843,7 +854,7 @@ export const OrderDetails = memo(function OrderDetails({
               <ExternalLink className="ml-2 h-4 w-4" />
             </a>
           </Button>
-        </div>
+        </div> */}
 
         {order.type === "join_tournament" && order.status === "executed" && (
           <ShinyButton
@@ -892,7 +903,7 @@ export const OrderDetails = memo(function OrderDetails({
         <Accordion type="single" collapsible className="w-full">
           <AccordionItem value="deposit-details">
             <AccordionTrigger>Transaction Details</AccordionTrigger>
-            <AccordionContent>
+            <AccordionContent className="pl-2">
               <div className="relative flex w-full flex-col gap-6">
                 <div className="bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2">
                   <motion.div
@@ -959,6 +970,19 @@ export const OrderDetails = memo(function OrderDetails({
           </AccordionItem>
         </Accordion>
 
+        {/* Show payment UI when deposit is not enough and order is not expired */}
+        {!depositEnoughAmount && order.status !== "expired" && (
+          <InsufficientDepositPayment
+            order={order}
+            srcToken={srcToken}
+            depositDeficit={depositDeficit}
+            phantomWalletAddress={phantomWalletAddress}
+            txLoading={txLoading}
+            isSwitchingOrExecuting={isSwitchingOrExecuting}
+            onPayment={handlePayment}
+          />
+        )}
+
         {/* <DelayedSupportMessage /> */}
       </>
     );

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

@@ -41,11 +41,11 @@ export const OrderStatus = memo(function OrderStatus({
     }
   }
 
-  if (["relay", "sending_token_from_vault"].includes(order.status)) {
+  if (["relay", "executing", "sending_token_from_vault"].includes(order.status)) {
     return <StepProgress steps={paymentSteps} currentStepIndex={1} />;
   }
 
-  if (!isComplete && displayStatus !== "failure") {
+  if (selectedCryptoPaymentMethod === "transfer_crypto" && order.status === "scanning_deposit_transaction") {
     return null;
   }
 

package/src/anyspend/react/hooks/useAnyspendFlow.ts

@@ -39,7 +39,7 @@ interface UseAnyspendFlowProps {
   loadOrder?: string;
   isDepositMode?: boolean;
   onOrderSuccess?: (orderId: string) => void;
-  onTransactionSuccess?: () => void;
+  onTransactionSuccess?: (amount?: string) => void;
   sourceTokenAddress?: string;
   sourceTokenChainId?: number;
   slippage?: number;
@@ -245,9 +245,11 @@ export function useAnyspendFlow({
   useEffect(() => {
     if (oat?.data?.order.status === "executed") {
       console.log("Order executed successfully");
-      onTransactionSuccess?.();
+      // just get the payload.amount if available from custompayload
+      const amount = (oat.data.order.payload as { amount?: string })?.amount;
+      onTransactionSuccess?.(amount);
     }
-  }, [oat?.data?.order.status, onTransactionSuccess]);
+  }, [oat?.data?.order.status, oat?.data?.order.payload, onTransactionSuccess]);
 
   return {
     // State

package/src/anyspend/react/hooks/useAnyspendQuote.ts

@@ -27,7 +27,7 @@ export function useAnyspendQuote(req: GetQuoteRequest): UseAnyspendQuoteResult {
         req.srcTokenAddress &&
         req.dstTokenAddress &&
         BigInt(
-          req.type === "swap"
+          req.type === "swap" || req.type === "hype_duel"
             ? req.amount
             : req.type === "mint_nft"
               ? req.price