@b3dotfun/sdk 0.0.40-test.6 → 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>
   );