From efc1e180491754520ec243fe3ca2c05ae0dbc548 Mon Sep 17 00:00:00 2001 From: maciek Date: Thu, 26 Jan 2023 15:14:34 +0100 Subject: [PATCH] chore: improve handling wallet errors in connection dialog - display also WalletClientErrors --- .../json-rpc-connector-form.tsx | 20 ++++---- .../src/connectors/json-rpc-connector.ts | 51 +++++++++---------- libs/wallet/src/connectors/vega-connector.ts | 10 ++-- libs/wallet/src/provider.tsx | 4 +- libs/wallet/src/use-json-rpc-connect.ts | 6 +-- .../src/use-vega-transaction-manager.tsx | 6 +-- libs/wallet/src/use-vega-transaction.tsx | 11 +--- .../vega-transaction-dialog.tsx | 11 ++-- 8 files changed, 55 insertions(+), 64 deletions(-) diff --git a/libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx b/libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx index d8892dd5b..62abcf658 100644 --- a/libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx +++ b/libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx @@ -156,17 +156,18 @@ const Error = ({ const { VEGA_DOCS_URL } = useEnvironment(); if (error) { - const errorData = Array.isArray(error.data) - ? error.data - : error.data - ? [error.data] - : []; if (error.code === ClientErrors.NO_SERVICE.code) { title = t('No wallet detected'); - text = t(`No wallet application running at ${connectorUrl}`); + text = t( + 'No wallet application running at %s', + connectorUrl || 'unknown host' + ); } 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}".`; + text = t( + 'To complete your wallet connection, set your wallet network in your app to "%s".', + appChainId + ); } else if (error.code === ServiceErrors.CONNECTION_DECLINED) { title = t('Connection declined'); text = t('Your wallet connection was rejected'); @@ -174,7 +175,7 @@ const Error = ({ title = error.message; text = ( <> - {capitalize(errorData.join(' '))} + {capitalize(error.data)} {'. '} {VEGA_DOCS_URL && ( {errorData.map((str, i) => ( @@ -208,7 +210,7 @@ const Error = ({ ); } else { title = error.message; - text = `${errorData.length ? errorData.join(' ') : text} (${error.code})`; + text = `${error.data || text} (${error.code})`; } } diff --git a/libs/wallet/src/connectors/json-rpc-connector.ts b/libs/wallet/src/connectors/json-rpc-connector.ts index 1c2763bae..d8762b5a9 100644 --- a/libs/wallet/src/connectors/json-rpc-connector.ts +++ b/libs/wallet/src/connectors/json-rpc-connector.ts @@ -8,8 +8,6 @@ const VERSION = 'v2'; export const ClientErrors = { NO_SERVICE: new WalletError(t('No service'), 100), - NO_TOKEN: new WalletError(t('No token'), 101), - INVALID_RESPONSE: new WalletError(t('Something went wrong'), 102), INVALID_WALLET: new WalletError(t('Wallet version invalid'), 103), WRONG_NETWORK: new WalletError( t('Wrong network'), @@ -22,11 +20,6 @@ export const ClientErrors = { t('Unknown error occurred') ), NO_CLIENT: new WalletError(t('No client found.'), 106), - REQUEST_REJECTED: new WalletError( - t('Request rejected'), - 107, - t('The request has been rejected by the user') - ), } as const; export class JsonRpcConnector implements VegaConnector { @@ -79,7 +72,11 @@ export class JsonRpcConnector implements VegaConnector { const { result } = await this.client.GetChainId(); return result; } catch (err) { - throw ClientErrors.INVALID_RESPONSE; + const { + code = ClientErrors.UNKNOWN.code, + message = ClientErrors.UNKNOWN.message, + } = err as WalletClientError; + throw new WalletError(message, code); } } @@ -92,11 +89,11 @@ export class JsonRpcConnector implements VegaConnector { await this.client.ConnectWallet(); return null; } catch (err) { - const clientErr = - err instanceof WalletClientError && err.code === 3001 - ? ClientErrors.REQUEST_REJECTED - : ClientErrors.INVALID_RESPONSE; - throw clientErr; + const { + code = ClientErrors.UNKNOWN.code, + message = ClientErrors.UNKNOWN.message, + } = err as WalletClientError; + throw new WalletError(message, code); } } @@ -111,7 +108,11 @@ export class JsonRpcConnector implements VegaConnector { const { result } = await this.client.ListKeys(); return result.keys; } catch (err) { - throw ClientErrors.INVALID_RESPONSE; + const { + code = ClientErrors.UNKNOWN.code, + message = ClientErrors.UNKNOWN.message, + } = err as WalletClientError; + throw new WalletError(message, code); } } @@ -148,22 +149,20 @@ export class JsonRpcConnector implements VegaConnector { const result = await fetch(`${this._url}/api/${this.version}/methods`); if (!result.ok) { const err = ClientErrors.INVALID_WALLET; - err.data = [ - t( - 'The version of the wallet service running at %s is not supported.', - this._url as string - ), - t("It doesn't expose the API version %s.", this.version), - t( - 'Update the wallet software to a version that expose the API version %s.', - this.version - ), - ]; + const sent1 = t( + 'The version of the wallet service running at %s is not supported.', + this._url as string + ); + const sent2 = t( + 'Update the wallet software to a version that expose the API version %s.', + this.version + ); + err.data = `${sent1}\n ${sent2}`; throw err; } return true; } catch (err) { - if (err instanceof WalletError) { + if (err instanceof WalletClientError) { throw err; } diff --git a/libs/wallet/src/connectors/vega-connector.ts b/libs/wallet/src/connectors/vega-connector.ts index 9e3d27906..e64d2fe12 100644 --- a/libs/wallet/src/connectors/vega-connector.ts +++ b/libs/wallet/src/connectors/vega-connector.ts @@ -1,3 +1,4 @@ +import { WalletClientError } from '@vegaprotocol/wallet-client'; import type * as Schema from '@vegaprotocol/types'; export interface DelegateSubmissionBody { @@ -329,12 +330,13 @@ export interface TransactionResponse { receivedAt: string; sentAt: string; } -export class WalletError { - message: string; - code: number; - data?: string | string[]; +export class WalletError extends WalletClientError { + override message: string; + override code: number; + data?: string; constructor(message: string, code: number, data?: string) { + super({ code, message, data: data || '' }); this.message = message; this.code = code; this.data = data; diff --git a/libs/wallet/src/provider.tsx b/libs/wallet/src/provider.tsx index 07b049fae..2d2c3c4cc 100644 --- a/libs/wallet/src/provider.tsx +++ b/libs/wallet/src/provider.tsx @@ -1,6 +1,7 @@ import { LocalStorage } from '@vegaprotocol/react-helpers'; import type { ReactNode } from 'react'; import { useCallback, useMemo, useRef, useState } from 'react'; +import { WalletClientError } from '@vegaprotocol/wallet-client'; import type { VegaWalletContextShape } from '.'; import type { PubKey, @@ -9,7 +10,6 @@ import type { } from './connectors/vega-connector'; import { VegaWalletContext } from './context'; import { WALLET_KEY } from './storage'; -import { WalletError } from './connectors/vega-connector'; import { ViewConnector } from './connectors'; interface VegaWalletProviderProps { @@ -53,7 +53,7 @@ export const VegaWalletProvider = ({ children }: VegaWalletProviderProps) => { return null; } } catch (err) { - if (err instanceof WalletError) { + if (err instanceof WalletClientError) { throw err; } return null; diff --git a/libs/wallet/src/use-json-rpc-connect.ts b/libs/wallet/src/use-json-rpc-connect.ts index 2bf2939a9..c715a6c13 100644 --- a/libs/wallet/src/use-json-rpc-connect.ts +++ b/libs/wallet/src/use-json-rpc-connect.ts @@ -1,7 +1,7 @@ import { useCallback, useState } from 'react'; +import { WalletClientError } from '@vegaprotocol/wallet-client'; import type { JsonRpcConnector } from './connectors'; import { ClientErrors } from './connectors'; -import { WalletError } from './connectors'; import { useVegaWallet } from './use-vega-wallet'; export enum Status { @@ -18,7 +18,7 @@ export enum Status { export const useJsonRpcConnect = (onConnect: () => void) => { const { connect } = useVegaWallet(); const [status, setStatus] = useState(Status.Idle); - const [error, setError] = useState(null); + const [error, setError] = useState(null); const attemptConnect = useCallback( async (connector: JsonRpcConnector, appChainId: string) => { @@ -56,7 +56,7 @@ export const useJsonRpcConnect = (onConnect: () => void) => { setStatus(Status.Connected); onConnect(); } catch (err) { - if (err instanceof WalletError) { + if (err instanceof WalletClientError) { setError(err); } setStatus(Status.Error); diff --git a/libs/wallet/src/use-vega-transaction-manager.tsx b/libs/wallet/src/use-vega-transaction-manager.tsx index 67f0cd488..0c5b82a3f 100644 --- a/libs/wallet/src/use-vega-transaction-manager.tsx +++ b/libs/wallet/src/use-vega-transaction-manager.tsx @@ -1,7 +1,6 @@ import { useVegaWallet } from './use-vega-wallet'; import { useEffect, useRef } from 'react'; import { ClientErrors } from './connectors'; -import { WalletError } from './connectors'; import { VegaTxStatus } from './use-vega-transaction'; import { useVegaTransactionStore } from './use-vega-transaction-store'; import { WalletClientError } from '@vegaprotocol/wallet-client'; @@ -40,10 +39,7 @@ export const useVegaTransactionManager = () => { }) .catch((err) => { update(transaction.id, { - error: - err instanceof WalletError || err instanceof WalletClientError - ? err - : ClientErrors.UNKNOWN, + error: err instanceof WalletClientError ? err : ClientErrors.UNKNOWN, status: VegaTxStatus.Error, }); }); diff --git a/libs/wallet/src/use-vega-transaction.tsx b/libs/wallet/src/use-vega-transaction.tsx index 118962d93..1821867a0 100644 --- a/libs/wallet/src/use-vega-transaction.tsx +++ b/libs/wallet/src/use-vega-transaction.tsx @@ -6,8 +6,6 @@ import { VegaTransactionDialog } from './vega-transaction-dialog'; import type { Intent } from '@vegaprotocol/ui-toolkit'; import type { Transaction } from './connectors'; import { ClientErrors } from './connectors'; -import { WalletError } from './connectors'; -import type { WalletClientError } from '@vegaprotocol/wallet-client'; export interface DialogProps { intent?: Intent; @@ -26,7 +24,7 @@ export enum VegaTxStatus { export interface VegaTxState { status: VegaTxStatus; - error: WalletError | WalletClientError | Error | null; + error: Error | null; txHash: string | null; signature: string | null; dialogOpen: boolean; @@ -90,12 +88,7 @@ export const useVegaTransaction = () => { return null; } catch (err) { - const error = - err instanceof WalletError - ? err - : err instanceof Error - ? err - : ClientErrors.UNKNOWN; + const error = err instanceof Error ? err : ClientErrors.UNKNOWN; setTransaction({ error: error, status: VegaTxStatus.Error, diff --git a/libs/wallet/src/vega-transaction-dialog/vega-transaction-dialog.tsx b/libs/wallet/src/vega-transaction-dialog/vega-transaction-dialog.tsx index 641b7ba19..966a9d08f 100644 --- a/libs/wallet/src/vega-transaction-dialog/vega-transaction-dialog.tsx +++ b/libs/wallet/src/vega-transaction-dialog/vega-transaction-dialog.tsx @@ -2,7 +2,8 @@ import { Networks, useEnvironment } from '@vegaprotocol/environment'; import { t } from '@vegaprotocol/react-helpers'; import { Dialog, Icon, Intent, Loader } from '@vegaprotocol/ui-toolkit'; import type { ReactNode } from 'react'; -import { WalletError } from '../connectors'; +import { WalletClientError } from '@vegaprotocol/wallet-client'; +import type { WalletError } from '../connectors'; import type { VegaTxState } from '../use-vega-transaction'; import { VegaTxStatus } from '../use-vega-transaction'; @@ -109,14 +110,12 @@ export const VegaDialog = ({ transaction }: VegaDialogProps) => { if (transaction.status === VegaTxStatus.Error) { content = (
- {transaction.error instanceof WalletError && ( + {transaction.error instanceof WalletClientError && (

- {transaction.error.message}: {transaction.error.data} + {transaction.error.message}:{' '} + {(transaction.error as WalletError).data || ''}

)} - {transaction.error instanceof Error && ( -

{transaction.error.message}

- )}
); }