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) {