Adapt hello page

klydra · Jul 23, 2024 · 0675170 · 0675170
1 parent 903d9fb
commit 0675170
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/encryption/bip39.ts b/encryption/bip39.ts
@@ -27,7 +27,7 @@ export function bitsToUint8Array(bits: boolean[]) {
   return result;
 }
 
-export function bitsToBIP39(bits: boolean[]) {
+export function bitsToBIP39(bits: boolean[]): string[] {
   const length = Math.ceil(bits.length / BIP39_BITS_DEPTH);
 
   const result = [];
@@ -48,12 +48,11 @@ export function bitsToBIP39(bits: boolean[]) {
     result.push(BIP39_RUNE[index]);
   }
 
-  return result.join(" ");
+  return result;
 }
 
-export function bip39ToBits(bip39: string) {
+export function bip39ToBits(words: string[]) {
   const bits: boolean[] = [];
-  const words = bip39.split(" ");
 
   for (let i = 0; i < words.length; i++) {
     let index = BIP39_RUNE.indexOf(words[i]);

diff --git a/encryption/crypto.ts b/encryption/crypto.ts
@@ -129,19 +129,19 @@ export async function encryptIV(
   return arrayBufferToHexString(encrypted);
 }
 
-function utf8StringToUint8Array(utf8String: string) {
+export function utf8StringToUint8Array(utf8String: string) {
   return new TextEncoder().encode(utf8String);
 }
 
-function uint8ArrayToUtf8String(uint8Array: Uint8Array) {
+export function uint8ArrayToUtf8String(uint8Array: Uint8Array) {
   return new TextDecoder().decode(uint8Array);
 }
 
-function arrayBufferToUtf8String(uint8Array: ArrayBuffer) {
+export function arrayBufferToUtf8String(uint8Array: ArrayBuffer) {
   return uint8ArrayToUtf8String(new Uint8Array(uint8Array));
 }
 
-function hexStringToUint8Array(hexString: string) {
+export function hexStringToUint8Array(hexString: string) {
   if (hexString.length % 2 !== 0) {
     throw new Error("Hex string must have even number of characters");
   }
@@ -155,12 +155,12 @@ function hexStringToUint8Array(hexString: string) {
   return uint8Array;
 }
 
-function uint8ArrayToHexString(uint8Array: Uint8Array) {
+export function uint8ArrayToHexString(uint8Array: Uint8Array) {
   return Array.from(uint8Array)
     .map((byte) => ("0" + byte.toString(16)).slice(-2))
     .join("");
 }
 
-function arrayBufferToHexString(uint8Array: ArrayBuffer) {
+export function arrayBufferToHexString(uint8Array: ArrayBuffer) {
   return uint8ArrayToHexString(new Uint8Array(uint8Array));
 }
diff --git a/web/pages/hello.tsx b/web/pages/hello.tsx
@@ -1,16 +1,35 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useUserStore } from "@/app/zustand.ts";
+import { hexStringToUint8Array } from "encryption/crypto.ts";
+import { bitsToBIP39, uint8ArrayToBits } from "encryption/bip39.ts";
 
 export const Route = createFileRoute("/hello")({
   component: () => {
     const userStore = useUserStore();
+    const phrase = userStore.pk
+      ? bitsToBIP39(uint8ArrayToBits(hexStringToUint8Array(userStore.pk)))
+      : undefined;
+    const delimiter = phrase ? phrase.length / 3 : undefined;
 
     return (
       <div className="flex-grow w-full flex flex-col justify-center items-center">
         <p className="px-4 py-6 text-2xl">
           Welcome aboard, <b>{userStore.username}</b>!
         </p>
-        <p className="grid grid-cols-4 px-4 py-6 text-xl">{userStore.pk}</p>
+        <div className="px-4 py-12 text-2xl font-bold leading-relaxed">
+          {phrase?.map((word, index) => {
+            return (
+              <span key={index} className="mx-2">
+                {word}
+                {delimiter &&
+                index % delimiter === delimiter - 1 &&
+                index !== phrase.length - 1 ? (
+                  <br />
+                ) : undefined}
+              </span>
+            );
+          })}
+        </div>
         <p>
           Note this down.
           <br />