filipe/zep
Archived
1
0
Fork 0
Code Issues Pull requests Activity

UI

Browse source
This commit is contained in:
Filipe Medeiros 2022-04-21 10:48:13 +01:00
parent 44c2985274
commit 1635117ec6
13 changed files with 97 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/Balance.tsx
View file

@ -6,6 +6,7 @@ import { FC } from 'react'
import { useCurrentAccount } from '../lib/context/accountContext'
import { usePreferences } from '../lib/context/preferencesContext'
import { ShowCurrencyPreference } from '../lib/db/types'
import useIsWelcoming from '../lib/hooks/useIsWelcoming'
import useXnoPrice from '../lib/hooks/useXnoPrice'
import rawToNanoDisplay from '../lib/xno/rawToNanoDisplay'
@ -39,6 +40,8 @@ const Balance: FC<Props> = ({ className }) => {
const xnoBalance = tools.convert(account?.balance ?? '0', 'RAW', 'NANO')
const xnoBalanceDisplay = rawToNanoDisplay(account?.balance ?? '0')
const isWelcoming = useIsWelcoming()
const Eye = showXnoBalance ? EyeOffIcon : EyeIcon
return (
@ -74,11 +77,11 @@ const Balance: FC<Props> = ({ className }) => {
)}
</span>
</h1>
<Eye className="h-7" />
{!isWelcoming && <Eye className="h-7" />}
</div>
{showFiatBalance && (
<h2 className="text:lg xs:text-xl flex items-center gap-2 transition-colors">
${' '}
€{' '}
{xnoPrice !== undefined ? (
(Number(xnoBalance) * xnoPrice).toFixed(2)
) : (

59
components/BottomMenu.tsx
View file

@ -3,8 +3,6 @@ import {
CheckIcon,
DocumentDuplicateIcon,
HomeIcon,
QrcodeIcon,
RssIcon,
ShareIcon,
} from '@heroicons/react/solid'
import clsx from 'clsx'
@ -14,7 +12,6 @@ import { FC, useState } from 'react'
import { useAccount } from '../lib/context/accountContext'
import { usePreferences } from '../lib/context/preferencesContext'
import useIsWelcoming from '../lib/hooks/useIsWelcoming'
import Button from './Button'
import ButtonLink from './ButtonLink'
@ -44,16 +41,12 @@ const BottomMenu: FC<Props> = ({ className }) => {
text: account?.address,
})
const isWelcoming = useIsWelcoming()
return (
<footer
role="navigation"
className={clsx(
'flex w-full items-end transition-opacity gap-2',
leftHanded ? 'flex-row-reverse' : 'flex-row',
pathname === '/dashboard' ? 'justify-end' : 'justify-between',
{ 'opacity-50': isWelcoming },
className
)}
>
@ -62,82 +55,58 @@ const BottomMenu: FC<Props> = ({ className }) => {
href="/dashboard"
aria-label="go back to the dashboard"
variant="primary"
disabled={isWelcoming}
>
<HomeIcon className="w-10" />
<HomeIcon className="h-8" />
</ButtonLink>
)}
<div
className={clsx('flex gap-4 xs:gap-6 items-end', {
'flex-row-reverse': leftHanded,
})}
>
{'share' in navigator ? (
<Button
variant="primary"
aria-label="Share your nano address"
disabled={isWelcoming}
onClick={onShare}
>
<ShareIcon className="w-8 transition-colors" />
<ShareIcon className="h-8 transition-colors" />
</Button>
) : (
<Button
variant="primary"
aria-label="Copy your nano address to the clipboard"
disabled={isWelcoming || confirmCopyAddress}
disabled={confirmCopyAddress}
className={clsx({
'!bg-purple-50 !text-purple-400': confirmCopyAddress,
})}
onClick={
!(isWelcoming || confirmCopyAddress) ? onCopyAddress : undefined
}
onClick={!confirmCopyAddress ? onCopyAddress : undefined}
>
{confirmCopyAddress ? (
<CheckIcon className="w-8" />
<CheckIcon className="h-8" />
) : (
<DocumentDuplicateIcon className="w-8" />
<DocumentDuplicateIcon className="h-8" />
)}
</Button>
)}
<nav className={clsx('flex h-16', { 'flex-row-reverse': leftHanded })}>
{!pathname.startsWith('/receive') && (
<ButtonLink
variant="primary"
href="/receive/qr"
aria-label="see your qrcode"
disabled={isWelcoming}
className={clsx(
'xs:px-2 flex items-center',
leftHanded ? 'rounded-l-none' : 'rounded-r-none'
)}
className="xs:px-2 flex items-center flex-1"
>
<LoginIcon className="transition-colors stroke-2 w-10 -rotate-child-90" />
<LoginIcon className="transition-colors stroke-2 h-8 -rotate-child-90" />
</ButtonLink>
)}
<div
role="presentation"
className="p-1 border-t-2 border-b-2 border-purple-400 shadow w-16"
>
<QrcodeIcon className="h-full text-gray-900 dark:text-purple-100 transition-colors w-full" />
</div>
{!pathname.startsWith('/send') && (
<ButtonLink
variant="primary"
href="/send/to"
aria-label="send ӾNO"
disabled={isWelcoming}
className={clsx(
'xs:px-2 flex items-center',
leftHanded ? 'rounded-r-none' : 'rounded-l-none',
{ 'pointer-events-none': isWelcoming }
)}
className="xs:px-2 flex items-center flex-1"
>
<PaperAirplaneIcon className="w-10 transition-colors rotate-[30deg] translate-x-1 -translate-y-0.5" />
<PaperAirplaneIcon className="h-8 transition-colors rotate-[30deg] translate-x-1 -translate-y-0.5" />
</ButtonLink>
</nav>
</div>
)}
</footer>
)
}

5
components/Layout.tsx
View file

@ -4,6 +4,7 @@ import { useRouter } from 'next/router'
import { FC } from 'react'
import { usePreferences } from '../lib/context/preferencesContext'
import useIsWelcoming from '../lib/hooks/useIsWelcoming'
import useListenToColorMedia from '../lib/hooks/useListenToColorMedia'
import Balance from './Balance'
import BottomMenu from './BottomMenu'
@ -19,6 +20,8 @@ const Layout: FC<Props> = ({ children }) => {
useListenToColorMedia()
const isWelcoming = useIsWelcoming()
return (
<div className="flex flex-col w-full h-full fixed gap-4 px-5 pt-4 pb-4 dark:text-purple-50 bg-white dark:bg-gray-900 transition-colors">
<header
@ -37,7 +40,7 @@ const Layout: FC<Props> = ({ children }) => {
<Balance />
<hr className="w-1/3 border-2 border-gray-900 dark:border-purple-50 rounded-l-sm rounded-r transition-colors" />
{children}
<BottomMenu />
{!isWelcoming && <BottomMenu />}
</>
) : (
<main className="pt-32">{children}</main>

1
lib/decryptSeed.ts
View file

@ -14,6 +14,7 @@ const decryptSeed = async (
// @ts-expect-error
response: { signature: sig },
} = await checkBiometrics(params)
console.log({ sig, seed: params.encryptedSeed })
const decryptedSeed = AES.decrypt(
params.encryptedSeed,
sig.toString()

12
lib/hooks/useSetupNotifications.ts
View file

@ -1,11 +1,17 @@
import { useEffect } from 'react'
import isiOS from '../isiOS'
import showNotification from '../showNotification'
const useSetupNotifications = () =>
useEffect(() => {
if (isiOS() && Notification.permission === 'default')
Notification.requestPermission()
if (Notification?.permission === 'default')
Notification.requestPermission().then(() =>
showNotification({
title: 'Your browser supports notifications',
body: 'notis',
tag: 'allowed_notifications',
})
)
}, [])
export default useSetupNotifications

8
lib/hooks/useWelcomeBiometrics.ts
View file

@ -1,4 +1,4 @@
import { useCallback, useEffect } from 'react'
import { useCallback, useEffect, useState } from 'react'
import { checkBiometrics } from '../biometrics'
import useChallenge from './useChallenge'
@ -8,14 +8,18 @@ const useCheckBiometrics = (onChecked: (validBiometrics: boolean) => void) => {
const { challenge } = useChallenge()
const { credentialId } = useCredentialId()
const [didFirstCheck, setDidFirstCheck] = useState(false)
const check = useCallback(async () => {
try {
if (credentialId !== undefined && challenge !== undefined) {
await checkBiometrics({ challenge, rawId: credentialId })
onChecked(true)
setDidFirstCheck(true)
}
} catch {
onChecked(false)
setDidFirstCheck(true)
}
}, [challenge, credentialId, onChecked])
@ -23,7 +27,7 @@ const useCheckBiometrics = (onChecked: (validBiometrics: boolean) => void) => {
check()
}, [check])
return check
return { didFirstCheck, check }
}
export default useCheckBiometrics

6
lib/hooks/useXnoPrice.ts
View file

@ -14,9 +14,9 @@ const useXnoPrice = (): ReturnValue => {
const [xnoPrice, setXnoPrice] = useState<number | undefined>()
useEffect(() => {
// todo get url out of here
fetcher<XnoPriceResponse>('https://nano.to/price?json=true').then(res =>
setXnoPrice(res.price)
)
fetcher<XnoPriceResponse>(
'https://nano.to/price?currency=EUR&json=true'
).then(res => setXnoPrice(res.price))
}, [])
const loading = xnoPrice === undefined
return { xnoPrice, loading } as ReturnValue

6
lib/showNotification.ts
View file

@ -1,12 +1,12 @@
import isiOS from './isiOS'
const showNotification = async (params: {
title: string
body: string
tag?: string
actions?: NotificationAction[]
}) => {
if (isiOS()) return
if (!!Notification) return
console.log('showing notification')
const sw = await navigator.serviceWorker.getRegistration()
sw?.showNotification?.(params.title, {

10
pages/index.tsx
View file

@ -8,7 +8,7 @@ import showNotification from '../lib/showNotification'
const Landing = () => {
const { replace } = useRouter()
const lazyCheck = useCheckBiometrics(valid => {
const { check: lazyCheck, didFirstCheck } = useCheckBiometrics(valid => {
if (valid) replace('/dashboard')
else
showNotification({
@ -21,10 +21,10 @@ const Landing = () => {
return (
<>
<Head>
<title>zep⚡️ - sign in</title>
<title>zep⚡️ - Sign in</title>
</Head>
<main className="flex flex-col items-center w-full h-full">
<h1 className="text-4xl font-medium mb-16">welcome</h1>
<h1 className="text-4xl font-medium mb-16">Welcome</h1>
<button
onClick={lazyCheck}
aria-label="Trigger biometrics authentication"
@ -33,7 +33,9 @@ const Landing = () => {
<FingerPrintIcon className="h-16 text-gray-900 dark:text-purple-50" />
</button>
<h2 className="text-2xl text-center">
click to sign in with your biometrics
{didFirstCheck
? 'Click to sign in with your biometrics'
: 'Signing in with your biometrics'}
</h2>
</main>
</>

7
pages/welcome/done.tsx
View file

@ -12,17 +12,16 @@ const Done: NextPage = () => (
<header className="flex flex-col items-center justify-start flex-1 px-4 text-center gap-6 text-gray-900 dark:text-purple-50 transition-colors">
<h1 className="font-extrabold text-7xl xs:text-8xl">3</h1>
<h2 className="font-extrabold text-2xl xs:text-4xl">you&apos;re done!</h2>
<h2 className="font-extrabold text-2xl xs:text-4xl">You&apos;re done!</h2>
<h3 className="text-lg">
all the buttons are now enabled and you can start using <b>zep</b> and{' '}
<b>nano</b>!
You can start using <b>zep</b> and <b>nano</b>!
</h3>
<ButtonLink
href="/dashboard"
className="!text-xl xs:!text-3xl py-1 xs:py-3 px-6"
aria-label="go to your dashboard"
>
go!
Go!
</ButtonLink>
</header>
</>

23
pages/welcome/index.tsx
View file

@ -8,10 +8,10 @@ const Welcome: NextPage = () => {
<Head>
<title>zep⚡️ - welcome</title>
</Head>
<div className="flex flex-col justify-center w-full h-full text-center text-gray-900 transition-colors dark:text-purple-50">
<h1 className="mb-3 text-3xl xs:text-5xl font-extrabold">hey!</h1>
<div className="flex flex-col justify-between py-20 w-full h-full text-center text-gray-900 transition-colors dark:text-purple-50">
<h1 className="mb-3 text-3xl xs:text-5xl font-extrabold">Hey!</h1>
<p className="mb-3 text-xl font-medium">
do you already have a
Do you already have a
<br />
<b>nano</b> passphrase?
</p>
@ -19,30 +19,23 @@ const Welcome: NextPage = () => {
<div className="flex flex-col justify-center w-full gap-3 mb-3 xs:mb-6">
<Link href="/welcome/import/register">
<a className="px-5 py-2 text-lg font-bold text-purple-50 transition-all rounded shadow-lg bg-purple-400 dark:bg-gray-800 dark:text-purple-50 hover:bg-purple-300 dark:hover:bg-gray-800 hover:shadow-md active:shadow">
i have a passphrase/seed
I have a passphrase/seed
</a>
</Link>
<Link href="/welcome/new">
<a className="px-5 py-2 text-lg font-bold text-purple-50 transition-all rounded shadow-lg bg-purple-400 dark:bg-gray-800 dark:text-purple-50 hover:bg-purple-300 dark:hover:bg-gray-800 hover:shadow-md active:shadow">
what&apos;s a passphrase?
What&apos;s a passphrase?
</a>
</Link>
</div>
<aside className="mb-2 xs:mb-3 text-xs">
your passphrase will{' '}
Your passphrase will{' '}
<b className="font-extrabold">
<em>never</em>
</b>{' '}
leave your device,
<br />
and will only be decrypted for a few moments to send nano
leave your device, and will only be decrypted for an instant to send
and receive nano.
</aside>
<p className="text-xs">
<em>
psst: you can already see all the cool buttons below, but
they&apos;re all disabled for now
</em>
</p>
</div>
</>
)

5
pages/welcome/new.tsx
View file

@ -1,6 +1,7 @@
import { wallet } from 'nanocurrency-web'
import type { NextPage } from 'next'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useEffect, useRef, useState } from 'react'
import { registerBiometrics } from '../../lib/biometrics'
@ -16,9 +17,9 @@ import accountAtIndex from '../../lib/xno/accountAtIndex'
const New: NextPage = () => {
const { setAccount } = useAccounts()
const { push } = useRouter()
const seedRef = useRef(wallet.generateLegacy())
useEffect(() => {}, [])
const { challenge } = useChallenge()
const [credentialId, setCredentialId] = useState<Uint8Array>()
@ -66,7 +67,7 @@ const New: NextPage = () => {
})
await addEncryptedSeed('os', encryptedSeed)
window.location.href = '/welcome/done'
push('/welcome/done')
}
const isRegisterStep = credentialId === undefined

3
styles/global.css
View file

@ -1,8 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
body,
html {
font-family: Manrope;
overflow: hidden;
height: 100%;
width: 100%;