Skip to content

Commit

Permalink
Merge pull request #16 from Web3Auth/feat/login-time-mpc
Browse files Browse the repository at this point in the history 
Feat/login time mpc
  • Loading branch information
@chaitanyapotti
chaitanyapotti authored Feb 7, 2024
2 parents da93529 + 50b4775 commit 289a2cc
Show file tree
Hide file tree
Showing 20 changed files with 863 additions and 530 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
/>
<title>Web3Auth Demo</title>
</head>
<body class="bg-gray-100 dark:bg-gray-800">
<body class="bg-app-gray-100 dark:bg-app-gray-800">
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
Expand Down
737 changes: 577 additions & 160 deletions package-lock.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"format": "prettier --write src/"
},
"dependencies": {
"@mertasan/tailwindcss-variables": "^2.7.0",
"@toruslabs/ethereum-controllers": "^5.3.6",
"@toruslabs/vue-components": "^7.2.0",
"@toruslabs/vue-icons": "^7.2.0",
Expand Down
143 changes: 16 additions & 127 deletions src/assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,133 +2,22 @@
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--app-primary-900: #233876;
--app-primary-800: #1e429f;
--app-primary-700: #1a56db;
--app-primary-600: #0346ff;
--app-primary-500: #3f83f8;
--app-primary-400: #76a9fa;
--app-primary-300: #a4cafe;
--app-primary-200: #c3ddfd;
--app-primary-100: #e1effe;
--app-primary-50: #ebf5ff;

--app-gray-900: #111928;
--app-gray-800: #1f2a37;
--app-gray-700: #374151;
--app-gray-600: #4b5563;
--app-gray-500: #6b7280;
--app-gray-400: #9ca3af;
--app-gray-300: #d1d5db;
--app-gray-200: #e5e7eb;
--app-gray-100: #f3f4f6;
--app-gray-50: #f9fafb;

--app-red-900: #771d1d;
--app-red-800: #9b1c1c;
--app-red-700: #c81e1e;
--app-red-600: #e02424;
--app-red-500: #f05252;
--app-red-400: #f98080;
--app-red-300: #f8b4b4;
--app-red-200: #fbd5d5;
--app-red-100: #fde8e8;
--app-red-50: #fdf2f2;

--app-green-900: #014737;
--app-green-800: #03543f;
--app-green-700: #046c4e;
--app-green-600: #057a55;
--app-green-500: #0e9f6e;
--app-green-400: #31c48d;
--app-green-300: #84e1bc;
--app-green-200: #bcf0da;
--app-green-100: #def7ec;
--app-green-50: #f3faf7;

--app-yellow-900: #633112;
--app-yellow-800: #723b13;
--app-yellow-700: #8e4b10;
--app-yellow-600: #9f580a;
--app-yellow-500: #c27803;
--app-yellow-400: #e3a008;
--app-yellow-300: #faca15;
--app-yellow-200: #fce96a;
--app-yellow-100: #fdf6b2;
--app-yellow-50: #fdfdea;

--app-teal-900: #014451;
--app-teal-800: #05505c;
--app-teal-700: #036672;
--app-teal-600: #047481;
--app-teal-500: #0694a2;
--app-teal-400: #16bdca;
--app-teal-300: #7edce2;
--app-teal-200: #afecef;
--app-teal-100: #d5f5f6;
--app-teal-50: #edfafa;

--app-indigo-900: #362f78;
--app-indigo-800: #42389d;
--app-indigo-700: #5145cd;
--app-indigo-600: #5850ec;
--app-indigo-500: #6875f5;
--app-indigo-400: #8da2fb;
--app-indigo-300: #b4c6fc;
--app-indigo-200: #cddbfe;
--app-indigo-100: #e5edff;
--app-indigo-50: #f0f5ff;

--app-purple-950: #454071;
--app-purple-900: #4a1d96;
--app-purple-800: #5521b5;
--app-purple-700: #6c2bd9;
--app-purple-600: #7e3af2;
--app-purple-500: #9061f9;
--app-purple-400: #ac94fa;
--app-purple-300: #cabffd;
--app-purple-200: #dcd7fe;
--app-purple-100: #edebfe;
--app-purple-50: #f6f5ff;

--app-pink-950: #573a56;
--app-pink-900: #751a3d;
--app-pink-800: #99154b;
--app-pink-700: #bf125d;
--app-pink-600: #d61f69;
--app-pink-500: #e74694;
--app-pink-400: #f17eb8;
--app-pink-300: #f8b4d9;
--app-pink-200: #fad1e8;
--app-pink-100: #fce8f3;
--app-pink-50: #fdf2f8;

--app-success: #30cca4;
--app-warning: #fbc94a;
--app-error: #fb4a61;
--app-info: #d4d4d4;
--app-white: #ffffff;
}

*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}

html body {
font-family: Inter, sans-serif;
}
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
min-height: 100vh;
}
html body {
font-family: Inter, sans-serif;
}

html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
}

html {
scroll-behavior: smooth;
}
39 changes: 21 additions & 18 deletions src/components/CardHeading/CardHeading.vue
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,5 @@
<template>
<div class="flex items-center justify-between pb-6 border-b border-b-gray-300">
<h1 class="text-lg sm:text-2xl text-gray-800 font-medium">{{ heading }}</h1>
<div class="hidden md:flex">
<Button
v-if="showBtn"
variant="secondary"
size="sm"
@on-click="emits('onClick')"
class="items-center gap-2 !border-gray-300 text-sm font-medium !text-gray-800"
>
{{ btnLabel }} <Icon name="arrow-right-icon" />
</Button>
</div>
</div>
</template>

<script setup lang="ts">
import { Button, Icon } from '@toruslabs/vue-components'
import { Button, Divider, Icon } from '@toruslabs/vue-components'
withDefaults(
defineProps<{
Expand All @@ -33,4 +16,24 @@ withDefaults(
const emits = defineEmits(['onClick'])
</script>

<template>
<div class="mb-6 sm:mb-10">
<div class="flex items-center justify-between mb-4">
<h1 class="text-lg sm:text-2xl text-app-gray-800 font-medium">{{ heading }}</h1>
<div class="hidden md:flex">
<Button
v-if="showBtn"
variant="secondary"
size="sm"
@on-click="emits('onClick')"
class="items-center gap-2 !border-app-gray-300 text-sm font-medium !text-app-gray-800"
>
{{ btnLabel }} <Icon name="arrow-right-icon" />
</Button>
</div>
</div>
<Divider class="mx-0" />
</div>
</template>

<style scoped></style>
79 changes: 35 additions & 44 deletions src/components/LoginDetails/LoginDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,22 +66,10 @@ const returnAvatarLetter = (name: string) => {
btn-label="See how we scale for you"
:show-btn="false"
/>
<div class="w-full min-[800px]:w-[80%] mx-auto mt-8 flex flex-col items-center justify-center">
<!-- <Button
variant="secondary"
size="sm"
class="items-center gap-2 !border-gray-300 text-sm font-medium !text-gray-800 flex min-[800px]:!hidden mt-4"
block
>
See how we scale for you <Icon name="arrow-right-icon" />
</Button> -->
<Card class="mt-4 min-[800px]:mt-10 w-full p-4 sm:p-6 !rounded-2xl">
<div class="max-w-xl mx-auto">
<div class="px-4 py-6 border border-app-gray-300 rounded-2xl">
<div class="flex items-center w-full gap-3 sm:gap-5 mb-4 sm:mb-6">
<Avatar
size="xl"
:rounded="false"
class="text-2xl w-[80px] h-[60px] sm:min-w-[80px] sm:min-h-[80px]"
>
<Avatar size="xl" :rounded="false" class="text-2xl flex-shrink-0 w-[80px] h-[80px]">
<img
v-if="userInfo?.profileImage"
:src="userInfo?.profileImage"
Expand All @@ -92,12 +80,16 @@ const returnAvatarLetter = (name: string) => {
</span>
</Avatar>
<div class="flex flex-col w-full justify-between">
<h1 class="text-base sm:text-2xl text-gray-600 font-bold mb-2">
<h1 class="text-2xl text-app-gray-600 font-bold mb-2">
{{ userInfo?.name || '' }}
</h1>
<div class="flex flex-row items-center w-full gap-2">
<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"
<Button
size="sm"
class="gap-2 w-full md:w-fit"
:pill="true"
variant="tertiary"
@on-click="handleCopyAddress"
>
{{ getTruncateString(account || '') }}
<div class="relative">
Expand All @@ -107,70 +99,69 @@ const returnAvatarLetter = (name: string) => {
>
Copied
<div
class="absolute border-8 border-b-0 border-r-transparent border-t-white border-l-transparent top-[100%] left-[calc(50%_-_8px)]"
class="absolute border-8 border-b-0 border-r-transparent border-t-app-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"
:class="['cursor-pointer', isCopied ? 'text-app-success' : 'text-app-gray-400']"
/>
</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"
</Button>
<div
class="hidden sm:flex items-center gap-2 flex-1 px-3 py-2 bg-app-gray-200 text-app-gray-500 text-xs font-medium rounded-2xl"
>
<Icon
v-if="userInfo?.typeOfLogin === 'jwt'"
name="mail-icon"
class="text-gray-400"
class="text-app-gray-400"
/>
<Icon v-else :name="`${userInfo?.typeOfLogin}-icon`" class="text-gray-400" />
<Icon v-else :name="`${userInfo?.typeOfLogin}-icon`" class="text-app-gray-400" />
{{ userInfo?.email ? userInfo?.email : userInfo?.name }}
</p>
</div>
</div>
</div>
</div>
<p
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"
<div
class="flex mb-4 sm:hidden items-center gap-2 flex-1 px-3 py-2 bg-app-gray-200 text-app-gray-500 text-xs font-medium rounded-2xl"
>
<Icon v-if="userInfo?.typeOfLogin === 'jwt'" name="mail-icon" class="text-gray-400" />
<Icon else :name="`${userInfo?.typeOfLogin}-icon`" class="text-gray-400" />
<Icon v-if="userInfo?.typeOfLogin === 'jwt'" name="mail-icon" class="text-app-gray-400" />
<Icon v-else :name="`${userInfo?.typeOfLogin}-icon`" class="text-app-gray-400" />
{{ userInfo?.email ? userInfo?.email : userInfo?.name }}
</p>
</div>
<Button
variant="secondary"
size="xs"
class="flex items-center gap-2 !border-gray-300 !text-xs font-medium !text-gray-800"
class="flex items-center gap-2 !border-app-gray-300 !text-xs font-medium !text-app-gray-800"
block
@on-click="handleConsoleBtn"
>
View User Info in Console <Icon name="arrow-right-icon" />
</Button>
</Card>
</div>
<div
class="rounded-xl border border-gray-200 py-4 px-6 flex flex-col sm:flex-row items-start sm:items-center w-full mt-7"
class="rounded-xl border border-app-gray-200 py-4 px-6 flex flex-col sm:flex-row items-start sm:items-center w-full mt-4"
>
<div
class="flex items-center gap-5 flex-1 max-sm:pb-6 max-sm:border-b sm:border-r border-gray-200"
class="flex items-center gap-5 flex-1 w-full max-sm:pb-6 max-sm:border-b sm:border-r border-app-gray-200"
>
<div class="w-14 h-14 rounded-full bg-gray-100 flex items-center justify-center">
<div class="w-14 h-14 rounded-full bg-app-gray-100 flex items-center justify-center">
<img src="@/assets/images/desktop-computer.svg" class="h-6 w-6" />
</div>
<div class="flex flex-col items-start gap-2">
<p class="text-lg text-gray-400 font-normal">Device</p>
<p class="text-sm sm:text-sm text-gray-600 font-medium">
<p class="text-lg text-app-gray-400 font-normal">Device</p>
<p class="text-sm sm:text-sm text-app-gray-600 font-medium">
{{ browserName }} on {{ osName }}
</p>
</div>
</div>
<div class="flex items-center gap-5 flex-1 max-sm:pt-6 sm:pl-6">
<div class="w-14 h-14 rounded-full bg-gray-100 flex items-center justify-center">
<div class="w-14 h-14 rounded-full bg-app-gray-100 flex items-center justify-center">
<img src="@/assets/images/globe.svg" class="h-6 w-6" />
</div>
<div class="flex flex-col items-start gap-2">
<p class="text-lg text-gray-400 font-normal">Location</p>
<p class="text-sm sm:text-sm text-gray-600 font-medium">{{ countryName }}</p>
<p class="text-lg text-app-gray-400 font-normal">Location</p>
<p class="text-sm sm:text-sm text-app-gray-600 font-medium">{{ countryName }}</p>
</div>
</div>
</div>
Expand All @@ -193,9 +184,9 @@ const returnAvatarLetter = (name: string) => {
>
<template #sidebar>
<div class="p-5 flex flex-col flex-1 h-full">
<h3 class="text-center text-base text-gray-600">User Info Console</h3>
<h3 class="text-center text-base text-app-gray-600">User Info Console</h3>
<div
class="rounded-2xl p-4 bg-gray-100 flex flex-col flex-1 my-6 h-full w-full overflow-x-auto"
class="rounded-2xl p-4 bg-app-gray-100 flex flex-col flex-1 my-6 h-full w-full overflow-x-auto"
>
<pre class="text-sm break-words leading-relaxed">{{ userInfo }}</pre>
</div>
Expand Down
Loading

0 comments on commit 289a2cc

Please sign in to comment.