From 91ff2446dd07354ee88e1357184ba5063bb43db6 Mon Sep 17 00:00:00 2001 From: xiaodino Date: Tue, 17 Oct 2023 21:40:46 -0700 Subject: [PATCH] feat(bridge-ui-v2): add title to toast (#14962) --- packages/bridge-ui-v2/src/app.config.ts | 8 ++ .../AccountConnectionToast.svelte | 4 +- .../src/components/Bridge/Amount.svelte | 4 +- .../src/components/Bridge/Bridge.svelte | 78 ++++++++++--------- .../Bridge/SwitchChainsButton.svelte | 4 +- .../ChainSelector/ChainSelector.svelte | 6 +- .../src/components/Faucet/Faucet.svelte | 26 +++---- .../NotificationToast/ItemToast.svelte | 15 +++- .../NotificationToast.svelte | 49 ++++++++---- .../SwitchChainModal/SwitchChainModal.svelte | 4 +- .../TokenDropdown/TokenDropdown.svelte | 4 +- .../src/components/Transactions/Status.svelte | 57 +++++++------- .../Transactions/Transactions.svelte | 2 +- packages/bridge-ui-v2/src/i18n/en.json | 71 +++++++++++++---- .../eventIndexer/EventIndexerAPIService.ts | 3 +- .../src/libs/relayer/RelayerAPIService.ts | 3 +- 16 files changed, 214 insertions(+), 124 deletions(-) diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts index 7af1819cead..391de66e504 100644 --- a/packages/bridge-ui-v2/src/app.config.ts +++ b/packages/bridge-ui-v2/src/app.config.ts @@ -47,3 +47,11 @@ export const transactionConfig = { pageSizeMobile: 4, blurTransitionTime: 300, }; + +export const toastConfig = { + duration: 5000, +}; + +export const apiService = { + timeout: 5000, +}; diff --git a/packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte b/packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte index eabcab394c6..649e43a9fed 100644 --- a/packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte +++ b/packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte @@ -9,12 +9,12 @@ // when the account is connected or disconnected via toast function onAccountChange(newAccount: Account, oldAccount?: Account) { if (newAccount?.isConnected) { - successToast($t('messages.account.connected')); + successToast({title: $t('messages.account.connected')}); } else if (oldAccount && newAccount?.isDisconnected) { // We check if there was previous account, if not // the user just hit the app, and there is no need // to show the message. - warningToast($t('messages.account.disconnected')); + warningToast({title: $t('messages.account.disconnected')}); } } diff --git a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte index b979f82a4cc..dfc47846d79 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte @@ -85,7 +85,7 @@ $insufficientAllowance = true; break; case err instanceof RevertedWithFailedError: - warningToast($t('messages.network.rejected')); + warningToast({title: $t('messages.network.rejected')}); break; } } finally { @@ -175,7 +175,7 @@ validateAmount(); } catch (err) { console.error(err); - warningToast($t('amount.errors.failed_max')); + warningToast({title: $t('amount.errors.failed_max')}); } finally { computingMaxAmount = false; } diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index aba3f29fb8d..b939f94bf52 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -153,24 +153,26 @@ const { explorer } = chainConfig[$network.id].urls; - infoToast( - $t('bridge.actions.approve.tx', { + infoToast({ + title: $t('bridge.actions.approve.tx.title'), + message: $t('bridge.actions.approve.tx.message', { values: { token: $selectedToken.symbol, url: `${explorer}/tx/${txHash}`, }, }), - ); + }); // await pendingTransactions.add(txHash, $network.id); - successToast( - $t('bridge.actions.approve.success', { + successToast({ + title: $t('bridge.actions.approve.success.title'), + message: $t('bridge.actions.approve.success.message', { values: { token: $selectedToken.symbol, }, }), - ); + }); } if ($selectedToken.type === TokenType.ERC1155) { const erc1155Bridge = bridges[$selectedToken.type] as ERC1155Bridge; @@ -197,24 +199,26 @@ const { explorer } = chainConfig[$network.id].urls; - infoToast( - $t('bridge.actions.approve.tx', { + infoToast({ + title: $t('bridge.actions.approve.tx.title'), + message: $t('bridge.actions.approve.tx.message', { values: { token: $selectedToken.symbol, url: `${explorer}/tx/${txHash}`, }, }), - ); + }); await pendingTransactions.add(txHash, $network.id); - successToast( - $t('bridge.actions.approve.success', { + successToast({ + title: $t('bridge.actions.approve.success.title'), + message: $t('bridge.actions.approve.success.message', { values: { token: $selectedToken.symbol, }, }), - ); + }); } if ($selectedToken.type === TokenType.ERC20) { const erc20Bridge = bridges.ERC20 as ERC20Bridge; @@ -241,24 +245,26 @@ const { explorer } = chainConfig[$network.id].urls; - infoToast( - $t('bridge.actions.approve.tx', { + infoToast({ + title: $t('bridge.actions.approve.tx.title'), + message: $t('bridge.actions.approve.tx.message', { values: { token: $selectedToken.symbol, url: `${explorer}/tx/${txHash}`, }, }), - ); + }); await pendingTransactions.add(txHash, $network.id); - successToast( - $t('bridge.actions.approve.success', { + successToast({ + title: $t('bridge.actions.approve.success.title'), + message: $t('bridge.actions.approve.success.message', { values: { token: $selectedToken.symbol, }, }), - ); + }); // Let's run the validation again, which will update UI amountComponent.validateAmount(); @@ -268,20 +274,20 @@ switch (true) { case err instanceof UserRejectedRequestError: - warningToast($t('bridge.errors.rejected')); + warningToast({title: $t('bridge.errors.rejected')}); break; case err instanceof NoAllowanceRequiredError: - errorToast($t('bridge.errors.no_allowance_required')); + errorToast({title: $t('bridge.errors.no_allowance_required')}); break; case err instanceof InsufficientAllowanceError: - errorToast($t('bridge.errors.insufficient_allowance')); + errorToast({title: $t('bridge.errors.insufficient_allowance')}); break; case err instanceof ApproveError: // TODO: see contract for all possible errors - errorToast($t('bridge.errors.approve_error')); + errorToast({title: $t('bridge.errors.approve_error')}); break; default: - errorToast($t('bridge.errors.unknown_error')); + errorToast({title: $t('bridge.errors.unknown_error')}); } } } @@ -404,24 +410,26 @@ const explorer = chainConfig[bridgeArgs.srcChainId].urls.explorer; - infoToast( - $t('bridge.actions.bridge.tx', { + infoToast({ + title: $t('bridge.actions.bridge.tx.title'), + message: $t('bridge.actions.bridge.tx.message', { values: { token: $selectedToken.symbol, url: `${explorer}/tx/${txHash}`, }, }), - ); + }); await pendingTransactions.add(txHash, $network.id); - successToast( - $t('bridge.actions.bridge.success', { + successToast({ + title: $t('bridge.actions.bridge.success.title'), + message: $t('bridge.actions.bridge.success.message', { values: { network: $destinationChain.name, }, }), - ); + }); // Let's add it to the user's localStorage const bridgeTx = { @@ -454,26 +462,26 @@ switch (true) { case err instanceof InsufficientAllowanceError: - errorToast($t('bridge.errors.insufficient_allowance')); + errorToast({title: $t('bridge.errors.insufficient_allowance')}); break; case err instanceof SendMessageError: // TODO: see contract for all possible errors - errorToast($t('bridge.errors.send_message_error')); + errorToast({title: $t('bridge.errors.send_message_error')}); break; case err instanceof SendERC20Error: // TODO: see contract for all possible errors - errorToast($t('bridge.errors.send_erc20_error')); + errorToast({title: $t('bridge.errors.send_erc20_error')}); break; case err instanceof UserRejectedRequestError: // Todo: viem does not seem to detect UserRejectError - warningToast($t('bridge.errors.rejected')); + warningToast({title: $t('bridge.errors.rejected')}); break; case err instanceof TransactionExecutionError && err.shortMessage === 'User rejected the request.': //Todo: so we catch it by string comparison below, suboptimal - warningToast($t('bridge.errors.rejected')); + warningToast({title: $t('bridge.errors.rejected')}); break; default: - errorToast($t('bridge.errors.unknown_error')); + errorToast({title: $t('bridge.errors.unknown_error')}); } } } diff --git a/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte b/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte index 53927040add..9a59fd04510 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte @@ -16,9 +16,9 @@ } catch (err) { console.error(err); if (err instanceof SwitchChainError) { - warningToast($t('messages.network.pending')); + warningToast({title: $t('messages.network.pending')}); } else if (err instanceof UserRejectedRequestError) { - warningToast($t('messages.network.rejected')); + warningToast({title: $t('messages.network.rejected')}); } } } diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte index d3ae0434ed9..7f07a55c5e6 100644 --- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte +++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte @@ -66,7 +66,7 @@ // We want to inform the user that they need to connect // their wallet if they want to change the network if (!$account.isConnected) { - warningToast($t('messages.account.required')); + warningToast({title: $t('messages.account.required')}); return; } addEscKeyListener(); @@ -89,10 +89,10 @@ } catch (err) { console.error(err); if (err instanceof SwitchChainError) { - warningToast($t('messages.network.pending')); + warningToast({title: $t('messages.network.pending')}); } if (err instanceof UserRejectedRequestError) { - warningToast($t('messages.network.rejected')); + warningToast({title: $t('messages.network.rejected')}); } } finally { switchingNetwork = false; diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte index f88da0dea35..6b0215880e9 100644 --- a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte +++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte @@ -39,7 +39,7 @@ console.error(err); if (err instanceof UserRejectedRequestError) { - warningToast($t('messages.network.rejected')); + warningToast({title: $t('messages.network.rejected')}); } } finally { switchingNetwork = false; @@ -60,37 +60,35 @@ const txHash = await mint(selectedToken, $network.id); const explorer = chainConfig[$network.id].urls.explorer; - infoToast( - $t('faucet.mint.tx', { + infoToast({ + title: $t('faucet.mint.tx.title'), + message: $t('faucet.mint.tx.message', { values: { token: selectedToken.symbol, url: `${explorer}/tx/${txHash}`, }, }), - ); + }); await pendingTransactions.add(txHash, $network.id); - successToast( - $t('faucet.mint.success', { - values: { - token: selectedToken.symbol, - }, - }), - ); + successToast({ + title: $t('faucet.mint.success.title'), + message: $t('faucet.mint.success.message'), + }); } catch (err) { console.error(err); switch (true) { case err instanceof UserRejectedRequestError: - warningToast($t('faucet.mint.rejected')); + warningToast({title: $t('faucet.mint.rejected')}); break; case err instanceof MintError: // TODO: see contract for all possible errors - errorToast($t('faucet.mint.error')); + errorToast({title: $t('faucet.mint.error')}); break; default: - errorToast($t('faucet.mint.unknown_error')); + errorToast({title: $t('faucet.mint.unknown_error')}); break; } } finally { diff --git a/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte b/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte index 7f10d62c906..a336a189df2 100644 --- a/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte +++ b/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte @@ -6,7 +6,8 @@ import type { TypeToast } from './types'; export let type: TypeToast = 'unknown'; - export let message = ''; + export let title = ''; + export let message: string | undefined; export let close: () => void = noop; const iconTypeMap: Record = { @@ -59,14 +60,20 @@ alertClassMap[type], ); - const messageClasses = classNames('callout-regular', messageClassMap[type]); + const messageClasses = classNames(messageClassMap[type]);