Merge branch 'develop' into feature/add-fearless-to-bridge

env.json

@@ -2,18 +2,18 @@
   "BASE_API_URL": "",
   "API_KEYS": {
     "moonpay": "pk_live_LEyw9bsfK0n0v3cdHUaZS1z0qYdDRDu6",
-    "x1ex": "sprkwdgt-WUQBA5U2",
     "etherscan": "XBS98SSP8J5FNS7EKQHMHRU94Z2YG7HFFK",
     "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0NTU0MDQ4MTQ5OSwibmFtZSI6Im5mdC1zdG9yYWdlLXByb2QifQ.CnW1bq8eWEYQxA6cggGMeAqCTozCJZ6s2oL_bssqnmc",
     "googleApi": "AIzaSyCazdRheGfy7_bwVi0m5UgUYjz7l0c54nM",
     "googleClientId": "728106973134-pfmcagr0t4lchepajcp7llp7f1t09lf0.apps.googleusercontent.com"
   },
   "FEATURE_FLAGS": {
     "moonpay": true,
-    "x1ex": false,
     "charts": true,
     "soraCard": false,
-    "orderBook": true
+    "orderBook": true,
+    "kensetsu": false,
+    "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"
@@ -26,8 +26,9 @@
     "test:all": "yarn test:unit --coverage"
   },
   "dependencies": {
+    "@cedelabs/widgets-universal": "^1.3.1",
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.34.3",
+    "@soramitsu/soraneo-wallet-web": "1.35.2",
     "@walletconnect/ethereum-provider": "^2.12.2",
     "@walletconnect/modal": "^2.6.2",
     "core-js": "^3.37.0",
@@ -53,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",
@@ -72,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

@@ -2,18 +2,18 @@
   "BASE_API_URL": "",
   "API_KEYS": {
     "moonpay": "pk_test_4ASGxHKGpLPE6sdQq1V3QjtpUFSpWLk",
-    "x1ex": "sprkwdgt-WYL6QBNC",
     "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw",
     "etherscan": "YBR7IWEBEXFICT8M7GRV77NBX4AXJ9T53H",
     "googleApi": "AIzaSyAzj7JxB-j8pJixtt6JSqLPhG0y02CGYOU",
     "googleClientId": "498393666682-9eeiioee0a2sgb1671e9qir645f9n6cv.apps.googleusercontent.com"
   },
   "FEATURE_FLAGS": {
     "moonpay": true,
-    "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": [
@@ -41,7 +41,7 @@
     }
   ],
   "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-dev",
-  "SUBSQUID_ENDPOINT": "https://squid.subsquid.io/sora-dev/v/v1/graphql",
+  "SUBSQUID_ENDPOINT": "https://sora.squids.live/sora-dev/v/v1/graphql",
   "NETWORK_TYPE": "Dev",
   "CHAIN_GENESIS_HASH": "",
   "EVM_NETWORKS_IDS": [97, 1001],
@@ -76,4 +76,4 @@
       "OTHER": "0x401c6A23a44f72151D90878DF0aa86E77fBde0e2"
     }
   }
-}
+}

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,14 +125,15 @@ 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;
   @mutation.web3.setEthBridgeSettings private setEthBridgeSettings!: (settings: EthBridgeSettings) => Promise<void>;
   @mutation.referrals.resetStorageReferrer private resetStorageReferrer!: FnWithoutArgs;
 
   @action.wallet.settings.setApiKeys private setApiKeys!: (apiKeys: WALLET_TYPES.ApiKeysObject) => Promise<void>;
+  @action.wallet.settings.subscribeOnExchangeRatesApi subscribeOnExchangeRatesApi!: AsyncFnWithoutArgs;
   @action.wallet.subscriptions.resetNetworkSubscriptions private resetNetworkSubscriptions!: AsyncFnWithoutArgs;
   @action.wallet.subscriptions.resetInternalSubscriptions private resetInternalSubscriptions!: AsyncFnWithoutArgs;
   @action.wallet.subscriptions.activateNetwokSubscriptions private activateNetwokSubscriptions!: AsyncFnWithoutArgs;
@@ -198,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);
@@ -242,6 +231,8 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
       this.setEvmNetworksApp(data.EVM_NETWORKS_IDS);
       this.setSubNetworkApps(data.SUB_NETWORKS);
 
+      this.subscribeOnExchangeRatesApi();
+
       if (data.PARACHAIN_IDS) {
         api.bridgeProxy.sub.parachainIds = data.PARACHAIN_IDS;
       }
@@ -572,7 +563,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/Header/AppHeader.vue

@@ -4,7 +4,7 @@
     <app-logo-button class="app-logo--header" responsive :theme="libraryTheme" @click="goTo(PageNames.Swap)" />
     <div class="app-controls app-controls--middle s-flex">
       <app-marketing v-show="!isMobile" />
-      <s-button :class="fiatBtnClass" :type="fiatBtnType" size="medium" @click="goTo(PageNames.FiatDepositOptions)">
+      <s-button :class="fiatBtnClass" :type="fiatBtnType" size="medium" @click="goTo(PageNames.DepositOptions)">
         <pair-token-logo class="payment-icon" :first-token="xor" :second-token="eth" :size="fiatBtnSize" />
         <span v-if="!isAnyMobile">{{ t('moonpay.buttons.buy') }}</span>
       </s-button>
@@ -14,6 +14,7 @@
       <app-header-menu />
     </div>
     <select-language-dialog />
+    <select-currency-dialog />
   </header>
 </template>
 
@@ -43,6 +44,7 @@ import type Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
     AppHeaderMenu,
     AppLogoButton,
     SelectLanguageDialog: lazyComponent(Components.SelectLanguageDialog),
+    SelectCurrencyDialog: lazyComponent(Components.SelectCurrencyDialog),
     PairTokenLogo: lazyComponent(Components.PairTokenLogo),
     WalletAvatar: components.WalletAvatar,
   },
@@ -78,7 +80,8 @@ export default class AppHeader extends Mixins(WalletConnectMixin) {
   get fiatBtnClass(): string[] {
     const base = ['app-controls-fiat-btn', 'active'];
 
-    if (this.$route.name === PageNames.FiatDepositOptions) base.push('app-controls-fiat-btn--active', 's-pressed');
+    if ([PageNames.DepositOptions, PageNames.CedeStore].includes(this.$route.name as PageNames))
+      base.push('app-controls-fiat-btn--active', 's-pressed');
 
     return base;
   }

src/components/App/Header/AppHeaderMenu.vue

@@ -26,11 +26,10 @@
             :disabled="disabled"
           >
             {{ text }}
+            <span v-if="value === HeaderMenuType.Currency" class="current-currency">
+              {{ currency?.toUpperCase() }}
+            </span>
           </s-dropdown-item>
-          <div @click="openNotificationDialog" class="notif-option el-dropdown-menu__item header-menu__item">
-            <bell-icon class="notif-option__bell notif-option__bell--dropdown" />
-            <span class="notif-option__text">{{ t('browserNotificationDialog.title') }}</span>
-          </div>
         </template>
       </s-dropdown>
     </s-button>
@@ -45,12 +44,13 @@ import { Component, Mixins } from 'vue-property-decorator';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { getter, mutation, state } from '@/store/decorators';
 
-import BellIcon from './BellIcon.vue';
+import type { Currency } from '@soramitsu/soraneo-wallet-web/lib/types/currency';
 
 enum HeaderMenuType {
   HideBalances = 'hide-balances',
   Theme = 'theme',
   Language = 'language',
+  Currency = 'currency',
   Notification = 'notification',
   Disclaimer = 'disclaimer',
 }
@@ -64,25 +64,23 @@ type MenuItem = {
 
 const BREAKPOINT = 1440;
 
-@Component({
-  components: {
-    BellIcon,
-  },
-})
+@Component
 export default class AppHeaderMenu extends Mixins(TranslationMixin) {
   readonly iconSize = 28;
   readonly HeaderMenuType = HeaderMenuType;
 
   @state.settings.disclaimerVisibility disclaimerVisibility!: boolean;
   @state.settings.userDisclaimerApprove userDisclaimerApprove!: boolean;
   @state.wallet.settings.shouldBalanceBeHidden private shouldBalanceBeHidden!: boolean;
+  @state.wallet.settings.currency currency!: Currency;
 
   @getter.libraryTheme private libraryTheme!: Theme;
   @getter.settings.notificationActivated notificationActivated!: boolean;
 
   @mutation.wallet.settings.toggleHideBalance private toggleHideBalance!: FnWithoutArgs;
   @mutation.settings.setAlertSettingsPopup private setAlertSettingsPopup!: (flag: boolean) => void;
   @mutation.settings.setSelectLanguageDialogVisibility private setLanguageDialogVisibility!: (flag: boolean) => void;
+  @mutation.settings.setSelectCurrencyDialogVisibility private setCurrencyDialogVisibility!: (flag: boolean) => void;
   @mutation.settings.toggleDisclaimerDialogVisibility private toggleDisclaimerDialogVisibility!: FnWithoutArgs;
 
   get mediaQueryList(): MediaQueryList {
@@ -139,12 +137,22 @@ export default class AppHeaderMenu extends Mixins(TranslationMixin) {
         icon: 'basic-globe-24',
         text: this.t('headerMenu.switchLanguage'),
       },
+      {
+        value: HeaderMenuType.Currency,
+        icon: 'various-lightbulb-24',
+        text: this.t('headerMenu.selectCurrency'),
+      },
       {
         value: HeaderMenuType.Disclaimer,
         icon: 'info-16',
         text: this.disclaimerText,
         disabled: this.disclaimerDisabled,
       },
+      {
+        value: HeaderMenuType.Notification,
+        icon: 'notifications-bell-24',
+        text: this.t('browserNotificationDialog.title'),
+      },
     ];
   }
 
@@ -180,10 +188,16 @@ export default class AppHeaderMenu extends Mixins(TranslationMixin) {
       case HeaderMenuType.Language:
         this.setLanguageDialogVisibility(true);
         break;
+      case HeaderMenuType.Currency:
+        this.setCurrencyDialogVisibility(true);
+        break;
       case HeaderMenuType.Disclaimer:
         if (this.disclaimerDisabled) return;
         this.toggleDisclaimerDialogVisibility();
         break;
+      case HeaderMenuType.Notification:
+        this.openNotificationDialog();
+        break;
     }
   }
 }
@@ -234,27 +248,10 @@ $icon-size: 28px;
         }
       }
     }
-  }
-}
 
-.notif-option {
-  display: flex;
-
-  &__bell {
-    width: $icon-size;
-    height: $icon-size;
-    margin: auto 0;
-    fill: var(--s-color-base-content-tertiary);
-
-    &--dropdown {
-      margin-top: $inner-spacing-mini;
-      margin-right: $basic-spacing-mini;
-    }
-  }
-
-  &:hover {
-    .notif-option__bell {
-      fill: var(--s-color-base-content-secondary);
+    .current-currency {
+      margin-left: 5px;
+      color: var(--s-color-base-content-tertiary);
     }
   }
 }