@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
75 lines • 4.95 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { getConnectorIcon, useAccount, useWalletMenu, } from '@lifi/wallet-management';
import ExpandMore from '@mui/icons-material/ExpandMore';
import Wallet from '@mui/icons-material/Wallet';
import { Avatar, Badge } from '@mui/material';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useChain } from '../../hooks/useChain.js';
import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js';
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
import { useFieldValues } from '../../stores/form/useFieldValues.js';
import { HiddenUI } from '../../types/widget.js';
import { shortenAddress } from '../../utils/wallet.js';
import { SmallAvatar } from '../Avatar/SmallAvatar.js';
import { CloseDrawerButton } from './CloseDrawerButton.js';
import { DrawerWalletContainer, HeaderAppBar, WalletAvatar, WalletButton, } from './Header.style.js';
import { WalletMenu } from './WalletMenu.js';
import { WalletMenuContainer } from './WalletMenu.style.js';
const useInternalWalletManagement = () => {
const { hiddenUI } = useWidgetConfig();
const { useExternalWalletProvidersOnly } = useExternalWalletProvider();
const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu);
const shouldShowWalletMenu = !useExternalWalletProvidersOnly && !isWalletMenuHidden;
return {
shouldShowWalletMenu,
};
};
export const WalletHeader = () => {
const { shouldShowWalletMenu } = useInternalWalletManagement();
return shouldShowWalletMenu ? (_jsx(HeaderAppBar, { elevation: 0, sx: { justifyContent: 'flex-end' }, children: _jsx(WalletMenuButton, {}) })) : null;
};
const WalletMenuButton = () => {
const { variant, hiddenUI } = useWidgetConfig();
const { account, accounts } = useAccount();
const [fromChainId] = useFieldValues('fromChain');
const { chain: fromChain } = useChain(fromChainId);
const activeAccount = (fromChain
? accounts.find((account) => account.chainType === fromChain.chainType)
: undefined) || account;
if (variant === 'drawer') {
return (_jsxs(DrawerWalletContainer, { children: [activeAccount.isConnected ? (_jsx(ConnectedButton, { account: activeAccount })) : (_jsx(ConnectButton, {})), !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (_jsx(CloseDrawerButton, { header: "wallet" })) : null] }));
}
return activeAccount.isConnected ? (_jsx(ConnectedButton, { account: activeAccount })) : (_jsx(ConnectButton, {}));
};
const ConnectButton = () => {
const { t } = useTranslation();
const { walletConfig, variant } = useWidgetConfig();
const { openWalletMenu } = useWalletMenu();
const connect = async (event) => {
if (!walletConfig?.usePartialWalletManagement &&
!walletConfig?.forceInternalWalletManagement &&
walletConfig?.onConnect) {
walletConfig.onConnect();
return;
}
openWalletMenu();
event.currentTarget.blur(); // Remove focus to prevent accessibility issues when opening drawer
};
const walletPosition = variant === 'drawer' ? 'start' : 'end';
return (_jsx(WalletButton, { withOffset: walletPosition === 'end', endIcon: walletPosition === 'end' ? _jsx(Wallet, {}) : undefined, startIcon: walletPosition === 'start' ? (_jsx(Wallet, { sx: { marginLeft: -0.25 } })) : undefined, onClick: connect, children: t('button.connectWallet') }));
};
const ConnectedButton = ({ account }) => {
const { chain } = useChain(account.chainId);
const [anchorEl, setAnchorEl] = useState(null);
const walletAddress = shortenAddress(account.address);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
event.currentTarget.blur(); // Remove focus to prevent accessibility issues when opening drawer
};
const handleClose = () => {
setAnchorEl(null);
};
return (_jsxs(_Fragment, { children: [_jsx(WalletButton, { withOffset: true, endIcon: _jsx(ExpandMore, {}), startIcon: chain?.logoURI ? (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(SmallAvatar, { src: chain?.logoURI, alt: chain?.name, sx: { width: 12, height: 12 }, children: chain?.name[0] }), children: _jsx(WalletAvatar, { src: getConnectorIcon(account.connector), alt: account.connector?.name, children: account.connector?.name[0] }) })) : (_jsx(Avatar, { src: getConnectorIcon(account.connector), alt: account.connector?.name, sx: { width: 24, height: 24 }, children: account.connector?.name[0] })), onClick: handleClick, children: walletAddress }), _jsx(WalletMenuContainer, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: _jsx(WalletMenu, { onClose: handleClose }) })] }));
};
//# sourceMappingURL=WalletHeader.js.map