feat: history commands [LIVE-11395] (#328)

* feat: update ui and add history

apps/wallet-api-tools/.eslintrc.js

@@ -7,5 +7,10 @@ module.exports = {
       presets: [require.resolve("next/babel")], // https://github.com/vercel/next.js/issues/40687#issuecomment-1264177674
     },
   },
-  rules: {},
+  rules: {
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { ignoreRestSiblings: true },
+    ],
+  },
 };

apps/wallet-api-tools/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

apps/wallet-api-tools/manifest.json

@@ -1,16 +1,14 @@
 {
   "id": "wallet-api-tools",
   "name": "Wallet API Tools",
-  "url": "http://localhost:3001",
+  "url": "http://localhost:3000",
   "homepageUrl": "https://developers.ledger.com/",
   "icon": "",
   "platform": "all",
   "apiVersion": "^2.0.0",
   "manifestVersion": "1",
   "branch": "debug",
-  "categories": [
-    "tools"
-  ],
+  "categories": ["tools"],
   "currencies": "*",
   "content": {
     "shortDescription": {
@@ -38,7 +36,5 @@
     "wallet.userId",
     "wallet.info"
   ],
-  "domains": [
-    "https://*"
-  ]
+  "domains": ["https://*"]
 }

apps/wallet-api-tools/package.json

@@ -23,9 +23,12 @@
     "@uiw/react-codemirror": "^4.21.22",
     "bufferutil": "^4.0.8",
     "flowbite": "^2.3.0",
+    "jotai": "^2.7.0",
+    "lucide-react": "^0.359.0",
     "next": "^14.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "thememirror": "^2.0.1",
     "typescript": "5.3.3",
     "utf-8-validate": "^6.0.3",
     "uuid": "^9.0.1",

apps/wallet-api-tools/src/TemplateSelector/index.tsx → apps/wallet-api-tools/src/CommandSelector/index.tsx

@@ -303,19 +303,19 @@ const data: Group[] = [
   },
 ];
 
-type TemplateSelectorProps = {
-  onSelectTemplate: (value: object) => void;
+type CommandSelectorProps = {
+  onSelectCommand: (value: object) => void;
 };
 
-export function TemplateSelector({ onSelectTemplate }: TemplateSelectorProps) {
+export function CommandSelector({ onSelectCommand }: CommandSelectorProps) {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <button
           aria-label="Customise options"
-          className="py-2.5 px-5 text-sm mr-2 font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+          className="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
         >
-          Template
+          Commands
         </button>
       </DropdownMenu.Trigger>
 
@@ -342,7 +342,7 @@ export function TemplateSelector({ onSelectTemplate }: TemplateSelectorProps) {
                         key={methodName}
                         className="DropdownMenuItem"
                         onSelect={() => {
-                          onSelectTemplate(option.value);
+                          onSelectCommand(option.value);
                         }}
                       >
                         {methodName}