@b3dotfun/sdk 0.0.83-alpha.4 → 0.0.83-alpha.6
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.
- package/dist/cjs/anyspend/react/components/common/PaymentStripeWeb2.js +4 -6
- package/dist/cjs/anyspend/react/components/common/PaymentVendorUI.js +41 -2
- package/dist/cjs/anyspend/react/components/webview/WebviewOnrampPayment.js +2 -3
- package/dist/cjs/global-account/react/components/SignInWithB3/SignIn.js +3 -4
- package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStep.js +1 -1
- package/dist/cjs/global-account/react/hooks/index.d.ts +0 -1
- package/dist/cjs/global-account/react/hooks/index.js +1 -3
- package/dist/cjs/global-account/react/hooks/useAccountWallet.js +11 -10
- package/dist/cjs/shared/utils/payment.utils.d.ts +1 -0
- package/dist/cjs/shared/utils/payment.utils.js +9 -0
- package/dist/esm/anyspend/react/components/common/PaymentStripeWeb2.js +2 -4
- package/dist/esm/anyspend/react/components/common/PaymentVendorUI.js +9 -3
- package/dist/esm/anyspend/react/components/webview/WebviewOnrampPayment.js +3 -4
- package/dist/esm/global-account/react/components/SignInWithB3/SignIn.js +4 -5
- package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStep.js +1 -1
- package/dist/esm/global-account/react/hooks/index.d.ts +0 -1
- package/dist/esm/global-account/react/hooks/index.js +0 -1
- package/dist/esm/global-account/react/hooks/useAccountWallet.js +11 -10
- package/dist/esm/shared/utils/payment.utils.d.ts +1 -0
- package/dist/esm/shared/utils/payment.utils.js +9 -1
- package/dist/types/global-account/react/hooks/index.d.ts +0 -1
- package/dist/types/shared/utils/payment.utils.d.ts +1 -0
- package/package.json +1 -1
- package/src/anyspend/react/components/common/PaymentStripeWeb2.tsx +3 -5
- package/src/anyspend/react/components/common/PaymentVendorUI.tsx +26 -2
- package/src/anyspend/react/components/webview/WebviewOnrampPayment.tsx +3 -5
- package/src/global-account/react/components/SignInWithB3/SignIn.tsx +4 -6
- package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx +1 -1
- package/src/global-account/react/hooks/index.ts +0 -1
- package/src/global-account/react/hooks/useAccountWallet.tsx +12 -11
- package/src/shared/utils/payment.utils.ts +10 -1
- package/dist/cjs/global-account/react/hooks/useBestTransactionPath.d.ts +0 -41
- package/dist/cjs/global-account/react/hooks/useBestTransactionPath.js +0 -148
- package/dist/esm/global-account/react/hooks/useBestTransactionPath.d.ts +0 -41
- package/dist/esm/global-account/react/hooks/useBestTransactionPath.js +0 -145
- package/dist/types/global-account/react/hooks/useBestTransactionPath.d.ts +0 -41
- package/src/global-account/react/hooks/useBestTransactionPath.tsx +0 -201
|
@@ -5,19 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.default = PaymentStripeWeb2;
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const
|
|
8
|
+
const payment_utils_1 = require("../../../../shared/utils/payment.utils");
|
|
9
9
|
const react_1 = require("../../../../anyspend/react");
|
|
10
10
|
const react_2 = require("../../../../global-account/react");
|
|
11
11
|
const number_1 = require("../../../../shared/utils/number");
|
|
12
|
-
const
|
|
12
|
+
const payment_utils_2 = require("../../../../shared/utils/payment.utils");
|
|
13
13
|
const react_stripe_js_1 = require("@stripe/react-stripe-js");
|
|
14
|
-
const stripe_js_1 = require("@stripe/stripe-js");
|
|
15
14
|
const lucide_react_1 = require("lucide-react");
|
|
16
15
|
const react_3 = require("react");
|
|
17
16
|
const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
|
|
18
17
|
const HowItWorks_1 = __importDefault(require("./HowItWorks"));
|
|
19
18
|
const PaymentMethodIcons_1 = __importDefault(require("./PaymentMethodIcons"));
|
|
20
|
-
const stripePromise = (0, stripe_js_1.loadStripe)(constants_1.STRIPE_CONFIG.publishableKey);
|
|
21
19
|
function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaymentSuccess }) {
|
|
22
20
|
const { theme } = (0, react_2.useB3)();
|
|
23
21
|
const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
|
|
@@ -28,7 +26,7 @@ function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaymentSuccess }) {
|
|
|
28
26
|
if (stripeClientSecretError) {
|
|
29
27
|
return (0, jsx_runtime_1.jsx)(StripeErrorState, { error: stripeClientSecretError.message });
|
|
30
28
|
}
|
|
31
|
-
return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe:
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe: (0, payment_utils_1.getStripePromise)(), options: {
|
|
32
30
|
clientSecret: clientSecret || undefined,
|
|
33
31
|
appearance: { theme: theme === "light" ? "stripe" : "night" },
|
|
34
32
|
}, children: (0, jsx_runtime_1.jsx)(StripePaymentForm, { order: order, clientSecret: clientSecret, onPaymentSuccess: onPaymentSuccess }) }) }));
|
|
@@ -61,7 +59,7 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
|
|
|
61
59
|
try {
|
|
62
60
|
const paymentIntent = await stripe.retrievePaymentIntent(clientSecret);
|
|
63
61
|
const amount = paymentIntent.paymentIntent?.amount
|
|
64
|
-
? (0,
|
|
62
|
+
? (0, payment_utils_2.formatStripeAmount)(paymentIntent.paymentIntent.amount)
|
|
65
63
|
: null;
|
|
66
64
|
setAmount(amount);
|
|
67
65
|
}
|
|
@@ -1,12 +1,51 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
2
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
37
|
};
|
|
5
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
39
|
exports.default = PaymentVendorUI;
|
|
7
40
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
41
|
+
const react_1 = require("react");
|
|
8
42
|
const PaymentOneClick_1 = __importDefault(require("./PaymentOneClick"));
|
|
9
|
-
|
|
43
|
+
// Lazy load Stripe component to prevent loadStripe() from running at module level
|
|
44
|
+
// This prevents EIP-6963 wallet detection events when Stripe is not used
|
|
45
|
+
const PaymentStripeWeb2 = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require("./PaymentStripeWeb2"))));
|
|
46
|
+
function StripeLoadingFallback() {
|
|
47
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 flex w-full flex-col items-center justify-center gap-4 rounded-2xl p-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-brand/20 flex h-16 w-16 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("div", { className: "text-as-brand h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-as-primary/70 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-lg font-medium", children: "Loading payment" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 mt-2 text-sm", children: "Initializing secure payment form..." })] })] }) }));
|
|
48
|
+
}
|
|
10
49
|
function PaymentVendorUI({ order, dstTokenSymbol }) {
|
|
11
50
|
const vendor = order.onrampMetadata?.vendor;
|
|
12
51
|
// Handle one-click payment flows (Coinbase, Stripe redirect)
|
|
@@ -15,7 +54,7 @@ function PaymentVendorUI({ order, dstTokenSymbol }) {
|
|
|
15
54
|
}
|
|
16
55
|
// Handle Stripe Web2 payment flow
|
|
17
56
|
if (vendor === "stripe-web2" && order.stripePaymentIntentId) {
|
|
18
|
-
return (0, jsx_runtime_1.jsx)(
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(StripeLoadingFallback, {}), children: (0, jsx_runtime_1.jsx)(PaymentStripeWeb2, { order: order, stripePaymentIntentId: order.stripePaymentIntentId }) }));
|
|
19
58
|
}
|
|
20
59
|
// Return null for unsupported vendors
|
|
21
60
|
return null;
|
|
@@ -6,17 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.WebviewOnrampPayment = WebviewOnrampPayment;
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
8
|
const anyspend_1 = require("../../../../anyspend");
|
|
9
|
+
const payment_utils_1 = require("../../../../shared/utils/payment.utils");
|
|
9
10
|
const react_1 = require("../../../../anyspend/react");
|
|
10
11
|
const react_2 = require("../../../../global-account/react");
|
|
11
12
|
const centerTruncate_1 = __importDefault(require("../../../../shared/utils/centerTruncate"));
|
|
12
13
|
const react_stripe_js_1 = require("@stripe/react-stripe-js");
|
|
13
|
-
const stripe_js_1 = require("@stripe/stripe-js");
|
|
14
14
|
const lucide_react_1 = require("lucide-react");
|
|
15
15
|
const react_3 = require("motion/react");
|
|
16
16
|
const react_4 = require("react");
|
|
17
17
|
const viem_1 = require("viem");
|
|
18
18
|
const AnySpendFingerprintWrapper_1 = require("../AnySpendFingerprintWrapper");
|
|
19
|
-
const stripePromise = (0, stripe_js_1.loadStripe)(anyspend_1.STRIPE_CONFIG.publishableKey);
|
|
20
19
|
function WebviewOnrampPayment(props) {
|
|
21
20
|
const fingerprintConfig = (0, AnySpendFingerprintWrapper_1.getFingerprintConfig)();
|
|
22
21
|
return ((0, jsx_runtime_1.jsx)(AnySpendFingerprintWrapper_1.AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: (0, jsx_runtime_1.jsx)(WebviewOnrampPaymentInner, { ...props }) }));
|
|
@@ -169,7 +168,7 @@ function WebviewOnrampPaymentInner({ srcAmountOnRamp, recipientAddress, destinat
|
|
|
169
168
|
if (createdOrder && clientSecret) {
|
|
170
169
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-xl bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-lg font-semibold", children: "Order summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col divide-y", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Receiving" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [destinationToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: destinationToken.metadata.logoURI, alt: destinationToken.symbol, className: "h-5 w-5 rounded-full" })), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [anyspendQuote?.data?.currencyOut?.amount
|
|
171
170
|
? Number((0, viem_1.formatUnits)(BigInt(anyspendQuote.data.currencyOut.amount), destinationToken.decimals)).toFixed(4)
|
|
172
|
-
: "0", " ", destinationToken.symbol] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Network" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, anyspend_1.getChainName)(destinationToken.chainId) })] }), recipientAddress && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Recipient" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, centerTruncate_1.default)(recipientAddress) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "You Pay" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe:
|
|
171
|
+
: "0", " ", destinationToken.symbol] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Network" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, anyspend_1.getChainName)(destinationToken.chainId) })] }), recipientAddress && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Recipient" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: (0, centerTruncate_1.default)(recipientAddress) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "You Pay" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, { stripe: (0, payment_utils_1.getStripePromise)(), options: {
|
|
173
172
|
clientSecret,
|
|
174
173
|
appearance: {
|
|
175
174
|
theme: "flat",
|
|
@@ -12,12 +12,12 @@ const utils_1 = require("../../../../shared/utils");
|
|
|
12
12
|
const react_2 = require("@headlessui/react");
|
|
13
13
|
const react_3 = require("react");
|
|
14
14
|
const react_4 = require("thirdweb/react");
|
|
15
|
-
const useAccountWallet_1 = require("../../hooks/useAccountWallet");
|
|
16
15
|
const ManageAccountButton_1 = require("../custom/ManageAccountButton");
|
|
17
16
|
function SignIn(props) {
|
|
18
17
|
const { className } = props;
|
|
19
18
|
const { automaticallySetFirstEoa, partnerId } = (0, react_1.useB3)();
|
|
20
|
-
const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon,
|
|
19
|
+
const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, } = (0, react_1.useAccountWallet)();
|
|
20
|
+
const { data: walletImage } = (0, react_4.useWalletImage)(connectedEOAWallet?.id);
|
|
21
21
|
const isMobile = (0, react_1.useIsMobile)();
|
|
22
22
|
const { logout } = (0, react_1.useAuthentication)(partnerId);
|
|
23
23
|
const onDisconnect = async () => {
|
|
@@ -40,11 +40,10 @@ function SignIn(props) {
|
|
|
40
40
|
setActiveWallet(connectedEOAWallet);
|
|
41
41
|
}
|
|
42
42
|
}, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
|
|
43
|
-
const walletImage = (0, useAccountWallet_1.useAccountWalletImage)();
|
|
44
43
|
// Desktop version - original dropdown menu
|
|
45
44
|
return ((0, jsx_runtime_1.jsx)(react_1.StyleRoot, { children: (0, jsx_runtime_1.jsx)(react_2.Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [!!walletImage && ((0, jsx_runtime_1.jsx)(react_1.IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), (0, jsx_runtime_1.jsx)("div", { className: "text-as-primary", children: ensName ? ensName : (0, utils_1.truncateAddress)(globalAddress) })] }), (0, jsx_runtime_1.jsx)(react_2.Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: (0, jsx_runtime_1.jsx)(react_2.MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false,
|
|
46
45
|
// TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
|
|
47
|
-
anchor: isMobile ? "top end" : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src:
|
|
46
|
+
anchor: isMobile ? "top end" : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), (0, jsx_runtime_1.jsxs)("div", { className: "ml-4 grow", children: [ensName && (0, jsx_runtime_1.jsx)("div", { children: ensName }), (0, jsx_runtime_1.jsx)("div", { children: (0, utils_1.truncateAddress)(globalAddress) })] })] }), isActiveEOAWallet && (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
|
|
48
47
|
? "bg-b3-react-background"
|
|
49
48
|
: "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), (0, jsx_runtime_1.jsxs)("div", { className: "grow pl-4", children: [ensName && (0, jsx_runtime_1.jsx)("div", { children: ensName }), (0, jsx_runtime_1.jsx)("div", { children: (0, utils_1.truncateAddress)(globalAddress) }), (0, jsx_runtime_1.jsx)("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && (0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary", name: "check" })] }))), (0, jsx_runtime_1.jsx)("div", { className: "ml-3", children: (0, jsx_runtime_1.jsx)(ManageAccountButton_1.ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), (0, jsx_runtime_1.jsx)("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: (0, jsx_runtime_1.jsxs)("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-react-primary mr-auto transition-colors", children: "Disconnect" })] }) })] }) }) })] })) : ((0, jsx_runtime_1.jsx)(react_1.SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
|
|
50
49
|
console.log("User authenticated with Global Account!", globalAccount);
|
|
@@ -16,7 +16,7 @@ function LoginStepContainer({ children, partnerId }) {
|
|
|
16
16
|
},
|
|
17
17
|
}, !!partnerId);
|
|
18
18
|
const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
|
|
19
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center pt-6", children: [partnerLogo && ((0, jsx_runtime_1.jsx)("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 h-12 w-auto object-contain" })), children] }));
|
|
19
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background flex flex-col items-center justify-center pt-6", children: [partnerLogo && ((0, jsx_runtime_1.jsx)("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 h-12 w-auto object-contain" })), children] }));
|
|
20
20
|
}
|
|
21
21
|
function LoginStep({ onSuccess, chain }) {
|
|
22
22
|
const { partnerId, theme } = (0, react_1.useB3)();
|
|
@@ -6,7 +6,6 @@ export { useAnalytics } from "./useAnalytics";
|
|
|
6
6
|
export { useAuthentication } from "./useAuthentication";
|
|
7
7
|
export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
|
|
8
8
|
export { useB3EnsName } from "./useB3EnsName";
|
|
9
|
-
export { useBestTransactionPath } from "./useBestTransactionPath";
|
|
10
9
|
export { useChainSwitchWithAction } from "./useChainSwitchWithAction";
|
|
11
10
|
export * from "./useClaim";
|
|
12
11
|
export { useClient } from "./useClient";
|
|
@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.useURLParams = exports.useUnifiedChainSwitchAndExecute = exports.useTurnkeyAuth = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalanceDirect = exports.useTokenBalance = exports.useSiwe = exports.useSimSvmBalance = exports.useSimBalance = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfileSettings = exports.useProfilePreference = exports.useProfile = exports.useDisplayName = exports.useOneBalance = exports.useNotifications = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGlobalAccount = exports.useGetGeo = exports.useGetAllTWSigners = exports.useFirstEOA = exports.useExchangeRate = exports.useConnect = exports.useClient = exports.useChainSwitchWithAction = exports.
|
|
17
|
+
exports.useURLParams = exports.useUnifiedChainSwitchAndExecute = exports.useTurnkeyAuth = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalanceDirect = exports.useTokenBalance = exports.useSiwe = exports.useSimSvmBalance = exports.useSimBalance = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfileSettings = exports.useProfilePreference = exports.useProfile = exports.useDisplayName = exports.useOneBalance = exports.useNotifications = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGlobalAccount = exports.useGetGeo = exports.useGetAllTWSigners = exports.useFirstEOA = exports.useExchangeRate = exports.useConnect = exports.useClient = exports.useChainSwitchWithAction = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAnalytics = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = exports.createWagmiConfig = void 0;
|
|
18
18
|
var createWagmiConfig_1 = require("../utils/createWagmiConfig");
|
|
19
19
|
Object.defineProperty(exports, "createWagmiConfig", { enumerable: true, get: function () { return createWagmiConfig_1.createWagmiConfig; } });
|
|
20
20
|
var useAccountAssets_1 = require("./useAccountAssets");
|
|
@@ -31,8 +31,6 @@ var useB3BalanceFromAddresses_1 = require("./useB3BalanceFromAddresses");
|
|
|
31
31
|
Object.defineProperty(exports, "useB3BalanceFromAddresses", { enumerable: true, get: function () { return useB3BalanceFromAddresses_1.useB3BalanceFromAddresses; } });
|
|
32
32
|
var useB3EnsName_1 = require("./useB3EnsName");
|
|
33
33
|
Object.defineProperty(exports, "useB3EnsName", { enumerable: true, get: function () { return useB3EnsName_1.useB3EnsName; } });
|
|
34
|
-
var useBestTransactionPath_1 = require("./useBestTransactionPath");
|
|
35
|
-
Object.defineProperty(exports, "useBestTransactionPath", { enumerable: true, get: function () { return useBestTransactionPath_1.useBestTransactionPath; } });
|
|
36
34
|
var useChainSwitchWithAction_1 = require("./useChainSwitchWithAction");
|
|
37
35
|
Object.defineProperty(exports, "useChainSwitchWithAction", { enumerable: true, get: function () { return useChainSwitchWithAction_1.useChainSwitchWithAction; } });
|
|
38
36
|
__exportStar(require("./useClaim"), exports);
|
|
@@ -5,7 +5,6 @@ exports.useAccountWalletImage = useAccountWalletImage;
|
|
|
5
5
|
const react_1 = require("../../../global-account/react");
|
|
6
6
|
const constants_1 = require("../../../shared/constants");
|
|
7
7
|
const debug_1 = require("../../../shared/utils/debug");
|
|
8
|
-
const ipfs_1 = require("../../../shared/utils/ipfs");
|
|
9
8
|
const react_2 = require("react");
|
|
10
9
|
const react_3 = require("thirdweb/react");
|
|
11
10
|
const in_app_1 = require("thirdweb/wallets/in-app");
|
|
@@ -22,7 +21,13 @@ function useLastAuthProvider() {
|
|
|
22
21
|
return lastAuthProvider;
|
|
23
22
|
}
|
|
24
23
|
function useAccountWallet() {
|
|
25
|
-
|
|
24
|
+
// WOJ: --------------------
|
|
25
|
+
// values from in useB3:
|
|
26
|
+
// const activeAccount = useActiveAccount();
|
|
27
|
+
// const effectiveAccount = isAuthenticated ? accountOverride || activeAccount : undefined;
|
|
28
|
+
// can we possibly just use useActiveAccount here?
|
|
29
|
+
// --------------------
|
|
30
|
+
const { account } = (0, react_1.useB3)();
|
|
26
31
|
const activeWallet = (0, react_3.useActiveWallet)();
|
|
27
32
|
const connectedWallets = (0, react_3.useConnectedWallets)();
|
|
28
33
|
const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === constants_1.ecosystemWalletId);
|
|
@@ -35,7 +40,6 @@ function useAccountWallet() {
|
|
|
35
40
|
debug("connectedEOAWallet", connectedEOAWallet);
|
|
36
41
|
debug("isActiveSmartWallet", isActiveSmartWallet);
|
|
37
42
|
debug("isActiveEOAWallet", isActiveEOAWallet);
|
|
38
|
-
const { data: walletImage } = (0, react_3.useWalletImage)(connectedEOAWallet?.id);
|
|
39
43
|
// If not EOA sign in, then we need to show the smart wallet icon
|
|
40
44
|
const lastAuthProvider = useLastAuthProvider();
|
|
41
45
|
const smartWalletIcon = lastAuthProvider && !connectedEOAWallet
|
|
@@ -43,13 +47,12 @@ function useAccountWallet() {
|
|
|
43
47
|
: "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
|
|
44
48
|
const { data: profileData } = (0, react_1.useProfile)({ address: account?.address });
|
|
45
49
|
const ensName = profileData?.displayName?.replace(/\.b3\.fun/g, "");
|
|
46
|
-
const avatarUrl = user?.avatar ? (0, ipfs_1.getIpfsUrl)(user?.avatar) : profileData?.avatar;
|
|
47
50
|
const res = (0, react_2.useMemo)(() => ({
|
|
48
51
|
wallet: {
|
|
49
52
|
...account,
|
|
50
53
|
ensName,
|
|
51
54
|
meta: {
|
|
52
|
-
icon:
|
|
55
|
+
icon: "", // deprecated
|
|
53
56
|
},
|
|
54
57
|
},
|
|
55
58
|
address: account?.address,
|
|
@@ -59,22 +62,20 @@ function useAccountWallet() {
|
|
|
59
62
|
isActiveSmartWallet: isActiveSmartWallet,
|
|
60
63
|
isActiveEOAWallet: isActiveEOAWallet,
|
|
61
64
|
smartWalletIcon: smartWalletIcon,
|
|
62
|
-
eoaWalletIcon:
|
|
65
|
+
eoaWalletIcon: "", // deprecated
|
|
63
66
|
}), [
|
|
64
67
|
account,
|
|
65
|
-
avatarUrl,
|
|
66
68
|
connectedEOAWallet,
|
|
67
69
|
connectedSmartWallet,
|
|
68
70
|
ensName,
|
|
69
71
|
isActiveEOAWallet,
|
|
70
72
|
isActiveSmartWallet,
|
|
71
73
|
smartWalletIcon,
|
|
72
|
-
walletImage,
|
|
73
74
|
]);
|
|
74
75
|
return res;
|
|
75
76
|
}
|
|
76
77
|
function useAccountWalletImage() {
|
|
77
|
-
const { account
|
|
78
|
+
const { account } = (0, react_1.useB3)();
|
|
78
79
|
const activeWallet = (0, react_3.useActiveWallet)();
|
|
79
80
|
const connectedWallets = (0, react_3.useConnectedWallets)();
|
|
80
81
|
const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === constants_1.ecosystemWalletId);
|
|
@@ -87,6 +88,6 @@ function useAccountWalletImage() {
|
|
|
87
88
|
? in_app_1.socialIcons[lastAuthProvider]
|
|
88
89
|
: "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
|
|
89
90
|
const { data: profileData } = (0, react_1.useProfile)({ address: account?.address });
|
|
90
|
-
const avatarUrl =
|
|
91
|
+
const avatarUrl = profileData?.avatar;
|
|
91
92
|
return avatarUrl || (isActiveSmartWallet ? smartWalletIcon : walletImage) || "";
|
|
92
93
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { components } from "../../anyspend/types/api";
|
|
2
|
+
export declare function getStripePromise(): Promise<import("@stripe/stripe-js").Stripe | null>;
|
|
2
3
|
export declare function getVendorDisplayName(vendor?: components["schemas"]["OnrampMetadata"]["vendor"]): string;
|
|
3
4
|
export declare function getPaymentMethodDescription(vendor?: components["schemas"]["OnrampMetadata"]["vendor"]): string;
|
|
4
5
|
export declare function formatStripeAmount(amount: number): string;
|
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getStripePromise = getStripePromise;
|
|
3
4
|
exports.getVendorDisplayName = getVendorDisplayName;
|
|
4
5
|
exports.getPaymentMethodDescription = getPaymentMethodDescription;
|
|
5
6
|
exports.formatStripeAmount = formatStripeAmount;
|
|
6
7
|
exports.generateReturnUrl = generateReturnUrl;
|
|
7
8
|
const constants_1 = require("../../anyspend/constants");
|
|
9
|
+
const stripe_js_1 = require("@stripe/stripe-js");
|
|
10
|
+
let stripePromise = null;
|
|
11
|
+
function getStripePromise() {
|
|
12
|
+
if (!stripePromise) {
|
|
13
|
+
stripePromise = (0, stripe_js_1.loadStripe)(constants_1.STRIPE_CONFIG.publishableKey);
|
|
14
|
+
}
|
|
15
|
+
return stripePromise;
|
|
16
|
+
}
|
|
8
17
|
function getVendorDisplayName(vendor) {
|
|
9
18
|
switch (vendor) {
|
|
10
19
|
case "coinbase":
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { getStripePromise } from "../../../../shared/utils/payment.utils.js";
|
|
3
3
|
import { OrderDetailsCollapsible, useStripeClientSecret } from "../../../../anyspend/react/index.js";
|
|
4
4
|
import { ShinyButton, useB3, useModalStore, useProfile } from "../../../../global-account/react/index.js";
|
|
5
5
|
import { formatTokenAmount } from "../../../../shared/utils/number.js";
|
|
6
6
|
import { formatStripeAmount } from "../../../../shared/utils/payment.utils.js";
|
|
7
7
|
import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
|
|
8
|
-
import { loadStripe } from "@stripe/stripe-js";
|
|
9
8
|
import { X } from "lucide-react";
|
|
10
9
|
import { useEffect, useState } from "react";
|
|
11
10
|
import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
|
|
12
11
|
import HowItWorks from "./HowItWorks.js";
|
|
13
12
|
import PaymentMethodIcons from "./PaymentMethodIcons.js";
|
|
14
|
-
const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
|
|
15
13
|
export default function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaymentSuccess }) {
|
|
16
14
|
const { theme } = useB3();
|
|
17
15
|
const fingerprintConfig = getFingerprintConfig();
|
|
@@ -22,7 +20,7 @@ export default function PaymentStripeWeb2({ order, stripePaymentIntentId, onPaym
|
|
|
22
20
|
if (stripeClientSecretError) {
|
|
23
21
|
return _jsx(StripeErrorState, { error: stripeClientSecretError.message });
|
|
24
22
|
}
|
|
25
|
-
return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(Elements, { stripe:
|
|
23
|
+
return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(Elements, { stripe: getStripePromise(), options: {
|
|
26
24
|
clientSecret: clientSecret || undefined,
|
|
27
25
|
appearance: { theme: theme === "light" ? "stripe" : "night" },
|
|
28
26
|
}, children: _jsx(StripePaymentForm, { order: order, clientSecret: clientSecret, onPaymentSuccess: onPaymentSuccess }) }) }));
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { lazy, Suspense } from "react";
|
|
2
3
|
import PaymentOneClick from "./PaymentOneClick.js";
|
|
3
|
-
|
|
4
|
+
// Lazy load Stripe component to prevent loadStripe() from running at module level
|
|
5
|
+
// This prevents EIP-6963 wallet detection events when Stripe is not used
|
|
6
|
+
const PaymentStripeWeb2 = lazy(() => import("./PaymentStripeWeb2"));
|
|
7
|
+
function StripeLoadingFallback() {
|
|
8
|
+
return (_jsx("div", { className: "relative my-8 flex w-full flex-1 flex-col items-center justify-center", children: _jsxs("div", { className: "bg-as-on-surface-1 flex w-full flex-col items-center justify-center gap-4 rounded-2xl p-8", children: [_jsx("div", { className: "bg-as-brand/20 flex h-16 w-16 items-center justify-center rounded-full", children: _jsx("div", { className: "text-as-brand h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" }) }), _jsxs("div", { className: "text-as-primary/70 text-center", children: [_jsx("div", { className: "text-lg font-medium", children: "Loading payment" }), _jsx("div", { className: "text-as-primary/50 mt-2 text-sm", children: "Initializing secure payment form..." })] })] }) }));
|
|
9
|
+
}
|
|
4
10
|
export default function PaymentVendorUI({ order, dstTokenSymbol }) {
|
|
5
11
|
const vendor = order.onrampMetadata?.vendor;
|
|
6
12
|
// Handle one-click payment flows (Coinbase, Stripe redirect)
|
|
@@ -9,7 +15,7 @@ export default function PaymentVendorUI({ order, dstTokenSymbol }) {
|
|
|
9
15
|
}
|
|
10
16
|
// Handle Stripe Web2 payment flow
|
|
11
17
|
if (vendor === "stripe-web2" && order.stripePaymentIntentId) {
|
|
12
|
-
return _jsx(PaymentStripeWeb2, { order: order, stripePaymentIntentId: order.stripePaymentIntentId });
|
|
18
|
+
return (_jsx(Suspense, { fallback: _jsx(StripeLoadingFallback, {}), children: _jsx(PaymentStripeWeb2, { order: order, stripePaymentIntentId: order.stripePaymentIntentId }) }));
|
|
13
19
|
}
|
|
14
20
|
// Return null for unsupported vendors
|
|
15
21
|
return null;
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { getChainName
|
|
2
|
+
import { getChainName } from "../../../../anyspend/index.js";
|
|
3
|
+
import { getStripePromise } from "../../../../shared/utils/payment.utils.js";
|
|
3
4
|
import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecret } from "../../../../anyspend/react/index.js";
|
|
4
5
|
import { toast } from "../../../../global-account/react/index.js";
|
|
5
6
|
import centerTruncate from "../../../../shared/utils/centerTruncate.js";
|
|
6
7
|
import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
|
|
7
|
-
import { loadStripe } from "@stripe/stripe-js";
|
|
8
8
|
import { Loader2 } from "lucide-react";
|
|
9
9
|
import { motion } from "motion/react";
|
|
10
10
|
import { useEffect, useRef, useState } from "react";
|
|
11
11
|
import { formatUnits } from "viem";
|
|
12
12
|
import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper.js";
|
|
13
|
-
const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
|
|
14
13
|
export function WebviewOnrampPayment(props) {
|
|
15
14
|
const fingerprintConfig = getFingerprintConfig();
|
|
16
15
|
return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(WebviewOnrampPaymentInner, { ...props }) }));
|
|
@@ -163,7 +162,7 @@ function WebviewOnrampPaymentInner({ srcAmountOnRamp, recipientAddress, destinat
|
|
|
163
162
|
if (createdOrder && clientSecret) {
|
|
164
163
|
return (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [_jsx("div", { className: "overflow-hidden rounded-xl bg-white", children: _jsxs("div", { className: "px-6 py-4", children: [_jsx("h2", { className: "mb-4 text-lg font-semibold", children: "Order summary" }), _jsxs("div", { className: "flex flex-col divide-y", children: [_jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Receiving" }), _jsxs("div", { className: "flex items-center gap-2", children: [destinationToken.metadata?.logoURI && (_jsx("img", { src: destinationToken.metadata.logoURI, alt: destinationToken.symbol, className: "h-5 w-5 rounded-full" })), _jsxs("span", { className: "font-medium", children: [anyspendQuote?.data?.currencyOut?.amount
|
|
165
164
|
? Number(formatUnits(BigInt(anyspendQuote.data.currencyOut.amount), destinationToken.decimals)).toFixed(4)
|
|
166
|
-
: "0", " ", destinationToken.symbol] })] })] }), _jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Network" }), _jsx("span", { className: "font-medium", children: getChainName(destinationToken.chainId) })] }), recipientAddress && (_jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Recipient" }), _jsx("span", { className: "font-medium", children: centerTruncate(recipientAddress) })] })), _jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "You Pay" }), _jsxs("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }), _jsx(Elements, { stripe:
|
|
165
|
+
: "0", " ", destinationToken.symbol] })] })] }), _jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Network" }), _jsx("span", { className: "font-medium", children: getChainName(destinationToken.chainId) })] }), recipientAddress && (_jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Recipient" }), _jsx("span", { className: "font-medium", children: centerTruncate(recipientAddress) })] })), _jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "You Pay" }), _jsxs("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }), _jsx(Elements, { stripe: getStripePromise(), options: {
|
|
167
166
|
clientSecret,
|
|
168
167
|
appearance: {
|
|
169
168
|
theme: "flat",
|
|
@@ -5,13 +5,13 @@ import { ecosystemWalletId } from "../../../../shared/constants/index.js";
|
|
|
5
5
|
import { cn, truncateAddress } from "../../../../shared/utils/index.js";
|
|
6
6
|
import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
|
|
7
7
|
import { useEffect } from "react";
|
|
8
|
-
import { useConnectedWallets, useSetActiveWallet } from "thirdweb/react";
|
|
9
|
-
import { useAccountWalletImage } from "../../hooks/useAccountWallet.js";
|
|
8
|
+
import { useConnectedWallets, useSetActiveWallet, useWalletImage } from "thirdweb/react";
|
|
10
9
|
import { ManageAccountButton } from "../custom/ManageAccountButton.js";
|
|
11
10
|
export function SignIn(props) {
|
|
12
11
|
const { className } = props;
|
|
13
12
|
const { automaticallySetFirstEoa, partnerId } = useB3();
|
|
14
|
-
const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon,
|
|
13
|
+
const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, } = useAccountWallet();
|
|
14
|
+
const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
|
|
15
15
|
const isMobile = useIsMobile();
|
|
16
16
|
const { logout } = useAuthentication(partnerId);
|
|
17
17
|
const onDisconnect = async () => {
|
|
@@ -34,11 +34,10 @@ export function SignIn(props) {
|
|
|
34
34
|
setActiveWallet(connectedEOAWallet);
|
|
35
35
|
}
|
|
36
36
|
}, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
|
|
37
|
-
const walletImage = useAccountWalletImage();
|
|
38
37
|
// Desktop version - original dropdown menu
|
|
39
38
|
return (_jsx(StyleRoot, { children: _jsx(Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [!!walletImage && (_jsx(IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), _jsx("div", { className: "text-as-primary", children: ensName ? ensName : truncateAddress(globalAddress) })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false,
|
|
40
39
|
// TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
|
|
41
|
-
anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src:
|
|
40
|
+
anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: walletImage, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
|
|
42
41
|
? "bg-b3-react-background"
|
|
43
42
|
: "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), _jsxs("div", { className: "grow pl-4", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) }), _jsx("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] }))), _jsx("div", { className: "ml-3", children: _jsx(ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), _jsx("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: _jsxs("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [_jsx(Icon, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), _jsx("div", { className: "text-b3-react-primary mr-auto transition-colors", children: "Disconnect" })] }) })] }) }) })] })) : (_jsx(SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
|
|
44
43
|
console.log("User authenticated with Global Account!", globalAccount);
|
|
@@ -12,7 +12,7 @@ export function LoginStepContainer({ children, partnerId }) {
|
|
|
12
12
|
},
|
|
13
13
|
}, !!partnerId);
|
|
14
14
|
const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
|
|
15
|
-
return (_jsxs("div", { className: "flex flex-col items-center justify-center pt-6", children: [partnerLogo && (_jsx("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 h-12 w-auto object-contain" })), children] }));
|
|
15
|
+
return (_jsxs("div", { className: "bg-b3-react-background flex flex-col items-center justify-center pt-6", children: [partnerLogo && (_jsx("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 h-12 w-auto object-contain" })), children] }));
|
|
16
16
|
}
|
|
17
17
|
export function LoginStep({ onSuccess, chain }) {
|
|
18
18
|
const { partnerId, theme } = useB3();
|
|
@@ -6,7 +6,6 @@ export { useAnalytics } from "./useAnalytics";
|
|
|
6
6
|
export { useAuthentication } from "./useAuthentication";
|
|
7
7
|
export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
|
|
8
8
|
export { useB3EnsName } from "./useB3EnsName";
|
|
9
|
-
export { useBestTransactionPath } from "./useBestTransactionPath";
|
|
10
9
|
export { useChainSwitchWithAction } from "./useChainSwitchWithAction";
|
|
11
10
|
export * from "./useClaim";
|
|
12
11
|
export { useClient } from "./useClient";
|
|
@@ -6,7 +6,6 @@ export { useAnalytics } from "./useAnalytics.js";
|
|
|
6
6
|
export { useAuthentication } from "./useAuthentication.js";
|
|
7
7
|
export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses.js";
|
|
8
8
|
export { useB3EnsName } from "./useB3EnsName.js";
|
|
9
|
-
export { useBestTransactionPath } from "./useBestTransactionPath.js";
|
|
10
9
|
export { useChainSwitchWithAction } from "./useChainSwitchWithAction.js";
|
|
11
10
|
export * from "./useClaim.js";
|
|
12
11
|
export { useClient } from "./useClient.js";
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { useB3, useProfile } from "../../../global-account/react/index.js";
|
|
2
2
|
import { ecosystemWalletId } from "../../../shared/constants/index.js";
|
|
3
3
|
import { debugB3React } from "../../../shared/utils/debug.js";
|
|
4
|
-
import { getIpfsUrl } from "../../../shared/utils/ipfs.js";
|
|
5
4
|
import { useEffect, useMemo, useState } from "react";
|
|
6
5
|
import { getLastAuthProvider, useActiveWallet, useConnectedWallets, useWalletImage } from "thirdweb/react";
|
|
7
6
|
import { socialIcons } from "thirdweb/wallets/in-app";
|
|
@@ -18,7 +17,13 @@ function useLastAuthProvider() {
|
|
|
18
17
|
return lastAuthProvider;
|
|
19
18
|
}
|
|
20
19
|
export function useAccountWallet() {
|
|
21
|
-
|
|
20
|
+
// WOJ: --------------------
|
|
21
|
+
// values from in useB3:
|
|
22
|
+
// const activeAccount = useActiveAccount();
|
|
23
|
+
// const effectiveAccount = isAuthenticated ? accountOverride || activeAccount : undefined;
|
|
24
|
+
// can we possibly just use useActiveAccount here?
|
|
25
|
+
// --------------------
|
|
26
|
+
const { account } = useB3();
|
|
22
27
|
const activeWallet = useActiveWallet();
|
|
23
28
|
const connectedWallets = useConnectedWallets();
|
|
24
29
|
const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === ecosystemWalletId);
|
|
@@ -31,7 +36,6 @@ export function useAccountWallet() {
|
|
|
31
36
|
debug("connectedEOAWallet", connectedEOAWallet);
|
|
32
37
|
debug("isActiveSmartWallet", isActiveSmartWallet);
|
|
33
38
|
debug("isActiveEOAWallet", isActiveEOAWallet);
|
|
34
|
-
const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
|
|
35
39
|
// If not EOA sign in, then we need to show the smart wallet icon
|
|
36
40
|
const lastAuthProvider = useLastAuthProvider();
|
|
37
41
|
const smartWalletIcon = lastAuthProvider && !connectedEOAWallet
|
|
@@ -39,13 +43,12 @@ export function useAccountWallet() {
|
|
|
39
43
|
: "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
|
|
40
44
|
const { data: profileData } = useProfile({ address: account?.address });
|
|
41
45
|
const ensName = profileData?.displayName?.replace(/\.b3\.fun/g, "");
|
|
42
|
-
const avatarUrl = user?.avatar ? getIpfsUrl(user?.avatar) : profileData?.avatar;
|
|
43
46
|
const res = useMemo(() => ({
|
|
44
47
|
wallet: {
|
|
45
48
|
...account,
|
|
46
49
|
ensName,
|
|
47
50
|
meta: {
|
|
48
|
-
icon:
|
|
51
|
+
icon: "", // deprecated
|
|
49
52
|
},
|
|
50
53
|
},
|
|
51
54
|
address: account?.address,
|
|
@@ -55,22 +58,20 @@ export function useAccountWallet() {
|
|
|
55
58
|
isActiveSmartWallet: isActiveSmartWallet,
|
|
56
59
|
isActiveEOAWallet: isActiveEOAWallet,
|
|
57
60
|
smartWalletIcon: smartWalletIcon,
|
|
58
|
-
eoaWalletIcon:
|
|
61
|
+
eoaWalletIcon: "", // deprecated
|
|
59
62
|
}), [
|
|
60
63
|
account,
|
|
61
|
-
avatarUrl,
|
|
62
64
|
connectedEOAWallet,
|
|
63
65
|
connectedSmartWallet,
|
|
64
66
|
ensName,
|
|
65
67
|
isActiveEOAWallet,
|
|
66
68
|
isActiveSmartWallet,
|
|
67
69
|
smartWalletIcon,
|
|
68
|
-
walletImage,
|
|
69
70
|
]);
|
|
70
71
|
return res;
|
|
71
72
|
}
|
|
72
73
|
export function useAccountWalletImage() {
|
|
73
|
-
const { account
|
|
74
|
+
const { account } = useB3();
|
|
74
75
|
const activeWallet = useActiveWallet();
|
|
75
76
|
const connectedWallets = useConnectedWallets();
|
|
76
77
|
const connectedSmartWallet = connectedWallets.find(wallet => wallet.id === ecosystemWalletId);
|
|
@@ -83,6 +84,6 @@ export function useAccountWalletImage() {
|
|
|
83
84
|
? socialIcons[lastAuthProvider]
|
|
84
85
|
: "https://gradvatar.com/0x0000000000000000000000000000000000000000"; // show smart wallet of eoa wallet is gradvatar
|
|
85
86
|
const { data: profileData } = useProfile({ address: account?.address });
|
|
86
|
-
const avatarUrl =
|
|
87
|
+
const avatarUrl = profileData?.avatar;
|
|
87
88
|
return avatarUrl || (isActiveSmartWallet ? smartWalletIcon : walletImage) || "";
|
|
88
89
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { components } from "../../anyspend/types/api";
|
|
2
|
+
export declare function getStripePromise(): Promise<import("@stripe/stripe-js").Stripe | null>;
|
|
2
3
|
export declare function getVendorDisplayName(vendor?: components["schemas"]["OnrampMetadata"]["vendor"]): string;
|
|
3
4
|
export declare function getPaymentMethodDescription(vendor?: components["schemas"]["OnrampMetadata"]["vendor"]): string;
|
|
4
5
|
export declare function formatStripeAmount(amount: number): string;
|
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
import { VENDOR_DISPLAY_NAMES } from "../../anyspend/constants/index.js";
|
|
1
|
+
import { STRIPE_CONFIG, VENDOR_DISPLAY_NAMES } from "../../anyspend/constants/index.js";
|
|
2
|
+
import { loadStripe } from "@stripe/stripe-js";
|
|
3
|
+
let stripePromise = null;
|
|
4
|
+
export function getStripePromise() {
|
|
5
|
+
if (!stripePromise) {
|
|
6
|
+
stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
|
|
7
|
+
}
|
|
8
|
+
return stripePromise;
|
|
9
|
+
}
|
|
2
10
|
export function getVendorDisplayName(vendor) {
|
|
3
11
|
switch (vendor) {
|
|
4
12
|
case "coinbase":
|
|
@@ -6,7 +6,6 @@ export { useAnalytics } from "./useAnalytics";
|
|
|
6
6
|
export { useAuthentication } from "./useAuthentication";
|
|
7
7
|
export { useB3BalanceFromAddresses } from "./useB3BalanceFromAddresses";
|
|
8
8
|
export { useB3EnsName } from "./useB3EnsName";
|
|
9
|
-
export { useBestTransactionPath } from "./useBestTransactionPath";
|
|
10
9
|
export { useChainSwitchWithAction } from "./useChainSwitchWithAction";
|
|
11
10
|
export * from "./useClaim";
|
|
12
11
|
export { useClient } from "./useClient";
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { components } from "@b3dotfun/sdk/anyspend/types/api";
|
|
2
|
+
export declare function getStripePromise(): Promise<import("@stripe/stripe-js").Stripe | null>;
|
|
2
3
|
export declare function getVendorDisplayName(vendor?: components["schemas"]["OnrampMetadata"]["vendor"]): string;
|
|
3
4
|
export declare function getPaymentMethodDescription(vendor?: components["schemas"]["OnrampMetadata"]["vendor"]): string;
|
|
4
5
|
export declare function formatStripeAmount(amount: number): string;
|