Add local chain icons to welcome page with overlapping stack
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@@ -1,7 +1,13 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { evmWallet as wallet } from '$lib/states/evm-wallet.svelte.js'
|
import { evmWallet as wallet } from '$lib/states/evm-wallet.svelte.js'
|
||||||
import { Button } from '$lib/components/ui/button/index.js'
|
import { Button } from '$lib/components/ui/button/index.js'
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card/index.js'
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from '$lib/components/ui/card/index.js'
|
||||||
import { navigate } from 'sv-router/generated'
|
import { navigate } from 'sv-router/generated'
|
||||||
|
|
||||||
const w = wallet
|
const w = wallet
|
||||||
@@ -17,7 +23,9 @@
|
|||||||
|
|
||||||
<div class="mx-auto mt-24 max-w-sm">
|
<div class="mx-auto mt-24 max-w-sm">
|
||||||
{#if !w.ready}
|
{#if !w.ready}
|
||||||
<p class="text-center text-muted-foreground text-sm">Loading...</p>
|
<p class="text-center text-muted-foreground text-sm">
|
||||||
|
Loading...
|
||||||
|
</p>
|
||||||
{:else if w.accountType}
|
{:else if w.accountType}
|
||||||
{#if w.accountType === 'multi'}
|
{#if w.accountType === 'multi'}
|
||||||
{navigate('/multicoin')}
|
{navigate('/multicoin')}
|
||||||
@@ -28,20 +36,44 @@
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader class="text-center">
|
<CardHeader class="text-center">
|
||||||
<CardTitle>Welcome</CardTitle>
|
<CardTitle>Welcome</CardTitle>
|
||||||
<CardDescription>Choose an account type to get started</CardDescription>
|
<CardDescription>
|
||||||
|
Choose an account type to get started
|
||||||
|
</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div class="flex flex-col gap-3">
|
<div class="flex flex-col gap-3">
|
||||||
<Button
|
<Button
|
||||||
onclick={async () => { await w.login('multi'); navigate('/multicoin') }}
|
onclick={async () => {
|
||||||
|
await w.login('multi')
|
||||||
|
navigate('/multicoin')
|
||||||
|
}}
|
||||||
class="w-full">
|
class="w-full">
|
||||||
EVM (ETH / BSC / Polygon)
|
<span class="-ml-1 mr-2 flex items-center">
|
||||||
|
<img
|
||||||
|
src="/icons/ethereum.png"
|
||||||
|
alt=""
|
||||||
|
class="relative z-30 size-5 rounded-full ring-2 ring-accent" />
|
||||||
|
<img
|
||||||
|
src="/icons/binance.png"
|
||||||
|
alt=""
|
||||||
|
class="-ml-1.5 relative z-20 size-5 rounded-full ring-2 ring-accent" />
|
||||||
|
<img
|
||||||
|
src="/icons/polygon.png"
|
||||||
|
alt=""
|
||||||
|
class="-ml-1.5 relative z-10 size-5 rounded-full ring-2 ring-accent" />
|
||||||
|
</span>
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
onclick={async () => { await w.login('monero'); navigate('/monero') }}
|
onclick={async () => {
|
||||||
|
await w.login('monero')
|
||||||
|
navigate('/monero')
|
||||||
|
}}
|
||||||
variant="outline"
|
variant="outline"
|
||||||
class="w-full">
|
class="w-full">
|
||||||
Monero
|
<img
|
||||||
|
src="/icons/monero.png"
|
||||||
|
alt=""
|
||||||
|
class="-ml-1 mr-1.5 inline-block size-5 rounded-full align-middle" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
|||||||
Reference in New Issue
Block a user