Assets to state. Manage assets

.eslintrc.js

@@ -1,18 +1,34 @@
 module.exports = {
   root: true,
+
   env: {
     node: true,
     webextensions: true
   },
+
   extends: [
     'plugin:vue/essential',
     '@vue/standard'
   ],
+
   parserOptions: {
     parser: 'babel-eslint'
   },
+
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
+  },
+
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
 }

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest',
+  transformIgnorePatterns: [
+    '/node_modules/(?!lodash-es)'
+  ],
+  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)']
+}

package.json

@@ -13,7 +13,8 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "sync-versions": "node script/sync-versions.js",
-    "test": "jest --runInBand"
+    "test:unit": "jest tests/unit",
+    "test:integration": "jest tests/integration --runInBand"
   },
   "dependencies": {
     "@liquality/bitcoin-earn-fee-provider": "^0.7.3",
@@ -26,7 +27,7 @@
     "@liquality/bitcoin-swap-provider": "^0.7.3",
     "@liquality/client": "^0.7.3",
     "@liquality/crypto": "^0.7.3",
-    "@liquality/cryptoassets": "^0.2.1",
+    "@liquality/cryptoassets": "^0.2.2",
     "@liquality/ethereum-erc20-provider": "^0.7.3",
     "@liquality/ethereum-erc20-scraper-swap-find-provider": "^0.7.3",
     "@liquality/ethereum-erc20-swap-provider": "^0.7.3",
@@ -64,9 +65,11 @@
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-eslint": "~4.3.0",
     "@vue/cli-plugin-router": "~4.3.0",
+    "@vue/cli-plugin-unit-jest": "^4.5.8",
     "@vue/cli-plugin-vuex": "~4.3.0",
     "@vue/cli-service": "~4.3.0",
     "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/test-utils": "^1.1.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",

src/broker/index.js

@@ -5,6 +5,7 @@ import Background from './Background'
 import Foreground from './Foreground'
 import { isBackgroundScript } from './utils'
 import Storage from './Storage'
+import { isMigrationNeeded, processMigrations } from '../store/migrations'
 
 const Broker = state => {
   if (isBackgroundScript(window)) {
@@ -16,19 +17,19 @@ const Broker = state => {
     })
 
     /**
-     * Hook into vuex-persist `restoreState` such that a migration of the old localstorage state
-     * happens before the plugin starts restoring the state from chrome storage.
+     * Hook into vuex-persist `restoreState` to run migrations on state
+     * This happens before the plugin restores the state from chrome storage.
      */
-    const prevStorage = window.localStorage.getItem('liquality-wallet-dev-14')
-    if (prevStorage) {
-      const restoreState = vuexPersist.restoreState
-      vuexPersist.restoreState = async (key, storage) => {
-        await Storage.setItem('liquality-wallet', JSON.parse(prevStorage))
-        const state = await restoreState(key, storage)
-        window.localStorage.removeItem('liquality-wallet-dev-14')
-        vuexPersist.restoreState = restoreState // Remove hook
-        return state
+    const restoreState = vuexPersist.restoreState
+    vuexPersist.restoreState = async (key, storage) => {
+      const currentState = await Storage.getItem('liquality-wallet')
+      if (isMigrationNeeded(currentState)) {
+        const newState = await processMigrations(currentState)
+        await Storage.setItem('liquality-wallet', newState)
       }
+      const state = await restoreState(key, storage)
+      vuexPersist.restoreState = restoreState // Remove hook
+      return state
     }
 
     return {

src/build.config.js

@@ -0,0 +1,6 @@
+export default {
+  defaultAssets: {
+    mainnet: ['BTC', 'ETH', 'DAI', 'USDC', 'USDT', 'WBTC', 'UNI'],
+    testnet: ['BTC', 'ETH', 'DAI']
+  }
+}

src/components/NavBar.vue

@@ -9,6 +9,7 @@
       </div>
       <div class="navbar_menu" v-if="showMenu" @click.stop="showMenuList = !showMenuList"><HamburgerIcon class="navbar_menu_icon" /></div>
       <ul class="menu_list navbar_menu_list" v-if="showMenuList" v-click-away="hideMenu">
+        <li @click="assets"><AssetsIcon />Manage Assets</li>
         <li @click="backup"><PaperIcon /> Backup Seed</li>
         <li @click="lock"><LockIcon class="lock_icon"/> Lock</li>
       </ul>
@@ -24,6 +25,7 @@ import HamburgerIcon from '@/assets/icons/hamburger.svg'
 import LockIcon from '@/assets/icons/lock.svg'
 import PaperIcon from '@/assets/icons/paper.svg'
 import ChevronLeftIcon from '@/assets/icons/chevron_left.svg'
+import AssetsIcon from '@/assets/icons/assets.svg'
 
 export default {
   directives: {
@@ -33,7 +35,8 @@ export default {
     ChevronLeftIcon,
     HamburgerIcon,
     LockIcon,
-    PaperIcon
+    PaperIcon,
+    AssetsIcon
   },
   props: ['showMenu', 'showBack', 'backPath', 'backLabel'],
   data () {
@@ -52,6 +55,10 @@ export default {
       this.showMenuList = false
       this.$router.replace('/backup')
     },
+    assets () {
+      this.showMenuList = false
+      this.$router.replace('/settings/manage-assets')
+    },
     hideMenu () {
       this.showMenuList = false
     }
@@ -102,7 +109,7 @@ export default {
       height: 18px;
       width: $wrapper-padding;
       object-fit: cover;
-      margin-right: 6px;
+      margin-right: 10px;
     }
 
     .lock_icon {

src/router/index.js

@@ -13,12 +13,15 @@ import Send from '@/views/Send.vue'
 import Receive from '@/views/Receive.vue'
 import Swap from '@/views/Swap.vue'
 
+import ManageAssets from '@/views/ManageAssets'
+
 import Enable from '@/views/Enable.vue'
 import Permission from '@/views/Permission.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
+  // Onboarding
   {
     path: '/',
     component: Splash
@@ -41,6 +44,16 @@ const routes = [
     path: '/backup',
     component: BackupWallet
   },
+  // Onboarding
+
+  // Settings
+  {
+    path: '/settings/manage-assets',
+    component: ManageAssets
+  },
+  // Settings
+
+  // Wallet
   {
     path: '/wallet',
     component: Wallet
@@ -72,6 +85,9 @@ const routes = [
     component: Swap,
     props: true
   },
+  // Wallet
+
+  // Injection
   {
     path: '/enable',
     component: Enable
@@ -80,6 +96,7 @@ const routes = [
     path: '/permission',
     component: Permission
   }
+  // Injection
 ]
 
 const router = new VueRouter({