From 6fe7c447b7c9c13b5868c65c69a9ddfeb968901a Mon Sep 17 00:00:00 2001 From: Korbinian Date: Mon, 12 Aug 2024 13:43:48 +0200 Subject: [PATCH] feat(bridge-ui): more detailed transactions view (#17899) Co-authored-by: Daniel Wang <99078276+dantaik@users.noreply.github.com> --- .../ChainSelectors/ChainPill/ChainPill.svelte | 2 +- .../ConnectButton/ConnectButton.svelte | 13 +- .../Dialogs/Shared/ClaimPreCheck.svelte | 2 +- .../ExplorerLink/ExplorerLink.svelte | 16 +- .../src/components/Header/Header.svelte | 52 ++- .../bridge-ui/src/components/Icon/Icon.svelte | 12 + .../src/components/Paginator/Paginator.svelte | 16 +- .../src/components/Relayer/Relayer.svelte | 19 +- .../SideNavigation/SideNavigation.svelte | 54 +-- .../src/components/StatusDot/StatusDot.svelte | 3 +- .../Transactions/ChainSymbol.svelte | 11 + .../Dialogs/DesktopDetailsDialog.svelte | 325 +++++++++++++++++ .../Dialogs/MobileDetailsDialog.svelte | 340 ++++++++++++++++++ .../components/Transactions/Dialogs/index.ts | 2 + .../Transactions/MobileDetailsDialog.svelte | 217 ----------- .../Rows/FungibleTransactionRow.svelte | 241 +++++++++++++ .../Rows/NftTransactionRow.svelte | 289 +++++++++++++++ .../src/components/Transactions/Rows/index.ts | 2 + .../Transactions/Status/Status.svelte | 34 +- .../Transactions/Transaction.svelte | 297 --------------- .../Transactions/Transactions.svelte | 116 +++--- packages/bridge-ui/src/i18n/en.json | 18 +- packages/bridge-ui/src/libs/bridge/types.ts | 1 + .../src/libs/relayer/RelayerAPIService.ts | 1 + packages/bridge-ui/src/libs/relayer/types.ts | 3 + .../src/libs/util/formatTimestamp.ts | 11 + .../src/libs/util/getBlockFromTxHash.ts | 23 ++ .../src/libs/util/getBlockTimestamp.ts | 13 + .../src/libs/util/responsiveCheck.ts | 49 +++ .../bridge-ui/src/libs/util/truncateString.ts | 1 + packages/bridge-ui/src/routes/+layout.svelte | 40 ++- packages/bridge-ui/src/styles/override.css | 10 + packages/bridge-ui/tailwind.config.js | 3 + 33 files changed, 1584 insertions(+), 652 deletions(-) create mode 100644 packages/bridge-ui/src/components/Transactions/ChainSymbol.svelte create mode 100644 packages/bridge-ui/src/components/Transactions/Dialogs/DesktopDetailsDialog.svelte create mode 100644 packages/bridge-ui/src/components/Transactions/Dialogs/MobileDetailsDialog.svelte create mode 100644 packages/bridge-ui/src/components/Transactions/Dialogs/index.ts delete mode 100644 packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte create mode 100644 packages/bridge-ui/src/components/Transactions/Rows/FungibleTransactionRow.svelte create mode 100644 packages/bridge-ui/src/components/Transactions/Rows/NftTransactionRow.svelte create mode 100644 packages/bridge-ui/src/components/Transactions/Rows/index.ts delete mode 100644 packages/bridge-ui/src/components/Transactions/Transaction.svelte create mode 100644 packages/bridge-ui/src/libs/util/formatTimestamp.ts create mode 100644 packages/bridge-ui/src/libs/util/getBlockFromTxHash.ts create mode 100644 packages/bridge-ui/src/libs/util/getBlockTimestamp.ts create mode 100644 packages/bridge-ui/src/libs/util/responsiveCheck.ts diff --git a/packages/bridge-ui/src/components/ChainSelectors/ChainPill/ChainPill.svelte b/packages/bridge-ui/src/components/ChainSelectors/ChainPill/ChainPill.svelte index 6d2d882cba7..fd500c63141 100644 --- a/packages/bridge-ui/src/components/ChainSelectors/ChainPill/ChainPill.svelte +++ b/packages/bridge-ui/src/components/ChainSelectors/ChainPill/ChainPill.svelte @@ -21,7 +21,7 @@ let classes = classNames('ChainPill relative', $$props.class); - let buttonClasses = `f-row body-regular bg-neutral-background px-2 py-[6px] !rounded-[10px] dark:hover:bg-primary-secondary-hover flex justify-start content-center ${$$props.class}`; + let buttonClasses = `f-row body-regular bg-neutral-background px-2 py-[6px] !rounded-full dark:hover:bg-primary-secondary-hover flex justify-start content-center ${$$props.class}`; let iconSize = 'min-w-5 max-w-5 min-h-5 max-h-5'; diff --git a/packages/bridge-ui/src/components/ConnectButton/ConnectButton.svelte b/packages/bridge-ui/src/components/ConnectButton/ConnectButton.svelte index 1db34da4d17..3c003bab68d 100644 --- a/packages/bridge-ui/src/components/ConnectButton/ConnectButton.svelte +++ b/packages/bridge-ui/src/components/ConnectButton/ConnectButton.svelte @@ -8,6 +8,7 @@ import { web3modal } from '$libs/connect'; import { refreshUserBalance, renderEthBalance } from '$libs/util/balance'; import { noop } from '$libs/util/noop'; + import { isMobile } from '$libs/util/responsiveCheck'; import { shortenAddress } from '$libs/util/shortenAddress'; import { account } from '$stores/account'; import { ethBalance } from '$stores/balance'; @@ -43,15 +44,17 @@ {#if connected} - {/if} + + {$t('paginator.page')} - {#if !isLastPage} - - {/if} + {/if} diff --git a/packages/bridge-ui/src/components/Relayer/Relayer.svelte b/packages/bridge-ui/src/components/Relayer/Relayer.svelte index 70398dfdbf0..8e87e8cabfe 100644 --- a/packages/bridge-ui/src/components/Relayer/Relayer.svelte +++ b/packages/bridge-ui/src/components/Relayer/Relayer.svelte @@ -6,8 +6,9 @@ import ActionButton from '$components/Button/ActionButton.svelte'; import Card from '$components/Card/Card.svelte'; import OnAccount from '$components/OnAccount/OnAccount.svelte'; - import Transaction from '$components/Transactions/Transaction.svelte'; + import { FungibleTransactionRow, NftTransactionRow } from '$components/Transactions/Rows'; import { type BridgeTransaction, fetchTransactions, MessageStatus } from '$libs/bridge'; + import { TokenType } from '$libs/token'; import { getLogger } from '$libs/util/logger'; import { type Account, account } from '$stores/account'; @@ -20,7 +21,7 @@ const onAccountChange = async (newAccount: Account, oldAccount?: Account) => { // We want to make sure that we are connected and only // fetch if the account has changed - if (newAccount.address && newAccount.address !== oldAccount?.address) { + if (newAccount && newAccount.address && newAccount.address !== oldAccount?.address) { reset(); } }; @@ -80,6 +81,8 @@
{$t('relayer_component.step1.title')} + {transactions?.length} + {transactionsToShow?.length} {/if}
- {#each transactionsToShow as tx} - {#if tx.status === MessageStatus.NEW} - + + {#each transactionsToShow as bridgeTx (bridgeTx.srcTxHash)} + {@const status = bridgeTx.msgStatus} + {@const isFungible = bridgeTx.tokenType === TokenType.ERC20 || bridgeTx.tokenType === TokenType.ETH} + {#if isFungible} + + {:else} + {/if} +
{/each} diff --git a/packages/bridge-ui/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui/src/components/SideNavigation/SideNavigation.svelte index d86be1f29e3..c428a0861e5 100644 --- a/packages/bridge-ui/src/components/SideNavigation/SideNavigation.svelte +++ b/packages/bridge-ui/src/components/SideNavigation/SideNavigation.svelte @@ -10,7 +10,6 @@ import BridgeTabs from '$components/Bridge/BridgeTabs.svelte'; import { Icon } from '$components/Icon'; import { LinkButton } from '$components/LinkButton'; - import { LogoWithText } from '$components/Logo'; import { ThemeButton } from '$components/ThemeButton'; import { PUBLIC_DEFAULT_EXPLORER, @@ -23,8 +22,12 @@ let testnetName = PUBLIC_TESTNET_NAME || ''; let drawerToggleElem: HTMLInputElement; + export let sideBarOpen: boolean; + function closeDrawer() { + if (!drawerToggleElem) return; drawerToggleElem.checked = false; + sideBarOpen = false; } function onMenuKeydown(event: KeyboardEvent) { @@ -40,63 +43,36 @@ $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft'; $: isFaucetPage = $page.route.id === '/faucet'; $: isTransactionsPage = $page.route.id === '/transactions'; - - $: hasTestnetName = testnetName !== ''; -
+
-
- -
+