@b3dotfun/sdk 0.0.39-alpha.0 → 0.0.40-alpha.0

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

@@ -2,7 +2,6 @@
 
 import {
   ALL_CHAINS,
-  DEPOSIT_HYPE_ACTION,
   getChainName,
   getErrorDisplay,
   getExplorerTxUrl,
@@ -53,6 +52,7 @@ import ConnectWalletPayment from "./ConnectWalletPayment";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { InsufficientDepositPayment } from "./InsufficientDepositPayment";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
+import { OrderStatus } from "./OrderStatus";
 import PaymentVendorUI from "./PaymentVendorUI";
 import { TransferCryptoDetails } from "./TransferCryptoDetails";
 
@@ -64,6 +64,8 @@ interface OrderDetailsProps {
   executeTx: components["schemas"]["ExecuteTx"] | null;
   refundTxs: components["schemas"]["RefundTx"][];
   cryptoPaymentMethod?: CryptoPaymentMethodType; // Now optional since we read from URL
+  selectedCryptoPaymentMethod?: CryptoPaymentMethodType; // For OrderStatus integration
+  onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void; // Callback for payment method switching
   onBack?: () => void;
   disableUrlParamManagement?: boolean; // When true, will not modify URL parameters
 }
@@ -73,6 +75,7 @@ function getOrderSuccessText({
   order,
   tournament,
   formattedActualDstAmount,
+  formattedExpectedDstAmount,
   dstToken,
   recipientName,
   centerTruncate,
@@ -80,6 +83,7 @@ function getOrderSuccessText({
   order: components["schemas"]["Order"];
   tournament?: any;
   formattedActualDstAmount?: string;
+  formattedExpectedDstAmount?: string;
   dstToken: any;
   recipientName?: string;
   centerTruncate: (address: string, n: number) => string;
@@ -100,10 +104,10 @@ function getOrderSuccessText({
     case "fund_tournament":
       actionText = `funded ${tournament?.name}`;
       return `Successfully ${actionText}`;
+    case "hype_duel":
+      actionText = `deposited ${formattedExpectedDstAmount || "--"} HYPE`;
+      return `Successfully ${actionText} to ${recipient}`;
     case "custom":
-      if (order.metadata.action === DEPOSIT_HYPE_ACTION) {
-        return `Successfully deposited ${formatTokenAmount(BigInt(order.payload?.amount || "0"), 18)} HYPE to ${recipient}`;
-      }
       actionText = order.metadata.action || `executed contract`;
       return `Successfully ${actionText}`;
     case "hype_duel":
@@ -207,6 +211,8 @@ export const OrderDetails = memo(function OrderDetails({
   executeTx,
   refundTxs,
   cryptoPaymentMethod,
+  selectedCryptoPaymentMethod,
+  onPaymentMethodChange,
   onBack,
   disableUrlParamManagement = false,
 }: OrderDetailsProps) {
@@ -222,6 +228,9 @@ export const OrderDetails = memo(function OrderDetails({
   const effectiveCryptoPaymentMethod =
     cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethodType.NONE;
 
+  // Use selectedCryptoPaymentMethod for OrderStatus if provided, otherwise fall back to effective method
+  const orderStatusPaymentMethod = selectedCryptoPaymentMethod || effectiveCryptoPaymentMethod;
+
   const setB3ModalOpen = useModalStore((state: any) => state.setB3ModalOpen);
 
   const srcToken = order.metadata.srcToken;
@@ -569,6 +578,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (refundTxs.length > 0) {
     return (
       <>
+        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -577,10 +587,10 @@ export const OrderDetails = memo(function OrderDetails({
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
         />
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="refund-details">
-            <AccordionTrigger>Transaction Details</AccordionTrigger>
-            <AccordionContent className="pl-2">
+        <Accordion type="single" collapsible className="order-details-accordion w-full">
+          <AccordionItem value="refund-details" className="order-details-refund-item">
+            <AccordionTrigger className="accordion-trigger">Transaction Details</AccordionTrigger>
+            <AccordionContent className="accordion-content 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 +638,7 @@ export const OrderDetails = memo(function OrderDetails({
           </div>
         )}
         <button
-          className="order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
+          className="order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
           onClick={mode === "page" ? handleBack : handleCloseModal}
         >
           {mode === "page" ? (
@@ -646,6 +656,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (executeTx) {
     return (
       <>
+        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -654,10 +665,10 @@ export const OrderDetails = memo(function OrderDetails({
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
         />
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="execute-details">
-            <AccordionTrigger>Transaction Details</AccordionTrigger>
-            <AccordionContent className="pl-2">
+        <Accordion type="single" collapsible className="order-details-accordion w-full">
+          <AccordionItem value="execute-details" className="order-details-execute-item">
+            <AccordionTrigger className="order-details-execute-trigger">Transaction Details</AccordionTrigger>
+            <AccordionContent className="order-details-execute-content 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
@@ -728,6 +739,7 @@ export const OrderDetails = memo(function OrderDetails({
                 order,
                 tournament,
                 formattedActualDstAmount: formattedActualDstAmount,
+                formattedExpectedDstAmount: formattedExpectedDstAmount,
                 dstToken,
                 recipientName,
                 centerTruncate,
@@ -752,7 +764,7 @@ export const OrderDetails = memo(function OrderDetails({
 
         {order.status === "executed" && (
           <button
-            className="order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
+            className="order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
             onClick={mode === "page" ? handleBack : handleCloseModal}
           >
             {mode === "page" ? (
@@ -771,6 +783,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) {
     return (
       <>
+        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -779,10 +792,10 @@ export const OrderDetails = memo(function OrderDetails({
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
         />
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="more-details">
-            <AccordionTrigger>More Details</AccordionTrigger>
-            <AccordionContent className="pl-2">
+        <Accordion type="single" collapsible className="order-details-accordion w-full">
+          <AccordionItem value="more-details" className="order-details-more-item">
+            <AccordionTrigger className="accordion-trigger">More Details</AccordionTrigger>
+            <AccordionContent className="accordion-content 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
@@ -878,7 +891,7 @@ export const OrderDetails = memo(function OrderDetails({
 
         {order.status === "executed" && (
           <button
-            className="order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
+            className="order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
             onClick={mode === "page" ? handleBack : handleCloseModal}
           >
             {mode === "page" ? (
@@ -899,6 +912,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (depositTxs?.length || waitingForDeposit) {
     return (
       <>
+        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -907,10 +921,10 @@ export const OrderDetails = memo(function OrderDetails({
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
         />
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="deposit-details">
-            <AccordionTrigger>Transaction Details</AccordionTrigger>
-            <AccordionContent className="pl-2">
+        <Accordion type="single" collapsible className="order-details-accordion w-full">
+          <AccordionItem value="deposit-details" className="order-details-deposit-item">
+            <AccordionTrigger className="accordion-trigger">Transaction Details</AccordionTrigger>
+            <AccordionContent className="accordion-content 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
@@ -997,6 +1011,7 @@ export const OrderDetails = memo(function OrderDetails({
 
   return (
     <>
+      <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
       {statusDisplay === "processing" && (
         <>
           {order.onrampMetadata ? (
@@ -1013,6 +1028,7 @@ export const OrderDetails = memo(function OrderDetails({
               tournament={tournament}
               nft={nft}
               cryptoPaymentMethod={effectiveCryptoPaymentMethod}
+              onPaymentMethodChange={onPaymentMethodChange}
             />
           ) : effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
             // Transfer Crypto Payment Method - Show new card-based UI
@@ -1024,23 +1040,24 @@ export const OrderDetails = memo(function OrderDetails({
               tournament={tournament}
               nft={nft}
               onBack={handleBack}
+              onPaymentMethodChange={onPaymentMethodChange}
             />
           ) : (
-            <div className="relative flex w-full flex-1 flex-col">
-              <div className={"flex flex-col gap-1"}>
-                <span className={"text-as-primary/50"}>Please send</span>
-                <div className="flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0">
+            <div className="order-details-payment-section relative flex w-full flex-1 flex-col">
+              <div className={"order-details-amount-section flex flex-col gap-1"}>
+                <span className={"text-as-primary/50 order-details-amount-label"}>Please send</span>
+                <div className="order-details-amount-container flex w-full flex-wrap items-center gap-6 sm:justify-between sm:gap-0">
                   <CopyToClipboard
                     text={roundedUpSrcAmount}
                     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">
+                    <div className="order-details-amount-display flex items-center gap-2">
+                      <strong className="border-as-brand text-as-primary order-details-amount-text border-b-2 pb-1 text-2xl font-semibold sm:text-xl">
                         {roundedUpSrcAmount} {srcToken.symbol}
                       </strong>
-                      <Copy className="text-as-primary/50 hover:text-as-primary h-5 w-5 cursor-pointer transition-all duration-200" />
+                      <Copy className="text-as-primary/50 hover:text-as-primary order-details-copy-icon h-5 w-5 cursor-pointer transition-all duration-200" />
                     </div>
                   </CopyToClipboard>
 
@@ -1053,7 +1070,7 @@ export const OrderDetails = memo(function OrderDetails({
                     />
                   </Badge>
                 </div>
-                <span className={"text-as-primary/50 mb-1 mt-2"}> to the address:</span>
+                <span className={"text-as-primary/50 order-details-address-label mb-1 mt-2"}> to the address:</span>
               </div>
               <CopyToClipboard
                 text={order.globalAddress}
@@ -1061,11 +1078,11 @@ export const OrderDetails = memo(function OrderDetails({
                   toast.success("Copied to clipboard");
                 }}
               >
-                <div className="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">
+                <div className="bg-b3-react-background border-b3-react-border hover:border-as-brand order-details-address-container 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 order-details-address-text 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" />
+                  <Copy className="group-hover:text-as-brand text-as-primary/50 order-details-address-copy-icon h-5 w-5 cursor-pointer transition-all duration-200" />
                 </div>
               </CopyToClipboard>
 
@@ -1134,7 +1151,7 @@ export const OrderDetails = memo(function OrderDetails({
                   transition={{ duration: 0.5, ease: "easeInOut" }}
                   className="flex w-full items-center justify-evenly gap-4"
                 >
-                  <div className="mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3">
+                  <div className="order-details-qr-container mt-8 flex flex-col items-center rounded-lg bg-white p-6 pb-3">
                     <QRCodeSVG
                       value={getPaymentUrl(
                         order.globalAddress,
@@ -1143,9 +1160,9 @@ export const OrderDetails = memo(function OrderDetails({
                         order.srcChain,
                         srcToken?.decimals,
                       )}
-                      className="max-w-[200px]"
+                      className="order-details-qr-code max-w-[200px]"
                     />
-                    <div className="mt-3 flex items-center justify-center gap-2 text-sm">
+                    <div className="order-details-qr-wallets 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" />
@@ -1162,9 +1179,9 @@ export const OrderDetails = memo(function OrderDetails({
         </>
       )}
 
-      <div className="flex w-full items-center justify-center gap-1 text-sm">
-        <div className="text-as-primary/30">Time remaining:</div>
-        <div className="text-as-primary">
+      <div className="order-details-time-remaining flex w-full items-center justify-center gap-1 text-sm">
+        <div className="text-as-primary/30 order-details-time-label">Time remaining:</div>
+        <div className="text-as-primary order-details-time-value">
           {depositEnoughAmount ? (
             "Received"
           ) : order.status === "expired" ? (
@@ -1186,7 +1203,7 @@ export const OrderDetails = memo(function OrderDetails({
         />
       )}
 
-      <button className="flex w-full items-center justify-center gap-2" onClick={handleBack}>
+      <button className="order-details-cancel-btn flex w-full items-center justify-center gap-2" onClick={handleBack}>
         <RefreshCcw className="ml-2 h-4 w-4" /> Cancel and start over
       </button>
 
@@ -1209,8 +1226,8 @@ function TransactionDetails({
   delay?: number;
 }) {
   return (
-    <div className={"relative flex w-full flex-1 items-center justify-between gap-4"}>
-      <div className="flex grow items-center gap-4">
+    <div className={"order-details-transaction-item relative flex w-full flex-1 items-center justify-between gap-4"}>
+      <div className="order-details-transaction-content flex grow items-center gap-4">
         <motion.div className="bg-as-surface-secondary relative h-10 w-10 rounded-full">
           {isProcessing ? (
             <motion.div

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>
+  );
+}