@b3dotfun/sdk 0.0.34-alpha.0 → 0.0.34-alpha.1
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 +6 -3
- package/dist/cjs/global-account/react/stores/useModalStore.d.ts +2 -0
- package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js +6 -3
- package/dist/esm/global-account/react/stores/useModalStore.d.ts +2 -0
- package/dist/types/global-account/react/stores/useModalStore.d.ts +2 -0
- package/package.json +1 -1
- package/src/global-account/react/components/ManageAccount/ManageAccount.tsx +92 -82
- package/src/global-account/react/stores/useModalStore.ts +2 -0
|
@@ -59,13 +59,14 @@ 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 } = (0, react_1.useModalStore)();
|
|
62
|
+
const { setB3ModalOpen, setB3ModalContentType, isLinking, contentType } = (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;
|
|
69
70
|
const mutationOptions = {
|
|
70
71
|
onError: (error) => {
|
|
71
72
|
console.error("Error Unlinking account:", error);
|
|
@@ -151,7 +152,9 @@ function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain
|
|
|
151
152
|
},
|
|
152
153
|
});
|
|
153
154
|
};
|
|
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" }))] }),
|
|
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" }))] }), showReferralInfo && (
|
|
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: () => {
|
|
155
158
|
setIsEditingCode(false);
|
|
156
159
|
setNewReferralCode("");
|
|
157
160
|
}, 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: () => {
|
|
@@ -159,7 +162,7 @@ function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain
|
|
|
159
162
|
setTimeout(() => {
|
|
160
163
|
referallCodeRef.current?.focus();
|
|
161
164
|
}, 100);
|
|
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" }) })] })] }));
|
|
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" }))] })] })), (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" }) })] })] }));
|
|
163
166
|
};
|
|
164
167
|
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 => {
|
|
165
168
|
const tab = value;
|
|
@@ -82,6 +82,8 @@ 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;
|
|
85
87
|
}
|
|
86
88
|
/**
|
|
87
89
|
* Props for the AnySpend modal
|
|
@@ -53,13 +53,14 @@ 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 } = useModalStore();
|
|
56
|
+
const { setB3ModalOpen, setB3ModalContentType, isLinking, contentType } = 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;
|
|
63
64
|
const mutationOptions = {
|
|
64
65
|
onError: (error) => {
|
|
65
66
|
console.error("Error Unlinking account:", error);
|
|
@@ -145,7 +146,9 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
|
|
|
145
146
|
},
|
|
146
147
|
});
|
|
147
148
|
};
|
|
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" }))] }),
|
|
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" }))] }), showReferralInfo && (
|
|
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: () => {
|
|
149
152
|
setIsEditingCode(false);
|
|
150
153
|
setNewReferralCode("");
|
|
151
154
|
}, 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: () => {
|
|
@@ -153,7 +156,7 @@ export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit
|
|
|
153
156
|
setTimeout(() => {
|
|
154
157
|
referallCodeRef.current?.focus();
|
|
155
158
|
}, 100);
|
|
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" }) })] })] }));
|
|
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" }))] })] })), _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" }) })] })] }));
|
|
157
160
|
};
|
|
158
161
|
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 => {
|
|
159
162
|
const tab = value;
|
|
@@ -82,6 +82,8 @@ 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;
|
|
85
87
|
}
|
|
86
88
|
/**
|
|
87
89
|
* Props for the AnySpend modal
|
|
@@ -82,6 +82,8 @@ 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;
|
|
85
87
|
}
|
|
86
88
|
/**
|
|
87
89
|
* 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 } = useModalStore();
|
|
136
|
+
const { setB3ModalOpen, setB3ModalContentType, isLinking, contentType } = useModalStore();
|
|
137
137
|
const { user, setUser } = useB3();
|
|
138
138
|
const [isUpdatingCode, setIsUpdatingCode] = useState(false);
|
|
139
139
|
const [newReferralCode, setNewReferralCode] = useState("");
|
|
@@ -145,6 +145,7 @@ export function ManageAccount({
|
|
|
145
145
|
{ query: { referrerId: user?.userId } },
|
|
146
146
|
!!user?.userId,
|
|
147
147
|
);
|
|
148
|
+
const showReferralInfo = (contentType as ManageAccountModalProps)?.showReferralInfo ?? false;
|
|
148
149
|
|
|
149
150
|
const mutationOptions = {
|
|
150
151
|
onError: (error: Error) => {
|
|
@@ -305,22 +306,14 @@ export function ManageAccount({
|
|
|
305
306
|
)}
|
|
306
307
|
</div>
|
|
307
308
|
|
|
308
|
-
{
|
|
309
|
-
|
|
310
|
-
<
|
|
309
|
+
{showReferralInfo && (
|
|
310
|
+
/* Referral Section */
|
|
311
|
+
<div className="space-y-4">
|
|
312
|
+
<h3 className="text-b3-grey font-neue-montreal-semibold text-xl">Referrals</h3>
|
|
311
313
|
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
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 && (
|
|
314
|
+
{/* Referral Code */}
|
|
315
|
+
<div className="bg-b3-line rounded-xl p-4">
|
|
316
|
+
{isEditingCode && (
|
|
324
317
|
<div>
|
|
325
318
|
<div className="text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
|
|
326
319
|
<div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
|
|
@@ -328,78 +321,95 @@ export function ManageAccount({
|
|
|
328
321
|
</div>
|
|
329
322
|
</div>
|
|
330
323
|
)}
|
|
331
|
-
<div className="flex items-center
|
|
332
|
-
{isEditingCode
|
|
333
|
-
<div
|
|
334
|
-
<
|
|
335
|
-
|
|
336
|
-
|
|
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>
|
|
355
|
-
</div>
|
|
356
|
-
) : (
|
|
357
|
-
<>
|
|
358
|
-
<div className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm">
|
|
359
|
-
{currentReferralCode}
|
|
324
|
+
<div className="flex items-center justify-between">
|
|
325
|
+
{!isEditingCode && (
|
|
326
|
+
<div>
|
|
327
|
+
<div className="text-b3-grey font-neue-montreal-semibold">Your Referral Code</div>
|
|
328
|
+
<div className="text-b3-foreground-muted font-neue-montreal-medium text-sm">
|
|
329
|
+
Share this code with friends to earn rewards
|
|
360
330
|
</div>
|
|
361
|
-
|
|
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
|
-
</>
|
|
331
|
+
</div>
|
|
377
332
|
)}
|
|
333
|
+
<div className="flex items-center gap-2">
|
|
334
|
+
{isEditingCode ? (
|
|
335
|
+
<div className="flex items-center gap-2">
|
|
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>
|
|
361
|
+
</div>
|
|
362
|
+
) : (
|
|
363
|
+
<>
|
|
364
|
+
<div className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm">
|
|
365
|
+
{currentReferralCode}
|
|
366
|
+
</div>
|
|
367
|
+
<Button size="icon" variant="ghost" onClick={handleCopyCode}>
|
|
368
|
+
<Copy className="h-4 w-4" />
|
|
369
|
+
</Button>
|
|
370
|
+
<Button
|
|
371
|
+
size="icon"
|
|
372
|
+
variant="ghost"
|
|
373
|
+
onClick={() => {
|
|
374
|
+
setIsEditingCode(true);
|
|
375
|
+
setTimeout(() => {
|
|
376
|
+
referallCodeRef.current?.focus();
|
|
377
|
+
}, 100);
|
|
378
|
+
}}
|
|
379
|
+
>
|
|
380
|
+
<Pencil className="h-4 w-4" />
|
|
381
|
+
</Button>
|
|
382
|
+
</>
|
|
383
|
+
)}
|
|
384
|
+
</div>
|
|
378
385
|
</div>
|
|
379
386
|
</div>
|
|
380
|
-
</div>
|
|
381
387
|
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
388
|
+
{/* Referred Users */}
|
|
389
|
+
<div className="bg-b3-line rounded-xl p-4">
|
|
390
|
+
<div className="text-b3-grey font-neue-montreal-semibold mb-4">Referred Users</div>
|
|
391
|
+
{isLoadingReferrals ? (
|
|
392
|
+
<div className="flex justify-center py-4">
|
|
393
|
+
<Loader2 className="h-6 w-6 animate-spin text-gray-400" />
|
|
394
|
+
</div>
|
|
395
|
+
) : referrals?.data?.length ? (
|
|
396
|
+
<div className="space-y-3">
|
|
397
|
+
{referrals.data.map((referral: Referrals) => (
|
|
398
|
+
<div
|
|
399
|
+
key={String(referral._id)}
|
|
400
|
+
className="flex items-center justify-between rounded-lg bg-white p-3"
|
|
401
|
+
>
|
|
402
|
+
<div className="text-sm font-medium">{referral.referreeId}</div>
|
|
403
|
+
<div className="text-sm text-gray-500">{new Date(referral.createdAt).toLocaleDateString()}</div>
|
|
404
|
+
</div>
|
|
405
|
+
))}
|
|
406
|
+
</div>
|
|
407
|
+
) : (
|
|
408
|
+
<div className="py-4 text-center text-gray-500">No referred users yet</div>
|
|
409
|
+
)}
|
|
410
|
+
</div>
|
|
401
411
|
</div>
|
|
402
|
-
|
|
412
|
+
)}
|
|
403
413
|
|
|
404
414
|
{/* Additional Settings Sections */}
|
|
405
415
|
<div className="space-y-4">
|
|
@@ -87,6 +87,8 @@ 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;
|
|
90
92
|
}
|
|
91
93
|
|
|
92
94
|
/**
|