@b3dotfun/sdk 0.0.40-alpha.3 → 0.0.40-alpha.5
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/global-account/react/components/B3Provider/B3Provider.d.ts +2 -2
- package/dist/cjs/global-account/react/components/B3Provider/B3Provider.js +14 -7
- package/dist/cjs/global-account/react/components/LinkAccount/LinkAccount.js +63 -3
- package/dist/cjs/global-account/react/components/ManageAccount/ManageAccount.js +35 -2
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.d.ts +2 -2
- package/dist/esm/global-account/react/components/B3Provider/B3Provider.js +13 -5
- package/dist/esm/global-account/react/components/LinkAccount/LinkAccount.js +65 -5
- package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js +35 -2
- package/dist/styles/index.css +1 -1
- package/dist/types/global-account/react/components/B3Provider/B3Provider.d.ts +2 -2
- package/package.json +1 -1
- package/src/global-account/react/components/B3Provider/B3Provider.tsx +15 -4
- package/src/global-account/react/components/LinkAccount/LinkAccount.tsx +106 -32
- package/src/global-account/react/components/ManageAccount/ManageAccount.tsx +60 -5
|
@@ -3,11 +3,10 @@ import { Account } from "thirdweb/wallets";
|
|
|
3
3
|
import { ClientType } from "../../../client-manager";
|
|
4
4
|
import { B3ContextType } from "./types";
|
|
5
5
|
import "@reservoir0x/relay-kit-ui/styles.css";
|
|
6
|
-
export declare const wagmiConfig: import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], any, readonly import("wagmi").CreateConnectorFn[]>;
|
|
7
6
|
/**
|
|
8
7
|
* Main B3Provider component
|
|
9
8
|
*/
|
|
10
|
-
export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, }: {
|
|
9
|
+
export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, rpcUrls, }: {
|
|
11
10
|
theme: "light" | "dark";
|
|
12
11
|
children: React.ReactNode;
|
|
13
12
|
accountOverride?: Account;
|
|
@@ -19,6 +18,7 @@ export declare function B3Provider({ theme, children, accountOverride, environme
|
|
|
19
18
|
style?: React.CSSProperties;
|
|
20
19
|
};
|
|
21
20
|
clientType?: ClientType;
|
|
21
|
+
rpcUrls?: Record<number, string>;
|
|
22
22
|
}): import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
/**
|
|
24
24
|
* Inner provider component that provides the actual B3Context
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.wagmiConfig = void 0;
|
|
4
3
|
exports.B3Provider = B3Provider;
|
|
5
4
|
exports.InnerProvider = InnerProvider;
|
|
6
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
@@ -25,16 +24,24 @@ const DEFAULT_PERMISSIONS = {
|
|
|
25
24
|
startDate: new Date(),
|
|
26
25
|
endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
|
|
27
26
|
};
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
/**
|
|
28
|
+
* Creates wagmi config with optional custom RPC URLs
|
|
29
|
+
* @param rpcUrls - Optional mapping of chain IDs to RPC URLs
|
|
30
|
+
*/
|
|
31
|
+
function createWagmiConfig(rpcUrls) {
|
|
32
|
+
return (0, wagmi_1.createConfig)({
|
|
33
|
+
chains: [supported_1.supportedChains[0], ...supported_1.supportedChains.slice(1)],
|
|
34
|
+
transports: Object.fromEntries(supported_1.supportedChains.map(chain => [chain.id, (0, wagmi_1.http)(rpcUrls?.[chain.id])])),
|
|
35
|
+
});
|
|
36
|
+
}
|
|
32
37
|
// Create queryClient instance
|
|
33
38
|
const queryClient = new react_query_1.QueryClient();
|
|
34
39
|
/**
|
|
35
40
|
* Main B3Provider component
|
|
36
41
|
*/
|
|
37
|
-
function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType = "rest", }) {
|
|
42
|
+
function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType = "rest", rpcUrls, }) {
|
|
43
|
+
// Create wagmi config with custom RPC URLs if provided
|
|
44
|
+
const [wagmiConfig] = (0, react_2.useState)(() => createWagmiConfig(rpcUrls));
|
|
38
45
|
// Initialize Google Analytics on mount
|
|
39
46
|
(0, react_2.useEffect)(() => {
|
|
40
47
|
(0, analytics_1.loadGA4Script)();
|
|
@@ -43,7 +50,7 @@ function B3Provider({ theme = "light", children, accountOverride, environment, a
|
|
|
43
50
|
(0, react_2.useEffect)(() => {
|
|
44
51
|
(0, client_manager_1.setClientType)(clientType);
|
|
45
52
|
}, [clientType]);
|
|
46
|
-
return ((0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config:
|
|
53
|
+
return ((0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: wagmiConfig, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_3.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(InnerProvider, { accountOverride: accountOverride, environment: environment, theme: theme, automaticallySetFirstEoa: !!automaticallySetFirstEoa, clientType: clientType, children: (0, jsx_runtime_1.jsxs)(react_1.RelayKitProviderWrapper, { simDuneApiKey: simDuneApiKey, children: [children, (0, jsx_runtime_1.jsx)(StyleRoot_1.StyleRoot, { id: "b3-root" }), (0, jsx_runtime_1.jsx)(sonner_1.Toaster, { theme: theme, position: toaster?.position, style: toaster?.style })] }) }) }) }) }) }));
|
|
47
54
|
}
|
|
48
55
|
/**
|
|
49
56
|
* Inner provider component that provides the actual B3Context
|
|
@@ -7,12 +7,14 @@ exports.LinkAccount = LinkAccount;
|
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
8
|
const app_1 = __importDefault(require("../../../../global-account/app"));
|
|
9
9
|
const constants_1 = require("../../../../shared/constants");
|
|
10
|
+
const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
|
|
10
11
|
const thirdweb_1 = require("../../../../shared/utils/thirdweb");
|
|
11
12
|
const lucide_react_1 = require("lucide-react");
|
|
12
13
|
const react_1 = require("react");
|
|
13
14
|
const sonner_1 = require("sonner");
|
|
14
15
|
const react_2 = require("thirdweb/react");
|
|
15
16
|
const wallets_1 = require("thirdweb/wallets");
|
|
17
|
+
const __1 = require("../..");
|
|
16
18
|
const useModalStore_1 = require("../../stores/useModalStore");
|
|
17
19
|
const profileDisplay_1 = require("../../utils/profileDisplay");
|
|
18
20
|
const useB3_1 = require("../B3Provider/useB3");
|
|
@@ -36,6 +38,38 @@ const AUTH_METHODS = [
|
|
|
36
38
|
icon: (0, jsx_runtime_1.jsx)(FarcasterIcon_1.FarcasterIcon, { className: "size-6" }),
|
|
37
39
|
},
|
|
38
40
|
];
|
|
41
|
+
const WALLET_METHODS = [
|
|
42
|
+
{
|
|
43
|
+
id: "wallet",
|
|
44
|
+
label: "Wallet",
|
|
45
|
+
enabled: true,
|
|
46
|
+
icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WalletIcon, { className: "size-6" }),
|
|
47
|
+
walletType: "com.coinbase.wallet",
|
|
48
|
+
},
|
|
49
|
+
{ id: "wallet", label: "Wallet", enabled: true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WalletIcon, { className: "size-6" }), walletType: "io.metamask" },
|
|
50
|
+
{
|
|
51
|
+
id: "wallet",
|
|
52
|
+
label: "Wallet",
|
|
53
|
+
enabled: true,
|
|
54
|
+
icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WalletIcon, { className: "size-6" }),
|
|
55
|
+
walletType: "me.rainbow",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
id: "wallet",
|
|
59
|
+
label: "Wallet",
|
|
60
|
+
enabled: true,
|
|
61
|
+
icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WalletIcon, { className: "size-6" }),
|
|
62
|
+
walletType: "app.phantom",
|
|
63
|
+
},
|
|
64
|
+
{ id: "wallet", label: "Wallet", enabled: true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WalletIcon, { className: "size-6" }), walletType: "io.rabby" },
|
|
65
|
+
{
|
|
66
|
+
id: "wallet",
|
|
67
|
+
label: "Wallet",
|
|
68
|
+
enabled: true,
|
|
69
|
+
icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WalletIcon, { className: "size-6" }),
|
|
70
|
+
walletType: "walletConnect",
|
|
71
|
+
},
|
|
72
|
+
];
|
|
39
73
|
function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, className, }) {
|
|
40
74
|
const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = (0, useModalStore_1.useModalStore)();
|
|
41
75
|
const [selectedMethod, setSelectedMethod] = (0, react_1.useState)(null);
|
|
@@ -47,12 +81,12 @@ function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, pa
|
|
|
47
81
|
const { data: profilesRaw = [] } = (0, react_2.useProfiles)({ client: thirdweb_1.client });
|
|
48
82
|
// Get connected auth methods
|
|
49
83
|
const connectedAuthMethods = profilesRaw
|
|
50
|
-
.filter((profile) => !["custom_auth_endpoint"
|
|
84
|
+
.filter((profile) => !["custom_auth_endpoint"].includes(profile.type))
|
|
51
85
|
.map((profile) => profile.type);
|
|
52
86
|
// Filter available auth methods
|
|
53
87
|
const availableAuthMethods = AUTH_METHODS.filter(method => !connectedAuthMethods.includes(method.id) && method.enabled);
|
|
54
88
|
const profiles = profilesRaw
|
|
55
|
-
.filter((profile) => !["custom_auth_endpoint"
|
|
89
|
+
.filter((profile) => !["custom_auth_endpoint"].includes(profile.type))
|
|
56
90
|
.map((profile) => ({
|
|
57
91
|
...(0, profileDisplay_1.getProfileDisplayInfo)(profile),
|
|
58
92
|
originalProfile: profile,
|
|
@@ -182,6 +216,26 @@ function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, pa
|
|
|
182
216
|
onError?.(error);
|
|
183
217
|
}
|
|
184
218
|
};
|
|
219
|
+
const handleLinkWallet = async (walletType) => {
|
|
220
|
+
setLinkingState(true, "wallet");
|
|
221
|
+
console.log("selectedMethod", walletType);
|
|
222
|
+
try {
|
|
223
|
+
if (!walletType) {
|
|
224
|
+
throw new Error("Wallet type not found");
|
|
225
|
+
}
|
|
226
|
+
await linkProfile({
|
|
227
|
+
client: thirdweb_1.client,
|
|
228
|
+
strategy: "wallet",
|
|
229
|
+
wallet: (0, wallets_1.createWallet)(walletType),
|
|
230
|
+
chain: b3Chain_1.thirdwebB3Mainnet,
|
|
231
|
+
}, mutationOptions);
|
|
232
|
+
}
|
|
233
|
+
catch (error) {
|
|
234
|
+
console.error("Error linking account:", error);
|
|
235
|
+
setError(error instanceof Error ? error.message : "Failed to link account");
|
|
236
|
+
onError?.(error);
|
|
237
|
+
}
|
|
238
|
+
};
|
|
185
239
|
const handleSocialLink = async (strategy) => {
|
|
186
240
|
try {
|
|
187
241
|
console.log("handleSocialLink", strategy);
|
|
@@ -262,5 +316,11 @@ function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, pa
|
|
|
262
316
|
else {
|
|
263
317
|
handleSocialLink(method.id);
|
|
264
318
|
}
|
|
265
|
-
}, disabled: linkingMethod === method.id, children: isLinking && linkingMethod === method.id ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin" })) : ((0, jsx_runtime_1.jsxs)("div", { className: "b3-link-account-method-content flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "b3-link-account-method-icon flex items-center justify-center rounded-full", children: method.icon }), (0, jsx_runtime_1.jsx)("span", { className: "b3-link-account-method-label font-medium", children: method.label })] })) }, method.id))),
|
|
319
|
+
}, disabled: linkingMethod === method.id, children: isLinking && linkingMethod === method.id ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin" })) : ((0, jsx_runtime_1.jsxs)("div", { className: "b3-link-account-method-content flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "b3-link-account-method-icon flex items-center justify-center rounded-full", children: method.icon }), (0, jsx_runtime_1.jsx)("span", { className: "b3-link-account-method-label font-medium", children: method.label })] })) }, method.id))), WALLET_METHODS.map(method => {
|
|
320
|
+
if (!method.walletType) {
|
|
321
|
+
return null;
|
|
322
|
+
}
|
|
323
|
+
return ((0, jsx_runtime_1.jsx)(__1.WalletRow, { walletId: method.walletType, onClick: () => handleLinkWallet(method.walletType), isLoading: isLinking }, method.walletType));
|
|
324
|
+
}), availableAuthMethods.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted py-8 text-center", children: "All available authentication methods have been connected" }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "b3-link-account-form space-y-4", children: [selectedMethod === "email" && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Email Address" }), (0, jsx_runtime_1.jsx)("input", { type: "email", placeholder: "Enter your email", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: email, onChange: e => setEmail(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "email") })] })), selectedMethod === "phone" && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Phone Number" }), (0, jsx_runtime_1.jsx)("input", { type: "tel", placeholder: "Enter your phone number", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: phone, onChange: e => setPhone(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "phone") }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Include country code (e.g., +1 for US)" })] })), error && (0, jsx_runtime_1.jsx)("div", { className: "text-b3-negative font-neue-montreal-medium py-2 text-sm", children: error }), (selectedMethod === "email" || selectedMethod === "phone") &&
|
|
325
|
+
(otpSent ? ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Verification Code" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Enter verification code", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: otp, onChange: e => setOtp(e.target.value) })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleLinkAccount, children: "Link Account" })] })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleSendOTP, disabled: (!email && !phone) || (isLinking && linkingMethod === selectedMethod), children: isLinking && linkingMethod === selectedMethod ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin" })) : ("Send Verification Code") })))] }))] }));
|
|
266
326
|
}
|
|
@@ -10,6 +10,7 @@ const react_1 = require("../../../../global-account/react");
|
|
|
10
10
|
const SignOutIcon_1 = require("../../../../global-account/react/components/icons/SignOutIcon");
|
|
11
11
|
const formatNumber_1 = require("../../../../shared/utils/formatNumber");
|
|
12
12
|
const thirdweb_1 = require("../../../../shared/utils/thirdweb");
|
|
13
|
+
const truncateAddress_1 = require("../../../../shared/utils/truncateAddress");
|
|
13
14
|
const lucide_react_1 = require("lucide-react");
|
|
14
15
|
const react_2 = require("react");
|
|
15
16
|
const sonner_1 = require("sonner");
|
|
@@ -18,6 +19,21 @@ const viem_1 = require("viem");
|
|
|
18
19
|
const profileDisplay_1 = require("../../utils/profileDisplay");
|
|
19
20
|
const AccountAssets_1 = require("../AccountAssets/AccountAssets");
|
|
20
21
|
const ContentTokens_1 = require("./ContentTokens");
|
|
22
|
+
// Helper function to check if a string is a wallet address and format it
|
|
23
|
+
const formatProfileTitle = (title) => {
|
|
24
|
+
// Check if title looks like an Ethereum address (0x followed by 40 hex characters)
|
|
25
|
+
const isEthereumAddress = /^0x[a-fA-F0-9]{40}$/.test(title);
|
|
26
|
+
if (isEthereumAddress) {
|
|
27
|
+
return {
|
|
28
|
+
displayTitle: (0, truncateAddress_1.truncateAddress)(title),
|
|
29
|
+
isAddress: true,
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
return {
|
|
33
|
+
displayTitle: title,
|
|
34
|
+
isAddress: false,
|
|
35
|
+
};
|
|
36
|
+
};
|
|
21
37
|
const BalanceContent_1 = require("./BalanceContent");
|
|
22
38
|
function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, showSwap, showDeposit, }) {
|
|
23
39
|
const [revokingSignerId, setRevokingSignerId] = (0, react_2.useState)(null);
|
|
@@ -117,7 +133,7 @@ function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain
|
|
|
117
133
|
}
|
|
118
134
|
};
|
|
119
135
|
const profiles = profilesRaw
|
|
120
|
-
.filter((profile) => !["custom_auth_endpoint"
|
|
136
|
+
.filter((profile) => !["custom_auth_endpoint"].includes(profile.type))
|
|
121
137
|
.map((profile) => ({
|
|
122
138
|
...(0, profileDisplay_1.getProfileDisplayInfo)(profile),
|
|
123
139
|
originalProfile: profile,
|
|
@@ -152,7 +168,24 @@ function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain
|
|
|
152
168
|
},
|
|
153
169
|
});
|
|
154
170
|
};
|
|
155
|
-
|
|
171
|
+
console.log("@@profiles", profiles);
|
|
172
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "linked-accounts-settings space-y-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-accounts-section space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-accounts-header flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold linked-accounts-settings-title text-xl", children: "Linked Accounts" }), (0, jsx_runtime_1.jsxs)(react_1.Button, { className: "linked-accounts-settings-button linked-accounts-link-button bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2", onClick: handleOpenLinkModal, disabled: isLinking, children: [isLinking ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "linked-accounts-link-loading text-b3-primary-blue animate-spin", size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.LinkIcon, { size: 16, className: "linked-accounts-link-icon text-b3-primary-blue" })), (0, jsx_runtime_1.jsx)("span", { className: "linked-accounts-link-text text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-loading flex justify-center py-8", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-list space-y-4", children: profiles.map(profile => ((0, jsx_runtime_1.jsxs)("div", { className: "linked-account-item bg-b3-line group flex items-center justify-between rounded-xl p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-account-info flex items-center gap-3", children: [profile.imageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: profile.imageUrl, alt: profile.title, className: "linked-account-avatar linked-account-avatar-image size-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "linked-account-avatar linked-account-avatar-placeholder bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: "linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), (0, jsx_runtime_1.jsxs)("div", { className: "linked-account-details", children: [(0, jsx_runtime_1.jsxs)("div", { className: "linked-account-title-row flex items-center gap-2", children: [(() => {
|
|
173
|
+
const { displayTitle, isAddress } = formatProfileTitle(profile.title);
|
|
174
|
+
const handleCopyAddress = async (e) => {
|
|
175
|
+
e.stopPropagation();
|
|
176
|
+
try {
|
|
177
|
+
await navigator.clipboard.writeText(profile.title);
|
|
178
|
+
sonner_1.toast.success("Address copied to clipboard!");
|
|
179
|
+
}
|
|
180
|
+
catch (error) {
|
|
181
|
+
sonner_1.toast.error("Failed to copy address");
|
|
182
|
+
}
|
|
183
|
+
};
|
|
184
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: `linked-account-title text-b3-grey font-neue-montreal-semibold ${isAddress
|
|
185
|
+
? "font-mono text-sm" // Use monospace font for addresses
|
|
186
|
+
: "break-words" // Use break-words for emails/names (better than break-all)
|
|
187
|
+
}`, title: isAddress ? profile.title : undefined, children: displayTitle }), isAddress && ((0, jsx_runtime_1.jsx)("button", { onClick: handleCopyAddress, className: "linked-account-copy-button ml-1 rounded p-1 opacity-0 transition-opacity hover:bg-gray-100 group-hover:opacity-100", title: "Copy full address", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 12, className: "text-gray-500 hover:text-gray-700" }) }))] }));
|
|
188
|
+
})(), (0, jsx_runtime_1.jsx)("span", { className: "linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), (0, jsx_runtime_1.jsx)("div", { className: "linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", size: "icon", className: "linked-account-unlink-button text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "linked-account-unlink-loading animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.UnlinkIcon, { size: 16, className: "linked-account-unlink-icon" })) })] }, profile.title))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "linked-accounts-empty text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), showReferralInfo && (
|
|
156
189
|
/* Referral Section */
|
|
157
190
|
(0, jsx_runtime_1.jsxs)("div", { className: "referrals-section space-y-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "referrals-title text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), (0, jsx_runtime_1.jsxs)("div", { className: "referral-code-container bg-b3-line rounded-xl p-4", children: [isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-header-editing", children: [(0, jsx_runtime_1.jsx)("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "referral-code-content flex items-center justify-between", children: [!isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), (0, jsx_runtime_1.jsx)("div", { className: "referral-code-actions flex items-center gap-2", children: isEditingCode ? ((0, jsx_runtime_1.jsxs)("div", { className: "referral-code-edit-form flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "referral-code-input rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", placeholder: "Enter new code", ref: referallCodeRef }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", className: "referral-code-save-button", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "referral-code-save-loading h-4 w-4 animate-spin" })) : ("Save") }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "ghost", className: "referral-code-cancel-button", onClick: () => {
|
|
158
191
|
setIsEditingCode(false);
|
|
@@ -3,11 +3,10 @@ import { Account } from "thirdweb/wallets";
|
|
|
3
3
|
import { ClientType } from "../../../client-manager";
|
|
4
4
|
import { B3ContextType } from "./types";
|
|
5
5
|
import "@reservoir0x/relay-kit-ui/styles.css";
|
|
6
|
-
export declare const wagmiConfig: import("wagmi").Config<readonly [import("viem").Chain, ...import("viem").Chain[]], any, readonly import("wagmi").CreateConnectorFn[]>;
|
|
7
6
|
/**
|
|
8
7
|
* Main B3Provider component
|
|
9
8
|
*/
|
|
10
|
-
export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, }: {
|
|
9
|
+
export declare function B3Provider({ theme, children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType, rpcUrls, }: {
|
|
11
10
|
theme: "light" | "dark";
|
|
12
11
|
children: React.ReactNode;
|
|
13
12
|
accountOverride?: Account;
|
|
@@ -19,6 +18,7 @@ export declare function B3Provider({ theme, children, accountOverride, environme
|
|
|
19
18
|
style?: React.CSSProperties;
|
|
20
19
|
};
|
|
21
20
|
clientType?: ClientType;
|
|
21
|
+
rpcUrls?: Record<number, string>;
|
|
22
22
|
}): import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
/**
|
|
24
24
|
* Inner provider component that provides the actual B3Context
|
|
@@ -20,16 +20,24 @@ const DEFAULT_PERMISSIONS = {
|
|
|
20
20
|
startDate: new Date(),
|
|
21
21
|
endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
|
|
22
22
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
/**
|
|
24
|
+
* Creates wagmi config with optional custom RPC URLs
|
|
25
|
+
* @param rpcUrls - Optional mapping of chain IDs to RPC URLs
|
|
26
|
+
*/
|
|
27
|
+
function createWagmiConfig(rpcUrls) {
|
|
28
|
+
return createConfig({
|
|
29
|
+
chains: [supportedChains[0], ...supportedChains.slice(1)],
|
|
30
|
+
transports: Object.fromEntries(supportedChains.map(chain => [chain.id, http(rpcUrls?.[chain.id])])),
|
|
31
|
+
});
|
|
32
|
+
}
|
|
27
33
|
// Create queryClient instance
|
|
28
34
|
const queryClient = new QueryClient();
|
|
29
35
|
/**
|
|
30
36
|
* Main B3Provider component
|
|
31
37
|
*/
|
|
32
|
-
export function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType = "rest", }) {
|
|
38
|
+
export function B3Provider({ theme = "light", children, accountOverride, environment, automaticallySetFirstEoa, simDuneApiKey, toaster, clientType = "rest", rpcUrls, }) {
|
|
39
|
+
// Create wagmi config with custom RPC URLs if provided
|
|
40
|
+
const [wagmiConfig] = useState(() => createWagmiConfig(rpcUrls));
|
|
33
41
|
// Initialize Google Analytics on mount
|
|
34
42
|
useEffect(() => {
|
|
35
43
|
loadGA4Script();
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import app from "../../../../global-account/app.js";
|
|
3
3
|
import { ecosystemWalletId } from "../../../../shared/constants/index.js";
|
|
4
|
+
import { thirdwebB3Mainnet } from "../../../../shared/constants/chains/b3Chain.js";
|
|
4
5
|
import { client } from "../../../../shared/utils/thirdweb.js";
|
|
5
|
-
import { Loader2, Mail, Phone } from "lucide-react";
|
|
6
|
+
import { Loader2, Mail, Phone, WalletIcon } from "lucide-react";
|
|
6
7
|
import { useCallback, useEffect, useState } from "react";
|
|
7
8
|
import { toast } from "sonner";
|
|
8
9
|
import { useLinkProfile, useProfiles } from "thirdweb/react";
|
|
9
|
-
import { preAuthenticate } from "thirdweb/wallets";
|
|
10
|
+
import { createWallet, preAuthenticate } from "thirdweb/wallets";
|
|
11
|
+
import { WalletRow } from "../../index.js";
|
|
10
12
|
import { useModalStore } from "../../stores/useModalStore.js";
|
|
11
13
|
import { getProfileDisplayInfo } from "../../utils/profileDisplay.js";
|
|
12
14
|
import { useB3 } from "../B3Provider/useB3.js";
|
|
@@ -30,6 +32,38 @@ const AUTH_METHODS = [
|
|
|
30
32
|
icon: _jsx(FarcasterIcon, { className: "size-6" }),
|
|
31
33
|
},
|
|
32
34
|
];
|
|
35
|
+
const WALLET_METHODS = [
|
|
36
|
+
{
|
|
37
|
+
id: "wallet",
|
|
38
|
+
label: "Wallet",
|
|
39
|
+
enabled: true,
|
|
40
|
+
icon: _jsx(WalletIcon, { className: "size-6" }),
|
|
41
|
+
walletType: "com.coinbase.wallet",
|
|
42
|
+
},
|
|
43
|
+
{ id: "wallet", label: "Wallet", enabled: true, icon: _jsx(WalletIcon, { className: "size-6" }), walletType: "io.metamask" },
|
|
44
|
+
{
|
|
45
|
+
id: "wallet",
|
|
46
|
+
label: "Wallet",
|
|
47
|
+
enabled: true,
|
|
48
|
+
icon: _jsx(WalletIcon, { className: "size-6" }),
|
|
49
|
+
walletType: "me.rainbow",
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
id: "wallet",
|
|
53
|
+
label: "Wallet",
|
|
54
|
+
enabled: true,
|
|
55
|
+
icon: _jsx(WalletIcon, { className: "size-6" }),
|
|
56
|
+
walletType: "app.phantom",
|
|
57
|
+
},
|
|
58
|
+
{ id: "wallet", label: "Wallet", enabled: true, icon: _jsx(WalletIcon, { className: "size-6" }), walletType: "io.rabby" },
|
|
59
|
+
{
|
|
60
|
+
id: "wallet",
|
|
61
|
+
label: "Wallet",
|
|
62
|
+
enabled: true,
|
|
63
|
+
icon: _jsx(WalletIcon, { className: "size-6" }),
|
|
64
|
+
walletType: "walletConnect",
|
|
65
|
+
},
|
|
66
|
+
];
|
|
33
67
|
export function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, chain, partnerId, className, }) {
|
|
34
68
|
const { isLinking, linkingMethod, setLinkingState, navigateBack, setB3ModalContentType } = useModalStore();
|
|
35
69
|
const [selectedMethod, setSelectedMethod] = useState(null);
|
|
@@ -41,12 +75,12 @@ export function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, ch
|
|
|
41
75
|
const { data: profilesRaw = [] } = useProfiles({ client });
|
|
42
76
|
// Get connected auth methods
|
|
43
77
|
const connectedAuthMethods = profilesRaw
|
|
44
|
-
.filter((profile) => !["custom_auth_endpoint"
|
|
78
|
+
.filter((profile) => !["custom_auth_endpoint"].includes(profile.type))
|
|
45
79
|
.map((profile) => profile.type);
|
|
46
80
|
// Filter available auth methods
|
|
47
81
|
const availableAuthMethods = AUTH_METHODS.filter(method => !connectedAuthMethods.includes(method.id) && method.enabled);
|
|
48
82
|
const profiles = profilesRaw
|
|
49
|
-
.filter((profile) => !["custom_auth_endpoint"
|
|
83
|
+
.filter((profile) => !["custom_auth_endpoint"].includes(profile.type))
|
|
50
84
|
.map((profile) => ({
|
|
51
85
|
...getProfileDisplayInfo(profile),
|
|
52
86
|
originalProfile: profile,
|
|
@@ -176,6 +210,26 @@ export function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, ch
|
|
|
176
210
|
onError?.(error);
|
|
177
211
|
}
|
|
178
212
|
};
|
|
213
|
+
const handleLinkWallet = async (walletType) => {
|
|
214
|
+
setLinkingState(true, "wallet");
|
|
215
|
+
console.log("selectedMethod", walletType);
|
|
216
|
+
try {
|
|
217
|
+
if (!walletType) {
|
|
218
|
+
throw new Error("Wallet type not found");
|
|
219
|
+
}
|
|
220
|
+
await linkProfile({
|
|
221
|
+
client,
|
|
222
|
+
strategy: "wallet",
|
|
223
|
+
wallet: createWallet(walletType),
|
|
224
|
+
chain: thirdwebB3Mainnet,
|
|
225
|
+
}, mutationOptions);
|
|
226
|
+
}
|
|
227
|
+
catch (error) {
|
|
228
|
+
console.error("Error linking account:", error);
|
|
229
|
+
setError(error instanceof Error ? error.message : "Failed to link account");
|
|
230
|
+
onError?.(error);
|
|
231
|
+
}
|
|
232
|
+
};
|
|
179
233
|
const handleSocialLink = async (strategy) => {
|
|
180
234
|
try {
|
|
181
235
|
console.log("handleSocialLink", strategy);
|
|
@@ -256,5 +310,11 @@ export function LinkAccount({ onSuccess: onSuccessCallback, onError, onClose, ch
|
|
|
256
310
|
else {
|
|
257
311
|
handleSocialLink(method.id);
|
|
258
312
|
}
|
|
259
|
-
}, disabled: linkingMethod === method.id, children: isLinking && linkingMethod === method.id ? (_jsx(Loader2, { className: "h-5 w-5 animate-spin" })) : (_jsxs("div", { className: "b3-link-account-method-content flex items-center gap-4", children: [_jsx("div", { className: "b3-link-account-method-icon flex items-center justify-center rounded-full", children: method.icon }), _jsx("span", { className: "b3-link-account-method-label font-medium", children: method.label })] })) }, method.id))),
|
|
313
|
+
}, disabled: linkingMethod === method.id, children: isLinking && linkingMethod === method.id ? (_jsx(Loader2, { className: "h-5 w-5 animate-spin" })) : (_jsxs("div", { className: "b3-link-account-method-content flex items-center gap-4", children: [_jsx("div", { className: "b3-link-account-method-icon flex items-center justify-center rounded-full", children: method.icon }), _jsx("span", { className: "b3-link-account-method-label font-medium", children: method.label })] })) }, method.id))), WALLET_METHODS.map(method => {
|
|
314
|
+
if (!method.walletType) {
|
|
315
|
+
return null;
|
|
316
|
+
}
|
|
317
|
+
return (_jsx(WalletRow, { walletId: method.walletType, onClick: () => handleLinkWallet(method.walletType), isLoading: isLinking }, method.walletType));
|
|
318
|
+
}), availableAuthMethods.length === 0 && (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "All available authentication methods have been connected" }))] })) : (_jsxs("div", { className: "b3-link-account-form space-y-4", children: [selectedMethod === "email" && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Email Address" }), _jsx("input", { type: "email", placeholder: "Enter your email", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: email, onChange: e => setEmail(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "email") })] })), selectedMethod === "phone" && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Phone Number" }), _jsx("input", { type: "tel", placeholder: "Enter your phone number", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: phone, onChange: e => setPhone(e.target.value), disabled: otpSent || (isLinking && linkingMethod === "phone") }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Include country code (e.g., +1 for US)" })] })), error && _jsx("div", { className: "text-b3-negative font-neue-montreal-medium py-2 text-sm", children: error }), (selectedMethod === "email" || selectedMethod === "phone") &&
|
|
319
|
+
(otpSent ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-b3-grey font-neue-montreal-medium text-sm", children: "Verification Code" }), _jsx("input", { type: "text", placeholder: "Enter verification code", className: "bg-b3-line text-b3-grey font-neue-montreal-medium focus:ring-b3-primary-blue/20 w-full rounded-xl p-4 focus:outline-none focus:ring-2", value: otp, onChange: e => setOtp(e.target.value) })] }), _jsx(Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleLinkAccount, children: "Link Account" })] })) : (_jsx(Button, { className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full text-white", onClick: handleSendOTP, disabled: (!email && !phone) || (isLinking && linkingMethod === selectedMethod), children: isLinking && linkingMethod === selectedMethod ? (_jsx(Loader2, { className: "animate-spin" })) : ("Send Verification Code") })))] }))] }));
|
|
260
320
|
}
|
|
@@ -4,6 +4,7 @@ import { Button, TabsContentPrimitive, TabsListPrimitive, TabsPrimitive, TabTrig
|
|
|
4
4
|
import { SignOutIcon } from "../../../../global-account/react/components/icons/SignOutIcon.js";
|
|
5
5
|
import { formatNumber } from "../../../../shared/utils/formatNumber.js";
|
|
6
6
|
import { client } from "../../../../shared/utils/thirdweb.js";
|
|
7
|
+
import { truncateAddress } from "../../../../shared/utils/truncateAddress.js";
|
|
7
8
|
import { BarChart3, Coins, Copy, Image, LinkIcon, Loader2, Pencil, Settings, UnlinkIcon } from "lucide-react";
|
|
8
9
|
import { useRef, useState } from "react";
|
|
9
10
|
import { toast } from "sonner";
|
|
@@ -12,6 +13,21 @@ import { formatUnits } from "viem";
|
|
|
12
13
|
import { getProfileDisplayInfo } from "../../utils/profileDisplay.js";
|
|
13
14
|
import { AccountAssets } from "../AccountAssets/AccountAssets.js";
|
|
14
15
|
import { ContentTokens } from "./ContentTokens.js";
|
|
16
|
+
// Helper function to check if a string is a wallet address and format it
|
|
17
|
+
const formatProfileTitle = (title) => {
|
|
18
|
+
// Check if title looks like an Ethereum address (0x followed by 40 hex characters)
|
|
19
|
+
const isEthereumAddress = /^0x[a-fA-F0-9]{40}$/.test(title);
|
|
20
|
+
if (isEthereumAddress) {
|
|
21
|
+
return {
|
|
22
|
+
displayTitle: truncateAddress(title),
|
|
23
|
+
isAddress: true,
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
return {
|
|
27
|
+
displayTitle: title,
|
|
28
|
+
isAddress: false,
|
|
29
|
+
};
|
|
30
|
+
};
|
|
15
31
|
import { BalanceContent } from "./BalanceContent.js";
|
|
16
32
|
export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, showSwap, showDeposit, }) {
|
|
17
33
|
const [revokingSignerId, setRevokingSignerId] = useState(null);
|
|
@@ -111,7 +127,7 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
|
|
|
111
127
|
}
|
|
112
128
|
};
|
|
113
129
|
const profiles = profilesRaw
|
|
114
|
-
.filter((profile) => !["custom_auth_endpoint"
|
|
130
|
+
.filter((profile) => !["custom_auth_endpoint"].includes(profile.type))
|
|
115
131
|
.map((profile) => ({
|
|
116
132
|
...getProfileDisplayInfo(profile),
|
|
117
133
|
originalProfile: profile,
|
|
@@ -146,7 +162,24 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
|
|
|
146
162
|
},
|
|
147
163
|
});
|
|
148
164
|
};
|
|
149
|
-
|
|
165
|
+
console.log("@@profiles", profiles);
|
|
166
|
+
return (_jsxs("div", { className: "linked-accounts-settings space-y-8", children: [_jsxs("div", { className: "linked-accounts-section space-y-4", children: [_jsxs("div", { className: "linked-accounts-header flex items-center justify-between", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold linked-accounts-settings-title text-xl", children: "Linked Accounts" }), _jsxs(Button, { className: "linked-accounts-settings-button linked-accounts-link-button bg-b3-primary-wash hover:bg-b3-primary-wash/70 flex items-center gap-2 rounded-full px-4 py-2", onClick: handleOpenLinkModal, disabled: isLinking, children: [isLinking ? (_jsx(Loader2, { className: "linked-accounts-link-loading text-b3-primary-blue animate-spin", size: 16 })) : (_jsx(LinkIcon, { size: 16, className: "linked-accounts-link-icon text-b3-primary-blue" })), _jsx("span", { className: "linked-accounts-link-text text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? (_jsx("div", { className: "linked-accounts-loading flex justify-center py-8", children: _jsx(Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? (_jsx("div", { className: "linked-accounts-list space-y-4", children: profiles.map(profile => (_jsxs("div", { className: "linked-account-item bg-b3-line group flex items-center justify-between rounded-xl p-4", children: [_jsxs("div", { className: "linked-account-info flex items-center gap-3", children: [profile.imageUrl ? (_jsx("img", { src: profile.imageUrl, alt: profile.title, className: "linked-account-avatar linked-account-avatar-image size-10 rounded-full" })) : (_jsx("div", { className: "linked-account-avatar linked-account-avatar-placeholder bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("span", { className: "linked-account-initial text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), _jsxs("div", { className: "linked-account-details", children: [_jsxs("div", { className: "linked-account-title-row flex items-center gap-2", children: [(() => {
|
|
167
|
+
const { displayTitle, isAddress } = formatProfileTitle(profile.title);
|
|
168
|
+
const handleCopyAddress = async (e) => {
|
|
169
|
+
e.stopPropagation();
|
|
170
|
+
try {
|
|
171
|
+
await navigator.clipboard.writeText(profile.title);
|
|
172
|
+
toast.success("Address copied to clipboard!");
|
|
173
|
+
}
|
|
174
|
+
catch (error) {
|
|
175
|
+
toast.error("Failed to copy address");
|
|
176
|
+
}
|
|
177
|
+
};
|
|
178
|
+
return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: `linked-account-title text-b3-grey font-neue-montreal-semibold ${isAddress
|
|
179
|
+
? "font-mono text-sm" // Use monospace font for addresses
|
|
180
|
+
: "break-words" // Use break-words for emails/names (better than break-all)
|
|
181
|
+
}`, title: isAddress ? profile.title : undefined, children: displayTitle }), isAddress && (_jsx("button", { onClick: handleCopyAddress, className: "linked-account-copy-button ml-1 rounded p-1 opacity-0 transition-opacity hover:bg-gray-100 group-hover:opacity-100", title: "Copy full address", children: _jsx(Copy, { size: 12, className: "text-gray-500 hover:text-gray-700" }) }))] }));
|
|
182
|
+
})(), _jsx("span", { className: "linked-account-type text-b3-foreground-muted font-neue-montreal-medium bg-b3-primary-wash rounded px-2 py-0.5 text-xs", children: profile.type.toUpperCase() })] }), _jsx("div", { className: "linked-account-subtitle text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "linked-account-unlink-button text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? (_jsx(Loader2, { className: "linked-account-unlink-loading animate-spin" })) : (_jsx(UnlinkIcon, { size: 16, className: "linked-account-unlink-icon" })) })] }, profile.title))) })) : (_jsx("div", { className: "linked-accounts-empty text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), showReferralInfo && (
|
|
150
183
|
/* Referral Section */
|
|
151
184
|
_jsxs("div", { className: "referrals-section space-y-4", children: [_jsx("h3", { className: "referrals-title text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), _jsxs("div", { className: "referral-code-container bg-b3-line rounded-xl p-4", children: [isEditingCode && (_jsxs("div", { className: "referral-code-header-editing", children: [_jsx("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsxs("div", { className: "referral-code-content flex items-center justify-between", children: [!isEditingCode && (_jsxs("div", { className: "referral-code-header", children: [_jsx("div", { className: "referral-code-title text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "referral-code-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsx("div", { className: "referral-code-actions flex items-center gap-2", children: isEditingCode ? (_jsxs("div", { className: "referral-code-edit-form flex items-center gap-2", children: [_jsx("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "referral-code-input rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", placeholder: "Enter new code", ref: referallCodeRef }), _jsx(Button, { size: "sm", className: "referral-code-save-button", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? (_jsx(Loader2, { className: "referral-code-save-loading h-4 w-4 animate-spin" })) : ("Save") }), _jsx(Button, { size: "sm", variant: "ghost", className: "referral-code-cancel-button", onClick: () => {
|
|
152
185
|
setIsEditingCode(false);
|