Draft: Feat/upgrade to vue3

package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "@ethereumjs/common": "^2.6.5",
     "@ethereumjs/tx": "^3.5.2",
-    "@gtm-support/vue2-gtm": "^1.3.0",
+    "@gtm-support/vue-gtm": "^1.6.0",
     "@metamask/contract-metadata": "^1.36.0",
     "@metamask/eth-sig-util": "^4.0.1",
     "@metamask/obs-store": "^7.0.0",
@@ -83,16 +83,16 @@
     "register-service-worker": "^1.7.2",
     "single-call-balance-checker-abi": "^1.0.0",
     "swappable-obj-proxy": "^1.1.0",
-    "vue": "^2.6.14",
-    "vue-content-loader": "^0.2.3",
-    "vue-i18n": "^8.27.1",
-    "vue-json-pretty": "^1.9.2",
-    "vue-qr": "^3.2.4",
+    "vue": "^3.2.37",
+    "vue-content-loader": "^2.0.1",
+    "vue-i18n": "^9.1.10",
+    "vue-json-pretty": "^2.2.0",
+    "vue-qr": "^4.0.9",
     "vue-qrcode-reader": "^3.1.0",
-    "vue-router": "^3.6.5",
+    "vue-router": "^4.0.16",
     "vue-spinner": "^1.0.4",
-    "vuetify": "^2.6.10",
-    "vuex": "^3.6.2",
+    "vuex": "^4.0.2",
+    "vuetify": "^3.0.0-beta.11",
     "vuex-persist": "^3.1.3",
     "web3": "^1.8.0",
     "web3-utils": "^1.8.0",
@@ -167,8 +167,7 @@
     "url": "^0.11.0",
     "vue-cli-plugin-vuetify": "^2.5.8",
     "vue-cli-plugin-webpack-bundle-analyzer": "~4.0.0",
-    "vue-template-compiler": "^2.7.10",
-    "vuetify-loader": "^1.9.2",
+    "webpack-plugin-vuetify": "^2.0.0-alpha.12",
     "worker-loader": "^3.0.8"
   },
   "engines": {

src/App.scss

@@ -1,6 +1,7 @@
-@import './scss/elevation-one.mixin';
+@import "./scss/elevation-one.mixin";
 
 .torus-app.v-application {
+  background: none;
   @media (min-width: 1904px) {
     .container:not(.container--fluid) {
       max-width: 1400px;
@@ -34,17 +35,17 @@
 
   // Override
   .primary {
-    background-color: var(--v-torusBrand1-base) !important;
-    border-color: var(--v-torusBrand1-base) !important;
+    background-color: rgb(var(--v-theme-torusBrand1)) !important;
+    border-color: rgb(var(--v-theme-torusBrand1)) !important;
   }
   .primary--text {
-    color: var(--v-torusBrand1-base) !important;
-    caret-color: var(--v-torusBrand1-base) !important;
+    color: rgb(var(--v-theme-torusBrand1)) !important;
+    caret-color: rgb(var(--v-theme-torusBrand1)) !important;
   }
 
   // Link
   a:focus-visible {
-    color: var(--v-torusBrand2-base) !important;
+    color: rgb(var(--v-theme-torusBrand2)) !important;
     font-weight: bold !important;
     outline: none;
   }
@@ -100,7 +101,7 @@
   }
 
   .body-link {
-    color: var(--v-torusBrand1-base);
+    color: rgb(var(--v-theme-torusBrand1));
   }
 
   /* Header 6 12px*/
@@ -125,7 +126,7 @@
     line-height: 0.75rem;
     letter-spacing: 0;
     font-weight: normal;
-    color: var(--v-torusGray3-base);
+    color: rgb(var(--v-theme-torusGray3));
   }
 
   /* Header 6 10px*/
@@ -140,7 +141,7 @@
     border: 1px solid #f5f5f5;
     box-shadow: 0px 14px 28px rgba(46, 91, 255, 0.06);
     border-radius: 9px;
-    &.theme--dark {
+    &.v-theme--dark {
       border: 0;
       background: none;
       box-shadow: 5px 5px 10px #212121, -5px -5px 10px rgba(55, 56, 60, 0.25);
@@ -198,7 +199,7 @@
     }
     &.v-text-field--outlined.error--text {
       fieldset {
-        border: 1px solid var(--v-error-base);
+        border: 1px solid rgb(var(--v-error-base));
       }
     }
     &.v-input.v-input--dense > .v-input__control > .v-input__slot {
@@ -212,21 +213,21 @@
     }
     &.v-text-field--outlined.v-input--is-focused:not(.error--text) {
       fieldset {
-        border: 1px solid var(--v-torusFont1-base);
+        border: 1px solid rgb(var(--v-theme-torusFont1));
       }
     }
   }
 
-  .v-btn:not(.v-btn--text):not(.v-btn--icon) {
+  .v-btn:not(.v-btn--variant-text):not(.v-btn--variant-icon) {
     box-shadow: 0px 0px 2px rgba(51, 65, 80, 0.03), 0px 2px 2px rgba(51, 65, 80, 0.03);
-    &:not(.v-btn--round) {
+    &:not(.v-btn--rounded) {
       border-radius: 6px;
     }
   }
 
-  .v-btn.v-btn--text {
+  .v-btn.v-btn--variant-text {
     &:focus {
-      color: var(--v-torusBrand2-base) !important;
+      color: rgb(var(--v-theme-torusBrand2)) !important;
       font-weight: bold !important;
       &::before {
         opacity: 0;
@@ -235,15 +236,15 @@
   }
 
   .v-btn {
-    text-transform: inherit;
+    text-transform: none;
     letter-spacing: normal;
   }
 
-  &.theme--light {
+  &.v-theme--light {
     .body-2 {
-      color: var(--v-torus_1-base);
+      color: rgb(var(--v-theme-torus_1));
     }
-    .theme--light.v-btn.torus-btn1 {
+    .v-theme--light.v-btn.torus-btn1 {
       @extend .elevation-3;
       &.v-btn--fab {
         border-radius: 50%;
@@ -253,26 +254,22 @@
     }
   }
 
-  .v-btn {
-    text-transform: inherit;
-  }
-
-  &.theme--dark {
-    background: var(--v-torusBlack-base);
+  &.v-theme--dark {
+    background: rgb(var(--v-theme-torusBlack));
     &.v-sheet {
-      background: var(--v-torusBlack2-base);
+      background: rgb(var(--v-theme-torusBlack2));
     }
-    .v-app-bar.v-toolbar.v-sheet {
-      background: var(--v-torusBlack2-base);
+    .v-app-bar.v-toolbar {
+      background: rgb(var(--v-theme-torusBlack2));
     }
     .v-card {
-      background-color: var(--v-torusBlack2-base);
+      background: rgb(var(--v-theme-torusBlack2));
     }
     .v-list {
-      background-color: var(--v-torusBlack2-base);
+      background-color: rgb(var(--v-theme-torusBlack2));
     }
     .v-expansion-panel {
-      background-color: var(--v-torusBlack2-base);
+      background-color: rgb(var(--v-theme-torusBlack2));
     }
 
     .elevation-1,
@@ -290,29 +287,52 @@
     }
 
     .v-input {
-      &.v-text-field--outlined > .v-input__control {
-        & > .v-input__slot {
-          background: var(--v-torusBlack-base);
+      .v-input__control {
+        .v-field--variant-outlined {
+          background: rgb(var(--v-theme-torusBlack));
           box-shadow: inherit;
-        }
-        fieldset {
-          border: 1px solid var(--v-torusGray3-base);
-        }
-        .v-icon {
-          color: var(--v-text_2-base);
-        }
-        input {
-          color: var(--v-text_2-base);
+          .v-field__outline {
+            border: 1px solid rgb(var(--v-theme-torusGray3));
+
+            .v-field__outline__start,
+            .v-field__outline__end {
+              border: none;
+            }
+          }
+          .v-icon {
+            color: rgb(var(--v-theme-text_2));
+          }
+          input {
+            color: rgb(var(--v-theme-text_2));
+          }
+
+          &.v-field--error {
+            .v-field__outline {
+              border: 1px solid rgb(var(--v-theme-error));
+
+              .v-field__outline__start,
+              .v-field__outline__end {
+                border: none;
+              }
+            }
+          }
         }
       }
     }
 
-    .theme--dark.v-btn.torus-btn1 {
+    .v-theme--dark.v-btn.torus-btn1 {
+      z-index: 100;
       @extend .elevation-3;
       &.v-btn--fab {
         border-radius: 50%;
       }
-      background-color: var(--v-torusBlack2-base);
+      background-color: rgb(var(--v-theme-torusBlack2));
+    }
+
+    .v-theme--dark.v-btn {
+      &--disabled {
+        background-color: rgba(255, 255, 255, 0.12) !important;
+      }
     }
   }
 }
@@ -334,3 +354,60 @@
     padding: 0 1rem;
   }
 }
+
+// TODO: figure out a better way to solve this.
+.v-overlay-container {
+  .v-tooltip.v-overlay {
+    .v-overlay__content {
+      background: rgb(var(--v-theme-torusBlack2)) !important;
+      color: rgb(var(--v-theme-text_1)) !important;
+    }
+  }
+
+  .v-dialog.v-overlay {
+    .v-overlay__content {
+      width: 100%;
+    }
+  }
+
+  .v-overlay {
+    .v-btn {
+      text-transform: none;
+    }
+    &.v-theme--dark {
+      .v-input {
+        .v-input__control {
+          .v-field--variant-outlined {
+            background: rgb(var(--v-theme-torusBlack));
+            box-shadow: inherit;
+            .v-field__outline {
+              border: 1px solid rgb(var(--v-theme-torusGray3));
+
+              .v-field__outline__start,
+              .v-field__outline__end {
+                border: none;
+              }
+            }
+            .v-icon {
+              color: rgb(var(--v-theme-text_2));
+            }
+            input {
+              color: rgb(var(--v-theme-text_2));
+            }
+
+            &.v-field--error {
+              .v-field__outline {
+                border: 1px solid rgb(var(--v-theme-error));
+
+                .v-field__outline__start,
+                .v-field__outline__end {
+                  border: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/App.vue

@@ -1,10 +1,10 @@
 <template>
   <v-app class="torus-app">
     <template v-if="loginInProgress">
-      <v-container class="spinner" fluid :class="$vuetify.theme.dark ? 'torus-dark' : ''">
+      <v-container class="spinner" fluid :class="isDarkMode ? 'torus-dark' : ''">
         <BoxLoader :force-spinner="true" />
         <p class="bottom-text text-body-1 text-center font-weight-medium">
-          {{ t('login.loader') }}
+          {{ $t('login.loader') }}
         </p>
       </v-container>
     </template>
@@ -16,24 +16,45 @@
 
 <script>
 import log from 'loglevel'
-import { mapActions } from 'vuex'
+import { useTheme } from 'vuetify'
+import { mapActions, mapState } from 'vuex'
 
 import BoxLoader from './components/helpers/BoxLoader'
+import { THEME_DARK_BLACK_NAME } from './utils/enums'
 /* eslint-disable vue-scoped-css/enforce-style-type */
 export default {
   components: { BoxLoader },
+  setup() {
+    const theme = useTheme()
+    return { vuetifyTheme: theme }
+  },
   data() {
     return {
       loginInProgress: false,
     }
   },
+  computed: {
+    ...mapState(['theme', 'whitelabel']),
+    isDarkMode() {
+      return this.$vuetify.theme.current.dark
+    },
+  },
   watch: {
     async $route(to) {
       this.updateBackgrounds(to.name)
     },
+    theme() {
+      log.info('theme property has changed')
+      this.updateTheme()
+    },
+    whitelabel() {
+      log.info('whitelabel property has changed')
+      this.updateTheme()
+    },
   },
   async created() {
     this.updateBackgrounds(this.$route.name)
+    this.updateTheme()
     try {
       this.loginInProgress = true
       await this.rehydrate()
@@ -60,6 +81,10 @@ export default {
         pageApplication.style.background = ''
       }
     },
+    updateTheme() {
+      const isDarkMode = this.theme === THEME_DARK_BLACK_NAME
+      this.vuetifyTheme.global.name.value = isDarkMode ? 'dark' : 'light'
+    },
   },
 }
 </script>