@b3dotfun/sdk 0.0.73-test.3 → 0.0.74-alpha.0

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

@@ -0,0 +1,189 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ALL_CHAINS, getExplorerTxUrl } from "../../../../anyspend/index.js";
+import { ChainTokenIcon } from "../../../../anyspend/react/components/common/ChainTokenIcon.js";
+import { toast, useAccountWallet, useAnalytics, useModalStore, useProfile, useSimBalance, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { formatDisplayNumber, formatTokenAmount } from "../../../../shared/utils/number.js";
+import invariant from "invariant";
+import { CircleHelp, Clock, Loader2, Send as SendIcon, Wallet } from "lucide-react";
+import { useState } from "react";
+import { NumericFormat } from "react-number-format";
+import { encodeFunctionData, erc20Abi, isAddress, parseUnits } from "viem";
+import { useRecentAddressesStore } from "../../stores/useRecentAddressesStore.js";
+import ModalHeader from "../ModalHeader/ModalHeader.js";
+import { Button } from "../ui/button.js";
+// Component for displaying a recent address with profile data
+function RecentAddressItem({ address, onClick }) {
+    const { data: profileData } = useProfile({ address });
+    return (_jsxs("button", { onClick: onClick, className: "flex items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-[#fafafa]", children: [profileData?.avatar ? (_jsx("img", { src: profileData.avatar, alt: profileData.name || address, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), _jsx("div", { className: "flex flex-col items-start", children: _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [address.slice(0, 6), "...", address.slice(-4), profileData?.name && ` (${profileData.name})`] }) })] }));
+}
+export function Send({ recipientAddress: initialRecipient, onSuccess }) {
+    const { address } = useAccountWallet();
+    const navigateBack = useModalStore(state => state.navigateBack);
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    // Wizard state
+    const [step, setStep] = useState("recipient");
+    const [selectedToken, setSelectedToken] = useState(null);
+    const [recipientAddress, setRecipientAddress] = useState(initialRecipient || "");
+    const [sendAmount, setSendAmount] = useState("");
+    const [isSending, setIsSending] = useState(false);
+    const [addressError, setAddressError] = useState("");
+    const [showValidatedResult, setShowValidatedResult] = useState(false);
+    // Hooks
+    const { data: simBalance, refetch: refetchSimBalance, isLoading: isLoadingBalance } = useSimBalance(address);
+    const { switchChainAndExecute } = useUnifiedChainSwitchAndExecute();
+    const { sendAnalyticsEvent } = useAnalytics();
+    // Recent addresses store
+    const recentAddresses = useRecentAddressesStore(state => state.recentAddresses);
+    const addRecentAddress = useRecentAddressesStore(state => state.addRecentAddress);
+    // Fetch profile data for validated address
+    const { data: validatedProfileData } = useProfile({
+        address: showValidatedResult && recipientAddress && isAddress(recipientAddress) ? recipientAddress : undefined,
+    });
+    // Address validation
+    const handleRecipientAddressChange = (value) => {
+        setRecipientAddress(value);
+        setShowValidatedResult(false);
+        if (value && !isAddress(value)) {
+            setAddressError("Please enter a valid EVM address (0x...)");
+        }
+        else {
+            setAddressError("");
+            if (value && isAddress(value)) {
+                setShowValidatedResult(true);
+            }
+        }
+    };
+    // Paste from clipboard
+    const handlePaste = async () => {
+        try {
+            const text = await navigator.clipboard.readText();
+            const trimmedText = text.trim();
+            setRecipientAddress(trimmedText);
+            if (trimmedText && isAddress(trimmedText)) {
+                setAddressError("");
+                setShowValidatedResult(true);
+            }
+            else if (trimmedText) {
+                setAddressError("Please enter a valid EVM address (0x...)");
+                setShowValidatedResult(false);
+            }
+        }
+        catch (error) {
+            toast.error("Failed to read clipboard");
+        }
+    };
+    // Handle clicking on the validated result to proceed
+    const handleSelectValidatedAddress = () => {
+        if (recipientAddress && isAddress(recipientAddress)) {
+            addRecentAddress(recipientAddress);
+            setStep("token");
+        }
+    };
+    // Go to previous step
+    const handleBack = () => {
+        if (step === "token")
+            setStep("recipient");
+        else if (step === "amount")
+            setStep("token");
+        else if (step === "confirm")
+            setStep("amount");
+        else
+            navigateBack();
+    };
+    // Get current selected token from fresh balance
+    const getCurrentSelectedToken = () => {
+        if (!selectedToken || !simBalance?.balances) {
+            return null;
+        }
+        const found = simBalance.balances.find(token => token.chain_id === selectedToken.chain_id && token.address === selectedToken.address);
+        return found || null;
+    };
+    // Percentage button handler
+    const handlePercentageClick = (percentage) => {
+        const currentToken = getCurrentSelectedToken();
+        if (currentToken) {
+            const tokenBalance = (BigInt(currentToken.amount) * BigInt(percentage)) / BigInt(100);
+            const amount = formatTokenAmount(tokenBalance, currentToken.decimals, 30, false);
+            setSendAmount(amount);
+        }
+    };
+    // Send transaction
+    const handleSend = async () => {
+        const sendAmountWithoutCommas = sendAmount.replace(/,/g, "");
+        const currentToken = getCurrentSelectedToken();
+        if (!currentToken || !recipientAddress || !sendAmount || parseFloat(sendAmountWithoutCommas) <= 0) {
+            return;
+        }
+        setIsSending(true);
+        const amountInWei = parseUnits(sendAmountWithoutCommas, currentToken.decimals);
+        const analyticsData = {
+            amount: sendAmount,
+            symbol: currentToken.symbol,
+            chain_id: currentToken.chain_id,
+            address: currentToken.address,
+        };
+        try {
+            invariant(isAddress(recipientAddress), "Recipient address is not a valid address");
+            const sendTokenData = encodeFunctionData({
+                abi: erc20Abi,
+                functionName: "transfer",
+                args: [recipientAddress, amountInWei],
+            });
+            const tx = await switchChainAndExecute(currentToken.chain_id, {
+                to: currentToken.address === "native" ? recipientAddress : currentToken.address,
+                data: sendTokenData,
+                value: currentToken.address === "native" ? amountInWei : BigInt(0),
+            });
+            if (tx) {
+                sendAnalyticsEvent("send_token_button_click", {
+                    ...analyticsData,
+                    success: true,
+                    tx: getExplorerTxUrl(currentToken.chain_id, tx),
+                });
+                setStep("success");
+                toast.success(`Successfully sent ${sendAmount} ${currentToken.symbol}`);
+                if (onSuccess) {
+                    onSuccess(tx);
+                }
+                setTimeout(async () => {
+                    await refetchSimBalance();
+                }, 1000);
+            }
+        }
+        catch (error) {
+            sendAnalyticsEvent("send_token_button_click", {
+                ...analyticsData,
+                success: false,
+                reason: error.message || "Unknown error",
+            });
+            toast.error(`Failed to send ${currentToken.symbol}: ${error.message || "Unknown error"}`);
+        }
+        finally {
+            setIsSending(false);
+        }
+    };
+    // Get step title
+    const getStepTitle = () => {
+        switch (step) {
+            case "recipient":
+                return "Select Recipient";
+            case "token":
+                return "Select Token";
+            case "amount":
+                return "Enter Amount";
+            case "confirm":
+                return "Confirm";
+            case "success":
+                return "Sent!";
+            default:
+                return "Send";
+        }
+    };
+    return (_jsxs("div", { className: "flex h-[600px] w-full flex-col bg-white", children: [_jsx(ModalHeader, { handleBack: handleBack, title: getStepTitle() }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [step === "recipient" && (_jsxs("div", { className: "flex flex-col gap-6 p-5", children: [_jsxs("div", { className: "flex h-12 w-full items-stretch overflow-hidden rounded-lg border border-[#d1d1d6] bg-white", children: [_jsx("div", { className: "flex w-12 items-center justify-center bg-transparent px-3 py-2", children: _jsx("span", { className: "font-neue-montreal-medium text-base text-[#3f3f46]", children: "To" }) }), _jsxs("div", { className: "flex flex-1 items-center border-l border-[#d1d1d6] px-3 py-2", children: [_jsx("input", { type: "text", value: recipientAddress, onChange: e => handleRecipientAddressChange(e.target.value), placeholder: "ENS or Address", className: "font-neue-montreal-medium flex-1 text-base text-[#70707b] outline-none placeholder:text-[#70707b]" }), _jsx("button", { onClick: handlePaste, className: "font-inter ml-2 rounded-md border border-[#e4e4e7] bg-[#fafafa] px-2.5 py-0.5 text-sm font-medium text-[#3f3f46] transition-colors hover:bg-[#f4f4f5]", children: "Paste" })] })] }), addressError && _jsx("p", { className: "font-neue-montreal-medium -mt-4 text-xs text-red-500", children: addressError }), showValidatedResult && recipientAddress && isAddress(recipientAddress) && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#0b57c2]", children: "Result" }) }), _jsxs("button", { onClick: handleSelectValidatedAddress, className: "flex items-center gap-2 rounded-xl bg-[#f4f4f5] px-3 py-2 transition-colors hover:bg-[#e4e4e7]", children: [validatedProfileData?.avatar ? (_jsx("img", { src: validatedProfileData.avatar, alt: validatedProfileData.name || recipientAddress, className: "h-10 w-10 rounded-full" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full border border-[#e4e4e7] bg-[#f4f4f5]", children: _jsx(Wallet, { className: "h-5 w-5 text-[#a0a0ab]" }) })), _jsxs("span", { className: "font-neue-montreal-medium text-base tracking-[-0.32px] text-[#70707b]", children: [recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), validatedProfileData?.name && ` (${validatedProfileData.name})`] })] })] })), recentAddresses.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Clock, { className: "h-3.5 w-3.5 text-[#3f3f46]" }), _jsx("span", { className: "font-sf-pro-text text-sm font-semibold leading-[1.3] tracking-[-0.41px] text-[#3f3f46]", children: "Recents" })] }), _jsx("div", { className: "flex flex-col", children: recentAddresses.map((recent, index) => (_jsx(RecentAddressItem, { address: recent.address, onClick: () => {
+                                                // Just fill the input and show validation - don't auto-proceed
+                                                handleRecipientAddressChange(recent.address);
+                                            } }, index))) })] }))] })), step === "token" && (_jsx("div", { className: "flex flex-col p-5", children: isLoadingBalance ? (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-1", children: [...Array(3)].map((_, index) => (_jsxs("div", { className: "flex items-center justify-between rounded-xl p-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-b3-line h-10 w-10 animate-pulse rounded-full" }), _jsxs("div", { children: [_jsx("div", { className: "bg-b3-line mb-1 h-4 w-16 animate-pulse rounded" }), _jsx("div", { className: "bg-b3-line h-3 w-24 animate-pulse rounded" })] })] }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "bg-b3-line mb-1 h-4 w-20 animate-pulse rounded" }), _jsx("div", { className: "bg-b3-line h-3 w-16 animate-pulse rounded" })] })] }, index))) }) })) : simBalance?.balances && simBalance.balances.length > 0 ? (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-1", children: simBalance.balances.map(token => (_jsxs("div", { className: "hover:bg-b3-line/60 dark:hover:bg-b3-primary-wash/40 group flex cursor-pointer items-center justify-between rounded-xl p-3 transition-all duration-200", onClick: () => {
+                                        setSelectedToken(token);
+                                        setStep("amount");
+                                    }, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full", children: ALL_CHAINS[token.chain_id]?.logoUrl ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[token.chain_id].logoUrl, tokenUrl: token.token_metadata?.logo, className: "size-10" })) : (_jsx(CircleHelp, { className: "text-b3-react-foreground size-10" })) }), _jsxs("div", { children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-b3-grey font-neue-montreal-semibold transition-colors duration-200 group-hover:font-bold group-hover:text-black", children: token.symbol }) }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm transition-colors duration-200 group-hover:text-gray-700", children: token.name })] })] }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "text-b3-grey font-neue-montreal-semibold transition-colors duration-200 group-hover:font-bold group-hover:text-black", children: formatTokenAmount(BigInt(token.amount), token.decimals) }), _jsx("div", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm transition-colors duration-200 group-hover:text-gray-700", children: formatDisplayNumber(token.value_usd, { style: "currency", fractionDigits: 2 }) })] })] }, token.chain_id + "_" + token.address))) }) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(CircleHelp, { className: "text-b3-foreground-muted mb-4 h-8 w-8" }), _jsx("p", { className: "text-b3-foreground-muted font-neue-montreal-medium text-sm", children: "No tokens available" })] })) })), step === "amount" && selectedToken && (_jsxs("div", { className: "flex flex-col gap-6 p-5", children: [_jsxs("div", { className: "flex items-center justify-between rounded-xl border border-[#d1d1d6] bg-[#fafafa] p-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center", children: ALL_CHAINS[selectedToken.chain_id]?.logoUrl ? (_jsx(ChainTokenIcon, { chainUrl: ALL_CHAINS[selectedToken.chain_id].logoUrl, tokenUrl: selectedToken.token_metadata?.logo, className: "size-10" })) : (_jsx(CircleHelp, { className: "text-b3-react-foreground size-10" })) }), _jsxs("div", { children: [_jsx("div", { className: "font-neue-montreal-semibold text-base text-[#18181b]", children: selectedToken.symbol }), _jsx("div", { className: "font-neue-montreal-medium text-sm text-[#70707b]", children: formatTokenAmount(BigInt(selectedToken.amount), selectedToken.decimals) })] })] }), _jsx("button", { onClick: () => setStep("token"), className: "text-b3-primary-blue font-neue-montreal-semibold hover:text-b3-primary-blue/80 text-sm transition-colors", children: "Change" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(NumericFormat, { decimalSeparator: ".", allowedDecimalSeparators: [","], thousandSeparator: true, inputMode: "decimal", autoComplete: "off", autoCorrect: "off", type: "text", placeholder: "0.00", minLength: 1, maxLength: 30, spellCheck: "false", className: "font-neue-montreal-medium placeholder:text-b3-foreground-muted w-full rounded-lg border border-[#d1d1d6] bg-white px-3 py-2 text-base text-[#18181b] outline-none focus:border-[#0c68e9]", pattern: "^[0-9]*[.,]?[0-9]*$", disabled: isSending, value: sendAmount, allowNegative: false, onValueChange: values => setSendAmount(values.value) }), _jsx("div", { className: "grid grid-cols-4 gap-2", children: [25, 50, 75, 100].map(percentage => (_jsxs(Button, { variant: "outline", onClick: () => handlePercentageClick(percentage), className: "font-neue-montreal-medium border-[#d1d1d6] text-sm text-[#18181b] hover:bg-[#fafafa]", disabled: isSending, children: [percentage, "%"] }, percentage))) }), _jsxs("div", { className: "font-neue-montreal-medium text-sm text-[#70707b]", children: ["Available: ", formatTokenAmount(BigInt(selectedToken.amount), selectedToken.decimals), " ", selectedToken.symbol] })] }), _jsx(Button, { onClick: () => setStep("confirm"), disabled: !sendAmount || parseFloat(sendAmount) <= 0, className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold disabled:bg-b3-line disabled:text-b3-foreground-muted h-12 w-full rounded-xl text-white", children: "Continue" })] })), step === "confirm" && selectedToken && (_jsxs("div", { className: "flex min-h-full flex-col", children: [_jsxs("div", { className: "flex flex-col items-center gap-4 px-5 pb-0 pt-6", children: [_jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-[#d5e5fd]", children: _jsx(SendIcon, { className: "h-7 w-7 text-[#0c68e9]" }) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "font-neue-montreal-semibold text-[30px] leading-[38px] text-[#18181b]", children: sendAmount }), _jsx("span", { className: "font-neue-montreal-semibold text-[30px] leading-[38px] text-[#70707b]", children: selectedToken.symbol })] })] }), _jsx("div", { className: "h-5" }), _jsx("div", { className: "flex flex-col gap-3 px-5", children: _jsx("div", { className: "rounded-xl border border-[#e4e4e7] bg-[#fafafa] p-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[#e4e4e7] pb-3", children: [_jsx("span", { className: "font-inter text-sm font-normal leading-5 text-[#51525c]", children: "To" }), _jsxs("span", { className: "font-inter text-sm font-normal leading-5 text-[#18181b]", children: ["Wallet (", recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4), ")"] })] }), _jsxs("div", { className: "flex items-center justify-between border-b border-[#e4e4e7] pb-3", children: [_jsx("span", { className: "font-inter text-sm font-normal leading-5 text-[#51525c]", children: "Network" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "font-inter text-sm font-normal leading-5 text-[#51525c]", children: ALL_CHAINS[selectedToken.chain_id]?.name || "Unknown" }), ALL_CHAINS[selectedToken.chain_id]?.logoUrl && (_jsx("img", { src: ALL_CHAINS[selectedToken.chain_id].logoUrl, alt: ALL_CHAINS[selectedToken.chain_id]?.name, className: "h-4 w-4 rounded-full" }))] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-inter text-sm font-normal leading-5 text-[#51525c]", children: "Network fee" }), _jsx("span", { className: "font-inter text-sm font-normal leading-5 text-[#18181b]", children: "$0.1" })] })] }) }) }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex gap-4 border-t border-[#e4e4e7] bg-[#fafafa] p-4", children: [_jsx(Button, { onClick: handleBack, disabled: isSending, variant: "outline", className: "font-inter h-12 flex-1 rounded-xl border border-[#e4e4e7] bg-white text-base font-semibold text-[#3f3f46] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18),inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] hover:bg-[#fafafa]", children: "Cancel" }), _jsx(Button, { onClick: handleSend, disabled: isSending, className: "font-inter border-white/12 h-12 flex-1 rounded-xl border-2 bg-[#0c68e9] text-base font-semibold text-white shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18),inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] hover:bg-[#0b5fd4]", children: isSending ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Sending..."] })) : ("Send") })] })] })), step === "success" && selectedToken && (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-6 p-5 text-center", children: [_jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-green-100", children: _jsx(SendIcon, { className: "h-7 w-7 text-green-600" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-neue-montreal-semibold mb-2 text-xl text-[#18181b]", children: "Sent!" }), _jsxs("p", { className: "font-neue-montreal-medium text-sm text-[#70707b]", children: [sendAmount, " ", selectedToken.symbol, " was sent to ", recipientAddress.slice(0, 6), "...", recipientAddress.slice(-4)] })] }), _jsx(Button, { onClick: () => setB3ModalOpen(false), className: "bg-b3-primary-blue hover:bg-b3-primary-blue/90 font-neue-montreal-semibold h-12 w-full rounded-xl text-white", children: "Done" })] }))] })] }));
+}

package/dist/esm/global-account/react/components/SignInWithB3/SignIn.js

@@ -1,23 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { SignInWithB3, StyleRoot, useAccountWallet, useAuthentication, useB3, useIsMobile, } from "../../../../global-account/react/index.js";
+import { IPFSMediaRenderer, SignInWithB3, StyleRoot, useAccountWallet, useAuthentication, useB3, useIsMobile, } from "../../../../global-account/react/index.js";
 import Icon from "../../../../global-account/react/components/custom/Icon.js";
 import { ecosystemWalletId } from "../../../../shared/constants/index.js";
 import { cn, truncateAddress } from "../../../../shared/utils/index.js";
 import { Menu, MenuButton, MenuItems, Transition } from "@headlessui/react";
 import { useEffect } from "react";
-import { useConnectedWallets, useSetActiveWallet, useWalletInfo } from "thirdweb/react";
+import { useConnectedWallets, useSetActiveWallet } from "thirdweb/react";
+import { useAccountWalletImage } from "../../hooks/useAccountWallet.js";
 import { ManageAccountButton } from "../custom/ManageAccountButton.js";
 export function SignIn(props) {
     const { className } = props;
     const { automaticallySetFirstEoa, partnerId } = useB3();
-    const { wallet, address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, eoaWalletIcon, } = useAccountWallet();
+    const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, eoaWalletIcon, } = useAccountWallet();
     const isMobile = useIsMobile();
     const { logout } = useAuthentication(partnerId);
     const onDisconnect = async () => {
         await logout();
     };
     const connectedWallets = useConnectedWallets();
-    const { data: walletInfo } = useWalletInfo(isActiveSmartWallet ? connectedSmartWallet?.id : connectedEOAWallet?.id);
     const setActiveWallet = useSetActiveWallet();
     const handleSetActiveAccount = (selectedWalletId) => {
         if (!selectedWalletId ||
@@ -34,10 +34,11 @@ export function SignIn(props) {
             setActiveWallet(connectedEOAWallet);
         }
     }, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet, automaticallySetFirstEoa]);
+    const walletImage = useAccountWalletImage();
     // Desktop version - original dropdown menu
-    return (_jsx(StyleRoot, { children: _jsx(Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3", children: [!!wallet.meta?.icon && (_jsx("img", { src: wallet.meta.icon, alt: wallet.meta.icon, className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), _jsx("div", { className: "text-as-primary", children: ensName ? ensName : truncateAddress(globalAddress) })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border lg:right-0", modal: false, 
+    return (_jsx(StyleRoot, { children: _jsx(Menu, { className: `relative flex items-center ${className || ""}`, as: "div", children: globalAddress ? (_jsxs(_Fragment, { children: [_jsxs(MenuButton, { className: "bg-b3-react-background group flex h-10 items-center gap-1 rounded-xl px-3 focus:outline-none", children: [!!walletImage && (_jsx(IPFSMediaRenderer, { src: walletImage, alt: "Wallet Image", className: "bg-b3-react-primary h-6 w-6 rounded-full object-cover opacity-100" })), _jsx("div", { className: "text-as-primary", children: ensName ? ensName : truncateAddress(globalAddress) })] }), _jsx(Transition, { enter: "duration-200 ease-out", enterFrom: "scale-95 opacity-0", enterTo: "scale-100 opacity-100", leave: "duration-300 ease-out", leaveFrom: "scale-100 opacity-100", leaveTo: "scale-95 opacity-0", children: _jsx(MenuItems, { className: "b3-root absolute -right-4 top-full min-w-64 rounded-2xl border focus:outline-none lg:right-0", modal: false, 
                             // TODO: Figure out why setting anchor on mobile causes z-index issues where it appears under elements
-                            anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: eoaWalletIcon, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) }), _jsx("div", { children: walletInfo?.name })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
+                            anchor: isMobile ? "top end" : undefined, children: _jsxs("div", { className: "bg-b3-react-background", children: [connectedEOAWallet ? (_jsxs("div", { className: cn("border-b3-react-subtle bg-b3-react-background flex cursor-pointer items-center justify-between rounded-xl p-3"), onClick: () => handleSetActiveAccount(connectedEOAWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: eoaWalletIcon, alt: connectedEOAWallet?.id }), _jsxs("div", { className: "ml-4 grow", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) })] })] }), isActiveEOAWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] })) : (connectedSmartWallet && (_jsxs("div", { className: cn("mb-2 flex cursor-pointer items-center justify-between rounded-xl p-3", isActiveSmartWallet
                                             ? "bg-b3-react-background"
                                             : "bg-b3-react-background hover:bg-b3-react-background"), onClick: () => handleSetActiveAccount(connectedSmartWallet?.id), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("img", { className: "bg-b3-react-primary h-16 w-16 rounded-full opacity-100", src: smartWalletIcon, alt: connectedSmartWallet?.id }), _jsxs("div", { className: "grow pl-4", children: [ensName && _jsx("div", { children: ensName }), _jsx("div", { children: truncateAddress(globalAddress) }), _jsx("div", { children: "Smart wallet" })] })] }), isActiveSmartWallet && _jsx(Icon, { className: "fill-b3-react-primary", name: "check" })] }))), _jsx("div", { className: "ml-3", children: _jsx(ManageAccountButton, { ...props, className: "w-[calc(100%-12px)]" }) }), _jsx("button", { className: "mb-2 w-full space-y-1", onClick: onDisconnect, children: _jsxs("div", { className: "hover:bg-b3-react-background group flex h-12 items-center rounded-xl px-4 transition-colors", children: [_jsx(Icon, { className: "fill-b3-react-primary mr-4 shrink-0 transition-colors", name: "logout" }), _jsx("div", { className: "text-b3-react-primary mr-auto transition-colors", children: "Disconnect" })] }) })] }) }) })] })) : (_jsx(SignInWithB3, { closeAfterLogin: true, onLoginSuccess: async (globalAccount) => {
                     console.log("User authenticated with Global Account!", globalAccount);

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -173,7 +173,7 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
         return (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "p-4 text-center text-red-500", children: refetchError }) }));
     }
     if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
-        return (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "mt-8 flex items-center justify-center", children: _jsx(Loading, { variant: "white", size: "lg" }) }) }));
+        return (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: _jsx(Loading, { variant: "white", size: "lg" }) }) }));
     }
     if (step === "login") {
         // Custom strategy

package/dist/esm/global-account/react/components/Toast/ToastComponents.d.ts

@@ -0,0 +1,15 @@
+import type { ToastItem } from "./ToastContext";
+interface ToastProps {
+    toast: ToastItem;
+    onDismiss: (id: string) => void;
+    theme?: "light" | "dark";
+}
+export declare function Toast({ toast, onDismiss, theme }: ToastProps): import("react/jsx-runtime").JSX.Element;
+interface ToastContainerProps {
+    toasts: ToastItem[];
+    onDismiss: (id: string) => void;
+    theme?: "light" | "dark";
+    className?: string;
+}
+export declare function ToastContainer({ toasts, onDismiss, theme, className }: ToastContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/global-account/react/components/Toast/ToastComponents.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../shared/utils/cn.js";
+import { AnimatePresence, motion } from "framer-motion";
+const getToastIcon = (type) => {
+    switch (type) {
+        case "success":
+            return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.6666 5L7.49998 14.1667L3.33331 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+        case "error":
+            return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M15 5L5 15M5 5L15 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+        case "info":
+            return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10 13.3333V10M10 6.66667H10.0083M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+        case "warning":
+            return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10 6.66667V10M10 13.3333H10.0083M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    }
+};
+const getToastStyles = (type, theme = "light") => {
+    const isDark = theme === "dark";
+    const baseStyles = "flex items-start gap-3 p-4 rounded-xl border shadow-sm";
+    switch (type) {
+        case "success":
+            return cn(baseStyles, isDark ? "bg-green-950/50 border-green-800/50 text-green-100" : "bg-green-50 border-green-200 text-green-900");
+        case "error":
+            return cn(baseStyles, isDark ? "bg-red-950/50 border-red-800/50 text-red-100" : "bg-red-50 border-red-200 text-red-900");
+        case "info":
+            return cn(baseStyles, isDark ? "bg-blue-950/50 border-blue-800/50 text-blue-100" : "bg-blue-50 border-blue-200 text-blue-900");
+        case "warning":
+            return cn(baseStyles, isDark
+                ? "bg-yellow-950/50 border-yellow-800/50 text-yellow-100"
+                : "bg-yellow-50 border-yellow-200 text-yellow-900");
+    }
+};
+const getIconColorClass = (type, theme = "light") => {
+    const isDark = theme === "dark";
+    switch (type) {
+        case "success":
+            return isDark ? "text-green-400" : "text-green-600";
+        case "error":
+            return isDark ? "text-red-400" : "text-red-600";
+        case "info":
+            return isDark ? "text-blue-400" : "text-blue-600";
+        case "warning":
+            return isDark ? "text-yellow-400" : "text-yellow-600";
+    }
+};
+export function Toast({ toast, onDismiss, theme = "light" }) {
+    return (_jsxs(motion.div, { initial: { opacity: 0, y: -20, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -10, scale: 0.95 }, transition: { duration: 0.2 }, className: getToastStyles(toast.type, theme), children: [_jsx("div", { className: cn("mt-0.5 shrink-0", getIconColorClass(toast.type, theme)), children: getToastIcon(toast.type) }), _jsx("p", { className: "font-inter flex-1 text-sm font-medium", children: toast.message }), _jsx("button", { onClick: () => onDismiss(toast.id), className: cn("shrink-0 transition-opacity hover:opacity-70", theme === "dark" ? "text-gray-400" : "text-gray-500"), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }));
+}
+export function ToastContainer({ toasts, onDismiss, theme = "light", className }) {
+    return (_jsx("div", { className: cn("w-full space-y-2", className), children: _jsx(AnimatePresence, { mode: "popLayout", children: toasts.map(toast => (_jsx(Toast, { toast: toast, onDismiss: onDismiss, theme: theme }, toast.id))) }) }));
+}

package/dist/esm/global-account/react/components/Toast/ToastContext.d.ts

@@ -0,0 +1,19 @@
+export type ToastType = "success" | "error" | "info" | "warning";
+export interface ToastItem {
+    id: string;
+    type: ToastType;
+    message: string;
+    duration?: number;
+    createdAt: number;
+}
+interface ToastContextType {
+    toasts: ToastItem[];
+    addToast: (type: ToastType, message: string, duration?: number) => string;
+    removeToast: (id: string) => void;
+    clearAll: () => void;
+}
+export declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useToastContext(): ToastContextType;
+export {};

package/dist/esm/global-account/react/components/Toast/ToastContext.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+const ToastContext = createContext(undefined);
+let globalToastCounter = 0;
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const timeoutsRef = useRef(new Map());
+    const removeToast = useCallback((id) => {
+        setToasts(prev => prev.filter(toast => toast.id !== id));
+        const timeout = timeoutsRef.current.get(id);
+        if (timeout) {
+            clearTimeout(timeout);
+            timeoutsRef.current.delete(id);
+        }
+    }, []);
+    const addToast = useCallback((type, message, duration = 4000) => {
+        const id = `toast-${Date.now()}-${globalToastCounter++}`;
+        const newToast = {
+            id,
+            type,
+            message,
+            duration,
+            createdAt: Date.now(),
+        };
+        setToasts(prev => [...prev, newToast]);
+        if (duration > 0) {
+            const timeout = setTimeout(() => {
+                removeToast(id);
+            }, duration);
+            timeoutsRef.current.set(id, timeout);
+        }
+        return id;
+    }, [removeToast]);
+    const clearAll = useCallback(() => {
+        timeoutsRef.current.forEach(timeout => clearTimeout(timeout));
+        timeoutsRef.current.clear();
+        setToasts([]);
+    }, []);
+    // Cleanup on unmount
+    useEffect(() => {
+        const timeouts = timeoutsRef.current;
+        return () => {
+            timeouts.forEach(timeout => clearTimeout(timeout));
+            timeouts.clear();
+        };
+    }, []);
+    return _jsx(ToastContext.Provider, { value: { toasts, addToast, removeToast, clearAll }, children: children });
+}
+export function useToastContext() {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error("useToastContext must be used within ToastProvider");
+    }
+    return context;
+}

package/dist/esm/global-account/react/components/Toast/index.d.ts

@@ -0,0 +1,4 @@
+export { setToastContext, toast } from "./toastApi";
+export { Toast, ToastContainer } from "./ToastComponents";
+export { ToastProvider, useToastContext } from "./ToastContext";
+export type { ToastItem, ToastType } from "./ToastContext";

package/dist/esm/global-account/react/components/Toast/index.js

@@ -0,0 +1,3 @@
+export { setToastContext, toast } from "./toastApi.js";
+export { Toast, ToastContainer } from "./ToastComponents.js";
+export { ToastProvider, useToastContext } from "./ToastContext.js";

package/dist/esm/global-account/react/components/Toast/toastApi.d.ts

@@ -0,0 +1,21 @@
+import { ToastType } from "./ToastContext";
+export declare function setToastContext(context: {
+    addToast: (type: ToastType, message: string, duration?: number) => string;
+    removeToast: (id: string) => void;
+    clearAll: () => void;
+}): void;
+export declare const toast: {
+    success: (message: string, options?: {
+        duration?: number;
+    }) => any;
+    error: (message: string, options?: {
+        duration?: number;
+    }) => any;
+    info: (message: string, options?: {
+        duration?: number;
+    }) => any;
+    warning: (message: string, options?: {
+        duration?: number;
+    }) => any;
+    dismiss: (toastId?: string) => void;
+};

package/dist/esm/global-account/react/components/Toast/toastApi.js

@@ -0,0 +1,89 @@
+// Global reference to the toast context functions
+let toastContextRef = null;
+export function setToastContext(context) {
+    toastContextRef = context;
+}
+// Sonner-compatible API
+export const toast = {
+    success: (message, options) => {
+        if (toastContextRef) {
+            return toastContextRef.addToast("success", message, options?.duration);
+        }
+        console.warn("Toast context not initialized. Using fallback.");
+        // Fallback to sonner if context not available
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const sonner = require("sonner");
+            return sonner.toast.success(message, options);
+        }
+        catch {
+            console.error("Failed to show toast:", message);
+            return "";
+        }
+    },
+    error: (message, options) => {
+        if (toastContextRef) {
+            return toastContextRef.addToast("error", message, options?.duration);
+        }
+        console.warn("Toast context not initialized. Using fallback.");
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const sonner = require("sonner");
+            return sonner.toast.error(message, options);
+        }
+        catch {
+            console.error("Failed to show toast:", message);
+            return "";
+        }
+    },
+    info: (message, options) => {
+        if (toastContextRef) {
+            return toastContextRef.addToast("info", message, options?.duration);
+        }
+        console.warn("Toast context not initialized. Using fallback.");
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const sonner = require("sonner");
+            return sonner.toast.info(message, options);
+        }
+        catch {
+            console.error("Failed to show toast:", message);
+            return "";
+        }
+    },
+    warning: (message, options) => {
+        if (toastContextRef) {
+            return toastContextRef.addToast("warning", message, options?.duration);
+        }
+        console.warn("Toast context not initialized. Using fallback.");
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const sonner = require("sonner");
+            return sonner.toast.warning(message, options);
+        }
+        catch {
+            console.error("Failed to show toast:", message);
+            return "";
+        }
+    },
+    dismiss: (toastId) => {
+        if (toastContextRef) {
+            if (toastId) {
+                toastContextRef.removeToast(toastId);
+            }
+            else {
+                toastContextRef.clearAll();
+            }
+        }
+        else {
+            try {
+                // eslint-disable-next-line @typescript-eslint/no-var-requires
+                const sonner = require("sonner");
+                sonner.toast.dismiss(toastId);
+            }
+            catch {
+                console.error("Failed to dismiss toast");
+            }
+        }
+    },
+};

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

@@ -0,0 +1,4 @@
+declare const WalletImage: ({ fallback }: {
+    fallback?: React.ReactNode;
+}) => string | number | bigint | true | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null;
+export default WalletImage;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAccountWalletImage } from "../../hooks/useAccountWallet.js";
+import { IPFSMediaRenderer } from "../IPFSMediaRenderer/IPFSMediaRenderer.js";
+const WalletImage = ({ fallback }) => {
+    const walletImage = useAccountWalletImage();
+    if (walletImage) {
+        return _jsx(IPFSMediaRenderer, { src: walletImage, alt: "Profile", className: "h-6 w-6 rounded-full" });
+    }
+    return fallback || null;
+};
+export default WalletImage;

package/dist/esm/global-account/react/components/icons/BellIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const BellIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default BellIcon;

package/dist/esm/global-account/react/components/icons/BellIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const BellIcon = (props) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M7.5 17.5H12.5M4.16667 7.5C4.16667 4.27834 6.77834 1.66667 10 1.66667C13.2217 1.66667 15.8333 4.27834 15.8333 7.5V8.33333C15.8333 9.61667 16.2167 10.8583 16.9167 11.9167L17.5 12.75C17.9417 13.3917 17.4833 14.1667 16.7333 14.1667H3.26667C2.51667 14.1667 2.05834 13.3917 2.5 12.75L3.08334 11.9167C3.78334 10.8583 4.16667 9.61667 4.16667 8.33333V7.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export default BellIcon;

package/dist/esm/global-account/react/components/icons/ChevronDownIcon.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from "react";
+export declare function ChevronDownIcon({ className, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/global-account/react/components/icons/ChevronDownIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ChevronDownIcon({ className, ...props }) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, ...props, children: _jsx("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/esm/global-account/react/components/icons/CopyIcon.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from "react";
+export declare function CopyIcon({ className, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/global-account/react/components/icons/CopyIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CopyIcon({ className, ...props }) {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, ...props, children: _jsx("path", { d: "M3.33333 3.33333V2C3.33333 1.63181 3.63181 1.33333 4 1.33333H10C10.3682 1.33333 10.6667 1.63181 10.6667 2V8C10.6667 8.36819 10.3682 8.66667 10 8.66667H8.66667M2 3.33333H8C8.36819 3.33333 8.66667 3.63181 8.66667 4V10C8.66667 10.3682 8.36819 10.6667 8 10.6667H2C1.63181 10.6667 1.33333 10.3682 1.33333 10V4C1.33333 3.63181 1.63181 3.33333 2 3.33333Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/esm/global-account/react/components/icons/LinkIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const LinkIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default LinkIcon;

package/dist/esm/global-account/react/components/icons/LinkIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const LinkIcon = (props) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M10.8333 9.16667L15.8333 4.16667M17.5 2.5L15.8333 4.16667L17.5 2.5ZM11.6667 4.16667H15.8333V8.33333L11.6667 4.16667ZM9.16667 10.8333L4.16667 15.8333L9.16667 10.8333ZM8.33333 15.8333H4.16667V11.6667L8.33333 15.8333ZM15.8333 10V15.8333H10L15.8333 10ZM4.16667 4.16667V10L10 4.16667H4.16667Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export default LinkIcon;

package/dist/esm/global-account/react/components/icons/LockIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const LockIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default LockIcon;

package/dist/esm/global-account/react/components/icons/LockIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const LockIcon = (props) => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M14.1667 9.16667V6.66667C14.1667 4.36548 12.3012 2.5 10 2.5C7.69881 2.5 5.83333 4.36548 5.83333 6.66667V9.16667M7.5 14.1667C7.5 15.0871 8.24619 15.8333 9.16667 15.8333H10.8333C11.7538 15.8333 12.5 15.0871 12.5 14.1667C12.5 13.2462 11.7538 12.5 10.8333 12.5H9.16667C8.24619 12.5 7.5 11.7538 7.5 10.8333C7.5 9.91286 8.24619 9.16667 9.16667 9.16667H10.8333C11.7538 9.16667 12.5 9.91286 12.5 10.8333", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export default LockIcon;

package/dist/esm/global-account/react/components/icons/WalletIcon.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from "react";
+export declare function WalletIcon({ className, ...props }: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;