@b3dotfun/sdk 0.0.40 → 0.0.41-alpha.0

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

@@ -3,11 +3,14 @@
 import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
 import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
 import { useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
+import { useSetActiveWallet, useWalletInfo } from "thirdweb/react";
+import { WalletId, createWallet } from "thirdweb/wallets";
 import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
 
 export enum CryptoPaymentMethodType {
@@ -38,13 +41,69 @@ export function CryptoPaymentMethod({
   onBack,
   onSelectPaymentMethod,
 }: CryptoPaymentMethodProps) {
-  const { wallet: globalWallet, address: globalAddress } = useAccountWallet();
-  const { address, isConnected, connector } = useAccount();
+  const {
+    wallet: globalWallet,
+    connectedEOAWallet: connectedEOAWallet,
+    connectedSmartWallet: connectedSmartWallet,
+  } = useAccountWallet();
+  const { connector, address, isConnected: wagmiWalletIsConnected } = useAccount();
   const { connect, connectors, isPending } = useConnect();
   const { disconnect } = useDisconnect();
   const { data: walletClient } = useWalletClient();
   const [showWalletModal, setShowWalletModal] = useState(false);
 
+  const setActiveWallet = useSetActiveWallet();
+  const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
+
+  const isConnected = !!connectedEOAWallet;
+  const globalAddress = connectedSmartWallet?.getAccount()?.address;
+
+  // Helper function to check if two addresses are the same
+  const isSameAddress = (addr1?: string, addr2?: string): boolean => {
+    if (!addr1 || !addr2) return false;
+    return addr1.toLowerCase() === addr2.toLowerCase();
+  };
+
+  // Check if connectedEOAWallet and wagmi wallet represent the same wallet
+  const connectedEOAAddress = connectedEOAWallet?.getAccount()?.address;
+  const wagmiAddress = address;
+  const isWalletDuplicated = isSameAddress(connectedEOAAddress, wagmiAddress);
+
+  // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
+  const shouldShowConnectedEOA = !!connectedEOAWallet;
+  const shouldShowWagmiWallet = wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
+
+  // Map wagmi connector names to thirdweb wallet IDs
+  const getThirdwebWalletId = (connectorName: string): WalletId | null => {
+    const walletMap: Record<string, WalletId> = {
+      MetaMask: "io.metamask",
+      "Coinbase Wallet": "com.coinbase.wallet",
+      Rainbow: "me.rainbow",
+      WalletConnect: "walletConnect",
+      Phantom: "app.phantom",
+    };
+    return walletMap[connectorName] || null;
+  };
+
+  // Create thirdweb wallet from wagmi connector
+  const createThirdwebWalletFromConnector = async (connectorName: string) => {
+    const walletId = getThirdwebWalletId(connectorName);
+    if (!walletId) {
+      console.warn(`No thirdweb wallet ID found for connector: ${connectorName}`);
+      return null;
+    }
+
+    try {
+      const thirdwebWallet = createWallet(walletId);
+      // Connect the wallet to sync with the existing wagmi connection
+      await thirdwebWallet.connect({ client });
+      return thirdwebWallet;
+    } catch (error) {
+      console.error(`Failed to create thirdweb wallet for ${connectorName}:`, error);
+      return null;
+    }
+  };
+
   // Define available wallet connectors
   const availableConnectors = connectors.filter(connector =>
     ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name),
@@ -161,57 +220,79 @@ export function CryptoPaymentMethod({
         </div>
 
         {/* Payment Methods */}
-        <div className="crypto-payment-methods flex flex-col gap-6">
-          {/* Connect Wallet Section */}
-          <button
-            onClick={() => {
-              // Always show wallet selection modal first
-              setShowWalletModal(true);
-            }}
-            className="crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md"
-          >
-            <div className="flex items-center gap-3">
-              <div className="wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
-                <Wallet className="h-4 w-4 text-blue-600" />
-              </div>
-              <div className="flex flex-col items-start text-left">
-                <h4 className="text-as-primary font-semibold">Connect wallet</h4>
-              </div>
-            </div>
-            <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
-          </button>
-
-          {/* Transfer Crypto Section */}
-          <button
-            onClick={() => {
-              setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
-              onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
-            }}
-            disabled={isCreatingOrder}
-            className="crypto-payment-method-transfer bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md"
-          >
-            <div className="flex items-center gap-3">
-              <div className="wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100">
-                <ZapIcon className="h-4 w-4" />
-              </div>
-              <div className="flex flex-col items-start text-left">
-                <h4 className="text-as-primary font-semibold">Transfer crypto</h4>
-              </div>
-            </div>
-            <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
-          </button>
-
+        <div className="crypto-payment-methods flex flex-col gap-4">
           {/* Installed Wallets Section */}
-          {(isConnected || globalAddress) && (
+          {(shouldShowConnectedEOA || shouldShowWagmiWallet || globalAddress) && (
             <div className="installed-wallets">
               <h3 className="text-as-primary/80 mb-3 text-sm font-medium">Connected wallets</h3>
               <div className="space-y-2">
                 {/* Current Connected Wallet */}
-                {isConnected && (
+
+                {shouldShowConnectedEOA && (
                   <button
                     onClick={() => {
                       setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
                       onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                      setActiveWallet(connectedEOAWallet);
+                      toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
+                    }}
+                    className={cn(
+                      "crypto-payment-method-connect-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
+                      selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
+                        ? "connected-wallet border-as-brand bg-as-brand/5"
+                        : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",
+                    )}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
+                          <Wallet className="h-5 w-5 text-blue-600" />
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="text-as-primary font-semibold">
+                            {eoaWalletInfo?.name || connector?.name || "Connected Wallet"}
+                          </span>
+                          <span className="text-as-primary/60 text-sm">
+                            {shortenAddress(connectedEOAWallet?.getAccount()?.address || "")}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (
+                          <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                        )}
+                        <button
+                          onClick={e => {
+                            e.stopPropagation();
+                            disconnect();
+                            toast.success("Wallet disconnected");
+                            if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
+                              setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
+                            }
+                          }}
+                          className="text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors"
+                        >
+                          <X className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </div>
+                  </button>
+                )}
+
+                {shouldShowWagmiWallet && (
+                  <button
+                    onClick={async () => {
+                      setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+                      onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+
+                      // Create thirdweb wallet from wagmi connector
+                      if (connector?.name) {
+                        const thirdwebWallet = await createThirdwebWalletFromConnector(connector.name);
+                        if (thirdwebWallet) {
+                          setActiveWallet(thirdwebWallet);
+                        }
+                      }
+
                       toast.success(`Selected ${connector?.name || "wallet"}`);
                     }}
                     className={cn(
@@ -293,6 +374,51 @@ export function CryptoPaymentMethod({
               </div>
             </div>
           )}
+
+          {/* Other Payment Methods Section */}
+          <div className="other-payment-methods">
+            <h3 className="text-as-primary/80 mb-3 text-sm font-medium">Payment methods</h3>
+            <div className="space-y-3">
+              {/* Connect Wallet Section */}
+              <button
+                onClick={() => {
+                  // Always show wallet selection modal first
+                  setShowWalletModal(true);
+                }}
+                className="crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
+                    <Wallet className="h-4 w-4 text-blue-600" />
+                  </div>
+                  <div className="flex flex-col items-start text-left">
+                    <h4 className="text-as-primary font-semibold">Connect wallet</h4>
+                  </div>
+                </div>
+                <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
+              </button>
+
+              {/* Transfer Crypto Section */}
+              <button
+                onClick={() => {
+                  setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+                  onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+                }}
+                disabled={isCreatingOrder}
+                className="crypto-payment-method-transfer bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100">
+                    <ZapIcon className="h-4 w-4" />
+                  </div>
+                  <div className="flex flex-col items-start text-left">
+                    <h4 className="text-as-primary font-semibold">Transfer crypto</h4>
+                  </div>
+                </div>
+                <ChevronRightCircle className="text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" />
+              </button>
+            </div>
+          </div>
         </div>
       </div>
 

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

@@ -5,7 +5,9 @@ import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronRight } from "lucide-react";
 import { motion } from "motion/react";
 import { components } from "../../../types/api";
+import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
 import { OrderTokenAmount } from "./OrderTokenAmount";
+import { PointsBadge } from "./PointsBadge";
 
 interface CryptoReceiveSectionProps {
   isDepositMode?: boolean;
@@ -27,6 +29,8 @@ interface CryptoReceiveSectionProps {
   // custom dst token data
   dstTokenSymbol?: string;
   dstTokenLogoURI?: string;
+  // Points navigation
+  onShowPointsDetail?: () => void;
 }
 
 export function CryptoReceiveSection({
@@ -44,7 +48,10 @@ export function CryptoReceiveSection({
   anyspendQuote,
   dstTokenSymbol,
   dstTokenLogoURI,
+  onShowPointsDetail,
 }: CryptoReceiveSectionProps) {
+  const featureFlags = useFeatureFlags();
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
@@ -100,61 +107,70 @@ export function CryptoReceiveSection({
           setToken={setSelectedDstToken || (() => {})}
         />
       )}
-      <div className="text-as-primary/50 flex h-5 items-center text-sm">
-        {formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
-          style: "currency",
-          fallback: "",
-        })}
-        {anyspendQuote?.data?.currencyIn?.amountUsd &&
-          anyspendQuote?.data?.currencyOut?.amountUsd &&
-          (() => {
-            const calculatePriceImpact = (inputUsd?: string | number, outputUsd?: string | number) => {
-              if (!inputUsd || !outputUsd) {
-                return { percentage: "0.00", isNegative: false };
-              }
+      <div className="text-as-primary/50 flex h-5 items-center justify-start gap-2 text-sm">
+        <div className="flex items-center gap-2">
+          {formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
+            style: "currency",
+            fallback: "",
+          })}
+          {anyspendQuote?.data?.currencyIn?.amountUsd &&
+            anyspendQuote?.data?.currencyOut?.amountUsd &&
+            (() => {
+              const calculatePriceImpact = (inputUsd?: string | number, outputUsd?: string | number) => {
+                if (!inputUsd || !outputUsd) {
+                  return { percentage: "0.00", isNegative: false };
+                }
 
-              const input = Number(inputUsd);
-              const output = Number(outputUsd);
+                const input = Number(inputUsd);
+                const output = Number(outputUsd);
 
-              // Handle edge cases
-              if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
-                return { percentage: "0.00", isNegative: false };
-              }
+                // Handle edge cases
+                if (input === 0 || isNaN(input) || isNaN(output) || input <= output) {
+                  return { percentage: "0.00", isNegative: false };
+                }
 
-              const percentageValue = ((output - input) / input) * 100;
+                const percentageValue = ((output - input) / input) * 100;
 
-              // Handle the -0.00% case
-              if (percentageValue > -0.005 && percentageValue < 0) {
-                return { percentage: "0.00", isNegative: false };
-              }
+                // Handle the -0.00% case
+                if (percentageValue > -0.005 && percentageValue < 0) {
+                  return { percentage: "0.00", isNegative: false };
+                }
 
-              return {
-                percentage: Math.abs(percentageValue).toFixed(2),
-                isNegative: percentageValue < 0,
+                return {
+                  percentage: Math.abs(percentageValue).toFixed(2),
+                  isNegative: percentageValue < 0,
+                };
               };
-            };
 
-            const { percentage, isNegative } = calculatePriceImpact(
-              anyspendQuote.data.currencyIn.amountUsd,
-              anyspendQuote.data.currencyOut.amountUsd,
-            );
+              const { percentage, isNegative } = calculatePriceImpact(
+                anyspendQuote.data.currencyIn.amountUsd,
+                anyspendQuote.data.currencyOut.amountUsd,
+              );
 
-            // Parse the percentage as a number for comparison
-            const percentageNum = parseFloat(percentage);
+              // Parse the percentage as a number for comparison
+              const percentageNum = parseFloat(percentage);
 
-            // Don't show if less than 1%
-            if (percentageNum < 1) {
-              return null;
-            }
+              // Don't show if less than 1%
+              if (percentageNum < 1) {
+                return null;
+              }
 
-            // Using inline style to ensure color displays
-            return (
-              <span className="ml-2" style={{ color: percentageNum >= 10 ? "red" : "#FFD700" }}>
-                ({isNegative ? "-" : ""}
-                {percentage}%)
-              </span>
-            );
-          })()}
+              // Using inline style to ensure color displays
+              return (
+                <span className="ml-2" style={{ color: percentageNum >= 10 ? "red" : "#FFD700" }}>
+                  ({isNegative ? "-" : ""}
+                  {percentage}%)
+                </span>
+              );
+            })()}
+        </div>
+        {featureFlags.showPoints && anyspendQuote?.data?.pointsAmount > 0 && (
+          <PointsBadge
+            pointsAmount={anyspendQuote.data.pointsAmount}
+            pointsMultiplier={anyspendQuote.data.pointsMultiplier}
+            onClick={() => onShowPointsDetail?.()}
+          />
+        )}
       </div>
     </motion.div>
   );

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

@@ -110,9 +110,6 @@ function getOrderSuccessText({
     case "custom":
       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");
   }
@@ -226,10 +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;
-
-  // Use selectedCryptoPaymentMethod for OrderStatus if provided, otherwise fall back to effective method
-  const orderStatusPaymentMethod = selectedCryptoPaymentMethod || effectiveCryptoPaymentMethod;
+    selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE
+      ? selectedCryptoPaymentMethod
+      : cryptoPaymentMethod || cryptoPaymentMethodFromUrl || CryptoPaymentMethodType.NONE;
 
   const setB3ModalOpen = useModalStore((state: any) => state.setB3ModalOpen);
 
@@ -578,7 +574,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (refundTxs.length > 0) {
     return (
       <>
-        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -656,7 +652,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (executeTx) {
     return (
       <>
-        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -667,8 +663,8 @@ export const OrderDetails = memo(function OrderDetails({
         />
         <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">
+            <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
@@ -783,7 +779,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (relayTxs.length > 0 && relayTxs.every(tx => tx.status === "success")) {
     return (
       <>
-        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -912,7 +908,7 @@ export const OrderDetails = memo(function OrderDetails({
   if (depositTxs?.length || waitingForDeposit) {
     return (
       <>
-        <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+        <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
         <OrderDetailsCollapsible
           order={order}
           dstToken={dstToken}
@@ -1011,7 +1007,7 @@ export const OrderDetails = memo(function OrderDetails({
 
   return (
     <>
-      <OrderStatus order={order} selectedCryptoPaymentMethod={orderStatusPaymentMethod} />
+      <OrderStatus order={order} selectedCryptoPaymentMethod={effectiveCryptoPaymentMethod} />
       {statusDisplay === "processing" && (
         <>
           {order.onrampMetadata ? (

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>

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

@@ -0,0 +1,20 @@
+interface PointsBadgeProps {
+  pointsAmount: number;
+  pointsMultiplier?: number;
+  onClick?: () => void;
+}
+
+export function PointsBadge({ pointsAmount, pointsMultiplier, onClick }: PointsBadgeProps) {
+  return (
+    <button
+      className="bg-as-brand hover:scale-102 active:scale-98 relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 transition-all"
+      onClick={onClick}
+    >
+      <div className="pointer-events-none absolute inset-0 h-full w-full rounded-lg border border-white/10 border-t-white/20 bg-gradient-to-b from-white/10 to-white/0" />
+      <span className="relative text-xs text-white">
+        +{pointsAmount.toLocaleString()} pts
+        {pointsMultiplier && pointsMultiplier > 1 && <span className="ml-1 opacity-80">({pointsMultiplier}x)</span>}
+      </span>
+    </button>
+  );
+}