UI

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)
           ) : (

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
+      {'share' in navigator ? (
-        className={clsx('flex gap-4 xs:gap-6 items-end', {
+        <Button
-          'flex-row-reverse': leftHanded,
+          variant="primary"
-        })}
+          aria-label="Share your nano address"
-      >
+          onClick={onShare}
-        {'share' in navigator ? (
+        >
-          <Button
+          <ShareIcon className="h-8 transition-colors" />
-            variant="primary"
+        </Button>
-            aria-label="Share your nano address"
+      ) : (
-            disabled={isWelcoming}
+        <Button
-            onClick={onShare}
+          variant="primary"
-          >
+          aria-label="Copy your nano address to the clipboard"
-            <ShareIcon className="w-8 transition-colors" />
+          disabled={confirmCopyAddress}
-          </Button>
+          className={clsx({
-        ) : (
+            '!bg-purple-50 !text-purple-400': confirmCopyAddress,
-          <Button
+          })}
-            variant="primary"
+          onClick={!confirmCopyAddress ? onCopyAddress : undefined}
-            aria-label="Copy your nano address to the clipboard"
+        >
-            disabled={isWelcoming || confirmCopyAddress}
+          {confirmCopyAddress ? (
-            className={clsx({
+            <CheckIcon className="h-8" />
-              '!bg-purple-50 !text-purple-400': confirmCopyAddress,
+          ) : (
-            })}
+            <DocumentDuplicateIcon className="h-8" />
-            onClick={
+          )}
-              !(isWelcoming || confirmCopyAddress) ? onCopyAddress : undefined
+        </Button>
-            }
+      )}
-          >
-            {confirmCopyAddress ? (
-              <CheckIcon className="w-8" />
-            ) : (
-              <DocumentDuplicateIcon className="w-8" />
-            )}
-          </Button>
-        )}
 
-        <nav className={clsx('flex h-16', { 'flex-row-reverse': leftHanded })}>
+      {!pathname.startsWith('/receive') && (
-          <ButtonLink
+        <ButtonLink
-            variant="primary"
+          variant="primary"
-            href="/receive/qr"
+          href="/receive/qr"
-            aria-label="see your qrcode"
+          aria-label="see your qrcode"
-            disabled={isWelcoming}
+          className="xs:px-2 flex items-center flex-1"
-            className={clsx(
+        >
-              'xs:px-2 flex items-center',
+          <LoginIcon className="transition-colors stroke-2 h-8 -rotate-child-90" />
-              leftHanded ? 'rounded-l-none' : 'rounded-r-none'
+        </ButtonLink>
-            )}
+      )}
-          >
-            <LoginIcon className="transition-colors stroke-2 w-10 -rotate-child-90" />
-          </ButtonLink>
 
-          <div
+      {!pathname.startsWith('/send') && (
-            role="presentation"
+        <ButtonLink
-            className="p-1 border-t-2 border-b-2 border-purple-400 shadow w-16"
+          variant="primary"
-          >
+          href="/send/to"
-            <QrcodeIcon className="h-full text-gray-900 dark:text-purple-100 transition-colors w-full" />
+          aria-label="send ӾNO"
-          </div>
+          className="xs:px-2 flex items-center flex-1"
-
+        >
-          <ButtonLink
+          <PaperAirplaneIcon className="h-8 transition-colors rotate-[30deg] translate-x-1 -translate-y-0.5" />
-            variant="primary"
+        </ButtonLink>
-            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>
     </footer>
   )
 }

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>

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

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')
+    if (Notification?.permission === 'default')
-      Notification.requestPermission()
+      Notification.requestPermission().then(() =>
+        showNotification({
+          title: 'Your browser supports notifications',
+          body: 'notis',
+          tag: 'allowed_notifications',
+        })
+      )
   }, [])
 
 export default useSetupNotifications

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

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 =>
+    fetcher<XnoPriceResponse>(
-      setXnoPrice(res.price)
+      'https://nano.to/price?currency=EUR&json=true'
-    )
+    ).then(res => setXnoPrice(res.price))
   }, [])
   const loading = xnoPrice === undefined
   return { xnoPrice, loading } as ReturnValue

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

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

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{' '}
+        You can start using <b>zep</b> and <b>nano</b>!
-        <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>
   </>

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">
+      <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>
+        <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,
+          leave your device, and will only be decrypted for an instant to send
-          <br />
+          and receive nano.
-          and will only be decrypted for a few moments to send 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>
     </>
   )

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

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%;