import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default from 'react';
import { useCryptoButtonProps, WalletToText } from '../../../../utils/crypto.mjs';
import Button, { ButtonAnchor } from '../../../components/atoms/Button.mjs';
import Column from '../../../components/atoms/Column.mjs';
import ButtonColumn from '../../../components/molecules/ButtonColumn.mjs';
import TextColumn from '../../../components/molecules/TextColumn.mjs';
import { useGlobalReducer, AppScreens } from '../../GlobalContextProvider.mjs';
import { Wallets } from '../../../../../../core/src/public/ui.mjs';

const SetupNewWallet = ()=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const [, dispatch] = useGlobalReducer();
    const { getIcon, getId } = useCryptoButtonProps();
    const walletsToRender = [
        Wallets.Metamask,
        Wallets.Phantom,
        Wallets.Coinbase,
        Wallets.Binance
    ];
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6
    }, /*#__PURE__*/ React__default.createElement(TextColumn, {
        header: $__i18n._({
            id: "crypto.setupNewWallet.title",
            message: "Set up a new crypto wallet"
        }),
        body: $__i18n._({
            id: "crypto.setupNewWallet.content",
            message: "Get started by downloading any Ethereum or Solana wallet."
        }),
        helper: $__i18n._({
            id: "crypto.setupNewWallet.instruction",
            message: "We’ve included a few examples of wallet extensions you can find below. Once you’ve set up your wallet, click “Go back” to use it and sign in."
        })
    }), /*#__PURE__*/ React__default.createElement(ButtonColumn, null, walletsToRender.map((wallet)=>{
        const Icon = getIcon(wallet);
        return /*#__PURE__*/ React__default.createElement(ButtonAnchor, {
            key: wallet,
            variant: "outline",
            target: "_blank",
            rel: "noreferrer",
            icon: /*#__PURE__*/ React__default.createElement(Icon, null),
            href: "https://metamask.io/",
            id: getId(wallet)
        }, $__i18n._(WalletToText[wallet]));
    }), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "primary",
        onClick: ()=>dispatch({
                type: 'transition',
                screen: AppScreens.Main
            })
    }, $__i18n._({
        id: "button.goBack",
        message: "Go back"
    }))));
};

export { SetupNewWallet };
//# sourceMappingURL=SetupNewWallet.mjs.map
