@b3dotfun/sdk 0.0.40-test.6 → 0.0.41-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,15 +104,12 @@ 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":
-      actionText = `deposited ${formattedActualDstAmount || "--"} HYPE`;
-      return `Successfully ${actionText} to ${recipient}`;
     default:
       throw new Error("Invalid order type");
   }
@@ -207,6 +208,8 @@ export const OrderDetails = memo(function OrderDetails({
   executeTx,
   refundTxs,
   cryptoPaymentMethod,
+  selectedCryptoPaymentMethod,
+  onPaymentMethodChange,
   onBack,
   disableUrlParamManagement = false,
 }: OrderDetailsProps) {
@@ -220,7 +223,9 @@ export const OrderDetails = memo(function OrderDetails({
   // Read crypto payment method from URL parameters
   const cryptoPaymentMethodFromUrl = searchParams.get("cryptoPaymentMethod") as CryptoPaymentMethodType | null;
   const effectiveCryptoPaymentMethod =
-    cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethodType.NONE;
+    selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE
+      ? selectedCryptoPaymentMethod
+      : cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethodType.NONE;
 
   const setB3ModalOpen = useModalStore((state: any) => state.setB3ModalOpen);
 
@@ -569,6 +574,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (refundTxs.length > 0) {
     return (
       <>
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -577,10 +583,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 +634,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 +652,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (executeTx) {
     return (
       <>
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -654,10 +661,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="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
@@ -728,6 +735,7 @@ export const OrderDetails = memo(function OrderDetails({
                 order,
                 tournament,
                 formattedActualDstAmount: formattedActualDstAmount,
+                formattedExpectedDstAmount: formattedExpectedDstAmount,
                 dstToken,
                 recipientName,
                 centerTruncate,
@@ -752,7 +760,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 +779,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) {
     return (
       <>
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -779,10 +788,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 +887,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 +908,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (depositTxs?.length || waitingForDeposit) {
     return (
       <>
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -907,10 +917,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 +1007,7 @@ export const OrderDetails = memo(function OrderDetails({
 
   return (
     <>
+      <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
       {statusDisplay === "processing" && (
         <>
           {order.onrampMetadata ? (
@@ -1013,6 +1024,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 +1036,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 +1066,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 +1074,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 +1147,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 +1156,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 +1175,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 +1199,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 +1222,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/OrderTokenAmount.tsx

@@ -27,6 +27,7 @@ export function OrderTokenAmount({
   innerClassName,
   amountClassName,
   tokenSelectClassName,
+  onTokenSelect,
 }: {
   disabled?: boolean;
   inputValue: string;
@@ -43,6 +44,7 @@ export function OrderTokenAmount({
   innerClassName?: string;
   amountClassName?: string;
   tokenSelectClassName?: string;
+  onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
 }) {
   // Track previous token to detect changes
   const prevTokenRef = useRef<string>(token.address);
@@ -64,6 +66,31 @@ export function OrderTokenAmount({
   }, [token.address, chainId, context, onChangeInput]);
 
   const handleTokenSelect = (newToken: any) => {
+    const token: components["schemas"]["Token"] = {
+      address: newToken.address,
+      chainId: newToken.chainId,
+      decimals: newToken.decimals,
+      metadata: { logoURI: newToken.logoURI },
+      name: newToken.name,
+      symbol: newToken.symbol,
+    };
+
+    // Call the onTokenSelect callback if provided
+    if (onTokenSelect) {
+      let isDefaultPrevented = false;
+      const event = {
+        preventDefault: () => {
+          isDefaultPrevented = true;
+        },
+      };
+
+      onTokenSelect(token, event);
+
+      if (isDefaultPrevented) {
+        return; // Early return if callback prevented default behavior
+      }
+    }
+
     // Mark that we're about to change tokens
     prevTokenRef.current = "changing"; // Temporary value to force effect
 
@@ -71,14 +98,7 @@ export function OrderTokenAmount({
     setChainId(newToken.chainId);
 
     // Then set the new token
-    setToken({
-      address: newToken.address,
-      chainId: newToken.chainId, // Use the new chain ID
-      decimals: newToken.decimals,
-      metadata: { logoURI: newToken.logoURI },
-      name: newToken.name,
-      symbol: newToken.symbol,
-    });
+    setToken(token);
 
     // If this is the source token, reset the amount immediately
     if (context === "from") {

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

@@ -1,5 +1,6 @@
 import { useCoinbaseOnrampOptions, useGeoOnrampOptions } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { ALL_CHAINS } from "@b3dotfun/sdk/anyspend/utils/chain";
 import { Input, useGetGeo, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { cn, formatUsername } from "@b3dotfun/sdk/shared/utils";
@@ -7,8 +8,10 @@ import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { ChevronRight, Wallet } from "lucide-react";
 import { useRef } from "react";
 import { toast } from "sonner";
+import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat";
+import { PointsBadge } from "./PointsBadge";
 
 export function PanelOnramp({
   srcAmountOnRamp,
@@ -25,6 +28,8 @@ export function PanelOnramp({
   recipientSelectionPanelIndex,
   dstTokenSymbol,
   hideDstToken = false,
+  anyspendQuote,
+  onShowPointsDetail,
 }: {
   srcAmountOnRamp: string;
   setSrcAmountOnRamp: (amount: string) => void;
@@ -40,7 +45,10 @@ export function PanelOnramp({
   recipientSelectionPanelIndex: number;
   dstTokenSymbol?: string;
   hideDstToken?: boolean;
+  anyspendQuote?: GetQuoteResponse;
+  onShowPointsDetail?: () => void;
 }) {
+  const featureFlags = useFeatureFlags();
   // Get geo-based onramp options to access fee information
   const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
 
@@ -245,21 +253,26 @@ export function PanelOnramp({
 
         <div className="">
           <div className="flex items-center justify-between">
-            {(() => {
-              const currentPaymentMethod = selectedPaymentMethod || FiatPaymentMethod.NONE;
-              const fee = getFeeFromApi(currentPaymentMethod);
-
-              return (
-                <>
-                  <span className="text-as-tertiarry text-sm">
-                    {fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total"}
-                  </span>
-                  <span className="text-as-primary font-semibold">
-                    ${getTotalAmount(currentPaymentMethod).toFixed(2)}
-                  </span>
-                </>
-              );
-            })()}
+            <div className="flex items-center gap-2">
+              <span className="text-as-tertiarry text-sm">
+                {(() => {
+                  const fee = getFeeFromApi(selectedPaymentMethod || FiatPaymentMethod.NONE);
+                  return fee !== null ? `Total (included $${fee.toFixed(2)} fee)` : "Total";
+                })()}
+              </span>
+              {featureFlags.showPoints &&
+                anyspendQuote?.data?.pointsAmount &&
+                anyspendQuote?.data?.pointsAmount > 0 && (
+                  <PointsBadge
+                    pointsAmount={anyspendQuote.data.pointsAmount}
+                    pointsMultiplier={anyspendQuote.data.pointsMultiplier}
+                    onClick={() => onShowPointsDetail?.()}
+                  />
+                )}
+            </div>
+            <span className="text-as-primary font-semibold">
+              ${getTotalAmount(selectedPaymentMethod || FiatPaymentMethod.NONE).toFixed(2)}
+            </span>
           </div>
         </div>
       </div>