Skip to content

Commit

Permalink
feat(bridge-ui-v2): activities page (#14089)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jscriptcoder
jscriptcoder committed Jul 4, 2023
1 parent c64ca93 commit f4c6f84
Show file tree
Hide file tree
Showing 16 changed files with 579 additions and 35 deletions.
21 changes: 19 additions & 2 deletions packages/bridge-ui-v2/src/components/Activities/Activities.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,24 @@
<script>
<script lang="ts">
import { t } from 'svelte-i18n';
import { Card } from '$components/Card';
import { ChainSelector } from '$components/ChainSelector';
import ListWithDetailsView from './ListWithDetailsView.svelte';
import TableView from './TableView.svelte';
</script>

<Card title={$t('activities.title')} text={$t('activities.subtitle')}>TODO: Activities</Card>
<Card class="md:min-w-[524px]" title={$t('activities.title')} text={$t('activities.subtitle')}>
<div class="space-y-[35px]">
<ChainSelector label={$t('chain_selector.currently_on')} />
<!-- Small size view -->
<div class="md:hidden">
<ListWithDetailsView />
</div>

<!-- Medium size view: desktop and larger -->
<div class="hidden md:block">
<TableView />
</div>
</div>
</Card>
225 changes: 225 additions & 0 deletions packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import { EthIcon, Icon, TaikoIcon } from '$components/Icon';
import { StatusDot } from '$components/StatusDot';
import { Tooltip } from '$components/Tooltip';
import { uid } from '$libs/util/uid';
let dialogId = `dialog-${uid()}`;
let detailsOpen = false;
function closeDetails() {
detailsOpen = false;
}
function openDetails() {
detailsOpen = true;
}
function onItemKeydown(event: KeyboardEvent) {
if (event.key === 'Enter') {
openDetails();
}
}
</script>

<div>
<ul class="space-y-[10px]">
<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Sepolia</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Taiko</span>
</div>
<div class="text-primary-content">2.5 ETH</div>
</div>
<div class="f-items-center justify-end space-x-1">
<StatusDot type="pending" />
<span>{$t('activities.status.initiated')}</span>
</div>
</li>

<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Taiko</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Sepolia</span>
</div>
<div class="text-primary-content">0.342 ETH</div>
</div>
<div class="f-items-center justify-end space-x-1">
<StatusDot type="pending" />
<span>{$t('activities.status.pending')}</span>
</div>
</li>

<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Taiko</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Sepolia</span>
</div>
<div class="text-primary-content">7 HORSE</div>
</div>
<div class="f-items-center justify-end space-x-1">
<button class="status-btn w-full">
{$t('activities.button.claim')}
</button>
</div>
</li>

<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Taiko</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Sepolia</span>
</div>
<div class="text-primary-content">3 BLL</div>
</div>
<div class="f-items-center justify-end space-x-1">
<button class="status-btn w-full">
{$t('activities.button.retry')}
</button>
</div>
</li>

<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Sepolia</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Taiko</span>
</div>
<div class="text-primary-content">3.204 ETH</div>
</div>
<div class="f-items-center justify-end space-x-1">
<StatusDot type="success" />
<span>{$t('activities.status.claimed')}</span>
</div>
</li>

<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Sepolia</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Taiko</span>
</div>
<div class="text-primary-content">2.5 BLL</div>
</div>
<div class="f-items-center justify-end space-x-1">
<StatusDot type="error" />
<span>{$t('activities.status.failed')}</span>
</div>
</li>

<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Taiko</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Sepolia</span>
</div>
<div class="text-primary-content">1.203 HORSE</div>
</div>
<div class="f-items-center justify-end space-x-1">
<button class="status-btn w-full">
{$t('activities.button.release')}
</button>
</div>
</li>
</ul>

<dialog id={dialogId} class="modal modal-bottom" class:modal-open={detailsOpen}>
<div class="modal-box relative px-6 py-[30px] bg-neutral-background">
<button class="absolute right-6 top-[30px]" on:click={closeDetails}>
<Icon type="x-close" fillClass="fill-primary-icon" size={24} />
</button>

<h3 class="title-body-bold mb-7 text-primary-content">{$t('processing_fee.title')}</h3>

<ul class="space-y-[15px] body-small-regular">
<li class="f-between-center">
<h4 class="text-secondary-content">{$t('chain.from')}</h4>
<div class="f-items-center space-x-2">
<i role="img" aria-label="Ethereum">
<EthIcon size={20} />
</i>
<span>Sepolia</span>
</div>
</li>
<li class="f-between-center">
<h4 class="text-secondary-content">{$t('chain.to')}</h4>
<div class="f-items-center space-x-2">
<i role="img" aria-label="Taiko">
<TaikoIcon size={20} />
</i>
<span>Taiko</span>
</div>
</li>
<li class="f-between-center">
<h4 class="text-secondary-content">{$t('amount_input.label')}</h4>
<span>2.5 ETH</span>
</li>
<li class="f-between-center">
<h4 class="text-secondary-content">
<div class="f-items-center space-x-1">
<span>{$t('activities.header.status')}</span>
<Tooltip position="right">TODO: add description about status here</Tooltip>
</div>
</h4>
<div class="f-items-center space-x-1">
<StatusDot type="pending" />
<span>{$t('activities.status.initiated')}</span>
</div>
</li>
<li class="f-between-center">
<h4 class="text-secondary-content">{$t('activities.header.explorer')}</h4>
<a class="link" href="https://etherscan.io/" target="_blank">{$t('activities.link.explorer')}</a>
</li>
</ul>
</div>

<div class="overlay-backdrop" />
</dialog>
</div>

0 comments on commit f4c6f84

Please sign in to comment.