@b3dotfun/sdk 0.0.73 → 0.0.74-alpha.0

package/dist/esm/global-account/react/components/ManageAccount/ManageAccount.js

@@ -1,200 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import app from "../../../../global-account/app.js";
-import { Button, TabsContentPrimitive, TabsListPrimitive, TabsPrimitive, TabTriggerPrimitive, useAccountAssets, useAuthentication, useB3, useGetAllTWSigners, useModalStore, useQueryB3, useRemoveSessionKey, } from "../../../../global-account/react/index.js";
-import { SignOutIcon } from "../../../../global-account/react/components/icons/SignOutIcon.js";
-import { formatNumber } from "../../../../shared/utils/formatNumber.js";
-import { client } from "../../../../shared/utils/thirdweb.js";
-import { truncateAddress } from "../../../../shared/utils/truncateAddress.js";
-import { BarChart3, Coins, Copy, Image, LinkIcon, Loader2, Pencil, Settings, UnlinkIcon } from "lucide-react";
-import { useRef, useState } from "react";
-import { toast } from "sonner";
-import { useActiveAccount, useProfiles, useUnlinkProfile } from "thirdweb/react";
-import { formatUnits } from "viem";
-import { getProfileDisplayInfo } from "../../utils/profileDisplay.js";
-import { AccountAssets } from "../AccountAssets/AccountAssets.js";
-import { ContentTokens } from "./ContentTokens.js";
-// Helper function to check if a string is a wallet address and format it
-const formatProfileTitle = (title) => {
-    // Check if title looks like an Ethereum address (0x followed by 40 hex characters)
-    const isEthereumAddress = /^0x[a-fA-F0-9]{40}$/.test(title);
-    if (isEthereumAddress) {
-        return {
-            displayTitle: truncateAddress(title),
-            isAddress: true,
-        };
-    }
-    return {
-        displayTitle: title,
-        isAddress: false,
-    };
-};
-import { BalanceContent } from "./BalanceContent.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabsContentPrimitive, TabsPrimitive, useModalStore, } from "../../../../global-account/react/index.js";
+import BottomNavigation from "./BottomNavigation.js";
+import { HomeContent } from "./HomeContent.js";
+import SettingsContent from "./SettingsContent.js";
 export function ManageAccount({ onLogout, onSwap: _onSwap, onDeposit: _onDeposit, chain, partnerId, showSwap, showDeposit, }) {
-    const [revokingSignerId, setRevokingSignerId] = useState(null);
-    const account = useActiveAccount();
-    const { data: nfts, isLoading } = useAccountAssets(account?.address);
-    const { data: signers, refetch: refetchSigners } = useGetAllTWSigners({
-        chain,
-        accountAddress: account?.address,
-    });
-    const { setB3ModalOpen, contentType } = useModalStore();
-    const { activeTab = "overview", setActiveTab } = contentType;
-    const { logout } = useAuthentication(partnerId);
-    const [logoutLoading, setLogoutLoading] = useState(false);
-    const { removeSessionKey } = useRemoveSessionKey({
-        chain,
-        onSuccess: tx => {
-            console.log("@@removeSessionKey:tx", tx);
-            setRevokingSignerId(null);
-        },
-        onError: error => {
-            console.error("Error revoking access:", error);
-            setRevokingSignerId(null);
-        },
-        refetchSigners: () => refetchSigners(),
-    });
-    const handleRevoke = async (signer) => {
-        setRevokingSignerId(signer.id);
-        await removeSessionKey(signer);
-    };
-    const onLogoutEnhanced = async () => {
-        setLogoutLoading(true);
-        await logout();
-        onLogout?.();
-        setB3ModalOpen(false);
-        setLogoutLoading(false);
-    };
-    const AppsContent = () => (_jsxs("div", { className: "space-y-4", children: [signers?.map((signer) => (_jsx("div", { className: "rounded-xl border border-gray-200 p-4 dark:border-gray-800", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800", children: _jsx("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: "App" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-medium text-gray-900 dark:text-white", children: signer.partner.name }), _jsxs("div", { className: "mt-2 space-y-1", children: [_jsxs("p", { className: "text-xs text-gray-500", children: ["Added ", new Date(signer.createdAt).toLocaleDateString()] }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Expires ", new Date(Number(signer.endTimestamp) * 1000).toLocaleDateString()] }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Max spend: ", formatNumber(Number(formatUnits(signer.nativeTokenLimitPerTransaction, 18))), " ETH"] })] })] })] }), _jsx(Button, { variant: "outline", size: "sm", className: "border-red-200 text-red-500 hover:border-red-300 hover:text-red-600", onClick: () => handleRevoke(signer), disabled: revokingSignerId === signer.id, children: revokingSignerId === signer.id ? "Revoking..." : "Revoke" })] }) }, signer.id))), !signers?.length && _jsx("div", { className: "py-12 text-center text-gray-500", children: "No connected apps" })] }));
-    const SettingsContent = () => {
-        const [unlinkingAccountId, setUnlinkingAccountId] = useState(null);
-        const { data: profilesRaw = [], isLoading: isLoadingProfiles } = useProfiles({ client });
-        const { mutate: unlinkProfile, isPending: isUnlinking } = useUnlinkProfile();
-        const { setB3ModalOpen, setB3ModalContentType, isLinking, contentType } = useModalStore();
-        const { user, setUser } = useB3();
-        const [isUpdatingCode, setIsUpdatingCode] = useState(false);
-        const [newReferralCode, setNewReferralCode] = useState("");
-        const [isEditingCode, setIsEditingCode] = useState(false);
-        const referallCodeRef = useRef(null);
-        const { data: referrals, isLoading: isLoadingReferrals } = useQueryB3("referrals", "find", { query: { referrerId: user?.userId } }, !!user?.userId);
-        const showReferralInfo = contentType?.showReferralInfo ?? false;
-        const mutationOptions = {
-            onError: (error) => {
-                console.error("Error Unlinking account:", error);
-                toast.error(error.message);
-            },
-            onSuccess: async (data) => {
-                console.log("Raw Link Account Data:", data);
-                try {
-                    console.log("Sync user data...");
-                    await app.service("users").syncTwProfiles({});
+    const contentType = useModalStore(state => state.contentType);
+    const { activeTab = "home", setActiveTab } = contentType;
+    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    return (_jsx("div", { className: "b3-manage-account flex-1", children: _jsxs(TabsPrimitive, { defaultValue: activeTab, onValueChange: value => {
+                const tab = value;
+                if (tab === "swap") {
+                    setB3ModalContentType({
+                        type: "anySpend",
+                        showBackButton: true,
+                    });
                 }
-                catch (refreshError) {
-                    console.warn("⚠️ Could not sync user data:", refreshError);
+                else if (["home", "tokens", "nfts", "apps", "settings"].includes(tab)) {
+                    setActiveTab?.(tab);
                 }
-            },
-        };
-        // Fetch referred users
-        const currentReferralCode = user?.referralCode || user?.userId || "";
-        const handleCopyCode = async () => {
-            try {
-                await navigator.clipboard.writeText(currentReferralCode);
-                toast.success("Referral code copied to clipboard!");
-            }
-            catch (error) {
-                toast.error("Failed to copy referral code");
-            }
-        };
-        const handleUpdateReferralCode = async () => {
-            if (!newReferralCode)
-                return;
-            setIsUpdatingCode(true);
-            try {
-                // @ts-expect-error - setReferralCode is not typed for some reason
-                const newUser = await app.service("users").setReferralCode({
-                    userId: user?.userId,
-                    referralCode: newReferralCode,
-                });
-                setUser(newUser);
-                toast.success("Referral code updated successfully!");
-                setIsEditingCode(false);
-                setNewReferralCode("");
-            }
-            catch (error) {
-                toast.error("Failed to update referral code");
-            }
-            finally {
-                setIsUpdatingCode(false);
-            }
-        };
-        const profiles = profilesRaw
-            .filter((profile) => !["custom_auth_endpoint"].includes(profile.type))
-            .map((profile) => ({
-            ...getProfileDisplayInfo(profile),
-            originalProfile: profile,
-        }));
-        const handleUnlink = async (profile) => {
-            setUnlinkingAccountId(profile.title);
-            try {
-                unlinkProfile({ client, profileToUnlink: profile.originalProfile }, mutationOptions);
-            }
-            catch (error) {
-                console.error("Error unlinking account:", error);
-            }
-            finally {
-                setUnlinkingAccountId(null);
-            }
-        };
-        const handleOpenLinkModal = () => {
-            setB3ModalOpen(true);
-            setB3ModalContentType({
-                type: "linkAccount",
-                showBackButton: true,
-                partnerId,
-                chain,
-                onSuccess: async () => {
-                    // Let the LinkAccount component handle modal closing
-                },
-                onError: () => {
-                    // Let the LinkAccount component handle errors
-                },
-                onClose: () => {
-                    // Let the LinkAccount component handle closing
-                },
-            });
-        };
-        console.log("@@profiles", profiles);
-        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: [(() => {
-                                                                const { displayTitle, isAddress } = formatProfileTitle(profile.title);
-                                                                const handleCopyAddress = async (e) => {
-                                                                    e.stopPropagation();
-                                                                    try {
-                                                                        await navigator.clipboard.writeText(profile.title);
-                                                                        toast.success("Address copied to clipboard!");
-                                                                    }
-                                                                    catch (error) {
-                                                                        toast.error("Failed to copy address");
-                                                                    }
-                                                                };
-                                                                return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: `linked-account-title text-b3-grey font-neue-montreal-semibold ${isAddress
-                                                                                ? "font-mono text-sm" // Use monospace font for addresses
-                                                                                : "break-words" // Use break-words for emails/names (better than break-all)
-                                                                            }`, 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" }) }))] }));
-                                                            })(), _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 && (
-                /* Referral Section */
-                _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: () => {
-                                                            setIsEditingCode(false);
-                                                            setNewReferralCode("");
-                                                        }, children: "Cancel" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "referral-code-display rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm", children: currentReferralCode }), _jsx(Button, { size: "icon", variant: "ghost", className: "referral-code-copy-button", onClick: handleCopyCode, children: _jsx(Copy, { className: "referral-code-copy-icon h-4 w-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", className: "referral-code-edit-button", onClick: () => {
-                                                            setIsEditingCode(true);
-                                                            setTimeout(() => {
-                                                                referallCodeRef.current?.focus();
-                                                            }, 100);
-                                                        }, children: _jsx(Pencil, { className: "referral-code-edit-icon h-4 w-4" }) })] })) })] })] }), _jsxs("div", { className: "referred-users-container bg-b3-line rounded-xl p-4", children: [_jsx("div", { className: "referred-users-title text-b3-grey font-neue-montreal-semibold mb-4", children: "Referred Users" }), isLoadingReferrals ? (_jsx("div", { className: "referred-users-loading flex justify-center py-4", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) })) : referrals?.data?.length ? (_jsx("div", { className: "referred-users-list space-y-3", children: referrals.data.map((referral) => (_jsxs("div", { className: "referred-user-item flex items-center justify-between rounded-lg bg-white p-3", children: [_jsx("div", { className: "referred-user-id text-sm font-medium", children: referral.referreeId }), _jsx("div", { className: "referred-user-date text-sm text-gray-500", children: new Date(referral.createdAt).toLocaleDateString() })] }, String(referral._id)))) })) : (_jsx("div", { className: "referred-users-empty py-4 text-center text-gray-500", children: "No referred users yet" }))] })] })), _jsxs("div", { className: "account-preferences-section space-y-4", children: [_jsx("h3", { className: "account-preferences-title text-b3-grey font-neue-montreal-semibold text-xl", children: "Account Preferences" }), _jsx("div", { className: "account-preferences-container bg-b3-line rounded-xl p-4", children: _jsxs("div", { className: "account-preference-item flex items-center justify-between", children: [_jsxs("div", { className: "account-preference-info", children: [_jsx("div", { className: "account-preference-title text-b3-grey font-neue-montreal-semibold", children: "Dark Mode" }), _jsx("div", { className: "account-preference-description text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "Switch between light and dark theme" })] }), _jsx("div", { className: "account-preference-toggle theme-toggle-placeholder bg-b3-primary-wash h-6 w-12 rounded-full" })] }) })] }), _jsxs("button", { className: "logout-button logout-section border-b3-line hover:bg-b3-line relative flex w-full items-center justify-center rounded-2xl border p-4 transition-colors", onClick: onLogoutEnhanced, children: [_jsx("span", { className: "logout-text font-neue-montreal-semibold text-b3-grey", children: "Sign out" }), _jsx("div", { className: "logout-icon-container absolute right-4", children: logoutLoading ? (_jsx(Loader2, { className: "logout-loading animate-spin", size: 16 })) : (_jsx(SignOutIcon, { size: 16, className: "logout-icon text-b3-grey" })) })] })] }));
-    };
-    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 => {
-                    const tab = value;
-                    if (["overview", "tokens", "nfts", "apps", "settings"].includes(tab)) {
-                        setActiveTab?.(tab);
-                    }
-                }, children: [_jsx("div", { className: "px-4", children: _jsxs(TabsListPrimitive, { className: "grid h-auto grid-cols-2 grid-rows-2 gap-3 rounded-none border-none bg-transparent", children: [_jsxs(TabTriggerPrimitive, { value: "overview", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(BarChart3, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Overview" })] }), _jsxs(TabTriggerPrimitive, { value: "tokens", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(Coins, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Tokens" })] }), _jsxs(TabTriggerPrimitive, { value: "nfts", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(Image, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "NFTs" })] }), _jsxs(TabTriggerPrimitive, { value: "settings", className: "data-[state=active]:bg-b3-primary-blue data-[state=active]:hover:bg-b3-primary-blue data-[state=active]:border-b3-primary-blue group flex h-12 w-full items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white p-2 text-center shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md data-[state=active]:shadow-lg", children: [_jsx(Settings, { size: 20, className: "text-b3-primary-blue shrink-0 group-data-[state=active]:text-white" }), _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold text-sm group-data-[state=active]:text-white", children: "Settings" })] })] }) }), _jsx(TabsContentPrimitive, { value: "overview", className: "px-4 pb-4 pt-2", children: _jsx(BalanceContent, { onLogout: onLogout, showDeposit: showDeposit, showSwap: showSwap }) }), _jsx(TabsContentPrimitive, { value: "tokens", className: "px-4 pb-4 pt-2", children: _jsx(ContentTokens, { activeTab: activeTab }) }), _jsx(TabsContentPrimitive, { value: "nfts", className: "px-4 pb-4 pt-2", children: _jsx("div", { className: "grid grid-cols-3 gap-4", children: nfts?.nftResponse ? (_jsx(AccountAssets, { nfts: nfts.nftResponse, isLoading: isLoading })) : (_jsx("div", { className: "col-span-3 py-12 text-center text-gray-500", children: "No NFTs found" })) }) }), _jsx(TabsContentPrimitive, { value: "apps", className: "px-4 pb-4 pt-2", children: _jsx(AppsContent, {}) }), _jsx(TabsContentPrimitive, { value: "settings", className: "px-4 pb-4 pt-2", children: _jsx(SettingsContent, {}) })] }) }) }));
+            }, children: [_jsxs("div", { className: "p-0", children: [_jsx(TabsContentPrimitive, { value: "home", className: "m-0 p-0 pb-2", children: _jsx(HomeContent, { showDeposit: showDeposit, showSwap: showSwap }) }), _jsx(TabsContentPrimitive, { value: "swap", className: "hidden" }), _jsx(TabsContentPrimitive, { value: "settings", className: "m-0 p-0 pb-2", children: _jsx(SettingsContent, { partnerId: partnerId, onLogout: onLogout, chain: chain }) })] }), _jsx(BottomNavigation, {})] }) }));
 }

package/dist/esm/global-account/react/components/ManageAccount/NFTContent.d.ts

@@ -0,0 +1,2 @@
+declare const NFTContent: () => import("react/jsx-runtime").JSX.Element;
+export default NFTContent;

package/dist/esm/global-account/react/components/ManageAccount/NFTContent.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useActiveWallet } from "thirdweb/react";
+import { AccountAssets } from "..";
+import { useAccountAssets } from "../../hooks/index.js";
+const NFTContent = () => {
+    // Get active wallet state
+    const activeWallet = useActiveWallet();
+    const activeAccount = activeWallet?.getAccount();
+    const activeAddress = activeAccount?.address;
+    const { data: nfts, isLoading } = useAccountAssets(activeAddress);
+    return (_jsx("div", { style: { minHeight: "100px" }, children: nfts?.nftResponse ? (_jsx(AccountAssets, { nfts: nfts.nftResponse, isLoading: isLoading })) : (_jsx("div", { className: "py-12 text-center text-gray-500", children: "No NFTs found" })) }));
+};
+export default NFTContent;

package/dist/esm/global-account/react/components/ManageAccount/NotificationChannel.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+interface NotificationChannelProps {
+    icon: ReactNode;
+    title: string;
+    isConnected: boolean;
+    isConnecting: boolean;
+    isDisconnecting: boolean;
+    connectedInfo?: ReactNode;
+    inputSection?: ReactNode;
+    addButtonSection?: ReactNode;
+    iconClassName?: string;
+    onToggle: () => void;
+    showBorder?: boolean;
+}
+export declare const NotificationChannel: ({ icon, title, isConnected, isConnecting, isDisconnecting, connectedInfo, inputSection, addButtonSection, iconClassName, onToggle, showBorder, }: NotificationChannelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/ManageAccount/NotificationChannel.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/index.js";
+export const NotificationChannel = ({ icon, title, isConnected, isConnecting, isDisconnecting, connectedInfo, inputSection, addButtonSection, iconClassName, onToggle, showBorder = true, }) => {
+    return (_jsxs("div", { className: `flex items-start gap-3 p-[15px] ${showBorder ? "border-b border-[#e4e4e7]" : ""}`, children: [_jsx("div", { className: cn("flex h-10 w-10 shrink-0 items-center justify-center", iconClassName), children: icon }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] font-semibold leading-[20px] text-[#3f3f46]", children: title }), isConnecting ? (_jsx("div", { className: "mt-1", children: _jsx("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]", children: "Connecting..." }) })) : isDisconnecting ? (_jsx("div", { className: "mt-1", children: _jsx("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]", children: "Disconnecting..." }) })) : isConnected && connectedInfo ? (_jsx("div", { className: "mt-1", children: _jsx("p", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-[#51525c]", children: connectedInfo }) })) : inputSection ? (inputSection) : (addButtonSection)] }), _jsx(ToggleSwitch, { enabled: isConnected, onChange: onToggle })] }));
+};
+// Toggle Switch Component
+const ToggleSwitch = ({ enabled, onChange, disabled, }) => {
+    return (_jsx("button", { onClick: onChange, disabled: disabled, className: `relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none disabled:opacity-50 ${enabled ? "bg-[#0c68e9]" : "bg-gray-200"}`, role: "switch", "aria-checked": enabled, children: _jsx("span", { className: `pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out ${enabled ? "translate-x-4" : "translate-x-0"}` }) }));
+};

package/dist/esm/global-account/react/components/ManageAccount/NotificationsContent.d.ts

@@ -0,0 +1,8 @@
+import { Chain } from "thirdweb";
+interface NotificationsContentProps {
+    partnerId: string;
+    chain: Chain;
+    onSuccess?: () => void;
+}
+declare const NotificationsContent: ({ partnerId, chain, onSuccess }: NotificationsContentProps) => import("react/jsx-runtime").JSX.Element;
+export default NotificationsContent;

package/dist/esm/global-account/react/components/ManageAccount/NotificationsContent.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useModalStore } from "../../../../global-account/react/index.js";
+import { getAuthToken } from "../../../../shared/utils/auth-token.js";
+import { debugB3React } from "../../../../shared/utils/debug.js";
+import { useCallback, useEffect, useState } from "react";
+import { useUserQuery } from "../../hooks/useUserQuery.js";
+import { notificationsAPI } from "../../utils/notificationsAPI.js";
+import ModalHeader from "../ModalHeader/ModalHeader.js";
+import { toast } from "../Toast/toastApi.js";
+import { DiscordChannel, EmailChannel, PhoneChannel, TelegramChannel } from "./channels/index.js";
+const debug = debugB3React("NotificationsContent");
+const NotificationsContent = ({ partnerId, chain, onSuccess }) => {
+    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const { user } = useUserQuery();
+    const [userData, setUserData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [isSendingTest, setIsSendingTest] = useState(false);
+    const [testSuccess, setTestSuccess] = useState(false);
+    // Optimistic UI state
+    const [optimisticChannelStates, setOptimisticChannelStates] = useState({});
+    const userId = user?.userId;
+    const jwtToken = getAuthToken();
+    const fetchUserData = useCallback(async (showLoading = true) => {
+        if (!userId || !jwtToken) {
+            if (showLoading)
+                setLoading(false);
+            return;
+        }
+        try {
+            if (showLoading)
+                setLoading(true);
+            const data = await notificationsAPI.getUser(userId, jwtToken);
+            setUserData(data);
+            setError(null);
+        }
+        catch (err) {
+            debug("Error loading user data:", err);
+            // Try to register the user if they don't exist
+            try {
+                await notificationsAPI.registerUser(jwtToken);
+                const data = await notificationsAPI.getUser(userId, jwtToken);
+                setUserData(data);
+                setError(null);
+            }
+            catch (registerErr) {
+                debug("Error registering user:", registerErr);
+                setError("Failed to load notification settings");
+            }
+        }
+        finally {
+            if (showLoading)
+                setLoading(false);
+        }
+    }, [userId, jwtToken]);
+    useEffect(() => {
+        fetchUserData(true);
+    }, [fetchUserData]);
+    const handleConnectionChange = () => {
+        fetchUserData(false); // Refresh without showing loading screen
+        onSuccess?.();
+    };
+    const handleToggleChannel = async (channelType, shouldDisconnect) => {
+        if (!userId || !jwtToken)
+            return;
+        if (shouldDisconnect) {
+            // Optimistically update UI
+            setOptimisticChannelStates(prev => ({ ...prev, [channelType]: false }));
+            try {
+                await notificationsAPI.disconnectChannel(userId, channelType, jwtToken);
+                await fetchUserData(false); // Refresh without showing loading screen
+                setOptimisticChannelStates(prev => {
+                    const newState = { ...prev };
+                    delete newState[channelType];
+                    return newState;
+                });
+                toast.success(`${channelType.charAt(0).toUpperCase() + channelType.slice(1)} disconnected successfully!`);
+            }
+            catch (err) {
+                debug("Error disconnecting channel:", err);
+                setError(`Failed to disconnect ${channelType}`);
+                toast.error(`Failed to disconnect ${channelType}`);
+                // Revert optimistic update
+                setOptimisticChannelStates(prev => {
+                    const newState = { ...prev };
+                    delete newState[channelType];
+                    return newState;
+                });
+            }
+        }
+    };
+    const handleSendTestNotification = async () => {
+        if (!userId || !jwtToken)
+            return;
+        try {
+            setIsSendingTest(true);
+            setTestSuccess(false);
+            await notificationsAPI.sendTestNotification(userId, partnerId, jwtToken);
+            setTestSuccess(true);
+            setTimeout(() => setTestSuccess(false), 5000);
+        }
+        catch (err) {
+            debug("Error sending test notification:", err);
+            setError("Failed to send test notification. Make sure you have at least one channel connected.");
+        }
+        finally {
+            setIsSendingTest(false);
+        }
+    };
+    const handleBack = () => {
+        setB3ModalContentType({
+            type: "manageAccount",
+            chain,
+            partnerId,
+            activeTab: "settings",
+        });
+        setB3ModalOpen(true);
+    };
+    const emailChannel = userData?.channels?.find(c => c.channel_type === "email");
+    const smsChannel = userData?.channels?.find(c => c.channel_type === "sms");
+    const whatsappChannel = userData?.channels?.find(c => c.channel_type === "whatsapp");
+    const telegramChannel = userData?.channels?.find(c => c.channel_type === "telegram");
+    const discordChannel = userData?.channels?.find(c => c.channel_type === "discord");
+    // Real connection states
+    const emailConnected = emailChannel?.enabled === 1;
+    const smsConnected = smsChannel?.enabled === 1;
+    const whatsappConnected = whatsappChannel?.enabled === 1;
+    const telegramConnected = telegramChannel?.enabled === 1;
+    const discordConnected = discordChannel?.enabled === 1;
+    // Apply optimistic updates
+    const optimisticEmailConnected = optimisticChannelStates["email"] !== undefined ? optimisticChannelStates["email"] : emailConnected;
+    const optimisticSMSConnected = optimisticChannelStates["sms"] !== undefined ? optimisticChannelStates["sms"] : smsConnected;
+    const optimisticWhatsAppConnected = optimisticChannelStates["whatsapp"] !== undefined ? optimisticChannelStates["whatsapp"] : whatsappConnected;
+    const optimisticTelegramConnected = optimisticChannelStates["telegram"] !== undefined ? optimisticChannelStates["telegram"] : telegramConnected;
+    const optimisticDiscordConnected = optimisticChannelStates["discord"] !== undefined ? optimisticChannelStates["discord"] : discordConnected;
+    const hasAnyChannelConnected = optimisticEmailConnected ||
+        optimisticSMSConnected ||
+        optimisticWhatsAppConnected ||
+        optimisticTelegramConnected ||
+        optimisticDiscordConnected;
+    if (loading) {
+        return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { showBackButton: true, showCloseButton: false, title: "Notifications", handleBack: handleBack }), _jsx("div", { className: "flex flex-1 items-center justify-center", children: _jsx("div", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-gray-500", children: "Loading..." }) })] }));
+    }
+    return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { showBackButton: true, showCloseButton: false, title: "Notifications", handleBack: handleBack }), _jsxs("div", { className: "flex-1 space-y-2 overflow-y-auto px-5 py-6", children: [error && (_jsx("div", { className: "mb-3 rounded-lg bg-red-50 p-3 font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-red-600 dark:bg-red-900/20 dark:text-red-400", children: error })), userId && jwtToken && (_jsxs("div", { className: "rounded-[20px] bg-[#f4f4f5]", children: [_jsx(PhoneChannel, { userId: userId, jwtToken: jwtToken, smsChannel: smsChannel, whatsappChannel: whatsappChannel, isSMSConnected: smsConnected, isWhatsAppConnected: whatsappConnected, isOptimisticallySMSConnected: optimisticSMSConnected, isOptimisticallyWhatsAppConnected: optimisticWhatsAppConnected, onConnectionChange: handleConnectionChange, onToggle: (type, shouldDisconnect) => handleToggleChannel(type, shouldDisconnect) }), _jsx(EmailChannel, { userId: userId, jwtToken: jwtToken, emailChannel: emailChannel, isConnected: emailConnected, isOptimisticallyConnected: optimisticEmailConnected, onConnectionChange: handleConnectionChange, onToggle: enabled => handleToggleChannel("email", enabled) }), _jsx(TelegramChannel, { userId: userId, jwtToken: jwtToken, telegramChannel: telegramChannel, isConnected: telegramConnected, isOptimisticallyConnected: optimisticTelegramConnected, onConnectionChange: handleConnectionChange, onToggle: enabled => handleToggleChannel("telegram", enabled) }), _jsx(DiscordChannel, { userId: userId, jwtToken: jwtToken, discordChannel: discordChannel, isConnected: discordConnected, isOptimisticallyConnected: optimisticDiscordConnected, onConnectionChange: handleConnectionChange, onToggle: enabled => handleToggleChannel("discord", enabled) })] })), process.env.NODE_ENV === "development" && hasAnyChannelConnected && (_jsxs("div", { className: "mt-6 rounded-xl border border-[#e4e4e7] bg-white p-4", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx("div", { className: "text-lg", children: "\uD83E\uDDEA" }), _jsx("h3", { className: "font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] font-semibold leading-[20px] text-gray-900", children: "Test Notifications" })] }), _jsx("p", { className: "mb-3 font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-gray-600", children: "Send a test notification to all your connected channels to verify they're working correctly." }), _jsx("button", { onClick: handleSendTestNotification, disabled: isSendingTest, className: "w-full rounded-lg bg-purple-600 px-4 py-2 font-['Inter',sans-serif] text-[14px] font-semibold leading-[20px] text-white transition-colors hover:bg-purple-700 disabled:opacity-50", children: isSendingTest ? "Sending..." : "Send Test Notification" }), testSuccess && (_jsx("div", { className: "mt-3 rounded-lg bg-green-50 p-3 font-['PP_Neue_Montreal','PP_Neue_Montreal_Fallback',sans-serif] text-[14px] leading-[20px] text-green-700", children: "\u2713 Test notification sent! Check your connected channels." }))] }))] })] }));
+};
+export default NotificationsContent;

package/dist/esm/global-account/react/components/ManageAccount/ProfileSection.d.ts

@@ -0,0 +1,2 @@
+declare const ProfileSection: () => import("react/jsx-runtime").JSX.Element;
+export default ProfileSection;

package/dist/esm/global-account/react/components/ManageAccount/ProfileSection.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAccountWallet, useB3, useModalStore, useProfile, useSimBalance } from "../../../../global-account/react/index.js";
+import { formatUsername } from "../../../../shared/utils/index.js";
+import { formatDisplayNumber } from "../../../../shared/utils/number.js";
+import { Pencil } from "lucide-react";
+import { useMemo } from "react";
+import { useActiveAccount } from "thirdweb/react";
+import { useFirstEOA } from "../../hooks/useFirstEOA.js";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer.js";
+const ProfileSection = () => {
+    const account = useActiveAccount();
+    const { address: eoaAddress } = useFirstEOA();
+    const { address: smartWalletAddress } = useAccountWallet();
+    const { data: profile } = useProfile({
+        address: eoaAddress || account?.address,
+        fresh: true,
+    });
+    const { user } = useB3();
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    const navigateBack = useModalStore(state => state.navigateBack);
+    const { data: simBalance } = useSimBalance(smartWalletAddress);
+    // Calculate total balance in USD
+    const totalBalanceUsd = useMemo(() => {
+        if (!simBalance?.balances)
+            return 0;
+        return simBalance.balances.reduce((sum, token) => sum + (token.value_usd || 0), 0);
+    }, [simBalance]);
+    const handleEditAvatar = () => {
+        setB3ModalOpen(true);
+        setB3ModalContentType({
+            type: "avatarEditor",
+            onSuccess: () => {
+                // navigate back on success
+                navigateBack();
+            },
+        });
+    };
+    // IPFSMediaRenderer will handle IPFS URL conversion and validation
+    const avatarSrc = user?.avatar || profile?.avatar;
+    // Get current username - prioritize user.username, fallback to profile data
+    const currentUsername = user?.username || profile?.displayName || formatUsername(profile?.name || "");
+    return (_jsx("div", { className: "flex items-center justify-between px-5 py-6", children: _jsxs("div", { className: "global-account-profile flex items-center gap-4", children: [_jsxs("div", { className: "global-account-profile-avatar relative", children: [_jsx(IPFSMediaRenderer, { src: avatarSrc, alt: "Profile Avatar", className: "border-b3-line border-1 bg-b3-primary-wash size-14 rounded-full border" }), _jsx("button", { onClick: handleEditAvatar, className: "border-b3-background hover:bg-b3-grey/80 absolute -bottom-1 -right-1 flex size-6 items-center justify-center rounded-full border-4 bg-[#a0a0ab] transition-colors", children: _jsx(Pencil, { size: 10, className: "text-b3-background" }) })] }), _jsxs("div", { className: "global-account-profile-info flex flex-col gap-1", children: [_jsxs("h2", { className: "text-b3-grey font-neue-montreal-semibold flex h-[38px] items-center gap-1 text-xl", children: [_jsx("div", { className: "text-b3-foreground-muted", children: " $" }), _jsx("div", { className: "text-[30px]", children: formatDisplayNumber(totalBalanceUsd, { fractionDigits: 2 }) })] }), _jsx("div", { className: "b3-modal-username font-neue-montreal-semibold text-base leading-none text-[#0B57C2]", children: currentUsername })] })] }) }));
+};
+export default ProfileSection;

package/dist/esm/global-account/react/components/ManageAccount/SettingsContent.d.ts

@@ -0,0 +1,7 @@
+import { Chain } from "thirdweb";
+declare const SettingsContent: ({ partnerId, onLogout, chain, }: {
+    partnerId: string;
+    onLogout?: () => void;
+    chain: Chain;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SettingsContent;

package/dist/esm/global-account/react/components/ManageAccount/SettingsContent.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useModalStore } from "../../../../global-account/react/index.js";
+import { client } from "../../../../shared/utils/thirdweb.js";
+import { useProfiles } from "thirdweb/react";
+import ModalHeader from "../ModalHeader/ModalHeader.js";
+import SettingsMenuItem from "./SettingsMenuItem.js";
+import SettingsProfileCard from "./SettingsProfileCard.js";
+const SettingsContent = ({ partnerId, onLogout, chain, }) => {
+    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const { data: profilesRaw = [] } = useProfiles({ client });
+    const profiles = profilesRaw.filter((profile) => !["custom_auth_endpoint"].includes(profile.type));
+    const handleNavigate = (type) => {
+        if (type === "home") {
+            setB3ModalContentType({
+                type: "manageAccount",
+                chain,
+                partnerId,
+                onLogout,
+                activeTab: "home",
+            });
+        }
+        else if (type === "swap") {
+            setB3ModalContentType({
+                type: "manageAccount",
+                chain,
+                partnerId,
+                onLogout,
+                activeTab: "tokens",
+            });
+        }
+        else if (type === "linkAccount") {
+            setB3ModalContentType({
+                type: "linkAccount",
+                chain,
+                partnerId,
+            });
+        }
+        else if (type === "notifications") {
+            setB3ModalContentType({
+                type: "notifications",
+                chain,
+                partnerId,
+            });
+        }
+        else {
+            setB3ModalContentType({
+                type: "avatarEditor",
+            });
+        }
+        setB3ModalOpen(true);
+    };
+    return (_jsxs("div", { className: "flex h-[470px] flex-col", children: [_jsx(ModalHeader, { showBackButton: false, showCloseButton: false, title: "Settings" }), _jsx("div", { className: "p-5", children: _jsx("div", { className: "b3-modal-settings-profile-card flex items-center rounded-xl border border-[#e4e4e7] bg-[#f4f4f5] p-4", children: _jsx(SettingsProfileCard, {}) }) }), _jsxs("div", { className: "space-y-3 px-5", children: [_jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Linked Accounts", subtitle: `${profiles.length} connected account${profiles.length > 1 ? "s" : ""}`, onClick: () => handleNavigate("linkAccount") }), _jsx(SettingsMenuItem, { icon: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z", fill: "#F4F4F5" }) }), title: "Notifications", subtitle: "Manage your notifications", onClick: () => handleNavigate("notifications") })] })] }));
+};
+export default SettingsContent;

package/dist/esm/global-account/react/components/ManageAccount/SettingsMenuItem.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+interface SettingsMenuItemProps {
+    icon: ReactNode;
+    title: string;
+    subtitle: string;
+    onClick?: () => void;
+}
+declare const SettingsMenuItem: ({ icon, title, subtitle, onClick }: SettingsMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export default SettingsMenuItem;

package/dist/esm/global-account/react/components/ManageAccount/SettingsMenuItem.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+const SettingsMenuItem = ({ icon, title, subtitle, onClick }) => {
+    return (_jsxs("button", { onClick: onClick, className: "b3-modal-settings-menu-item flex w-full items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#f4f4f5]", children: [_jsx("div", { className: "flex size-10 items-center justify-center rounded-full bg-[#f4f4f5]", children: icon }), _jsxs("div", { className: "flex flex-1 flex-col items-start gap-1 text-left", children: [_jsx("span", { className: "font-neue-montreal-semibold text-[14px] leading-none tracking-[-0.28px] text-[#3f3f46]", children: title }), _jsx("span", { className: "font-neue-montreal-medium text-[14px] leading-none tracking-[-0.28px] text-[#70707b]", children: subtitle })] }), _jsx(ChevronRight, { size: 20, className: "text-[#51525c]" })] }));
+};
+export default SettingsMenuItem;

package/dist/esm/global-account/react/components/ManageAccount/SettingsProfileCard.d.ts

@@ -0,0 +1,2 @@
+declare const SettingsProfileCard: () => import("react/jsx-runtime").JSX.Element;
+export default SettingsProfileCard;