307 make app more responsive (#309)

* 1. Resize window and hide dom. 2. init app non blocking * feat: UX/UI enhancements for Transaction history page (#294) * feat: UX/UI enhancements for Transaction history page * chore: cleaning * Chore(deps): Bump flowbite from 1.8.1 to 2.2.0 (#306) Bumps [flowbite](https://github.com/themesberg/flowbite) from 1.8.1 to 2.2.0. - [Release notes](https://github.com/themesberg/flowbite/releases) - [Commits](themesberg/flowbite@v1.8.1...v2.2.0) --- updated-dependencies: - dependency-name: flowbite dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * 1. Transaction history design 2. Banners on messages 3. Dependabot * Chore(deps-dev): Bump prettier from 2.8.8 to 3.1.0 (#308) * Chore(deps-dev): Bump svelte from 4.2.1 to 4.2.7 (#305) Bumps [svelte](https://github.com/sveltejs/svelte/tree/HEAD/packages/svelte) from 4.2.1 to 4.2.7. - [Release notes](https://github.com/sveltejs/svelte/releases) - [Changelog](https://github.com/sveltejs/svelte/blob/[email protected]/packages/svelte/CHANGELOG.md) - [Commits](https://github.com/sveltejs/svelte/commits/[email protected]/packages/svelte) --- updated-dependencies: - dependency-name: svelte dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Chore(deps-dev): Bump prettier from 2.8.8 to 3.1.0 Bumps [prettier](https://github.com/prettier/prettier) from 2.8.8 to 3.1.0. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](prettier/prettier@2.8.8...3.1.0) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Chore(deps-dev): Bump @typescript-eslint/eslint-plugin (#299) Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 5.59.11 to 6.9.1. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v6.9.1/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Chore(deps-dev): Bump autoprefixer from 10.4.14 to 10.4.16 (#297) Bumps [autoprefixer](https://github.com/postcss/autoprefixer) from 10.4.14 to 10.4.16. - [Release notes](https://github.com/postcss/autoprefixer/releases) - [Changelog](https://github.com/postcss/autoprefixer/blob/main/CHANGELOG.md) - [Commits](postcss/autoprefixer@10.4.14...10.4.16) --- updated-dependencies: - dependency-name: autoprefixer dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Merge branch '307-make-app-more-responsive' of https://github.com/stacks-network/sbtc-bridge-web into 307-make-app-more-responsive * '307-make-app-more-responsive' of https://github.com/stacks-network/sbtc-bridge-web: Chore(deps-dev): Bump autoprefixer from 10.4.14 to 10.4.16 (#297) Chore(deps-dev): Bump @typescript-eslint/eslint-plugin (#299) --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Maxime Laforet <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
stacks-network · Nov 28, 2023 · a0f28e6 · a0f28e6
1 parent f0516fe
commit a0f28e6
Show file tree

Hide file tree

Showing 17 changed files with 1,435 additions and 912 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
  "@sveltejs/kit": "^1.24.1",
  "@typescript-eslint/eslint-plugin": "^5.45.0",
  "@typescript-eslint/parser": "^5.62.0",
- "autoprefixer": "^10.4.14",
+ "autoprefixer": "^10.4.16",
  "eslint": "^8.46.0",
  "eslint-config-prettier": "^8.5.0",
  "eslint-plugin-svelte": "^2.33.2",
@@ -58,14 +58,13 @@
  "@stacks/network": "^6.8.1",
  "@stacks/transactions": "^6.7.0",
  "@sveltejs/adapter-static": "^2.0.2",
- "flowbite": "^1.8.1",
+ "flowbite": "^2.2.0",
  "flowbite-svelte-icons": "^0.4.4",
  "micro-packed": "^0.3.2",
  "sats-connect": "^1.1.1",
  "sbtc-bridge-lib": "^1.1.25",
  "sockjs": "^0.3.24",
  "svelte-local-storage-store": "^0.5.0",
- "svelte-qrcode": "^1.0.0",
- "tailwind-merge": "^1.14.0"
+ "svelte-qrcode": "^1.0.0"
  }
 }
diff --git a/src/lib/components/dashboard/DepositReturn.svelte b/src/lib/components/dashboard/DepositReturn.svelte
@@ -108,7 +108,7 @@
  </button>
  </div>
  {:else if timeLineStatus === 2}
- <SignTransaction {addressInfo} {peginRequest} on:update_transaction={updateTimeline}/>
+ <SignTransaction {addressInfo} {peginRequest} on:update_timeline={updateTimeline}/>
  {:else if timeLineStatus === 3}
  <StatusCheck pegin={peginRequest} on:clicked={doClicked}/>
  {/if}

diff --git a/src/lib/components/dashboard/Withdraw.svelte b/src/lib/components/dashboard/Withdraw.svelte
@@ -73,6 +73,7 @@
 
  const updateTransaction = () => {
  timeLineStatus = 1;
+ componentKey++;
  }
 
  const doClicked = async (event:any) => {

diff --git a/src/lib/components/dashboard/dr/SignTransaction.svelte b/src/lib/components/dashboard/dr/SignTransaction.svelte
@@ -17,6 +17,7 @@ import { broadcastTransaction } from '$lib/sbtc';
 import type { Transaction, TransactionOutput, TransactionInput } from '@scure/btc-signer';
 import { Tooltip } from 'flowbite-svelte';
  import { buildDepositPayloadInternal } from '$lib/stacks_connect_bug';
+ import Banner from '$lib/components/shared/Banner.svelte';
 
 export let peginRequest:BridgeTransactionType;
 export let addressInfo:any;
@@ -61,6 +62,17 @@ export async function signPsbtHiro() {
  }
  });
 }
+
+const getBbMessage = () => {
+ let msg = '<p>View transaction on the <a class="text-warning-700" href=' + getExplorerUrl() + ' target="_blank" rel="noreferrer">Bitcoin network</a>.</p>'
+ if (peginRequest.requestType === 'deposit') {
+ msg += ' <p>Once confirmed your sBTC will be deposited to your Stacks Wallet. </p>'
+ } else {
+ msg += '<p>Once confirmed your sBTC will be withdrawn from your Stacks Account and your Bitcoin returned. </p>'
+ }
+ return msg
+}
+
 function getPsbtTxOutputs(psbtTx:Transaction) {
  const outputsLength = psbtTx.outputsLength;
  const outputs:TransactionOutput[] = [];
@@ -111,8 +123,8 @@ export async function signPsbtXverse() {
  await signTransaction(signPsbtOptions);
 }
 
-const updateTimeline = () => {
- dispatch('update_transaction', { success: true });
+const updateTimeline = (timeline:number) => {
+  dispatch('update_timeline', { timeline });
 }
 
 const updateBridgeTransaction = async (txid:string) => {
@@ -185,34 +197,23 @@ onMount(async () => {
  <Invoice {peginRequest} {psbtHex} {psbtB64} />
  {#if !broadcasted && !errorReason}
  <div class="flex w-full">
- <!--
- <div class="mt-6">
- <button on:click={() => updateTimeline()} class="text-center focus:ring-4 focus:outline-none justify-center text-base hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800 inline-flex w-full items-center gap-x-1.5 bg-primary-01 px-4 py-2 font-normal text-black rounded-xl border border-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50">Back</button>
- </div>
- -->
  {#if isWalletAddress()}
  <div class="mt-6 w-full flex">
  <div class="grow"><button on:click={() => requestSignPsbt()} class=" w-full text-center focus:ring-4 focus:outline-none justify-center text-base hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800 inline-flex items-center gap-x-1.5 bg-primary-01 px-4 py-2 font-normal text-black rounded-xl border border-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50">Sign & broadcast</button></div>
- <!--<div class=""><Icon src="{InformationCircle}" mini class="ml-2 shrink-0 h-5 w-5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50" aria-hidden="true" id="d-sign-label" /></div>-->
  </div>
  {/if}
  </div>
  {:else if broadcasted}
  <div class="my-3 text-2xl">
- <p>View transaction on the <a class="text-warning-700" href={getExplorerUrl()} target="_blank" rel="noreferrer">Bitcoin network</a>.</p>
- {#if peginRequest.requestType === 'deposit'}
- <p>Once confirmed your sBTC will be deposited to your Stacks Wallet. </p>
- {:else}
- <p>Once confirmed your sBTC will be withdrawn from your Stacks Account and your Bitcoin returned. </p>
- {/if}
+ <Banner bannerType={'info'} message={getBbMessage()}/>
  </div>
  {:else if errorReason}
- <div class="flex flex-col">
- <div class="mt-5">
- {#if errorReason}<div class="text-warning-500"><p>{@html errorReason}</p></div>{/if}
+ <div class="mt-5 flex flex-col">
+ <div class="">
+ <Banner bannerType={'warning'} message={errorReason}/>
  </div>
  <div class="mt-5">
- <button on:click={() => updateTimeline()} class="text-center focus:ring-4 focus:outline-none justify-center text-base hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800 inline-flex w-full items-center gap-x-1.5 bg-primary-01 px-4 py-2 font-normal text-black rounded-xl border border-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50">Continue</button>
+ <button on:click={() => updateTimeline(1)} class="text-center focus:ring-4 focus:outline-none justify-center text-base hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800 inline-flex w-full items-center gap-x-1.5 bg-primary-01 px-4 py-2 font-normal text-black rounded-xl border border-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50">Back</button>
  </div>
  </div>
  {/if}

diff --git a/src/lib/components/dashboard/shared/BitcoinInput.svelte b/src/lib/components/dashboard/shared/BitcoinInput.svelte
@@ -98,12 +98,12 @@
  setDisplayValue()
  }
 
- const getBalance = () => {
+ $: getBalance = () => {
  if ($sbtcConfig.userSettings.peggingIn) {
- if (denomination === 'bitcoin') return satsToBitcoin(bitcoinBalanceFromMempool($sbtcConfig.keySets[CONFIG.VITE_NETWORK].cardinalInfo))
+ if ($sbtcConfig.userSettings.currency.denomination === 'bitcoin') return satsToBitcoin(bitcoinBalanceFromMempool($sbtcConfig.keySets[CONFIG.VITE_NETWORK].cardinalInfo))
  else return bitcoinBalanceFromMempool($sbtcConfig.keySets[CONFIG.VITE_NETWORK].cardinalInfo)
  } else {
- if (denomination === 'bitcoin') return satsToBitcoin($sbtcConfig.keySets[CONFIG.VITE_NETWORK].sBTCBalance)
+ if ($sbtcConfig.userSettings.currency.denomination === 'bitcoin') return satsToBitcoin($sbtcConfig.keySets[CONFIG.VITE_NETWORK].sBTCBalance)
  else return $sbtcConfig.keySets[CONFIG.VITE_NETWORK].sBTCBalance
  }
  }

diff --git a/src/lib/components/dashboard/shared/TxsHistoryTable.svelte b/src/lib/components/dashboard/shared/TxsHistoryTable.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+ import { onMount } from 'svelte';
+ import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
+
+ import { page } from '$app/stores';
+ import { COMMS_ERROR, explorerTxUrl } from '$lib/utils.js'
+ import { truncate, explorerBtcTxUrl } from '$lib/utils'
+ import { findSbtcEventByBitcoinAddress, findSbtcEventsByPage } from '$lib/bridge_api'
+ import { fmtNumber, type SbtcClarityEvent } from 'sbtc-bridge-lib'
+ import { satsToBitcoin } from '$lib/utils'
+ import ArrowUpRight from '$lib/components/shared/ArrowUpRight.svelte';
+ import Paging from '$lib/components/transactions/Paging.svelte';
+ import { sbtcConfig } from '$stores/stores';
+ import { CONFIG } from '$lib/config';
+
+ // fetch/hydrate data from local storage
+ let inited = false;
+ let sbtcEvents:{ results: Array<SbtcClarityEvent>, events:number}
+ let errorReason:string|undefined;
+ let myDepositsFilter:boolean;
+ const limit = 20;
+ let numPages = 0;
+
+ const getReclaimUrl = (pegin:any) => {
+ return '/transactions/' + pegin.bitcoinTxid.payload.value.split('x')[1]
+ }
+
+ const getType = (eventType:string|undefined) => {
+ return (eventType === 'mint') ? 'deposit' : 'withdrawal'
+ }
+
+ const getAddress = (event:any) => {
+ const type = getType(event.payloadData.eventType)
+ if (event.payloadData.eventType === 'mint') {
+ return event.recipient
+ }
+ }
+
+ const toggleMine = async () => {
+ sbtcEvents.results = []
+ sbtcEvents.events = 0
+ myDepositsFilter = !myDepositsFilter
+ if (!myDepositsFilter) await fetchPageCheck(0)
+ else fetchMine()
+ }
+
+ const fetchMine = async () => {
+ const mySbtcEvents = await findSbtcEventByBitcoinAddress($sbtcConfig.keySets[CONFIG.VITE_NETWORK].cardinal)
+ sbtcEvents.results = mySbtcEvents
+ sbtcEvents.events = mySbtcEvents.length
+ }
+
+ const fetchPage = async (evt:any) => {
+ await fetchPageCheck(evt.detail.page)
+ }
+
+ const fetchPageCheck = async (mypage:number) => {
+ if (mypage < 0) mypage = 0
+ if (mypage > numPages) mypage = numPages
+ sbtcEvents = await findSbtcEventsByPage(mypage, limit)
+ const resid = ((sbtcEvents.events % limit) > 0) ? 1 : 0;
+ numPages = Math.floor(sbtcEvents.events / limit) + resid;
+ }
+
+ onMount(async () => {
+ try {
+ let mypage = 0;
+ if ($page.url.searchParams.has('page')) {
+ mypage = Number($page.url.searchParams.get('page')) - 1
+ }
+ await fetchPageCheck(mypage)
+ inited = true;
+ } catch (err) {
+ errorReason = COMMS_ERROR;
+ }
+ })
+</script>
+
+
+<Table>
+ <TableHead class="!dark:bg-transparent !bg-transparent !text-base !text-white !normal-case border-b border-white">
+ <TableHeadCell class="!px-0 !font-normal">Amount (BTC)</TableHeadCell>
+ <TableHeadCell class="!px-0 !font-normal">Address</TableHeadCell>
+ <TableHeadCell class="!px-0 !font-normal">Type</TableHeadCell>
+ <TableHeadCell class="!px-0 !font-normal">Height</TableHeadCell>
+ <TableHeadCell class="!px-0 !font-normal !text-right">Actions</TableHeadCell>
+ </TableHead>
+ <TableBody>
+ {#each sbtcEvents.results as event}
+ <TableBodyRow class="!dark:bg-transparent !bg-transparent !border-transparent">
+ <TableBodyCell class="!px-0 !py-2 !font-extralight">{satsToBitcoin(event.payloadData.amountSats)}</TableBodyCell>
+ <TableBodyCell class="!px-0 !py-2 !font-extralight">
+ <div class="flex items-center">
+ <a class="" href={explorerBtcTxUrl(event.bitcoinTxid.payload.value.split('x')[1])} target="_blank" rel="noreferrer">{truncate(event.payloadData.spendingAddress, 5)}</a>
+ <div class="ms-3">
+ <ArrowUpRight class="h-6 w-6 text-white" target={explorerBtcTxUrl(event.bitcoinTxid.payload.value.split('x')[1])} />
+ </div>
+ </div>
+ </TableBodyCell>
+ <TableBodyCell class="!px-0 !py-2 !font-extralight">
+ <div class="flex items-center">
+ {#if getType(event.payloadData.eventType) === 'deposit'}
+ <span class="border px-3 py-1 rounded-2xl text-yellow-400 border-yellow-400">
+ {getType(event.payloadData.eventType)}
+ </span>
+ {:else}
+ <span class="border px-3 py-1 rounded-2xl text-blue-400 border-blue-400">
+ {getType(event.payloadData.eventType)}
+ </span>
+ {/if}
+ <div class="ms-3">
+ <ArrowUpRight class="h-6 w-6 text-white" target={explorerTxUrl(event.txid)} />
+ </div>
+ </div>
+ </TableBodyCell>
+ <TableBodyCell class="!px-0 !py-2 !font-extralight">{fmtNumber(event.payloadData.burnBlockHeight)}</TableBodyCell>
+ <TableBodyCell class="!px-0 !py-2 !font-extralight !text-right">
+ <a
+ type="button"
+ class="text-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50 hover:underline"
+ href={getReclaimUrl(event)}
+ >
+ View details
+ </a>
+ </TableBodyCell>
+ </TableBodyRow>
+ {/each}
+ </TableBody>
+</Table>
+
+<div class="py-6 border-t border-white flex items-center justify-between mt-6">
+ <div>
+ <p class="text-sm font-extralight">
+ Showing
+ <span class="font-normal">1</span>
+ to
+ <span class="font-normal">10</span>
+ of
+ <span class="font-normal">97</span>
+ results
+ </p>
+ </div>
+ <Paging on:fetch_page={fetchPage} {numPages} totalEvents={(sbtcEvents) ? sbtcEvents.events : 0} limit={20}/>
+</div>
+
diff --git a/src/lib/components/dashboard/wr/SignTransaction.svelte b/src/lib/components/dashboard/wr/SignTransaction.svelte
@@ -11,10 +11,11 @@ import { appDetails, getStacksNetwork, isLeather } from "$lib/stacks_connect";
 import Invoice from '../shared/Invoice.svelte';
 import { CONFIG } from '$lib/config';
 import { isHiro } from '$lib/stacks_connect'
-import { signTransaction, type SignTransactionOptions } from 'sats-connect'
+import { BitcoinNetworkType, signTransaction, type SignTransactionOptions } from 'sats-connect'
 import { broadcastTransaction } from '$lib/sbtc';
 import type { Transaction, TransactionOutput, TransactionInput } from '@scure/btc-signer';
 import { Tooltip } from 'flowbite-svelte';
+import Banner from '$lib/components/shared/Banner.svelte';
 
 export let peginRequest:BridgeTransactionType;
 export let addressInfo:any;
@@ -43,6 +44,18 @@ export async function requestSignPsbt() {
  signPsbtXverse()
  }
 }
+
+const getBbMessage = () => {
+ let msg = '<p>View transaction on the <a class="text-warning-700" href=' + getExplorerUrl() + ' target="_blank" rel="noreferrer">Bitcoin network</a>.</p>'
+ if (peginRequest.requestType === 'deposit') {
+ msg += ' <p>Once confirmed your sBTC will be deposited to your Stacks Wallet. </p>'
+ } else {
+ msg += '<p>Once confirmed your sBTC will be withdrawn from your Stacks Account and your Bitcoin returned. </p>'
+ }
+ return msg
+}
+
+
 export async function signPsbtHiro() {
  const outputs:TransactionOutput[] = getPsbtTxOutputs(transaction);
  const inpouts:TransactionInput[] = getPsbtTxInputs(transaction);
@@ -91,7 +104,7 @@ export async function signPsbtXverse() {
  const signPsbtOptions:SignTransactionOptions = {
  payload: {
  network: {
- type: (getStacksNetwork().isMainnet()) ? 'Mainnet' : 'Testnet'
+ type: (getStacksNetwork().isMainnet()) ? BitcoinNetworkType.Mainnet : BitcoinNetworkType.Testnet
  },
  message: 'Sign Transaction',
  psbtBase64: b64Tx,
@@ -171,34 +184,23 @@ onMount(async () => {
  <Invoice {peginRequest} {psbtHex} {psbtB64}/>
  {#if !broadcasted && !errorReason}
  <div class="flex w-full">
- <!--
- <div class="mt-6">
- <button on:click={() => updateTimeline()} class="text-center focus:ring-4 focus:outline-none justify-center text-base hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800 inline-flex w-full items-center gap-x-1.5 bg-primary-01 px-4 py-2 font-normal text-black rounded-xl border border-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50">Back</button>
- </div>
- -->
  {#if isWalletAddress()}
  <div class="mt-6 w-full flex">
  <div class="grow"><button on:click={() => requestSignPsbt()} class=" w-full text-center focus:ring-4 focus:outline-none justify-center text-base hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800 inline-flex items-center gap-x-1.5 bg-primary-01 px-4 py-2 font-normal text-black rounded-xl border border-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50">Sign & broadcast</button></div>
- <!--<div class=""><Icon src="{InformationCircle}" mini class="ml-2 shrink-0 h-5 w-5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50" aria-hidden="true" id="w-sign-label" /></div>-->
  </div>
  {/if}
  </div>
  {:else if broadcasted}
  <div class="my-3 text-2xl">
- <p>View transaction on the <a class="text-warning-700" href={getExplorerUrl()} target="_blank" rel="noreferrer">Bitcoin network</a>.</p>
- {#if peginRequest.requestType === 'deposit'}
- <p>Once confirmed your sBTC will be deposited to your Stacks Wallet. </p>
- {:else}
- <p>Once confirmed your sBTC will be withdrawn from your Stacks Account and your Bitcoin returned. </p>
- {/if}
+ <Banner bannerType={'info'} message={getBbMessage()}/>
  </div>
  {:else if errorReason}
- <div class="flex flex-col">
- <div class="my-5">
- {#if errorReason}<div class="text-warning-500"><p>{@html errorReason}</p></div>{/if}
+ <div class="mt-5 flex flex-col">
+ <div class="">
+ <Banner bannerType={'warning'} message={errorReason}/>
  </div>
  <div class="mt-6">
- <button on:click={() => updateTimeline()} class="text-center focus:ring-4 focus:outline-none justify-center text-base hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800 inline-flex w-full items-center gap-x-1.5 bg-primary-01 px-4 py-2 font-normal text-black rounded-xl border border-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50">Continue</button>
+ <button on:click={() => updateTimeline()} class="text-center focus:ring-4 focus:outline-none justify-center text-base hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800 inline-flex w-full items-center gap-x-1.5 bg-primary-01 px-4 py-2 font-normal text-black rounded-xl border border-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500/50">Back</button>
  </div>
  </div>
  {/if}

diff --git a/src/lib/components/shared/ArrowUpRight.svelte b/src/lib/components/shared/ArrowUpRight.svelte
@@ -8,7 +8,7 @@ let anchorClass = clazz + ' rounded-md bg-black flex items-center justify-center
 </script>
 
 <div class="ml-auto flex items-center">
-  <a title="Show in Explorer" href={target} class={anchorClass} target="_blank" >
-  <Icon src="{ArrowUpRight}" mini {clazz} aria-hidden="true" />
-  </a>
+ <a role="button" title="Show in Explorer" href={target} class={anchorClass} target="_blank" >
+ <Icon src="{ArrowUpRight}" mini {clazz} aria-hidden="true" />
+ </a>
 </div>