decentraland-ui2 2.5.3 → 3.0.0

package/dist/components/Navbar/NotificationBell.styled.js

@@ -0,0 +1,189 @@
+/**
+ * Notification styled components for building the notification slot UI.
+ * These are not used by the Navbar component directly -- they are exported
+ * for consumers (e.g. landing-site, decentraland-dapps) to compose their
+ * notification panel UI and pass it as the notificationSlot prop.
+ */
+import styled from '@emotion/styled';
+import * as colors from '../../theme/colors';
+import { MOBILE_BREAKPOINT, bellShake, slideDown } from './Navbar.styled';
+const BellButton = styled('button')({
+    all: 'unset',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 24,
+    height: 24,
+    color: colors.neutral.white,
+    cursor: 'pointer',
+    flexShrink: 0,
+    borderRadius: 4,
+    '&.has-unread': {
+        animation: `${bellShake} 0.8s`,
+        animationIterationCount: 4
+    },
+    '&:focus-visible': {
+        outline: `2px solid ${colors.base.primary}`,
+        outlineOffset: 2
+    },
+    '& svg': {
+        width: 24,
+        height: 24
+    }
+});
+const NotificationBadge = styled('span')({
+    position: 'absolute',
+    top: -4,
+    right: -6,
+    minWidth: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: colors.base.primary,
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: 700,
+    fontFamily: 'Inter, Helvetica, Arial, sans-serif',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '0 4px',
+    lineHeight: 1,
+    pointerEvents: 'none'
+});
+const NotificationWrapper = styled('div')({
+    position: 'relative'
+});
+const NotificationPanel = styled('div')({
+    position: 'absolute',
+    top: '100%',
+    right: -12,
+    marginTop: 16,
+    width: 390,
+    maxHeight: '70vh',
+    zIndex: 1102,
+    background: 'rgba(38, 38, 38, 0.8)',
+    backdropFilter: 'blur(12.5px)',
+    WebkitBackdropFilter: 'blur(12.5px)',
+    border: '0.5px solid #5E5B67',
+    borderRadius: 12,
+    boxShadow: '0 2px 20px rgba(0, 0, 0, 0.25)',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    paddingTop: 12,
+    paddingBottom: 24,
+    animation: `${slideDown} 0.15s ease forwards`,
+    [MOBILE_BREAKPOINT]: {
+        position: 'fixed',
+        top: 64,
+        left: 0,
+        right: 0,
+        width: 'auto',
+        maxHeight: 'calc(100vh - 64px)',
+        borderRadius: 0
+    }
+});
+const NotificationHeader = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '0 12px 12px 24px',
+    borderBottom: '0.5px solid #5E5B67'
+});
+const NotificationTitle = styled('span')({
+    fontFamily: 'Inter, Helvetica, Arial, sans-serif',
+    fontWeight: 600,
+    fontSize: 20,
+    color: '#FCFCFC'
+});
+const NotificationList = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    overflowY: 'auto',
+    flex: 1
+});
+const NotificationListItem = styled('div')({
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: 8,
+    padding: '8px 16px',
+    borderRadius: 8,
+    cursor: 'pointer',
+    transition: 'background-color 0.15s ease',
+    '&:hover': {
+        backgroundColor: 'rgba(255, 255, 255, 0.05)'
+    }
+});
+const NotificationItemImage = styled('div')({
+    width: 56,
+    height: 56,
+    borderRadius: '50%',
+    backgroundColor: 'rgba(103, 99, 112, 0.4)',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    '& img, & svg': {
+        width: 48,
+        height: 48,
+        objectFit: 'cover'
+    }
+});
+const NotificationItemContent = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+    minWidth: 0,
+    flex: 1
+});
+const NotificationItemTitle = styled('span')({
+    fontFamily: 'Inter, Helvetica, Arial, sans-serif',
+    fontWeight: 600,
+    fontSize: 16,
+    lineHeight: 1.75,
+    color: '#FCFCFC',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+});
+const NotificationItemDescription = styled('span')({
+    fontFamily: 'Inter, Helvetica, Arial, sans-serif',
+    fontWeight: 400,
+    fontSize: 12,
+    lineHeight: '20px',
+    color: '#ECEBED',
+    maxWidth: 280,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+});
+const NotificationItemTime = styled('span')({
+    fontFamily: 'Inter, Helvetica, Arial, sans-serif',
+    fontWeight: 400,
+    fontSize: 12,
+    color: '#A09BA8'
+});
+const NotificationDot = styled('div')({
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#FF2D55',
+    flexShrink: 0,
+    alignSelf: 'center'
+});
+const NotificationEmpty = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '40px 80px',
+    gap: 8,
+    color: colors.neutral.gray3,
+    fontFamily: 'Inter, Helvetica, Arial, sans-serif',
+    fontSize: 16,
+    textAlign: 'center'
+});
+export { BellButton, NotificationBadge, NotificationDot, NotificationEmpty, NotificationHeader, NotificationItemContent, NotificationItemDescription, NotificationItemImage, NotificationItemTime, NotificationItemTitle, NotificationList, NotificationListItem, NotificationPanel, NotificationTitle, NotificationWrapper };
+//# sourceMappingURL=NotificationBell.styled.js.map

package/dist/components/Navbar/NotificationBell.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBell.styled.js","sourceRoot":"","sources":["../../../src/components/Navbar/NotificationBell.styled.ts"],"names":[],"mappings":"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"}

package/dist/components/Navbar/UserCardPanel.d.ts

@@ -0,0 +1,27 @@
+import { Network } from '@dcl/schemas/dist/dapps/network';
+import type { NavbarI18n } from './Navbar.types';
+import type { ChainId } from '@dcl/schemas';
+interface UserCardPanelProps {
+    isLoadingProfile?: boolean;
+    address?: string;
+    avatar?: {
+        name?: string;
+        avatar?: {
+            snapshots?: {
+                face256?: string;
+                body?: string;
+            };
+        };
+    };
+    userCardOpen: boolean;
+    onToggleUserCard: () => void;
+    onClickSignOut: () => void;
+    selectedChain?: ChainId;
+    chains?: ChainId[];
+    onSelectChain?: (chain: ChainId) => void;
+    manaBalances?: Partial<Record<Network, number>>;
+    onClickBalance?: (network: Network) => void;
+    i18n: NavbarI18n;
+}
+declare const UserCardPanel: import("react").NamedExoticComponent<UserCardPanelProps>;
+export { UserCardPanel };

package/dist/components/Navbar/UserCardPanel.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useState } from 'react';
+import { Network } from '@dcl/schemas/dist/dapps/network';
+import { formatBalance } from './formatBalance';
+import { AccountIcon, ChainIcon, ChevronDownIcon, CopyIcon, DclLogo, LogoutIcon, ManaEthInlineIcon, ManaMaticInlineIcon, SettingsIcon, ShoppingBagIcon, WearableIcon } from './icons';
+import { getUserMenuItems } from './Navbar.defaults';
+import { AvatarButton, AvatarImage, BalanceAndChainRow, ChainOption, ChainPillButton, ChainPillContainer, ChainPillIconWrapper, ChainPillText, ManaBalanceClickable, ManaBalanceValue, ManaBalancesGroup, MobileUserCard, MobileUserCardAddress, MobileUserCardAddressLabel, MobileUserCardAvatar, MobileUserCardCopyButton, MobileUserCardInfo, MobileUserCardName, MobileUserCardTop, UserCard, UserCardAddress, UserCardAddressLabel, UserCardAvatarBody, UserCardAvatarContainer, UserCardChainOptions, UserCardCopyButton, UserCardDivider, UserCardLogout, UserCardMenu, UserCardMenuItem, UserCardName, UserCardWrapper } from './UserCardPanel.styled';
+const ICON_MAP = {
+    account: AccountIcon,
+    wearable: WearableIcon,
+    settings: SettingsIcon,
+    shopping: ShoppingBagIcon
+};
+const PEER_BASE_URL = 'https://peer.decentraland.org/content/contents/';
+function resolveContentUrl(hash) {
+    if (!hash)
+        return undefined;
+    if (hash.startsWith('http://') || hash.startsWith('https://'))
+        return hash;
+    if (hash.startsWith('data:'))
+        return hash;
+    if (!/^[a-zA-Z0-9]+$/.test(hash))
+        return undefined;
+    return `${PEER_BASE_URL}${hash}`;
+}
+/* ------------------------------------------------------------------ */
+/*  Chain helpers                                                      */
+/* ------------------------------------------------------------------ */
+const CHAIN_DISPLAY_NAME = {
+    1: 'Ethereum',
+    11155111: 'Sepolia',
+    137: 'Polygon',
+    80002: 'Amoy',
+    56: 'BSC',
+    43114: 'Avalanche',
+    42161: 'Arbitrum',
+    10: 'Optimism',
+    250: 'Fantom'
+};
+function getChainDisplayName(chainId) {
+    return CHAIN_DISPLAY_NAME[chainId] ?? `Chain ${chainId}`;
+}
+const UserCardPanel = memo(function UserCardPanel({ isLoadingProfile, address, avatar, userCardOpen, onToggleUserCard, onClickSignOut, selectedChain, chains, onSelectChain, manaBalances, onClickBalance, i18n }) {
+    const resolvedFace = resolveContentUrl(avatar?.avatar?.snapshots?.face256);
+    const [loadedUrl, setLoadedUrl] = useState();
+    const [faceError, setFaceError] = useState(false);
+    // Reset error when face URL changes
+    useEffect(() => {
+        setFaceError(false);
+    }, [resolvedFace]);
+    const faceLoaded = resolvedFace ? loadedUrl === resolvedFace : false;
+    const bodyUrl = resolveContentUrl(avatar?.avatar?.snapshots?.body);
+    const userName = avatar?.name || (address ? `${address.slice(0, 6)}...${address.slice(-4)}` : '');
+    const shortAddress = address ? `${address.slice(0, 6)}...${address.slice(-4)}` : '';
+    const [addressCopied, setAddressCopied] = useState(false);
+    const [chainSelectorOpen, setChainSelectorOpen] = useState(false);
+    const copyAddress = useCallback(() => {
+        if (address) {
+            navigator.clipboard
+                .writeText(address)
+                .then(() => {
+                setAddressCopied(true);
+                setTimeout(() => setAddressCopied(false), 2000);
+            })
+                .catch(() => {
+                // Silently fail if clipboard API is not available
+            });
+        }
+    }, [address]);
+    const handleSelectChain = useCallback((chain) => {
+        if (chain !== selectedChain) {
+            onSelectChain?.(chain);
+        }
+        setChainSelectorOpen(false);
+    }, [selectedChain, onSelectChain]);
+    const hasChainOrMana = (selectedChain !== undefined && chains && chains.length > 0) || (manaBalances && Object.keys(manaBalances).length > 0);
+    const renderBalanceAndChain = () => {
+        if (!hasChainOrMana)
+            return null;
+        return (_jsxs(BalanceAndChainRow, { children: [manaBalances && (_jsxs(ManaBalancesGroup, { children: [manaBalances.ETHEREUM !== undefined && (_jsxs(ManaBalanceClickable, { clickable: !!onClickBalance, onClick: () => onClickBalance?.(Network.ETHEREUM), children: [_jsx(ManaEthInlineIcon, {}), _jsx(ManaBalanceValue, { children: formatBalance(manaBalances.ETHEREUM) })] })), manaBalances.MATIC !== undefined && (_jsxs(ManaBalanceClickable, { clickable: !!onClickBalance, onClick: () => onClickBalance?.(Network.MATIC), children: [_jsx(ManaMaticInlineIcon, {}), _jsx(ManaBalanceValue, { children: formatBalance(manaBalances.MATIC) })] }))] })), selectedChain !== undefined && chains && chains.length > 0 && (_jsxs(ChainPillContainer, { children: [_jsxs(ChainPillButton, { onClick: () => setChainSelectorOpen(prev => !prev), children: [_jsx(ChainPillIconWrapper, { children: _jsx(ChainIcon, { chainId: selectedChain }) }), _jsx(ChainPillText, { children: getChainDisplayName(selectedChain) }), _jsx(ChevronDownIcon, { style: {
+                                        width: 20,
+                                        height: 20,
+                                        flexShrink: 0,
+                                        color: 'white',
+                                        transform: chainSelectorOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                                        transition: 'transform 0.25s ease'
+                                    } })] }), chainSelectorOpen && (_jsx(UserCardChainOptions, { role: "listbox", "aria-label": "Select chain", children: chains.map(chain => {
+                                const isSelected = chain === selectedChain;
+                                return (_jsxs(ChainOption, { selected: isSelected, role: "option", "aria-selected": isSelected, onClick: () => handleSelectChain(chain), children: [_jsx(ChainIcon, { chainId: chain }), getChainDisplayName(chain)] }, chain));
+                            }) }))] }))] }));
+    };
+    const renderAvatar = () => {
+        if (!resolvedFace || faceError) {
+            return (_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', padding: 6 }, children: _jsx(DclLogo, { style: { width: '100%', height: '100%' } }) }));
+        }
+        return (_jsx(AvatarImage, { src: resolvedFace, alt: "", onLoad: () => setLoadedUrl(resolvedFace), onError: () => setFaceError(true), style: { opacity: faceLoaded ? 1 : 0 } }));
+    };
+    const renderMenuItems = () => (_jsxs(_Fragment, { children: [getUserMenuItems().map(item => {
+                const Icon = ICON_MAP[item.icon];
+                return (_jsxs(UserCardMenuItem, { href: item.url, children: [Icon && _jsx(Icon, {}), i18n[item.label]] }, item.label));
+            }), _jsx(UserCardDivider, {}), _jsxs(UserCardLogout, { onClick: onClickSignOut, children: [_jsx(LogoutIcon, {}), i18n.logout] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(UserCardWrapper, { children: [_jsx(AvatarButton, { onClick: onToggleUserCard, "aria-label": "User menu", "aria-expanded": userCardOpen, "aria-haspopup": "true", className: isLoadingProfile ? 'loading' : undefined, children: !isLoadingProfile && renderAvatar() }), userCardOpen && (_jsxs(UserCard, { onClick: e => e.stopPropagation(), children: [_jsx(UserCardAvatarContainer, { children: bodyUrl ? _jsx(UserCardAvatarBody, { src: bodyUrl, alt: "" }) : null }), _jsxs(UserCardMenu, { children: [_jsxs("div", { style: { paddingLeft: 16, paddingBottom: 8, display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx(UserCardName, { title: userName, children: userName }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(UserCardAddressLabel, { children: i18n.walletAddress }), _jsxs(UserCardAddress, { children: [addressCopied ? i18n.addressCopied : shortAddress, _jsx(UserCardCopyButton, { onClick: copyAddress, "aria-label": "Copy address", children: _jsx(CopyIcon, {}) })] })] }), renderBalanceAndChain()] }), _jsx(UserCardDivider, {}), renderMenuItems()] })] }))] }), userCardOpen && (_jsxs(MobileUserCard, { "data-mobile-user-card": true, onClick: e => e.stopPropagation(), children: [_jsxs(MobileUserCardTop, { children: [_jsx(MobileUserCardAvatar, { className: isLoadingProfile ? 'loading' : undefined, children: !isLoadingProfile && renderAvatar() }), _jsxs(MobileUserCardInfo, { children: [_jsx(MobileUserCardName, { title: userName, children: userName }), _jsx(MobileUserCardAddressLabel, { children: i18n.walletAddress }), _jsxs(MobileUserCardAddress, { children: [addressCopied ? i18n.addressCopied : shortAddress, _jsx(MobileUserCardCopyButton, { onClick: copyAddress, "aria-label": "Copy address", children: _jsx(CopyIcon, {}) })] }), renderBalanceAndChain()] })] }), _jsx(UserCardDivider, {}), _jsx(UserCardMenu, { children: renderMenuItems() })] }))] }));
+});
+UserCardPanel.displayName = 'UserCardPanel';
+export { UserCardPanel };
+//# sourceMappingURL=UserCardPanel.js.map

package/dist/components/Navbar/UserCardPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCardPanel.js","sourceRoot":"","sources":["../../../src/components/Navbar/UserCardPanel.tsx"],"names":[],"mappings":"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"}

package/dist/components/Navbar/UserCardPanel.styled.d.ts

@@ -0,0 +1,133 @@
+declare const AvatarButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const AvatarImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+declare const UserCardWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const UserCard: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const UserCardAvatarContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const UserCardAvatarBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+declare const UserCardMenu: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const UserCardName: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const UserCardAddressLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const UserCardAddress: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const UserCardCopyButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const UserCardMenuItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+declare const UserCardDivider: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const UserCardLogout: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const ChainOption: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    selected?: boolean;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const MobileUserCard: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const MobileUserCardTop: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const MobileUserCardAvatar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const MobileUserCardInfo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const MobileUserCardName: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const MobileUserCardAddressLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const MobileUserCardAddress: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const MobileUserCardCopyButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const UserCardChainOptions: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const BalanceAndChainRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const ManaBalancesGroup: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const ManaBalanceClickable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    clickable?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const ManaBalanceValue: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const ChainPillContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const ChainPillButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const ChainPillIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const ChainPillText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export { AvatarButton, AvatarImage, BalanceAndChainRow, ChainOption, ChainPillButton, ChainPillContainer, ChainPillIconWrapper, ChainPillText, ManaBalanceClickable, ManaBalanceValue, ManaBalancesGroup, MobileUserCard, MobileUserCardAddress, MobileUserCardAddressLabel, MobileUserCardAvatar, MobileUserCardCopyButton, MobileUserCardInfo, MobileUserCardName, MobileUserCardTop, UserCard, UserCardAddress, UserCardAddressLabel, UserCardAvatarBody, UserCardAvatarContainer, UserCardChainOptions, UserCardCopyButton, UserCardDivider, UserCardLogout, UserCardMenu, UserCardMenuItem, UserCardName, UserCardWrapper };