From 1635117ec6cdd6d943ade525ea3a6f21b484582d Mon Sep 17 00:00:00 2001 From: Filipe Medeiros Date: Thu, 21 Apr 2022 10:48:13 +0100 Subject: [PATCH] UI --- components/Balance.tsx | 7 +- components/BottomMenu.tsx | 123 +++++++++++------------------ components/Layout.tsx | 5 +- lib/decryptSeed.ts | 1 + lib/hooks/useSetupNotifications.ts | 12 ++- lib/hooks/useWelcomeBiometrics.ts | 8 +- lib/hooks/useXnoPrice.ts | 6 +- lib/showNotification.ts | 6 +- pages/index.tsx | 10 ++- pages/welcome/done.tsx | 7 +- pages/welcome/index.tsx | 23 ++---- pages/welcome/new.tsx | 5 +- styles/global.css | 3 - 13 files changed, 97 insertions(+), 119 deletions(-) diff --git a/components/Balance.tsx b/components/Balance.tsx index aba458f..3ae263f 100644 --- a/components/Balance.tsx +++ b/components/Balance.tsx @@ -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 = ({ 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 = ({ className }) => { )} - + {!isWelcoming && } {showFiatBalance && (

- ${' '} + €{' '} {xnoPrice !== undefined ? ( (Number(xnoBalance) * xnoPrice).toFixed(2) ) : ( diff --git a/components/BottomMenu.tsx b/components/BottomMenu.tsx index 649f0ac..315491f 100644 --- a/components/BottomMenu.tsx +++ b/components/BottomMenu.tsx @@ -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 = ({ className }) => { text: account?.address, }) - const isWelcoming = useIsWelcoming() - return (
@@ -62,82 +55,58 @@ const BottomMenu: FC = ({ className }) => { href="/dashboard" aria-label="go back to the dashboard" variant="primary" - disabled={isWelcoming} > - + )} -
- {'share' in navigator ? ( - - ) : ( - - )} + {'share' in navigator ? ( + + ) : ( + + )} - -
+ {!pathname.startsWith('/send') && ( + + + + )}
) } diff --git a/components/Layout.tsx b/components/Layout.tsx index e3036b0..8d900a5 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -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 = ({ children }) => { useListenToColorMedia() + const isWelcoming = useIsWelcoming() + return (
= ({ children }) => {
{children} - + {!isWelcoming && } ) : (
{children}
diff --git a/lib/decryptSeed.ts b/lib/decryptSeed.ts index 981d3ff..6e13c74 100644 --- a/lib/decryptSeed.ts +++ b/lib/decryptSeed.ts @@ -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() diff --git a/lib/hooks/useSetupNotifications.ts b/lib/hooks/useSetupNotifications.ts index 0f1146c..9517a49 100644 --- a/lib/hooks/useSetupNotifications.ts +++ b/lib/hooks/useSetupNotifications.ts @@ -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 diff --git a/lib/hooks/useWelcomeBiometrics.ts b/lib/hooks/useWelcomeBiometrics.ts index 195cc64..cf8ecec 100644 --- a/lib/hooks/useWelcomeBiometrics.ts +++ b/lib/hooks/useWelcomeBiometrics.ts @@ -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 diff --git a/lib/hooks/useXnoPrice.ts b/lib/hooks/useXnoPrice.ts index 5352fcc..c926193 100644 --- a/lib/hooks/useXnoPrice.ts +++ b/lib/hooks/useXnoPrice.ts @@ -14,9 +14,9 @@ const useXnoPrice = (): ReturnValue => { const [xnoPrice, setXnoPrice] = useState() useEffect(() => { // todo get url out of here - fetcher('https://nano.to/price?json=true').then(res => - setXnoPrice(res.price) - ) + fetcher( + 'https://nano.to/price?currency=EUR&json=true' + ).then(res => setXnoPrice(res.price)) }, []) const loading = xnoPrice === undefined return { xnoPrice, loading } as ReturnValue diff --git a/lib/showNotification.ts b/lib/showNotification.ts index d1a0778..60bd1d5 100644 --- a/lib/showNotification.ts +++ b/lib/showNotification.ts @@ -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, { diff --git a/pages/index.tsx b/pages/index.tsx index 5da0edd..b7392ee 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -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 ( <> - zep⚡️ - sign in + zep⚡️ - Sign in
-

welcome

+

Welcome

- click to sign in with your biometrics + {didFirstCheck + ? 'Click to sign in with your biometrics' + : 'Signing in with your biometrics'}

diff --git a/pages/welcome/done.tsx b/pages/welcome/done.tsx index 0176218..92ba689 100644 --- a/pages/welcome/done.tsx +++ b/pages/welcome/done.tsx @@ -12,17 +12,16 @@ const Done: NextPage = () => (

3

-

you're done!

+

You're done!

- all the buttons are now enabled and you can start using zep and{' '} - nano! + You can start using zep and nano!

- go! + Go!
diff --git a/pages/welcome/index.tsx b/pages/welcome/index.tsx index 52cd741..dcfc5dc 100644 --- a/pages/welcome/index.tsx +++ b/pages/welcome/index.tsx @@ -8,10 +8,10 @@ const Welcome: NextPage = () => { zep⚡️ - welcome -
-

hey!

+
+

Hey!

- do you already have a + Do you already have a
nano passphrase?

@@ -19,30 +19,23 @@ const Welcome: NextPage = () => { -

- - psst: you can already see all the cool buttons below, but - they're all disabled for now - -

) diff --git a/pages/welcome/new.tsx b/pages/welcome/new.tsx index 2ace1f1..e908db5 100644 --- a/pages/welcome/new.tsx +++ b/pages/welcome/new.tsx @@ -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() @@ -66,7 +67,7 @@ const New: NextPage = () => { }) await addEncryptedSeed('os', encryptedSeed) - window.location.href = '/welcome/done' + push('/welcome/done') } const isRegisterStep = credentialId === undefined diff --git a/styles/global.css b/styles/global.css index 2a6b06d..e20548f 100644 --- a/styles/global.css +++ b/styles/global.css @@ -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%;