feat: remove wallet (reset)
This commit is contained in:
parent
f29ce7afb0
commit
7519e43085
|
@ -33,9 +33,7 @@ const Balance: FC<Props> = ({ className }) => {
|
|||
showCurrencyDash !== ShowCurrencyPreference.None && account !== undefined
|
||||
|
||||
const showFiatBalance =
|
||||
showCurrencyDash === ShowCurrencyPreference.Both &&
|
||||
xnoPrice !== undefined &&
|
||||
account !== undefined
|
||||
showCurrencyDash === ShowCurrencyPreference.Both && account !== undefined
|
||||
|
||||
const xnoBalance = tools.convert(account?.balance ?? '0', 'RAW', 'NANO')
|
||||
const xnoBalanceDisplay = rawToNanoDisplay(account?.balance ?? '0')
|
||||
|
@ -74,8 +72,13 @@ const Balance: FC<Props> = ({ className }) => {
|
|||
</span>
|
||||
</h1>
|
||||
{showFiatBalance && (
|
||||
<h2 className="text:lg xs:text-xl transition-colors">
|
||||
$ {(Number(xnoBalance) * xnoPrice).toFixed(2)}
|
||||
<h2 className="text:lg xs:text-xl flex items-center gap-2 transition-colors">
|
||||
${' '}
|
||||
{xnoPrice !== undefined ? (
|
||||
(Number(xnoBalance) * xnoPrice).toFixed(2)
|
||||
) : (
|
||||
<span className="bg-gray-100 dark:bg-gray-800 flex shadow rounded motion-safe:animate-pulse h-6 w-10" />
|
||||
)}
|
||||
</h2>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
@ -90,7 +90,9 @@ const BottomMenu: FC<Props> = ({ className }) => {
|
|||
className={clsx({
|
||||
'!bg-purple-50 !text-purple-400': confirmCopyAddress,
|
||||
})}
|
||||
onClick={onCopyAddress}
|
||||
onClick={
|
||||
!(isWelcoming || confirmCopyAddress) ? onCopyAddress : undefined
|
||||
}
|
||||
>
|
||||
{confirmCopyAddress ? (
|
||||
<CheckIcon className="w-8" />
|
||||
|
@ -123,7 +125,7 @@ const BottomMenu: FC<Props> = ({ className }) => {
|
|||
|
||||
<ButtonLink
|
||||
variant="primary"
|
||||
href="/send/qrOrAddress"
|
||||
href="/send/to"
|
||||
aria-label="send ӾNO"
|
||||
disabled={isWelcoming}
|
||||
className={clsx(
|
||||
|
|
|
@ -20,11 +20,11 @@ const Button: FC<Props> = ({
|
|||
{...props}
|
||||
className={clsx(
|
||||
variant === 'neutral'
|
||||
? 'text-lg xs:text-xl font-bold bg-purple-100 text-gray-900 dark:bg-gray-800 dark:text-purple-50'
|
||||
? 'bg-purple-100 text-gray-900 dark:bg-gray-800 dark:text-purple-50'
|
||||
: toggledOn
|
||||
? 'bg-purple-50 text-purple-400 dark:bg-gray-900 active:hover:bg-purple-500 active:hover:text-purple-100 dark:active:hover:text-purple-100 md:hover:bg-purple-500 md:active:hover:bg-purple-600 md:dark:hover:text-purple-50'
|
||||
: 'bg-purple-400 text-purple-50 dark:text-gray-900 active:hover:bg-purple-500 active:hover:text-purple-100 dark:active:hover:text-purple-100 md:hover:bg-purple-500 md:active:hover:bg-purple-600 md:dark:hover:text-purple-50',
|
||||
'p-1 rounded transition-all shadow md:hover:cursor-pointer md:disabled:hover:cursor-default',
|
||||
'p-1 rounded transition-all shadow active:translate-y-0.5 md:hover:cursor-pointer md:disabled:hover:cursor-default text-lg xs:text-xl font-bold',
|
||||
{ 'opacity-80': disabled },
|
||||
className
|
||||
)}
|
||||
|
|
|
@ -23,9 +23,9 @@ const ButtonLink: FC<Props> = ({
|
|||
{...props}
|
||||
className={clsx(
|
||||
variant === 'neutral'
|
||||
? 'px-5 py-1 xs:py-2 text-lg xs:text-xl font-bold bg-purple-100 text-gray-900 dark:bg-gray-800 dark:text-purple-50'
|
||||
: 'p-1 bg-purple-400 text-purple-50 dark:text-gray-900 active:hover:bg-purple-500 active:hover:text-purple-100 dark:active:hover:text-purple-100 md:hover:bg-purple-500 md:active:hover:bg-purple-600 md:dark:hover:text-purple-50',
|
||||
'rounded transition-all shadow md:hover:cursor-pointer md:disabled:hover:cursor-default',
|
||||
? 'text-lg xs:text-xl font-bold bg-purple-100 text-gray-900 dark:bg-gray-800 dark:text-purple-50'
|
||||
: 'bg-purple-400 text-purple-50 dark:text-gray-900 active:hover:bg-purple-500 active:hover:text-purple-100 dark:active:hover:text-purple-100 md:hover:bg-purple-500 md:active:hover:bg-purple-600 md:dark:hover:text-purple-50',
|
||||
'rounded flex place-content-center p-1 transition-all shadow md:hover:cursor-pointer md:disabled:hover:cursor-default active:translate-y-0.5',
|
||||
{ 'pointer-events-none opacity-80': disabled },
|
||||
className
|
||||
)}
|
||||
|
|
|
@ -6,6 +6,7 @@ import {
|
|||
KeyIcon,
|
||||
LibraryIcon,
|
||||
MoonIcon,
|
||||
TrashIcon,
|
||||
} from '@heroicons/react/solid'
|
||||
import clsx from 'clsx'
|
||||
import Link from 'next/link'
|
||||
|
@ -160,6 +161,16 @@ const TopMenu: FC<Props> = () => {
|
|||
</ButtonLink>
|
||||
</li>
|
||||
)}
|
||||
<li role="menuitem">
|
||||
<ButtonLink
|
||||
href="/reset"
|
||||
aria-label="Reset your zep wallet"
|
||||
variant="primary"
|
||||
className="block"
|
||||
>
|
||||
<TrashIcon className="h-6" />
|
||||
</ButtonLink>
|
||||
</li>
|
||||
{/* <li>
|
||||
<button
|
||||
className={clsx(
|
||||
|
|
|
@ -1,20 +1,25 @@
|
|||
import { useRouter } from 'next/router'
|
||||
import { useEffect } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import useCredentialId from './useCredentialId'
|
||||
import useIsWelcoming from './useIsWelcoming'
|
||||
|
||||
const useProtectedRoutes = () => {
|
||||
const { replace, pathname } = useRouter()
|
||||
const { replace } = useRouter()
|
||||
const isWelcoming = useIsWelcoming()
|
||||
const { credentialId, checking } = useCredentialId()
|
||||
|
||||
const [safeToRender, setSafeToRender] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!checking && credentialId === undefined && !isWelcoming)
|
||||
replace('/welcome')
|
||||
}, [replace, pathname, isWelcoming, credentialId, checking])
|
||||
else if (!checking && credentialId !== undefined && isWelcoming)
|
||||
replace('/')
|
||||
else if (!checking) setSafeToRender(true)
|
||||
}, [replace, isWelcoming, credentialId, checking])
|
||||
|
||||
return checking
|
||||
return { safeToRender }
|
||||
}
|
||||
|
||||
export default useProtectedRoutes
|
||||
|
|
|
@ -12,9 +12,9 @@ import '../styles/global.css'
|
|||
|
||||
const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
|
||||
useSetupServiceWorker()
|
||||
const checkingCredential = useProtectedRoutes()
|
||||
const { safeToRender } = useProtectedRoutes()
|
||||
|
||||
if (checkingCredential) return null // todo
|
||||
if (!safeToRender) return null // todo
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
@ -32,10 +32,10 @@ const MyQrCode: NextPage = () => {
|
|||
<Head>
|
||||
<title>zep⚡️ - my qrcode</title>
|
||||
</Head>
|
||||
<div className="h-full flex flex-col items-center gap-4 xs:gap-7">
|
||||
<div className="h-full flex flex-col items-center gap-4 xs:gap-5 sm:gap-7">
|
||||
<header className="flex items-center w-full gap-2">
|
||||
<LoginIcon className="-rotate-child-90 dark:text-purple-50 h-7 xs:h-10 text-gray-900 translate-x-1 transition-colors" />
|
||||
<h1 className="text-3xl sm:text-5xl">receive</h1>
|
||||
<h1 className="text-3xl sm:text-5xl font-medium">receive</h1>
|
||||
</header>
|
||||
|
||||
<canvas
|
||||
|
|
|
@ -22,7 +22,9 @@ const Representative: NextPage = () => {
|
|||
<div className="flex-1 flex flex-col gap-6">
|
||||
<h1 className="flex items-center w-full gap-2">
|
||||
<LibraryIcon className="dark:text-purple-50 h-7 xs:h-8 text-gray-900 translate-x-1 transition-colors" />
|
||||
<span className="text-3xl sm:text-5xl">representative</span>
|
||||
<span className="text-3xl sm:text-5xl font-medium">
|
||||
representative
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<section className="flex flex-col gap-1">
|
||||
|
|
44
pages/reset.tsx
Normal file
44
pages/reset.tsx
Normal file
|
@ -0,0 +1,44 @@
|
|||
import { TrashIcon } from '@heroicons/react/solid'
|
||||
import type { NextPage } from 'next'
|
||||
import Head from 'next/head'
|
||||
|
||||
import Button from '../components/Button'
|
||||
import ButtonLink from '../components/ButtonLink'
|
||||
|
||||
const Reset: NextPage = () => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>zep⚡️ - reset wallet</title>
|
||||
</Head>
|
||||
<div className="flex-1 flex flex-col gap-4">
|
||||
<h1 className="flex items-center w-full gap-2">
|
||||
<TrashIcon className="dark:text-purple-50 h-7 xs:h-8 text-gray-900 translate-x-1 transition-colors" />
|
||||
<span className="text-3xl sm:text-5xl font-medium">
|
||||
remove wallet
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<h2 className="font-bold text-xl text-center">
|
||||
make sure you have your seed stored securely outside zep before
|
||||
continuing, or
|
||||
<br />
|
||||
<span className="font-extrabold text-purple-400">
|
||||
you will lose your xno!
|
||||
</span>
|
||||
</h2>
|
||||
<hr />
|
||||
<h3 className="font-extrabold text-2xl text-center sr-only xs:not-sr-only">
|
||||
are you sure you want to remove this wallet?
|
||||
</h3>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Button variant="primary">remove wallet</Button>
|
||||
<ButtonLink href="/">go back</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Reset
|
|
@ -91,7 +91,7 @@ const Send: NextPage = () => {
|
|||
<div className="flex flex-col h-full gap-8 pb-4">
|
||||
<span className="flex items-center gap-2">
|
||||
<PaperAirplaneIcon className="transition-colors dark:text-purple-50 h-7 xs:h-10 text-gray-900 rotate-[30deg] translate-x-1" />
|
||||
<h1 className="text-3xl sm:text-5xl">send</h1>
|
||||
<h1 className="text-3xl sm:text-5xl font-medium">send</h1>
|
||||
</span>
|
||||
<form
|
||||
onSubmit={ev => ev.preventDefault()}
|
||||
|
|
|
@ -42,12 +42,12 @@ const ReadQrCode: NextPage = () => {
|
|||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>zep⚡️ - read qrcode</title>
|
||||
<title>zep⚡️ - who to send xno to?</title>
|
||||
</Head>
|
||||
<div className="flex flex-col h-full min-h-0 gap-8 pb-4">
|
||||
<span className="flex items-center gap-2">
|
||||
<PaperAirplaneIcon className=" dark:text-purple-50 h-7 xs:h-10 text-gray-900 rotate-[30deg] transition-colors translate-x-1" />
|
||||
<h1 className="text-3xl sm:text-5xl">send</h1>
|
||||
<h1 className="text-3xl sm:text-5xl font-medium">send</h1>
|
||||
</span>
|
||||
<video
|
||||
className={clsx('rounded flex-1 shadow-md min-h-0', {
|
|
@ -6,5 +6,6 @@
|
|||
"b6203f57196d244f7eb6971cef41a4cd4ce961e81ae8046f4f8274a4057cb77b4ef97ad3c25e14b50598c1243fa3253644b44e89c8648fd9c18b3703d36372bb",
|
||||
"penalty parrot sure holiday target what human sadness crack picnic idle pluck mean salad frog usual grab aspect pottery faith staff crash umbrella lumber",
|
||||
"6bfddd0bfd00bf13eb17bae35627a2dfdf49cb56027fc26988faff0ab8a20b31efb16d706ceac8e458d4d5c342f2459d24746521a6e6a62a0adb29b323455ed9",
|
||||
"9bbaa2391a256c8d5c318790b86a142d4b13b1dc6d209567cb854e1b956f1c1385b863229a34e970d1f4c0c4a66f7ac7a17b5fd3a21e72716dddec842e0a6727"
|
||||
"9bbaa2391a256c8d5c318790b86a142d4b13b1dc6d209567cb854e1b956f1c1385b863229a34e970d1f4c0c4a66f7ac7a17b5fd3a21e72716dddec842e0a6727",
|
||||
"62E9E33F6AD58651CE99689430C244803565B296B523E025CDE62B14A1889CDF"
|
||||
]
|
||||
|
|
Reference in a new issue