Merge branch 'main' into papi

src/frontend/src/btc/components/transactions/BtcTransaction.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { nonNullish } from '@dfinity/utils';
+	import { BigNumber } from '@ethersproject/bignumber';
+	import type { BtcTransactionStatus, BtcTransactionUi } from '$btc/types/btc';
+	import Transaction from '$lib/components/transactions/Transaction.svelte';
+	import { modalStore } from '$lib/stores/modal.store';
+	import type { TransactionType } from '$lib/types/transaction';
+
+	export let transaction: BtcTransactionUi;
+
+	let value: bigint | undefined;
+	let timestamp: number | undefined;
+	let status: BtcTransactionStatus;
+	let type: TransactionType;
+
+	$: ({ type, status, value, timestamp } = transaction);
+
+	let pending: boolean;
+	$: pending = status === 'pending';
+</script>
+
+<Transaction
+	on:click={() => modalStore.openBtcTransaction(transaction)}
+	value={nonNullish(value) ? BigNumber.from(value) : undefined}
+	{type}
+	{timestamp}
+	{pending}
+/>

src/frontend/src/btc/components/transactions/BtcTransactions.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import BtcTransaction from '$btc/components/transactions/BtcTransaction.svelte';
+	import {
+		sortedTransactions,
+		transactionsNotInitialized
+	} from '$btc/derived/btc-transactions.derived';
+	import TokensSkeletons from '$lib/components/tokens/TokensSkeletons.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+</script>
+
+<TokensSkeletons loading={$transactionsNotInitialized}>
+	{#each $sortedTransactions as transaction (transaction.data.id)}
+		<div transition:slide={{ duration: 250 }}>
+			<BtcTransaction transaction={transaction.data} />
+		</div>
+	{/each}
+
+	{#if $sortedTransactions.length === 0}
+		<p class="text-secondary mt-4 opacity-50">{$i18n.transactions.text.no_transactions}</p>
+	{/if}
+</TokensSkeletons>

src/frontend/src/lib/components/transactions/Transaction.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { nonNullish } from '@dfinity/utils';
+	import { BigNumber } from '@ethersproject/bignumber';
+	import type { ComponentType } from 'svelte';
+	import IconReceive from '$lib/components/icons/IconReceive.svelte';
+	import IconSend from '$lib/components/icons/IconSend.svelte';
+	import TransactionPending from '$lib/components/transactions/TransactionPending.svelte';
+	import Amount from '$lib/components/ui/Amount.svelte';
+	import Card from '$lib/components/ui/Card.svelte';
+	import RoundedIcon from '$lib/components/ui/RoundedIcon.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+	import type { TransactionType } from '$lib/types/transaction';
+	import { formatSecondsToDate } from '$lib/utils/format.utils.js';
+
+	export let value: BigNumber | undefined;
+	export let type: TransactionType;
+	export let pending: boolean;
+	export let timestamp: number | undefined;
+
+	let label: string;
+	$: label = type === 'send' ? $i18n.send.text.send : $i18n.receive.text.receive;
+
+	let icon: ComponentType;
+	$: icon = type === 'send' ? IconSend : IconReceive;
+</script>
+
+<button class="contents">
+	<Card>
+		<span class="inline-block first-letter:capitalize">{label}</span>
+
+		<RoundedIcon slot="icon" {icon} iconStyleClass={pending ? 'opacity-10' : ''} />
+
+		<svelte:fragment slot="amount">
+			{#if nonNullish(value)}
+				<Amount amount={BigNumber.from(value)} />
+			{/if}
+		</svelte:fragment>
+
+		<svelte:fragment slot="description">
+			{#if nonNullish(timestamp)}
+				{formatSecondsToDate(timestamp)}
+			{/if}
+
+			<TransactionPending {pending} />
+		</svelte:fragment>
+	</Card>
+</button>

src/frontend/src/lib/components/transactions/TransactionsSignedIn.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { nonNullish } from '@dfinity/utils';
-	import BtcTransactions from '$btc/components/BtcTransactions.svelte';
+	import BtcTransactions from '$btc/components/transactions/BtcTransactions.svelte';
 	import Transactions from '$eth/components/transactions/Transactions.svelte';
 	import IcTransactions from '$icp/components/transactions/IcTransactions.svelte';
 	import { routeNetwork, routeToken } from '$lib/derived/nav.derived';