@b3dotfun/sdk 0.0.38 → 0.0.40-alpha.0

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { ALL_CHAINS, capitalizeFirstLetter, DEPOSIT_HYPE_ACTION, getChainName } from "@b3dotfun/sdk/anyspend";
+import { ALL_CHAINS, capitalizeFirstLetter, 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";
@@ -47,7 +47,8 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
     order.type === "mint_nft" ||
     order.type === "join_tournament" ||
     order.type === "fund_tournament" ||
-    order.type === "custom"
+    order.type === "custom" ||
+    order.type === "hype_duel"
       ? "0"
       : order.payload.expectedDstAmount.toString();
 
@@ -55,79 +56,94 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
     formattedExpectedDstAmount || formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
 
   return (
-    <div className={cn("bg-as-surface-secondary border-as-border-secondary rounded-xl border px-4 py-2", className)}>
+    <div
+      className={cn(
+        "order-details-collapsible bg-as-surface-secondary border-as-border-secondary rounded-xl border px-4 py-2",
+        className,
+      )}
+    >
       {showOrderDetails ? (
         <motion.div
-          className="w-full"
+          className="order-details-expanded w-full"
           initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
           animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
           transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
         >
-          <div className="flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm">
+          <div className="order-details-content flex w-full flex-col items-center gap-3 whitespace-nowrap py-2 text-sm">
             {/* Recipient Section */}
-            <div className="flex w-full justify-between gap-4">
-              <div className="text-as-tertiarry">Recipient</div>
-              <div className="flex flex-col items-end gap-1">
-                {recipientName && <div className="text-as-primary font-semibold">{recipientName}</div>}
+            <div className="order-details-recipient-section flex w-full justify-between gap-4">
+              <div className="order-details-recipient-label text-as-tertiarry">Recipient</div>
+              <div className="order-details-recipient-info flex flex-col items-end gap-1">
+                {recipientName && (
+                  <div className="order-details-recipient-name text-as-primary font-semibold">{recipientName}</div>
+                )}
                 <CopyToClipboard
                   text={order.recipientAddress}
                   onCopy={() => {
                     toast.success("Copied recipient address to clipboard");
                   }}
                 >
-                  <div className="text-as-primary flex items-center gap-2">
+                  <div className="order-details-recipient-address text-as-primary flex items-center gap-2">
                     {centerTruncate(order.recipientAddress, 10)}
-                    <Copy className="text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" />
+                    <Copy className="order-details-recipient-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 cursor-pointer transition-all duration-200" />
                   </div>
                 </CopyToClipboard>
               </div>
             </div>
-            <div className="divider w-full" />
+            <div className="order-details-divider divider w-full" />
 
             {/* Expected Amount/Action Section */}
-            <div className="flex w-full items-center justify-between gap-2">
-              <div className="text-as-tertiarry">
+            <div className="order-details-expected-section flex w-full items-center justify-between gap-2">
+              <div className="order-details-expected-label text-as-tertiarry">
                 {order.type === "swap" || order.type === "mint_nft"
                   ? "Expected to receive"
                   : order.type === "join_tournament"
                     ? "Join tournament"
                     : order.type === "fund_tournament"
                       ? "Fund tournament"
-                      : order.type === "custom"
-                        ? order.metadata.action === DEPOSIT_HYPE_ACTION
-                          ? "Deposit HYPE"
-                          : order.metadata.action
+                      : order.type === "hype_duel"
+                        ? "Deposit HYPE"
+                        : order.type === "custom"
+                          ? order.metadata.action
                             ? capitalizeFirstLetter(order.metadata.action)
                             : "Contract execution"
-                        : ""}
+                          : ""}
               </div>
 
-              <div className="flex items-end gap-2">
+              <div className="order-details-expected-value flex items-end gap-2">
                 {order.type === "swap" ? (
                   `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`
                 ) : order.type === "mint_nft" ? (
-                  <div className="flex items-center gap-2">
-                    <img src={nft?.imageUrl} alt={nft?.name || "NFT"} className="h-5 w-5" />
-                    <div>{nft?.name || "NFT"}</div>
+                  <div className="order-details-nft-info flex items-center gap-2">
+                    <img src={nft?.imageUrl} alt={nft?.name || "NFT"} className="order-details-nft-image h-5 w-5" />
+                    <div className="order-details-nft-name">{nft?.name || "NFT"}</div>
                   </div>
                 ) : order.type === "join_tournament" || order.type === "fund_tournament" ? (
-                  <div className="flex items-center gap-2">
-                    <img src={tournament?.imageUrl} alt={tournament?.name || "Tournament"} className="h-5 w-5" />
-                    <div>{tournament?.name || "Tournament"}</div>
+                  <div className="order-details-tournament-info flex items-center gap-2">
+                    <img
+                      src={tournament?.imageUrl}
+                      alt={tournament?.name || "Tournament"}
+                      className="order-details-tournament-image h-5 w-5"
+                    />
+                    <div className="order-details-tournament-name">{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>
+                ) : order.type === "hype_duel" ? (
+                  <div className="order-details-hype-info flex items-center gap-2">
+                    <div className="order-details-hype-amount">
+                      {formatTokenAmount(BigInt(order.payload.expectedDstAmount), dstToken.decimals)} HYPE
+                    </div>
                   </div>
                 ) : null}
 
-                <div className="text-as-primary/50 flex items-center gap-2">
-                  <span>on {order.dstChain !== b3.id && getChainName(order.dstChain)}</span>
+                <div className="order-details-chain-info text-as-primary/50 flex items-center gap-2">
+                  <span className="order-details-chain-text">
+                    on {order.dstChain !== b3.id && getChainName(order.dstChain)}
+                  </span>
                   <img
                     src={ALL_CHAINS[order.dstChain].logoUrl}
                     alt={getChainName(order.dstChain)}
                     className={cn(
-                      "h-3",
+                      "order-details-chain-logo h-3",
                       order.dstChain !== b3.id && "w-3 rounded-full",
                       order.dstChain === b3.id && "h-4",
                     )}
@@ -136,25 +152,30 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
               </div>
             </div>
 
-            <div className="divider w-full" />
+            <div className="order-details-divider divider w-full" />
 
             {/* Order ID / Total Section */}
-            <div className="flex w-full justify-between gap-4">
-              <div className="text-as-tertiarry">{showTotal ? "Total (included fee)" : "Order ID"}</div>
-              <div className="text-as-primary overflow-hidden text-ellipsis whitespace-nowrap">
+            <div className="order-details-id-total-section flex w-full justify-between gap-4">
+              <div className="order-details-id-total-label text-as-tertiarry">
+                {showTotal ? "Total (included fee)" : "Order ID"}
+              </div>
+              <div className="order-details-id-total-value text-as-primary overflow-hidden text-ellipsis whitespace-nowrap">
                 {showTotal && totalAmount ? totalAmount : order.id}
               </div>
             </div>
           </div>
         </motion.div>
       ) : (
-        <div className="flex w-full items-center">
-          <div className="divider w-full" />
-          <button className="whitespace-nowrap text-sm" onClick={() => setShowOrderDetails(true)}>
+        <div className="order-details-collapsed flex w-full items-center">
+          <div className="order-details-collapsed-divider divider w-full" />
+          <button
+            className="order-details-collapsed-button whitespace-nowrap text-sm"
+            onClick={() => setShowOrderDetails(true)}
+          >
             Order Details
           </button>
-          <ChevronDown className="text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" />
-          <div className="divider w-full" />
+          <ChevronDown className="order-details-collapsed-chevron text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" />
+          <div className="order-details-collapsed-divider divider w-full" />
         </div>
       )}
     </div>

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

@@ -0,0 +1,38 @@
+"use client";
+
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+
+interface PaymentMethodSwitchProps {
+  currentMethod: CryptoPaymentMethodType;
+  onMethodChange?: (method: CryptoPaymentMethodType) => void;
+}
+
+export function PaymentMethodSwitch({ currentMethod, onMethodChange }: PaymentMethodSwitchProps) {
+  if (!onMethodChange) return null;
+
+  const isTransferCrypto = currentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO;
+  const isConnectWallet =
+    currentMethod === CryptoPaymentMethodType.CONNECT_WALLET || currentMethod === CryptoPaymentMethodType.GLOBAL_WALLET;
+
+  // Only show switch if we're in one of the payment states
+  if (!isTransferCrypto && !isConnectWallet) return null;
+
+  const handleSwitch = () => {
+    if (isTransferCrypto) {
+      onMethodChange(CryptoPaymentMethodType.CONNECT_WALLET);
+    } else {
+      onMethodChange(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+    }
+  };
+
+  return (
+    <div className="order-details-payment-switch-container flex items-center justify-center">
+      <button
+        onClick={handleSwitch}
+        className="order-details-payment-switch-btn text-as-primary/60 hover:text-as-primary text-sm underline transition-colors"
+      >
+        {isTransferCrypto ? "Switch to Connect Wallet" : "Switch to scan / manually send crypto"}
+      </button>
+    </div>
+  );
+}

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

@@ -11,7 +11,9 @@ import { QRCodeSVG } from "qrcode.react";
 import { memo, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { b3 } from "viem/chains";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
+import { PaymentMethodSwitch } from "./PaymentMethodSwitch";
 
 type Order = components["schemas"]["Order"];
 type Token = components["schemas"]["Token"];
@@ -26,6 +28,7 @@ interface TransferCryptoDetailsProps {
   nft?: NFT;
   onBack: () => void;
   recipientName?: string;
+  onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
 }
 
 export const TransferCryptoDetails = memo(function TransferCryptoDetails({
@@ -36,6 +39,7 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
   nft,
   onBack,
   recipientName,
+  onPaymentMethodChange,
 }: TransferCryptoDetailsProps) {
   const [timeLeft, setTimeLeft] = useState(0);
 
@@ -98,21 +102,21 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
   };
 
   return (
-    <div className="flex w-full flex-col gap-6">
+    <div className="order-transfer-crypto flex w-full flex-col gap-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="order-transfer-crypto-header flex items-center justify-between">
         <button
           onClick={onBack}
-          className="text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors"
+          className="order-transfer-crypto-back-btn text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors"
         >
           <ChevronLeft size={24} className="text-as-quaternary" />
         </button>
 
-        <h2 className="text-as-primary text-lg font-semibold">Transfer crypto</h2>
+        <h2 className="order-transfer-crypto-title text-as-primary text-lg font-semibold">Transfer crypto</h2>
 
         {/* Countdown Timer */}
-        <div className="relative flex h-11 w-11 items-center justify-center">
-          <svg className="h-11 w-11 -rotate-90" viewBox="0 0 44 44">
+        <div className="order-transfer-crypto-timer relative flex h-11 w-11 items-center justify-center">
+          <svg className="order-transfer-crypto-timer-svg h-11 w-11 -rotate-90" viewBox="0 0 44 44">
             <circle
               cx="22"
               cy="22"
@@ -120,7 +124,7 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
               stroke="currentColor"
               strokeWidth="3"
               fill="none"
-              className="text-gray-200"
+              className="order-transfer-crypto-timer-bg text-gray-200"
             />
             <circle
               cx="22"
@@ -130,7 +134,7 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
               strokeWidth="3"
               fill="none"
               strokeLinecap="round"
-              className="text-blue-500"
+              className="order-transfer-crypto-timer-progress text-blue-500"
               strokeDasharray={`${2 * Math.PI * 18}`}
               strokeDashoffset={`${2 * Math.PI * 18 * (1 - timeLeft / totalTime)}`}
               style={{
@@ -138,57 +142,66 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
               }}
             />
           </svg>
-          <div className="absolute inset-0 flex items-center justify-center">
+          <div className="order-transfer-crypto-timer-text absolute inset-0 flex items-center justify-center">
             <span className="text-as-primary text-[10px] font-semibold">{formatTime(timeLeft)}</span>
           </div>
         </div>
       </div>
 
       {/* Main Content Cards */}
-      <div className="flex w-full flex-col gap-4">
+      <div className="order-transfer-crypto-content flex w-full flex-col gap-4">
         {/* Amount Card */}
-        <div className="flex items-center gap-4">
-          <div className="w-full">
-            <span className="text-as-content-secondary text-sm font-medium">Amount</span>
-            <div className="border-as-border-primary rounded-lg border p-2 shadow-sm">
+        <div className="order-transfer-crypto-cards flex items-center gap-4">
+          <div className="order-transfer-crypto-amount-card w-full">
+            <span className="order-transfer-crypto-amount-label text-as-content-secondary text-sm font-medium">
+              Amount
+            </span>
+            <div className="order-transfer-crypto-amount-container border-as-border-primary rounded-lg border p-2 shadow-sm">
               <CopyToClipboard
                 text={roundedUpSrcAmount || ""}
                 onCopy={() => {
                   toast.success("Amount copied to clipboard");
                 }}
               >
-                <div className="flex cursor-pointer items-center justify-between gap-2">
-                  <strong className="text-as-primary font-semibold">
+                <div className="order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2">
+                  <strong className="order-transfer-crypto-amount-text text-as-primary font-semibold">
                     {roundedUpSrcAmount} {srcToken.symbol}
                   </strong>
-                  <Copy className="text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" />
+                  <Copy className="order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" />
                 </div>
               </CopyToClipboard>
             </div>
           </div>
 
           {/* Chain Card */}
-          <div className="w-full">
-            <span className="text-as-content-secondary text-sm font-medium">Chain</span>
-            <div className="border-as-border-primary rounded-lg border p-2 shadow-sm">
-              <div className="flex items-center gap-2">
+          <div className="order-transfer-crypto-chain-card w-full">
+            <span className="order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium">
+              Chain
+            </span>
+            <div className="order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm">
+              <div className="order-transfer-crypto-chain-info flex items-center gap-2">
                 <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")}
+                  className={cn(
+                    "order-transfer-crypto-chain-logo h-6 rounded-full",
+                    order.srcChain === b3.id && "h-5 rounded-none",
+                  )}
                 />
-                <span className="text-as-primary text-sm font-semibold">{getChainName(order.srcChain)}</span>
+                <span className="order-transfer-crypto-chain-name text-as-primary text-sm font-semibold">
+                  {getChainName(order.srcChain)}
+                </span>
               </div>
             </div>
           </div>
         </div>
 
         {/* QR Code and Deposit Address Card */}
-        <div className="border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border">
+        <div className="order-transfer-crypto-qr-deposit-card border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border">
           {/* QR Code Section */}
-          <div className="border-as-border-primary h-full w-full border-r">
-            <div className="flex justify-center">
-              <div className="bg-as-surface-secondary flex flex-col items-center rounded-lg p-6">
+          <div className="order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r">
+            <div className="order-transfer-crypto-qr-wrapper flex justify-center">
+              <div className="order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6">
                 <QRCodeSVG
                   value={getPaymentUrl(
                     order.globalAddress,
@@ -197,15 +210,17 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
                     order.srcChain,
                     srcToken?.decimals,
                   )}
-                  className="bg-as-surface-secondary max-h-48 max-w-48"
+                  className="order-transfer-crypto-qr-code bg-as-surface-secondary max-h-48 max-w-48"
                 />
-                <div className="mt-3 flex items-center justify-center gap-2 text-sm">
-                  <span className="text-as-brand/70 text-sm font-medium">SCAN WITH</span>
+                <div className="order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm">
+                  <span className="order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium">
+                    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" />
+                    <WalletMetamask className="order-transfer-crypto-wallet-icon h-5 w-5" variant="branded" />
+                    <WalletCoinbase className="order-transfer-crypto-wallet-icon h-5 w-5" variant="branded" />
+                    <WalletPhantom className="order-transfer-crypto-wallet-icon h-5 w-5" variant="branded" />
+                    <WalletTrust className="order-transfer-crypto-wallet-icon h-5 w-5" variant="branded" />
                   </TextLoop>
                 </div>
               </div>
@@ -213,17 +228,19 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
           </div>
 
           {/* Deposit Address Section */}
-          <div className="flex h-full w-full flex-col gap-2 p-6">
-            <span className="text-as-content-secondary text-sm font-medium">Deposit address:</span>
+          <div className="order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6">
+            <span className="order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium">
+              Deposit address:
+            </span>
             <div
-              className="flex h-full cursor-pointer flex-col items-stretch justify-between gap-4"
+              className="order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4"
               onClick={handleCopyAddress}
             >
-              <div className="text-as-primary break-all font-mono text-sm font-semibold leading-relaxed">
+              <div className="order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed">
                 {order.globalAddress}
               </div>
-              <div className="place-self-end">
-                <Copy className="group-hover:text-as-brand text-as-tertiarry h-4 w-4 cursor-pointer transition-all duration-200" />
+              <div className="order-transfer-crypto-address-copy-icon-wrapper place-self-end">
+                <Copy className="order-transfer-crypto-address-copy-icon group-hover:text-as-brand text-as-tertiarry h-4 w-4 cursor-pointer transition-all duration-200" />
               </div>
             </div>
           </div>
@@ -240,23 +257,28 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
       </div>
 
       {/* Action Buttons */}
-      <div className="flex flex-col gap-3">
+      <div className="order-transfer-crypto-actions flex flex-col gap-3">
         <ShinyButton
           accentColor="hsl(var(--as-brand))"
           textColor="text-white"
-          className="w-full py-3"
+          className="order-transfer-crypto-copy-btn w-full py-3"
           onClick={handleCopyAddress}
         >
           Copy deposit address
         </ShinyButton>
 
         {/* <button
-          className="text-as-primary/60 hover:text-as-primary flex w-full items-center justify-center gap-2 py-2 transition-colors"
+          className="order-transfer-crypto-cancel-btn text-as-primary/60 hover:text-as-primary flex w-full items-center justify-center gap-2 py-2 transition-colors"
           onClick={onBack}
         >
           <RefreshCcw className="h-4 w-4" />
           Cancel and start over
         </button> */}
+
+        <PaymentMethodSwitch
+          currentMethod={CryptoPaymentMethodType.TRANSFER_CRYPTO}
+          onMethodChange={onPaymentMethodChange}
+        />
       </div>
     </div>
   );