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

sora-xor · May 13, 2024 · 7eb1605 · 7eb1605
2 parents d0583db + 3bfb128
commit 7eb1605
Show file tree

Hide file tree

Showing 51 changed files with 2,917 additions and 891 deletions.
diff --git a/package.json b/package.json
@@ -27,35 +27,35 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.33.1",
-    "@walletconnect/ethereum-provider": "^2.11.2",
+    "@soramitsu/soraneo-wallet-web": "1.34.3",
+    "@walletconnect/ethereum-provider": "^2.12.2",
     "@walletconnect/modal": "^2.6.2",
-    "core-js": "^3.36.0",
+    "core-js": "^3.37.0",
     "country-code-emoji": "^2.3.0",
     "country-flag-emoji-polyfill": "^0.1.8",
     "direct-vuex": "^0.12.1",
     "echarts": "^5.5.0",
     "email-validator": "^2.0.4",
-    "ethers": "6.8.0",
+    "ethers": "6.12.1",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "uuidv4": "^6.2.13",
     "vue": "2.7.14",
     "vue-class-component": "^7.2.6",
-    "vue-echarts": "^6.6.9",
+    "vue-echarts": "^6.7.1",
     "vue-grid-layout": "^2.4.0",
     "vue-i18n": "^8.28.2",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.23.9",
+    "@babel/runtime": "^7.24.5",
     "@types/electron-devtools-installer": "^2.2.5",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.6",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.21",
+    "@types/lodash": "^4.17.1",
+    "@types/node": "^20.12.10",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vue/cli-plugin-babel": "5.0.8",
@@ -76,7 +76,7 @@
     "electron": "^13.0.0",
     "electron-devtools-installer": "^3.2.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^5.2.0",
@@ -87,10 +87,10 @@
     "lint-staged": "^9.5.0",
     "node-polyfill-webpack-plugin": "^3.0.0",
     "prettier": "^2.8.8",
-    "sass": "^1.71.1",
-    "sass-loader": "^14.1.1",
+    "sass": "^1.77.0",
+    "sass-loader": "^14.2.1",
     "ts-jest": "^27.1.5",
-    "typescript": "~5.3.3",
+    "typescript": "~5.4.5",
     "vue-cli-plugin-electron-builder": "^3.0.0-alpha.4",
     "vue-cli-plugin-test-attrs": "^0.1.5",
     "vue-template-compiler": "2.7.14"

diff --git a/src/components/mixins/ConfirmDialogMixin.ts b/src/components/mixins/ConfirmDialogMixin.ts
@@ -1,22 +1,23 @@
 import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
+import { state } from '@/store/decorators';
 
 @Component
 export default class ConfirmDialogMixin extends Mixins(TranslationMixin) {
-  showConfirmDialog = false;
+  @state.wallet.transactions.isConfirmTxDialogDisabled public isConfirmTxDisabled!: boolean;
+
+  confirmDialogVisibility = false;
 
   openConfirmDialog(): void {
-    this.showConfirmDialog = true;
+    this.confirmDialogVisibility = true;
   }
 
-  async handleConfirmDialog(func: AsyncFnWithoutArgs): Promise<void> {
-    try {
-      await func();
-      this.showConfirmDialog = false;
-    } catch (error: any) {
-      console.error(error);
-      this.$alert(this.t(error.message), { title: this.t('errorText') });
+  confirmOrExecute(signTxMethod: FnWithoutArgs | AsyncFnWithoutArgs): void {
+    if (this.isConfirmTxDisabled) {
+      signTxMethod();
+    } else {
+      this.openConfirmDialog();
     }
   }
 }
diff --git a/src/components/mixins/TranslationMixin.ts b/src/components/mixins/TranslationMixin.ts
@@ -1,7 +1,7 @@
-import { mixins, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
+import { mixins } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins } from 'vue-property-decorator';
 
-import { app } from '@/consts';
+import { TranslationConsts } from '@/consts';
 import { state } from '@/store/decorators';
 
 const OrdinalRules = {
@@ -20,27 +20,6 @@ const OrdinalRules = {
   },
 } as const;
 
-const TranslationConsts = {
-  // extending consts
-  ...WALLET_CONSTS.TranslationConsts,
-  AppName: app.name,
-  Ceres: 'Ceres',
-  APR: 'APR', // Annual percentage rate
-  APY: 'APY',
-  TVL: 'TVL',
-  EVM: 'EVM',
-  Substrate: 'Substrate',
-  Kusama: 'Kusama',
-  ROI: 'ROI', // Return of investment
-  mbps: 'mbps',
-  online: 'Online',
-  offline: 'Offline',
-  XCM: 'XCM',
-  Max: 'Max.',
-  XOR: 'XOR',
-  VAL: 'VAL',
-} as const;
-
 @Component
 export default class TranslationMixin extends Mixins(mixins.TranslationMixin) {
   @state.settings.language language!: string;

diff --git a/src/components/pages/AddLiquidity/Confirm.vue b/src/components/pages/AddLiquidity/Confirm.vue
@@ -37,6 +37,7 @@
     <info-line :value="`1 ${secondToken.symbol} = ${formattedPrice}`" :asset-symbol="firstToken.symbol" />
     <info-line v-if="strategicBonusApy" :label="t('pool.strategicBonusApy')" :value="strategicBonusApy" />
     <template #footer>
+      <account-confirmation-option with-hint class="confirmation-option" />
       <s-button
         type="primary"
         class="s-typography-button--large"
@@ -70,6 +71,7 @@ import { lazyComponent } from '@/router';
     DialogBase: components.DialogBase,
     TokenLogo: components.TokenLogo,
     InfoLine: components.InfoLine,
+    AccountConfirmationOption: components.AccountConfirmationOption,
     PairTokenLogo: lazyComponent(Components.PairTokenLogo),
   },
 })
@@ -132,7 +134,8 @@ export default class ConfirmAddLiquidity extends Mixins(
   }
 
   handleConfirm(): void {
-    this.$emit('confirm', true);
+    this.$emit('confirm');
+    this.closeDialog();
   }
 }
 </script>
@@ -203,4 +206,8 @@ export default class ConfirmAddLiquidity extends Mixins(
   line-height: var(--s-line-height-medium);
   justify-content: center;
 }
+
+.confirmation-option {
+  margin-bottom: $inner-spacing-medium;
+}
 </style>
diff --git a/src/components/pages/OrderBook/BuySell.vue b/src/components/pages/OrderBook/BuySell.vue
@@ -118,8 +118,8 @@
         type="primary"
         class="btn s-typography-button--medium"
         :class="computedBtnClass"
-        @click="placeLimitOrder"
         :disabled="buttonDisabled"
+        @click="handleOrderPlacement"
       >
         <template v-if="bookStopped">
           {{ t('orderBook.stop') }}
@@ -161,7 +161,7 @@
         type="primary"
         class="btn s-typography-button--medium"
         :class="computedBtnClass"
-        @click="placeLimitOrder"
+        @click="handleOrderPlacement"
       >
         <template v-if="!isLoggedIn">
           {{ t('connectWalletText') }}
@@ -183,11 +183,11 @@
     />
 
     <place-confirm
-      :visible.sync="confirmPlaceOrderVisibility"
-      :isInsufficientBalance="isInsufficientBalance"
-      :isBuySide="isBuySide"
+      :visible.sync="confirmDialogVisibility"
+      :is-insufficient-balance="isInsufficientBalance"
+      :is-buy-side="isBuySide"
       :is-market-type="isMarketType"
-      @confirm="resetValues"
+      @confirm="placeOrder"
     />
   </div>
 </template>
@@ -201,7 +201,7 @@ import { MAX_TIMESTAMP } from '@sora-substrate/util/build/orderBook/consts';
 import { components, mixins, api } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 
-import TranslationMixin from '@/components/mixins/TranslationMixin';
+import ConfirmDialogMixin from '@/components/mixins/ConfirmDialogMixin';
 import { Components, LimitOrderType, PageNames } from '@/consts';
 import router, { lazyComponent } from '@/router';
 import { action, getter, mutation, state } from '@/store/decorators';
@@ -237,7 +237,11 @@ import type { Subscription } from 'rxjs';
     Error: lazyComponent(Components.ErrorButton),
   },
 })
-export default class BuySellWidget extends Mixins(TranslationMixin, mixins.FormattedAmountMixin, mixins.LoadingMixin) {
+export default class BuySellWidget extends Mixins(
+  ConfirmDialogMixin,
+  mixins.TransactionMixin,
+  mixins.FormattedAmountMixin
+) {
   @state.router.prev private prevRoute!: Nullable<PageNames>;
   @state.wallet.settings.networkFees private networkFees!: NetworkFeesObject;
   @state.orderBook.limitOrderType private _limitOrderType!: LimitOrderType;
@@ -250,6 +254,11 @@ export default class BuySellWidget extends Mixins(TranslationMixin, mixins.Forma
   @state.orderBook.amountSliderValue sliderValue!: number;
   @state.orderBook.userLimitOrders userLimitOrders!: Array<LimitOrder>;
 
+  @state.settings.slippageTolerance private slippageTolerance!: string;
+  @state.swap.fromValue private fromValue!: string;
+  @state.swap.toValue private toValue!: string;
+  @state.swap.selectedDexId private selectedDexId!: number;
+
   @getter.assets.xor xor!: AccountAsset;
   @getter.orderBook.baseAsset baseAsset!: AccountAsset;
   @getter.orderBook.quoteAsset quoteAsset!: AccountAsset;
@@ -280,8 +289,6 @@ export default class BuySellWidget extends Mixins(TranslationMixin, mixins.Forma
   private prevSwapToAddress = '';
 
   visibleBookList = false;
-  confirmPlaceOrderVisibility = false;
-  confirmCancelOrderVisibility = false;
   limitForSinglePriceReached = false;
   quoteSubscription: Nullable<Subscription> = null;
   timestamp = MAX_TIMESTAMP;
@@ -725,7 +732,7 @@ export default class BuySellWidget extends Mixins(TranslationMixin, mixins.Forma
     return this.preparedForSwap && hasInsufficientBalance(this.tokenFrom, fromValue, this.networkFee);
   }
 
-  async placeLimitOrder(): Promise<void> {
+  async handleOrderPlacement(): Promise<void> {
     if (!this.isLoggedIn) {
       router.push({ name: PageNames.Wallet });
       return;
@@ -735,7 +742,38 @@ export default class BuySellWidget extends Mixins(TranslationMixin, mixins.Forma
       this.subscribeOnBookQuote();
     }
 
-    this.showPlaceOrderDialog();
+    this.confirmOrExecute(this.placeOrder);
+  }
+
+  async placeOrder(): Promise<void> {
+    await this.withNotifications(async () => {
+      const isLimitReached = await this.singlePriceReachedLimit();
+      if (isLimitReached) {
+        this.$alert(this.t('orderBook.error.singlePriceLimit.reading'), { title: this.t('errorText') });
+        return;
+      }
+
+      const orderExtrinsic = this.isMarketType ? this.placeMarketOrder : this.placeLimitOrder;
+      await orderExtrinsic();
+      this.resetValues();
+    });
+  }
+
+  private placeMarketOrder(): Promise<void> {
+    return api.swap.execute(
+      this.tokenFrom as AccountAsset,
+      this.tokenTo as AccountAsset,
+      this.fromValue,
+      this.toValue,
+      this.slippageTolerance,
+      this.isBuySide,
+      LiquiditySourceTypes.OrderBook,
+      this.selectedDexId
+    );
+  }
+
+  private placeLimitOrder(): Promise<void> {
+    return api.orderBook.placeLimitOrder(this.baseAsset, this.quoteAsset, this.quoteValue, this.baseValue, this.side);
   }
 
   get orderBookStatus(): OrderBookStatus {
@@ -885,10 +923,6 @@ export default class BuySellWidget extends Mixins(TranslationMixin, mixins.Forma
     }
   }
 
-  showPlaceOrderDialog(): void {
-    this.confirmPlaceOrderVisibility = true;
-  }
-
   handleMaxValue(): void {
     this.handleInputFieldBase(this.maxPossibleAmount.toString());
     this.checkInputValidation();

diff --git a/src/components/pages/OrderBook/Dialogs/CancelOrders.vue b/src/components/pages/OrderBook/Dialogs/CancelOrders.vue
@@ -3,6 +3,7 @@
     <div class="order-book-cancel-dialog">
       <s-icon name="notifications-alert-triangle-24" size="64" />
       <h4>{{ t('orderBook.dialog.askCancel') }}</h4>
+      <account-confirmation-option with-hint class="confirmation-option" />
       <s-button type="primary" class="btn s-typography-button--medium" :disabled="!isVisible" @click="handleCancel">
         <span> {{ t('orderBook.dialog.cancelAll') }}</span>
       </s-button>
@@ -21,6 +22,7 @@ import { Cancel } from '@/types/orderBook';
   components: {
     DialogBase: components.DialogBase,
     NetworkFeeWarning: components.NetworkFeeWarning,
+    AccountConfirmationOption: components.AccountConfirmationOption,
   },
 })
 export default class CancelOrders extends Mixins(mixins.DialogMixin, TranslationMixin) {