feat: remove wallet (reset)

This commit is contained in:
Filipe Medeiros 2021-12-08 14:45:03 +00:00
parent f29ce7afb0
commit 7519e43085
13 changed files with 93 additions and 25 deletions

View file

@ -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>

View file

@ -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(

View file

@ -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
)}

View file

@ -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
)}

View file

@ -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(

View file

@ -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

View file

@ -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 (
<>

View file

@ -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

View file

@ -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
View 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

View file

@ -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()}

View file

@ -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', {

View file

@ -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"
]