Skip to content

Commit

Permalink
feat(bridge-ui-v2): add title to toast (#14962)
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaodino
xiaodino authored Oct 18, 2023
1 parent 06f531a commit 91ff244
Show file tree
Hide file tree
Showing 16 changed files with 214 additions and 124 deletions.
8 changes: 8 additions & 0 deletions packages/bridge-ui-v2/src/app.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,11 @@ export const transactionConfig = {
pageSizeMobile: 4,
blurTransitionTime: 300,
};

export const toastConfig = {
duration: 5000,
};

export const apiService = {
timeout: 5000,
};
4 changes: 2 additions & 2 deletions packages/bridge-ui-v2/src/components/AccountConnectionToast/AccountConnectionToast.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')});
}
}
</script>
Expand Down
4 changes: 2 additions & 2 deletions packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
$insufficientAllowance = true;
break;
case err instanceof RevertedWithFailedError:
warningToast($t('messages.network.rejected'));
warningToast({title: $t('messages.network.rejected')});
break;
}
} finally {
Expand Down Expand Up @@ -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;
}
Expand Down
78 changes: 43 additions & 35 deletions packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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();
Expand All @@ -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')});
}
}
}
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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')});
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')});
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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;
Expand Down
26 changes: 12 additions & 14 deletions packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
15 changes: 11 additions & 4 deletions packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<TypeToast, IconType> = {
Expand Down Expand Up @@ -59,14 +60,20 @@
alertClassMap[type],
);
const messageClasses = classNames('callout-regular', messageClassMap[type]);
const messageClasses = classNames(messageClassMap[type]);
</script>

<div role="alert" class={alertClasses}>
<div class="grid grid-cols-[24px_auto] items-center space-x-2">
<Icon type={iconTypeMap[type]} size={24} fillClass={alertIconClassMap[type]} />
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
<div class={messageClasses}>{@html message}</div>
<div class={messageClasses}>
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
<div class='callout-bold leading-[24px]'>{@html title}</div>
{#if message}
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
<div class='callout-regular'>{@html message}</div>
{/if}
</div>
</div>
<button class="ml-6" on:click={close}>
<Icon type="x-close" size={24} fillClass={iconCloseClassMap[type]} />
Expand Down
Loading

1 comment on commit 91ff244

@vercel
Copy link

@vercel vercel bot commented on 91ff244 Oct 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

bridge-ui-v2-internal – ./packages/bridge-ui-v2

bridge-ui-v2-internal-taikoxyz.vercel.app
bridge-ui-v2-internal.vercel.app
bridge-ui-v2-internal-git-main-taikoxyz.vercel.app

Please sign in to comment.