Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(bridge-ui-v2): Activities page (#14504)
Co-authored-by: Francisco <jscriptcoder@gmail.com>
- Loading branch information
1 parent
7bca3d0
commit 4dff4b3
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,185 @@ | ||
| <script lang="ts"> | ||
| import { onMount } from 'svelte'; | ||
| import { t } from 'svelte-i18n'; | ||
| import type { Address } from 'viem'; | ||
| import { Card } from '$components/Card'; | ||
| import ChainSelector from '$components/ChainSelector/ChainSelector.svelte'; | ||
| import { DesktopOrLarger } from '$components/DesktopOrLarger'; | ||
| import OnAccount from '$components/OnAccount/OnAccount.svelte'; | ||
| import { Paginator } from '$components/Paginator'; | ||
| import { Spinner } from '$components/Spinner'; | ||
| import { activitiesConfig } from '$config'; | ||
| import { type BridgeTransaction, fetchTransactions } from '$libs/bridge'; | ||
| import { web3modal } from '$libs/connect'; | ||
| import { bridgeTxService } from '$libs/storage'; | ||
| import { account, network } from '$stores'; | ||
| import type { Account } from '$stores/account'; | ||
| import MobileDetailsDialog from './MobileDetailsDialog.svelte'; | ||
| import StatusInfoDialog from './StatusInfoDialog.svelte'; | ||
| import Transaction from './Transaction.svelte'; | ||
| let transactions: BridgeTransaction[] = []; | ||
| let currentPage = 1; | ||
| let isBlurred = false; | ||
| const transitionTime = activitiesConfig.blurTransitionTime; | ||
| let totalItems = 0; | ||
| let pageSize = activitiesConfig.pageSizeDesktop; | ||
| let loadingTxs = false; | ||
| let detailsOpen = false; | ||
| let isDesktopOrLarger: boolean; | ||
| let selectedItem: BridgeTransaction | null = null; | ||
| const handlePageChange = (detail: number) => { | ||
| isBlurred = true; | ||
| setTimeout(() => { | ||
| currentPage = detail; | ||
| isBlurred = false; | ||
| }, transitionTime); | ||
| }; | ||
| const getTransactionsToShow = (page: number, pageSize: number, bridgeTx: BridgeTransaction[]) => { | ||
| const start = (page - 1) * pageSize; | ||
| const end = start + pageSize; | ||
| return bridgeTx.slice(start, end); | ||
| }; | ||
| const onWalletConnect = () => web3modal.openModal(); | ||
| 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?.isConnected && newAccount.address && newAccount.address !== oldAccount?.address) { | ||
| loadingTxs = true; | ||
| try { | ||
| updateTransactions(newAccount.address); | ||
| } catch (err) { | ||
| console.error(err); | ||
| // TODO: handle | ||
| } finally { | ||
| loadingTxs = false; | ||
| } | ||
| } | ||
| }; | ||
| const closeDetails = () => { | ||
| detailsOpen = false; | ||
| selectedItem = null; | ||
| }; | ||
| const openDetails = (tx: BridgeTransaction) => { | ||
| detailsOpen = true; | ||
| selectedItem = tx; | ||
| }; | ||
| const updateTransactions = async (address: Address) => { | ||
| const { mergedTransactions, outdatedLocalTransactions } = await fetchTransactions(address); | ||
| transactions = mergedTransactions; | ||
| if (outdatedLocalTransactions.length > 0) { | ||
| await bridgeTxService.removeTransactions(address, outdatedLocalTransactions); | ||
| } | ||
| }; | ||
| onMount(async () => { | ||
| // We want to make sure that we are connected before fetching | ||
| if (!$account?.isConnected || !$account?.address) return; | ||
| loadingTxs = true; | ||
| try { | ||
| await updateTransactions($account.address); | ||
| } catch (err) { | ||
| console.error(err); | ||
| // TODO: handle | ||
| } finally { | ||
| loadingTxs = false; | ||
| } | ||
| }); | ||
| $: pageSize = isDesktopOrLarger ? activitiesConfig.pageSizeDesktop : activitiesConfig.pageSizeMobile; | ||
| $: transactionsToShow = getTransactionsToShow(currentPage, pageSize, transactions); | ||
| $: totalItems = transactions.length; | ||
| // Some shortcuts to make the code more readable | ||
| $: isConnected = $account?.isConnected; | ||
| $: hasTxs = transactions.length > 0; | ||
| // Controls what we render on the page | ||
| $: renderLoading = loadingTxs && isConnected; | ||
| $: renderTransactions = !renderLoading && isConnected && hasTxs; | ||
| $: renderNoTransactions = !renderLoading && !renderTransactions; | ||
| </script> | ||
|
|
||
| <div class="flex flex-col justify-center w-full"> | ||
| <Card title={$t('activities.title')} text={$t('activities.description')}> | ||
| <ChainSelector class="py-[35px] " label={$t('chain_selector.currently_on')} value={$network} switchWallet small /> | ||
| <div class="flex flex-col" style={`min-height: calc(${transactionsToShow.length} * 80px);`}> | ||
| {#if isDesktopOrLarger} | ||
| <div class="h-sep" /> | ||
| <div class="text-white flex"> | ||
| <div class="w-1/5 py-2">{$t('activities.header.from')}</div> | ||
| <div class="w-1/5 py-2">{$t('activities.header.to')}</div> | ||
| <div class="w-1/5 py-2">{$t('activities.header.amount')}</div> | ||
| <div class="w-1/5 py-2 flex flex-row"> | ||
| {$t('activities.header.status')} | ||
| <StatusInfoDialog /> | ||
| </div> | ||
| <div class="w-1/5 py-2">{$t('activities.header.explorer')}</div> | ||
| </div> | ||
| <div class="h-sep" /> | ||
| {/if} | ||
|
|
||
| {#if renderLoading} | ||
| <div class="flex items-center justify-center text-white h-[80px]"> | ||
| <Spinner /> <span class="pl-3">{$t('common.loading')}...</span> | ||
| </div> | ||
| {/if} | ||
|
|
||
| {#if renderTransactions} | ||
| <div | ||
| class="flex flex-col items-center" | ||
| style={isBlurred ? `filter: blur(5px); transition: filter ${transitionTime / 1000}s ease-in-out` : ''}> | ||
| {#each transactionsToShow as item (item.hash)} | ||
| <Transaction {item} on:click={isDesktopOrLarger ? undefined : () => openDetails(item)} /> | ||
| <div class="h-sep" /> | ||
| {/each} | ||
| </div> | ||
| {/if} | ||
|
|
||
| {#if renderNoTransactions} | ||
| <div class="flex items-center justify-center text-white h-[80px]"> | ||
| <span class="pl-3">{$t('activities.no_transactions')}</span> | ||
| </div> | ||
| {/if} | ||
|
|
||
| <!-- TODO: we don't have this in the design --> | ||
| <!-- {#if !$account?.isConnected} | ||
| <div class="flex items-center justify-center text-white h-[80px]"> | ||
| <Button type="primary" on:click={onWalletConnect} class="px-[28px] py-[14px] "> | ||
| <span class="body-bold">{$t('wallet.connect')}</span> | ||
| </Button> | ||
| </div> | ||
| {/if} --> | ||
| </div> | ||
| </Card> | ||
|
|
||
| <div class="flex justify-end pt-2"> | ||
| <Paginator {pageSize} {totalItems} on:pageChange={({ detail }) => handlePageChange(detail)} /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <MobileDetailsDialog {closeDetails} {detailsOpen} {selectedItem} /> | ||
|
|
||
| <OnAccount change={onAccountChange} /> | ||
|
|
||
| <DesktopOrLarger bind:is={isDesktopOrLarger} /> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <script lang="ts"> | ||
| import { chainIcons, type ChainID, getChainName } from '$libs/chain'; | ||
| export let chainId: ChainID; | ||
| const chainName = getChainName(Number(chainId)); | ||
| const icon = chainIcons[Number(chainId)]; | ||
| </script> | ||
|
|
||
| <div class="flex md:items-stretch self-center justify-items-start'}"> | ||
| <img src={icon} alt="chain-logo" class="rounded-full w-5 h-5 hidden md:block mr-2" /> | ||
| <span class="md:font-bold font-normal">{chainName}</span> | ||
| </div> |
Oops, something went wrong.