Merge pull request #48 from astrodevs-labs/47-config-panel-staging

47 - Config panel
astrodevs-labs · Sep 16, 2024 · e03ab40 · e03ab40
2 parents 0d4a168 + 8ab22f0
commit e03ab40
Show file tree

Hide file tree

Showing 48 changed files with 3,502 additions and 3,031 deletions.
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;
+}