merge develop

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"
@@ -54,7 +54,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",
@@ -73,7 +73,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

@@ -59,6 +59,8 @@ import SoraLogo from '@/components/shared/Logo/Sora.vue';
 import { PageNames, Components, Language, WalletPermissions } from '@/consts';
 import { BreakpointClass, Breakpoint } from '@/consts/layout';
 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';
@@ -96,8 +98,8 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   menuVisibility = false;
   showConfirmInviteUser = false;
   showNotifsDarkPage = false;
-  responsiveClass = BreakpointClass.LargeDesktop;
 
+  @state.settings.screenBreakpointClass private responsiveClass!: BreakpointClass;
   @state.settings.appConnection private appConnection!: NodesConnection;
   @state.settings.browserNotifPopupVisibility private browserNotifPopup!: boolean;
   @state.settings.browserNotifPopupBlockedVisibility private browserNotifPopupBlocked!: boolean;
@@ -124,7 +126,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;
@@ -199,21 +201,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);
@@ -573,7 +561,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',
       },

src/components/pages/X1/X1Dialog.vue

@@ -47,7 +47,7 @@ import { X1Api, X1Widget } from '@/utils/x1';
 export default class X1Dialog extends Mixins(mixins.DialogMixin, mixins.LoadingMixin, mixins.TranslationMixin) {
   @state.soraCard.euroBalance private euroBalance!: string;
   @state.wallet.settings.soraNetwork soraNetwork!: Nullable<WALLET_CONSTS.SoraNetwork>;
-  @getter.soraCard.accountAddress accountAddress!: string;
+  @state.wallet.account.address accountAddress!: string;
 
   X1Widget: X1Widget = { sdkUrl: '', widgetId: '' };
   showErrorInfoBanner = false;

src/components/shared/GenericPageHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="headerClasses">
     <s-button v-if="hasButtonBack" type="action" icon="arrows-chevron-left-rounded-24" @click="handleBack($event)" />
-    <h3 class="page-header-title">
+    <h3 class="page-header-title" :class="{ bold }">
       <slot name="title">
         {{ title }}
       </slot>
@@ -28,7 +28,8 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
 
 @Component
 export default class GenericPageHeader extends Mixins(TranslationMixin) {
-  @Prop({ default: false, type: Boolean }) readonly hasButtonBack?: boolean;
+  @Prop({ default: false, type: Boolean }) readonly hasButtonBack!: boolean;
+  @Prop({ default: false, type: Boolean }) readonly bold!: boolean;
   @Prop({ default: '', type: String }) readonly title!: string;
   @Prop({ default: '', type: String }) readonly tooltip?: string;
   @Prop({ default: 'right-start', type: String }) readonly tooltipPlacement?: string;