import capitalize from 'lodash/capitalize'; import { t } from '@vegaprotocol/react-helpers'; import { ButtonLink, Cross, Diamond, Link, Loader, Tick, } from '@vegaprotocol/ui-toolkit'; import type { ReactNode } from 'react'; import type { JsonRpcConnector } from '../connectors'; import { ClientErrors } from '../connectors'; import type { WalletError } from '../connectors'; import { ConnectDialogTitle } from './connect-dialog-elements'; import { Status } from '../use-json-rpc-connect'; import { VEGA_WALLET_CONCEPTS_URL } from '../constants'; export const ServiceErrors = { NO_HEALTHY_NODE: 1000, CONNECTION_DECLINED: 3001, REQUEST_PROCESSING: -32000, }; export const JsonRpcConnectorForm = ({ connector, appChainId, status, error, reset, }: { connector: JsonRpcConnector; appChainId: string; status: Status; error: WalletError | null; onConnect: () => void; reset: () => void; }) => { if (status === Status.Idle) { return null; } return ( ); }; const Connecting = ({ status, error, connector, appChainId, reset, }: { status: Status; error: WalletError | null; connector: JsonRpcConnector; appChainId: string; reset: () => void; }) => { if (status === Status.Error) { return ( ); } if (status === Status.CheckingVersion) { return ( <> {t('Checking wallet version')}

{t('Checking your wallet is compatible with this app')}

); } if (status === Status.GettingChainId) { return ( <> {t('Verifying chain')}
); } if (status === Status.Connected) { return ( <> {t('Successfully connected')}
); } if (status === Status.Connecting || status === Status.GettingPerms) { return ( <> {t('Connecting...')}

{t( "Approve the connection from your Vega wallet app. If you have multiple wallets you'll need to choose which to connect with." )}

); } if (status === Status.RequestingPerms) { return ( <> {t('Update permissions')}

{t(`${window.location.host} now has access to your Wallet, however you don't have sufficient permissions to retrieve your public keys. Got to your wallet to approve new permissions.`)}

); } return null; }; const Center = ({ children }: { children: ReactNode }) => { return (
{children}
); }; const Error = ({ error, connectorUrl, appChainId, onTryAgain, }: { error: WalletError | null; connectorUrl: string | null; appChainId: string; onTryAgain: () => void; }) => { let title = t('Something went wrong'); let text: ReactNode | undefined = t('An unknown error occurred'); let tryAgain: ReactNode | null = (

{t('Try again')}

); if (error) { if (error.code === ClientErrors.NO_SERVICE.code) { title = t('No wallet detected'); text = t(`No wallet application running at ${connectorUrl}`); } else if (error.code === ClientErrors.WRONG_NETWORK.code) { title = t('Wrong network'); text = `To complete your wallet connection, set your wallet network in your app to "${appChainId}".`; } else if (error.code === ServiceErrors.CONNECTION_DECLINED) { title = t('Connection declined'); text = t('Your wallet connection was rejected'); } else if (error.code === ServiceErrors.NO_HEALTHY_NODE) { title = error.message; text = ( <> {capitalize(error.data)} {'. '} {t('Read the docs to troubleshoot')} ); } else if (error.code === ServiceErrors.REQUEST_PROCESSING) { title = t('Connection in progress'); text = t('Approve the connection from your Vega wallet app.'); tryAgain = null; } else if (error.code === 0) { title = t('Wrong network'); text = ( <> {t(`To complete your wallet connection, set your wallet network in your app to ${appChainId}.`)} ); } else { title = error.message; text = `${error.data} (${error.code})`; } } return ( <> {title}

{text}

{tryAgain} ); };