Merge remote-tracking branch 'origin/main' into feat/bridge-ui-v2--cl…

…ose-dialogs-with-esc
taikoxyz · Sep 18, 2023 · a11c1e7 · a11c1e7
2 parents 5ef905b + 6688784
commit a11c1e7
Show file tree

Hide file tree

Showing 15 changed files with 287 additions and 59 deletions.
diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts
@@ -33,7 +33,7 @@ export const statusComponent = {
   minimumEthToClaim: 0.0001,
 };
 
-export const activitiesConfig = {
+export const transactionConfig = {
   pageSizeDesktop: 6,
   pageSizeMobile: 4,
   blurTransitionTime: 300,

diff --git a/packages/bridge-ui-v2/src/components/Activities/index.ts b/packages/bridge-ui-v2/src/components/Activities/index.ts
diff --git a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
@@ -2,7 +2,7 @@
   export type IconType =
     | 'bridge'
     | 'faucet'
-    | 'activities'
+    | 'transactions'
     | 'explorer'
     | 'guide'
     | 'bars-menu'
@@ -57,7 +57,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M4.65625 3.89672C6.73885 3.55347 8.87659 3.375 11.0555 3.375C13.2345 3.375 15.3722 3.55347 17.4548 3.89672C17.7693 3.94854 18 4.22039 18 4.53909V6.5249C18 7.0429 17.7942 7.53968 17.4279 7.90596L13.3637 11.9702C12.9974 12.3365 12.7916 12.8333 12.7916 13.3513V15.987C12.7916 16.5804 12.5219 17.1415 12.0586 17.5122L10.3772 18.8573C10.1817 19.0137 9.914 19.0442 9.68844 18.9357C9.46287 18.8273 9.31942 18.5992 9.31942 18.349V13.3513C9.31942 12.8333 9.11364 12.3365 8.74736 11.9702L4.68314 7.90596C4.31686 7.53968 4.11108 7.0429 4.11108 6.5249V4.53909C4.11108 4.22039 4.3418 3.94854 4.65625 3.89672Z" />
-  {:else if type === 'activities'}
+  {:else if type === 'transactions'}
     <path
       class={fillClass}
       fill-rule="evenodd"

diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
@@ -31,7 +31,7 @@
 
   $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
   $: isFaucetPage = $page.route.id === '/faucet';
-  $: isActivitiesPage = $page.route.id === '/activities';
+  $: isTransactionPage = $page.route.id === '/transactions';
 </script>
 
 <div class="drawer md:drawer-open">
@@ -84,9 +84,9 @@
               </LinkButton>
             </li>
             <li>
-              <LinkButton href="/activities" active={isActivitiesPage}>
-                <Icon type="activities" fillClass={getIconFillClass(isActivitiesPage)} />
-                <span>{$t('nav.activities')}</span>
+              <LinkButton href="/transactions" active={isTransactionPage}>
+                <Icon type="transactions" fillClass={getIconFillClass(isTransactionPage)} />
+                <span>{$t('nav.transactions')}</span>
               </LinkButton>
             </li>
             <li class="border-t border-t-divider-border pt-2">

diff --git a/...ponents/Activities/ChainSymbolName.svelte → ...nents/Transactions/ChainSymbolName.svelte b/...ponents/Activities/ChainSymbolName.svelte → ...nents/Transactions/ChainSymbolName.svelte
diff --git a/...nts/Activities/MobileDetailsDialog.svelte → ...s/Transactions/MobileDetailsDialog.svelte b/...nts/Activities/MobileDetailsDialog.svelte → ...s/Transactions/MobileDetailsDialog.svelte
@@ -58,7 +58,7 @@
           <h4 class="text-secondary-content">
             <div class="f-items-center space-x-1">
               <button on:click={openToolTip}>
-                <span>{$t('activities.header.status')}</span>
+                <span>{$t('transactions.header.status')}</span>
               </button>
               <button on:click={handleStatusDialog} class="flex justify-start content-center">
                 <Icon type="question-circle" />
@@ -70,12 +70,12 @@
           </div>
         </li>
         <li class="f-between-center">
-          <h4 class="text-secondary-content">{$t('activities.header.explorer')}</h4>
+          <h4 class="text-secondary-content">{$t('transactions.header.explorer')}</h4>
           <a
             class="flex justify-start content-center"
             href={`${chainConfig[Number(selectedItem.srcChainId)].urls.explorer}/tx/${selectedItem.hash}`}
             target="_blank">
-            {$t('activities.link.explorer')}
+            {$t('transactions.link.explorer')}
             <Icon type="arrow-top-right" />
           </a>
         </li>

diff --git a/...2/src/components/Activities/Status.svelte → ...src/components/Transactions/Status.svelte b/...2/src/components/Activities/Status.svelte → ...src/components/Transactions/Status.svelte
@@ -104,7 +104,7 @@
       const { explorer } = chainConfig[Number(bridgeTx.destChainId)].urls;
 
       infoToast(
-        $t('activities.actions.claim.tx', {
+        $t('transactions.actions.claim.tx', {
           values: {
             token: bridgeTx.symbol,
             url: `${explorer}/tx/${txHash}`,
@@ -116,7 +116,7 @@
 
       //Todo: just because we have a claim tx doesn't mean it was successful
       successToast(
-        $t('activities.actions.claim.success', {
+        $t('transactions.actions.claim.success', {
           values: {
             network: $network.name,
           },
@@ -133,10 +133,10 @@
           warningToast($t('messages.account.required'));
           break;
         case err instanceof UserRejectedRequestError:
-          warningToast($t('activities.actions.claim.rejected'));
+          warningToast($t('transactions.actions.claim.rejected'));
           break;
         case err instanceof InsufficientBalanceError:
-          errorToast($t('activities.errors.insufficient_balance'));
+          errorToast($t('transactions.errors.insufficient_balance'));
           break;
         case err instanceof InvalidProofError:
           errorToast($t('TODO: InvalidProofError'));
@@ -186,7 +186,7 @@
       const { explorer } = chainConfig[Number(bridgeTx.srcChainId)].urls;
 
       infoToast(
-        $t('activities.actions.release.tx', {
+        $t('transactions.actions.release.tx', {
           values: {
             token: bridgeTx.symbol,
             url: `${explorer}/tx/${txHash}`,
@@ -197,7 +197,7 @@
       await pendingTransactions.add(txHash, Number(bridgeTx.srcChainId));
 
       successToast(
-        $t('activities.actions.release.success', {
+        $t('transactions.actions.release.success', {
           values: {
             network: $network.name,
           },
@@ -211,7 +211,7 @@
           warningToast($t('messages.account.required'));
           break;
         case err instanceof UserRejectedRequestError:
-          warningToast($t('activities.actions.release_rejected'));
+          warningToast($t('transactions.actions.release_rejected'));
           break;
         case err instanceof InvalidProofError:
           errorToast($t('TODO: InvalidProofError'));
@@ -262,30 +262,30 @@
 <div class="Status f-items-center space-x-1">
   {#if !processable}
     <StatusDot type="pending" />
-    <span>{$t('activities.status.initiated.name')}</span>
+    <span>{$t('transactions.status.initiated.name')}</span>
   {:else if loading}
     <div class="f-items-center space-x-2">
       <Spinner />
-      <span>{$t(`activities.status.${loading}`)}</span>
+      <span>{$t(`transactions.status.${loading}`)}</span>
     </div>
   {:else if bridgeTxStatus === MessageStatus.NEW}
     <button class="status-btn" on:click={claim}>
-      {$t('activities.button.claim')}
+      {$t('transactions.button.claim')}
     </button>
   {:else if bridgeTxStatus === MessageStatus.RETRIABLE}
     <button class="status-btn" on:click={claim}>
-      {$t('activities.button.retry')}
+      {$t('transactions.button.retry')}
     </button>
   {:else if bridgeTxStatus === MessageStatus.DONE}
     <StatusDot type="success" />
-    <span>{$t('activities.status.claimed.name')}</span>
+    <span>{$t('transactions.status.claimed.name')}</span>
   {:else if bridgeTxStatus === MessageStatus.FAILED}
     <button class="status-btn" on:click={release}>
-      {$t('activities.button.release')}
+      {$t('transactions.button.release')}
     </button>
   {:else}
     <!-- TODO: look into this possible state -->
     <StatusDot type="error" />
-    <span>{$t('activities.status.error.name')}</span>
+    <span>{$t('transactions.status.error.name')}</span>
   {/if}
 </div>
diff --git a/...onents/Activities/StatusInfoDialog.svelte → ...ents/Transactions/StatusInfoDialog.svelte b/...onents/Activities/StatusInfoDialog.svelte → ...ents/Transactions/StatusInfoDialog.svelte
@@ -55,23 +55,23 @@
       </button>
     </div>
     <div class="w-full">
-      <h1 class="title-body-bold">{$t('activities.status.dialog.title')}</h1>
+      <h1 class="title-body-bold">{$t('transactions.status.dialog.title')}</h1>
     </div>
     <div class="inline-flex flex-col space-y-9 px-[37px]">
       <br />
-      {$t('activities.status.dialog.description')}
-      <h4 class={classes.headline}>{$t('activities.status.initiated.name')}</h4>
-      {$t('activities.status.initiated.description')}
-      <h4 class={classes.headline}>{$t('activities.status.claim.name')}</h4>
-      {$t('activities.status.claim.description')}
-      <h4 class={classes.headline}>{$t('activities.status.claimed.name')}</h4>
-      {$t('activities.status.claimed.description')}
-      <h4 class={classes.headline}>{$t('activities.status.retry.name')}</h4>
-      {$t('activities.status.retry.description')}
-      <h4 class={classes.headline}>{$t('activities.status.release.name')}</h4>
-      {$t('activities.status.release.description')}
-      <h4 class={classes.headline}>{$t('activities.status.failed.name')}</h4>
-      {$t('activities.status.failed.description')}
+      {$t('transactions.status.dialog.description')}
+      <h4 class={classes.headline}>{$t('transactions.status.initiated.name')}</h4>
+      {$t('transactions.status.initiated.description')}
+      <h4 class={classes.headline}>{$t('transactions.status.claim.name')}</h4>
+      {$t('transactions.status.claim.description')}
+      <h4 class={classes.headline}>{$t('transactions.status.claimed.name')}</h4>
+      {$t('transactions.status.claimed.description')}
+      <h4 class={classes.headline}>{$t('transactions.status.retry.name')}</h4>
+      {$t('transactions.status.retry.description')}
+      <h4 class={classes.headline}>{$t('transactions.status.release.name')}</h4>
+      {$t('transactions.status.release.description')}
+      <h4 class={classes.headline}>{$t('transactions.status.failed.name')}</h4>
+      {$t('transactions.status.failed.description')}
     </div>
 
     <!-- We catch key events aboe -->

diff --git a/.../components/Activities/Transaction.svelte → ...omponents/Transactions/Transaction.svelte b/.../components/Activities/Transaction.svelte → ...omponents/Transactions/Transaction.svelte
@@ -72,7 +72,7 @@
       class="flex justify-start py-3 link"
       href={`${chainConfig[Number(item.srcChainId)].urls.explorer}/tx/${item.hash}`}
       target="_blank">
-      {$t('activities.link.explorer')}
+      {$t('transactions.link.explorer')}
       <Icon type="arrow-top-right" fillClass="fill-primary-link" />
     </a>
   </div>

diff --git a/...c/components/Activities/Activities.svelte → ...mponents/Transactions/Transactions.svelte b/...c/components/Activities/Activities.svelte → ...mponents/Transactions/Transactions.svelte
@@ -9,7 +9,7 @@
   import OnAccount from '$components/OnAccount/OnAccount.svelte';
   import { Paginator } from '$components/Paginator';
   import { Spinner } from '$components/Spinner';
-  import { activitiesConfig } from '$config';
+  import { transactionConfig } from '$config';
   import { type BridgeTransaction, fetchTransactions } from '$libs/bridge';
   import { bridgeTxService } from '$libs/storage';
   import { account, network } from '$stores';
@@ -24,10 +24,10 @@
   let currentPage = 1;
 
   let isBlurred = false;
-  const transitionTime = activitiesConfig.blurTransitionTime;
+  const transitionTime = transactionConfig.blurTransitionTime;
 
   let totalItems = 0;
-  let pageSize = activitiesConfig.pageSizeDesktop;
+  let pageSize = transactionConfig.pageSizeDesktop;
 
   let loadingTxs = false;
 
@@ -85,11 +85,11 @@
     }
     if (error) {
       // Todo: handle different error scenarios
-      warningToast($t('activities.errors.relayer_offline'));
+      warningToast($t('transactions.errors.relayer_offline'));
     }
   };
 
-  $: pageSize = isDesktopOrLarger ? activitiesConfig.pageSizeDesktop : activitiesConfig.pageSizeMobile;
+  $: pageSize = isDesktopOrLarger ? transactionConfig.pageSizeDesktop : transactionConfig.pageSizeMobile;
 
   $: transactionsToShow = getTransactionsToShow(currentPage, pageSize, transactions);
 
@@ -106,21 +106,21 @@
 </script>
 
 <div class="flex flex-col justify-center w-full">
-  <Card title={$t('activities.title')} text={$t('activities.description')}>
+  <Card title={$t('transactions.title')} text={$t('transactions.description')}>
     <div class="space-y-[35px]">
       <ChainSelector 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-primary-content 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">{$t('transactions.header.from')}</div>
+            <div class="w-1/5 py-2">{$t('transactions.header.to')}</div>
+            <div class="w-1/5 py-2">{$t('transactions.header.amount')}</div>
             <div class="w-1/5 py-2 flex flex-row">
-              {$t('activities.header.status')}
+              {$t('transactions.header.status')}
               <StatusInfoDialog />
             </div>
-            <div class="w-1/5 py-2">{$t('activities.header.explorer')}</div>
+            <div class="w-1/5 py-2">{$t('transactions.header.explorer')}</div>
           </div>
           <div class="h-sep" />
         {/if}
@@ -144,7 +144,7 @@
 
         {#if renderNoTransactions}
           <div class="flex items-center justify-center text-primary-content h-[80px]">
-            <span class="pl-3">{$t('activities.no_transactions')}</span>
+            <span class="pl-3">{$t('transactions.no_transactions')}</span>
           </div>
         {/if}
       </div>

diff --git a/packages/bridge-ui-v2/src/components/Transactions/index.ts b/packages/bridge-ui-v2/src/components/Transactions/index.ts
@@ -0,0 +1 @@
+export { default as Transactions } from './Transactions.svelte';
diff --git a/...-ui-v2/src/components/Activities/state.ts → ...i-v2/src/components/Transactions/state.ts b/...-ui-v2/src/components/Activities/state.ts → ...i-v2/src/components/Transactions/state.ts
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
@@ -2,7 +2,7 @@
   "nav": {
     "bridge": "Bridge",
     "faucet": "Faucet",
-    "activities": "Activities",
+    "transactions": "Transactions",
     "explorer": "Explorer",
     "theme": "Theme",
     "guide": "Guide",
@@ -83,8 +83,8 @@
       "cancel": "Cancel"
     }
   },
-  "activities": {
-    "title": "Activities",
+  "transactions": {
+    "title": "Transactions",
     "description": "Track your bridge transactions here.",
     "header": {
       "explorer": "Explorer",

diff --git a/...-ui-v2/src/routes/activities/+page.svelte → ...i-v2/src/routes/transactions/+page.svelte b/...-ui-v2/src/routes/activities/+page.svelte → ...i-v2/src/routes/transactions/+page.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { Activities } from '$components/Activities';
   import { Page } from '$components/Page';
+  import { Transactions } from '$components/Transactions';
 </script>
 
 <Page>
-  <Activities />
+  <Transactions />
 </Page>