merge last-swaps

src/App.vue

@@ -269,10 +269,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     window.addEventListener('resize', this.setResponsiveClassDebounced);
   }
 
-  private get isSwapPageWithCharts(): boolean {
-    return this.$route.name === PageNames.Swap && this.chartsEnabled;
-  }
-
   private get mobileCssClasses(): string[] | undefined {
     return getMobileCssClasses();
   }
@@ -281,10 +277,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     return this.$route.name === PageNames.About;
   }
 
-  get isCurrentPageTooWide(): boolean {
-    return this.isAboutPage || this.isSwapPageWithCharts || this.$route.name === PageNames.Tokens;
-  }
-
   get dsProviderClasses(): string[] | BreakpointClass {
     return this.mobileCssClasses?.length ? [...this.mobileCssClasses, this.responsiveClass] : this.responsiveClass;
   }
@@ -295,9 +287,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     if (this.$route.name) {
       cssClasses.push(`${baseClass}--${this.$route.name.toLowerCase()}`);
     }
-    if (this.isSwapPageWithCharts) {
-      cssClasses.push(`${baseClass}--has-charts`);
-    }
     return cssClasses;
   }
 
@@ -569,7 +558,7 @@ i.icon-divider {
 
 @include desktop {
   .app-main {
-    &.app-main--swap.app-main--has-charts {
+    &.app-main--swap {
       .app-menu {
         &:not(.collapsed) {
           position: relative;

src/components/mixins/ScrollableTableMixin.ts

@@ -33,8 +33,10 @@ export default class ScrollableTableMixin extends Mixins(
   }
 
   async mounted(): Promise<void> {
-    await this.$nextTick();
-    this.initScrollbar();
+    await this.withParentLoading(async () => {
+      await this.$nextTick();
+      this.initScrollbar();
+    });
   }
 
   public handlePaginationClick(button: WALLET_CONSTS.PaginationButton): void {

src/components/pages/Swap/TransactionDetails.vue

@@ -18,10 +18,6 @@
       </info-line>
       <info-line :label="t('swap.route')">
         <div class="swap-route">
-          <swap-distribution>
-            <s-icon class="el-tooltip" name="info-16" size="14px" />
-          </swap-distribution>
-
           <div class="swap-route-paths s-flex">
             <div v-for="(token, index) in swapRoute" class="swap-route-value" :key="token">
               <span>{{ token }}</span>
@@ -81,7 +77,6 @@ type RewardValue = {
   components: {
     ValueStatusWrapper: lazyComponent(Components.ValueStatusWrapper),
     TransactionDetails: lazyComponent(Components.TransactionDetails),
-    SwapDistribution: lazyComponent(Components.SwapDistribution),
     FormattedAmount: components.FormattedAmount,
     InfoLine: components.InfoLine,
   },
@@ -186,7 +181,6 @@ export default class SwapTransactionDetails extends Mixins(mixins.FormattedAmoun
   align-items: center;
   justify-content: space-between;
   gap: $inner-spacing-mini;
-  width: 100%;
 
   &-value {
     font-weight: 600;

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

@@ -1,5 +1,5 @@
 <template>
-  <el-popover :visible-arrow="false" placement="right-end" popper-class="swap-distribution-popper" trigger="click">
+  <base-widget :title="t('swap.route')">
     <ul class="distribution">
       <li v-for="{ input, output, amount, sources } in swapPaths" :key="input.address" class="distribution-step">
         <div class="distribution-asset">
@@ -30,10 +30,7 @@
         </div>
       </li>
     </ul>
-    <template #reference>
-      <slot />
-    </template>
-  </el-popover>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -42,6 +39,7 @@ import { FPNumber } from '@sora-substrate/util';
 import { components, mixins } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins } from 'vue-property-decorator';
 
+import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { Components } from '@/consts';
 import { lazyComponent } from '@/router';
 import { getter, state } from '@/store/decorators';
@@ -76,10 +74,11 @@ const MARKETS = {
   components: {
     TokenLogo: components.TokenLogo,
     FormattedAmount: components.FormattedAmount,
+    BaseWidget: lazyComponent(Components.BaseWidget),
     ValueStatusWrapper: lazyComponent(Components.ValueStatusWrapper),
   },
 })
-export default class SwapDistribution extends Mixins(mixins.FormattedAmountMixin) {
+export default class SwapDistributionWidget extends Mixins(mixins.FormattedAmountMixin, TranslationMixin) {
   @state.swap.distribution private distribution!: Distribution[][];
 
   @getter.assets.assetDataByAddress private getAsset!: (addr?: string) => Nullable<AccountAsset>;
@@ -127,12 +126,6 @@ export default class SwapDistribution extends Mixins(mixins.FormattedAmountMixin
 }
 </script>
 
-<style lang="scss">
-.swap-distribution-popper {
-  @include popper-content;
-}
-</style>
-
 <style lang="scss" scoped>
 $path-color: var(--s-color-base-content-tertiary);
 

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

@@ -215,13 +215,13 @@ export default class SwapFormWidget extends Mixins(
   @mutation.settings.setChartsEnabled private setChartsEnabled!: (value: boolean) => void;
   @mutation.swap.setFromValue private setFromValue!: (value: string) => void;
   @mutation.swap.setToValue private setToValue!: (value: string) => void;
-  @mutation.swap.setAmountWithoutImpact private setAmountWithoutImpact!: (amount: CodecString) => void;
+  @mutation.swap.setAmountWithoutImpact private setAmountWithoutImpact!: (amount?: CodecString) => void;
   @mutation.swap.setExchangeB private setExchangeB!: (isExchangeB: boolean) => void;
-  @mutation.swap.setLiquidityProviderFee private setLiquidityProviderFee!: (value: CodecString) => void;
-  @mutation.swap.setRewards private setRewards!: (rewards: Array<LPRewardsInfo>) => void;
-  @mutation.swap.setRoute private setRoute!: (route: Array<string>) => void;
-  @mutation.swap.setDistribution private setDistribution!: (distribution: Distribution[][]) => void;
-  @mutation.swap.selectDexId private selectDexId!: (dexId: DexId) => void;
+  @mutation.swap.setLiquidityProviderFee private setLiquidityProviderFee!: (value?: CodecString) => void;
+  @mutation.swap.setRewards private setRewards!: (rewards?: Array<LPRewardsInfo>) => void;
+  @mutation.swap.setRoute private setRoute!: (route?: Array<string>) => void;
+  @mutation.swap.setDistribution private setDistribution!: (distribution?: Distribution[][]) => void;
+  @mutation.swap.selectDexId private selectDexId!: (dexId?: DexId) => void;
   @mutation.swap.setSubscriptionPayload private setSubscriptionPayload!: (payload?: SwapQuoteData) => void;
 
   @action.swap.setTokenFromAddress private setTokenFromAddress!: (address?: string) => Promise<void>;
@@ -413,7 +413,17 @@ export default class SwapFormWidget extends Mixins(
 
   private runRecountSwapValues(): void {
     const value = this.isExchangeB ? this.toValue : this.fromValue;
-    if (!this.areTokensSelected || asZeroValue(value) || !this.swapQuote) return;
+
+    if (!this.areTokensSelected || asZeroValue(value) || !this.swapQuote) {
+      this.setAmountWithoutImpact();
+      this.setLiquidityProviderFee();
+      this.setRewards();
+      this.setRoute();
+      this.setDistribution();
+      this.selectDexId();
+      return;
+    }
+
     const setOppositeValue = this.isExchangeB ? this.setFromValue : this.setToValue;
     const resetOppositeValue = this.isExchangeB ? this.resetFieldFrom : this.resetFieldTo;
     const oppositeToken = (this.isExchangeB ? this.tokenFrom : this.tokenTo) as AccountAsset;

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

@@ -1,5 +1,5 @@
 <template>
-  <base-widget full extensive title="All trades" tooltip="Some text" class="swap-transactions-widget">
+  <base-widget extensive :title="tc('transactionText', 2)" class="swap-transactions-widget">
     <s-table
       ref="table"
       v-loading="loadingState"
@@ -65,7 +65,7 @@
           </div>
         </template>
       </s-table-column>
-      <s-table-column width="140" header-align="center" align="center">
+      <s-table-column width="140" header-align="right" align="right">
         <template #header>
           <span>Sold</span>
         </template>
@@ -77,7 +77,7 @@
           />
         </template>
       </s-table-column>
-      <s-table-column width="140" header-align="center" align="center">
+      <s-table-column width="140" header-align="left" align="left">
         <template #header>
           <span>Bought</span>
         </template>
@@ -134,6 +134,12 @@ type TableItem = {
   links: WALLET_CONSTS.ExplorerLink[];
 };
 
+type RequestVariables = Partial<{
+  filter: any;
+  first: number;
+  offset: number;
+}>;
+
 const UPDATE_INTERVAL = 15_000;
 
 @Component({
@@ -213,7 +219,7 @@ export default class SwapTransactionsWidget extends Mixins(ScrollableTableMixin)
   get assetsAddresses(): string[] {
     const filtered = [this.tokenFrom, this.tokenTo].filter((token) => !!token) as AccountAsset[];
 
-    return filtered.map((token) => token.address).sort();
+    return filtered.map((token) => token.address).sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
   }
 
   private createFilter(timestamp?: number) {
@@ -250,7 +256,7 @@ export default class SwapTransactionsWidget extends Mixins(ScrollableTableMixin)
   private async fetchData(): Promise<void> {
     const { pageAmount, currentPage } = this;
 
-    const variables = {
+    const variables: RequestVariables = {
       filter: this.createFilter(this.fromTimestamp),
       first: pageAmount,
       offset: pageAmount * (currentPage - 1),
@@ -267,14 +273,14 @@ export default class SwapTransactionsWidget extends Mixins(ScrollableTableMixin)
   }
 
   private async fetchDataUpdates(): Promise<void> {
-    const variables = { filter: this.createFilter(this.intervalTimestamp) };
+    const variables: RequestVariables = { filter: this.createFilter(this.intervalTimestamp) };
     const { transactions, totalCount } = await this.requestData(variables);
     this.transactions = [...transactions, ...this.transactions].slice(0, this.pageAmount);
     this.totalCount = this.totalCount + totalCount;
     this.updateIntervalTimestamp();
   }
 
-  private async requestData(variables): Promise<{ transactions: HistoryItem[]; totalCount: number }> {
+  private async requestData(variables: RequestVariables): Promise<{ transactions: HistoryItem[]; totalCount: number }> {
     const indexer = getCurrentIndexer();
     const response = await indexer.services.explorer.account.getHistory(variables);
 

src/components/shared/Button/SortButton.vue

@@ -75,5 +75,7 @@ export default class SortButton extends Vue {
   &--descending {
     transform: rotate(180deg);
   }
+
+  @include icon-styles($hoverColor: var(--s-color-theme-accent-hover));
 }
 </style>

src/components/shared/Chart/ChartSkeleton.vue

@@ -68,10 +68,14 @@ export default class ChartSkeleton extends Mixins(mixins.TranslationMixin) {
 $skeleton-label-width: 34px;
 
 .charts-container {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
   width: 100%;
 
   .chart {
-    height: calc(100% - 51px);
+    flex: 1;
+    min-height: 327px;
 
     &-price {
       display: flex;
@@ -83,9 +87,18 @@ $skeleton-label-width: 34px;
       line-height: var(--s-line-height-extra-small);
     }
   }
+
+  .el-skeleton {
+    display: flex;
+    flex: 1;
+  }
 }
 
 .charts-skeleton {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
+
   $margin-right: #{$inner-spacing-tiny};
   $skeleton-label-width-mobile: calc((100% - #{$margin-right} * 10) / 11);
   $skeleton-spacing: 18px;

src/components/shared/LinksDropdown.vue

@@ -51,7 +51,7 @@ export default class LinksDropdown extends Mixins(TranslationMixin) {
   &,
   .el-tooltip {
     &:focus {
-      outline: auto;
+      @include focus-outline($inner: true, $borderRadius: 50%);
     }
   }
 }

src/components/shared/TransactionDetails.vue

@@ -27,14 +27,20 @@ export default class TransactionDetails extends Mixins(TranslationMixin) {
 
 <style lang="scss">
 .transaction-details-wrapper {
-  margin-bottom: -24px;
-
   .el-collapse-item__header {
     display: flex;
     text-transform: uppercase;
     font-weight: 400;
   }
 
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+
+  .el-collapse-item__wrap {
+    margin-top: $inner-spacing-medium;
+  }
+
   .el-collapse.neumorphic .el-icon-arrow-right {
     all: initial;
     * {
@@ -55,7 +61,6 @@ export default class TransactionDetails extends Mixins(TranslationMixin) {
     line-height: 13px;
     height: 14px;
     font-size: 13px;
-    margin-bottom: 15px;
 
     .el-icon-arrow-right {
       position: relative;

src/components/shared/Widget/Base.vue

@@ -75,11 +75,7 @@ $left: $inner-spacing-medium;
 .base-widget {
   display: flex;
   flex-flow: column nowrap;
-
-  &.full {
-    width: 100%;
-    height: 100%;
-  }
+  align-items: normal;
 
   &-block {
     display: flex;
@@ -100,6 +96,7 @@ $left: $inner-spacing-medium;
     font-size: var(--s-font-size-medium);
     font-weight: 500;
     line-height: var(--s-line-height-medium);
+    text-transform: capitalize;
 
     &.primary {
       font-size: var(--s-font-size-large);

src/consts/index.ts

@@ -205,15 +205,15 @@ export enum Components {
   X1Dialog = 'pages/X1/X1Dialog',
   X1History = 'pages/X1/X1History',
   // Swap Page
-  SwapFormWidget = 'pages/Swap/Form/Widget',
-  SwapChartWidget = 'pages/Swap/ChartWidget',
-  SwapTransactionsWidget = 'pages/Swap/TransactionsWidget',
+  SwapFormWidget = 'pages/Swap/Widget/Form',
+  SwapChartWidget = 'pages/Swap/Widget/Chart',
+  SwapTransactionsWidget = 'pages/Swap/Widget/Transactions',
+  SwapDistributionWidget = 'pages/Swap/Widget/Distribution',
   SwapConfirm = 'pages/Swap/Confirm',
   SwapStatusActionBadge = 'pages/Swap/StatusActionBadge',
   SwapTransactionDetails = 'pages/Swap/TransactionDetails',
   SwapSettings = 'pages/Swap/Settings/Settings',
   SwapLossWarningDialog = 'pages/Swap/LossWarningDialog',
-  SwapDistribution = 'pages/Swap/Distribution',
   // Order Book
   BookWidget = 'pages/OrderBook/BookWidget',
   SetLimitOrderWidget = 'pages/OrderBook/SetLimitOrderWidget',