astrodevs-labs · Leon-azerty · Sep 16, 2024 · Jul 3, 2024 · Jul 6, 2024 · Jul 17, 2024
diff --git a/env-panel/.eslintrc.cjs b/env-panel/.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 },
+    ],
+  },
+}
diff --git a/env-panel/.gitignore b/env-panel/.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?
diff --git a/env-panel/.prettierrc.json b/env-panel/.prettierrc.json
@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "parser": "typescript",
+  "endOfLine": "auto"
+}
diff --git a/env-panel/index.html b/env-panel/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/env-panel/package.json b/env-panel/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "env-panel",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:extension": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vscode/webview-ui-toolkit": "^1.4.0",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "viem": "^2.7.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "react-hook-form": "7.51.1"
+  }
+}
diff --git a/env-panel/src/App.css b/env-panel/src/App.css
@@ -0,0 +1,4 @@
+.app-container {
+    display: flex;
+    justify-content: center;
+}
diff --git a/env-panel/src/App.logic.ts b/env-panel/src/App.logic.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+import { VSCode } from '@/types';
+import { useResourceManager } from '@hooks/useResourceManager.ts';
+
+export const useApp = () => {
+  const [vscode, setVscode] = useState<VSCode>();
+  const resourceManager = useResourceManager(vscode);
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    setVscode(acquireVsCodeApi());
+  }, []);
+
+  return {
+    vscode,
+    resourceManager,
+  };
+};
diff --git a/env-panel/src/App.tsx b/env-panel/src/App.tsx
@@ -0,0 +1,29 @@
+import { VSCodePanels, VSCodePanelTab, VSCodePanelView } from '@vscode/webview-ui-toolkit/react';
+import './App.css';
+import { WalletsPage } from '@pages/WalletsPage/WalletsPage.tsx';
+import { EnvironmentsPage } from '@pages/EnvironmentsPage/EnvironmentsPage.tsx';
+import { ContractsPage } from '@pages/ContractsPage/ContractsPage.tsx';
+import { useApp } from '@/App.logic.ts';
+
+export const App = () => {
+  const logic = useApp();
+
+  return (
+    <div className="app-container">
+      <VSCodePanels>
+        <VSCodePanelTab id="tab-wallets">WALLETS</VSCodePanelTab>
+        <VSCodePanelTab id="tab-environments">ENVIRONMENTS</VSCodePanelTab>
+        <VSCodePanelTab id="tab-contracts">CONTRACTS</VSCodePanelTab>
+        <VSCodePanelView id="view-wallets">
+          <WalletsPage resourceManager={logic.resourceManager} vscode={logic.vscode} />
+        </VSCodePanelView>
+        <VSCodePanelView id="view-environments">
+          <EnvironmentsPage resourceManager={logic.resourceManager} vscode={logic.vscode} />
+        </VSCodePanelView>
+        <VSCodePanelView id="view-contracts">
+          <ContractsPage resourceManager={logic.resourceManager} vscode={logic.vscode} />
+        </VSCodePanelView>
+      </VSCodePanels>
+    </div>
+  );
+};
diff --git a/env-panel/src/components/EditableDataGrid/EditableDataGrid.css b/env-panel/src/components/EditableDataGrid/EditableDataGrid.css
@@ -0,0 +1,12 @@
+.delete-cell {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.delete-cell:focus, .delete-cell:active {
+    outline: none;
+    box-shadow: none;
+    background: transparent;
+    border: 0;
+}
diff --git a/env-panel/src/components/EditableDataGrid/EditableDataGrid.logic.ts b/env-panel/src/components/EditableDataGrid/EditableDataGrid.logic.ts
@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect } from 'react';
+
+export const useEditableDataGridLogic = (
+  deleteCallback: (id: string) => void,
+  editCallback: (id: string, key: string, value: string) => void,
+  gridId: string,
+) => {
+  const dataGrid = document.getElementById(gridId);
+
+  useEffect(() => {
+    if (dataGrid) {
+      dataGrid.onclick = cellClick;
+    }
+  }, [dataGrid]);
+
+  const cellClick = (cell: any) => {
+    const { srcElement } = cell;
+    if (srcElement && srcElement.id === 'editable-cell') {
+      const handleChange = (target: any) => {
+        const newValue = target.textContent;
+
+        editCallback(srcElement.className.split(' ')[0], srcElement.className.split(' ')[1], newValue);
+
+        srcElement.setAttribute('contenteditable', 'false');
+
+        srcElement.onkeydown = undefined;
+        srcElement.onblur = undefined;
+      };
+
+      srcElement.onkeydown = (e: any) => {
+        if (e.code === 'Enter') {
+          handleChange(e.target);
+
+          return false;
+        }
+      };
+
+      srcElement.onblur = (e: any) => {
+        handleChange(e.target);
+      };
+
+      srcElement.setAttribute('contenteditable', 'true');
+    }
+  };
+
+  const deleteRow = async (event: any) => {
+    const id = event.target.id;
+    deleteCallback(id);
+  };
+
+  return {
+    deleteRow,
+  };
+};
diff --git a/env-panel/src/components/EditableDataGrid/EditableDataGrid.tsx b/env-panel/src/components/EditableDataGrid/EditableDataGrid.tsx
@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { VSCodeButton, VSCodeDataGrid, VSCodeDataGridCell, VSCodeDataGridRow } from '@vscode/webview-ui-toolkit/react';
+import { useEditableDataGridLogic } from '@components/EditableDataGrid/EditableDataGrid.logic.ts';
+import './EditableDataGrid.css';
+
+interface EditableDataGridProps {
+  headers: string[];
+  data: any[];
+  deleteCallback: (id: string) => void;
+  editCallback: (id: string, key: string, value: string) => void;
+  gridId: string;
+}
+
+export const EditableDataGrid = (props: EditableDataGridProps) => {
+  const logic = useEditableDataGridLogic(props.deleteCallback, props.editCallback, props.gridId);
+
+  return (
+    <VSCodeDataGrid id={props.gridId}>
+      <VSCodeDataGridRow>
+        {props.headers.map((header, index) => (
+          <VSCodeDataGridCell cellType="columnheader" grid-column={index + 1}>
+            {header}
+          </VSCodeDataGridCell>
+        ))}
+        <VSCodeDataGridCell cellType="columnheader" grid-column={props.headers.length + 1} />
+      </VSCodeDataGridRow>
+      {props.data.map((line) => {
+        const keys = Object.keys(line).filter((key) => key !== 'id');
+        const cells = keys.map((key, index) => (
+          <VSCodeDataGridCell className={`${line.id} ${key}`} id={'editable-cell'} grid-column={index + 1}>
+            {key === 'abi' ? JSON.stringify(line[key]) : line[key]}
+          </VSCodeDataGridCell>
+        ));
+        cells.push(
+          <VSCodeDataGridCell className="delete-cell" grid-column={keys.length + 1}>
+            <VSCodeButton onClick={logic.deleteRow} id={line.id}>
+              Delete
+            </VSCodeButton>
+          </VSCodeDataGridCell>,
+        );
+
+        return <VSCodeDataGridRow>{cells}</VSCodeDataGridRow>;
+      })}
+    </VSCodeDataGrid>
+  );
+};
diff --git a/env-panel/src/hooks/useResourceManager.ts b/env-panel/src/hooks/useResourceManager.ts
@@ -0,0 +1,52 @@
+import { Environments, InteractContracts, Wallets } from '@backend/actions/types';
+import { useEffect, useState } from 'react';
+import { VSCode } from '@/types';
+import { MessageType } from '@backend/enums.ts';
+
+export type ResourceManager = {
+  wallets: Wallets;
+  environments: Environments;
+  interactContracts: InteractContracts;
+};
+
+export const useResourceManager = (vscode: VSCode): ResourceManager => {
+  const [wallets, setWallets] = useState<Wallets>([]);
+  const [environments, setEnvironments] = useState<Environments>([]);
+  const [interactContracts, setInteractContracts] = useState<InteractContracts>([]);
+
+  useEffect(() => {
+    if (!vscode) {
+      return;
+    }
+    vscode.postMessage({ type: MessageType.GET_WALLETS });
+    vscode.postMessage({ type: MessageType.GET_ENVIRONMENTS });
+    vscode.postMessage({ type: MessageType.GET_INTERACT_CONTRACTS });
+  }, [vscode]);
+
+  useEffect(() => {
+    const listener = (event: WindowEventMap['message']) => {
+      switch (event.data.type) {
+        case MessageType.WALLETS: {
+          setWallets(event.data.wallets);
+          break;
+        }
+        case MessageType.ENVIRONMENTS: {
+          setEnvironments(event.data.environments);
+          break;
+        }
+        case MessageType.INTERACT_CONTRACTS: {
+          setInteractContracts(event.data.contracts);
+          break;
+        }
+      }
+    };
+    window.addEventListener('message', listener);
+    return () => window.removeEventListener('message', listener);
+  }, []);
+
+  return {
+    wallets,
+    environments,
+    interactContracts,
+  };
+};
diff --git a/env-panel/src/main.tsx b/env-panel/src/main.tsx
@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom/client';
+import { App } from './App.tsx';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <App />,
+);
diff --git a/env-panel/src/pages/ContractsPage/ContractsPage.css b/env-panel/src/pages/ContractsPage/ContractsPage.css
@@ -0,0 +1,3 @@
+.contracts-container {
+    width: 800px;
+}