@reservoir0x/relay-kit-ui/_esm/src/components/common/BalanceDisplay.js

Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Flex, Skeleton, Text } from '../primitives/index.js';
import { formatBN } from '../../utils/numbers.js';
import { useAccount } from 'wagmi';
export const BalanceDisplay = ({ balance, decimals, symbol, isLoading, hasInsufficientBalance, displaySymbol = true, isConnected, pending }) => {
    const compactBalance = Boolean(balance && decimals && balance.toString().length - decimals > 4);
    if (pending) {
        return (_jsx(Flex, { css: { height: 18 }, children: _jsx(Text, { style: "subtitle3", color: 'red', children: "Balance: pending" }) }));
    }
    return (_jsx(Flex, { css: { height: 18 }, children: isConnected ? (_jsx(_Fragment, { children: isLoading ? (_jsx(Skeleton, { css: { mt: '6px' } })) : (_jsxs(Text, { style: "subtitle3", color: hasInsufficientBalance ? 'red' : 'subtleSecondary', children: ["Balance:", ' ', balance !== undefined
                        ? formatBN(balance ?? 0n, 5, decimals, compactBalance) +
                            (displaySymbol && symbol ? ` ${symbol}` : '')
                        : '-', ' '] })) })) : null }));
};
//# sourceMappingURL=BalanceDisplay.js.map