Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(bridge-ui-v2): add title to toast #14962

Merged
merged 4 commits into from
Oct 18, 2023
Merged

feat(bridge-ui-v2): add title to toast #14962

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
38087a3
feat(bridge-ui-v2): add title to toast
xiaodino Oct 14, 2023
2995f9a
Update
xiaodino Oct 17, 2023
72c2bce
Update
xiaodino Oct 17, 2023
54c74bd
Resolved merged conflicts
xiaodino Oct 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,8 @@
const { explorer } = chainConfig[$network.id].urls;

infoToast(
$t('bridge.actions.approve.tx', {
$t('bridge.actions.approve.tx.title'),
$t('bridge.actions.approve.tx.message', {
values: {
token: $selectedToken.symbol,
url: `${explorer}/tx/${txHash}`,
Expand All @@ -159,7 +160,8 @@
await pendingTransactions.add(txHash, $network.id);

successToast(
$t('bridge.actions.approve.success', {
$t('bridge.actions.approve.tx.title'),
$t('bridge.actions.approve.success.message', {
values: {
token: $selectedToken.symbol,
},
Expand Down Expand Up @@ -262,7 +264,8 @@
const explorer = chainConfig[bridgeArgs.srcChainId].urls.explorer;

infoToast(
$t('bridge.actions.bridge.tx', {
$t('bridge.actions.bridge.tx.title'),
$t('bridge.actions.bridge.tx.message', {
values: {
token: $selectedToken.symbol,
url: `${explorer}/tx/${txHash}`,
Expand All @@ -273,7 +276,8 @@
await pendingTransactions.add(txHash, $network.id);

successToast(
$t('bridge.actions.bridge.success', {
$t('bridge.actions.bridge.success.title'),
$t('bridge.actions.bridge.success.message', {
values: {
network: $destinationChain.name,
},
Expand Down
8 changes: 3 additions & 5 deletions packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
const explorer = chainConfig[$network.id].urls.explorer;

infoToast(
$t('faucet.mint.tx.title'),
$t('faucet.mint.tx', {
values: {
token: selectedToken.symbol,
Expand All @@ -72,11 +73,8 @@
await pendingTransactions.add(txHash, $network.id);

successToast(
$t('faucet.mint.success', {
values: {
token: selectedToken.symbol,
},
}),
$t('faucet.mint.success.title'),
$t('faucet.mint.success.message'),
);
} catch (err) {
console.error(err);
Expand Down
11 changes: 8 additions & 3 deletions packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import type { TypeToast } from './types';

export let type: TypeToast = 'unknown';
export let title = '';
export let message = '';
export let close: () => void = noop;

Expand Down Expand Up @@ -59,14 +60,18 @@
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>
xiaodino marked this conversation as resolved.
Show resolved Hide resolved
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
<div class='callout-regular'>{@html message}</div>
</div>
</div>
<button class="ml-6" on:click={close}>
<Icon type="x-close" size={24} fillClass={iconCloseClassMap[type]} />
Expand Down
24 changes: 12 additions & 12 deletions packages/bridge-ui-v2/src/components/NotificationToast/NotificationToast.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

// Public API

export function notify(message: string, type: TypeToast = 'unknown', closeManually = false) {
export function notify(title: string, message: string = '', type: TypeToast = 'unknown', closeManually = false) {
const id = Number(uid());
const close = () => toast.pop(id);

Expand All @@ -17,25 +17,25 @@
...(closeManually ? { initial: 0 } : {}),
component: {
src: ItemToast,
props: { type, message, close },
props: { type, title, message, close },
},
});
}

export function successToast(message: string, closeManually = false) {
notify(message, 'success', closeManually);
export function successToast(title: string, message: string = '', closeManually = false) {
notify(title, message, 'success', closeManually);
}

export function errorToast(message: string, closeManually = true) {
notify(message, 'error', closeManually);
export function errorToast(title: string, message: string = '', closeManually = true) {
notify(title, message, 'error', closeManually);
}

export function warningToast(message: string, closeManually = false) {
notify(message, 'warning', closeManually);
export function warningToast(title: string, message: string = '', closeManually = false) {
notify(title, message, 'warning', closeManually);
}

export function infoToast(message: string, closeManually = false) {
notify(message, 'info', closeManually);
export function infoToast(title: string, message: string = '', closeManually = false) {
notify(title, message, 'info', closeManually);
}
</script>

Expand All @@ -44,7 +44,7 @@
import type { SvelteToastOptions } from '@zerodevx/svelte-toast/stores';

const options: SvelteToastOptions = {
duration: 5000, // TODO: config file?
duration: 5000,
xiaodino marked this conversation as resolved.
Show resolved Hide resolved
pausable: false,
};
</script>
Expand All @@ -60,7 +60,7 @@
--toastContainerTop: 77px;
--toastContainerLeft: calc(50vw - 160px);
--toastBoxShadow: none;
--toastWidth: 320px;
--toastWidth: 339px;

/*
We need to makes the surroundings dissapear in order
Expand Down
4 changes: 4 additions & 0 deletions packages/bridge-ui-v2/src/components/Transactions/Status.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@
const { explorer } = chainConfig[Number(bridgeTx.destChainId)].urls;

infoToast(
'',
$t('transactions.actions.claim.tx', {
values: {
token: bridgeTx.symbol,
Expand All @@ -121,6 +122,7 @@

//Todo: just because we have a claim tx doesn't mean it was successful
successToast(
'',
xiaodino marked this conversation as resolved.
Show resolved Hide resolved
$t('transactions.actions.claim.success', {
values: {
network: $network.name,
Expand Down Expand Up @@ -191,6 +193,7 @@
const { explorer } = chainConfig[Number(bridgeTx.srcChainId)].urls;

infoToast(
'',
$t('transactions.actions.release.tx', {
values: {
token: bridgeTx.symbol,
Expand All @@ -202,6 +205,7 @@
await pendingTransactions.add(txHash, Number(bridgeTx.srcChainId));

successToast(
'',
$t('transactions.actions.release.success', {
values: {
network: $network.name,
Expand Down
48 changes: 36 additions & 12 deletions packages/bridge-ui-v2/src/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,28 @@
},
"actions": {
"approve": {
"tx": "Transaction sent to approve {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",
"success": "Approved {token} tokens!. You can now proceed to bridge.",
"rejected": "Request to approve rejected."
"tx": {
"title": "Approval sent",
"message": "Track the token approval status on the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>."
},
"success": {
"title": "",
"message": "Approved {token} tokens!. You can now proceed to bridge."
},
"rejected": {
"title": "",
"message": "Request to approve rejected."
}
},
"bridge": {
"tx": "Transaction sent to bridge {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",
"success": "Transaction completed!. Your funds are getting ready to be claimed on {network}"
"tx": {
"title": "Transaction sent",
"message": "Track the bridge status of your {token} <a href=\"{url}\" target=\"_blank\"><b>here</b></a>."
},
"success": {
"title": "Transaction completed",
"message": "Your funds are being prepared for claiming on Taiko."
}
},
"nft_scan": "Scan for NFT",
"nft_scan_again": "Scan again",
Expand Down Expand Up @@ -173,7 +188,7 @@
},
"actions": {
"claim": {
"tx": "Transaction sent to claim {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",
"tx": "Transaction sent to claim {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a>.",
"success": "Transaction completed! Your funds have been successfully claimed on {network}.",
"rejected": "Request to claim rejected.",
"dialog": {
Expand All @@ -183,7 +198,7 @@
}
},
"release": {
"tx": "Transaction sent to release {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",
"tx": "Transaction sent to release {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a>.",
"success": "Transaction completed!. Your funds have been released on {network}",
"rejected": "Request to release rejected."
}
Expand All @@ -197,9 +212,18 @@
"title": "Faucet",
"description": "Mint test tokens.",
"mint": {
"tx": "Transaction sent to mint {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",
"success": "Minted {token} tokens!. Check out your balance on the Bridge page.",
"rejected": "Request to mint rejected."
"tx": {
"title": "Transaction sent",
"message": "Track the progress on the explorer <a href=\"{url}\" target=\"_blank\"><b>here</b></a>."
},
"success": {
"title": "Token minted successfully",
"message": "Check your updated balance on the Bridge page."
},
"rejected": {
"title": "Error minting token",
"message": "An error occurred while attempting to mint the token."
}
},
"button": {
"mint": "Mint",
Expand Down Expand Up @@ -287,8 +311,8 @@
"messages": {
"account": {
"required": "Please connect your wallet.",
"connected": "Account connected",
"disconnected": "Account disconnected"
"connected": "Wallet connected",
"disconnected": "Wallet disconnected"
},
"network": {
"switching": "Switching network",
Expand Down