@b3dotfun/sdk 0.0.30-alpha.1 → 0.0.30-alpha.2

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 (7) hide show
  1. package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js +10 -9
  2. package/dist/cjs/anyspend/react/components/common/OrderDetails.js +5 -5
  3. package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js +8 -7
  4. package/dist/esm/anyspend/react/components/common/OrderDetails.js +5 -5
  5. package/package.json +1 -1
  6. package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx +10 -14
  7. package/src/anyspend/react/components/common/OrderDetails.tsx +5 -5
package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js CHANGED
@@ -7,8 +7,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
7
7
  const react_1 = require("../../../../global-account/react");
8
8
  const cn_1 = require("../../../../shared/utils/cn");
9
9
  const formatAddress_1 = require("../../../../shared/utils/formatAddress");
10
+ const react_2 = require("@web3icons/react");
10
11
  const lucide_react_1 = require("lucide-react");
11
- const react_2 = require("react");
12
+ const react_3 = require("react");
12
13
  const react_dom_1 = require("react-dom");
13
14
  const sonner_1 = require("sonner");
14
15
  const wagmi_1 = require("wagmi");
@@ -24,43 +25,43 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
24
25
  const { connect, connectors, isPending } = (0, wagmi_1.useConnect)();
25
26
  const { disconnect } = (0, wagmi_1.useDisconnect)();
26
27
  const { data: walletClient } = (0, wagmi_1.useWalletClient)();
27
- const [showWalletModal, setShowWalletModal] = (0, react_2.useState)(false);
28
+ const [showWalletModal, setShowWalletModal] = (0, react_3.useState)(false);
28
29
  // Define available wallet connectors
29
- const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow"].includes(connector.name));
30
+ const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name));
30
31
  // Define wallet options with icons and info
31
32
  const walletOptions = [
32
33
  {
33
34
  id: "metamask",
34
35
  name: "MetaMask",
35
- icon: "🦊",
36
+ icon: (0, jsx_runtime_1.jsx)(react_2.WalletMetamask, { size: 48 }),
36
37
  description: "Connect using MetaMask browser extension",
37
38
  connector: availableConnectors.find(c => c.name === "MetaMask"),
38
39
  },
39
40
  {
40
41
  id: "coinbase",
41
42
  name: "Coinbase Wallet",
42
- icon: "🔵",
43
+ icon: (0, jsx_runtime_1.jsx)(react_2.WalletCoinbase, { size: 48 }),
43
44
  description: "Connect using Coinbase Wallet",
44
45
  connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
45
46
  },
46
47
  {
47
48
  id: "rainbow",
48
49
  name: "Rainbow",
49
- icon: "🌈",
50
+ icon: (0, jsx_runtime_1.jsx)(react_2.WalletRainbow, { size: 48 }),
50
51
  description: "Connect using Rainbow wallet",
51
52
  connector: availableConnectors.find(c => c.name === "Rainbow"),
52
53
  },
53
54
  {
54
55
  id: "walletconnect",
55
56
  name: "WalletConnect",
56
- icon: "🔗",
57
+ icon: (0, jsx_runtime_1.jsx)(react_2.WalletWalletConnect, { size: 48 }),
57
58
  description: "Connect using WalletConnect protocol",
58
59
  connector: availableConnectors.find(c => c.name === "WalletConnect"),
59
60
  },
60
61
  {
61
62
  id: "phantom",
62
63
  name: "Phantom",
63
- icon: "https://phantom.app/favicon.ico",
64
+ icon: (0, jsx_runtime_1.jsx)(react_2.WalletPhantom, { size: 48 }),
64
65
  description: "Connect using Phantom wallet",
65
66
  connector: availableConnectors.find(c => c.name === "Phantom"),
66
67
  },
@@ -146,6 +147,6 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
146
147
  await requestWalletPermissions(walletOption.connector);
147
148
  }, disabled: isPending, className: `wallet-option w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
148
149
  ? "wallet-option--active border-blue-500 bg-blue-50 dark:bg-blue-900/20"
149
- : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && ((0, jsx_runtime_1.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" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
150
+ : "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [walletOption.icon, (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "wallet-option-name flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && ((0, jsx_runtime_1.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" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
150
151
  }) }) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
151
152
  }
package/dist/cjs/anyspend/react/components/common/OrderDetails.js CHANGED
@@ -401,7 +401,7 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
401
401
  : `Received ${(0, number_1.formatTokenAmount)(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
402
402
  : null, refundTxs
403
403
  ? refundTxs.map(rTx => ((0, jsx_runtime_1.jsx)(TransactionDetails, { title: `Refunded ${(0, number_1.formatTokenAmount)(BigInt(rTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: rTx, isProcessing: false }, rTx.txHash)))
404
- : null] }) })] }) }), order.errorDetails && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: (0, anyspend_1.getErrorDisplay)(order.errorDetails) }) })), (0, jsx_runtime_1.jsx)("button", { className: "bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
404
+ : null] }) })] }) }), order.errorDetails && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: (0, anyspend_1.getErrorDisplay)(order.errorDetails) }) })), (0, jsx_runtime_1.jsx)("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
405
405
  }
406
406
  if (executeTx) {
407
407
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "execute-details", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { children: "Transaction Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
@@ -416,14 +416,14 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
416
416
  ? "Joined Tournament"
417
417
  : order.type === "fund_tournament"
418
418
  ? "Funded Tournament"
419
- : "Processed Order", chainId: order.dstChain, tx: executeTx, isProcessing: false, delay: 1 })] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-8", children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", asChild: true, children: (0, jsx_runtime_1.jsxs)("a", { href: (0, anyspend_1.getExplorerTxUrl)(order.dstChain, executeTx.txHash), target: "_blank", className: "text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
419
+ : "Processed Order", chainId: order.dstChain, tx: executeTx, isProcessing: false, delay: 1 })] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-8", children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", asChild: true, children: (0, jsx_runtime_1.jsxs)("a", { href: (0, anyspend_1.getExplorerTxUrl)(order.dstChain, executeTx.txHash), target: "_blank", className: "order-success-text text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
420
420
  order,
421
421
  tournament,
422
422
  formattedActualDstAmount: formattedActualDstAmount,
423
423
  dstToken,
424
424
  recipientName,
425
425
  centerTruncate: centerTruncate_1.default,
426
- }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
426
+ }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
427
427
  }
428
428
  if (relayTx && relayTx.status === "success") {
429
429
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderDetailsCollapsible_1.OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { type: "single", collapsible: true, className: "w-full", children: (0, jsx_runtime_1.jsxs)(Accordion_1.AccordionItem, { value: "more-details", children: [(0, jsx_runtime_1.jsx)(Accordion_1.AccordionTrigger, { children: "More Details" }), (0, jsx_runtime_1.jsx)(Accordion_1.AccordionContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: (0, jsx_runtime_1.jsx)(react_4.motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
@@ -446,14 +446,14 @@ exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal",
446
446
  ? "Joining Tournament"
447
447
  : order.type === "fund_tournament"
448
448
  ? "Funding Tournament"
449
- : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: executeTx, delay: 1 })] }))] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-8", children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", asChild: true, children: (0, jsx_runtime_1.jsxs)("a", { href: (0, anyspend_1.getExplorerTxUrl)(order.dstChain, relayTx.txHash), target: "_blank", className: "text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
449
+ : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: executeTx, delay: 1 })] }))] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col gap-8", children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", asChild: true, children: (0, jsx_runtime_1.jsxs)("a", { href: (0, anyspend_1.getExplorerTxUrl)(order.dstChain, relayTx.txHash), target: "_blank", className: "order-success-text text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
450
450
  order,
451
451
  tournament,
452
452
  formattedActualDstAmount,
453
453
  dstToken,
454
454
  recipientName,
455
455
  centerTruncate: centerTruncate_1.default,
456
- }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
456
+ }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && ((0, jsx_runtime_1.jsxs)(react_1.ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [(0, jsx_runtime_1.jsx)("span", { className: "pl-4", children: "Continue to Tournament" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && ((0, jsx_runtime_1.jsx)("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Return to Home ", (0, jsx_runtime_1.jsx)(lucide_react_1.Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
457
457
  }
458
458
  // This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
459
459
  const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";
package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js CHANGED
@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { useAccountWallet } from "../../../../global-account/react/index.js";
4
4
  import { cn } from "../../../../shared/utils/cn.js";
5
5
  import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
6
+ import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
6
7
  import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
7
8
  import { useState } from "react";
8
9
  import { createPortal } from "react-dom";
@@ -22,41 +23,41 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
22
23
  const { data: walletClient } = useWalletClient();
23
24
  const [showWalletModal, setShowWalletModal] = useState(false);
24
25
  // Define available wallet connectors
25
- const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow"].includes(connector.name));
26
+ const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name));
26
27
  // Define wallet options with icons and info
27
28
  const walletOptions = [
28
29
  {
29
30
  id: "metamask",
30
31
  name: "MetaMask",
31
- icon: "🦊",
32
+ icon: _jsx(WalletMetamask, { size: 48 }),
32
33
  description: "Connect using MetaMask browser extension",
33
34
  connector: availableConnectors.find(c => c.name === "MetaMask"),
34
35
  },
35
36
  {
36
37
  id: "coinbase",
37
38
  name: "Coinbase Wallet",
38
- icon: "🔵",
39
+ icon: _jsx(WalletCoinbase, { size: 48 }),
39
40
  description: "Connect using Coinbase Wallet",
40
41
  connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
41
42
  },
42
43
  {
43
44
  id: "rainbow",
44
45
  name: "Rainbow",
45
- icon: "🌈",
46
+ icon: _jsx(WalletRainbow, { size: 48 }),
46
47
  description: "Connect using Rainbow wallet",
47
48
  connector: availableConnectors.find(c => c.name === "Rainbow"),
48
49
  },
49
50
  {
50
51
  id: "walletconnect",
51
52
  name: "WalletConnect",
52
- icon: "🔗",
53
+ icon: _jsx(WalletWalletConnect, { size: 48 }),
53
54
  description: "Connect using WalletConnect protocol",
54
55
  connector: availableConnectors.find(c => c.name === "WalletConnect"),
55
56
  },
56
57
  {
57
58
  id: "phantom",
58
59
  name: "Phantom",
59
- icon: "https://phantom.app/favicon.ico",
60
+ icon: _jsx(WalletPhantom, { size: 48 }),
60
61
  description: "Connect using Phantom wallet",
61
62
  connector: availableConnectors.find(c => c.name === "Phantom"),
62
63
  },
@@ -142,6 +143,6 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
142
143
  await requestWalletPermissions(walletOption.connector);
143
144
  }, disabled: isPending, className: `wallet-option w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
144
145
  ? "wallet-option--active border-blue-500 bg-blue-50 dark:bg-blue-900/20"
145
- : "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));
146
+ : "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: [walletOption.icon, _jsxs("div", { children: [_jsxs("div", { className: "wallet-option-name 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));
146
147
  }) }) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
147
148
  }
package/dist/esm/anyspend/react/components/common/OrderDetails.js CHANGED
@@ -395,7 +395,7 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
395
395
  : `Received ${formatTokenAmount(BigInt(dTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: dTx, isProcessing: false }, dTx.txHash)))
396
396
  : null, refundTxs
397
397
  ? refundTxs.map(rTx => (_jsx(TransactionDetails, { title: `Refunded ${formatTokenAmount(BigInt(rTx.amount), srcToken.decimals)} ${srcToken.symbol}`, chainId: order.srcChain, tx: rTx, isProcessing: false }, rTx.txHash)))
398
- : null] }) })] }) }), order.errorDetails && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: getErrorDisplay(order.errorDetails) }) })), _jsx("button", { className: "bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
398
+ : null] }) })] }) }), order.errorDetails && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-as-primary/50 text-center text-sm", style: { maxWidth: "40ch" }, children: getErrorDisplay(order.errorDetails) }) })), _jsx("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") })] }));
399
399
  }
400
400
  if (executeTx) {
401
401
  return (_jsxs(_Fragment, { children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: _jsxs(AccordionItem, { value: "execute-details", children: [_jsx(AccordionTrigger, { children: "Transaction Details" }), _jsx(AccordionContent, { children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
@@ -410,14 +410,14 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
410
410
  ? "Joined Tournament"
411
411
  : order.type === "fund_tournament"
412
412
  ? "Funded Tournament"
413
- : "Processed Order", chainId: order.dstChain, tx: executeTx, isProcessing: false, delay: 1 })] }) })] }) }), _jsx("div", { className: "flex w-full flex-col gap-8", children: _jsx(Button, { variant: "link", asChild: true, children: _jsxs("a", { href: getExplorerTxUrl(order.dstChain, executeTx.txHash), target: "_blank", className: "text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
413
+ : "Processed Order", chainId: order.dstChain, tx: executeTx, isProcessing: false, delay: 1 })] }) })] }) }), _jsx("div", { className: "flex w-full flex-col gap-8", children: _jsx(Button, { variant: "link", asChild: true, children: _jsxs("a", { href: getExplorerTxUrl(order.dstChain, executeTx.txHash), target: "_blank", className: "order-success-text text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
414
414
  order,
415
415
  tournament,
416
416
  formattedActualDstAmount: formattedActualDstAmount,
417
417
  dstToken,
418
418
  recipientName,
419
419
  centerTruncate,
420
- }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_jsx("button", { className: "bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
420
+ }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_jsx("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
421
421
  }
422
422
  if (relayTx && relayTx.status === "success") {
423
423
  return (_jsxs(_Fragment, { children: [_jsx(OrderDetailsCollapsible, { order: order, dstToken: dstToken, tournament: tournament, nft: nft, recipientName: recipientName, formattedExpectedDstAmount: formattedExpectedDstAmount }), _jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: _jsxs(AccordionItem, { value: "more-details", children: [_jsx(AccordionTrigger, { children: "More Details" }), _jsx(AccordionContent, { children: _jsxs("div", { className: "relative flex w-full flex-col gap-4", children: [_jsx("div", { className: "bg-as-surface-secondary absolute bottom-2 left-4 top-2 z-[5] w-2", children: _jsx(motion.div, { className: "bg-as-border-primary absolute left-[2px] top-0 z-10 w-[3px]", initial: { height: "0%" }, animate: { height: "100%" }, transition: { duration: 1.5, ease: "easeInOut" } }) }), depositTxs
@@ -440,14 +440,14 @@ export const OrderDetails = memo(function OrderDetails({ mode = "modal", order,
440
440
  ? "Joining Tournament"
441
441
  : order.type === "fund_tournament"
442
442
  ? "Funding Tournament"
443
- : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: executeTx, delay: 1 })] }))] }) })] }) }), _jsx("div", { className: "flex w-full flex-col gap-8", children: _jsx(Button, { variant: "link", asChild: true, children: _jsxs("a", { href: getExplorerTxUrl(order.dstChain, relayTx.txHash), target: "_blank", className: "text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
443
+ : "Processing Bridge", chainId: order.dstChain, isProcessing: true, tx: executeTx, delay: 1 })] }))] }) })] }) }), _jsx("div", { className: "flex w-full flex-col gap-8", children: _jsx(Button, { variant: "link", asChild: true, children: _jsxs("a", { href: getExplorerTxUrl(order.dstChain, relayTx.txHash), target: "_blank", className: "order-success-text text-as-primary/70 hover:text-as-primary", style: { whiteSpace: "normal" }, children: [getOrderSuccessText({
444
444
  order,
445
445
  tournament,
446
446
  formattedActualDstAmount,
447
447
  dstToken,
448
448
  recipientName,
449
449
  centerTruncate,
450
- }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_jsx("button", { className: "bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
450
+ }), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }) }) }), order.type === "join_tournament" && order.status === "executed" && (_jsxs(ShinyButton, { accentColor: "hsl(var(--as-brand))", textColor: "text-white", className: "flex w-full items-center gap-2", disabled: txLoading || isSwitchingOrExecuting, onClick: handleCloseModal, children: [_jsx("span", { className: "pl-4", children: "Continue to Tournament" }), _jsx(ChevronRight, { className: "h-4 w-4" })] })), order.status === "executed" && (_jsx("button", { className: "order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white", onClick: mode === "page" ? handleBack : handleCloseModal, children: mode === "page" ? (_jsxs(_Fragment, { children: ["Return to Home ", _jsx(Home, { className: "ml-2 h-4 w-4" })] })) : ("Close") }))] }));
451
451
  }
452
452
  // This boolean indicates that user finish payment, and waiting for the deposit to be confirmed. We get this from query params (waitingForDeposit=true)
453
453
  const waitingForDeposit = new URLSearchParams(window.location.search).get("waitingForDeposit") === "true";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@b3dotfun/sdk",
3
- "version": "0.0.30-alpha.1",
3
+ "version": "0.0.30-alpha.2",
4
4
  "source": "src/index.ts",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "react-native": "./dist/cjs/index.native.js",
package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx CHANGED
@@ -3,6 +3,7 @@
3
3
  import { useAccountWallet } from "@b3dotfun/sdk/global-account/react";
4
4
  import { cn } from "@b3dotfun/sdk/shared/utils/cn";
5
5
  import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
6
+ import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
6
7
  import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
7
8
  import { useState } from "react";
8
9
  import { createPortal } from "react-dom";
@@ -45,7 +46,7 @@ export function CryptoPaymentMethod({
45
46
 
46
47
  // Define available wallet connectors
47
48
  const availableConnectors = connectors.filter(connector =>
48
- ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow"].includes(connector.name),
49
+ ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name),
49
50
  );
50
51
 
51
52
  // Define wallet options with icons and info
@@ -53,35 +54,35 @@ export function CryptoPaymentMethod({
53
54
  {
54
55
  id: "metamask",
55
56
  name: "MetaMask",
56
- icon: "🦊",
57
+ icon: <WalletMetamask size={48} />,
57
58
  description: "Connect using MetaMask browser extension",
58
59
  connector: availableConnectors.find(c => c.name === "MetaMask"),
59
60
  },
60
61
  {
61
62
  id: "coinbase",
62
63
  name: "Coinbase Wallet",
63
- icon: "🔵",
64
+ icon: <WalletCoinbase size={48} />,
64
65
  description: "Connect using Coinbase Wallet",
65
66
  connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
66
67
  },
67
68
  {
68
69
  id: "rainbow",
69
70
  name: "Rainbow",
70
- icon: "🌈",
71
+ icon: <WalletRainbow size={48} />,
71
72
  description: "Connect using Rainbow wallet",
72
73
  connector: availableConnectors.find(c => c.name === "Rainbow"),
73
74
  },
74
75
  {
75
76
  id: "walletconnect",
76
77
  name: "WalletConnect",
77
- icon: "🔗",
78
+ icon: <WalletWalletConnect size={48} />,
78
79
  description: "Connect using WalletConnect protocol",
79
80
  connector: availableConnectors.find(c => c.name === "WalletConnect"),
80
81
  },
81
82
  {
82
83
  id: "phantom",
83
84
  name: "Phantom",
84
- icon: "https://phantom.app/favicon.ico",
85
+ icon: <WalletPhantom size={48} />,
85
86
  description: "Connect using Phantom wallet",
86
87
  connector: availableConnectors.find(c => c.name === "Phantom"),
87
88
  },
@@ -297,15 +298,10 @@ export function CryptoPaymentMethod({
297
298
  >
298
299
  <div className="flex items-center justify-between">
299
300
  <div className="flex items-center gap-3">
300
- <div
301
- className={`flex h-12 w-12 items-center justify-center rounded-xl text-xl ${
302
- isCurrentWallet ? "bg-blue-100 dark:bg-blue-800" : "bg-gray-100 dark:bg-gray-700"
303
- }`}
304
- >
305
- {walletOption.icon}
306
- </div>
301
+ {walletOption.icon}
302
+
307
303
  <div>
308
- <div className="flex items-center gap-2">
304
+ <div className="wallet-option-name flex items-center gap-2">
309
305
  <div className="text-sm font-semibold text-gray-900 dark:text-white">
310
306
  {walletOption.name}
311
307
  </div>
package/src/anyspend/react/components/common/OrderDetails.tsx CHANGED
@@ -595,7 +595,7 @@ export const OrderDetails = memo(function OrderDetails({
595
595
  </div>
596
596
  )}
597
597
  <button
598
- className="bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
598
+ className="order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
599
599
  onClick={mode === "page" ? handleBack : handleCloseModal}
600
600
  >
601
601
  {mode === "page" ? (
@@ -682,7 +682,7 @@ export const OrderDetails = memo(function OrderDetails({
682
682
  <a
683
683
  href={getExplorerTxUrl(order.dstChain, executeTx.txHash)}
684
684
  target="_blank"
685
- className="text-as-primary/70 hover:text-as-primary"
685
+ className="order-success-text text-as-primary/70 hover:text-as-primary"
686
686
  style={{ whiteSpace: "normal" }} // Don't know why but class can't override.
687
687
  >
688
688
  {getOrderSuccessText({
@@ -713,7 +713,7 @@ export const OrderDetails = memo(function OrderDetails({
713
713
 
714
714
  {order.status === "executed" && (
715
715
  <button
716
- className="bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
716
+ className="order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
717
717
  onClick={mode === "page" ? handleBack : handleCloseModal}
718
718
  >
719
719
  {mode === "page" ? (
@@ -825,7 +825,7 @@ export const OrderDetails = memo(function OrderDetails({
825
825
  <a
826
826
  href={getExplorerTxUrl(order.dstChain, relayTx.txHash)}
827
827
  target="_blank"
828
- className="text-as-primary/70 hover:text-as-primary"
828
+ className="order-success-text text-as-primary/70 hover:text-as-primary"
829
829
  style={{ whiteSpace: "normal" }}
830
830
  >
831
831
  {getOrderSuccessText({
@@ -856,7 +856,7 @@ export const OrderDetails = memo(function OrderDetails({
856
856
 
857
857
  {order.status === "executed" && (
858
858
  <button
859
- className="bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
859
+ className="order-close-button bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
860
860
  onClick={mode === "page" ? handleBack : handleCloseModal}
861
861
  >
862
862
  {mode === "page" ? (