Merge pull request #890 from liquality/release-candidate-0.74.0

Release candidate 0.74.0
liquality · Oct 3, 2022 · e569b21 · e569b21
2 parents 34d7ad8 + 7fd8c0d
commit e569b21
Show file tree

Hide file tree

Showing 132 changed files with 9,525 additions and 1,906 deletions.
diff --git a/.env b/.env
@@ -9,4 +9,6 @@ VUE_APP_NEAR_MAINNET_URL=
 VUE_APP_TERRA_MAINNET_URL=
 VUE_APP_ONRAMPER_WIDGET_URL=https://widget.onramper.com/
 VUE_APP_ONRAMPER_API_KEY=
+VUE_APP_SUPPORTED_LOCALES=en,es,zh,pt,ph,cb
+VUE_APP_DEFAULT_LOCALE=en
 
diff --git a/README.md b/README.md
@@ -16,6 +16,25 @@ npm run dev
 
 and load `/dist` directory as unpacked extension on Google Chrome.
 
+### Developing with wallet-core
+
+If you are simultaneously making changes in the [wallet-core](https://github.com/liquality/wallet-core) lib and you would like to test the wallet with your changes, do the following: 
+
+on wallet-core:
+```sh
+yarn
+yarn build # or yarn watch
+```
+
+on the wallet:
+```sh
+yarn link /path/to/wallet-core/repo
+```
+
+This will link wallet-core in the wallet with your local version. 
+
+If you see dependency errors when you link, try to update any common dependencies to the same version as in `wallet-core`.
+
 ### Compiles and minifies for production
 ```
 npm run build

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "liquality-wallet",
-  "version": "0.73.0",
+  "version": "0.74.0",
   "private": true,
   "author": "Liquality <info@liquality.io>",
   "scripts": {
@@ -42,6 +42,7 @@
     "ethers": "5.5.4",
     "extension-port-stream": "^2.0.1",
     "human-standard-token-abi": "^2.0.0",
+    "i18n-js": "^4.1.1",
     "lodash-es": "^4.17.15",
     "log": "^6.0.0",
     "memoizee": "^0.4.15",
@@ -77,6 +78,7 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "1.3.0",
     "babel-eslint": "^10.1.0",
+    "caniuse-lite": "^1.0.30001397",
     "chai-match": "^1.1.1",
     "eslint": "^6.8.0",
     "eslint-plugin-import": "^2.23.4",
@@ -96,6 +98,7 @@
     "priv-key-precommit": "0.5.0",
     "puppeteer": "17.1.2",
     "puppeteer-core": "17.1.2",
+    "raw-loader": "4.0.2",
     "sass": "1.49.0",
     "sass-loader": "^8.0.2",
     "sinon-chrome": "^3.0.1",

diff --git a/src/App.vue b/src/App.vue
@@ -1,25 +1,37 @@
 <template>
-  <div id="app" v-if="brokerReady">
-    <Head v-if="unlockedAt" :show-dapp-connections="showDappConnections" />
-    <router-view />
-    <template v-if="unlockedAt && termsAcceptedAt">
-      <GlobalModals />
+  <div id="app">
+    <template v-if="brokerReady && localesLoaded">
+      <Head v-if="unlockedAt" :show-dapp-connections="showDappConnections" />
+      <router-view />
+      <GlobalModals v-if="unlockedAt && termsAcceptedAt" />
     </template>
+    <div class="login-wrapper spinner-container" v-else>
+      <SpinnerIcon class="btn-loading" />
+    </div>
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
 import Head from '@/components/Head.vue'
 import GlobalModals from '@/components/GlobalModals.vue'
-
+import SpinnerIcon from '@/assets/icons/spinner.svg'
 export default {
   components: {
     Head,
-    GlobalModals
+    GlobalModals,
+    SpinnerIcon
+  },
+  data() {
+    return {
+      localesLoaded: false
+    }
   },
   computed: {
     ...mapState(['activeNetwork', 'brokerReady', 'keyUpdatedAt', 'termsAcceptedAt', 'unlockedAt']),
+    ...mapState({
+      locale: (state) => state.app?.locale
+    }),
     showDappConnections() {
       return !this.$route.path.startsWith('/permission') && !this.$route.path.startsWith('/enable')
     },
@@ -28,10 +40,28 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['initializeAnalytics'])
+    ...mapActions(['initializeAnalytics']),
+    ...mapActions('app', ['setLocalePreference', 'getBrowserLocale'])
   },
   async created() {
     await this.initializeAnalytics()
+    if (this.locale) {
+      await this.changeLocale(this.locale)
+    } else {
+      const browserLocale = await this.getBrowserLocale()
+      const _locale = this.locales.includes(browserLocale)
+        ? browserLocale
+        : process.env.VUE_APP_DEFAULT_LOCALE
+      await this.changeLocale(_locale)
+      // store the locale in state
+      await this.setLocalePreference({ locale: this.currentLocale })
+    }
+    this.localesLoaded = true
+  },
+  watch: {
+    localeKey(newVal, oldVal) {
+      console.log('localeKey', newVal, oldVal)
+    }
   }
 }
 </script>
@@ -44,6 +74,10 @@ export default {
   flex-direction: column;
   background: #ffffff;
   overflow: hidden;
+
+  .spinner-container {
+    justify-content: center;
+  }
 }
 
 @keyframes redraw {

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
@@ -363,12 +363,12 @@ textarea {
       }
     }
   }
+}
 
-  svg.btn-loading {
-    height: 24px;
-    circle {
-      stroke: #dedede;
-    }
+svg.btn-loading {
+  height: 24px;
+  circle {
+    stroke: #dedede;
   }
 }
 
@@ -400,6 +400,22 @@ textarea {
   height: 28px;
 }
 
+.dropdown-list {
+    position: relative;
+    height: 36px;
+    display: flex;
+    font-size: $font-size-tiny;
+    font-weight: $font-weight-base;
+    justify-content: center;
+    align-items: center;
+    text-transform: capitalize;
+    cursor: pointer;
+
+    svg {
+      height: 6px;
+      margin-left: 4px;
+    }
+}
 .menu_list {
   position: absolute;
   z-index: 3;

diff --git a/src/background.js b/src/background.js
@@ -38,7 +38,7 @@ store.subscribe(async ({ type, payload }, state) => {
     case 'CREATE_WALLET':
       // Analytics Opt in event (if state has acceptedData is not 0)
       if (state.analytics?.acceptedDate > 0) {
-        dispatch('trackAnalytics', {
+        dispatch('app/trackAnalytics', {
           event: 'User Opt-In to Analytics',
           properties: {
             category: 'Analytics'
@@ -47,7 +47,7 @@ store.subscribe(async ({ type, payload }, state) => {
       }
       // Import with seed phrase event
       if (state.wallets[0].imported) {
-        dispatch('trackAnalytics', {
+        dispatch('app/trackAnalytics', {
           event: 'Import with seed phrase',
           properties: {
             walletVersion,
@@ -57,7 +57,7 @@ store.subscribe(async ({ type, payload }, state) => {
         })
       } else {
         // Create wallet event
-        dispatch('trackAnalytics', {
+        dispatch('app/trackAnalytics', {
           event: 'Create a new wallet',
           properties: {
             walletVersion,
@@ -73,7 +73,7 @@ store.subscribe(async ({ type, payload }, state) => {
         network: state.activeNetwork,
         walletId: state.activeWalletId
       })
-      await dispatch('trackAnalytics', {
+      await dispatch('app/trackAnalytics', {
         event: `Change Active Network to ${state.activeNetwork}`,
         properties: {
           walletVersion,
@@ -93,7 +93,7 @@ store.subscribe(async ({ type, payload }, state) => {
         dispatch('updateMarketData', { network: state.activeNetwork })
       break
     case 'LOCK_WALLET':
-      await dispatch('trackAnalytics', {
+      await dispatch('app/trackAnalytics', {
         event: 'Wallet locked successfully',
         properties: {
           walletVersion,
@@ -148,7 +148,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('trackAnalytics', {
+      await dispatch('app/trackAnalytics', {
         event: 'New SWAP',
         properties: {
           category: 'Swaps',
@@ -171,7 +171,7 @@ store.subscribe(async ({ type, payload }, state) => {
         cryptoassets[payload.transaction.from],
         payload.transaction.amount
       )
-      await dispatch('trackAnalytics', {
+      await dispatch('app/trackAnalytics', {
         event: `User send funds`,
         properties: {
           walletVersion,
@@ -187,7 +187,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'ADD_EXTERNAL_CONNECTION':
-      await dispatch('trackAnalytics', {
+      await dispatch('app/trackAnalytics', {
         event: 'Connect to Dapps',
         properties: {
           walletVersion,
@@ -200,7 +200,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'ADD_CUSTOM_TOKEN':
-      await dispatch('trackAnalytics', {
+      await dispatch('app/trackAnalytics', {
         event: 'Custom Token Added',
         properties: {
           walletVersion,
@@ -218,7 +218,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'REMOVE_CUSTOM_TOKEN':
-      await dispatch('trackAnalytics', {
+      await dispatch('app/trackAnalytics', {
         event: 'Custom Token Removed',
         properties: {
           walletVersion,
@@ -234,7 +234,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('trackAnalytics', {
+          await dispatch('app/trackAnalytics', {
             event: 'Swap status change',
             properties: {
               walletVersion,
@@ -250,7 +250,7 @@ store.subscribe(async ({ type, payload }, state) => {
       }
       if (item.type === 'SEND' && payload.updates) {
         if (payload.updates.status !== 'undefined') {
-          await dispatch('trackAnalytics', {
+          await dispatch('app/trackAnalytics', {
             event: 'Send status change',
             properties: {
               walletVersion,
@@ -264,7 +264,7 @@ store.subscribe(async ({ type, payload }, state) => {
       }
       if (item.type === 'NFT' && payload.updates) {
         if (payload.updates.status !== 'undefined') {
-          await dispatch('trackAnalytics', {
+          await dispatch('app/trackAnalytics', {
             event: 'Send NFT status change',
             properties: {
               walletVersion,
@@ -283,7 +283,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('trackAnalytics', {
+        await dispatch('app/trackAnalytics', {
           event: 'User funded wallet',
           properties: {
             walletVersion,
@@ -296,7 +296,7 @@ store.subscribe(async ({ type, payload }, state) => {
       prevState = currentState
       break
     case 'TOGGLE_EXPERIMENT':
-      await dispatch('trackAnalytics', {
+      await dispatch('app/trackAnalytics', {
         event: `User on Experiment feature ${payload.name}`,
         properties: {
           walletVersion,
@@ -307,7 +307,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'CHANGE_PASSWORD':
-      await dispatch('trackAnalytics', {
+      await dispatch('app/trackAnalytics', {
         walletVersion,
         event: 'Change Password',
         properties: {
@@ -317,7 +317,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'DISABLE_ASSETS':
-      await dispatch('trackAnalytics', {
+      await dispatch('app/trackAnalytics', {
         walletVersion,
         event: 'User Disable Asset',
         properties: {
@@ -328,7 +328,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'DISABLE_ETHEREUM_INJECTION':
-      await dispatch('trackAnalytics', {
+      await dispatch('app/trackAnalytics', {
         walletVersion,
         event: 'User Disable Default Web3 Wallet Injection',
         properties: {
@@ -338,7 +338,7 @@ store.subscribe(async ({ type, payload }, state) => {
       })
       break
     case 'ENABLE_ETHEREUM_INJECTION':
-      await dispatch('trackAnalytics', {
+      await dispatch('app/trackAnalytics', {
         walletVersion,
         event: 'User Enable Default Web3 Wallet Injection',
         properties: {

diff --git a/src/broker/index.js b/src/broker/index.js
@@ -15,7 +15,14 @@ const Broker = (state) => {
       key: 'liquality-wallet',
       storage: Storage,
       asyncStorage: true,
-      reducer: (s) => omit(s, ['key', 'wallets', 'unlockedAt', 'app']) // do not persist these states
+      reducer: (state) => {
+        return {
+          ...omit(state, ['key', 'wallets', 'unlockedAt', 'app']),
+          app: {
+            locale: state.app?.locale
+          }
+        }
+      }
     })
 
     /**

diff --git a/src/components/AccountTooltip.vue b/src/components/AccountTooltip.vue
@@ -13,7 +13,7 @@
             {{ address ? shortenAddress(address) : '' }}
           </p>
           <p class="text-muted my-0 text-left" v-if="isChainEvmCompatible(asset)">
-            Available Gas {{ nativeAssetBalance }} {{ nativeAsset }}
+            {{ $t('components.accountTooltip.availableGas') }} {{ nativeAssetBalance }} {{ nativeAsset }}
           </p>
         </div>
       </div>