Add frontend

2026-01-10 13:38:20 -05:00 · 2023-11-09 11:51:26 +11:00
parent 5e82761f93
commit 00c7a4291a
15 changed files with 3932 additions and 0 deletions
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,6 @@
+# Seed Splitter Frontend
+
+```sh
+npm install
+npm run dev # or `npm run build`
+```
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Seed Splitter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}
--- a/frontend/src/App.module.css
+++ b/frontend/src/App.module.css
@@ -0,0 +1,161 @@
+.container {
+  max-width: 600px;
+  margin: auto;
+  padding: 20px;
+  font-family: 'Arial', sans-serif;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 40px;
+  color: #333;
+}
+
+.button {
+  background-color: #4CAF50;
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 10px 2px;
+  cursor: pointer;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.button:hover {
+  background-color: #45a049;
+}
+
+.input, .inputName, .output {
+  padding: 10px;
+  margin: 10px 0;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.output {
+  background-color: #f8f8f8;
+  color: #555;
+}
+
+.pointsList {
+  list-style: none;
+  padding: 0;
+  margin-top: 20px;
+}
+
+.pointItem {
+  background-color: #f9f9f9;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  border-left: 5px solid #4CAF50;
+}
+
+.mnemonicDisplay {
+  margin-top: 20px;
+  background-color: #d9edf7;
+  color: #31708f;
+  padding: 15px;
+  border-radius: 5px;
+  font-weight: bold;
+}
+
+.title {
+  font-size: 24px;
+  color: #333;
+}
+
+.section {
+  margin-bottom: 30px;
+}
+
+.sectionTitle {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.error {
+  color: #d9534f;
+  padding: 10px;
+  margin-top: 10px;
+  border: 1px solid #d4b4b4;
+  background-color: #f2dede;
+  border-radius: 4px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  /* margin-bottom: 20px; */
+}
+
+.gridItem {
+  display: flex;
+  align-items: center; /* Aligns the items vertically in the center */
+}
+
+.gridNumber {
+  font-weight: bold;
+  margin-right: 5px;
+  display: inline-block; /* Makes the number label an inline element */
+  text-align: right;
+  width: 20px; /* Fixed width for the number label */
+}
+
+.inputName {
+  flex: 1;
+  padding: 5px;
+  margin: 0;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  flex-grow: 1;
+  display: block; /* make the input block level to fill width */
+  margin-bottom: 10px; /* spacing between inputs */
+}
+
+.input {
+  flex: 1;
+  padding: 5px;
+  margin: 0;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  flex-grow: 1;
+  display: block; /* make the input block level to fill width */
+}
+
+.input.valid {
+  border-color: #4CAF50;
+}
+
+.input.warning {
+  border-color: #ff9800; /* Orange for warning */
+  background-color: #fff3cd;
+  color: #856404;
+}
+
+.input.invalid {
+  border-color: #d9534f;
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+.pointName {
+  font-weight: bold;
+  color: #333;
+}
+
+.pointMnemonic {
+  font-family: monospace;
+  font-size: 0.9em;
+}
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from "react";
+import SeedSplitter, { Point } from "./seed-splitter/SeedSplitter.ts";
+import styles from "./App.module.css";
+import bip39WordList from "./seed-splitter/bip39WordList.ts";
+
+const App: React.FC = () => {
+  const [points, setPoints] = useState<Point[]>([]);
+  const [name, setName] = useState<string>("");
+  const [mnemonic, setMnemonic] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [newPointName, setNewPointName] = useState<string>("");
+  const [newPointMnemonic, setNewPointMnemonic] = useState<string>("");
+  const [mnemonicWords, setMnemonicWords] = useState<string[]>(Array(12).fill(''));
+  const [validWords, setValidWords] = useState<boolean[]>(Array(12).fill(false));
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+
+  const addPoint = async () => {
+    try {
+      const randomPoint = await SeedSplitter.randomPoint();
+      setPoints([...points, randomPoint]);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const addCustomPoint = () => {
+    try {
+      if (!newPointName || !newPointMnemonic) {
+        throw new Error("Both name and mnemonic must be provided.");
+      }
+      const customPoint = {
+        name: newPointName,
+        mnemonic: newPointMnemonic.split(" "),
+      };
+      setPoints([...points, customPoint]);
+      setNewPointName("");
+      setNewPointMnemonic("");
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const calculateMnemonic = async () => {
+    try {
+      if (points.length < 2) {
+        throw new Error("You need at least two points to fit a polynomial.");
+      }
+      const seedSplitter = await SeedSplitter.fit(points);
+      const calculatedMnemonic = await seedSplitter.calculate(name);
+      setMnemonic(calculatedMnemonic.join(' '));
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  useEffect(() => {
+    setValidWords(mnemonicWords.map((word, index) => 
+      !word || bip39WordList.includes(word.toLowerCase())));
+  }, [mnemonicWords]);
+
+  const handleMnemonicChange = (index: number, word: string) => {
+    const newMnemonicWords = [...mnemonicWords];
+    newMnemonicWords[index] = word.trim();
+    setMnemonicWords(newMnemonicWords);
+  };
+
+  const isSubstringOfWord = (word: string) => {
+    return bip39WordList.some((validWord) => validWord.startsWith(word.toLowerCase()));
+  };
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>Seed Splitter</h1>
+      {error && <p className={styles.error}>Error: {error}</p>}
+
+      <div className={styles.section}>
+        <button className={styles.button} onClick={addPoint}>Add Random Point</button>
+      </div>
+
+      <div className={styles.section}>
+        <input className={styles.input} type="text" placeholder="Point Name" value={name} onChange={(e) => setName(e.target.value)} />
+        <button className={styles.button} onClick={calculateMnemonic}>Calculate Point</button>
+        {mnemonic && <div className={styles.output}>Mnemonic: {mnemonic}</div>}
+      </div>
+
+      <div className={styles.section}>
+        <h2 className={styles.sectionTitle}>Add a Custom Point</h2>
+        <input
+          className={styles.inputName}
+          type="text"
+          value={newPointName}
+          onChange={(e) => setNewPointName(e.target.value)}
+          placeholder="Point Name"
+        />
+        <div className={styles.grid}>
+          {Array.from({ length: 12 }).map((_, index) => (
+            <div key={index} className={styles.gridItem}>
+              <label className={styles.gridNumber}>{index + 1}.</label>
+              <input
+                className={`${styles.input} ${
+                  !mnemonicWords[index] ? '' : 
+                  validWords[index] ? styles.valid : 
+                  focusedIndex === index && isSubstringOfWord(mnemonicWords[index]) ? styles.warning : styles.invalid
+                }`}
+                type="text"
+                value={mnemonicWords[index] || ''}
+                onFocus={() => setFocusedIndex(index)}
+                onBlur={() => setFocusedIndex(null)}
+                onChange={(e) => handleMnemonicChange(index, e.target.value)}
+              />
+            </div>
+          ))}
+        </div>
+        <button className={styles.button} onClick={addCustomPoint}>Add Point</button>
+      </div>
+
+      <div className={styles.section}>
+        <h2 className={styles.sectionTitle}>Points</h2>
+        <ul className={styles.pointsList}>
+          {points.map((point, index) => (
+            <li key={index} className={styles.pointItem}>
+              <div className={styles.pointName}>{point.name}</div>
+              <div className={styles.pointMnemonic}>{point.mnemonic.join(' ')}</div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default App;
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/frontend/src/seed-splitter
+++ b/frontend/src/seed-splitter
@@ -0,0 +1 @@
+../../src/seed-splitter
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})