Swap widgets layout

package.json

@@ -45,6 +45,7 @@
     "vue": "2.7.14",
     "vue-class-component": "^7.2.6",
     "vue-echarts": "^6.7.3",
+    "vue-grid-layout": "^2.4.0",
     "vue-i18n": "^8.28.2",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.6.5",

src/App.vue

@@ -66,14 +66,8 @@ import AppHeader from '@/components/App/Header/AppHeader.vue';
 import AppMenu from '@/components/App/Menu/AppMenu.vue';
 import NodeErrorMixin from '@/components/mixins/NodeErrorMixin';
 import SoraLogo from '@/components/shared/Logo/Sora.vue';
-import {
-  PageNames,
-  Components,
-  Language,
-  BreakpointClass,
-  WalletPermissions,
-  LOCAL_STORAGE_LIMIT_PERCENTAGE,
-} from '@/consts';
+import { PageNames, Components, Language, WalletPermissions, LOCAL_STORAGE_LIMIT_PERCENTAGE } from '@/consts';
+import { BreakpointClass } from '@/consts/layout';
 import { getLocale } from '@/lang';
 import router, { goTo, lazyComponent } from '@/router';
 import { action, getter, mutation, state } from '@/store/decorators';
@@ -122,9 +116,9 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @state.settings.appConnection private appConnection!: NodesConnection;
   @state.settings.browserNotifPopupVisibility private browserNotifPopup!: boolean;
   @state.settings.browserNotifPopupBlockedVisibility private browserNotifPopupBlocked!: boolean;
+  @state.wallet.account.assetsToNotifyQueue private assetsToNotifyQueue!: Array<WhitelistArrayItem>;
+  @state.referrals.storageReferrer private storageReferrer!: string;
   @state.referrals.referrer private referrer!: string;
-  @state.referrals.storageReferrer storageReferrer!: string;
-  @state.wallet.account.assetsToNotifyQueue assetsToNotifyQueue!: Array<WhitelistArrayItem>;
   @state.settings.disclaimerVisibility disclaimerVisibility!: boolean;
   @state.router.loading pageLoading!: boolean;
 

src/components/App/Header/AppHeader.vue

@@ -25,7 +25,8 @@ import { Component, Mixins, Prop } from 'vue-property-decorator';
 
 import InternalConnectMixin from '../../../components/mixins/InternalConnectMixin';
 import PolkaswapLogo from '../../../components/shared/Logo/Polkaswap.vue';
-import { PageNames, Components, BreakpointClass } from '../../../consts';
+import { PageNames, Components } from '../../../consts';
+import { BreakpointClass } from '../../../consts/layout';
 import { lazyComponent, goTo } from '../../../router';
 import { state, getter } from '../../../store/decorators';
 

src/components/mixins/ScrollableTableMixin.ts

@@ -12,6 +12,8 @@ export default class ScrollableTableMixin extends Mixins(
   readonly FontSizeRate = WALLET_CONSTS.FontSizeRate;
   readonly FontWeightRate = WALLET_CONSTS.FontWeightRate;
 
+  private scrollbarWatcher: Nullable<FnWithoutArgs> = null;
+
   @Ref('table') readonly tableComponent!: any;
 
   get loadingState(): boolean {
@@ -39,6 +41,10 @@ export default class ScrollableTableMixin extends Mixins(
     });
   }
 
+  beforeDestroy(): void {
+    this.resetScrollbarWatcher();
+  }
+
   public handlePaginationClick(button: WALLET_CONSTS.PaginationButton): void {
     let current = 1; // First by default (instead of case WALLET_CONSTS.PaginationButton.First)
 
@@ -76,7 +82,7 @@ export default class ScrollableTableMixin extends Mixins(
     elTableBodyWrapper.appendChild(scrollbar.$el);
     scrollbarView.appendChild(elTableNativeTable);
 
-    this.$watch(
+    this.scrollbarWatcher = this.$watch(
       () => (scrollbar.$children[0] as any).moveX,
       () => {
         const scrollLeft = scrollbarWrap.scrollLeft;
@@ -88,4 +94,9 @@ export default class ScrollableTableMixin extends Mixins(
       }
     );
   }
+
+  private resetScrollbarWatcher(): void {
+    this.scrollbarWatcher?.();
+    this.scrollbarWatcher = null;
+  }
 }

src/components/pages/Burn/BurnDialog.vue

@@ -79,7 +79,6 @@ import type { AccountAsset, Asset } from '@sora-substrate/util/build/assets/type
     DialogBase: components.DialogBase,
     TokenLogo: components.TokenLogo,
     InfoLine: components.InfoLine,
-    SwapTransactionDetails: lazyComponent(Components.SwapTransactionDetails),
     TokenInput: lazyComponent(Components.TokenInput),
   },
 })

src/components/pages/Swap/Confirm.vue

@@ -1,5 +1,10 @@
 <template>
-  <dialog-base :visible.sync="isVisible" :title="t('swap.confirmSwap')" custom-class="dialog--confirm-swap">
+  <dialog-base
+    :visible.sync="isVisible"
+    :title="t('swap.confirmSwap')"
+    custom-class="dialog--confirm-swap"
+    append-to-body
+  >
     <div class="tokens">
       <div class="tokens-info-container">
         <span class="token-value">{{ formattedFromValue }}</span>

src/components/pages/Swap/LossWarningDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <dialog-base :visible.sync="isVisible">
+  <dialog-base :visible.sync="isVisible" append-to-body>
     <simple-notification
       optional
       modal-content

src/components/pages/Swap/Settings/Settings.vue

@@ -1,5 +1,5 @@
 <template>
-  <dialog-base :visible.sync="isVisible" :title="t('dexSettings.title')" custom-class="settings">
+  <dialog-base :visible.sync="isVisible" :title="t('dexSettings.title')" custom-class="settings" append-to-body>
     <swap-market-algorithm />
   </dialog-base>
 </template>

src/components/pages/Swap/Widget/Distribution.vue

@@ -1,5 +1,5 @@
 <template>
-  <base-widget :title="t('swap.route')">
+  <base-widget v-bind="$attrs" :title="t('swap.route')">
     <s-skeleton :loading="!swapPaths.length">
       <template #template>
         <div class="distribution">

src/components/pages/Swap/Widget/Form.vue

@@ -1,5 +1,5 @@
 <template>
-  <base-widget v-loading="parentLoading" class="swap-widget" :title="t('exchange.Swap')" primary-title>
+  <base-widget class="swap-widget" :title="t('exchange.Swap')" v-bind="$attrs">
     <template #filters>
       <swap-status-action-badge>
         <template #label>{{ t('marketText') }}:</template>
@@ -107,11 +107,7 @@
         </template>
       </s-button>
 
-      <swap-transaction-details
-        v-if="areTokensSelected && !hasZeroAmount"
-        class="info-line-container"
-        :info-only="false"
-      />
+      <swap-transaction-details v-if="areTokensSelected && !hasZeroAmount" :info-only="false" />
       <select-token
         :visible.sync="showSelectTokenDialog"
         :connected="isLoggedIn"

src/components/pages/Swap/Widget/Transactions.vue

@@ -1,8 +1,8 @@
 <template>
-  <base-widget extensive :title="tc('transactionText', 2)" class="swap-transactions-widget">
+  <base-widget v-bind="$attrs" :title="tc('transactionText', 2)" class="swap-transactions-widget">
     <s-table
       ref="table"
-      v-loading="loadingState"
+      v-loading="loading"
       :data="tableItems"
       :highlight-current-row="false"
       size="small"
@@ -19,7 +19,7 @@
           </div>
         </template>
       </s-table-column>
-      <s-table-column width="106" header-align="right" align="right">
+      <s-table-column header-align="right" align="right">
         <template #header>
           <span>{{ t('removeLiquidity.input') }}</span>
         </template>
@@ -31,7 +31,7 @@
           />
         </template>
       </s-table-column>
-      <s-table-column width="106" header-align="left" align="left">
+      <s-table-column header-align="left" align="left">
         <template #header>
           <span>{{ t('removeLiquidity.output') }}</span>
         </template>
@@ -43,7 +43,7 @@
           />
         </template>
       </s-table-column>
-      <s-table-column width="112" header-align="left" align="left">
+      <s-table-column header-align="left" align="left">
         <template #header>
           <span>{{ t('transfers.from') }}</span>
         </template>
@@ -58,7 +58,7 @@
           </div>
         </template>
       </s-table-column>
-      <s-table-column width="112" header-align="left" align="left">
+      <s-table-column header-align="left" align="left">
         <template #header>
           <span>{{ t('transfers.to') }}</span>
         </template>
@@ -96,7 +96,7 @@
       :current-page="currentPage"
       :page-amount="pageAmount"
       :total="total"
-      :loading="loadingState"
+      :loading="loading"
       :last-page="lastPage"
       @pagination-click="onPaginationClick"
     />
@@ -157,7 +157,7 @@ export default class SwapTransactionsWidget extends Mixins(ScrollableTableMixin,
     this.checkTriggerUpdate(curr, prev);
   }
 
-  pageAmount = 8; // override PaginationSearchMixin
+  pageAmount = 5; // override PaginationSearchMixin
 
   private readonly operations = [Operation.Swap];
   private readonly fromTimestamp = dayjs().subtract(1, 'month').startOf('day').unix(); // month ago, start of the day

src/components/shared/Chart/ChartSkeleton.vue

@@ -75,7 +75,7 @@ $skeleton-label-width: 34px;
 
   .chart {
     flex: 1;
-    min-height: 327px;
+    min-height: 260px;
 
     &-price {
       display: flex;

src/components/shared/SelectAsset/SelectToken.vue

@@ -1,5 +1,5 @@
 <template>
-  <dialog-base :visible.sync="isVisible" :title="t('selectToken.title')" custom-class="asset-select">
+  <dialog-base :visible.sync="isVisible" :title="t('selectToken.title')" custom-class="asset-select" append-to-body>
     <s-tabs :value="tabValue" class="s-tabs--exchange" type="rounded" @input="handleTabChange">
       <search-input
         ref="search"

src/components/shared/TransactionDetails.vue

@@ -2,16 +2,22 @@
   <div v-if="infoOnly">
     <slot />
   </div>
-  <div v-else class="transaction-details-wrapper">
-    <s-collapse>
-      <s-collapse-item>
-        <template #title>
-          <span>{{ t('transactionDetailsText') }}</span>
-        </template>
-        <slot></slot>
-      </s-collapse-item>
-    </s-collapse>
-  </div>
+  <el-popover
+    v-else
+    v-model="visible"
+    :visible-arrow="false"
+    placement="bottom"
+    popper-class="transaction-details-popper"
+    trigger="click"
+  >
+    <template #reference>
+      <div :class="['transaction-details', { visible }]" v-button>
+        <span>{{ t('transactionDetailsText') }}</span>
+        <s-icon :name="icon" size="16px" class="transaction-details-icon" />
+      </div>
+    </template>
+    <slot />
+  </el-popover>
 </template>
 
 <script lang="ts">
@@ -22,62 +28,49 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
 @Component
 export default class TransactionDetails extends Mixins(TranslationMixin) {
   @Prop({ default: true, type: Boolean }) readonly infoOnly!: boolean;
+
+  visible = false;
+
+  get icon(): string {
+    return this.visible ? 'arrows-chevron-top-24' : 'arrows-chevron-bottom-24';
+  }
 }
 </script>
 
 <style lang="scss">
-.transaction-details-wrapper {
-  .el-collapse-item__header {
-    display: flex;
-    text-transform: uppercase;
-    font-weight: 400;
-  }
-
-  .el-collapse-item__content {
-    padding-bottom: 0;
-  }
+.transaction-details-popper.el-popover.el-popper {
+  @include popper-content;
+  min-width: 420px;
+}
+</style>
 
-  .el-collapse-item__wrap {
-    margin-top: $inner-spacing-medium;
-  }
+<style lang="scss" scoped>
+.transaction-details {
+  cursor: pointer;
+  display: flex;
+  gap: $inner-spacing-tiny;
+  margin-top: $inner-spacing-medium;
 
-  .el-collapse.neumorphic .el-icon-arrow-right {
-    all: initial;
-    * {
-      all: unset;
-    }
+  font-size: var(--s-font-size-extra-small);
+  font-weight: 400;
+  text-transform: uppercase;
 
-    transition: transform 0.3s;
-    color: var(--s-color-base-content-tertiary);
-    margin-left: 7px;
-    height: 16px;
-    line-height: 1;
-    width: 13px;
-    position: relative;
+  &.visible {
+    color: var(--s-color-theme-accent);
   }
 
-  .el-collapse-item__header {
-    display: inline-flex;
-    line-height: 13px;
-    height: 14px;
-    font-size: var(--s-font-size-extra-small);
+  &:hover,
+  &:focus {
+    outline: none;
+    color: var(--s-color-theme-accent-hover);
 
-    .el-icon-arrow-right {
-      position: relative;
-
-      &:hover {
-        cursor: pointer;
-      }
+    .transaction-details-icon {
+      color: var(--s-color-base-content-secondary);
     }
   }
 
-  .el-collapse-item > div:first-child {
-    display: flex;
-    justify-content: center;
-  }
-
-  .info-line .el-tooltip {
-    margin-bottom: 4px !important;
+  &-icon {
+    @include icon-styles;
   }
 }
 </style>