Merge remote-tracking branch 'origin/develop' into feature/swap-layout

sora-xor · Mar 25, 2024 · 25b5f22 · 25b5f22
2 parents d272516 + 357bdbf
commit 25b5f22
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 70 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -555,24 +555,6 @@ i.icon-divider {
     justify-content: center;
   }
 }
-
-@include desktop {
-  .app-main {
-    &.app-main--swap {
-      .app-menu {
-        &:not(.collapsed) {
-          position: relative;
-        }
-
-        &.collapsed {
-          & + .app-body {
-            margin-left: 74px;
-          }
-        }
-      }
-    }
-  }
-}
 </style>
 
 <style lang="scss" scoped>

diff --git a/src/components/pages/Swap/Widget/Chart.vue b/src/components/pages/Swap/Widget/Chart.vue
@@ -0,0 +1,24 @@
+<template>
+  <price-chart-widget :base-asset="tokenFrom" :quote-asset="tokenTo" :is-available="isAvailable" />
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator';
+
+import { Components } from '@/consts';
+import { lazyComponent } from '@/router';
+import { getter, state } from '@/store/decorators';
+
+import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
+
+@Component({
+  components: {
+    PriceChartWidget: lazyComponent(Components.PriceChartWidget),
+  },
+})
+export default class SwapChartWidget extends Mixins() {
+  @state.swap.isAvailable isAvailable!: boolean;
+  @getter.swap.tokenFrom tokenFrom!: Nullable<AccountAsset>;
+  @getter.swap.tokenTo tokenTo!: Nullable<AccountAsset>;
+}
+</script>
diff --git a/src/components/pages/Swap/Widget/Transactions.vue b/src/components/pages/Swap/Widget/Transactions.vue
@@ -8,14 +8,6 @@
       size="small"
       class="explore-table"
     >
-      <s-table-column width="48" header-align="center">
-        <template #header>
-          <s-icon name="basic-eye-no-24" size="16px" />
-        </template>
-        <template v-slot="{ row }">
-          <links-dropdown v-if="row.links.length" :links="row.links" />
-        </template>
-      </s-table-column>
       <s-table-column width="76">
         <template #header>
           <span>{{ t('transaction.startTime') }}</span>
@@ -27,15 +19,31 @@
           </div>
         </template>
       </s-table-column>
-      <s-table-column>
+      <s-table-column header-align="right" align="right">
         <template #header>
-          <span>{{ tc('accountText', 1) }}</span>
+          <span>{{ t('removeLiquidity.input') }}</span>
         </template>
         <template v-slot="{ row }">
-          <formatted-address :value="row.address" :symbols="8" />
+          <formatted-amount
+            class="explore-table-item-token"
+            :font-size-rate="FontSizeRate.SMALL"
+            :value="row.inputAmount"
+          />
         </template>
       </s-table-column>
       <s-table-column header-align="left" align="left">
+        <template #header>
+          <span>{{ t('removeLiquidity.output') }}</span>
+        </template>
+        <template v-slot="{ row }">
+          <formatted-amount
+            class="explore-table-item-token"
+            :font-size-rate="FontSizeRate.SMALL"
+            :value="row.outputAmount"
+          />
+        </template>
+      </s-table-column>
+      <s-table-column width="112" header-align="left" align="left">
         <template #header>
           <span>{{ t('transfers.from') }}</span>
         </template>
@@ -50,7 +58,7 @@
           </div>
         </template>
       </s-table-column>
-      <s-table-column header-align="left" align="left">
+      <s-table-column width="112" header-align="left" align="left">
         <template #header>
           <span>{{ t('transfers.to') }}</span>
         </template>
@@ -65,28 +73,20 @@
           </div>
         </template>
       </s-table-column>
-      <s-table-column width="140" header-align="right" align="right">
+      <s-table-column width="94">
         <template #header>
-          <span>{{ t('removeLiquidity.input') }}</span>
+          <span>{{ tc('accountText', 1) }}</span>
         </template>
         <template v-slot="{ row }">
-          <formatted-amount
-            class="explore-table-item-token"
-            :font-size-rate="FontSizeRate.SMALL"
-            :value="row.inputAmount"
-          />
+          <formatted-address :value="row.address" :symbols="8" />
         </template>
       </s-table-column>
-      <s-table-column width="140" header-align="left" align="left">
+      <s-table-column width="48" header-align="center">
         <template #header>
-          <span>{{ t('removeLiquidity.output') }}</span>
+          <s-icon name="basic-eye-no-24" size="16px" />
         </template>
         <template v-slot="{ row }">
-          <formatted-amount
-            class="explore-table-item-token"
-            :font-size-rate="FontSizeRate.SMALL"
-            :value="row.outputAmount"
-          />
+          <links-dropdown v-if="row.links.length" :links="row.links" />
         </template>
       </s-table-column>
     </s-table>
@@ -215,7 +215,13 @@ 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((a, b) => (a < b ? -1 : a > b ? 1 : 0));
+    return filtered
+      .map((token) => token.address)
+      .sort((a, b) => {
+        if (a < b) return -1;
+        if (a > b) return 1;
+        return 0;
+      });
   }
 
   private createFilter(timestamp?: number) {
@@ -250,16 +256,16 @@ export default class SwapTransactionsWidget extends Mixins(ScrollableTableMixin)
   }
 
   private async fetchData(): Promise<void> {
-    const { pageAmount, currentPage } = this;
-
-    const variables: RequestVariables = {
-      filter: this.createFilter(this.fromTimestamp),
-      first: pageAmount,
-      offset: pageAmount * (currentPage - 1),
-    };
-
     await this.withLoading(async () => {
       await this.withParentLoading(async () => {
+        const { pageAmount, currentPage } = this;
+
+        const variables: RequestVariables = {
+          filter: this.createFilter(this.fromTimestamp),
+          first: pageAmount,
+          offset: pageAmount * (currentPage - 1),
+        };
+
         const { totalCount, transactions } = await this.requestData(variables);
 
         this.totalCount = totalCount;

diff --git a/src/consts/index.ts b/src/consts/index.ts
@@ -457,7 +457,6 @@ export const RewardsChildPages = [
 export const StakingChildPages = [
   StakingPageNames.Staking,
   SoraStakingPageNames.Overview,
-  SoraStakingPageNames.NewStake,
   SoraStakingPageNames.ValidatorsType,
   SoraStakingPageNames.SelectValidators,
 ];

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -1303,10 +1303,6 @@
             "title": "{Sora} Staking",
             "description": "Stake {XOR} tokens on {Sora} Network as a nominator to validate transactions and earn {VAL} token rewards."
         },
-        "newStake": {
-            "title": "Start staking",
-            "minStakeWarning": "The minimum stake to receive the reward is {min} {symbol}"
-        },
         "validators": {
             "save": "Save changes",
             "selected": "{selected}\/{total} selected",

diff --git a/src/lang/messages.ts b/src/lang/messages.ts
@@ -836,10 +836,6 @@ export default {
       description:
         'Stake {XOR} tokens on {Sora} Network as a nominator to validate transactions and earn {VAL} token rewards.',
     },
-    newStake: {
-      title: 'Start staking',
-      minStakeWarning: 'The minimum stake to receive the reward is {min} {symbol}',
-    },
     validators: {
       save: 'Save changes',
       selected: '{selected}/{total} selected',

diff --git a/src/modules/staking/sora/consts.ts b/src/modules/staking/sora/consts.ts
@@ -7,7 +7,6 @@ export const DAY_HOURS = 24;
 
 export enum SoraStakingPageNames {
   Overview = 'Overview',
-  NewStake = 'NewStake',
   ValidatorsType = 'ValidatorsType',
   SelectValidators = 'SelectValidators',
   DataContainer = 'DataContainer',

diff --git a/src/modules/staking/sora/views/Overview.vue b/src/modules/staking/sora/views/Overview.vue
@@ -342,7 +342,7 @@ export default class Overview extends Mixins(StakingMixin, mixins.LoadingMixin,
   }
 
   stakeNew() {
-    router.push({ name: SoraStakingPageNames.NewStake });
+    router.push({ name: SoraStakingPageNames.SelectValidators });
   }
 
   stakeMore() {

diff --git a/src/modules/staking/sora/views/ValidatorsType.vue b/src/modules/staking/sora/views/ValidatorsType.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <staking-header :previous-page="SoraStakingPageNames.NewStake">
+    <staking-header :previous-page="SoraStakingPageNames.Overview">
       {{ t('soraStaking.info.validators') }}
     </staking-header>
     <select-validators-mode @recommended="stakeWithSuggested" @selected="stakeWithSelected" />

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -147,11 +147,6 @@ const routes: Array<RouteConfig> = [
         name: SoraStakingPageNames.Overview,
         component: soraStakingLazyView(SoraStakingPageNames.Overview),
       },
-      {
-        path: '/staking/sora/new',
-        name: SoraStakingPageNames.NewStake,
-        component: soraStakingLazyView(SoraStakingPageNames.NewStake),
-      },
       {
         path: '/staking/sora/validators/type',
         name: SoraStakingPageNames.ValidatorsType,