@b3dotfun/sdk 0.0.34-alpha.1 → 0.0.34
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/ManageAccount/ManageAccount.js +3 -6
- package/dist/cjs/global-account/react/stores/useModalStore.d.ts +0 -2
- package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js +3 -6
- package/dist/esm/global-account/react/stores/useModalStore.d.ts +0 -2
- package/dist/types/global-account/react/stores/useModalStore.d.ts +0 -2
- package/package.json +1 -1
- package/src/global-account/react/components/ManageAccount/ManageAccount.tsx +82 -92
- package/src/global-account/react/stores/useModalStore.ts +0 -2
|
@@ -59,14 +59,13 @@ function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain
|
|
|
59
59
|
const [unlinkingAccountId, setUnlinkingAccountId] = (0, react_2.useState)(null);
|
|
60
60
|
const { data: profilesRaw = [], isLoading: isLoadingProfiles } = (0, react_3.useProfiles)({ client: thirdweb_1.client });
|
|
61
61
|
const { mutate: unlinkProfile, isPending: isUnlinking } = (0, react_3.useUnlinkProfile)();
|
|
62
|
-
const { setB3ModalOpen, setB3ModalContentType, isLinking
|
|
62
|
+
const { setB3ModalOpen, setB3ModalContentType, isLinking } = (0, react_1.useModalStore)();
|
|
63
63
|
const { user, setUser } = (0, react_1.useB3)();
|
|
64
64
|
const [isUpdatingCode, setIsUpdatingCode] = (0, react_2.useState)(false);
|
|
65
65
|
const [newReferralCode, setNewReferralCode] = (0, react_2.useState)("");
|
|
66
66
|
const [isEditingCode, setIsEditingCode] = (0, react_2.useState)(false);
|
|
67
67
|
const referallCodeRef = (0, react_2.useRef)(null);
|
|
68
68
|
const { data: referrals, isLoading: isLoadingReferrals } = (0, react_1.useQueryB3)("referrals", "find", { query: { referrerId: user?.userId } }, !!user?.userId);
|
|
69
|
-
const showReferralInfo = contentType?.showReferralInfo ?? false;
|
|
70
69
|
const mutationOptions = {
|
|
71
70
|
onError: (error) => {
|
|
72
71
|
console.error("Error Unlinking account:", error);
|
|
@@ -152,9 +151,7 @@ function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain
|
|
|
152
151
|
},
|
|
153
152
|
});
|
|
154
153
|
};
|
|
155
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Linked Accounts" }), (0, jsx_runtime_1.jsxs)(react_1.Button, { className: "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: "text-b3-primary-blue animate-spin", size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.LinkIcon, { size: 16, className: "text-b3-primary-blue" })), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? ((0, jsx_runtime_1.jsx)("div", { className: "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: "space-y-4", children: profiles.map(profile => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-line flex items-center justify-between rounded-xl p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [profile.imageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: profile.imageUrl, alt: profile.title, className: "size-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: profile.title }), (0, jsx_runtime_1.jsx)("span", { className: "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: "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: "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: "animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.UnlinkIcon, { size: 16 })) })] }, profile.title))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }),
|
|
156
|
-
/* Referral Section */
|
|
157
|
-
(0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-line rounded-xl p-4", children: [isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "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: "flex items-center justify-between", children: [!isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "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: "flex items-center gap-2", children: isEditingCode ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "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", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }) : "Save" }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "ghost", onClick: () => {
|
|
154
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Linked Accounts" }), (0, jsx_runtime_1.jsxs)(react_1.Button, { className: "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: "text-b3-primary-blue animate-spin", size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.LinkIcon, { size: 16, className: "text-b3-primary-blue" })), (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? ((0, jsx_runtime_1.jsx)("div", { className: "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: "space-y-4", children: profiles.map(profile => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-line flex items-center justify-between rounded-xl p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [profile.imageUrl ? ((0, jsx_runtime_1.jsx)("img", { src: profile.imageUrl, alt: profile.title, className: "size-10 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-b3-grey font-neue-montreal-semibold", children: profile.title }), (0, jsx_runtime_1.jsx)("span", { className: "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: "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: "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: "animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.UnlinkIcon, { size: 16 })) })] }, profile.title))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-line rounded-xl p-4", children: [isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "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: "flex items-center justify-between", children: [!isEditingCode && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), (0, jsx_runtime_1.jsx)("div", { className: "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: "flex items-center gap-2", children: isEditingCode ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "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", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" }) : "Save" }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "ghost", onClick: () => {
|
|
158
155
|
setIsEditingCode(false);
|
|
159
156
|
setNewReferralCode("");
|
|
160
157
|
}, children: "Cancel" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", children: currentReferralCode }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "icon", variant: "ghost", onClick: handleCopyCode, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "icon", variant: "ghost", onClick: () => {
|
|
@@ -162,7 +159,7 @@ function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain
|
|
|
162
159
|
setTimeout(() => {
|
|
163
160
|
referallCodeRef.current?.focus();
|
|
164
161
|
}, 100);
|
|
165
|
-
}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { className: "h-4 w-4" }) })] })) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-line rounded-xl p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold mb-4", children: "Referred Users" }), isLoadingReferrals ? ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center py-4", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) })) : referrals?.data?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: referrals.data.map((referral) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between rounded-lg bg-white p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: referral.referreeId }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-500", children: new Date(referral.createdAt).toLocaleDateString() })] }, String(referral._id)))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "py-4 text-center text-gray-500", children: "No referred users yet" }))] })] })
|
|
162
|
+
}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { className: "h-4 w-4" }) })] })) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-line rounded-xl p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold mb-4", children: "Referred Users" }), isLoadingReferrals ? ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center py-4", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) })) : referrals?.data?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: referrals.data.map((referral) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between rounded-lg bg-white p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: referral.referreeId }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-500", children: new Date(referral.createdAt).toLocaleDateString() })] }, String(referral._id)))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "py-4 text-center text-gray-500", children: "No referred users yet" }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Account Preferences" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-line rounded-xl p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Dark Mode" }), (0, jsx_runtime_1.jsx)("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Switch between light and dark theme" })] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-b3-primary-wash h-6 w-12 rounded-full" })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-b3-line flex items-center justify-between rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4" }), (0, jsx_runtime_1.jsx)("h3", { className: "font-neue-montreal-semibold text-b3-grey", children: "Global Account" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm", children: "Your universal account for all B3 apps" })] }), (0, jsx_runtime_1.jsx)("button", { className: "text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border", onClick: onLogoutEnhanced, children: logoutLoading ? (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin" }) : (0, jsx_runtime_1.jsx)(SignOutIcon_1.SignOutIcon, { size: 16, className: "text-b3-grey" }) })] })] }));
|
|
166
163
|
};
|
|
167
164
|
return ((0, jsx_runtime_1.jsx)("div", { className: "b3-manage-account bg-b3-background flex flex-col rounded-xl", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: (0, jsx_runtime_1.jsxs)(react_1.TabsPrimitive, { defaultValue: activeTab, onValueChange: value => {
|
|
168
165
|
const tab = value;
|
|
@@ -82,8 +82,6 @@ export interface ManageAccountModalProps extends BaseModalProps {
|
|
|
82
82
|
activeTab?: "overview" | "tokens" | "nfts" | "apps" | "settings";
|
|
83
83
|
/** Function to set the active tab */
|
|
84
84
|
setActiveTab?: (tab: "overview" | "tokens" | "nfts" | "apps" | "settings") => void;
|
|
85
|
-
/** Whether to show the referral information */
|
|
86
|
-
showReferralInfo?: boolean;
|
|
87
85
|
}
|
|
88
86
|
/**
|
|
89
87
|
* Props for the AnySpend modal
|
|
@@ -53,14 +53,13 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
|
|
|
53
53
|
const [unlinkingAccountId, setUnlinkingAccountId] = useState(null);
|
|
54
54
|
const { data: profilesRaw = [], isLoading: isLoadingProfiles } = useProfiles({ client });
|
|
55
55
|
const { mutate: unlinkProfile, isPending: isUnlinking } = useUnlinkProfile();
|
|
56
|
-
const { setB3ModalOpen, setB3ModalContentType, isLinking
|
|
56
|
+
const { setB3ModalOpen, setB3ModalContentType, isLinking } = useModalStore();
|
|
57
57
|
const { user, setUser } = useB3();
|
|
58
58
|
const [isUpdatingCode, setIsUpdatingCode] = useState(false);
|
|
59
59
|
const [newReferralCode, setNewReferralCode] = useState("");
|
|
60
60
|
const [isEditingCode, setIsEditingCode] = useState(false);
|
|
61
61
|
const referallCodeRef = useRef(null);
|
|
62
62
|
const { data: referrals, isLoading: isLoadingReferrals } = useQueryB3("referrals", "find", { query: { referrerId: user?.userId } }, !!user?.userId);
|
|
63
|
-
const showReferralInfo = contentType?.showReferralInfo ?? false;
|
|
64
63
|
const mutationOptions = {
|
|
65
64
|
onError: (error) => {
|
|
66
65
|
console.error("Error Unlinking account:", error);
|
|
@@ -146,9 +145,7 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
|
|
|
146
145
|
},
|
|
147
146
|
});
|
|
148
147
|
};
|
|
149
|
-
return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Linked Accounts" }), _jsxs(Button, { className: "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: "text-b3-primary-blue animate-spin", size: 16 })) : (_jsx(LinkIcon, { size: 16, className: "text-b3-primary-blue" })), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? (_jsx("div", { className: "space-y-4", children: profiles.map(profile => (_jsxs("div", { className: "bg-b3-line flex items-center justify-between rounded-xl p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [profile.imageUrl ? (_jsx("img", { src: profile.imageUrl, alt: profile.title, className: "size-10 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: profile.title }), _jsx("span", { className: "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: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(UnlinkIcon, { size: 16 })) })] }, profile.title))) })) : (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }),
|
|
150
|
-
/* Referral Section */
|
|
151
|
-
_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), _jsxs("div", { className: "bg-b3-line rounded-xl p-4", children: [isEditingCode && (_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsxs("div", { className: "flex items-center justify-between", children: [!isEditingCode && (_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsx("div", { className: "flex items-center gap-2", children: isEditingCode ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "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", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : "Save" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
|
|
148
|
+
return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Linked Accounts" }), _jsxs(Button, { className: "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: "text-b3-primary-blue animate-spin", size: 16 })) : (_jsx(LinkIcon, { size: 16, className: "text-b3-primary-blue" })), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: isLinking ? "Linking..." : "Link New Account" })] })] }), isLoadingProfiles ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Loader2, { className: "text-b3-grey animate-spin" }) })) : profiles.length > 0 ? (_jsx("div", { className: "space-y-4", children: profiles.map(profile => (_jsxs("div", { className: "bg-b3-line flex items-center justify-between rounded-xl p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [profile.imageUrl ? (_jsx("img", { src: profile.imageUrl, alt: profile.title, className: "size-10 rounded-full" })) : (_jsx("div", { className: "bg-b3-primary-wash flex h-10 w-10 items-center justify-center rounded-full", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm uppercase", children: profile.initial }) })), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-b3-grey font-neue-montreal-semibold", children: profile.title }), _jsx("span", { className: "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: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: profile.subtitle })] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-b3-grey hover:text-b3-negative", onClick: () => handleUnlink(profile), disabled: unlinkingAccountId === profile.title || isUnlinking, children: unlinkingAccountId === profile.title || isUnlinking ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(UnlinkIcon, { size: 16 })) })] }, profile.title))) })) : (_jsx("div", { className: "text-b3-foreground-muted py-8 text-center", children: "No linked accounts found" }))] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Referrals" }), _jsxs("div", { className: "bg-b3-line rounded-xl p-4", children: [isEditingCode && (_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsxs("div", { className: "flex items-center justify-between", children: [!isEditingCode && (_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Your Referral Code" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Share this code with friends to earn rewards" })] })), _jsx("div", { className: "flex items-center gap-2", children: isEditingCode ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: newReferralCode, onChange: e => setNewReferralCode(e.target.value), className: "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", onClick: handleUpdateReferralCode, disabled: isUpdatingCode || !newReferralCode, children: isUpdatingCode ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : "Save" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
|
|
152
149
|
setIsEditingCode(false);
|
|
153
150
|
setNewReferralCode("");
|
|
154
151
|
}, children: "Cancel" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", children: currentReferralCode }), _jsx(Button, { size: "icon", variant: "ghost", onClick: handleCopyCode, children: _jsx(Copy, { className: "h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => {
|
|
@@ -156,7 +153,7 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
|
|
|
156
153
|
setTimeout(() => {
|
|
157
154
|
referallCodeRef.current?.focus();
|
|
158
155
|
}, 100);
|
|
159
|
-
}, children: _jsx(Pencil, { className: "h-4 w-4" }) })] })) })] })] }), _jsxs("div", { className: "bg-b3-line rounded-xl p-4", children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold mb-4", children: "Referred Users" }), isLoadingReferrals ? (_jsx("div", { className: "flex justify-center py-4", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) })) : referrals?.data?.length ? (_jsx("div", { className: "space-y-3", children: referrals.data.map((referral) => (_jsxs("div", { className: "flex items-center justify-between rounded-lg bg-white p-3", children: [_jsx("div", { className: "text-sm font-medium", children: referral.referreeId }), _jsx("div", { className: "text-sm text-gray-500", children: new Date(referral.createdAt).toLocaleDateString() })] }, String(referral._id)))) })) : (_jsx("div", { className: "py-4 text-center text-gray-500", children: "No referred users yet" }))] })] })
|
|
156
|
+
}, children: _jsx(Pencil, { className: "h-4 w-4" }) })] })) })] })] }), _jsxs("div", { className: "bg-b3-line rounded-xl p-4", children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold mb-4", children: "Referred Users" }), isLoadingReferrals ? (_jsx("div", { className: "flex justify-center py-4", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) })) : referrals?.data?.length ? (_jsx("div", { className: "space-y-3", children: referrals.data.map((referral) => (_jsxs("div", { className: "flex items-center justify-between rounded-lg bg-white p-3", children: [_jsx("div", { className: "text-sm font-medium", children: referral.referreeId }), _jsx("div", { className: "text-sm text-gray-500", children: new Date(referral.createdAt).toLocaleDateString() })] }, String(referral._id)))) })) : (_jsx("div", { className: "py-4 text-center text-gray-500", children: "No referred users yet" }))] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-b3-grey font-neue-montreal-semibold text-xl", children: "Account Preferences" }), _jsx("div", { className: "bg-b3-line rounded-xl p-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold", children: "Dark Mode" }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Switch between light and dark theme" })] }), _jsx("div", { className: "bg-b3-primary-wash h-6 w-12 rounded-full" })] }) })] }), _jsxs("div", { className: "border-b3-line flex items-center justify-between rounded-2xl border p-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", className: "h-4" }), _jsx("h3", { className: "font-neue-montreal-semibold text-b3-grey", children: "Global Account" })] }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium mt-2 text-sm", children: "Your universal account for all B3 apps" })] }), _jsx("button", { className: "text-b3-grey hover:text-b3-grey/80 hover:bg-b3-line border-b3-line flex size-12 items-center justify-center rounded-full border", onClick: onLogoutEnhanced, children: logoutLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(SignOutIcon, { size: 16, className: "text-b3-grey" }) })] })] }));
|
|
160
157
|
};
|
|
161
158
|
return (_jsx("div", { className: "b3-manage-account bg-b3-background flex flex-col rounded-xl", children: _jsx("div", { className: "flex-1", children: _jsxs(TabsPrimitive, { defaultValue: activeTab, onValueChange: value => {
|
|
162
159
|
const tab = value;
|
|
@@ -82,8 +82,6 @@ export interface ManageAccountModalProps extends BaseModalProps {
|
|
|
82
82
|
activeTab?: "overview" | "tokens" | "nfts" | "apps" | "settings";
|
|
83
83
|
/** Function to set the active tab */
|
|
84
84
|
setActiveTab?: (tab: "overview" | "tokens" | "nfts" | "apps" | "settings") => void;
|
|
85
|
-
/** Whether to show the referral information */
|
|
86
|
-
showReferralInfo?: boolean;
|
|
87
85
|
}
|
|
88
86
|
/**
|
|
89
87
|
* Props for the AnySpend modal
|
|
@@ -82,8 +82,6 @@ export interface ManageAccountModalProps extends BaseModalProps {
|
|
|
82
82
|
activeTab?: "overview" | "tokens" | "nfts" | "apps" | "settings";
|
|
83
83
|
/** Function to set the active tab */
|
|
84
84
|
setActiveTab?: (tab: "overview" | "tokens" | "nfts" | "apps" | "settings") => void;
|
|
85
|
-
/** Whether to show the referral information */
|
|
86
|
-
showReferralInfo?: boolean;
|
|
87
85
|
}
|
|
88
86
|
/**
|
|
89
87
|
* Props for the AnySpend modal
|
package/package.json
CHANGED
|
@@ -133,7 +133,7 @@ export function ManageAccount({
|
|
|
133
133
|
const [unlinkingAccountId, setUnlinkingAccountId] = useState<string | null>(null);
|
|
134
134
|
const { data: profilesRaw = [], isLoading: isLoadingProfiles } = useProfiles({ client });
|
|
135
135
|
const { mutate: unlinkProfile, isPending: isUnlinking } = useUnlinkProfile();
|
|
136
|
-
const { setB3ModalOpen, setB3ModalContentType, isLinking
|
|
136
|
+
const { setB3ModalOpen, setB3ModalContentType, isLinking } = useModalStore();
|
|
137
137
|
const { user, setUser } = useB3();
|
|
138
138
|
const [isUpdatingCode, setIsUpdatingCode] = useState(false);
|
|
139
139
|
const [newReferralCode, setNewReferralCode] = useState("");
|
|
@@ -145,7 +145,6 @@ export function ManageAccount({
|
|
|
145
145
|
{ query: { referrerId: user?.userId } },
|
|
146
146
|
!!user?.userId,
|
|
147
147
|
);
|
|
148
|
-
const showReferralInfo = (contentType as ManageAccountModalProps)?.showReferralInfo ?? false;
|
|
149
148
|
|
|
150
149
|
const mutationOptions = {
|
|
151
150
|
onError: (error: Error) => {
|
|
@@ -306,14 +305,22 @@ export function ManageAccount({
|
|
|
306
305
|
)}
|
|
307
306
|
</div>
|
|
308
307
|
|
|
309
|
-
{
|
|
310
|
-
|
|
311
|
-
<
|
|
312
|
-
<h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Referrals</h3>
|
|
308
|
+
{/* Referral Section */}
|
|
309
|
+
<div className="space-y-4">
|
|
310
|
+
<h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Referrals</h3>
|
|
313
311
|
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
312
|
+
{/* Referral Code */}
|
|
313
|
+
<div className="bg-b3-line rounded-xl p-4">
|
|
314
|
+
{isEditingCode && (
|
|
315
|
+
<div>
|
|
316
|
+
<div className="text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
|
|
317
|
+
<div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
|
|
318
|
+
Share this code with friends to earn rewards
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
)}
|
|
322
|
+
<div className="flex items-center justify-between">
|
|
323
|
+
{!isEditingCode && (
|
|
317
324
|
<div>
|
|
318
325
|
<div className="text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
|
|
319
326
|
<div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
|
|
@@ -321,95 +328,78 @@ export function ManageAccount({
|
|
|
321
328
|
</div>
|
|
322
329
|
</div>
|
|
323
330
|
)}
|
|
324
|
-
<div className="flex items-center
|
|
325
|
-
{
|
|
326
|
-
<div>
|
|
327
|
-
<
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
+
<div className="flex items-center gap-2">
|
|
332
|
+
{isEditingCode ? (
|
|
333
|
+
<div className="flex items-center gap-2">
|
|
334
|
+
<input
|
|
335
|
+
type="text"
|
|
336
|
+
value={newReferralCode}
|
|
337
|
+
onChange={e => setNewReferralCode(e.target.value)}
|
|
338
|
+
className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm"
|
|
339
|
+
placeholder="Enter new code"
|
|
340
|
+
ref={referallCodeRef}
|
|
341
|
+
/>
|
|
342
|
+
<Button size="sm" onClick={handleUpdateReferralCode} disabled={isUpdatingCode || !newReferralCode}>
|
|
343
|
+
{isUpdatingCode ? <Loader2 className="h-4 w-4 animate-spin" /> : "Save"}
|
|
344
|
+
</Button>
|
|
345
|
+
<Button
|
|
346
|
+
size="sm"
|
|
347
|
+
variant="ghost"
|
|
348
|
+
onClick={() => {
|
|
349
|
+
setIsEditingCode(false);
|
|
350
|
+
setNewReferralCode("");
|
|
351
|
+
}}
|
|
352
|
+
>
|
|
353
|
+
Cancel
|
|
354
|
+
</Button>
|
|
331
355
|
</div>
|
|
332
|
-
)
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
<input
|
|
337
|
-
type="text"
|
|
338
|
-
value={newReferralCode}
|
|
339
|
-
onChange={e => setNewReferralCode(e.target.value)}
|
|
340
|
-
className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm"
|
|
341
|
-
placeholder="Enter new code"
|
|
342
|
-
ref={referallCodeRef}
|
|
343
|
-
/>
|
|
344
|
-
<Button
|
|
345
|
-
size="sm"
|
|
346
|
-
onClick={handleUpdateReferralCode}
|
|
347
|
-
disabled={isUpdatingCode || !newReferralCode}
|
|
348
|
-
>
|
|
349
|
-
{isUpdatingCode ? <Loader2 className="h-4 w-4 animate-spin" /> : "Save"}
|
|
350
|
-
</Button>
|
|
351
|
-
<Button
|
|
352
|
-
size="sm"
|
|
353
|
-
variant="ghost"
|
|
354
|
-
onClick={() => {
|
|
355
|
-
setIsEditingCode(false);
|
|
356
|
-
setNewReferralCode("");
|
|
357
|
-
}}
|
|
358
|
-
>
|
|
359
|
-
Cancel
|
|
360
|
-
</Button>
|
|
356
|
+
) : (
|
|
357
|
+
<>
|
|
358
|
+
<div className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm">
|
|
359
|
+
{currentReferralCode}
|
|
361
360
|
</div>
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
>
|
|
380
|
-
<Pencil className="h-4 w-4" />
|
|
381
|
-
</Button>
|
|
382
|
-
</>
|
|
383
|
-
)}
|
|
384
|
-
</div>
|
|
361
|
+
<Button size="icon" variant="ghost" onClick={handleCopyCode}>
|
|
362
|
+
<Copy className="h-4 w-4" />
|
|
363
|
+
</Button>
|
|
364
|
+
<Button
|
|
365
|
+
size="icon"
|
|
366
|
+
variant="ghost"
|
|
367
|
+
onClick={() => {
|
|
368
|
+
setIsEditingCode(true);
|
|
369
|
+
setTimeout(() => {
|
|
370
|
+
referallCodeRef.current?.focus();
|
|
371
|
+
}, 100);
|
|
372
|
+
}}
|
|
373
|
+
>
|
|
374
|
+
<Pencil className="h-4 w-4" />
|
|
375
|
+
</Button>
|
|
376
|
+
</>
|
|
377
|
+
)}
|
|
385
378
|
</div>
|
|
386
379
|
</div>
|
|
380
|
+
</div>
|
|
387
381
|
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
) : (
|
|
408
|
-
<div className="py-4 text-center text-gray-500">No referred users yet</div>
|
|
409
|
-
)}
|
|
410
|
-
</div>
|
|
382
|
+
{/* Referred Users */}
|
|
383
|
+
<div className="bg-b3-line rounded-xl p-4">
|
|
384
|
+
<div className="text-b3-grey font-neue-montreal-semibold mb-4">Referred Users</div>
|
|
385
|
+
{isLoadingReferrals ? (
|
|
386
|
+
<div className="flex justify-center py-4">
|
|
387
|
+
<Loader2 className="h-6 w-6 animate-spin text-gray-400" />
|
|
388
|
+
</div>
|
|
389
|
+
) : referrals?.data?.length ? (
|
|
390
|
+
<div className="space-y-3">
|
|
391
|
+
{referrals.data.map((referral: Referrals) => (
|
|
392
|
+
<div key={String(referral._id)} className="flex items-center justify-between rounded-lg bg-white p-3">
|
|
393
|
+
<div className="text-sm font-medium">{referral.referreeId}</div>
|
|
394
|
+
<div className="text-sm text-gray-500">{new Date(referral.createdAt).toLocaleDateString()}</div>
|
|
395
|
+
</div>
|
|
396
|
+
))}
|
|
397
|
+
</div>
|
|
398
|
+
) : (
|
|
399
|
+
<div className="py-4 text-center text-gray-500">No referred users yet</div>
|
|
400
|
+
)}
|
|
411
401
|
</div>
|
|
412
|
-
|
|
402
|
+
</div>
|
|
413
403
|
|
|
414
404
|
{/* Additional Settings Sections */}
|
|
415
405
|
<div className="space-y-4">
|
|
@@ -87,8 +87,6 @@ export interface ManageAccountModalProps extends BaseModalProps {
|
|
|
87
87
|
activeTab?: "overview" | "tokens" | "nfts" | "apps" | "settings";
|
|
88
88
|
/** Function to set the active tab */
|
|
89
89
|
setActiveTab?: (tab: "overview" | "tokens" | "nfts" | "apps" | "settings") => void;
|
|
90
|
-
/** Whether to show the referral information */
|
|
91
|
-
showReferralInfo?: boolean;
|
|
92
90
|
}
|
|
93
91
|
|
|
94
92
|
/**
|