From 6f911bfe3703560028af7bcf41230808d9db3539 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Mon, 4 Mar 2024 16:08:09 +0300
Subject: [PATCH] add links dropdown, improve paddings

---
 .../pages/Swap/TransactionsWidget.vue         | 52 +++++++++-------
 .../Bridge => shared}/LinksDropdown.vue       |  7 +--
 src/consts/index.ts                           | 10 ++--
 src/styles/_mixins.scss                       | 40 ++++++++-----
 src/utils/index.ts                            | 45 +++++++++++++-
 src/views/BridgeTransaction.vue               | 59 ++++++-------------
 src/views/Explore/Books.vue                   |  1 -
 7 files changed, 126 insertions(+), 88 deletions(-)
 rename src/components/{pages/Bridge => shared}/LinksDropdown.vue (88%)

diff --git a/src/components/pages/Swap/TransactionsWidget.vue b/src/components/pages/Swap/TransactionsWidget.vue
index 556371ea2..83bf33347 100644
--- 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,15 +57,15 @@
           </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>
@@ -81,6 +73,11 @@
           <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,6 +120,7 @@ type TableItem = {
     date: string;
     time: string;
   };
+  links: WALLET_CONSTS.ExplorerLink[];
 };
 
 const UPDATE_INTERVAL = 15_000;
@@ -131,6 +128,7 @@ const UPDATE_INTERVAL = 15_000;
 @Component({
   components: {
     BaseWidget: lazyComponent(Components.BaseWidget),
+    LinksDropdown: lazyComponent(Components.LinksDropdown),
     TokenLogo: components.TokenLogo,
     FormattedAmount: components.FormattedAmount,
     FormattedAddress: components.FormattedAddress,
@@ -138,6 +136,8 @@ const UPDATE_INTERVAL = 15_000;
   },
 })
 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/src/components/pages/Bridge/LinksDropdown.vue b/src/components/shared/LinksDropdown.vue
similarity index 88%
rename from src/components/pages/Bridge/LinksDropdown.vue
rename to src/components/shared/LinksDropdown.vue
index e95a489a4..f47475cb6 100644
--- a/src/components/pages/Bridge/LinksDropdown.vue
+++ b/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
index 00009eb0a..85d8a2583 100644
--- 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
index c69696de8..5e4ea3e55 100644
--- 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
index 8e595b890..981657683 100644
--- 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
+};
diff --git a/src/views/BridgeTransaction.vue b/src/views/BridgeTransaction.vue
index 271828bc9..1baebc5ee 100644
--- a/src/views/BridgeTransaction.vue
+++ b/src/views/BridgeTransaction.vue
@@ -45,7 +45,7 @@
           :tooltip="txExternalAccountCopyTooltip"
           @click="handleCopyAddress(txExternalAccount, $event)"
         />
-        <bridge-links-dropdown v-if="externalAccountLinks.length" :links="externalAccountLinks" />
+        <links-dropdown v-if="externalAccountLinks.length" :links="externalAccountLinks" />
       </div>
 
       <info-line :class="failedClass" :label="t('bridgeTransaction.networkInfo.status')" :value="transactionStatus" />
@@ -111,7 +111,7 @@
           :tooltip="hashCopyTooltip"
           @click="handleCopyAddress(txInternalHash, $event)"
         />
-        <bridge-links-dropdown v-if="soraExplorerLinks.length" :links="soraExplorerLinks" />
+        <links-dropdown v-if="soraExplorerLinks.length" :links="soraExplorerLinks" />
       </div>
 
       <div v-if="txParachainBlockId" class="transaction-hash-container transaction-hash-container--with-dropdown">
@@ -128,7 +128,7 @@
           :tooltip="hashCopyTooltip"
           @click="handleCopyAddress(txParachainBlockId, $event)"
         />
-        <bridge-links-dropdown v-if="parachainExplorerLinks.length" :links="parachainExplorerLinks" />
+        <links-dropdown v-if="parachainExplorerLinks.length" :links="parachainExplorerLinks" />
       </div>
 
       <div v-if="txExternalHash" class="transaction-hash-container transaction-hash-container--with-dropdown">
@@ -141,7 +141,7 @@
           :tooltip="hashCopyTooltip"
           @click="handleCopyAddress(txExternalHash, $event)"
         />
-        <bridge-links-dropdown v-if="externalExplorerLinks.length" :links="externalExplorerLinks" />
+        <links-dropdown v-if="externalExplorerLinks.length" :links="externalExplorerLinks" />
       </div>
 
       <s-button
@@ -201,7 +201,12 @@ import NetworkFormatterMixin from '@/components/mixins/NetworkFormatterMixin';
 import { Components, PageNames, ZeroStringValue } from '@/consts';
 import router, { lazyComponent } from '@/router';
 import { action, state, getter, mutation } from '@/store/decorators';
-import { hasInsufficientBalance, hasInsufficientXorForFee, hasInsufficientNativeTokenForFee } from '@/utils';
+import {
+  hasInsufficientBalance,
+  hasInsufficientXorForFee,
+  hasInsufficientNativeTokenForFee,
+  soraExplorerLinks,
+} from '@/utils';
 import { isOutgoingTransaction, isUnsignedTx } from '@/utils/bridge/common/utils';
 import { subBridgeApi } from '@/utils/bridge/sub/api';
 
@@ -215,7 +220,7 @@ const FORMATTED_HASH_LENGTH = 24;
   components: {
     GenericPageHeader: lazyComponent(Components.GenericPageHeader),
     ConfirmBridgeTransactionDialog: lazyComponent(Components.ConfirmBridgeTransactionDialog),
-    BridgeLinksDropdown: lazyComponent(Components.BridgeLinksDropdown),
+    LinksDropdown: lazyComponent(Components.LinksDropdown),
     FormattedAmount: components.FormattedAmount,
     InfoLine: components.InfoLine,
   },
@@ -562,40 +567,7 @@ export default class BridgeTransaction extends Mixins(
   }
 
   get soraExplorerLinks(): Array<WALLET_CONSTS.ExplorerLink> {
-    if (!this.soraNetwork) {
-      return [];
-    }
-    const baseLinks = getExplorerLinks(this.soraNetwork);
-    const txId = this.txSoraId || this.txSoraBlockId;
-    if (!(baseLinks.length && txId)) {
-      return [];
-    }
-    if (!this.txSoraId) {
-      // 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 (this.txSoraBlockId) {
-          // ExplorerType.Polkadot
-          link.value = `${value}/${this.txSoraBlockId}`;
-        }
-        return link;
-      })
-      .filter((value) => !!value.value); // Polkadot explorer won't be shown without block
+    return soraExplorerLinks(this.soraNetwork, this.txSoraId, this.txSoraBlockId);
   }
 
   get externalAccountLinks(): Array<WALLET_CONSTS.ExplorerLink> {
@@ -747,6 +719,13 @@ $header-font-size: var(--s-heading3-font-size);
       .s-button--hash-copy {
         right: calc(#{$inner-spacing-medium} + var(--s-size-mini));
       }
+      .s-dropdown--hash-menu {
+        position: absolute;
+        z-index: $app-content-layer;
+        top: 0;
+        bottom: 0;
+        right: $inner-spacing-medium;
+      }
     }
     i {
       font-weight: 600;
diff --git a/src/views/Explore/Books.vue b/src/views/Explore/Books.vue
index e7a2fd33b..27d2e1e68 100644
--- a/src/views/Explore/Books.vue
+++ b/src/views/Explore/Books.vue
@@ -126,7 +126,6 @@
 <script lang="ts">
 import { FPNumber } from '@sora-substrate/util';
 import { components } from '@soramitsu/soraneo-wallet-web';
-import { SortDirection } from '@soramitsu-ui/ui-vue2/lib/components/Table/consts';
 import { Component, Mixins } from 'vue-property-decorator';
 
 import ExplorePageMixin from '@/components/mixins/ExplorePageMixin';