Addressed a lot of UI feedback (#69)

Author: escottalexander

.changeset/gorgeous-keys-swim.md

@@ -0,0 +1,5 @@
+---
+"eth-tech-tree": patch
+---
+
+Major UI overhaul. Everything should still work similarly to last release.

package.json

@@ -32,7 +32,6 @@
   "license": "MIT",
   "devDependencies": {
     "@rollup/plugin-typescript": "11.1.0",
-    "@types/inquirer": "9.0.3",
     "@types/ncp": "2.0.5",
     "@types/node": "18.16.0",
     "rollup": "3.21.0",
@@ -42,6 +41,7 @@
   },
   "dependencies": {
     "@changesets/cli": "^2.26.2",
+    "@inquirer/prompts": "^7.1.0",
     "@types/terminal-kit": "^2.5.6",
     "ansi-escapes": "^7.0.0",
     "arg": "5.0.2",
@@ -50,8 +50,6 @@
     "dotenv": "^16.4.5",
     "execa": "7.1.1",
     "handlebars": "^4.7.7",
-    "inquirer": "9.2.0",
-    "inquirer-tree-prompt": "^1.1.2",
     "listr2": "^8.2.5",
     "merge-packages": "^0.1.6",
     "ncp": "^2.0.0",

rollup.config.js

@@ -9,4 +9,5 @@ export default {
     sourcemap: true,
   },
   plugins: [autoExternal(), typescript({ exclude: ["challenges/**"] })],
+  external: ["@inquirer/core"],
 };

src/actions/setup-challenge.ts

@@ -5,7 +5,7 @@ import path from "path";
 import fs from "fs";
 import { createFirstGitCommit } from "../tasks/create-first-git-commit";
 import { fetchChallenges } from "../modules/api";
-import { loadChallenges } from "../utils/stateManager";
+import { loadChallenges } from "../utils/state-manager";
 import { IChallenge } from "../types";
 import { BASE_REPO, BASE_BRANCH, BASE_COMMIT } from "../config";
 import { DefaultRenderer, Listr, ListrTaskWrapper, SimpleRenderer } from "listr2";

src/actions/submit-challenge.ts

@@ -1,23 +1,18 @@
-import inquirer from "inquirer";
-import { loadUserState } from "../utils/stateManager";
+import { loadUserState } from "../utils/state-manager";
 import { submitChallengeToServer } from "../modules/api";
 import chalk from "chalk";
+import { input } from "@inquirer/prompts";
 
 export async function submitChallenge(name: string, contractAddress?: string) {
     const { address: userAddress } = loadUserState();
     if (!contractAddress) {
         // Prompt the user for the contract address
-        const questions = [
-            {
-                type: "input",
-                name: "address",
-                message: "Completed challenge contract address on Sepolia:",
-                validate: (value: string) => /^0x[a-fA-F0-9]{40}$/.test(value),
-            },
-        ];
-        const answers = await inquirer.prompt(questions);
-        const { address } = answers;
-        contractAddress = address;
+        const question = {
+            message: "Completed challenge contract address on Sepolia:",
+            validate: (value: string) => /^0x[a-fA-F0-9]{40}$/.test(value),
+        };
+        const answer = await input(question);
+        contractAddress = answer;
     }
 
     console.log("Submitting challenge...");

src/cli.ts

@@ -1,11 +1,11 @@
 import { promptForMissingUserState } from "./tasks/prompt-for-missing-user-state";
 import { renderIntroMessage } from "./tasks/render-intro-message";
 import type { Args, IUser } from "./types";
-import { startVisualization } from "./utils/tree";
-import { loadUserState, saveChallenges } from "./utils/stateManager";
+import { loadUserState, saveChallenges } from "./utils/state-manager";
 import { fetchChallenges } from "./modules/api";
 import { parseCommandArgumentsAndOptions, promptForMissingCommandArgs } from "./tasks/parse-command-arguments-and-options";
 import { handleCommand } from "./tasks/handle-command";
+import { TechTree } from ".";
 
 
 
@@ -19,7 +19,9 @@ export async function cli(args: Args) {
     await renderIntroMessage();
     await init(userState);
     // Navigate tree
-    await startVisualization();
+    const techTree = new TechTree();
+
+    await techTree.start();
   }
 }