add links dropdown, improve paddings

sora-xor · Mar 4, 2024 · 6f911bf · 6f911bf
1 parent a6edf2a
commit 6f911bf
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 88 deletions.
diff --git a/src/components/pages/Swap/TransactionsWidget.vue b/src/components/pages/Swap/TransactionsWidget.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-widget title="All trades" tooltip="Some text">
+  <base-widget extensive title="All trades" tooltip="Some text" class="swap-transactions-widget">
     <s-table
       ref="table"
       v-loading="loadingState"
@@ -27,15 +27,7 @@
           <formatted-address :value="row.address" :symbols="10" />
         </template>
       </s-table-column>
-      <s-table-column width="112">
-        <template #header>
-          <span>Tx ID</span>
-        </template>
-        <template v-slot="{ row }">
-          <formatted-address :value="row.id" :symbols="10" :tooltip-text="t('transaction.txId')" />
-        </template>
-      </s-table-column>
-      <s-table-column width="120" header-align="right" align="right">
+      <s-table-column width="120" header-align="left" align="left">
         <template #header>
           <span>Sold Token</span>
         </template>
@@ -50,7 +42,7 @@
           </div>
         </template>
       </s-table-column>
-      <s-table-column width="120" header-align="right" align="right">
+      <s-table-column width="120" header-align="left" align="left">
         <template #header>
           <span>Bought Token</span>
         </template>
@@ -65,22 +57,27 @@
           </div>
         </template>
       </s-table-column>
-      <s-table-column width="120" header-align="right" align="right">
+      <s-table-column width="140" header-align="center" align="center">
         <template #header>
-          <span>Sold AMount</span>
+          <span>Sold Amount</span>
         </template>
         <template v-slot="{ row }">
           <formatted-amount value-can-be-hidden :font-size-rate="FontSizeRate.SMALL" :value="row.inputAmount" />
         </template>
       </s-table-column>
-      <s-table-column width="120" header-align="right" align="right">
+      <s-table-column width="140" header-align="center" align="center">
         <template #header>
           <span>Bought Amount</span>
         </template>
         <template v-slot="{ row }">
           <formatted-amount value-can-be-hidden :font-size-rate="FontSizeRate.SMALL" :value="row.outputAmount" />
         </template>
       </s-table-column>
+      <s-table-column width="40">
+        <template v-slot="{ row }">
+          <links-dropdown v-if="row.links.length" :links="row.links" />
+        </template>
+      </s-table-column>
     </s-table>
 
     <history-pagination
@@ -105,14 +102,13 @@ import { Component, Mixins, Watch } from 'vue-property-decorator';
 import ScrollableTableMixin from '@/components/mixins/ScrollableTableMixin';
 import { Components } from '@/consts';
 import { lazyComponent } from '@/router';
-import { getter } from '@/store/decorators';
-import { debouncedInputHandler } from '@/utils';
+import { getter, state } from '@/store/decorators';
+import { debouncedInputHandler, soraExplorerLinks, showMostFittingValue } from '@/utils';
 
 import type { HistoryItem } from '@sora-substrate/util';
 import type { Asset, AccountAsset } from '@sora-substrate/util/build/assets/types';
 
 type TableItem = {
-  id: string;
   address: string;
   inputAsset: Nullable<Asset>;
   inputAssetSymbol: string;
@@ -124,20 +120,24 @@ type TableItem = {
     date: string;
     time: string;
   };
+  links: WALLET_CONSTS.ExplorerLink[];
 };
 
 const UPDATE_INTERVAL = 15_000;
 
 @Component({
   components: {
     BaseWidget: lazyComponent(Components.BaseWidget),
+    LinksDropdown: lazyComponent(Components.LinksDropdown),
     TokenLogo: components.TokenLogo,
     FormattedAmount: components.FormattedAmount,
     FormattedAddress: components.FormattedAddress,
     HistoryPagination: components.HistoryPagination,
   },
 })
 export default class SwapTransactionsWidget extends Mixins(ScrollableTableMixin) {
+  @state.wallet.settings.soraNetwork private soraNetwork!: Nullable<WALLET_CONSTS.SoraNetwork>;
+
   @getter.swap.tokenFrom tokenFrom!: Nullable<AccountAsset>;
   @getter.swap.tokenTo tokenTo!: Nullable<AccountAsset>;
   @getter.wallet.account.assetsDataTable private assetsDataTable!: WALLET_TYPES.AssetsTable;
@@ -170,18 +170,19 @@ export default class SwapTransactionsWidget extends Mixins(ScrollableTableMixin)
   // override ScrollableTableMixin
   get tableItems(): TableItem[] {
     return this.transactions.map((item) => {
-      const id = item.id ?? '';
+      const txId = item.id ?? '';
+      const blockId = item.blockId ?? '';
       const address = item.from ?? '';
       const inputAsset = item.assetAddress ? this.assetsDataTable[item.assetAddress] : null;
       const inputAssetSymbol = inputAsset?.symbol ?? '??';
       const outputAsset = item.asset2Address ? this.assetsDataTable[item.asset2Address] : null;
       const outputAssetSymbol = outputAsset?.symbol ?? '??';
-      const inputAmount = new FPNumber(item.amount ?? 0).toLocaleString();
-      const outputAmount = new FPNumber(item.amount2 ?? 0).toLocaleString();
+      const inputAmount = showMostFittingValue(new FPNumber(item.amount ?? 0));
+      const outputAmount = showMostFittingValue(new FPNumber(item.amount2 ?? 0));
       const date = dayjs(item.startTime);
+      const links = soraExplorerLinks(this.soraNetwork, txId, blockId);
 
       return {
-        id,
         address,
         inputAsset,
         inputAssetSymbol,
@@ -190,6 +191,7 @@ export default class SwapTransactionsWidget extends Mixins(ScrollableTableMixin)
         inputAmount,
         outputAmount,
         datetime: { date: date.format('M/DD'), time: date.format('HH:mm:ss') },
+        links,
       };
     });
   }
@@ -309,3 +311,11 @@ export default class SwapTransactionsWidget extends Mixins(ScrollableTableMixin)
 <style lang="scss">
 @include explore-table;
 </style>
+
+<style lang="scss" scoped>
+.swap-transactions-widget {
+  .explore-table-pagination {
+    padding: 0 $inner-spacing-mini $inner-spacing-medium;
+  }
+}
+</style>
diff --git a/...components/pages/Bridge/LinksDropdown.vue → src/components/shared/LinksDropdown.vue b/...components/pages/Bridge/LinksDropdown.vue → src/components/shared/LinksDropdown.vue
@@ -30,17 +30,13 @@ import { Component, Mixins, Prop } from 'vue-property-decorator';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 
 @Component
-export default class BridgeLinksDropdown extends Mixins(TranslationMixin) {
+export default class LinksDropdown extends Mixins(TranslationMixin) {
   @Prop({ default: () => [], type: Array }) readonly links!: Array<WALLET_CONSTS.ExplorerLink>;
 }
 </script>
 
 <style lang="scss">
 .s-dropdown--hash-menu {
-  position: absolute;
-  z-index: $app-content-layer;
-  top: 0;
-  bottom: 0;
   margin-top: auto;
   margin-bottom: auto;
   padding: 0;
@@ -52,7 +48,6 @@ export default class BridgeLinksDropdown extends Mixins(TranslationMixin) {
   text-align: center;
   font-size: var(--s-size-mini);
 
-  right: $inner-spacing-medium;
   &,
   .el-tooltip {
     &:focus {

diff --git a/src/consts/index.ts b/src/consts/index.ts
@@ -194,7 +194,6 @@ export enum Components {
   BridgeSelectAsset = 'pages/Bridge/SelectAsset',
   BridgeSelectNetwork = 'pages/Bridge/SelectNetwork',
   BridgeSelectAccount = 'pages/Bridge/SelectAccount',
-  BridgeLinksDropdown = 'pages/Bridge/LinksDropdown',
   BridgeLimitCard = 'pages/Bridge/LimitCard',
   BridgeAccountPanel = 'pages/Bridge/AccountPanel',
   // Moonpay Page
@@ -241,13 +240,14 @@ export enum Components {
   WalletAboutNetworkDialog = 'pages/Wallet/AboutNetworkDialog',
   // Shared
   GenericPageHeader = 'shared/GenericPageHeader',
-  TokensRow = 'shared/TokensRow',
+  LinksDropdown = 'shared/LinksDropdown',
   PairTokenLogo = 'shared/PairTokenLogo',
-  PriceChange = 'shared/PriceChange',
-  ValueStatusWrapper = 'shared/ValueStatusWrapper',
-  TransactionDetails = 'shared/TransactionDetails',
   PoolInfo = 'shared/PoolInfo',
+  PriceChange = 'shared/PriceChange',
   StatusBadge = 'shared/StatusBadge',
+  TransactionDetails = 'shared/TransactionDetails',
+  TokensRow = 'shared/TokensRow',
+  ValueStatusWrapper = 'shared/ValueStatusWrapper',
   // Shared Widgets
   BaseWidget = 'shared/Widget/Base',
   IFrameWidget = 'shared/Widget/IFrame',

diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
@@ -470,10 +470,6 @@ $button-custom-shadow: -1px -1px 5px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0,
         margin-right: $inner-spacing-mini;
       }
     }
-    &-pagination {
-      display: flex;
-      margin-top: $inner-spacing-medium;
-    }
   }
 
   // el-table style overrides
@@ -497,17 +493,33 @@ $button-custom-shadow: -1px -1px 5px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0,
       background-color: transparent;
     }
 
+    &:not(.el-table--border) {
+      tr {
+        td, th {
+          & > .cell {
+            padding: $inner-spacing-tiny $inner-spacing-mini;
+          }
+          &:first-child > .cell {
+            padding-left: $inner-spacing-medium;
+          }
+          &:last-child > .cell {
+            padding-right: $inner-spacing-medium;
+          }
+        }
+      }
+    }
+
     &, &.el-table--enable-row-hover {
-      tr,
-      th {
-        &,
-        &:hover,
-        &.hover-row {
-          & > td,
-          & > th {
-            background: var(--s-color-utility-surface);
-            .cell {
-              padding: $inner-spacing-tiny $inner-spacing-mini;
+      .el-table__body,
+      .el-table__header {
+        tr,
+        th {
+          &,
+          &:hover,
+          &.hover-row {
+            & > td,
+            & > th {
+              background-color: var(--s-color-utility-surface);
             }
           }
         }

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,7 +1,7 @@
 import { FPNumber, CodecString } from '@sora-substrate/util';
 import { isNativeAsset } from '@sora-substrate/util/build/assets';
 import { XOR } from '@sora-substrate/util/build/assets/consts';
-import { api, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
+import { api, WALLET_CONSTS, getExplorerLinks } from '@soramitsu/soraneo-wallet-web';
 import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
 import debounce from 'lodash/debounce';
 
@@ -383,3 +383,46 @@ export const sortPools = <T extends Asset>(a: PoolAssets<T>, b: PoolAssets<T>) =
 };
 
 export const calcElScrollGutter: () => number = scrollbarWidth;
+
+export const soraExplorerLinks = (
+  soraNetwork: Nullable<WALLET_CONSTS.SoraNetwork>,
+  transactionHash: Nullable<string>,
+  blockHash: Nullable<string>
+): Array<WALLET_CONSTS.ExplorerLink> => {
+  if (!soraNetwork) return [];
+
+  const baseLinks = getExplorerLinks(soraNetwork);
+  const txId = transactionHash || blockHash;
+
+  if (!(baseLinks.length && txId)) {
+    return [];
+  }
+
+  if (!transactionHash) {
+    // txId is block
+    return baseLinks.map(({ type, value }) => {
+      const link = { type } as WALLET_CONSTS.ExplorerLink;
+      if (type === WALLET_CONSTS.ExplorerType.Polkadot) {
+        link.value = `${value}/${txId}`;
+      } else {
+        link.value = `${value}/block/${txId}`;
+      }
+      return link;
+    });
+  }
+
+  return baseLinks
+    .map(({ type, value }) => {
+      const link = { type } as WALLET_CONSTS.ExplorerLink;
+      if (type === WALLET_CONSTS.ExplorerType.Sorascan) {
+        link.value = `${value}/transaction/${txId}`;
+      } else if (type === WALLET_CONSTS.ExplorerType.Subscan) {
+        link.value = `${value}/extrinsic/${txId}`;
+      } else if (blockHash) {
+        // ExplorerType.Polkadot
+        link.value = `${value}/${blockHash}`;
+      }
+      return link;
+    })
+    .filter((value) => !!value.value); // Polkadot explorer won't be shown without block
+};