From 2b105fb522c814c1895b3efbdd702995cd725877 Mon Sep 17 00:00:00 2001 From: Bill He Date: Mon, 18 Sep 2023 21:58:30 -0700 Subject: [PATCH] Onboarding error handling --- src/hooks/useLocalNotifications.tsx | 7 ++- src/hooks/useNotificationTypes.tsx | 46 +++++++++++++++---- src/views/TransferStatus.tsx | 15 ++++++ src/views/TransferStatusSteps.tsx | 2 +- .../AccountManagementForms/DepositForm.tsx | 8 +--- 5 files changed, 61 insertions(+), 17 deletions(-) diff --git a/src/hooks/useLocalNotifications.tsx b/src/hooks/useLocalNotifications.tsx index 4c2d600..a4b7352 100644 --- a/src/hooks/useLocalNotifications.tsx +++ b/src/hooks/useLocalNotifications.tsx @@ -66,11 +66,14 @@ const useLocalNotificationsContext = () => { } of transferNotifications) { try { if (currentStatus && currentStatus?.squidTransactionStatus !== 'ongoing') continue; - + const status = await squid?.getStatus({ transactionId: txHash, toChainId, fromChainId }); if (status) statuses[txHash] = status; } catch (error) { - console.error(error); + // ignore not found errors since the route might not be available yet + if (error?.errors?.length && error.errors[0].errorType !== 'NotFoundError') { + statuses[txHash] = error; + } } } return statuses; diff --git a/src/hooks/useNotificationTypes.tsx b/src/hooks/useNotificationTypes.tsx index 9eacc54..280c3f1 100644 --- a/src/hooks/useNotificationTypes.tsx +++ b/src/hooks/useNotificationTypes.tsx @@ -1,7 +1,9 @@ import { useCallback, useEffect, useMemo } from 'react'; +import styled, { type AnyStyledComponent } from 'styled-components'; import { useSelector, shallowEqual, useDispatch } from 'react-redux'; import { groupBy } from 'lodash'; +import { AlertType } from '@/constants/alerts'; import { AbacusOrderStatus, ORDER_SIDES, ORDER_STATUS_STRINGS } from '@/constants/abacus'; import { DialogTypes } from '@/constants/dialogs'; import { STRING_KEYS } from '@/constants/localization'; @@ -10,6 +12,7 @@ import { ORDER_SIDE_STRINGS, TRADE_TYPE_STRINGS, TradeTypes } from '@/constants/ import { useLocalNotifications } from '@/hooks/useLocalNotifications'; +import { AlertMessage } from '@/components/AlertMessage'; import { Icon, IconName } from '@/components/Icon'; import { Output, OutputType } from '@/components/Output'; import { TransferStatusToast } from '@/views/TransferStatus'; @@ -119,19 +122,33 @@ export const notificationTypes = [ const { toChainId, status, txHash, toAmount } = transfer; const finished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing'; const type = toChainId === TESTNET_CHAIN_ID ? 'deposit' : 'withdraw'; + // @ts-ignore status.errors is not in the type definition but can be returned + const error = status?.errors?.length ? status?.errors[0] : status?.error; + + // TODO: confirm with design what the description should be + const description = ( +
+ + {type === 'deposit' ? 'Deposit of ' : 'Withdraw of'}{' '} + + + + {error && ( + + {stringGetter({ + key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE, + })} + + )} +
+ ); trigger( txHash, { icon: , title: stringGetter({ key: getTitleStringKey(type, finished) }), - // TODO: confirm with design what the description should be - description: ( - <> - {type === 'deposit' ? 'Deposit of ' : 'Withdraw of'} - - - ), + description: description, customContent: ( ), - customMenuContent: !finished && , + customMenuContent: !finished && ( +
+ {description} + +
+ ), toastSensitivity: 'foreground', }, [] @@ -149,3 +171,11 @@ export const notificationTypes = [ }, }, ] satisfies NotificationTypeConfig[]; + +const Styled: Record = {}; + +Styled.TransferText = styled.span` + display: inline-flex; + align-items: center; + gap: 0.5ch; +` diff --git a/src/views/TransferStatus.tsx b/src/views/TransferStatus.tsx index 37fcc00..6f3bb06 100644 --- a/src/views/TransferStatus.tsx +++ b/src/views/TransferStatus.tsx @@ -7,9 +7,11 @@ import { StatusResponse } from '@0xsquid/sdk'; import { useInterval, useStringGetter } from '@/hooks'; import { STRING_KEYS } from '@/constants/localization'; +import { AlertType } from '@/constants/alerts'; import { formatSeconds } from '@/lib/timeUtils'; +import { AlertMessage } from '@/components/AlertMessage'; import { Output, OutputType } from '@/components/Output'; import { WithReceipt } from '@/components/WithReceipt'; import { Icon, IconName } from '@/components/Icon'; @@ -33,6 +35,9 @@ export const TransferStatusToast = ({ const [open, setOpen] = useState(false); const [secondsLeft, setSecondsLeft] = useState(); + // @ts-ignore status.errors is not in the type definition but can be returned + const error = status?.errors?.length ? status?.errors[0] : status?.error; + const type = useMemo( () => (status?.toChain?.chainData?.chainId === TESTNET_CHAIN_ID ? 'deposit' : 'withdrawal'), [status] @@ -74,6 +79,16 @@ export const TransferStatusToast = ({ }, })} + {error && ( + + {stringGetter({ + key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE, + params: { + ERROR_MESSAGE: error.message || stringGetter({ key: STRING_KEYS.UNKNOWN_ERROR }), + }, + })} + + )} diff --git a/src/views/TransferStatusSteps.tsx b/src/views/TransferStatusSteps.tsx index 1d01aed..17bc419 100644 --- a/src/views/TransferStatusSteps.tsx +++ b/src/views/TransferStatusSteps.tsx @@ -59,7 +59,7 @@ export const TransferStatusSteps = ({ status }: ElementProps) => { }, ]; - const currentStatus = routeStatus[routeStatus?.length - 1]; + const currentStatus = routeStatus ? routeStatus[routeStatus?.length - 1] : undefined; let currentStep = TransferStatusStep.Bridge; diff --git a/src/views/forms/AccountManagementForms/DepositForm.tsx b/src/views/forms/AccountManagementForms/DepositForm.tsx index bc613f7..17f2163 100644 --- a/src/views/forms/AccountManagementForms/DepositForm.tsx +++ b/src/views/forms/AccountManagementForms/DepositForm.tsx @@ -38,6 +38,7 @@ import { getTransferInputs } from '@/state/inputsSelectors'; import abacusStateManager from '@/lib/abacus'; import { MustBigNumber } from '@/lib/numbers'; import { log } from '@/lib/telemetry'; +import { parseWalletError } from '@/lib/wallet'; import { ChainSelectMenu } from './ChainSelectMenu'; import { TokenSelectMenu } from './TokenSelectMenu'; @@ -286,12 +287,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => { const errorMessage = useMemo(() => { if (error) { - return error?.message - ? stringGetter({ - key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE, - params: { ERROR_MESSAGE: error.message }, - }) - : stringGetter({ key: STRING_KEYS.SOMETHING_WENT_WRONG }); + return parseWalletError({ error, stringGetter }).message; } if (fromAmount) {