add login/create openlogin option

src/components/WalletSettings/DefaultAccount/DefaultAccount.scss

@@ -3,30 +3,48 @@
   .v-avatar {
     border-radius: 0;
     align-self: start;
-    & > svg, & > .v-icon {
+    & > svg,
+    & > .v-icon {
       margin: auto;
     }
   }
-  .v-list-item {
-    border-bottom: 1px solid #D3D5E2;
-    &.theme--dark {
-      border-bottom: 1px solid #202125;
-    }
-  }
-  .v-list-item:last-child {
-    border-bottom: 0;
-    &.theme--dark {
-      border-bottom: 0;
-    }
+
+  .tkey-features {
+    padding-left: 16px;
   }
+
   &.theme--dark {
     border: 1px solid #202125;
-    .v-list-item {
-      background: #28292E;
+  }
+}
+
+.v-list-item {
+  border-bottom: 1px solid #d3d5e2;
+  &.theme--dark {
+    border-bottom: 1px solid #202125;
+    background: #28292e;
+  }
+  &.menu-item.v-list-item--link:hover {
+    ::v-deep .v-list-item__title > span {
+      color: var(--v-torusBrand1-base) !important;
+    }
+    &:before {
+      opacity: 0.1;
+      background-color: var(--v-torusBrand1-base);
     }
   }
-
-  .tkey-features {
-    padding-left: 16px
+}
+.v-list-item:last-child {
+  border-bottom: 0;
+  &.theme--dark {
+    border-bottom: 0;
+  }
+}
+.v-menu__content {
+  border-radius: 6px !important;
+}
+.select-default-label {
+  ::v-deep .v-icon.tooltip-icon {
+    margin-top: 0;
   }
 }

src/components/WalletSettings/DefaultAccount/DefaultAccount.vue

@@ -10,49 +10,40 @@
           <v-icon size="16" class="torusGray1--text">{{ `$vuetify.icons.${wallet.icon}` }}</v-icon>
         </v-list-item-avatar>
         <v-list-item-content>
-          <v-list-item-title class="font-weight-regular caption">
-            <span class="text_1--text">{{ wallet.title }}</span>
+          <v-list-item-title class="font-weight-bold caption">
+            <span class="text_2--text">{{ wallet.title }}</span>
           </v-list-item-title>
         </v-list-item-content>
-        <v-list-item-action class="ma-0">
-          <div v-if="wallet.isDefault" class="caption torus_1--text" :style="{ marginRight: '15px' }">
-            {{ t('tkeySettings.default') }}
-          </div>
-          <v-btn v-else-if="hasThresholdLogged" text small color="torusBrand1" class="caption" @click="setDefaultPublicAddress(wallet.key)">
-            {{ t('tkeySettings.switchDefault') }}
-          </v-btn>
-        </v-list-item-action>
       </v-list-item>
-      <!-- <v-list-item v-if="hasThreshold && !hasThresholdLogged" class="pl-0 pr-1">
+      <v-list-item v-if="hasThreshold && !hasThresholdLogged" class="pl-0 pr-1">
         <v-list-item-avatar class="ma-0">
           <v-icon size="16" class="torusGray1--text">$vuetify.icons.wallet</v-icon>
         </v-list-item-avatar>
         <v-list-item-content>
-          <v-list-item-title class="font-weight-regular caption">
-            <span class="text_1--text">{{ t('tkeySettings.twoFaWallet') }}</span>
+          <v-list-item-title class="font-weight-bold caption">
+            <span class="text_2--text">{{ `OpenLogin ${t('tkeySettings.account')}` }}</span>
           </v-list-item-title>
         </v-list-item-content>
         <v-list-item-action class="ma-0">
-          <v-btn :loading="loggingWithTKey" text small color="torusBrand1" class="caption" @click="loginWithTKey">
-            {{ t('tkeySettings.loginWithTkey') }}
-          </v-btn>
+          <v-progress-circular v-if="loggingWithThreshold" color="torusBrand1" size="16" width="2" class="mr-3" indeterminate />
+          <a v-else class="caption mr-3" @click="loginWithThreshold">{{ t('tkeySettings.loginWith').replace(/\{account\}/gi, `OpenLogin`) }}</a>
         </v-list-item-action>
-      </v-list-item> -->
-      <!-- <v-list-item v-if="!hasThreshold" class="pl-0 pr-1">
+      </v-list-item>
+      <v-list-item v-if="!hasThreshold" class="pl-0 pr-1">
         <v-list-item-avatar class="ma-0">
           <v-icon size="16" class="torusGray1--text">$vuetify.icons.wallet</v-icon>
         </v-list-item-avatar>
         <v-list-item-content>
           <v-list-item-title class="caption mb-3 mt-1">
-            <span class="text_1--text font-weight-bold mr-1">{{ t('tkeySettings.twoFaWallet') }}</span>
+            <span class="text_1--text font-weight-bold mr-1">{{ `OpenLogin ${t('tkeySettings.account')}` }}</span>
             <span class="torusBrand1--text font-italic">{{ t('tkeySettings.new') }}</span>
           </v-list-item-title>
           <div class="caption pb-3">
-            <div class="mb-1">{{ t('tkeySettings.newDesc') }}:</div>
+            <div class="mb-1">{{ t('tkeySettings.newThresholdDesc') }}:</div>
             <ul class="tkey-features mb-4">
-              <li>{{ t('tkeySettings.newList1') }}</li>
-              <li>{{ t('tkeySettings.newList2') }}</li>
-              <li>{{ t('tkeySettings.newList3') }}</li>
+              <li>{{ t('tkeySettings.newThresholdList1') }}</li>
+              <li>{{ t('tkeySettings.newThresholdList2') }}</li>
+              <li>{{ t('tkeySettings.newThresholdList3') }}</li>
             </ul>
             <div class="text-right">
               <v-btn
@@ -61,38 +52,78 @@
                 :class="$store.state.whiteLabel.isActive ? 'white--text' : 'torusBrand1--text'"
                 :color="$store.state.whiteLabel.isActive ? 'torusBrand1' : ''"
                 type="submit"
-                @click="goToTkeyOnboarding"
+                @click="createThresholdAccount"
               >
-                {{ t('tkeySettings.newCreate') }}
+                {{ t('tkeySettings.newThresholdCreate') }}
               </v-btn>
             </div>
           </div>
         </v-list-item-content>
         <v-list-item-action class="ma-0"></v-list-item-action>
-      </v-list-item> -->
+      </v-list-item>
     </v-list>
 
-    <div class="caption text_3--text mb-4 px-5">{{ t('tkeySettings.note') }}: {{ t('tkeySettings.theSelectedAccount') }}</div>
+    <div v-if="hasThresholdLogged" class="caption text_3--text mb-10 px-1">
+      {{ t('tkeySettings.manageOpenLogin') }}
+      <a class="text-decoration-none" :href="openLoginUrl" target="_blank">app.openlogin.com</a>
+    </div>
+
+    <div class="mb-2 px-1 d-flex align-center select-default-label">
+      <div class="body-2 torusFont1--text">Select default account</div>
+      <HelpTooltip :title="`Default account`" :description="`This is the account you will use on a DApp.`" icon="info" :icon-size="16"></HelpTooltip>
+    </div>
+    <v-menu class="select-default-menu">
+      <template #activator="{ on }">
+        <v-list dense outlined class="pa-0 account-list">
+          <v-list-item class="pl-0 pr-1" :disabled="settingDefaultAccount" v-on="on">
+            <v-list-item-avatar class="ma-0">
+              <v-icon size="16" class="torusGray1--text">{{ `$vuetify.icons.${defaultWallet.icon}` }}</v-icon>
+            </v-list-item-avatar>
+            <v-list-item-content>
+              <v-list-item-title class="font-weight-bold caption">
+                <span class="text_2--text">{{ defaultWallet.title }}</span>
+              </v-list-item-title>
+            </v-list-item-content>
+            <v-list-item-action class="ma-0 pr-2">
+              <v-progress-circular v-if="settingDefaultAccount" size="16" width="2" class="mr-3" indeterminate />
+              <v-icon v-else>$vuetify.icons.select</v-icon>
+            </v-list-item-action>
+          </v-list-item>
+        </v-list>
+      </template>
+      <v-list dense outlined class="pa-0 account-list">
+        <v-list-item v-for="wallet in computedWallets" :key="wallet.key" class="menu-item pl-0 pr-1" @click="setDefaultAccount(wallet.key)">
+          <v-list-item-avatar class="ma-0">
+            <v-icon size="16" class="torusGray1--text">{{ `$vuetify.icons.${wallet.icon}` }}</v-icon>
+          </v-list-item-avatar>
+          <v-list-item-content>
+            <v-list-item-title class="font-weight-bold caption">
+              <span class="text_2--text">{{ wallet.title }}</span>
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-menu>
   </div>
 </template>
 
 <script>
-import { mapActions, mapMutations, mapState } from 'vuex'
+import log from 'loglevel'
+import { mapActions, mapState } from 'vuex'
 
+import config from '../../../config'
 import { ACCOUNT_TYPE } from '../../../utils/enums'
 import { getUserEmail, getUserIcon } from '../../../utils/utils'
+import HelpTooltip from '../../helpers/HelpTooltip'
 
 export default {
   name: 'DefaultAccount',
-  props: {
-    hasThresholdLogged: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  components: { HelpTooltip },
   data() {
     return {
-      loggingWithTKey: false,
+      loggingWithThreshold: false,
+      openLoginUrl: config.openLoginUrl,
+      settingDefaultAccount: false,
     }
   },
   computed: {
@@ -116,26 +147,34 @@ export default {
         return acc
       }, [])
     },
+    defaultWallet() {
+      return this.computedWallets.find((x) => x.isDefault)
+    },
     userEmail() {
       return getUserEmail(this.userInfo, this.loginConfig, this.t('accountMenu.wallet'))
     },
+    hasThreshold() {
+      // TODO: check if has existing openlogin/tkey
+      return true
+    },
+    hasThresholdLogged() {
+      // TODO: check openlogin/tkey is loggedin
+      return true
+    },
     hasSeedPhraseAccount() {
       return Object.keys(this.wallets).some((address) => this.wallets[address].accountType === ACCOUNT_TYPE.TKEY_SEED_PHRASE)
     },
   },
   methods: {
-    ...mapActions(['setDefaultPublicAddress', 'manualAddTKey', 'updateSelectedAddress']),
-    ...mapMutations(['setIsTkeySeedPhraseInputRequired']),
-    goToTkeyOnboarding() {
-      this.$router.push({ name: 'tkeyCreate' }).catch((_) => {})
-    },
-    async loginWithTKey() {
-      this.loggingWithTKey = true
-      await this.manualAddTKey({ calledFromEmbed: false })
-      this.loggingWithTKey = false
+    ...mapActions(['setDefaultPublicAddress', 'updateSelectedAddress']),
+    async createThresholdAccount() {
+      log.info('createThresholdAccount')
+      // TODO: Create openlogin account
     },
-    createSeedPhraseAccount() {
-      this.setIsTkeySeedPhraseInputRequired(true)
+    async loginWithThreshold() {
+      log.info('loginWithThreshold')
+      // TODO: Login with openlogin account
+      this.loggingWithThreshold = true
     },
     accountTitle(accountType, address) {
       if (accountType === ACCOUNT_TYPE.THRESHOLD) return `OpenLogin ${this.t('tkeySettings.account')}`
@@ -150,6 +189,11 @@ export default {
     accountIcon(accountType) {
       return getUserIcon(accountType, this.userInfo.typeOfLogin)
     },
+    async setDefaultAccount(key) {
+      this.settingDefaultAccount = true
+      await this.setDefaultPublicAddress(key)
+      this.settingDefaultAccount = false
+    },
   },
 }
 </script>

src/components/helpers/HelpTooltip/HelpTooltip.scss

@@ -1,6 +1,6 @@
 .v-tooltip__content {
   background: var(--v-torusLight-base);
-  border: 1px solid #F1F2F6;
+  border: 1px solid #f1f2f6;
   box-sizing: border-box;
   box-shadow: 0px 14px 28px rgba(46, 91, 255, 0.06);
   border-radius: 6px;
@@ -15,7 +15,8 @@
     box-shadow: 0px 14px 28px rgba(92, 108, 127, 0.06);
   }
 }
-.v-icon {
+.v-icon.tooltip-icon {
   color: var(--v-text_1-base);
   cursor: pointer;
+  margin-top: -2px;
 }

src/components/helpers/HelpTooltip/HelpTooltip.vue

@@ -23,6 +23,14 @@ export default {
       type: String,
       default: '',
     },
+    icon: {
+      type: String,
+      default: 'question_filled',
+    },
+    iconSize: {
+      type: Number,
+      default: 14,
+    },
   },
 }
 </script>

src/containers/WalletSettings/WalletSettings.vue

@@ -78,7 +78,7 @@
               <div class="grow font-weight-bold title text_1--text">{{ t('tkeySettings.accountManagement') }}</div>
             </v-expansion-panel-header>
             <v-expansion-panel-content>
-              <DefaultAccount :has-threshold-logged="hasThresholdLogged" />
+              <DefaultAccount />
             </v-expansion-panel-content>
           </v-expansion-panel>
           <v-expansion-panel v-show="canShowSetCustomKey" readonly class="my-2">
@@ -138,9 +138,6 @@ export default {
       log.info(normalAccount.metadataNonceHex)
       return !!normalAccount.metadataNonceHex
     },
-    hasThresholdLogged() {
-      return Object.values(this.wallet).some((x) => x.accountType === ACCOUNT_TYPE.THRESHOLD)
-    },
   },
   mounted() {
     this.$vuetify.goTo(0)