Skip to content

Commit

Permalink
chore: Update import wallet UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@AricRedemption
AricRedemption committed Mar 14, 2024
1 parent 8f6cbca commit 41c9fd2
Show file tree
Hide file tree
Showing 9 changed files with 264 additions and 109 deletions.
1 change: 1 addition & 0 deletions src/assets/icons-v3/more-crytos.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 2 additions & 3 deletions src/pages/wallet/SendSuccess.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<script setup lang="ts">
import { ref } from 'vue'
import { getLogo } from '@/data/logos'
import { type Chain } from '@/lib/account'
import { useRouter, useRoute } from 'vue-router'
import { FlexBox, Divider, Button } from '@/components'
import SuccessPNG from '@/assets/icons-v3/send-success.png'
import { getLogo } from '@/data/logos'
import { type Chain } from '@/lib/account'
const route = useRoute()
const router = useRouter()
Expand Down
7 changes: 7 additions & 0 deletions src/pages/welcome/Create.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<script lang="ts" setup>
import { FlexBox } from '@/components'
</script>

<template>
<FlexBox ai="center" jc="center" class="w-screen h-screen"> Create Wallet </FlexBox>
</template>
9 changes: 1 addition & 8 deletions src/pages/welcome/Home.vue
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,20 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getAccounts } from '@/lib/account'
import { FlexBox, Button } from '@/components'
import { Checkbox } from '@/components/ui/checkbox'
import WelcomeLogo from '@/assets/icons-v3/welcome-logo.svg'
const router = useRouter()
const checked = ref(false)
const createWallet = () => {
router.push('/wallet/create')
}
const accountsCount = ref(0)
getAccounts().then((accounts) => {
accountsCount.value = accounts.size
})
</script>

<template>
<FlexBox ai="center" jc="center" :gap="12">
<FlexBox ai="center" jc="center" :gap="12" class="w-full h-full">
<FlexBox d="col" class="gap-y-15">
<FlexBox d="col" :gap="3">
<div class="text-2xl font-semibold">Metalet —— <br />The portal to exploring the Web3 blockchain world.</div>
Expand Down
240 changes: 144 additions & 96 deletions src/pages/welcome/Import.vue
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { addAccount } from '@/lib/account'
import passwordManager from '@/lib/password'
import { FlexBox, Button } from '@/components'
import { ref, computed, Ref, watch } from 'vue'
import MoreIcon from '@/assets/icons-v3/more-crytos.svg'
import BtcLogoIcon from '@/assets/images/btc-logo.svg?url'
import SpaceLogoIcon from '@/assets/icons-v3/space.svg?url'
import SuccessPNG from '@/assets/icons-v3/send-success.png'
import ArrowLeftIcon from '@/assets/icons-v3/arrow-left.svg'
import CreatePassword from './components/CreatePassword.vue'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { deriveAllAddresses, scripts, type AddressType } from '@/lib/bip32-deriver'
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
const step = ref(1)
const stepLen = ref(3)
const successed = ref(true)
const hasPassword = ref(false)
// Remove the last one
const selectableScripts = scripts.slice(0, -1)
const selectedScript = ref(selectableScripts[0])
const router = useRouter()
// 12/24个单词
const wordsLengths = [12, 24]
const selectedWordsLength = ref('12')
const wordsLengths = [12, 15, 18, 21, 24]
watch(
() => selectedWordsLength.value,
() => {
Expand All @@ -33,6 +36,13 @@ const clearWords = () => {
words.value = Array(selectedWordsLength.value).fill('')
}
passwordManager.has().then((_hasPassword) => {
if (_hasPassword) {
hasPassword.value = true
stepLen.value = 2
}
})
const onPasteWords = (e: ClipboardEvent) => {
error.value = ''
const text = e.clipboardData?.getData('text')
Expand Down Expand Up @@ -90,10 +100,10 @@ const onSubmit = async () => {
await addAccount(account)
// 查询有否设置密码
const hasPassword = await passwordManager.has()
const following = hasPassword ? '/wallet' : '/wallet/set-password'
router.push(following)
if (hasPassword.value) {
successed.value = true
}
step.value += step.value
} catch (e) {
console.log(e)
error.value = 'Failed to import your wallet'
Expand All @@ -102,97 +112,135 @@ const onSubmit = async () => {
</script>

<template>
<FlexBox class="fixed top-6 left-1/2 -translate-x-1/2" :gap="2">
<FlexBox ai="center" jc="center" :class="['step-circle', step === 1 ? 'active' : undefined]">1</FlexBox>
<FlexBox ai="center" jc="center" :class="['step-circle', step === 2 ? 'active' : undefined]">2</FlexBox>
</FlexBox>
<FlexBox d="col" class="w-82">
<FlexBox ai="center" :gap="3">
<ArrowLeftIcon @click="$router.go(-1)" class="cursor-pointer" />
<div class="text-2xl font-medium">Import Wallet</div>
<FlexBox d="col" class="w-full gap-20">
<FlexBox ai="center" jc="center" class="w-full h-[70px]" :gap="2">
<FlexBox
ai="center"
jc="center"
:class="['step-circle', step === _step ? 'active' : undefined]"
v-for="_step in Array.from({ length: stepLen }, (_, i) => i + 1)"
>{{ _step }}</FlexBox
>
</FlexBox>
<Tabs default-value="phrase" class="w-full mt-6">
<TabsList class="grid grid-cols-2 bg-gray-secondary rounded-lg text-gray-primary">
<TabsTrigger value="phrase" class="text-xs">Import from Phrase</TabsTrigger>
<TabsTrigger value="privateKey" class="text-xs">Import from PrivateKey</TabsTrigger>
</TabsList>
<TabsContent value="phrase">
<FlexBox d="col" :gap="4">
<FlexBox d="col">
<FlexBox ai="center" :gap="2">
<div class="text-gray-primary text-ss">BTC:</div>
<Select defaultValue="86">
<SelectTrigger>
<SelectValue placeholder="Select a path" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="84"> Native Segwit (m/84'/0'/0') </SelectItem>
<SelectItem value="49"> Nested Segwit (m/49'/0'/0') </SelectItem>
<SelectItem value="86"> Taproot (m/86'/0'/0') </SelectItem>
<SelectItem value="44"> Legacy (m/44'/0'/0') </SelectItem>
<SelectItem value="10001"> Same as Mvc (m/44'/10001'/0') </SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</FlexBox>
<FlexBox ai="center" :gap="2">
<div class="text-gray-primary text-ss">MVC:</div>
<div class="text-sm tracking-wide">
<span class="">m/44'/</span>
<input type="text" class="pit-input mx-2 w-16" v-model="mvcPath" />
<span class="">'/0'</span>
</div>
</FlexBox>
<FlexBox ai="center" :gap="1">
<span>My seed phrase has</span>
<Select v-model:modelValue="selectedWordsLength">
<SelectTrigger class="w-24 text-base">
<SelectValue placeholder="Select a number of words" />
</SelectTrigger>
<SelectContent align="end">
<SelectGroup>
<SelectItem :value="length.toString()" v-for="length of wordsLengths">
{{ length }} words
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</FlexBox>
</FlexBox>
<FlexBox jc="center" class="w-full">
<FlexBox d="col" class="w-82" v-if="step === 1">
<FlexBox ai="center" :gap="3">
<ArrowLeftIcon @click="$router.go(-1)" class="cursor-pointer" />
<div class="text-2xl font-medium">Import Wallet</div>
</FlexBox>
<Tabs default-value="phrase" class="w-full mt-6">
<TabsList class="grid grid-cols-2 bg-gray-secondary rounded-lg text-gray-primary">
<TabsTrigger value="phrase" class="text-xs">Import from Phrase</TabsTrigger>
<TabsTrigger value="privateKey" class="text-xs">Import from PrivateKey</TabsTrigger>
</TabsList>
<TabsContent value="phrase">
<FlexBox d="col" :gap="4">
<FlexBox d="col">
<FlexBox ai="center" :gap="2">
<div class="text-gray-primary text-ss">BTC:</div>
<Select defaultValue="86">
<SelectTrigger>
<SelectValue placeholder="Select a path" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="84"> Native Segwit (m/84'/0'/0') </SelectItem>
<SelectItem value="49"> Nested Segwit (m/49'/0'/0') </SelectItem>
<SelectItem value="86"> Taproot (m/86'/0'/0') </SelectItem>
<SelectItem value="44"> Legacy (m/44'/0'/0') </SelectItem>
<SelectItem value="10001"> Same as Mvc (m/44'/10001'/0') </SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</FlexBox>
<FlexBox ai="center" :gap="2">
<div class="text-gray-primary text-ss">MVC:</div>
<div class="text-sm tracking-wide">
<span class="">m/44'/</span>
<input type="text" class="pit-input mx-2 w-16" v-model="mvcPath" />
<span class="">'/0'</span>
</div>
</FlexBox>
<FlexBox ai="center" :gap="1">
<span>My seed phrase has</span>
<Select v-model:modelValue="selectedWordsLength">
<SelectTrigger class="w-24 text-base">
<SelectValue placeholder="Select a number of words" />
</SelectTrigger>
<SelectContent align="end">
<SelectGroup>
<SelectItem :value="length.toString()" v-for="length of wordsLengths">
{{ length }} words
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</FlexBox>
</FlexBox>

<!-- input phrase -->
<div class="grid grid-cols-2 gap-2 pr-3 -mr-3 overflow-y-auto max-h-[304px]">
<FlexBox class="h-11 border-gray-soft border rounded-lg" v-for="(_, index) in words" ai="center">
<FlexBox ai="center" jc="center" class="w-7.5 h-full text-gray-primary bg-gray-secondary rounded-l-lg">{{
index + 1
}}</FlexBox>
<input
:key="index"
type="text"
v-model="words[index]"
@paste.prevent="onPasteWords"
class="h-full font-medium focus:outline-none w-full p-3 rounded-lg"
/>
</FlexBox>
</div>
<!-- input phrase -->
<div class="grid grid-cols-2 gap-2 pr-3 -mr-3 overflow-y-auto max-h-[304px]">
<FlexBox class="h-11 border-gray-soft border rounded-lg" v-for="(_, index) in words" ai="center">
<FlexBox
ai="center"
jc="center"
class="w-7.5 h-full text-gray-primary bg-gray-secondary rounded-l-lg"
>{{ index + 1 }}</FlexBox
>
<input
:key="index"
type="text"
v-model="words[index]"
@paste.prevent="onPasteWords"
class="h-full font-medium focus:outline-none w-full p-3 rounded-lg"
/>
</FlexBox>
</div>

<Button type="primary" class="w-61.5 mt-15 mx-auto" @click="onSubmit">Confirm</Button>
<Button type="primary" class="w-61.5 mt-15 mx-auto" @click="onSubmit">Next</Button>

<!-- error -->
<div class="mt-4 text-center text-sm text-red-500" v-if="error">{{ error }}</div>
</FlexBox>
</TabsContent>
<TabsContent value="privateKey">
<textarea
placeholder="Enter your private key here"
class="w-full h-45 focus:outline-none border border-gray-soft rounded-lg px-4 py-3.5"
<!-- error -->
<div class="mt-4 text-center text-sm text-red-500" v-if="error">{{ error }}</div>
</FlexBox>
</TabsContent>
<TabsContent value="privateKey">
<div class="h-[450px]">
<textarea
placeholder="Enter your private key here"
class="w-full h-45 focus:outline-none border border-gray-soft rounded-lg px-4 py-3.5"
/>
</div>
<Button type="primary" class="w-61.5 mt-15 mx-auto cursor-not-allowed opacity-50" @click="onSubmit" disabled
>Coming soon...</Button
>
</TabsContent>
</Tabs>
</FlexBox>
<FlexBox d="col" class="w-82" v-else-if="!hasPassword">
<CreatePassword
:callback="
() => {
step = step + 1
hasPassword = true
successed = true
}
"
/>
<Button type="primary" class="w-61.5 mt-15 mx-auto cursor-not-allowed opacity-50" @click="onSubmit" disabled
>Coming soon...</Button
>
</TabsContent>
</Tabs>
</FlexBox>
<FlexBox d="col" class="w-82" v-else-if="successed">
<FlexBox d="col" ai="center">
<img :src="SuccessPNG" alt="Send Success" class="w-30" />
<h1 class="text-2xl mt-6 font-medium">Wallet created successfully</h1>
<p class="text-sm mt-12 text-gray-primary">Metalet currently supports the following cryptos</p>
<FlexBox ai="center" :gap="4" class="mt-4">
<img :src="BtcLogoIcon" class="w-11" alt="Bitcoin" />
<img :src="SpaceLogoIcon" class="w-11" alt="Space" />
<MoreIcon />
</FlexBox>
<Button type="primary" class="mt-26 w-61.5" @click="() => $router.push('/wallet')">Activate Metalet</Button>
</FlexBox>
</FlexBox>
</FlexBox>
</FlexBox>
</template>

Expand Down
2 changes: 1 addition & 1 deletion src/pages/welcome/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FlexBox } from '@/components'
</script>

<template>
<FlexBox ai="center" jc="center" class="w-screen h-screen">
<FlexBox class="w-screen h-screen">
<RouterView />
</FlexBox>
</template>
Loading

0 comments on commit 41c9fd2

Please sign in to comment.