import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled from "styled-components";
import { t } from "ttag";
import Assets from "../../assets";
import Icons from "../icons";
import { Row, Col, Box } from "../grid";
import Text from "../text";
import ScreenView from "../screen-view";
const AssetWrapper = styled.div `
  > svg {
    width: 36px;
    height: 36px;
  }
`;
const Asset = ({ icon, token, chainName }) => {
    return (_jsxs(_Fragment, { children: [_jsx(ScreenView.Large, { children: _jsxs(Row, { children: [_jsx(Col, { width: "44px", children: _jsx(Box, { pr: "8px", className: "table__icon", children: _jsx(AssetWrapper, { children: icon }) }) }), _jsxs(Col, { width: "80px", children: [_jsx(Text.T4, { children: token.toUpperCase() }), _jsx(Text.F2, { className: "subscript", children: chainName })] })] }) }), _jsx(ScreenView.NotLarge, { children: _jsxs(Row, { className: "mobile-table__asset-header", children: [_jsx(Col, { width: "40px", children: _jsx(Box, { className: "mobile-table__icon", p: "8px", children: icon }) }), _jsx(Col, { className: "mobile-table__asset-name", width: "118px", children: _jsx(Text.F2, { children: token }) }), _jsx(Col, { className: "mobile-table__asset-name", width: "118px", children: _jsx(Text.F2, { children: chainName }) })] }) })] }));
};
export default Object.assign(Asset, {
    Btc: () => (_jsx(Asset, { icon: _jsx(Assets.Bitcoin, {}), token: "Btc", chainName: t `Bitcoin` })),
    Bnb: () => _jsx(Asset, { icon: _jsx(Assets.BNB, {}), token: "Bnb", chainName: t `Binance` }),
    Busd: () => _jsx(Asset, { icon: _jsx(Icons.Busd, {}), token: "Busd", chainName: t `BUSD` }),
    Crv: () => _jsx(Asset, { icon: _jsx(Assets.Crv, {}), token: "Crv", chainName: t `Curve` }),
    Dai: () => (_jsx(Asset, { icon: _jsx(Assets.Usd, {}), token: "Dai", chainName: t `MakerDAO` })),
    Dot: () => (_jsx(Asset, { icon: _jsx(Assets.Dot, {}), token: "Dot", chainName: t `Polkadot` })),
    Hdot: () => (_jsx(Asset, { icon: _jsx(Assets.Dot, {}), token: "Hdot", chainName: t `Huobi DOT` })),
    Xdot: () => (_jsx(Asset, { icon: _jsx(Assets.Dot, {}), token: "Xdot", chainName: t `Fluid xDOT` })),
    Xdot2: () => (_jsx(Asset, { icon: _jsx(Assets.Dot, {}), token: "Xdot2", chainName: t `Fluid xDOT` })),
    Eth: () => (_jsx(Asset, { icon: _jsx(Assets.Eth, {}), token: "Eth", chainName: t `Ethereum` })),
    Eos: () => _jsx(Asset, { icon: _jsx(Assets.Eos, {}), token: "Eos", chainName: t `EOS` }),
    Eq: () => (_jsx(Asset, { icon: _jsx(Assets.EQ, {}), token: "Eq", chainName: t `Equilibrium` })),
    Eqd: () => _jsx(Asset, { icon: _jsx(Assets.Eqd, {}), token: "Eqd", chainName: t `EQD` }),
    Gens: () => (_jsx(Asset, { icon: _jsx(Assets.GENS, {}), token: "Gens", chainName: t `Genshiro` })),
    Ksm: () => _jsx(Asset, { icon: _jsx(Assets.Ksm, {}), token: "Ksm", chainName: t `Kusama` }),
    Usd: () => _jsx(Asset, { icon: _jsx(Assets.Usd, {}), token: "Usd", chainName: t `USD` }),
    Usdc: () => _jsx(Asset, { icon: _jsx(Icons.Usdc, {}), token: "Usdc", chainName: t `USDC` }),
    Usdt: () => _jsx(Asset, { icon: _jsx(Icons.Usdt, {}), token: "Usdt", chainName: t `USDT` }),
    Wbtc: () => (_jsx(Asset, { icon: _jsx(Assets.Wbtc, {}), token: "Wbtc", chainName: t `Wrapped BTC` })),
    Lpt0: () => _jsx(Asset, { icon: _jsx(Assets.Lpt0, {}), token: "Lpt0", chainName: t `LPT0` }),
    // TODO Lpt(n) probably use proxy
});
//# sourceMappingURL=index.js.map