@b3dotfun/sdk 0.0.40-test.3 → 0.0.40

package/dist/esm/anyspend/react/components/common/TransferCryptoDetails.js

@@ -10,8 +10,10 @@ import { QRCodeSVG } from "qrcode.react";
 import { memo, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { b3 } from "viem/chains";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";
-export const TransferCryptoDetails = memo(function TransferCryptoDetails({ order, srcToken, dstToken, tournament, nft, onBack, recipientName, }) {
+import { PaymentMethodSwitch } from "./PaymentMethodSwitch.js";
+export const TransferCryptoDetails = memo(function TransferCryptoDetails({ order, srcToken, dstToken, tournament, nft, onBack, recipientName, onPaymentMethodChange, }) {
     const [timeLeft, setTimeLeft] = useState(0);
     useEffect(() => {
         const calculateTimeLeft = () => {
@@ -62,9 +64,9 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({ order
         navigator.clipboard.writeText(order.globalAddress);
         toast.success("Deposit address copied to clipboard");
     };
-    return (_jsxs("div", { className: "flex w-full flex-col gap-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("button", { onClick: onBack, className: "text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors", children: _jsx(ChevronLeft, { size: 24, className: "text-as-quaternary" }) }), _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Transfer crypto" }), _jsxs("div", { className: "relative flex h-11 w-11 items-center justify-center", children: [_jsxs("svg", { className: "h-11 w-11 -rotate-90", viewBox: "0 0 44 44", children: [_jsx("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", className: "text-gray-200" }), _jsx("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", strokeLinecap: "round", className: "text-blue-500", strokeDasharray: `${2 * Math.PI * 18}`, strokeDashoffset: `${2 * Math.PI * 18 * (1 - timeLeft / totalTime)}`, style: {
+    return (_jsxs("div", { className: "order-transfer-crypto flex w-full flex-col gap-6", children: [_jsxs("div", { className: "order-transfer-crypto-header flex items-center justify-between", children: [_jsx("button", { onClick: onBack, className: "order-transfer-crypto-back-btn text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors", children: _jsx(ChevronLeft, { size: 24, className: "text-as-quaternary" }) }), _jsx("h2", { className: "order-transfer-crypto-title text-as-primary text-lg font-semibold", children: "Transfer crypto" }), _jsxs("div", { className: "order-transfer-crypto-timer relative flex h-11 w-11 items-center justify-center", children: [_jsxs("svg", { className: "order-transfer-crypto-timer-svg h-11 w-11 -rotate-90", viewBox: "0 0 44 44", children: [_jsx("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", className: "order-transfer-crypto-timer-bg text-gray-200" }), _jsx("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", strokeLinecap: "round", className: "order-transfer-crypto-timer-progress text-blue-500", strokeDasharray: `${2 * Math.PI * 18}`, strokeDashoffset: `${2 * Math.PI * 18 * (1 - timeLeft / totalTime)}`, style: {
                                             transition: "stroke-dashoffset 1s linear",
-                                        } })] }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "text-as-primary text-[10px] font-semibold", children: formatTime(timeLeft) }) })] })] }), _jsxs("div", { className: "flex w-full flex-col gap-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "w-full", children: [_jsx("span", { className: "text-as-content-secondary text-sm font-medium", children: "Amount" }), _jsx("div", { className: "border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsx(CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
+                                        } })] }), _jsx("div", { className: "order-transfer-crypto-timer-text absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "text-as-primary text-[10px] font-semibold", children: formatTime(timeLeft) }) })] })] }), _jsxs("div", { className: "order-transfer-crypto-content flex w-full flex-col gap-4", children: [_jsxs("div", { className: "order-transfer-crypto-cards flex items-center gap-4", children: [_jsxs("div", { className: "order-transfer-crypto-amount-card w-full", children: [_jsx("span", { className: "order-transfer-crypto-amount-label text-as-content-secondary text-sm font-medium", children: "Amount" }), _jsx("div", { className: "order-transfer-crypto-amount-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsx(CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
                                                 toast.success("Amount copied to clipboard");
-                                            }, children: _jsxs("div", { className: "flex cursor-pointer items-center justify-between gap-2", children: [_jsxs("strong", { className: "text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), _jsx(Copy, { className: "text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), _jsxs("div", { className: "w-full", children: [_jsx("span", { className: "text-as-content-secondary text-sm font-medium", children: "Chain" }), _jsx("div", { className: "border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none") }), _jsx("span", { className: "text-as-primary text-sm font-semibold", children: getChainName(order.srcChain) })] }) })] })] }), _jsxs("div", { className: "border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border", children: [_jsx("div", { className: "border-as-border-primary h-full w-full border-r", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "bg-as-surface-secondary max-h-48 max-w-48" }), _jsxs("div", { className: "mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "text-as-brand/70 text-sm font-medium", children: "SCAN WITH" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "h-5 w-5", variant: "branded" })] })] })] }) }) }), _jsxs("div", { className: "flex h-full w-full flex-col gap-2 p-6", children: [_jsx("span", { className: "text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), _jsxs("div", { className: "flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [_jsx("div", { className: "text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), _jsx("div", { className: "place-self-end", children: _jsx(Copy, { className: "group-hover:text-as-brand text-as-tertiarry h-4 w-4 cursor-pointer transition-all duration-200" }) })] })] })] }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })] }), _jsx("div", { className: "flex flex-col gap-3", children: _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "w-full py-3", onClick: handleCopyAddress, children: "Copy deposit address" }) })] }));
+                                            }, children: _jsxs("div", { className: "order-transfer-crypto-amount-copy flex cursor-pointer items-center justify-between gap-2", children: [_jsxs("strong", { className: "order-transfer-crypto-amount-text text-as-primary font-semibold", children: [roundedUpSrcAmount, " ", srcToken.symbol] }), _jsx(Copy, { className: "order-transfer-crypto-amount-copy-icon text-as-primary/50 hover:text-as-primary h-4 w-4 transition-all duration-200" })] }) }) })] }), _jsxs("div", { className: "order-transfer-crypto-chain-card w-full", children: [_jsx("span", { className: "order-transfer-crypto-chain-label text-as-content-secondary text-sm font-medium", children: "Chain" }), _jsx("div", { className: "order-transfer-crypto-chain-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsxs("div", { className: "order-transfer-crypto-chain-info flex items-center gap-2", children: [_jsx("img", { src: ALL_CHAINS[order.srcChain].logoUrl, alt: getChainName(order.srcChain), className: cn("order-transfer-crypto-chain-logo h-6 rounded-full", order.srcChain === b3.id && "h-5 rounded-none") }), _jsx("span", { className: "order-transfer-crypto-chain-name text-as-primary text-sm font-semibold", children: getChainName(order.srcChain) })] }) })] })] }), _jsxs("div", { className: "order-transfer-crypto-qr-deposit-card border-b3-react-border bg-as-surface-secondary grid h-[220px] grid-cols-2 overflow-hidden rounded-xl border", children: [_jsx("div", { className: "order-transfer-crypto-qr-section border-as-border-primary h-full w-full border-r", children: _jsx("div", { className: "order-transfer-crypto-qr-wrapper flex justify-center", children: _jsxs("div", { className: "order-transfer-crypto-qr-container bg-as-surface-secondary flex flex-col items-center rounded-lg p-6", children: [_jsx(QRCodeSVG, { value: getPaymentUrl(order.globalAddress, BigInt(order.srcAmount), order.srcTokenAddress === RELAY_ETH_ADDRESS ? "ETH" : order.srcTokenAddress, order.srcChain, srcToken?.decimals), className: "order-transfer-crypto-qr-code bg-as-surface-secondary max-h-48 max-w-48" }), _jsxs("div", { className: "order-transfer-crypto-wallet-hint mt-3 flex items-center justify-center gap-2 text-sm", children: [_jsx("span", { className: "order-transfer-crypto-wallet-text text-as-brand/70 text-sm font-medium", children: "SCAN WITH" }), _jsxs(TextLoop, { interval: 3, children: [_jsx(WalletMetamask, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletCoinbase, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletPhantom, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" }), _jsx(WalletTrust, { className: "order-transfer-crypto-wallet-icon h-5 w-5", variant: "branded" })] })] })] }) }) }), _jsxs("div", { className: "order-transfer-crypto-address-section flex h-full w-full flex-col gap-2 p-6", children: [_jsx("span", { className: "order-transfer-crypto-address-label text-as-content-secondary text-sm font-medium", children: "Deposit address:" }), _jsxs("div", { className: "order-transfer-crypto-address-copy flex h-full cursor-pointer flex-col items-stretch justify-between gap-4", onClick: handleCopyAddress, children: [_jsx("div", { className: "order-transfer-crypto-address-text text-as-primary break-all font-mono text-sm font-semibold leading-relaxed", children: order.globalAddress }), _jsx("div", { className: "order-transfer-crypto-address-copy-icon-wrapper place-self-end", children: _jsx(Copy, { className: "order-transfer-crypto-address-copy-icon group-hover:text-as-brand text-as-tertiarry h-4 w-4 cursor-pointer transition-all duration-200" }) })] })] })] }), _jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount })] }), _jsxs("div", { className: "order-transfer-crypto-actions flex flex-col gap-3", children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "order-transfer-crypto-copy-btn w-full py-3", onClick: handleCopyAddress, children: "Copy deposit address" }), _jsx(PaymentMethodSwitch, { currentMethod: CryptoPaymentMethodType.TRANSFER_CRYPTO, onMethodChange: onPaymentMethodChange })] })] }));
 });

package/dist/esm/global-account/react/components/B3Provider/B3Provider.d.ts

@@ -1,12 +1,13 @@
 import { PermissionsConfig } from "../../../../global-account/types/permissions";
-import "@reservoir0x/relay-kit-ui/styles.css";
 import { Account } from "thirdweb/wallets";
 import { ClientType } from "../../../client-manager";
 import { B3ContextType } from "./types";
+import "@reservoir0x/relay-kit-ui/styles.css";
+export declare const wagmiConfig: import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], any, readonly import("wagmi").CreateConnectorFn[]>;
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, partnerId, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;
@@ -18,7 +19,6 @@ export declare function B3Provider({ theme, children, accountOverride, environme
         style?: React.CSSProperties;
     };
     clientType?: ClientType;
-    partnerId?: string;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Inner provider component that provides the actual B3Context

package/dist/esm/global-account/react/components/B3Provider/B3Provider.js

@@ -1,19 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RelayKitProviderWrapper, TooltipProvider, useAuthStore } from "../../../../global-account/react/index.js";
 import { loadGA4Script } from "../../../../global-account/utils/analytics.js";
-import { ecosystemWalletId } from "../../../../shared/constants/index.js";
 import { supportedChains } from "../../../../shared/constants/chains/supported.js";
-import { client } from "../../../../shared/utils/thirdweb.js";
-import "@reservoir0x/relay-kit-ui/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { inAppWalletConnector } from "@thirdweb-dev/wagmi-adapter";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Toaster } from "sonner";
 import { getLastAuthProvider, ThirdwebProvider, useActiveAccount, useConnectedWallets, useSetActiveWallet, } from "thirdweb/react";
 import { createConfig, http, WagmiProvider } from "wagmi";
 import { setClientType } from "../../../client-manager.js";
 import { StyleRoot } from "../StyleRoot.js";
 import { B3Context } from "./types.js";
+import "@reservoir0x/relay-kit-ui/styles.css";
 /**
  * Default permissions configuration for B3 provider
  */
@@ -23,12 +20,16 @@ const DEFAULT_PERMISSIONS = {
     startDate: new Date(),
     endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
 };
+export const wagmiConfig = createConfig({
+    chains: [supportedChains[0], ...supportedChains.slice(1)],
+    transports: Object.fromEntries(supportedChains.map(chain => [chain.id, http()])),
+});
 // Create queryClient instance
 const queryClient = new QueryClient();
 /**
  * Main B3Provider component
  */
-export function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType = "rest", partnerId, }) {
+export function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType = "rest", }) {
     // Initialize Google Analytics on mount
     useEffect(() => {
         loadGA4Script();
@@ -37,27 +38,6 @@ export function B3Provider({ theme = "light", children, accountOverride, environ
     useEffect(() => {
         setClientType(clientType);
     }, [clientType]);
-    const ecocystemConfig = useMemo(() => {
-        if (!partnerId)
-            return undefined;
-        return {
-            ecosystemId: ecosystemWalletId,
-            partnerId: partnerId,
-            client,
-        };
-    }, [partnerId]);
-    const wagmiConfig = useMemo(() => createConfig({
-        chains: [supportedChains[0], ...supportedChains.slice(1)],
-        transports: Object.fromEntries(supportedChains.map(chain => [chain.id, http()])),
-        connectors: [
-            inAppWalletConnector({
-                ...ecocystemConfig,
-                client,
-            }),
-            // injected(),
-            // coinbaseWallet({ appName: "HypeDuel" }),
-        ],
-    }), [partnerId]);
     return (_jsx(WagmiProvider, { config: wagmiConfig, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThirdwebProvider, { children: _jsx(TooltipProvider, { children: _jsx(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, clientType: clientType, children: _jsxs(RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, _jsx(StyleRoot, { id: "b3-root" }), _jsx(Toaster, { theme: theme, position: toaster?.position, style: toaster?.style })] }) }) }) }) }) }));
 }
 /**

package/dist/types/anyspend/constants/index.d.ts

@@ -37,4 +37,3 @@ export declare const VENDOR_DISPLAY_NAMES: {
     readonly stripe: "Stripe";
     readonly unknown: "Unknown Vendor";
 };
-export declare const DEPOSIT_HYPE_ACTION = "deposit_hype";

package/dist/types/anyspend/react/components/common/ConnectWalletPayment.d.ts

@@ -12,6 +12,7 @@ interface ConnectWalletPaymentProps {
     tournament?: Tournament;
     nft?: NFT;
     cryptoPaymentMethod: CryptoPaymentMethodType;
+    onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
 }
-export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, cryptoPaymentMethod, }: ConnectWalletPaymentProps): import("react/jsx-runtime").JSX.Element;
+export default function ConnectWalletPayment({ order, onPayment, txLoading, isSwitchingOrExecuting, phantomWalletAddress, tournament, nft, cryptoPaymentMethod, onPaymentMethodChange, }: ConnectWalletPaymentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/anyspend/react/components/common/OrderDetails.d.ts

@@ -8,6 +8,8 @@ interface OrderDetailsProps {
     executeTx: components["schemas"]["ExecuteTx"] | null;
     refundTxs: components["schemas"]["RefundTx"][];
     cryptoPaymentMethod?: CryptoPaymentMethodType;
+    selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
+    onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
     onBack?: () => void;
     disableUrlParamManagement?: boolean;
 }

package/dist/types/anyspend/react/components/common/PaymentMethodSwitch.d.ts

@@ -0,0 +1,7 @@
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+interface PaymentMethodSwitchProps {
+    currentMethod: CryptoPaymentMethodType;
+    onMethodChange?: (method: CryptoPaymentMethodType) => void;
+}
+export declare function PaymentMethodSwitch({ currentMethod, onMethodChange }: PaymentMethodSwitchProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/anyspend/react/components/common/TransferCryptoDetails.d.ts

@@ -1,4 +1,5 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 type Order = components["schemas"]["Order"];
 type Token = components["schemas"]["Token"];
 type Tournament = components["schemas"]["Tournament"];
@@ -11,6 +12,7 @@ interface TransferCryptoDetailsProps {
     nft?: NFT;
     onBack: () => void;
     recipientName?: string;
+    onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
 }
 export declare const TransferCryptoDetails: import("react").NamedExoticComponent<TransferCryptoDetailsProps>;
 export {};

package/dist/types/global-account/react/components/B3Provider/B3Provider.d.ts

@@ -1,12 +1,13 @@
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
-import "@reservoir0x/relay-kit-ui/styles.css";
 import { Account } from "thirdweb/wallets";
 import { ClientType } from "../../../client-manager";
 import { B3ContextType } from "./types";
+import "@reservoir0x/relay-kit-ui/styles.css";
+export declare const wagmiConfig: import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], any, readonly import("wagmi").CreateConnectorFn[]>;
 /**
  * Main B3Provider component
  */
-export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, partnerId, }: {
+export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, }: {
     theme: "light" | "dark";
     children: React.ReactNode;
     accountOverride?: Account;
@@ -18,7 +19,6 @@ export declare function B3Provider({ theme, children, accountOverride, environme
         style?: React.CSSProperties;
     };
     clientType?: ClientType;
-    partnerId?: string;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Inner provider component that provides the actual B3Context

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.0.40-test.3",
+  "version": "0.0.40",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -241,8 +241,8 @@
     "@b3dotfun/basement-api": "0.0.11",
     "@feathersjs/authentication-client": "5.0.33",
     "@feathersjs/feathers": "5.0.33",
-    "@feathersjs/rest-client": "5.0.33",
     "@feathersjs/socketio-client": "5.0.33",
+    "@feathersjs/rest-client": "5.0.33",
     "@feathersjs/typebox": "5.0.33",
     "@fingerprintjs/fingerprintjs-pro-react": "^2.7.0",
     "@hey-api/client-fetch": "0.8.3",
@@ -261,7 +261,6 @@
     "@solana/web3.js": "^1.98.2",
     "@stripe/react-stripe-js": "^3.7.0",
     "@stripe/stripe-js": "^7.3.1",
-    "@thirdweb-dev/wagmi-adapter": "^0.2.141",
     "@web3icons/react": "3.16.0",
     "big.js": "^7.0.1",
     "class-variance-authority": "0.7.0",
@@ -332,8 +331,8 @@
     "react-native-mmkv": "^3.2.0",
     "thirdweb": "^5.105.20",
     "three": "^0.175.0",
-    "viem": "^2.28.1",
-    "wagmi": "^2.14.15"
+    "wagmi": "^2.14.15",
+    "viem": "^2.28.1"
   },
   "peerDependenciesMeta": {
     "@react-three/postprocessing": {

package/src/anyspend/constants/index.ts

@@ -96,5 +96,3 @@ export const VENDOR_DISPLAY_NAMES = {
   stripe: "Stripe",
   unknown: "Unknown Vendor",
 } as const;
-
-export const DEPOSIT_HYPE_ACTION = "deposit_hype";

package/src/anyspend/react/components/AnySpend.tsx

@@ -38,7 +38,6 @@ import { ErrorSection } from "./common/ErrorSection";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails, OrderDetailsLoadingView } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
-import { OrderStatus } from "./common/OrderStatus";
 import { PanelOnramp } from "./common/PanelOnramp";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
 import { RecipientSelection } from "./common/RecipientSelection";
@@ -807,22 +806,21 @@ function AnySpendInner({
     <div className={"mx-auto w-[460px] max-w-full"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
-          <>
-            <OrderStatus order={oat.data.order} selectedCryptoPaymentMethod={selectedCryptoPaymentMethod} />
-            <OrderDetails
-              mode={mode}
-              order={oat.data.order}
-              depositTxs={oat.data.depositTxs}
-              relayTxs={oat.data.relayTxs}
-              executeTx={oat.data.executeTx}
-              refundTxs={oat.data.refundTxs}
-              onBack={() => {
-                setOrderId(undefined);
-                setActivePanel(PanelView.MAIN);
-                setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
-              }}
-            />
-          </>
+          <OrderDetails
+            mode={mode}
+            order={oat.data.order}
+            depositTxs={oat.data.depositTxs}
+            relayTxs={oat.data.relayTxs}
+            executeTx={oat.data.executeTx}
+            refundTxs={oat.data.refundTxs}
+            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+            onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+            onBack={() => {
+              setOrderId(undefined);
+              setActivePanel(PanelView.MAIN);
+              setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when going back
+            }}
+          />
         )}
         {/* {mode === "page" && <div className="h-12" />} */}
       </div>

package/src/anyspend/react/components/AnySpendCustom.tsx

@@ -47,7 +47,6 @@ import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPay
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
 import { OrderHistory } from "./common/OrderHistory";
-import { OrderStatus as OrderStatusDisplay } from "./common/OrderStatus";
 import { OrderToken } from "./common/OrderToken";
 import { RecipientSelection } from "./common/RecipientSelection";
 
@@ -648,26 +647,25 @@ function AnySpendCustomInner({
       )}
     >
       {oat && (
-        <>
-          <OrderStatusDisplay order={oat.data.order} selectedCryptoPaymentMethod={selectedCryptoPaymentMethod} />
-          <OrderDetails
-            mode={mode}
-            order={oat.data.order}
-            depositTxs={oat.data.depositTxs}
-            relayTxs={oat.data.relayTxs}
-            executeTx={oat.data.executeTx}
-            refundTxs={oat.data.refundTxs}
-            cryptoPaymentMethod={activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
-            onBack={() => {
-              setOrderId(undefined);
-              setActivePanel(PanelView.CONFIRM_ORDER);
-              // Remove orderId from URL when canceling
-              const params = new URLSearchParams(searchParams.toString());
-              params.delete("orderId");
-              router.push(`${window.location.pathname}?${params.toString()}`);
-            }}
-          />
-        </>
+        <OrderDetails
+          mode={mode}
+          order={oat.data.order}
+          depositTxs={oat.data.depositTxs}
+          relayTxs={oat.data.relayTxs}
+          executeTx={oat.data.executeTx}
+          refundTxs={oat.data.refundTxs}
+          cryptoPaymentMethod={activeTab === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
+          selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+          onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+          onBack={() => {
+            setOrderId(undefined);
+            setActivePanel(PanelView.CONFIRM_ORDER);
+            // Remove orderId from URL when canceling
+            const params = new URLSearchParams(searchParams.toString());
+            params.delete("orderId");
+            router.push(`${window.location.pathname}?${params.toString()}`);
+          }}
+        />
       )}
       {mode === "page" && <div className="h-12" />}
     </div>

package/src/anyspend/react/components/AnyspendDepositHype.tsx

@@ -14,7 +14,6 @@ import { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 import { ErrorSection } from "./common/ErrorSection";
 import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
 import { OrderDetails } from "./common/OrderDetails";
-import { OrderStatus } from "./common/OrderStatus";
 import { RecipientSelection } from "./common/RecipientSelection";
 
 import { ArrowDown } from "lucide-react";
@@ -381,23 +380,22 @@ function AnySpendDepositHypeInner({
     <div className={"mx-auto w-[460px] max-w-full"}>
       <div className="relative flex flex-col gap-4">
         {oat && (
-          <>
-            <OrderStatus order={oat.data.order} selectedCryptoPaymentMethod={selectedCryptoPaymentMethod} />
-            <OrderDetails
-              mode={mode}
-              order={oat.data.order}
-              depositTxs={oat.data.depositTxs}
-              relayTxs={oat.data.relayTxs}
-              executeTx={oat.data.executeTx}
-              refundTxs={oat.data.refundTxs}
-              cryptoPaymentMethod={paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
-              onBack={() => {
-                setOrderId(undefined);
-                setActivePanel(PanelView.MAIN);
-              }}
-              disableUrlParamManagement
-            />
-          </>
+          <OrderDetails
+            mode={mode}
+            order={oat.data.order}
+            depositTxs={oat.data.depositTxs}
+            relayTxs={oat.data.relayTxs}
+            executeTx={oat.data.executeTx}
+            refundTxs={oat.data.refundTxs}
+            cryptoPaymentMethod={paymentType === "fiat" ? CryptoPaymentMethodType.NONE : selectedCryptoPaymentMethod}
+            selectedCryptoPaymentMethod={selectedCryptoPaymentMethod}
+            onPaymentMethodChange={setSelectedCryptoPaymentMethod}
+            onBack={() => {
+              setOrderId(undefined);
+              setActivePanel(PanelView.MAIN);
+            }}
+            disableUrlParamManagement
+          />
         )}
       </div>
     </div>

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

@@ -10,6 +10,7 @@ import { ChevronRight, Loader2 } from "lucide-react";
 import { useAccount } from "wagmi";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
+import { PaymentMethodSwitch } from "./PaymentMethodSwitch";
 
 type Tournament = components["schemas"]["Tournament"];
 type NFT = components["schemas"]["NFT"];
@@ -24,6 +25,7 @@ interface ConnectWalletPaymentProps {
   tournament?: Tournament;
   nft?: NFT;
   cryptoPaymentMethod: CryptoPaymentMethodType;
+  onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
 }
 
 export default function ConnectWalletPayment({
@@ -35,6 +37,7 @@ export default function ConnectWalletPayment({
   tournament,
   nft,
   cryptoPaymentMethod,
+  onPaymentMethodChange,
 }: ConnectWalletPaymentProps) {
   const profile = useProfile({ address: order.recipientAddress });
   const recipientName = profile.data?.name?.replace(/\.b3\.fun/g, "");
@@ -97,6 +100,8 @@ export default function ConnectWalletPayment({
             : centerTruncate(connectedAddress || "")}
         </span>
 
+        <PaymentMethodSwitch currentMethod={cryptoPaymentMethod} onMethodChange={onPaymentMethodChange} />
+
         <div className="mt-4">
           <OrderDetailsCollapsible
             order={order}