feat: get wallets and contracts from config

toolchains/solidity/extension/package.json

@@ -98,6 +98,7 @@
     "extension:publish": "yarn run package && vsce publish --no-dependencies"
   },
   "dependencies": {
+    "viem": "^2.0.6",
     "vscode-languageclient": "^8.1.0",
     "vscode-languageserver": "^8.1.0",
     "vscode-languageserver-textdocument": "^1.0.8"

toolchains/solidity/extension/sidepanel/package.json

@@ -13,7 +13,8 @@
     "@vscode/webview-ui-toolkit": "^1.4.0",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "viem": "^2.7.6"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

toolchains/solidity/extension/sidepanel/src/App.tsx

@@ -1,39 +1,44 @@
-import { useMessageHandler } from './hooks/useMessageHandler.ts';
 import { VSCodePanels, VSCodePanelTab, VSCodePanelView } from '@vscode/webview-ui-toolkit/react';
-import './App.css';
 import { DeployPage } from './pages/DeployPage/DeployPage.tsx';
 import { InteractPage } from './pages/InteractPage/InteractPage.tsx';
+import { useEffect, useState } from 'react';
+import './App.css';
 
 function App() {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  //const vscode = acquireVsCodeApi();
+  //const messageHandlers = [
+  //  {
+  //    type: 'answer',
+  //    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  //    callback: (data: any) => {
+  //      console.log('answered', data);
+  //    },
+  //  },
+  //  {
+  //    type: 'click2',
+  //    callback: () => {
+  //      console.log('clicked2');
+  //    },
+  //  },
+  //];
+//
+  //useMessageHandler(messageHandlers);
 
-  const messageHandlers = [
-    {
-      type: 'answer',
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      callback: (data: any) => {
-        console.log('answered', data);
-      },
-    },
-    {
-      type: 'click2',
-      callback: () => {
-        console.log('clicked2');
-      },
-    },
-  ];
+  const [vscode, setVscode] = useState();
 
-  useMessageHandler(messageHandlers);
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const tmp = acquireVsCodeApi();
+    setVscode(tmp);
+  }, []);
 
   return (
     <>
       <VSCodePanels>
         <VSCodePanelTab id="tab-interact">INTERACT</VSCodePanelTab>
         <VSCodePanelTab id="tab-deploy">DEPLOY</VSCodePanelTab>
         <VSCodePanelView id="view-interact">
-          <InteractPage />
+          <InteractPage vscode={vscode} />
         </VSCodePanelView>
         <VSCodePanelView id="view-deploy">
           <DeployPage />

toolchains/solidity/extension/sidepanel/src/components/InteractContracts/InteractContracts.logic.ts

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useContext } from 'react';
+import { InteractContext } from '../../contexts/InteractContext.tsx';
+import { Wallet } from '../../../../src/actions/WalletRepository.ts';
+import { Contract } from '../../../../src/actions/ContractRepository.ts';
+
+export const useInteractContracts = () => {
+  const { state, dispatch } = useContext(InteractContext);
+
+  const handleWalletChange = (wallet: Wallet) => {
+    dispatch({ type: 'SET_SELECTED_WALLET', wallet: wallet });
+  };
+
+  const handleContractChange = (contract: Contract) => {
+    dispatch({ type: 'SET_SELECTED_CONTRACT', contract: contract });
+  };
+
+  const handleFunctionChange = (func: string) => {
+    dispatch({ type: 'SET_SELECTED_FUNCTION', func: func });
+  };
+
+  const handleGasLimitChange = (event: any) => {
+    const gasLimit = event.target.value;
+
+    dispatch({ type: 'SET_GAS_LIMIT', gasLimit: parseInt(gasLimit) });
+  };
+
+  const handleValueChange = (event: any) => {
+    const value = event.target.value;
+    dispatch({ type: 'SET_VALUE', value: BigInt(value) });
+  };
+
+  const handleUnitChange = (event: any) => {
+    dispatch({ type: 'SET_UNIT', unit: event.target.value });
+  };
+
+  return {
+    state,
+    handleWalletChange,
+    handleContractChange,
+    handleFunctionChange,
+    handleGasLimitChange,
+    handleValueChange,
+    handleUnitChange,
+  };
+};

toolchains/solidity/extension/sidepanel/src/components/InteractContracts/InteractContracts.tsx

@@ -0,0 +1,65 @@
+import { VSCodeDropdown, VSCodeOption, VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
+import './InteractContracts.css';
+import { useInteractContracts } from './InteractContracts.logic.ts';
+
+export const InteractContracts = () => {
+  const logic = useInteractContracts();
+
+  return (
+    <div>
+      <div className="dropdown-container">
+        <label htmlFor="dropdown-wallets" className="label">Select account:</label>
+        <VSCodeDropdown id="dropdown-wallets">
+          {
+            logic.state.wallets.map((wallet) => (
+              <VSCodeOption onClick={() => {
+                logic.handleWalletChange(wallet);
+              }}>{wallet.address} ({wallet.name})</VSCodeOption>
+            ))
+          }
+        </VSCodeDropdown>
+      </div>
+      <div className="dropdown-container">
+        <label htmlFor="dropdown-contracts" className="label">Select contract:</label>
+        <VSCodeDropdown id="dropdown-contracts">
+          {
+            logic.state.contracts.map((contract) => (
+              <VSCodeOption onClick={() => {
+                logic.handleContractChange(contract);
+              }}>{contract.address} ({contract.name})</VSCodeOption>
+            ))
+          }
+        </VSCodeDropdown>
+      </div>
+      <div className="dropdown-container">
+        <label htmlFor="dropdown" className="label">Select function:</label>
+        <VSCodeDropdown id="dropdown">
+          {
+            logic.state.selectedContract?.abi.map((abi) => {
+              if (abi.type === 'function') {
+                return <VSCodeOption onClick={() => {
+                  logic.handleFunctionChange(abi.name);
+                }}>{abi.name}</VSCodeOption>;
+              }
+            })
+          }
+        </VSCodeDropdown>
+      </div>
+      <div className="gas-limit-container">
+        <VSCodeTextField className="gas-limit-textfield" onChange={logic.handleGasLimitChange}>Gas
+          limit</VSCodeTextField>
+      </div>
+      <div className="value-container">
+        <label className="label">Value:</label>
+        <div className="value-field-container">
+          <VSCodeTextField className="value-textfield" onChange={logic.handleValueChange} />
+          <VSCodeDropdown onChange={logic.handleUnitChange} className="value-dropdown" id="dropdown">
+            <VSCodeOption>Wei</VSCodeOption>
+            <VSCodeOption>Gwei</VSCodeOption>
+            <VSCodeOption>Eth</VSCodeOption>
+          </VSCodeDropdown>
+        </div>
+      </div>
+    </div>
+  );
+};