UI

2022-04-21 10:48:13 +01:00 · 2022-04-21 10:48:13 +01:00 · 1635117ec6
parent 44c2985274
commit 1635117ec6
13 changed files with 97 additions and 119 deletions
--- 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<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)
          ) : (
--- 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<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" />
-          </Button>
-        ) : (
-          <Button
-            variant="primary"
-            aria-label="Copy your nano address to the clipboard"
-            disabled={isWelcoming || confirmCopyAddress}
-            className={clsx({
-              '!bg-purple-50 !text-purple-400': confirmCopyAddress,
-            })}
-            onClick={
-              !(isWelcoming || confirmCopyAddress) ? onCopyAddress : undefined
-            }
-          >
-            {confirmCopyAddress ? (
-              <CheckIcon className="w-8" />
-            ) : (
-              <DocumentDuplicateIcon className="w-8" />
-            )}
-          </Button>
-        )}
+      {'share' in navigator ? (
+        <Button
+          variant="primary"
+          aria-label="Share your nano address"
+          onClick={onShare}
+        >
+          <ShareIcon className="h-8 transition-colors" />
+        </Button>
+      ) : (
+        <Button
+          variant="primary"
+          aria-label="Copy your nano address to the clipboard"
+          disabled={confirmCopyAddress}
+          className={clsx({
+            '!bg-purple-50 !text-purple-400': confirmCopyAddress,
+          })}
+          onClick={!confirmCopyAddress ? onCopyAddress : undefined}
+        >
+          {confirmCopyAddress ? (
+            <CheckIcon className="h-8" />
+          ) : (
+            <DocumentDuplicateIcon className="h-8" />
+          )}
+        </Button>
+      )}

-        <nav className={clsx('flex h-16', { 'flex-row-reverse': leftHanded })}>
-          <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'
-            )}
-          >
-            <LoginIcon className="transition-colors stroke-2 w-10 -rotate-child-90" />
-          </ButtonLink>
+      {!pathname.startsWith('/receive') && (
+        <ButtonLink
+          variant="primary"
+          href="/receive/qr"
+          aria-label="see your qrcode"
+          className="xs:px-2 flex items-center flex-1"
+        >
+          <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>
-
-          <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 }
-            )}
-          >
-            <PaperAirplaneIcon className="w-10 transition-colors rotate-[30deg] translate-x-1 -translate-y-0.5" />
-          </ButtonLink>
-        </nav>
-      </div>
+      {!pathname.startsWith('/send') && (
+        <ButtonLink
+          variant="primary"
+          href="/send/to"
+          aria-label="send ӾNO"
+          className="xs:px-2 flex items-center flex-1"
+        >
+          <PaperAirplaneIcon className="h-8 transition-colors rotate-[30deg] translate-x-1 -translate-y-0.5" />
+        </ButtonLink>
+      )}
    </footer>
  )
 }
--- 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<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>
--- 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()
--- 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
--- 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
--- a/lib/hooks/useXnoPrice.ts
+++ b/lib/hooks/useXnoPrice.ts
@ -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
--- 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, {
--- 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 (
    <>
      <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>
    </>
--- a/pages/welcome/done.tsx
+++ b/pages/welcome/done.tsx
@ -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>
  </>
--- a/pages/welcome/index.tsx
+++ b/pages/welcome/index.tsx
@ -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>
    </>
  )
--- 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<Uint8Array>()
@ -66,7 +67,7 @@ const New: NextPage = () => {
    })
    await addEncryptedSeed('os', encryptedSeed)

-    window.location.href = '/welcome/done'
+    push('/welcome/done')
  }

  const isRegisterStep = credentialId === undefined
--- 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%;