feat: code generator

package.json

@@ -32,6 +32,7 @@
     "@types/node": "18.11.18",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
+    "@types/react-syntax-highlighter": "^15.5.7",
     "@uniswap/sdk-core": "<=4.0.3 || >4.0.6",
     "@uniswap/smart-order-router": "^3.11.0",
     "@uniswap/v3-periphery": "^1.4.3",
@@ -53,6 +54,7 @@
     "react-loading-skeleton": "^3.2.0",
     "react-markdown": "^8.0.7",
     "react-query": "^3.39.3",
+    "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.4.1",
     "react-toastify": "^9.1.2",
     "react-use-websocket": "^4.3.1",

src/components/current/MessageTranslator.tsx

@@ -15,6 +15,7 @@ import { SingleStepContainer } from './containers/SingleStepContainer';
 import { StreamingContainer } from './containers/StreamingContainer';
 import DepositVault from './widgets/4626vault/DepositIntoVault';
 import WithdrawVault from './widgets/4626vault/WithdrawFromVault';
+import CodeRunner from './widgets/code-runner/CodeRunner';
 import DepositDSR from './widgets/dsr/DepositDSR';
 import RedeemDSR from './widgets/dsr/RedeemDSR';
 import StakeSfrxEth from './widgets/frax/StakeSfrxETH';
@@ -323,6 +324,8 @@ export const Widget = (props: WidgetProps) => {
     />
   );
 
+  widgets.set('code-container', <CodeRunner codeString={parsedArgs.code} />);
+
   /* If available, return the widget in the widgets map */
   if (widgets.has(fnName)) {
     return widgets.get(fnName)!;

src/components/current/widgets/code-runner/CodeRunner.tsx

@@ -0,0 +1,42 @@
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { dracula as style } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { useProvider } from 'wagmi';
+import { Button } from '@/components/shared/Button';
+import useSigner from '@/hooks/useSigner';
+
+interface CodeRunnerProps {
+  codeString: string;
+}
+
+const CodeRunner = ({ codeString }: CodeRunnerProps) => {
+  const provider = useProvider();
+  const signer = useSigner();
+
+  const executeCode = async () => {
+    try {
+      // handle async funcs
+      const wrappedCode = `(async (provider, signer) => { return ${codeString}; })(provider, signer)`;
+      // Caution: using eval is generally not safe.
+      // TODO make sure the codeString can be trusted.
+      const result = await eval(wrappedCode);
+
+      if (typeof result === 'function') {
+        const res = await result(provider, signer);
+        console.log('🦄 ~ file: CodeRunner.tsx:26 ~ executeCode ~ res:', res);
+      }
+    } catch (e) {
+      console.error('An error occurred:', e);
+    }
+  };
+
+  return (
+    <div>
+      <SyntaxHighlighter language="javascript" style={style}>
+        {codeString.trim()}
+      </SyntaxHighlighter>
+      <Button onClick={executeCode}>Submit</Button>
+    </div>
+  );
+};
+
+export default CodeRunner;

src/components/shared/Button.tsx

@@ -1,21 +1,21 @@
-export const Button = (props: any) => {
-  return (
-    <button
-      {...props}
-      className={`
-        inline-block 
-        w-full 
-        cursor-pointer 
-        justify-center 
-        rounded-xl
-         bg-gray-600 px-6 py-2.5 text-center text-sm font-bold leading-tight text-white shadow-md 
-         transition duration-150 
-         ease-in-out 
-         hover:bg-gray-700 hover:shadow-lg 
-         focus:shadow-lg focus:outline-none focus:ring-0 
-         active:shadow-lg 
-         disabled:cursor-not-allowed disabled:bg-gray-500 
-         ${props.className}`}
-    />
-  );
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+}
+
+export const Button = ({ className, ...props }: ButtonProps) => {
+  const baseClasses = `
+    h-10 inline-flex w-full 
+    cursor-pointer items-center justify-center 
+    rounded-md border border-white/10 
+    bg-green-primary p-2 px-6 py-2.5 
+    text-center text-sm font-bold leading-tight text-white/70 
+    shadow-sm transition duration-200 ease-in-out 
+    hover:bg-green-primary/70 
+    focus:outline-none focus:ring-0 
+    disabled:cursor-not-allowed disabled:bg-gray-500
+  `;
+
+  const allClasses = `${baseClasses} ${className}`;
+
+  return <button {...props} className={allClasses} />;
 };