feat: added accounts filter for swap screens / move to async routes a…

…ll router components / added lazy component for next tick improve render delay
liquality · Dec 6, 2022 · 75241e1 · 75241e1
1 parent ac33587
commit 75241e1
Show file tree

Hide file tree

Showing 16 changed files with 152 additions and 153 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,23 +1,27 @@
 <template>
-  <div id="app">
+  <Lazy id="app">
     <template v-if="brokerReady && localesLoaded">
       <Head v-if="unlockedAt" :show-dapp-connections="showDappConnections" />
-      <router-view />
+      <Lazy>
+        <router-view />
+      </Lazy>
       <GlobalModals v-if="unlockedAt && termsAcceptedAt" />
     </template>
     <div class="login-wrapper spinner-container" v-else>
       <SpinnerIcon class="btn-loading" />
     </div>
-  </div>
+  </Lazy>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
 import Head from '@/components/Head.vue'
+import Lazy from '@/components/Lazy.vue'
 import GlobalModals from '@/components/GlobalModals.vue'
 import SpinnerIcon from '@/assets/icons/spinner.svg'
 export default {
   components: {
+    Lazy,
     Head,
     GlobalModals,
     SpinnerIcon
@@ -51,7 +55,7 @@ export default {
     ...mapActions('app', ['setLocalePreference', 'getBrowserLocale', 'setWhatsNewModalContent'])
   },
   async created() {
-    await this.initializeAnalytics()
+    this.initializeAnalytics()
     if (this.locale) {
       await this.changeLocale(this.locale)
     } else {
@@ -61,21 +65,17 @@ export default {
         : process.env.VUE_APP_DEFAULT_LOCALE
       await this.changeLocale(_locale)
       // store the locale in state
-      await this.setLocalePreference({ locale: this.currentLocale })
+      await this.setLocalePreference({ locale: _locale })
     }
+
     if (
       this.whatsNewModalVersion !== this.appVersion ||
       process.env.VUE_APP_SHOW_WHATS_NEW_ALWAYS
     ) {
       const content = await import(`@/locales/${this.currentLocale}/whats_new.json`)
-      await this.setWhatsNewModalContent({ content: content.default })
+      this.setWhatsNewModalContent({ content: content.default })
     }
     this.localesLoaded = true
-  },
-  watch: {
-    localeKey(newVal, oldVal) {
-      console.log('localeKey', newVal, oldVal)
-    }
   }
 }
 </script>

diff --git a/src/background.js b/src/background.js
@@ -32,7 +32,7 @@ function getBalance(state) {
   return total
 }
 
-store.subscribe(async ({ type, payload }, state) => {
+store.subscribe(({ type, payload }, state) => {
   let currentState = _.cloneDeep(state)
   const { dispatch, getters } = store
 
@@ -79,7 +79,7 @@ store.subscribe(async ({ type, payload }, state) => {
         network: state.activeNetwork,
         walletId: state.activeWalletId
       })
-      await dispatch('app/trackAnalytics', {
+      dispatch('app/trackAnalytics', {
         event: `Change Active Network to ${state.activeNetwork}`,
         properties: {
           walletVersion,
@@ -99,7 +99,7 @@ store.subscribe(async ({ type, payload }, state) => {
         dispatch('updateMarketData', { network: state.activeNetwork })
       break
     case 'LOCK_WALLET':
-      await dispatch('app/trackAnalytics', {
+      dispatch('app/trackAnalytics', {
         event: 'Wallet locked successfully',
         properties: {
           walletVersion,
@@ -154,7 +154,7 @@ store.subscribe(async ({ type, payload }, state) => {
       // eslint-disable-next-line no-case-declarations
       let toAmountValue = unitToCurrency(cryptoassets[payload.swap.to], payload.swap.toAmount)
 
-      await dispatch('app/trackAnalytics', {
+      dispatch('app/trackAnalytics', {
         event: 'New SWAP',
         properties: {
           category: 'Swaps',
@@ -177,7 +177,7 @@ store.subscribe(async ({ type, payload }, state) => {
         cryptoassets[payload.transaction.from],
         payload.transaction.amount
       )
-      await dispatch('app/trackAnalytics', {
+      dispatch('app/trackAnalytics', {
         event: `User send funds`,
         properties: {
           walletVersion,
@@ -193,7 +193,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'ADD_EXTERNAL_CONNECTION':
-      await dispatch('app/trackAnalytics', {
+      dispatch('app/trackAnalytics', {
         event: 'Connect to Dapps',
         properties: {
           walletVersion,
@@ -206,7 +206,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'ADD_CUSTOM_TOKEN':
-      await dispatch('app/trackAnalytics', {
+      dispatch('app/trackAnalytics', {
         event: 'Custom Token Added',
         properties: {
           walletVersion,
@@ -224,7 +224,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'REMOVE_CUSTOM_TOKEN':
-      await dispatch('app/trackAnalytics', {
+      dispatch('app/trackAnalytics', {
         event: 'Custom Token Removed',
         properties: {
           walletVersion,
@@ -240,7 +240,7 @@ store.subscribe(async ({ type, payload }, state) => {
       const item = getters.historyItemById(payload.network, payload.walletId, payload.id)
       if (item.type === 'SWAP' && payload.updates) {
         if (payload.updates.status !== 'undefined') {
-          await dispatch('app/trackAnalytics', {
+          dispatch('app/trackAnalytics', {
             event: 'Swap status change',
             properties: {
               walletVersion,
@@ -256,7 +256,7 @@ store.subscribe(async ({ type, payload }, state) => {
       }
       if (item.type === 'SEND' && payload.updates) {
         if (payload.updates.status !== 'undefined') {
-          await dispatch('app/trackAnalytics', {
+          dispatch('app/trackAnalytics', {
             event: 'Send status change',
             properties: {
               walletVersion,
@@ -270,7 +270,7 @@ store.subscribe(async ({ type, payload }, state) => {
       }
       if (item.type === 'NFT' && payload.updates) {
         if (payload.updates.status !== 'undefined') {
-          await dispatch('app/trackAnalytics', {
+          dispatch('app/trackAnalytics', {
             event: 'Send NFT status change',
             properties: {
               walletVersion,
@@ -289,7 +289,7 @@ store.subscribe(async ({ type, payload }, state) => {
       const newBalance = getBalance(currentState)
       // Only trigger event for the first time when user funds their wallet, any subsequent balance updates are ignored.
       if (prevBalance === 0 && newBalance > prevBalance) {
-        await dispatch('app/trackAnalytics', {
+        dispatch('app/trackAnalytics', {
           event: 'User funded wallet',
           properties: {
             walletVersion,
@@ -302,7 +302,7 @@ store.subscribe(async ({ type, payload }, state) => {
       prevState = currentState
       break
     case 'TOGGLE_EXPERIMENT':
-      await dispatch('app/trackAnalytics', {
+      dispatch('app/trackAnalytics', {
         event: `User on Experiment feature ${payload.name}`,
         properties: {
           walletVersion,
@@ -313,7 +313,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'CHANGE_PASSWORD':
-      await dispatch('app/trackAnalytics', {
+      dispatch('app/trackAnalytics', {
         walletVersion,
         event: 'Change Password',
         properties: {
@@ -323,7 +323,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'DISABLE_ASSETS':
-      await dispatch('app/trackAnalytics', {
+      dispatch('app/trackAnalytics', {
         walletVersion,
         event: 'User Disable Asset',
         properties: {
@@ -334,7 +334,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'DISABLE_ETHEREUM_INJECTION':
-      await dispatch('app/trackAnalytics', {
+      dispatch('app/trackAnalytics', {
         walletVersion,
         event: 'User Disable Default Web3 Wallet Injection',
         properties: {
@@ -344,7 +344,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'ENABLE_ETHEREUM_INJECTION':
-      await dispatch('app/trackAnalytics', {
+      dispatch('app/trackAnalytics', {
         walletVersion,
         event: 'User Enable Default Web3 Wallet Injection',
         properties: {

diff --git a/src/components/GlobalModals.vue b/src/components/GlobalModals.vue
@@ -1,20 +1,22 @@
 <template>
-  <div>
+  <Lazy>
     <AnalyticsOptInModal />
     <WhatsNewModal />
     <BuyCryptoModal />
     <BuyCryptoOverviewModal />
-  </div>
+  </Lazy>
 </template>
 
 <script>
 import AnalyticsOptInModal from '@/components/AnalyticsOptInModal.vue'
 import WhatsNewModal from '@/components/WhatsNewModal.vue'
 import BuyCryptoModal from '@/components/BuyCrypto/BuyCryptoModal.vue'
 import BuyCryptoOverviewModal from '@/components/BuyCrypto/BuyCryptoOverviewModal.vue'
+import Lazy from '@/components/Lazy.vue'
 
 export default {
   components: {
+    Lazy,
     AnalyticsOptInModal,
     WhatsNewModal,
     BuyCryptoModal,

diff --git a/src/components/Head.vue b/src/components/Head.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="head">
+  <Lazy class="head">
     <router-link to="/wallet" class="head_logo ml-3" id="wallet_header_logo">
       <LogoIcon />
     </router-link>
@@ -29,7 +29,7 @@
       class="head_connection-drawer"
       v-click-away="hideConnectionDrawer"
     />
-  </div>
+  </Lazy>
 </template>
 
 <script>
@@ -42,12 +42,14 @@ import ChevronDownIcon from '@/assets/icons/chevron_down.svg'
 import ConnectionDisconnected from '@/assets/icons/connection_disconnected.svg'
 import ConnectionConnected from '@/assets/icons/connection_connected.svg'
 import ConnectionDrawer from '@/components/ConnectionDrawer.vue'
+import Lazy from '@/components/Lazy.vue'
 
 export default {
   directives: {
     clickAway
   },
   components: {
+    Lazy,
     ChevronUpIcon,
     ChevronDownIcon,
     LogoIcon,
@@ -80,7 +82,6 @@ export default {
   },
   methods: {
     ...mapActions(['changeActiveNetwork']),
-    ...mapActions('app', ['settingsModalOpen']),
     toggleShowNetworks() {
       this.showNetworks = !this.showNetworks
       if (this.showNetworks) {
@@ -95,7 +96,6 @@ export default {
       if (this.showConnectionDrawer) {
         this.showNetworks = false
       }
-      this.settingsModalOpen(false)
     },
     hideConnectionDrawer() {
       this.showConnectionDrawer = false

diff --git a/src/components/Lazy.vue b/src/components/Lazy.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <slot v-if="shouldRender" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      shouldRender: false
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.shouldRender = true
+    })
+  }
+}
+</script>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <Lazy>
     <div class="navbar">
       <router-link
         v-if="showBack"
@@ -61,7 +61,7 @@
         </li>
       </ul>
     </div>
-  </div>
+  </Lazy>
 </template>
 
 <script>
@@ -79,12 +79,14 @@ import LedgerIcon from '@/assets/icons/ledger_menu_icon.svg'
 import KeyIcon from '@/assets/icons/key.svg'
 import { ChainId } from '@liquality/cryptoassets'
 import { version as walletVersion } from '../../package.json'
+import Lazy from '@/components/Lazy.vue'
 
 export default {
   directives: {
     clickAway
   },
   components: {
+    Lazy,
     ChevronLeftIcon,
     HamburgerIcon,
     LockIcon,
@@ -113,7 +115,6 @@ export default {
   },
   computed: {
     ...mapState(['experiments', 'activeNetwork']),
-    ...mapGetters('app', ['isSettingsModalOpen']),
     ...mapGetters(['accountItem']),
     account() {
       if (this.$route.params.accountId) {

diff --git a/src/components/WhatsNewModal.vue b/src/components/WhatsNewModal.vue
@@ -97,7 +97,7 @@ export default {
       this.open = false
     }
   },
-  async created() {
+  created() {
     if (
       this.whatsNewModalVersion !== this.appVersion ||
       process.env.VUE_APP_SHOW_WHATS_NEW_ALWAYS