add distribution as widget, style fixes

sora-xor · Mar 5, 2024 · 0954fb9 · 0954fb9
1 parent 93b5d37
commit 0954fb9
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 38 deletions.
diff --git a/src/components/pages/Swap/Distribution.vue b/src/components/pages/Swap/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 SwapDistribution 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);
 

diff --git a/src/components/pages/Swap/Form/Widget.vue b/src/components/pages/Swap/Form/Widget.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;
@@ -577,8 +587,6 @@ export default class SwapFormWidget extends Mixins(
 
 <style lang="scss" scoped>
 .swap-widget {
-  max-width: $inner-window-width;
-
   @include buttons;
   @include full-width-button('action-button');
   @include vertical-divider('el-button--switch-tokens', $inner-spacing-medium);

diff --git a/src/components/pages/Swap/TransactionDetails.vue b/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;

diff --git a/src/components/shared/Chart/ChartSkeleton.vue b/src/components/shared/Chart/ChartSkeleton.vue
@@ -75,7 +75,7 @@ $skeleton-label-width: 34px;
     min-height: 293px;
 
     @include tablet {
-      min-height: 336px;
+      min-height: 317px;
     }
 
     &-price {

diff --git a/src/components/shared/TransactionDetails.vue b/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;

diff --git a/src/components/shared/Widget/Base.vue b/src/components/shared/Widget/Base.vue
@@ -76,6 +76,7 @@ $left: $inner-spacing-medium;
 .base-widget {
   display: flex;
   flex-flow: column nowrap;
+  align-items: normal;
 
   &-block {
     display: flex;

diff --git a/src/store/swap/mutations.ts b/src/store/swap/mutations.ts
@@ -1,6 +1,8 @@
+import { DexId } from '@sora-substrate/util/build/dex/consts';
 import { defineMutations } from 'direct-vuex';
 import omit from 'lodash/fp/omit';
 
+import { ZeroStringValue } from '@/consts';
 import { settingsStorage } from '@/utils/storage';
 
 import { initialState } from './state';
@@ -43,22 +45,22 @@ const mutations = defineMutations<SwapState>()({
   setToValue(state, value: string): void {
     state.toValue = value;
   },
-  setAmountWithoutImpact(state, amount: CodecString): void {
+  setAmountWithoutImpact(state, amount: CodecString = ZeroStringValue): void {
     state.amountWithoutImpact = amount;
   },
   setExchangeB(state, value: boolean): void {
     state.isExchangeB = value;
   },
-  setLiquidityProviderFee(state, value: CodecString): void {
+  setLiquidityProviderFee(state, value: CodecString = ZeroStringValue): void {
     state.liquidityProviderFee = value;
   },
-  setRewards(state, rewards: Array<LPRewardsInfo>): void {
+  setRewards(state, rewards: Array<LPRewardsInfo> = []): void {
     state.rewards = Object.freeze([...rewards]);
   },
-  setRoute(state, route: string[]): void {
+  setRoute(state, route: string[] = []): void {
     state.route = Object.freeze([...route]);
   },
-  setDistribution(state, distribution: Distribution[][]): void {
+  setDistribution(state, distribution: Distribution[][] = []): void {
     state.distribution = Object.freeze([...distribution]);
   },
   setSubscriptionPayload(state, payload?: SwapQuoteData): void {
@@ -70,7 +72,7 @@ const mutations = defineMutations<SwapState>()({
   setLiquiditySource(state, liquiditySource): void {
     state.liquiditySources = [liquiditySource];
   },
-  selectDexId(state, dexId: number) {
+  selectDexId(state, dexId: number = DexId.XOR) {
     state.selectedDexId = dexId;
   },
   setAllowLossPopup(state, flag: boolean) {

diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
@@ -47,6 +47,7 @@ $button-custom-shadow: -1px -1px 5px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0,
     line-height: var(--s-line-height-medium);
 
     &--footer {
+      align-items: flex-start;
       margin-top: $inner-spacing-tiny;
       margin-bottom: 0;
       min-height: $inner-spacing-mini * 2.625; // 21px

diff --git a/src/views/Swap.vue b/src/views/Swap.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="swap-container">
-    <swap-form-widget :parent-loading="parentLoading" />
+    <div class="column column--small">
+      <swap-form-widget :parent-loading="parentLoading" class="swap-form" />
+      <swap-distribution-widget />
+    </div>
     <div class="column">
       <swap-chart-widget :parent-loading="parentLoading" v-if="chartsEnabled" class="swap-chart" />
       <swap-transactions-widget :parent-loading="parentLoading" />
@@ -26,6 +29,7 @@ import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
     SwapFormWidget: lazyComponent(Components.SwapFormWidget),
     SwapChartWidget: lazyComponent(Components.SwapChartWidget),
     SwapTransactionsWidget: lazyComponent(Components.SwapTransactionsWidget),
+    SwapDistributionWidget: lazyComponent(Components.SwapDistribution),
   },
 })
 export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin, SelectedTokenRouteMixin) {
@@ -81,10 +85,21 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
   justify-content: center;
   align-items: flex-start;
   gap: $inner-spacing-medium;
+
+  .swap-chart,
+  .swap-form {
+    @include desktop {
+      min-height: 517px;
+    }
+  }
 }
 .column {
   display: flex;
   gap: $inner-spacing-medium;
   flex-flow: column nowrap;
+
+  &--small {
+    max-width: $inner-window-width;
+  }
 }
 </style>