More pages are done, styling improved

index.html

@@ -8,8 +8,8 @@
 
     <style>
       html {
-        min-width: 365px;
-        min-height: 592px;
+        min-width: 320px;
+        min-height: 517px;
       }
     </style>
   </head>

src/App.tsx

@@ -4,6 +4,7 @@ import { KaspaProvider } from './contexts/Kaspa'
 import Landing from './pages/Landing'
 import Creation from './pages/Creation'
 import Unlock from './pages/Unlock'
+import Wallet from './pages/Wallet'
 
 function App () {
   return (
@@ -14,6 +15,7 @@ function App () {
             <Route path="/" element={<Landing />} />
             <Route path="/creation" element={<Creation />} />
             <Route path="/unlock" element={<Unlock />} />
+            <Route path="/wallet" element={<Wallet />} />
           </Routes>
         </MemoryRouter>
       </KaspaProvider>

src/pages/Creation/Create.tsx

@@ -13,19 +13,20 @@ export default function Create({ mnemonic, onSaved }: {
             Backup words
           </h1>
         </div>
-        <p className="font-semibold text-center">
-          Write mnemonic into a safe place, may be needed in future.
+        <p className="font-semibold text-center tracking-tighter">
+          Write mnemonic into a safe place, will be needed in future.
         </p>
       </div>
       <div className="grid grid-cols-3 gap-1">
         {mnemonic.split(' ').map((word, index) => (
-          <label className="flex input input-bordered items-center gap-1 h-10">
+          <label
+            key={index}
+            className="flex input input-bordered items-center gap-1 h-8"
+          >
             {index + 1}
             <input
-              key={index}
               value={word}
-              placeholder={`Word ${index + 1}`}
-              className="font-mono"
+              className="font-mono max-w-full"
               disabled
             />
           </label>

src/pages/Creation/Import.tsx

@@ -19,8 +19,8 @@ export default function Import ({ onSubmit }: {
     const words = e.clipboardData.getData('text').split(' ')
 
     if (words.length === 24) {
-      e.preventDefault()
       setMnemonic(words)
+      e.preventDefault()
       e.currentTarget.blur()
     }
   }, [])
@@ -31,21 +31,21 @@ export default function Import ({ onSubmit }: {
         <div className="flex flex-row items-center justify-center gap-2">
           <SquareAsteriskIcon strokeWidth={3} size={28}/>
           <h1 className="text-4xl font-extrabold tracking-tight">
-            Import a wallet
+            Import wallet
           </h1>
         </div>
-        <p className="font-semibold text-center">
-          Enter mnemonic, the key of a wallet.
+        <p className="font-semibold text-center tracking-tighter">
+          Enter mnemonic words, the key of a wallet.
         </p>
       </div>
       <div className="grid grid-cols-3 gap-1">
         {mnemonic.map((word, index) => (
           <input
             key={index}
             value={word}
-            placeholder={`Word ${index + 1}`}
+            placeholder={`${index + 1}`}
             type="password"
-            className="input input-bordered h-10 font-mono"
+            className="input input-bordered h-8 font-mono"
             onFocus={(e) => e.currentTarget.type = 'text'}
             onBlur={(e) => e.currentTarget.type = 'password'}
             onChange={(e) => changeMnemonicWord(index, e.target.value)}

src/pages/Creation/Landing.tsx

@@ -5,7 +5,7 @@ export default function Landing({ forward }: {
   forward: (tab: Tabs) => void
 }) {
   return (
-    <main className="flex flex-col justify-between min-h-screen px-8 py-8">
+    <main className="flex flex-col justify-between min-h-screen px-8 py-6">
       <img src={Icon} className="rounded-full"/>
       <h1 className="text-4xl font-extrabold tracking-tight text-center">
         Welcome to Kaspian Wallet!

src/pages/Creation/Password.tsx

@@ -30,15 +30,15 @@ export default function Password ({ onSet }: {
   }, [ password ])
 
   return (
-    <main className="flex flex-col justify-between min-h-screen px-8 py-8">
+    <main className="flex flex-col justify-between min-h-screen px-6 py-8">
       <div className="flex flex-col gap-1">
         <div className="flex flex-row items-center justify-center gap-2">
           <KeyIcon strokeWidth={3} size={28}/>
           <h1 className="text-4xl font-extrabold tracking-tight">
-            Set a password
+            Set password
           </h1>
         </div>
-        <p className="font-semibold text-center">
+        <p className="font-semibold text-center tracking-tighter">
           Will be used for encryption of mnemonic.
         </p>
       </div>

src/pages/Landing.tsx

@@ -25,7 +25,7 @@ export default function Landing() {
       } else if (kaspa.status === Status.Locked) {
         navigate("/unlock")
       } else if (kaspa.status === Status.Unlocked) {
-        navigate("/:3")
+        navigate("/wallet")
       }
     }
   }, [ loadedSettings, loadedKaspa ])

src/pages/Unlock.tsx

@@ -1,5 +1,5 @@
 import useKaspa from "@/hooks/useKaspa"
-import { HandMetalIcon } from "lucide-react"
+import { HandIcon } from "lucide-react"
 import { useCallback, useState } from "react"
 import { useNavigate } from "react-router-dom"
 
@@ -22,12 +22,12 @@ export default function Unlock () {
     <main className="flex flex-col justify-between min-h-screen px-8 py-8">
       <div className="flex flex-col gap-1">
         <div className="flex flex-row items-center justify-center gap-2">
-          <HandMetalIcon strokeWidth={3} size={28}/>
+          <HandIcon strokeWidth={3} size={28}/>
           <h1 className="text-4xl font-extrabold tracking-tight">
-            Welcome back!
+            Welcome!
           </h1>
         </div>
-        <p className="font-semibold text-center">
+        <p className="font-semibold text-center tracking-tighter">
           To enjoy all features of Kaspian, please unlock your wallet first.
         </p>
       </div>
@@ -44,7 +44,7 @@ export default function Unlock () {
         </button>
       </div>
       <div className="flex flex-col gap-1">
-        <button className="btn btn-primary">Unlock</button>
+        <button className="btn btn-primary" onClick={unlockWallet}>Unlock</button>
       </div>
     </main>
   )

src/pages/Wallet.tsx

@@ -0,0 +1,23 @@
+import { useState } from "react"
+import { useNavigate } from "react-router-dom"
+import useKaspa from "@/hooks/useKaspa"
+import Summary from "./Wallet/Summary"
+
+export enum Tabs {
+  Summary
+}
+
+export default function Creation () {
+  const navigate = useNavigate()
+  const { kaspa, request } = useKaspa()
+
+  const [ tab, setTab ] = useState(Tabs.Summary)
+
+  return (
+    {
+      [ Tabs.Summary ]: <Summary forward={tab => { 
+        setTab(tab) 
+      }} />,
+    }[ tab ]
+  )
+}

src/pages/Wallet/Summary.tsx

@@ -0,0 +1,52 @@
+import useKaspa from "@/hooks/useKaspa"
+import { Tabs } from "../Wallet"
+import { currencies } from "@/contexts/Settings"
+import useSettings from "@/hooks/useSettings"
+import useCoingecko from "@/hooks/useCoingecko"
+import { SendToBack, ReceiptIcon, LogOutIcon } from "lucide-react"
+
+export default function Summary ({ forward }: { 
+  forward: (tab: Tabs) => void
+}) {
+  const { kaspa } = useKaspa()
+  const { settings } = useSettings()
+  const price = useCoingecko(settings.currency)
+
+  return (
+    <main className="flex flex-col justify-between min-h-screen px-3 py-4">
+      <div className="flex flex-col gap-1">
+        <div className="navbar">
+          <div className="navbar-start">
+            <button className="btn btn-outline text-4xl">Kaspian</button>
+          </div>
+          <div className="navbar-end">
+            <button className="btn btn-circle">
+              <LogOutIcon />
+            </button>
+          </div>
+        </div>
+        <div className="card bg-primary text-primary-contents">
+          <div className="card-body items-center text-center gap-3">
+            <div>
+              <h2 className="card-title font-extrabold gap-0 h-8">
+                <img className="h-11" src="https://kaspa.org/wp-content/uploads/2023/06/Kaspa-Icon-White.svg" />
+                {kaspa.balance.toFixed(4)} KAS
+              </h2>
+              <p className="font-bold font-mono">{currencies[settings.currency]} {(kaspa.balance * price).toFixed(2)}</p>
+            </div>
+            <div className="card-actions">
+              <button className="btn">
+                <SendToBack />
+                Send
+              </button>
+              <button className="btn">
+                <ReceiptIcon />
+                Receive
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}