fix: more light mode and begin components

components/Balance.tsx

@@ -56,11 +56,7 @@ const Balance: FC<Props> = ({ className }) => {
         <h3 className="text-4xl">
           Ӿ
           <span
-            className={clsx(
-              showXnoBalance
-                ? 'font-medium dark:font-semibold'
-                : 'font-semibold'
-            )}
+            className={clsx(showXnoBalance ? 'font-medium' : 'font-semibold')}
           >
             {showXnoBalance ? (
               account?.balance === null ? (

components/XnoInput.tsx

@@ -0,0 +1,54 @@
+import Big from 'bignumber.js'
+import { useRouter } from 'next/router'
+import { FC, useCallback } from 'react'
+
+// delete if not needed
+export interface Props {
+  value: string
+  onChange: (value: string) => void
+}
+
+Big.config({ EXPONENTIAL_AT: 1e9 })
+const bigToConvert = new Big(`1${'0'.repeat(30)}`)
+
+const XnoInput: FC<Props> = ({ value, onChange }) => {
+  const { query, replace, pathname } = useRouter()
+
+  const onInputChange = useCallback(
+    (value: string) => {
+      onChange(value)
+      replace({
+        pathname,
+        query: {
+          ...query,
+          amount:
+            value !== ''
+              ? new Big(value).times(bigToConvert).toString() // since nanocurrency-js can't handle decimals :(
+              : '',
+        },
+      })
+    },
+    [replace, pathname, query, onChange]
+  )
+
+  return (
+    <div className="flex items-center gap-3 text-2xl rounded transition-colors dark:bg-gray-800 bg-purple-50 focus-within:bg-purple-100 border-2 border-purple-200 dark:border-gray-700 py-2 px-4 w-48 overflow-hidden dark:focus-within:bg-gray-700">
+      <label htmlFor="xnoToSend">Ӿ</label>
+      <input
+        name="xno-amount"
+        id="xno-amount"
+        maxLength={15}
+        className="bg-transparent focus:outline-none"
+        value={value}
+        pattern="[0-9]*[\.,]?[0-9]{0,6}"
+        step="0.000001"
+        autoComplete="off"
+        onChange={({ target: { value, validity } }) => {
+          if (!validity.patternMismatch) onInputChange(value)
+        }}
+      />
+    </div>
+  )
+}
+
+export default XnoInput

lib/hooks/useDrawQrCode.ts

@@ -16,7 +16,7 @@ const useDrawQrCode = ({ raw, address }: { raw?: string; address: string }) => {
     qr.toCanvas(canvasRef.current, genTxnUrl({ address: address, raw }), {
       color: {
         light: darkMode ? colors.coolGray['800'] : colors.white,
-        dark: colors.violet['50'],
+        dark: darkMode ? colors.violet['50'] : colors.violet['400'],
       },
     })
   }, [raw, address, canvasRef, darkMode])

pages/receive/qr.tsx

@@ -1,24 +1,39 @@
 import { LoginIcon } from '@heroicons/react/outline'
 import type { NextPage } from 'next'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
 
+import XnoInput from '../../components/XnoInput'
 import { useAccount } from '../../lib/context/accountContext'
 import useDrawQrCode from '../../lib/hooks/useDrawQrCode'
 
 const MyQrCode: NextPage = () => {
   const account = useAccount()
-  const canvasRef = useDrawQrCode({ address: account?.address ?? '' })
+  const { query } = useRouter()
+  const { amount } = query as { amount?: string }
+  const canvasRef = useDrawQrCode({
+    address: account?.address ?? '',
+    raw: amount,
+  })
+
+  const [xnoToSend, setXnoToSend] = useState('')
 
   return (
     <div className="h-full flex flex-col gap-8">
       <span className="flex items-center justify-start gap-2">
-        <LoginIcon className="-rotate-child-90 dark:text-purple-50 h-7 xs:h-10 text-gray-900 translate-x-1" />
+        <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>
       </span>
 
       <canvas
-        className="!w-64 !h-64 rounded place-self-center shadow-lg"
+        className="!w-64 border-2 border-purple-200 dark:border-gray-700 !h-64 rounded place-self-center shadow-lg"
         ref={canvasRef}
       />
+
+      <div className="flex flex-col place-self-center items-center gap-3">
+        <span className="text-xl transition-colors">optional amount</span>
+        <XnoInput value={xnoToSend} onChange={setXnoToSend} />
+      </div>
     </div>
   )
 }

pages/send/index.tsx

@@ -1,38 +1,20 @@
 import { ArrowDownIcon } from '@heroicons/react/outline'
 import { PaperAirplaneIcon } from '@heroicons/react/solid'
-import Big from 'bignumber.js'
 import clsx from 'clsx'
 import { Unit, convert } from 'nanocurrency'
 import type { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
 
+import XnoInput from '../../components/XnoInput'
 import useSendNano from '../../lib/hooks/useSendNano'
 
-Big.config({ EXPONENTIAL_AT: 1e9 })
-const bigToConvert = new Big(`1${'0'.repeat(30)}`)
-
 const Send: NextPage = () => {
-  const { query, push, replace, pathname } = useRouter()
+  const { query, push } = useRouter()
   const { address, amount } = query as { address?: string; amount?: string }
 
   const [xnoToSend, setXnoToSend] = useState('')
-  const onXnoAmountChange = useCallback(
-    (value: string) => {
-      setXnoToSend(value)
-      replace({
-        pathname,
-        query: {
-          ...query,
-          amount:
-            value !== ''
-              ? new Big(value).times(bigToConvert).toString() // since nanocurrency-js can't handle decimals :(
-              : '',
-        },
-      })
-    },
-    [replace, pathname, query]
-  )
+
   const { send } = useSendNano()
 
   const [startX, setStartX] = useState(0)
@@ -54,6 +36,9 @@ const Send: NextPage = () => {
       const sendNano = async () => {
         try {
           await send(address as string, amount as string)
+          navigator.serviceWorker
+            .getRegistration()
+            .then(sw => sw?.showNotification('sent!'))
           push('/dashboard')
         } catch {
           backToBase()
@@ -81,22 +66,7 @@ const Send: NextPage = () => {
         onSubmit={ev => ev.preventDefault()}
         className="flex flex-col gap-3 items-center h-full"
       >
-        <div className="flex items-center gap-3 text-2xl rounded transition-colors dark:bg-gray-800 bg-purple-100 focus-within:bg-purple-200 py-2 px-4 w-48 overflow-hidden dark:focus-within:bg-gray-700">
-          <label htmlFor="xnoToSend">Ӿ</label>
-          <input
-            name="xno-amount"
-            id="xno-amount"
-            maxLength={15}
-            className="bg-transparent focus:outline-none"
-            value={xnoToSend}
-            pattern="[0-9]*[\.,]?[0-9]{0,6}"
-            step="0.000001"
-            autoComplete="off"
-            onChange={({ target: { value, validity } }) => {
-              if (!validity.patternMismatch) onXnoAmountChange(value)
-            }}
-          />
-        </div>
+        <XnoInput value={xnoToSend} onChange={setXnoToSend} />
         <span className="flex-1 text-lg text-center">
           <span className="text-extrabold">to</span>
           <br />

pages/send/qr.tsx

@@ -32,7 +32,7 @@ const ReadQrCode: NextPage = () => {
         ref={videoRef}
       />
       {!videoLive && (
-        <div className="w-full h-64 rounded dark:bg-gray-800 animate-pulse"></div>
+        <div className="w-full h-64 rounded dark:bg-gray-800 bg-purple-50 animate-pulse"></div>
       )}
     </div>
   )