import { useLingui } from '../../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default from 'react';
import { isSolanaWallet, connectWithWallet } from '../../../../utils/crypto.mjs';
import Button from '../../../components/atoms/Button.mjs';
import Column from '../../../components/atoms/Column.mjs';
import TextColumn from '../../../components/molecules/TextColumn.mjs';
import { useMountEffect } from '../../../hooks/useMountEffect.mjs';
import { useEventCallback, useErrorCallback, useStytch, useGlobalReducer, AppScreens } from '../../GlobalContextProvider.mjs';
import { StytchEventType } from '../../../../../../core/src/public/ui.mjs';

const ConnectWallet = ()=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const onEvent = useEventCallback();
    const onError = useErrorCallback();
    const handleError = ()=>{
        // eslint-disable-next-line lingui/no-unlocalized-strings -- This is not shown in the UI, just sent to the error callback
        onError({
            message: '[Error] Could not connect to wallet'
        });
        dispatch({
            type: 'transition',
            screen: AppScreens.CryptoError
        });
    };
    const stytchClient = useStytch();
    const [state, dispatch] = useGlobalReducer();
    const walletOption = state.formState.cryptoState.walletOption;
    const walletType = isSolanaWallet(walletOption) ? 'solana' : 'ethereum';
    const onConnectWallet = async ()=>{
        const address = await connectWithWallet({
            wallet: walletOption
        });
        stytchClient.cryptoWallets.authenticateStart({
            crypto_wallet_address: address,
            crypto_wallet_type: walletType
        }).then((data)=>{
            onEvent({
                type: StytchEventType.CryptoWalletAuthenticateStart,
                data
            });
            dispatch({
                type: 'update_crypto_state',
                cryptoState: {
                    walletAddress: address,
                    walletChallenge: data.challenge,
                    walletOption: walletOption
                }
            });
            dispatch({
                type: 'transition',
                screen: AppScreens.CryptoSignMessage
            });
        }).catch(handleError);
    };
    useMountEffect(()=>{
        onConnectWallet();
    });
    return /*#__PURE__*/ React__default.createElement(Column, {
        gap: 6
    }, /*#__PURE__*/ React__default.createElement(TextColumn, {
        header: $__i18n._({
            id: "crypto.connectWallet.title",
            message: "Connecting to your wallet..."
        }),
        body: $__i18n._({
            id: "crypto.connectWallet.instructionPopup",
            message: "Complete sign in by connecting through the wallet pop up in the right corner of your screen."
        }),
        helper: $__i18n._({
            id: "crypto.troubleHelp",
            message: "If you are having trouble, go back to the main screen and try logging in again."
        })
    }), /*#__PURE__*/ React__default.createElement(Button, {
        variant: "outline",
        onClick: ()=>dispatch({
                type: 'transition',
                screen: AppScreens.Main
            })
    }, $__i18n._({
        id: "button.goBack",
        message: "Go back"
    })));
};

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