kensetsu

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

@@ -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",
@@ -100,7 +100,8 @@
     "@polkadot/util": "^10.4.2",
     "ipfs-unixfs": "6.0.6",
     "ipfs-unixfs-exporter": "7.0.6",
-    "ipfs-unixfs-importer": "9.0.6"
+    "ipfs-unixfs-importer": "9.0.6",
+    "@sora-substrate/util": "1.34.6"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

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 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 @@
   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>;
@@ -199,20 +201,23 @@
 
   private setResponsiveClass(): void {
     const width = window.innerWidth;
+    let newClass = this.responsiveClass;
+
     if (width >= Breakpoint.HugeDesktop) {
-      this.responsiveClass = BreakpointClass.HugeDesktop;
+      newClass = BreakpointClass.HugeDesktop;
     } else if (width >= Breakpoint.LargeDesktop) {
-      this.responsiveClass = BreakpointClass.LargeDesktop;
+      newClass = BreakpointClass.LargeDesktop;
     } else if (width >= Breakpoint.Desktop) {
-      this.responsiveClass = BreakpointClass.Desktop;
+      newClass = BreakpointClass.Desktop;
     } else if (width >= Breakpoint.Tablet) {
-      this.responsiveClass = BreakpointClass.Tablet;
+      newClass = BreakpointClass.Tablet;
     } else if (width >= Breakpoint.LargeMobile) {
-      this.responsiveClass = BreakpointClass.LargeMobile;
+      newClass = BreakpointClass.LargeMobile;
     } else if (width < Breakpoint.LargeMobile) {
-      this.responsiveClass = BreakpointClass.Mobile;
+      newClass = BreakpointClass.Mobile;
     }
-    this.setScreenBreakpointClass(this.responsiveClass);
+
+    this.setScreenBreakpointClass(newClass);
   }
 
   private setResponsiveClassDebounced = debounce(this.setResponsiveClass, 250);
@@ -572,7 +577,11 @@
 }
 
 @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/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/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',
       },