Merge pull request #9 from Web3Auth/develop

Develop
Web3Auth · Dec 5, 2023 · 507bbfa · 507bbfa
2 parents 0fcef27 + 0ed0ccb
commit 507bbfa
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 35 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -151,10 +151,11 @@ onMounted(async () => {
         return
       }
 
-      // if (wsEmbed?.communicationProvider.isLoggedIn) {
-      //   login()
-      // }
+      if (wsEmbed?.communicationProvider.isLoggedIn) {
+        login()
+      }
     })
+
     ethersProvider = new BrowserProvider(wsEmbed.provider, 'any')
     web3 = new Web3()
     web3.setProvider(wsEmbed.provider)
@@ -174,15 +175,16 @@ const getCurrentChain = async () => {
   switchChainTo.value = chainId.value !== '0x5' ? '0x5' : '0x1'
 }
 
-const login = async (loginObj: SocialLoginObj) => {
+const login = async (loginObj?: SocialLoginObj) => {
   try {
     // Note: can pass loginProvider and login_hint as params if you want to preselect a provider and login identifier eg. email
     // const loginaccs = await torus?.login({ loginProvider: "google", login_hint: "[email protected]" });
     // Passing empty will trigger showing the login modal showing all login provider options
     isLoading.value = true
-    const obj = { loginProvider: loginObj.icon as any, login_hint: emailLoginHint.value }
+    const obj = { loginProvider: loginObj?.icon as any, login_hint: emailLoginHint.value }
     const loginaccs = await wsEmbed?.login(obj)
     account.value = (loginaccs || [])[0] || ''
+    localStorage.setItem('accountLocal', account.value)
     userInfo.value = (await wsEmbed?.getUserInfo()) as UserInfo & { typeOfLogin: string }
     isLoading.value = false
     getCurrentChain()

diff --git a/src/components/LoginDetails/LoginDetails.vue b/src/components/LoginDetails/LoginDetails.vue
@@ -75,16 +75,27 @@
               {{ userInfo?.name || '' }}
             </h1>
             <div class="flex flex-row items-center w-full gap-2">
-              <p
+              <div
                 class="flex items-center justify-between w-full border px-3 py-2 border-gray-200 bg-gray-100 text-xs text-gray-500 font-medium rounded-2xl"
               >
                 {{ getTruncateString(account || '') }}
-                <Icon
-                  :name="isCopied ? 'check-circle-solid-icon' : 'document-duplicate-icon'"
-                  :class="['cursor-pointer', isCopied ? 'text-green-600' : 'text-gray-400']"
-                  @click="handleCopyAddress"
-                />
-              </p>
+                <div class="relative">
+                  <div
+                    v-if="isCopied"
+                    class="absolute bottom-[150%] left-1/2 -translate-x-1/2 bg-app-white py-2 px-4 rounded-lg text-black text-sm text-center w-max shadow-md"
+                  >
+                    Copied
+                    <div
+                      class="absolute border-8 border-b-0 border-r-transparent border-t-white border-l-transparent top-[100%] left-[calc(50%_-_8px)]"
+                    ></div>
+                  </div>
+                  <Icon
+                    :name="isCopied ? 'check-circle-solid-icon' : 'document-duplicate-icon'"
+                    :class="['cursor-pointer', isCopied ? 'text-green-600' : 'text-gray-400']"
+                    @click="handleCopyAddress"
+                  />
+                </div>
+              </div>
               <p
                 class="hidden sm:flex items-center gap-2 flex-1 border px-3 py-2 border-gray-200 bg-gray-100 text-xs text-gray-500 font-medium rounded-2xl"
               >
@@ -93,7 +104,7 @@
                   name="mail-icon"
                   class="text-gray-400"
                 />
-                <Icon :name="`${userInfo?.typeOfLogin}-icon`" class="text-gray-400" />
+                <Icon v-else :name="`${userInfo?.typeOfLogin}-icon`" class="text-gray-400" />
                 {{ userInfo?.email ? userInfo?.email : userInfo?.name }}
               </p>
             </div>
@@ -103,7 +114,7 @@
           class="flex sm:hidden mb-4 items-center gap-2 flex-1 border px-3 py-2 border-gray-200 bg-gray-100 text-xs text-gray-500 font-medium rounded-2xl"
         >
           <Icon v-if="userInfo?.typeOfLogin === 'jwt'" name="mail-icon" class="text-gray-400" />
-          <Icon :name="`${userInfo?.typeOfLogin}-icon`" class="text-gray-400" />
+          <Icon else :name="`${userInfo?.typeOfLogin}-icon`" class="text-gray-400" />
           {{ userInfo?.email ? userInfo?.email : userInfo?.name }}
         </p>
         <Button
@@ -127,7 +138,7 @@
           </div>
           <div class="flex flex-col items-start gap-2">
             <p class="text-lg text-gray-400 font-normal">Device</p>
-            <p class="text-base sm:text-lg text-gray-600 font-medium">
+            <p class="text-sm sm:text-sm text-gray-600 font-medium">
               {{ browserName }} on {{ osName }}
             </p>
           </div>
@@ -138,7 +149,7 @@
           </div>
           <div class="flex flex-col items-start gap-2">
             <p class="text-lg text-gray-400 font-normal">Location</p>
-            <p class="text-base sm:text-lg text-gray-600 font-medium">{{ countryName }}</p>
+            <p class="text-sm sm:text-sm text-gray-600 font-medium">{{ countryName }}</p>
           </div>
         </div>
       </div>

diff --git a/src/components/OpenloginDetails/OpenloginDetails.vue b/src/components/OpenloginDetails/OpenloginDetails.vue
@@ -48,6 +48,7 @@
         size="sm"
         class="items-center gap-2 !border-gray-300 text-sm font-medium !text-gray-800 flex md:!hidden mt-6"
         block
+        @on-click="handleHeadingBtnClick"
       >
         Learn how progressive MFA works <Icon name="arrow-right-icon" />
       </Button>
@@ -68,13 +69,13 @@
           >
             Paired with your social login
           </h4>
-          <p
-            class="border border-gray-50 bg-gray-100 text-gray-500 text-xs xl:text-sm font-normal rounded-xl flex items-center gap-2 py-2 px-4 mt-8"
+          <div
+            class="border border-gray-50 bg-gray-100 text-gray-500 text-xs xl:text-sm font-normal rounded-xl flex items-center gap-2 py-2 px-4 mt-8 w-full"
           >
             <Icon v-if="userInfo?.typeOfLogin === 'jwt'" name="mail-icon" class="text-gray-400" />
-            <Icon :name="`${userInfo?.typeOfLogin}-icon`" class="text-gray-400" />
-            {{ userInfo?.email || userInfo?.name }}
-          </p>
+            <Icon v-else :name="`${userInfo?.typeOfLogin}-icon`" class="text-gray-400" />
+            <p class="w-full truncate">{{ userInfo?.email || userInfo?.name }}</p>
+          </div>
         </Card>
         <Card class="flex flex-col flex-1 p-6 !rounded-2xl items-center w-full md:w-[227px]">
           <img src="@/assets/images/op-2.svg" class="h-16 w-16" />
@@ -83,11 +84,12 @@
           >
             Saved in your device storage
           </h4>
-          <p
-            class="border border-gray-50 bg-gray-100 text-gray-500 text-xs xl:text-sm font-normal rounded-xl flex items-center gap-2 py-2 px-4 mt-8 text-center"
+          <div
+            class="border border-gray-50 bg-gray-100 text-gray-500 text-xs xl:text-sm font-normal rounded-xl flex items-center gap-2 py-2 px-4 mt-8 w-full"
           >
-            {{ browserName }} {{ browserVersion }}
-          </p>
+            <Icon name="globe-alt-solid-icon" />
+            <p class="w-full truncate">{{ browserName }} {{ browserVersion }}</p>
+          </div>
         </Card>
         <Card class="flex flex-col flex-1 p-6 !rounded-2xl items-center w-full md:w-[227px]">
           <img src="@/assets/images/op-3.svg" class="h-16 w-16" />
@@ -96,12 +98,12 @@
           >
             Saved as a social recovery factor
           </h4>
-          <p
-            class="border border-gray-50 bg-gray-100 text-gray-500 text-xs xl:text-sm font-normal rounded-xl flex items-center gap-2 py-2 px-4 mt-8"
+          <div
+            class="border border-gray-50 bg-gray-100 text-gray-500 text-xs xl:text-sm font-normal rounded-xl flex items-center gap-2 py-2 px-4 mt-8 w-full"
           >
             <Icon name="key-solid-icon" />
-            {{ userInfo?.email || userInfo?.name }}
-          </p>
+            <p class="w-full truncate">{{ userInfo?.email || userInfo?.name }}</p>
+          </div>
         </Card>
       </div>
     </div>

diff --git a/src/components/TopupDetails/TopupDetails.vue b/src/components/TopupDetails/TopupDetails.vue
@@ -42,15 +42,14 @@
             wallet onboarding, second step checkout!
           </p>
         </Card>
-
-        <Button
+        <!-- <Button
           variant="secondary"
           size="sm"
           class="items-center gap-2 !border-gray-300 text-sm font-medium !text-gray-800 flex md:!hidden"
           block
         >
           How onramps works <Icon name="arrow-right-icon" />
-        </Button>
+        </Button> -->
       </div>
 
       <div

diff --git a/src/components/WalletConnectDetails/WalletConnectDetails.vue b/src/components/WalletConnectDetails/WalletConnectDetails.vue
@@ -44,6 +44,7 @@
           size="sm"
           class="items-center gap-2 !border-gray-300 text-sm font-medium !text-gray-800 flex md:!hidden"
           block
+          @on-click="handleHeadingBtnClick"
         >
           How interoperability works <Icon name="arrow-right-icon" />
         </Button>

diff --git a/src/components/WalletServiceDetails/WalletServiceDetails.vue b/src/components/WalletServiceDetails/WalletServiceDetails.vue
@@ -16,14 +16,14 @@
         <li>Basic whitelabel-able transaction screens</li>
         <li>Customizable to your brand</li>
       </ul>
-      <Button
+      <!-- <Button
         variant="secondary"
         size="sm"
         class="items-center gap-2 !border-gray-300 text-sm font-medium !text-gray-800 flex md:!hidden mt-6"
         block
       >
         How customization works <Icon name="arrow-right-icon" />
-      </Button>
+      </Button> -->
     </div>
     <div
       class="flex flex-col sm:flex-row sm:items-center justify-between gap-8 w-full text-pt-height"

diff --git a/src/icons/index.ts b/src/icons/index.ts
@@ -33,6 +33,7 @@ import {
 } from '@toruslabs/vue-icons/notifications'
 import { ShieldExclamationSolidIcon, KeySolidIcon } from '@toruslabs/vue-icons/security'
 import { MenuAltTwoSolidIcon } from '@toruslabs/vue-icons/menu'
+import { GlobeAltSolidIcon } from '@toruslabs/vue-icons/maps'
 
 export default {
   ChevronDownSolidIcon,
@@ -66,5 +67,6 @@ export default {
   MenuAltTwoSolidIcon,
   ChevronLeftSolidIcon,
   CheckCircleSolidIcon,
-  KeySolidIcon
+  KeySolidIcon,
+  GlobeAltSolidIcon
 } as unknown as IconSets