@b3dotfun/sdk 0.0.29 → 0.0.30-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/dist/cjs/anyspend/constants/index.d.ts +1 -0
  2. package/dist/cjs/anyspend/constants/index.js +2 -1
  3. package/dist/cjs/anyspend/react/components/AnySpend.js +1 -1
  4. package/dist/cjs/anyspend/react/components/AnySpendBondKit.d.ts +1 -1
  5. package/dist/cjs/anyspend/react/components/AnySpendBondKit.js +23 -24
  6. package/dist/cjs/anyspend/react/components/AnySpendCustom.js +1 -1
  7. package/dist/cjs/anyspend/react/components/AnyspendDepositHype.d.ts +4 -2
  8. package/dist/cjs/anyspend/react/components/AnyspendDepositHype.js +17 -10
  9. package/dist/cjs/anyspend/react/components/common/ConnectWalletPayment.js +9 -1
  10. package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js +130 -41
  11. package/dist/cjs/anyspend/react/components/common/OrderDetails.js +6 -3
  12. package/dist/cjs/anyspend/react/components/common/OrderDetailsCollapsible.js +6 -4
  13. package/dist/cjs/anyspend/react/components/common/OrderStatus.d.ts +2 -0
  14. package/dist/cjs/anyspend/react/components/common/OrderStatus.js +2 -2
  15. package/dist/cjs/anyspend/react/components/common/PaySection.js +6 -4
  16. package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.d.ts +2 -1
  17. package/dist/cjs/anyspend/react/hooks/useAnyspendFlow.js +34 -3
  18. package/dist/cjs/anyspend/react/hooks/useSigMint.d.ts +1 -1
  19. package/dist/cjs/bondkit/abis/BondkitTokenABI.d.ts +62 -17
  20. package/dist/cjs/bondkit/abis/BondkitTokenABI.js +41 -9
  21. package/dist/cjs/bondkit/abis/BondkitTokenFactoryABI.d.ts +0 -25
  22. package/dist/cjs/bondkit/abis/BondkitTokenFactoryABI.js +0 -9
  23. package/dist/cjs/bondkit/constants.js +1 -1
  24. package/dist/cjs/global-account/react/components/LinkAccount/LinkAccount.js +28 -15
  25. package/dist/cjs/global-account/react/components/ManageAccount/ManageAccount.js +1 -1
  26. package/dist/cjs/global-account/react/hooks/useUnifiedChainSwitchAndExecute.d.ts +1 -0
  27. package/dist/cjs/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +1 -0
  28. package/dist/cjs/global-account/react/stores/useModalStore.d.ts +4 -2
  29. package/dist/cjs/shared/constants/chains/b3Chain.d.ts +2 -2
  30. package/dist/cjs/shared/constants/chains/supported.d.ts +4 -4
  31. package/dist/esm/anyspend/constants/index.d.ts +1 -0
  32. package/dist/esm/anyspend/constants/index.js +1 -0
  33. package/dist/esm/anyspend/react/components/AnySpend.js +1 -1
  34. package/dist/esm/anyspend/react/components/AnySpendBondKit.d.ts +1 -1
  35. package/dist/esm/anyspend/react/components/AnySpendBondKit.js +23 -24
  36. package/dist/esm/anyspend/react/components/AnySpendCustom.js +1 -1
  37. package/dist/esm/anyspend/react/components/AnyspendDepositHype.d.ts +4 -2
  38. package/dist/esm/anyspend/react/components/AnyspendDepositHype.js +19 -12
  39. package/dist/esm/anyspend/react/components/common/ConnectWalletPayment.js +6 -1
  40. package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js +133 -44
  41. package/dist/esm/anyspend/react/components/common/OrderDetails.js +7 -4
  42. package/dist/esm/anyspend/react/components/common/OrderDetailsCollapsible.js +7 -5
  43. package/dist/esm/anyspend/react/components/common/OrderStatus.d.ts +2 -0
  44. package/dist/esm/anyspend/react/components/common/OrderStatus.js +2 -2
  45. package/dist/esm/anyspend/react/components/common/PaySection.js +7 -5
  46. package/dist/esm/anyspend/react/hooks/useAnyspendFlow.d.ts +2 -1
  47. package/dist/esm/anyspend/react/hooks/useAnyspendFlow.js +35 -4
  48. package/dist/esm/anyspend/react/hooks/useSigMint.d.ts +1 -1
  49. package/dist/esm/bondkit/abis/BondkitTokenABI.d.ts +62 -17
  50. package/dist/esm/bondkit/abis/BondkitTokenABI.js +41 -9
  51. package/dist/esm/bondkit/abis/BondkitTokenFactoryABI.d.ts +0 -25
  52. package/dist/esm/bondkit/abis/BondkitTokenFactoryABI.js +0 -9
  53. package/dist/esm/bondkit/constants.js +1 -1
  54. package/dist/esm/global-account/react/components/LinkAccount/LinkAccount.js +28 -15
  55. package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js +1 -1
  56. package/dist/esm/global-account/react/hooks/useUnifiedChainSwitchAndExecute.d.ts +1 -0
  57. package/dist/esm/global-account/react/hooks/useUnifiedChainSwitchAndExecute.js +1 -0
  58. package/dist/esm/global-account/react/stores/useModalStore.d.ts +4 -2
  59. package/dist/esm/shared/constants/chains/b3Chain.d.ts +2 -2
  60. package/dist/esm/shared/constants/chains/supported.d.ts +4 -4
  61. package/dist/styles/index.css +1 -1
  62. package/dist/types/anyspend/constants/index.d.ts +1 -0
  63. package/dist/types/anyspend/react/components/AnySpendBondKit.d.ts +1 -1
  64. package/dist/types/anyspend/react/components/AnyspendDepositHype.d.ts +4 -2
  65. package/dist/types/anyspend/react/components/common/OrderStatus.d.ts +2 -0
  66. package/dist/types/anyspend/react/hooks/useAnyspendFlow.d.ts +2 -1
  67. package/dist/types/anyspend/react/hooks/useSigMint.d.ts +1 -1
  68. package/dist/types/bondkit/abis/BondkitTokenABI.d.ts +62 -17
  69. package/dist/types/bondkit/abis/BondkitTokenFactoryABI.d.ts +0 -25
  70. package/dist/types/global-account/react/hooks/useUnifiedChainSwitchAndExecute.d.ts +1 -0
  71. package/dist/types/global-account/react/stores/useModalStore.d.ts +4 -2
  72. package/dist/types/shared/constants/chains/b3Chain.d.ts +2 -2
  73. package/dist/types/shared/constants/chains/supported.d.ts +4 -4
  74. package/package.json +1 -1
  75. package/src/anyspend/constants/index.ts +2 -0
  76. package/src/anyspend/react/components/AnySpend.tsx +1 -1
  77. package/src/anyspend/react/components/AnySpendBondKit.tsx +28 -28
  78. package/src/anyspend/react/components/AnySpendCustom.tsx +1 -1
  79. package/src/anyspend/react/components/AnyspendDepositHype.tsx +142 -130
  80. package/src/anyspend/react/components/common/ConnectWalletPayment.tsx +9 -0
  81. package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx +289 -103
  82. package/src/anyspend/react/components/common/OrderDetails.tsx +7 -3
  83. package/src/anyspend/react/components/common/OrderDetailsCollapsible.tsx +10 -4
  84. package/src/anyspend/react/components/common/OrderStatus.tsx +9 -2
  85. package/src/anyspend/react/components/common/PaySection.tsx +9 -7
  86. package/src/anyspend/react/hooks/useAnyspendFlow.ts +41 -3
  87. package/src/bondkit/abis/BondkitTokenABI.ts +41 -9
  88. package/src/bondkit/abis/BondkitTokenFactoryABI.ts +0 -9
  89. package/src/bondkit/constants.ts +1 -1
  90. package/src/global-account/react/components/LinkAccount/LinkAccount.tsx +26 -10
  91. package/src/global-account/react/components/ManageAccount/ManageAccount.tsx +5 -1
  92. package/src/global-account/react/hooks/useUnifiedChainSwitchAndExecute.ts +1 -0
  93. package/src/global-account/react/stores/useModalStore.ts +4 -2
  94. package/dist/cjs/anyspend/abis/bondKit.d.ts +0 -35
  95. package/dist/cjs/anyspend/abis/bondKit.js +0 -29
  96. package/dist/esm/anyspend/abis/bondKit.d.ts +0 -35
  97. package/dist/esm/anyspend/abis/bondKit.js +0 -26
  98. package/dist/types/anyspend/abis/bondKit.d.ts +0 -35
  99. package/src/anyspend/abis/bondKit.ts +0 -26
@@ -1,17 +1,13 @@
1
1
  "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import { useAccountWallet } from "../../../../global-account/react/index.js";
4
- import { thirdwebB3Mainnet } from "../../../../shared/constants/chains/b3Chain.js";
5
4
  import { cn } from "../../../../shared/utils/cn.js";
6
5
  import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
7
- import { client } from "../../../../shared/utils/thirdweb.js";
8
- import { ChevronLeft, ChevronRightCircle, Wallet, X } from "lucide-react";
6
+ import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
9
7
  import { useState } from "react";
10
8
  import { createPortal } from "react-dom";
11
9
  import { toast } from "sonner";
12
- import { ConnectEmbed, lightTheme, useActiveWallet, useDisconnect as useThirdwebDisconnect } from "thirdweb/react";
13
- import { createWallet } from "thirdweb/wallets";
14
- import { useDisconnect } from "wagmi";
10
+ import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
15
11
  export var CryptoPaymentMethodType;
16
12
  (function (CryptoPaymentMethodType) {
17
13
  CryptoPaymentMethodType["NONE"] = "none";
@@ -20,45 +16,138 @@ export var CryptoPaymentMethodType;
20
16
  })(CryptoPaymentMethodType || (CryptoPaymentMethodType = {}));
21
17
  export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
22
18
  const { wallet: globalWallet } = useAccountWallet();
23
- const activeWallet = useActiveWallet();
19
+ const { address, isConnected, connector } = useAccount();
20
+ const { connect, connectors, isPending } = useConnect();
24
21
  const { disconnect } = useDisconnect();
25
- const { disconnect: disconnectThirdweb } = useThirdwebDisconnect();
22
+ const { data: walletClient } = useWalletClient();
26
23
  const [showWalletModal, setShowWalletModal] = useState(false);
27
- // Define available wallets for the modal
28
- const availableWallets = [
29
- createWallet("io.metamask"),
30
- // createWallet("com.coinbase.wallet"),
31
- createWallet("me.rainbow"),
32
- createWallet("walletConnect"),
33
- createWallet("io.rabby"),
34
- createWallet("app.phantom"),
35
- ];
36
- return (_jsxs("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full", children: [_jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_jsx("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Choose payment method" }) }) }), _jsxs("div", { className: "crypto-payment-methods flex flex-col gap-3", children: [!activeWallet ? (
37
- // Not connected - show single connect button
38
- _jsxs("button", { onClick: () => 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", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }), _jsx("p", { className: "text-as-primary/60 text-sm", children: "Choose from multiple wallet options" })] })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })) : (
39
- // Connected - show wallet info
40
- _jsx("div", { className: "crypto-payment-method-connect-wallet wallet-connected bg-as-surface-primary border-as-border-secondary rounded-xl border", children: _jsxs("div", { className: "flex items-center justify-between p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-8 w-8 rounded-full" })) : (_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: _jsx(Wallet, { className: "h-4 w-4 text-green-600" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(activeWallet.getAccount()?.address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: () => {
41
- setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
42
- onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
43
- }, className: "bg-as-brand hover:bg-as-brand/90 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors", children: "Use Wallet" }), _jsx("button", { onClick: async () => {
44
- disconnect();
45
- disconnectThirdweb(activeWallet);
46
- toast.success("Wallet disconnected");
47
- if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
48
- setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
49
- }
50
- }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: _jsx(X, { className: "h-4 w-4" }) })] })] }) })), _jsxs("button", { onClick: () => {
24
+ const [selectedWalletConnector, setSelectedWalletConnector] = useState(null);
25
+ const [modalStep, setModalStep] = useState("wallet-selection");
26
+ // Define available wallet connectors
27
+ const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow"].includes(connector.name));
28
+ // Define wallet options with icons and info
29
+ const walletOptions = [
30
+ {
31
+ id: "metamask",
32
+ name: "MetaMask",
33
+ icon: "🦊",
34
+ description: "Connect using MetaMask browser extension",
35
+ connector: availableConnectors.find(c => c.name === "MetaMask"),
36
+ },
37
+ {
38
+ id: "coinbase",
39
+ name: "Coinbase Wallet",
40
+ icon: "🔵",
41
+ description: "Connect using Coinbase Wallet",
42
+ connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
43
+ },
44
+ {
45
+ id: "rainbow",
46
+ name: "Rainbow",
47
+ icon: "🌈",
48
+ description: "Connect using Rainbow wallet",
49
+ connector: availableConnectors.find(c => c.name === "Rainbow"),
50
+ },
51
+ {
52
+ id: "walletconnect",
53
+ name: "WalletConnect",
54
+ icon: "🔗",
55
+ description: "Connect using WalletConnect protocol",
56
+ connector: availableConnectors.find(c => c.name === "WalletConnect"),
57
+ },
58
+ ].filter(wallet => wallet.connector); // Only show wallets that have available connectors
59
+ // Reset modal state when closing
60
+ const handleCloseModal = () => {
61
+ setShowWalletModal(false);
62
+ setModalStep("wallet-selection");
63
+ setSelectedWalletConnector(null);
64
+ };
65
+ // Function to request wallet permissions for specific wallet
66
+ const requestWalletPermissions = async (walletConnector) => {
67
+ try {
68
+ // If a specific wallet connector is provided and it's different from current
69
+ if (walletConnector && connector?.name !== walletConnector.name) {
70
+ // Disconnect current and connect to the selected wallet
71
+ // if (isConnected) {
72
+ // disconnect();
73
+ // // Small delay to ensure disconnection
74
+ // await new Promise(resolve => setTimeout(resolve, 100));
75
+ // }
76
+ await connect({ connector: walletConnector });
77
+ setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
78
+ onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
79
+ toast.success(`Connected to ${walletConnector.name}`);
80
+ return;
81
+ }
82
+ // If same wallet or no specific wallet, request permissions for account switching
83
+ if (walletClient && "request" in walletClient) {
84
+ await walletClient.request({
85
+ method: "wallet_requestPermissions",
86
+ params: [{ eth_accounts: {} }],
87
+ });
88
+ toast.success("Account selection completed");
89
+ setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
90
+ onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
91
+ }
92
+ else {
93
+ // Fallback: show modal for manual wallet selection
94
+ setShowWalletModal(true);
95
+ }
96
+ }
97
+ catch (error) {
98
+ console.error("Failed to request wallet permissions:", error);
99
+ if (error && typeof error === "object" && "message" in error) {
100
+ const errorMessage = error.message.toLowerCase();
101
+ if (errorMessage.includes("rejected") ||
102
+ errorMessage.includes("denied") ||
103
+ errorMessage.includes("cancelled")) {
104
+ toast.error("Account selection cancelled");
105
+ }
106
+ else {
107
+ toast.error("Failed to open account selection");
108
+ }
109
+ }
110
+ else {
111
+ toast.error("Failed to open account selection");
112
+ }
113
+ }
114
+ };
115
+ return (_jsxs("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full", children: [_jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_jsx("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), _jsxs("div", { className: "crypto-payment-methods flex flex-col gap-6", children: [_jsxs("button", { onClick: () => {
116
+ // Always show wallet selection modal first
117
+ setShowWalletModal(true);
118
+ }, 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", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-4 w-4 text-blue-600" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), _jsxs("button", { onClick: () => {
51
119
  setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
52
120
  onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
53
- }, 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", children: [_jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] }), showWalletModal &&
54
- createPortal(_jsx("div", { className: "pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Connect Wallet" }), _jsx("button", { onClick: () => setShowWalletModal(false), className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx(ConnectEmbed, { client: client, chain: thirdwebB3Mainnet, wallets: availableWallets, showThirdwebBranding: false, theme: lightTheme(), onConnect: async (wallet) => {
55
- console.log("Wallet connected:", wallet);
56
- // setShowWalletModal(false);
57
- setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
58
- onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
59
- setShowWalletModal(false);
60
- }, style: {
61
- width: "100%",
62
- minHeight: "300px",
63
- } })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
121
+ }, 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", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: _jsx(ZapIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), isConnected && (_jsxs("div", { className: "installed-wallets", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), _jsx("div", { className: "space-y-2", children: _jsx("button", { onClick: () => {
122
+ setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
123
+ onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
124
+ toast.success(`Selected ${connector?.name || "wallet"}`);
125
+ }, 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
126
+ ? "connected-wallet border-as-brand bg-as-brand/5"
127
+ : "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet.meta.icon, alt: "Wallet", className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })), _jsx("button", { onClick: e => {
128
+ e.stopPropagation();
129
+ disconnect();
130
+ toast.success("Wallet disconnected");
131
+ if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
132
+ setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
133
+ }
134
+ }, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: _jsx(X, { className: "h-4 w-4" }) })] })] }) }) })] }))] })] }), showWalletModal &&
135
+ createPortal(_jsx("div", { className: "pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [modalStep === "account-selection" && (_jsx("button", { onClick: () => setModalStep("wallet-selection"), className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(ChevronLeft, { className: "h-5 w-5" }) })), _jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: modalStep === "wallet-selection"
136
+ ? "Select a payment method"
137
+ : `Connect ${selectedWalletConnector?.name}` })] }), _jsx("button", { onClick: handleCloseModal, className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "space-y-4", children: modalStep === "wallet-selection" ? (_jsx(_Fragment, { children: _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: isConnected ? "Switch wallet or account" : "Choose wallet to connect" }), walletOptions.map(walletOption => {
138
+ const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
139
+ return (_jsx("button", { onClick: async () => {
140
+ setSelectedWalletConnector(walletOption.connector);
141
+ setModalStep("account-selection");
142
+ }, disabled: isPending, className: `w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
143
+ ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
144
+ : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-12 w-12 items-center justify-center rounded-xl text-xl ${isCurrentWallet ? "bg-blue-100 dark:bg-blue-800" : "bg-gray-100 dark:bg-gray-700"}`, children: walletOption.icon }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && (_jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200", children: "Connected" }))] }), _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), _jsx(ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
145
+ })] }) })) : (
146
+ /* Account Selection Step */
147
+ _jsxs("div", { className: "space-y-4", children: [_jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: ["Connect to ", selectedWalletConnector?.name, " to view available accounts"] }), _jsx("button", { onClick: async () => {
148
+ handleCloseModal();
149
+ await requestWalletPermissions(selectedWalletConnector);
150
+ }, disabled: isPending, className: "w-full rounded-lg border border-gray-200 bg-white p-4 text-center transition-all hover:border-gray-300 hover:shadow-md disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500", children: _jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700", children: _jsx(Wallet, { className: "h-5 w-5 text-gray-600 dark:text-gray-400" }) }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: isPending
151
+ ? `Connecting to ${selectedWalletConnector?.name}...`
152
+ : `Connect ${selectedWalletConnector?.name}` }), _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isPending ? "Please check your wallet" : "Click to connect and select account" })] })] }) })] })) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
64
153
  }
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { ALL_CHAINS, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID, } from "../../../../anyspend/index.js";
3
+ import { ALL_CHAINS, DEPOSIT_HYPE_ACTION, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, RELAY_ETH_ADDRESS, RELAY_SOLANA_MAINNET_CHAIN_ID, } from "../../../../anyspend/index.js";
4
4
  import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useModalStore, useProfile, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
5
5
  import { useRouter, useSearchParams } from "../../../../shared/react/hooks/index.js";
6
6
  import { cn } from "../../../../shared/utils/index.js";
@@ -43,6 +43,9 @@ function getOrderSuccessText({ order, tournament, formattedActualDstAmount, dstT
43
43
  actionText = `funded ${tournament?.name}`;
44
44
  return `Successfully ${actionText}`;
45
45
  case "custom":
46
+ if (order.metadata.action === DEPOSIT_HYPE_ACTION) {
47
+ return `Successfully deposited ${formatTokenAmount(BigInt(order.payload?.amount || "0"), 18)} HYPE to ${recipient}`;
48
+ }
46
49
  actionText = order.metadata.action || `executed contract`;
47
50
  return `Successfully ${actionText}`;
48
51
  default:
@@ -139,7 +142,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
139
142
  const [txHash, setTxHash] = useState();
140
143
  const [showQRCode, setShowQRCode] = useState(false);
141
144
  const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
142
- const { switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
145
+ const { switchChainAndExecuteWithEOA, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
143
146
  const { colorMode } = useColorMode();
144
147
  const roundedUpSrcAmount = useMemo(() => {
145
148
  // Display the full transfer amount without rounding since users need to see the exact value they're transferring.
@@ -169,11 +172,11 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
169
172
  to = order.srcTokenAddress;
170
173
  value = BigInt(0);
171
174
  }
172
- const txHash = await switchChainAndExecute(order.srcChain, { to, data: txData, value });
175
+ const txHash = await switchChainAndExecuteWithEOA(order.srcChain, { to, data: txData, value });
173
176
  if (txHash) {
174
177
  setTxHash(txHash);
175
178
  }
176
- }, [order, switchChainAndExecute]);
179
+ }, [order, switchChainAndExecuteWithEOA]);
177
180
  // Main payment handler that triggers chain switch and payment
178
181
  const handlePayment = async () => {
179
182
  console.log("Initiating payment process. Target chain:", order.srcChain, "Current chain:", walletClient?.chain?.id);
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { ALL_CHAINS, capitalizeFirstLetter, getChainName } from "../../../../anyspend/index.js";
3
+ import { ALL_CHAINS, capitalizeFirstLetter, DEPOSIT_HYPE_ACTION, getChainName } from "../../../../anyspend/index.js";
4
4
  import { CopyToClipboard } from "../../../../global-account/react/index.js";
5
5
  import { cn } from "../../../../shared/utils/index.js";
6
6
  import centerTruncate from "../../../../shared/utils/centerTruncate.js";
@@ -29,8 +29,10 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({ o
29
29
  : order.type === "fund_tournament"
30
30
  ? "Fund tournament"
31
31
  : order.type === "custom"
32
- ? order.metadata.action
33
- ? capitalizeFirstLetter(order.metadata.action)
34
- : "Contract execution"
35
- : "" }), _jsxs("div", { className: "flex items-end gap-2", children: [order.type === "swap" ? (`~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === "mint_nft" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "h-5 w-5" }), _jsx("div", { children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "h-5 w-5" }), _jsx("div", { children: tournament?.name || "Tournament" })] })) : null, _jsxs("div", { className: "text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex w-full justify-between gap-4", children: [_jsx("div", { className: "text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "flex w-full items-center", children: [_jsx("div", { className: "divider w-full" }), _jsx("button", { className: "whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "divider w-full" })] })) }));
32
+ ? order.metadata.action === DEPOSIT_HYPE_ACTION
33
+ ? "Deposit HYPE"
34
+ : order.metadata.action
35
+ ? capitalizeFirstLetter(order.metadata.action)
36
+ : "Contract execution"
37
+ : "" }), _jsxs("div", { className: "flex items-end gap-2", children: [order.type === "swap" ? (`~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`) : order.type === "mint_nft" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: nft?.imageUrl, alt: nft?.name || "NFT", className: "h-5 w-5" }), _jsx("div", { children: nft?.name || "NFT" })] })) : order.type === "join_tournament" || order.type === "fund_tournament" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: tournament?.imageUrl, alt: tournament?.name || "Tournament", className: "h-5 w-5" }), _jsx("div", { children: tournament?.name || "Tournament" })] })) : order.type === "custom" && order.metadata.action === DEPOSIT_HYPE_ACTION ? (_jsx("div", { className: "flex items-center gap-2", children: _jsxs("div", { children: [formatTokenAmount(BigInt(order.payload.amount), dstToken.decimals), " HYPE"] }) })) : null, _jsxs("div", { className: "text-as-primary/50 flex items-center gap-2", children: [_jsxs("span", { children: ["on ", order.dstChain !== b3.id && getChainName(order.dstChain)] }), _jsx("img", { src: ALL_CHAINS[order.dstChain].logoUrl, alt: getChainName(order.dstChain), className: cn("h-3", order.dstChain !== b3.id && "w-3 rounded-full", order.dstChain === b3.id && "h-4") })] })] })] }), _jsx("div", { className: "divider w-full" }), _jsxs("div", { className: "flex w-full justify-between gap-4", children: [_jsx("div", { className: "text-as-tertiarry", children: showTotal ? "Total (included fee)" : "Order ID" }), _jsx("div", { className: "text-as-primary overflow-hidden text-ellipsis whitespace-nowrap", children: showTotal && totalAmount ? totalAmount : order.id })] })] }) })) : (_jsxs("div", { className: "flex w-full items-center", children: [_jsx("div", { className: "divider w-full" }), _jsx("button", { className: "whitespace-nowrap text-sm", onClick: () => setShowOrderDetails(true), children: "Order Details" }), _jsx(ChevronDown, { className: "text-as-primary mx-1 h-4 min-h-4 w-4 min-w-4" }), _jsx("div", { className: "divider w-full" })] })) }));
36
38
  });
@@ -1,4 +1,6 @@
1
1
  import { components } from "../../../../anyspend/types/api";
2
+ import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
2
3
  export declare const OrderStatus: import("react").NamedExoticComponent<{
3
4
  order: components["schemas"]["Order"];
5
+ selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
4
6
  }>;
@@ -4,11 +4,11 @@ import { useSearchParams } from "../../../../shared/react/index.js";
4
4
  import { Check, X } from "lucide-react";
5
5
  import { memo } from "react";
6
6
  import { StepProgress } from "./StepProgress.js";
7
- export const OrderStatus = memo(function OrderStatus({ order }) {
7
+ export const OrderStatus = memo(function OrderStatus({ order, selectedCryptoPaymentMethod, }) {
8
8
  const isComplete = order.status === "executed";
9
9
  const { text, status: displayStatus, description } = getStatusDisplay(order);
10
10
  const searchParams = useSearchParams();
11
- const cryptoPaymentMethod = searchParams.get("cryptoPaymentMethod");
11
+ const cryptoPaymentMethod = selectedCryptoPaymentMethod || searchParams.get("cryptoPaymentMethod");
12
12
  console.log("OrderStatus", displayStatus);
13
13
  console.log("OrderStatus", order);
14
14
  const paymentSteps = [
@@ -1,18 +1,20 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Input, useAccountWallet, useTokenData } from "../../../../global-account/react/index.js";
2
+ import { Input, useProfile, useTokenData } from "../../../../global-account/react/index.js";
3
3
  import { formatUsername } from "../../../../shared/utils/index.js";
4
4
  import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
5
5
  import { formatDisplayNumber } from "../../../../shared/utils/number.js";
6
6
  import { ChevronRight } from "lucide-react";
7
7
  import { motion } from "motion/react";
8
8
  import { useEffect, useRef } from "react";
9
+ import { useAccount } from "wagmi";
9
10
  import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
10
11
  import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
11
12
  import { OrderTokenAmount } from "./OrderTokenAmount.js";
12
13
  import { TokenBalance } from "./TokenBalance.js";
13
14
  export function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChainId, selectedSrcToken, setSelectedSrcToken, srcAmount, setSrcAmount, setIsSrcInputDirty, selectedCryptoPaymentMethod, selectedFiatPaymentMethod, onSelectCryptoPaymentMethod, onSelectFiatPaymentMethod, anyspendQuote, }) {
14
- const { address: globalAddress, wallet: globalWallet, ensName: connectedName } = useAccountWallet();
15
- const connectedAddress = globalWallet?.address;
15
+ const { address: connectedAddress, isConnected } = useAccount();
16
+ const { data: profileData } = useProfile({ address: connectedAddress });
17
+ const connectedName = profileData?.displayName;
16
18
  const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
17
19
  // Add ref to track if we've applied metadata
18
20
  const appliedSrcMetadataRef = useRef(false);
@@ -38,13 +40,13 @@ export function PaySection({ paymentType, selectedSrcChainId, setSelectedSrcChai
38
40
  useEffect(() => {
39
41
  appliedSrcMetadataRef.current = false;
40
42
  }, [selectedSrcToken.address, selectedSrcToken.chainId]);
41
- return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [globalAddress ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })) : (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) }))] }), paymentType === "crypto" ? (_jsxs(_Fragment, { children: [_jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
43
+ return (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), paymentType === "crypto" ? (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none", onClick: onSelectCryptoPaymentMethod, children: selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [isConnected ? (_jsx("div", { className: "flex items-center gap-1", children: connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "") })) : ("Connect wallet"), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })) : (_jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors", onClick: onSelectFiatPaymentMethod, children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) }))] }), paymentType === "crypto" ? (_jsxs(_Fragment, { children: [_jsx(OrderTokenAmount, { address: connectedAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
42
44
  setIsSrcInputDirty(true);
43
45
  setSrcAmount(value);
44
46
  }, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
45
47
  style: "currency",
46
48
  fallback: "",
47
- }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
49
+ }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: connectedAddress, onChangeInput: value => {
48
50
  setIsSrcInputDirty(true);
49
51
  setSrcAmount(value);
50
52
  } })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { type: "text", value: srcAmount, onChange: e => setSrcAmount(e.target.value.replace(/[^0-9.]/g, "")), placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
@@ -18,8 +18,9 @@ interface UseAnyspendFlowProps {
18
18
  onTransactionSuccess?: () => void;
19
19
  sourceTokenAddress?: string;
20
20
  sourceTokenChainId?: number;
21
+ slippage?: number;
21
22
  }
22
- export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, }: UseAnyspendFlowProps): {
23
+ export declare function useAnyspendFlow({ paymentType, recipientAddress, loadOrder, isDepositMode, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage, }: UseAnyspendFlowProps): {
23
24
  activePanel: PanelView;
24
25
  setActivePanel: import("react").Dispatch<import("react").SetStateAction<PanelView>>;
25
26
  orderId: string | undefined;
@@ -1,7 +1,7 @@
1
1
  import { B3_TOKEN, getDefaultToken, USDC_BASE } from "../../../anyspend/index.js";
2
2
  import { useAnyspendCreateOnrampOrder, useAnyspendCreateOrder, useAnyspendOrderAndTransactions, useAnyspendQuote, useGeoOnrampOptions, } from "../../../anyspend/react/index.js";
3
3
  import { anyspendService } from "../../../anyspend/services/anyspend.js";
4
- import { useAccountWallet, useProfile } from "../../../global-account/react/index.js";
4
+ import { useAccountWallet, useProfile, useRouter, useSearchParamsSSR } from "../../../global-account/react/index.js";
5
5
  import { formatTokenAmount, formatUnits } from "../../../shared/utils/number.js";
6
6
  import { useEffect, useState } from "react";
7
7
  import { toast } from "sonner";
@@ -18,7 +18,9 @@ export var PanelView;
18
18
  PanelView[PanelView["ORDER_DETAILS"] = 4] = "ORDER_DETAILS";
19
19
  PanelView[PanelView["LOADING"] = 5] = "LOADING";
20
20
  })(PanelView || (PanelView = {}));
21
- export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, }) {
21
+ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, loadOrder, isDepositMode = false, onOrderSuccess, onTransactionSuccess, sourceTokenAddress, sourceTokenChainId, slippage = 0, }) {
22
+ const searchParams = useSearchParamsSSR();
23
+ const router = useRouter();
22
24
  // Panel and order state
23
25
  const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
24
26
  const [orderId, setOrderId] = useState(loadOrder);
@@ -45,6 +47,11 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
45
47
  setSelectedRecipientAddress(globalAddress);
46
48
  }
47
49
  }, [selectedRecipientAddress, globalAddress]);
50
+ useEffect(() => {
51
+ if (paymentType === "crypto") {
52
+ setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
53
+ }
54
+ }, [paymentType]);
48
55
  // Fetch specific token when sourceTokenAddress and sourceTokenChainId are provided
49
56
  useEffect(() => {
50
57
  const fetchSourceToken = async () => {
@@ -92,13 +99,25 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
92
99
  if (anyspendQuote?.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
93
100
  const amount = anyspendQuote.data.currencyOut.amount;
94
101
  const decimals = anyspendQuote.data.currencyOut.currency.decimals;
95
- const formattedAmount = formatTokenAmount(BigInt(amount), decimals, 6, false);
102
+ // Apply slippage (0-100) - reduce amount by slippage percentageFixed slippage value
103
+ const amountWithSlippage = (BigInt(amount) * BigInt(100 - slippage)) / BigInt(100);
104
+ const formattedAmount = formatTokenAmount(amountWithSlippage, decimals, 6, false);
96
105
  setDstAmount(formattedAmount);
97
106
  }
98
107
  else {
99
108
  setDstAmount("");
100
109
  }
101
- }, [anyspendQuote]);
110
+ }, [anyspendQuote, slippage]);
111
+ // Update useEffect for URL parameter to not override loadOrder
112
+ useEffect(() => {
113
+ if (loadOrder)
114
+ return; // Skip if we have a loadOrder
115
+ const orderIdParam = searchParams.get("orderId");
116
+ if (orderIdParam) {
117
+ setOrderId(orderIdParam);
118
+ setActivePanel(PanelView.ORDER_DETAILS);
119
+ }
120
+ }, [searchParams, loadOrder]);
102
121
  // Order creation hooks
103
122
  const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
104
123
  onSuccess: data => {
@@ -106,6 +125,18 @@ export function useAnyspendFlow({ paymentType = "crypto", recipientAddress, load
106
125
  setOrderId(newOrderId);
107
126
  setActivePanel(PanelView.ORDER_DETAILS);
108
127
  onOrderSuccess?.(newOrderId);
128
+ // Add orderId and payment method to URL for persistence
129
+ const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
130
+ params.set("orderId", newOrderId);
131
+ if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
132
+ console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
133
+ params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
134
+ }
135
+ else {
136
+ console.log("Payment method is NONE, not setting in URL");
137
+ }
138
+ console.log("Final URL params:", params.toString());
139
+ router.push(`${window.location.pathname}?${params.toString()}`);
109
140
  },
110
141
  onError: error => {
111
142
  console.error(error);
@@ -48,8 +48,8 @@ export declare const useGenerateSigMintData: ({ recipientAddress, contractAddres
48
48
  creatorMap?: {} | undefined;
49
49
  chainId: number;
50
50
  address: string;
51
- _id: string | {};
52
51
  title: string;
52
+ _id: string | {};
53
53
  };
54
54
  } | null;
55
55
  error: Error | null;
@@ -286,14 +286,6 @@ export declare const BondkitTokenABI: readonly [{
286
286
  }];
287
287
  readonly name: "ValidationInvalidLPSplitRatio";
288
288
  readonly type: "error";
289
- }, {
290
- readonly inputs: readonly [{
291
- readonly internalType: "address";
292
- readonly name: "providedAddress";
293
- readonly type: "address";
294
- }];
295
- readonly name: "ValidationInvalidMigrationAdminAddress";
296
- readonly type: "error";
297
289
  }, {
298
290
  readonly inputs: readonly [{
299
291
  readonly internalType: "uint24";
@@ -330,6 +322,21 @@ export declare const BondkitTokenABI: readonly [{
330
322
  }];
331
323
  readonly name: "Approval";
332
324
  readonly type: "event";
325
+ }, {
326
+ readonly anonymous: false;
327
+ readonly inputs: readonly [{
328
+ readonly indexed: true;
329
+ readonly internalType: "address";
330
+ readonly name: "previousAdmin";
331
+ readonly type: "address";
332
+ }, {
333
+ readonly indexed: true;
334
+ readonly internalType: "address";
335
+ readonly name: "newAdmin";
336
+ readonly type: "address";
337
+ }];
338
+ readonly name: "B3AdminUpdated";
339
+ readonly type: "event";
333
340
  }, {
334
341
  readonly anonymous: false;
335
342
  readonly inputs: readonly [{
@@ -465,6 +472,21 @@ export declare const BondkitTokenABI: readonly [{
465
472
  }];
466
473
  readonly name: "BondkitTokenMigrated";
467
474
  readonly type: "event";
475
+ }, {
476
+ readonly anonymous: false;
477
+ readonly inputs: readonly [{
478
+ readonly indexed: false;
479
+ readonly internalType: "uint256";
480
+ readonly name: "totalRaisedBonding";
481
+ readonly type: "uint256";
482
+ }, {
483
+ readonly indexed: false;
484
+ readonly internalType: "uint256";
485
+ readonly name: "targetAmount";
486
+ readonly type: "uint256";
487
+ }];
488
+ readonly name: "DexTriggerThresholdMet";
489
+ readonly type: "event";
468
490
  }, {
469
491
  readonly anonymous: false;
470
492
  readonly inputs: readonly [{
@@ -591,6 +613,16 @@ export declare const BondkitTokenABI: readonly [{
591
613
  }];
592
614
  readonly stateMutability: "nonpayable";
593
615
  readonly type: "function";
616
+ }, {
617
+ readonly inputs: readonly [];
618
+ readonly name: "b3Admin";
619
+ readonly outputs: readonly [{
620
+ readonly internalType: "address";
621
+ readonly name: "";
622
+ readonly type: "address";
623
+ }];
624
+ readonly stateMutability: "view";
625
+ readonly type: "function";
594
626
  }, {
595
627
  readonly inputs: readonly [{
596
628
  readonly internalType: "address";
@@ -627,7 +659,7 @@ export declare const BondkitTokenABI: readonly [{
627
659
  }];
628
660
  readonly name: "buy";
629
661
  readonly outputs: readonly [];
630
- readonly stateMutability: "payable";
662
+ readonly stateMutability: "nonpayable";
631
663
  readonly type: "function";
632
664
  }, {
633
665
  readonly inputs: readonly [{
@@ -645,7 +677,7 @@ export declare const BondkitTokenABI: readonly [{
645
677
  }];
646
678
  readonly name: "buyFor";
647
679
  readonly outputs: readonly [];
648
- readonly stateMutability: "payable";
680
+ readonly stateMutability: "nonpayable";
649
681
  readonly type: "function";
650
682
  }, {
651
683
  readonly inputs: readonly [];
@@ -743,6 +775,16 @@ export declare const BondkitTokenABI: readonly [{
743
775
  }];
744
776
  readonly stateMutability: "view";
745
777
  readonly type: "function";
778
+ }, {
779
+ readonly inputs: readonly [];
780
+ readonly name: "getB3Admin";
781
+ readonly outputs: readonly [{
782
+ readonly internalType: "address";
783
+ readonly name: "";
784
+ readonly type: "address";
785
+ }];
786
+ readonly stateMutability: "view";
787
+ readonly type: "function";
746
788
  }, {
747
789
  readonly inputs: readonly [];
748
790
  readonly name: "getBondingCurveConfig";
@@ -979,10 +1021,6 @@ export declare const BondkitTokenABI: readonly [{
979
1021
  readonly internalType: "address";
980
1022
  readonly name: "tradingToken";
981
1023
  readonly type: "address";
982
- }, {
983
- readonly internalType: "address";
984
- readonly name: "migrationAdminAddress";
985
- readonly type: "address";
986
1024
  }, {
987
1025
  readonly internalType: "address";
988
1026
  readonly name: "bondingPhaseSplitter";
@@ -1182,6 +1220,16 @@ export declare const BondkitTokenABI: readonly [{
1182
1220
  readonly outputs: readonly [];
1183
1221
  readonly stateMutability: "nonpayable";
1184
1222
  readonly type: "function";
1223
+ }, {
1224
+ readonly inputs: readonly [{
1225
+ readonly internalType: "address";
1226
+ readonly name: "_newAdmin";
1227
+ readonly type: "address";
1228
+ }];
1229
+ readonly name: "updateB3Admin";
1230
+ readonly outputs: readonly [];
1231
+ readonly stateMutability: "nonpayable";
1232
+ readonly type: "function";
1185
1233
  }, {
1186
1234
  readonly inputs: readonly [{
1187
1235
  readonly internalType: "address";
@@ -1242,7 +1290,4 @@ export declare const BondkitTokenABI: readonly [{
1242
1290
  }];
1243
1291
  readonly stateMutability: "view";
1244
1292
  readonly type: "function";
1245
- }, {
1246
- readonly stateMutability: "payable";
1247
- readonly type: "receive";
1248
1293
  }];