feat: added router transitions and lazy loading routes / fixed accoun…

…t swap filter to have same address
liquality · Dec 7, 2022 · 5d74343 · 5d74343
1 parent 2f1dd27
commit 5d74343
Show file tree

Hide file tree

Showing 17 changed files with 503 additions and 126 deletions.
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "build:staging": "vue-cli-service build --mode staging",
     "clean": "rm -rf node_modules",
     "dev": "vue-cli-service build --mode development --watch",
+    "dev:tools": "vue-devtools & vue-cli-service build --mode development --watch",
     "jest": "jest",
     "postinstall": "husky install",
     "sync-versions": "node script/sync-versions.js",
@@ -18,7 +19,8 @@
     "test:mainnet:prodagent": "NODE_ENV=mainnet NODE_AGENT=prodagent node_modules/mocha/bin/mocha --grep 'MAINNET'",
     "test:mainnet:prodagent:release": "NODE_ENV=mainnet NODE_AGENT=prodagent node_modules/mocha/bin/mocha --grep 'MAINNET_RELEASE'",
     "test:pullrequest": "node_modules/mocha/bin/mocha --grep 'PULL_REQUEST_TEST'",
-    "test-full-regression": "node_modules/mocha/bin/mocha"
+    "test-full-regression": "node_modules/mocha/bin/mocha",
+    "devtools": "node_modules/.bin/vue-devtools"
   },
   "dependencies": {
     "@liquality/cryptoassets": "2.1.0-next.2",
@@ -76,6 +78,7 @@
     "@vue/cli-plugin-unit-jest": "^4.5.8",
     "@vue/cli-plugin-vuex": "4.5.15",
     "@vue/cli-service": "4.5.15",
+    "@vue/devtools": "^6.4.5",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "1.3.3",
     "babel-eslint": "^10.1.0",

diff --git a/src/App.vue b/src/App.vue
@@ -1,29 +1,28 @@
 <template>
-  <Lazy id="app">
+  <div id="app">
     <template v-if="brokerReady && localesLoaded">
-      <Head v-if="unlockedAt" :show-dapp-connections="showDappConnections" />
-      <Lazy>
+      <template v-if="unlockedAt && termsAcceptedAt">
+        <Head :show-dapp-connections="showDappConnections" />
+        <GlobalModals />
+      </template>
+      <transition name="fade" mode="out-in">
         <router-view />
-      </Lazy>
-      <GlobalModals v-if="unlockedAt && termsAcceptedAt" />
+      </transition>
     </template>
     <div class="login-wrapper spinner-container" v-else>
       <SpinnerIcon class="btn-loading" />
     </div>
-  </Lazy>
+  </div>
 </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,
+    GlobalModals: () => import('@/components/GlobalModals.vue'),
     SpinnerIcon
   },
   data() {
@@ -54,7 +53,7 @@ export default {
     ...mapActions(['initializeAnalytics']),
     ...mapActions('app', ['setLocalePreference', 'getBrowserLocale', 'setWhatsNewModalContent'])
   },
-  async created() {
+  async mounted() {
     this.initializeAnalytics()
     if (this.locale) {
       await this.changeLocale(this.locale)

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
@@ -981,3 +981,12 @@ svg.qr-icon {
 .custom-control-input:checked ~ .custom-control-label::after {
   background-image: none !important;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
diff --git a/src/components/GlobalModals.vue b/src/components/GlobalModals.vue
@@ -1,22 +1,20 @@
 <template>
-  <Lazy>
+  <div>
     <AnalyticsOptInModal />
     <WhatsNewModal />
     <BuyCryptoModal />
     <BuyCryptoOverviewModal />
-  </Lazy>
+  </div>
 </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>
-  <Lazy class="head">
+  <div 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"
     />
-  </Lazy>
+  </div>
 </template>
 
 <script>
@@ -42,14 +42,12 @@ 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,
@@ -82,6 +80,7 @@ export default {
   },
   methods: {
     ...mapActions(['changeActiveNetwork']),
+    ...mapActions('app', ['settingsModalOpen']),
     toggleShowNetworks() {
       this.showNetworks = !this.showNetworks
       if (this.showNetworks) {
@@ -96,19 +95,20 @@ export default {
       if (this.showConnectionDrawer) {
         this.showNetworks = false
       }
+      this.settingsModalOpen(false)
     },
     hideConnectionDrawer() {
       this.showConnectionDrawer = false
     },
-    async switchNetwork(network) {
-      await this.changeActiveNetwork({ network })
+    switchNetwork(network) {
+      this.changeActiveNetwork({ network })
       if (this.$route.name !== 'WalletAssets') {
-        await this.$router.replace({ name: 'WalletAssets' })
+        this.$router.replace({ name: 'WalletAssets' })
       }
       this.showNetworks = false
     }
   },
-  created() {
+  mounted() {
     if (this.showDappConnections) {
       chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
         if (tabs.length > 0) {

diff --git a/src/components/Lazy.vue b/src/components/Lazy.vue
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <Lazy>
+  <div>
     <div class="navbar">
       <router-link
         v-if="showBack"
@@ -61,7 +61,7 @@
         </li>
       </ul>
     </div>
-  </Lazy>
+  </div>
 </template>
 
 <script>
@@ -79,14 +79,12 @@ 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,
@@ -115,6 +113,7 @@ export default {
   },
   computed: {
     ...mapState(['experiments', 'activeNetwork']),
+    ...mapGetters('app', ['isSettingsModalOpen']),
     ...mapGetters(['accountItem']),
     account() {
       if (this.$route.params.accountId) {

diff --git a/src/main.js b/src/main.js
@@ -1,3 +1,4 @@
+import devtools from '@vue/devtools'
 import Vue from 'vue'
 import App from './App.vue'
 import store from './store'
@@ -18,3 +19,7 @@ new Vue({
   store,
   render: (h) => h(App)
 }).$mount('#app')
+
+if (process.env.NODE_ENV === 'development') {
+  devtools.connect()
+}
diff --git a/src/router/index.js b/src/router/index.js
@@ -74,22 +74,22 @@ const routes = [
   {
     path: '/wallet',
     name: 'Wallet',
-    component: () => import('@/views/Wallet/Wallet.vue'),
+    component: () => import(/* webpackPrefetch: true */ '@/views/Wallet/Wallet.vue'),
     meta: { protect: true },
     children: [
       {
         path: 'assets',
-        component: () => import('@/views/Wallet/WalletAssets.vue'),
+        component: () => import(/* webpackPrefetch: true */ '@/views/Wallet/WalletAssets.vue'),
         name: 'WalletAssets'
       },
       {
         path: 'activity',
-        component: () => import('@/views/Wallet/WalletActivity.vue'),
+        component: () => import(/* webpackPrefetch: true */ '@/views/Wallet/WalletActivity.vue'),
         name: 'WalletActivity'
       },
       {
         path: 'nfts',
-        component: () => import('@/views/Wallet/WalletNFTs.vue'),
+        component: () => import(/* webpackPrefetch: true */ '@/views/Wallet/WalletNFTs.vue'),
         name: 'WalletNFTs'
       },
       {
@@ -146,7 +146,7 @@ const routes = [
   // Accounts
   {
     path: '/accounts/management',
-    component: import('@/views/Accounts/Manage.vue'),
+    component: () => import('@/views/Accounts/Manage.vue'),
     name: 'ManageAccounts',
     props: true,
     meta: { protect: true }

diff --git a/src/views/Splash.vue b/src/views/Splash.vue
@@ -6,7 +6,7 @@
     <div class="splash_tagline">
       <NewWalletText class="mt-4" />
     </div>
-    <div class="footer-container">
+    <div class="footer-container" v-if="showFooter">
       <router-link :to="{ path: '/onboarding/home', query: { isImport: true } }"
         ><p class="text-center" id="import_with_seed_phrase_option">
           {{ $t('pages.splash.importWithSeedPhrase') }}
@@ -19,7 +19,7 @@
           </button></router-link
         >
       </p>
-      <p v-if="!keyUpdatedAt">
+      <p v-else>
         <router-link
           :to="{
             path: termsAcceptedAt ? '/onboarding/setup' : '/onboarding/home',
@@ -45,11 +45,20 @@ export default {
     NewWalletText
   },
   computed: mapState(['keyUpdatedAt', 'termsAcceptedAt', 'unlockedAt']),
-  async created() {
+  data() {
+    return {
+      showFooter: false
+    }
+  },
+  mounted() {
     if (this.unlockedAt) {
       this.$router.replace('/wallet')
     } else if (this.keyUpdatedAt) {
       this.$router.replace('/open')
+    } else {
+      this.$nextTick(() => {
+        this.showFooter = true
+      })
     }
   }
 }

diff --git a/src/views/Swap/Accounts.vue b/src/views/Swap/Accounts.vue
@@ -35,39 +35,38 @@ import { isEvmChain } from '@liquality/cryptoassets'
 
 export default {
   computed: {
-    props: {
-      account: Object,
-      toAccount: Object,
-      assetSelection: String,
-      excludeAsset: String
-    },
     ...mapState(['activeNetwork']),
     ...mapGetters(['accountsData', 'accountsWithBalance', 'chainAssets']),
     accounts() {
-      return (this.assetSelection === 'from' ? this.accountsWithBalance : this.accountsData).map(
-        (acc) => {
+      return (this.assetSelection === 'from' ? this.accountsWithBalance : this.accountsData)
+        .filter((acc) => {
+          if (isEvmChain(this.activeNetwork, acc.chain)) {
+            const _account = this.assetSelection === 'to' ? this.account : this.toAccount
+            if (_account) {
+              return _account.addresses[0] === acc.addresses[0] && acc.assets?.length > 0
+            }
+          }
+          return acc.assets?.length > 0
+        })
+        .map((acc) => {
           const assets = this.chainAssets[acc.chain].filter((asset) => asset !== this.excludeAsset)
           return {
             ...acc,
             assets
-          }.filter((acc) => {
-            if (isEvmChain(this.activeNetwork, acc.chain)) {
-              const _account = this.assetSelection === 'from' ? this.account : this.toAccount
-              if (_account) {
-                return _account.addresses[0] === acc.addresses[0] && acc.assets?.length > 0
-              }
-            }
-            return acc.assets?.length > 0
-          })
-        }
-      )
+          }
+        })
     }
   },
   components: {
     WalletAccounts,
     SearchIcon
   },
-  props: ['excludeAsset', 'assetSelection'],
+  props: {
+    account: Object,
+    toAccount: Object,
+    assetSelection: String,
+    excludeAsset: String
+  },
   data() {
     return {
       search: ''

diff --git a/src/views/Swap/Swap.vue b/src/views/Swap/Swap.vue
@@ -538,10 +538,10 @@ import ArrowDown from '@/assets/icons/arrow-down.svg'
 import DetailsContainer from '@/components/DetailsContainer'
 import SendInput from './SendInput'
 import ReceiveInput from './ReceiveInput'
-import Accounts from './Accounts'
 import QuotesModal from './QuotesModal'
 import SwapProvidersInfoModal from './SwapProvidersInfoModal'
 import SwapInfo from './SwapInfo'
+import Accounts from './Accounts'
 import SwapProviderLabel from '@/components/SwapProviderLabel'
 import LedgerSignRequestModal from '@/components/LedgerSignRequestModal'
 import OperationErrorModal from '@/components/OperationErrorModal'