kensetsu (#1352)

* Draft

* Update BasePageMixin.ts

* Update BasePageMixin.ts

* Update yarn.lock

* Add asset owner page

* Improve responsive class

* Fix responsive issues related to charts

* Add send token tx & fix styles

* Add mint tx & fix styles during tx processing

* Add burn tx & fix styles during tx processing

* Fix disabled state for TokenInput with slider

* Support new update-name event for AddressBookInput

* Draft for token creation

* Update vue.config.js

* Improve asset owner page

* Refactor Asset owner page

* Add vault store

* Update state.ts

* Remove useless getter from vault

* Update index.ts

* Add bold prop for GenericPageHeader

* Add filter fn prop to SelectToken

* Add kensetsu draft

* Update AppMenu.vue

* Use multiple quote subscriptions

* Update App.vue

* Refactor CreateVaultDialog

* Update Vaults page

* Fix max button for borrow amount

* Improve styles

* Add getLiquidationPenalty

* Improve UI

* Fix

* Update AssetOwnerDetails.vue

* Update kusd

* Fix LtvProgressBar styles

* Fix negative value for XOR as collateral

* Fix styles for Vaults page

* Add draft for min deposit collateral

* Fix formatted values on Vaults page

* AddCollateralDialog draft

* Update lib version

* Add PrevNextInfoLine

* Add minDeposit check to Vault creation dialog

* Add slot to prev-next-info-line

* Fix styles for CreateVaultDialog

* Add logic for AddCollateralDialog

* Update AddCollateralDialog.vue

* Fix decimals issues

* Add BorrowMoreDialog

* Update CreateVaultDialog.vue

* Add RepayDebtDialog

* Improve dialogs error handling & reactivity

* Add close vault dialog

* Add missed non-centered classes

* TokenInput: remove focus & add balanceText prop

* Improve numbers format for CloseVault and AddCollateral

* Fix error icon size

* Improve LtvProgressBar

* Add new icons

* Update api

* Add slippage tolerance component to Kensetsu

* Add subscriptions

* Fix data kensetsu subscriptions

* Fix PW-1562

* Update CreateVaultDialog.vue

* Fix PW-1564

* Add isAddCollateralUnavailable

* Update deps

* Remove ken distribution page

* Update translation strings

* Update en.json

* Add translation keys

* Fix ltv calc and add en strings

* Add translation strings

* Fix debt calc

* Refactor templates

* Update CloseVaultDialog.vue

* Add history based translations

* Update ru.json

* Improve translation strings for Kensetsu

* Fix header styles

* Add stats draft

* Update index.ts

* Add stats

* Adjust ltv with max ltv

* Fix format percent functions

* Add title divider for Vaults page

* Add MAX LTV

* Update ExploreCollaterals.vue

* Add kensetsu overall stats

* Fix percents

* Handle price tools error

* Fix styles

* Make borrow required during the vault creation

* Improve vault creation dialog behaviour

* Check total available debt for collateral in Borrow More dialog

* Fix

* Improve hover icon

* Add borrow tax to kusdAvailable for cdp creation

* Update collaterals & reduce price subs updates

* Improve styles of CreateVaultDialog

* Add available check for explore collaterals

* Prevent events if swap button is clicked

* Exclude borrow tax from available to borrow

* Update BorrowMoreDialog.vue

* Add collaterals subscription per block

* Add paddings for collateral stats

* Add ResponsiveTabs component

* Update ResponsiveTabs.vue

* Update substrate-js

* Update electron deps

* Improve responsive layouts for Kensetsu

* Add feature flags

* Improve available debt checks for Explore collaterals

* Fix borrow link in menu

* Add --sidebar-width

* Fix logout state for Explore collaterals

* Improve responsive design for Explore components

* Fix conflicts

* Stability fee -> Interest

* Update messages.ts

* Improve CreateVault & CloseVault translations

* Improve Vaults & VaultDetails translations

* Update kensetsu translations (vault -> position))

* Download files from lokalise

* Update ExploreCollaterals.vue

* Add kensetsu subquery queries

* Add Vault Details History

* Update VaultDetailsHistory.vue

* Add vaults history

* Update package.json

* Update package.json

* Fix checks

* Add missed translations

* Update Vaults.vue

---------

Co-authored-by: Stefan Popov <17688105+stefashkaa@users.noreply.github.com>
Co-authored-by: NaghmeMohammadifar <45916098+Naghme98@users.noreply.github.com>
Co-authored-by: Nikita-Polyakov <polyakov@soramitsu.co.jp>

env.json

@@ -13,7 +13,9 @@
     "x1ex": false,
     "charts": true,
     "soraCard": false,
-    "orderBook": true
+    "orderBook": true,
+    "kensetsu": true,
+    "assetOwner": false
   },
   "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-prod",
   "SUBSQUID_ENDPOINT": "",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polkaswap-exchange-web",
-  "version": "1.34.0",
+  "version": "1.35.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/sora-xor/polkaswap-exchange-web.git"
@@ -53,7 +53,7 @@
     "@types/electron-devtools-installer": "^2.2.5",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.6",
-    "@types/lodash": "^4.17.1",
+    "@types/lodash": "^4.17.3",
     "@types/node": "^20.12.10",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
@@ -72,7 +72,7 @@
     "@vue/vue2-jest": "^27.0.0",
     "babel-plugin-require-context-hook": "^1.0.0",
     "css-unicode-loader": "^1.0.3",
-    "electron": "^13.0.0",
+    "electron": "^30.0.6",
     "electron-devtools-installer": "^3.2.0",
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.29.1",

public/env.json

@@ -13,7 +13,9 @@
     "x1ex": false,
     "charts": true,
     "soraCard": false,
-    "orderBook": true
+    "orderBook": true,
+    "kensetsu": true,
+    "assetOwner": false
   },
   "FAUCET_URL": "https://faucet.dev.sora2.tachi.soramitsu.co.jp/",
   "DEFAULT_NETWORKS": [

src/App.vue

@@ -58,6 +58,8 @@ import NodeErrorMixin from '@/components/mixins/NodeErrorMixin';
 import SoraLogo from '@/components/shared/Logo/Sora.vue';
 import { PageNames, Components, Language, BreakpointClass, Breakpoint, WalletPermissions } from '@/consts';
 import { getLocale } from '@/lang';
+import { isDashboardPage } from '@/modules/dashboard/router';
+import { isVaultPage } from '@/modules/vault/router';
 import router, { goTo, lazyComponent } from '@/router';
 import { action, getter, mutation, state } from '@/store/decorators';
 import { getMobileCssClasses, preloadFontFace, updateDocumentTitle } from '@/utils';
@@ -95,9 +97,9 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   menuVisibility = false;
   showConfirmInviteUser = false;
   showNotifsDarkPage = false;
-  responsiveClass = BreakpointClass.LargeDesktop;
 
-  @state.settings.appConnection appConnection!: NodesConnection;
+  @state.settings.screenBreakpointClass private responsiveClass!: BreakpointClass;
+  @state.settings.appConnection private appConnection!: NodesConnection;
   @state.settings.browserNotifPopupVisibility private browserNotifPopup!: boolean;
   @state.settings.browserNotifPopupBlockedVisibility private browserNotifPopupBlocked!: boolean;
   @state.wallet.account.assetsToNotifyQueue assetsToNotifyQueue!: Array<WhitelistArrayItem>;
@@ -123,7 +125,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @mutation.settings.setBrowserNotifsPopupBlocked private setBrowserNotifsPopupBlocked!: (flag: boolean) => void;
   @mutation.settings.toggleDisclaimerDialogVisibility private toggleDisclaimerDialogVisibility!: FnWithoutArgs;
   @mutation.settings.resetBlockNumberSubscription private resetBlockNumberSubscription!: FnWithoutArgs;
-  @mutation.settings.setScreenBreakpointClass private setScreenBreakpointClass!: (cssClass: string) => void;
+  @mutation.settings.setScreenBreakpointClass private setScreenBreakpointClass!: (windowWidth: number) => void;
   @mutation.referrals.unsubscribeFromInvitedUsers private unsubscribeFromInvitedUsers!: FnWithoutArgs;
   @mutation.web3.setEvmNetworksApp private setEvmNetworksApp!: (data: EvmNetwork[]) => void;
   @mutation.web3.setSubNetworkApps private setSubNetworkApps!: (data: SubNetworkApps) => void;
@@ -198,21 +200,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   }
 
   private setResponsiveClass(): void {
-    const width = window.innerWidth;
-    if (width >= Breakpoint.HugeDesktop) {
-      this.responsiveClass = BreakpointClass.HugeDesktop;
-    } else if (width >= Breakpoint.LargeDesktop) {
-      this.responsiveClass = BreakpointClass.LargeDesktop;
-    } else if (width >= Breakpoint.Desktop) {
-      this.responsiveClass = BreakpointClass.Desktop;
-    } else if (width >= Breakpoint.Tablet) {
-      this.responsiveClass = BreakpointClass.Tablet;
-    } else if (width >= Breakpoint.LargeMobile) {
-      this.responsiveClass = BreakpointClass.LargeMobile;
-    } else if (width < Breakpoint.LargeMobile) {
-      this.responsiveClass = BreakpointClass.Mobile;
-    }
-    this.setScreenBreakpointClass(this.responsiveClass);
+    this.setScreenBreakpointClass(window.innerWidth);
   }
 
   private setResponsiveClassDebounced = debounce(this.setResponsiveClass, 250);
@@ -572,7 +560,11 @@ i.icon-divider {
 }
 
 @include desktop {
-  .app-main--swap {
+  .app-main--swap,
+  .app-main--vaults,
+  .app-main--vaultdetails,
+  .app-main--assetowner,
+  .app-main--assetownerdetails {
     &.app-main {
       .app-menu {
         &:not(.collapsed) {

src/background.ts

@@ -7,7 +7,8 @@ const isDevelopment = process.env.NODE_ENV !== 'production';
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }]);
 
-async function createWindow() {
+async function createWindow(): Promise<void> {
+  const ELECTRON_NODE_INTEGRATION = !!process.env.ELECTRON_NODE_INTEGRATION;
   // Create the browser window.
   const win = new BrowserWindow({
     width: 800,
@@ -17,14 +18,14 @@ async function createWindow() {
     webPreferences: {
       // Use pluginOptions.nodeIntegration, leave this alone
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION as unknown as boolean,
-      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
+      nodeIntegration: ELECTRON_NODE_INTEGRATION,
+      contextIsolation: !ELECTRON_NODE_INTEGRATION,
     },
   });
 
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
-    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
+    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
     if (!process.env.IS_TEST) win.webContents.openDevTools();
   } else {
     createProtocol('app');
@@ -33,9 +34,10 @@ async function createWindow() {
   }
 
   // It's required for external links
-  win.webContents.on('new-window', function (e, url) {
-    e.preventDefault();
+  win.webContents.setWindowOpenHandler(({ url }) => {
+    // Prevent default behavior
     shell.openExternal(url);
+    return { action: 'deny' };
   });
 }
 

src/components/App/Alerts/AlertList.vue

@@ -252,7 +252,7 @@ $list-items: 5;
     font-weight: 300;
     font-size: var(--s-font-size-medium);
     line-height: 150%;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--s-letter-spacing-small);
 
     span {
       margin-left: $inner-spacing-mini;

src/components/App/Menu/AppMenu.vue

@@ -107,13 +107,17 @@ import {
   PoolChildPages,
   BridgeChildPages,
   RewardsChildPages,
-  StakingChildPages,
   ExploreChildPages,
   SidebarMenuGroups,
   SidebarMenuItemLink,
   FaucetLink,
 } from '@/consts';
+import { DashboardPageNames } from '@/modules/dashboard/consts';
+import { isDashboardPage } from '@/modules/dashboard/router';
 import { StakingPageNames } from '@/modules/staking/consts';
+import { isStakingPage } from '@/modules/staking/router';
+import { VaultPageNames } from '@/modules/vault/consts';
+import { isVaultPage } from '@/modules/vault/router';
 import { getter, mutation, state } from '@/store/decorators';
 
 import AppInfoPopper from './AppInfoPopper.vue';
@@ -135,12 +139,34 @@ export default class AppMenu extends Mixins(TranslationMixin) {
   @state.settings.menuCollapsed collapsed!: boolean;
 
   @getter.settings.orderBookEnabled private orderBookEnabled!: boolean;
+  @getter.settings.kensetsuEnabled private kensetsuEnabled!: boolean;
+  @getter.settings.assetOwnerEnabled private assetOwnerEnabled!: boolean;
   @getter.libraryTheme private libraryTheme!: Theme;
 
   @mutation.settings.setMenuCollapsed private setMenuCollapsed!: (collapsed: boolean) => void;
 
   readonly FaucetLink = FaucetLink;
 
+  private resizeObserver: Nullable<ResizeObserver> = null;
+
+  private onMenuWidthChange(): void {
+    const width = this.$el?.clientWidth ?? 0;
+    if (!width) return;
+
+    document.documentElement.style.setProperty('--sidebar-width', `${width}px`);
+  }
+
+  async mounted(): Promise<void> {
+    await this.$nextTick();
+    if (!(this.$el && window.ResizeObserver)) return;
+    this.resizeObserver = new ResizeObserver(this.onMenuWidthChange);
+    this.resizeObserver.observe(this.$el);
+  }
+
+  beforeDestroy(): void {
+    this.resizeObserver?.disconnect();
+  }
+
   get collapseIcon(): string {
     return this.collapsed ? 'arrows-chevron-right-24' : 'arrows-chevron-left-24';
   }
@@ -154,10 +180,19 @@ export default class AppMenu extends Mixins(TranslationMixin) {
   }
 
   get sidebarMenuItems(): Array<SidebarMenuItemLink> {
+    let menuItems = SidebarMenuGroups;
+
     if (!this.orderBookEnabled) {
-      return SidebarMenuGroups.filter(({ title }) => title !== PageNames.OrderBook);
+      menuItems = menuItems.filter(({ title }) => title !== PageNames.OrderBook);
+    }
+    if (!this.kensetsuEnabled) {
+      menuItems = menuItems.filter(({ title }) => title !== PageNames.VaultsContainer);
+    }
+    if (!this.assetOwnerEnabled) {
+      menuItems = menuItems.filter(({ title }) => title !== PageNames.AssetOwnerContainer);
     }
-    return SidebarMenuGroups;
+
+    return menuItems;
   }
 
   get currentPath(): string {
@@ -171,12 +206,18 @@ export default class AppMenu extends Mixins(TranslationMixin) {
     if (RewardsChildPages.includes(currentName)) {
       return PageNames.Rewards;
     }
-    if (StakingChildPages.includes(currentName)) {
+    if (isStakingPage(currentName)) {
       return StakingPageNames.Staking;
     }
     if (ExploreChildPages.includes(currentName)) {
       return PageNames.ExploreTokens;
     }
+    if (isDashboardPage(currentName)) {
+      return DashboardPageNames.AssetOwner;
+    }
+    if (isVaultPage(currentName)) {
+      return VaultPageNames.Vaults;
+    }
     return currentName as string;
   }
 

src/components/pages/Bridge/SelectAccount.vue

@@ -1,7 +1,7 @@
 <template>
   <dialog-base :visible.sync="visibility" :title="t('connection.selectAccount')" custom-class="account-select-dialog">
     <div class="account-select">
-      <address-book-input v-model="address" :is-valid="validAddress" ref="input" />
+      <address-book-input ref="input" v-model="address" :is-valid="validAddress" @update-name="updateName" />
 
       <s-button
         class="s-typography-button--large account-select-button"
@@ -35,6 +35,7 @@ export default class BridgeSelectAccount extends Mixins(mixins.LoadingMixin, Tra
   @mutation.web3.setSubAddress private setSubAddress!: (opts: { address: string; name: string }) => Promise<void>;
 
   address = '';
+  private name = '';
 
   @Watch('visibility')
   private updateAddress(isVisible: boolean) {
@@ -54,11 +55,13 @@ export default class BridgeSelectAccount extends Mixins(mixins.LoadingMixin, Tra
   }
 
   handleSelectAddress(): void {
-    // [TODO] emit name from address-book-input
-    const name = this.address ? (this.$refs.input as any).name : '';
-    this.setSubAddress({ address: this.address, name });
+    this.setSubAddress({ address: this.address, name: this.name });
     this.visibility = false;
   }
+
+  updateName(name: string): void {
+    this.name = name;
+  }
 }
 </script>
 

src/components/pages/OrderBook/BuySell.vue

@@ -832,7 +832,7 @@ export default class BuySellWidget extends Mixins(
   }
 
   async singlePriceReachedLimit(): Promise<boolean> {
-    if (this.isMarketType) return false;
+    if (this.isMarketType || !this.quoteValue) return false;
 
     const limitReached = !(await api.orderBook.isOrderPlaceable(
       this.baseAsset.address,

src/components/pages/SoraCard/steps/TermsAndConditions.vue

@@ -107,7 +107,7 @@ export default class TermsAndConditions extends Mixins(TranslationMixin, mixins.
     text-align: center;
     font-weight: 300;
     line-height: 150%;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--s-letter-spacing-small);
     width: 95%;
   }
 

src/components/pages/Stats/NetworkStats.vue

@@ -79,6 +79,7 @@ export default class NetworkStats extends Mixins(mixins.LoadingMixin, Translatio
   readonly FontSizeRate = WALLET_CONSTS.FontSizeRate;
   readonly FontWeightRate = WALLET_CONSTS.FontWeightRate;
   readonly filters = NETWORK_STATS_FILTERS;
+  readonly Arrow = String.fromCodePoint(0x2192);
 
   filter = NETWORK_STATS_FILTERS[0];
 
@@ -91,7 +92,6 @@ export default class NetworkStats extends Mixins(mixins.LoadingMixin, Translatio
 
   get columns() {
     const { Sora, Ethereum } = this.TranslationConsts;
-    const Arrow = String.fromCodePoint(0x2192);
 
     return [
       {
@@ -105,12 +105,12 @@ export default class NetworkStats extends Mixins(mixins.LoadingMixin, Translatio
         prop: 'accounts',
       },
       {
-        title: [Ethereum, Arrow, Sora].join(' '),
+        title: [Ethereum, this.Arrow, Sora].join(' '),
         tooltip: this.t('tooltips.bridgeTransactions', { from: Ethereum, to: Sora }),
         prop: 'bridgeIncomingTransactions',
       },
       {
-        title: [Sora, Arrow, Ethereum].join(' '),
+        title: [Sora, this.Arrow, Ethereum].join(' '),
         tooltip: this.t('tooltips.bridgeTransactions', { from: Sora, to: Ethereum }),
         prop: 'bridgeOutgoingTransactions',
       },