Make the app responsive on mobile

.gitignore

@@ -4,4 +4,6 @@ target
 .vercel
 /certs/*
 build
-node_modules
+node_modules
+tmp
+.vscode/*

README.md

@@ -64,7 +64,7 @@ cargo run
 Alternatively, it can be run locally with Docker, as it is in the deployed environment.
 
 ```sh
-docker build -f deployment .
+docker build -f deployment/Dockerfile .
 docker run -p 8080:8080 -d <image-sha>
 ```
 
@@ -79,13 +79,13 @@ npm start
 
 This will open http://localhost:3000 in your browser. By default, it will use the production backend endpoint. 
 
-To test against the backend running locally, make this change in `app/src/features/editor/hooks/useCompile.tsx`:
+To test against the backend running locally, make this change in `app/src/constants.ts`:
 
 ```diff
--    const server_uri = 'https://api.sway-playground.org/compile';
--    // const server_uri = 'http://0.0.0.0:8080/compile';
-+    // const server_uri = 'https://api.sway-playground.org/compile';
-+    const server_uri = 'http://0.0.0.0:8080/compile';
+-    export const SERVER_URI = 'https://api.sway-playground.org';
+-    // export const SERVER_URI = 'http://0.0.0.0:8080';
++    // export const SERVER_URI = 'https://api.sway-playground.org';
++    export const SERVER_URI = 'http://0.0.0.0:8080';
 ```
 
 ## Contributing to Sway

app/package.json

@@ -14,6 +14,7 @@
     "@mui/material": "^5.13.2",
     "@tanstack/react-query": "^4.24.9",
     "ace-builds": "^1.22.0",
+    "ace-mode-solidity": "^0.1.1",
     "ansicolor": "^1.1.100",
     "fuels": "^0.74",
     "react": "^18.2.0",

app/src/App.tsx

@@ -1,25 +1,42 @@
-import React, { useCallback, useState } from 'react';
-import Editor from './features/editor/components/Editor';
+import React, { useCallback, useEffect, useState } from 'react';
 import ActionToolbar from './features/toolbar/components/ActionToolbar';
 import LogView from './features/editor/components/LogView';
 import { useCompile } from './features/editor/hooks/useCompile';
 import { DeployState } from './utils/types';
-import { loadCode, saveCode } from './utils/localStorage';
+import {
+  loadSolidityCode,
+  loadSwayCode,
+  saveSolidityCode,
+  saveSwayCode,
+} from './utils/localStorage';
 import InteractionDrawer from './features/interact/components/InteractionDrawer';
 import { useLog } from './features/editor/hooks/useLog';
 import { Toolchain } from './features/editor/components/ToolchainDropdown';
+import { useTranspile } from './features/editor/hooks/useTranspile';
+import EditorView from './features/editor/components/EditorView';
 
 const DRAWER_WIDTH = '40vw';
 
 function App() {
-  // The current code in the editor.
-  const [code, setCode] = useState(loadCode());
+  // The current sway code in the editor.
+  const [swayCode, setSwayCode] = useState(loadSwayCode());
+
+  // The current solidity code in the editor.
+  const [solidityCode, setSolidityCode] = useState(loadSolidityCode());
+
+  // An error message to display to the user.
+  const [showSolidity, setShowSolidity] = useState(false);
 
   // The most recent code that the user has requested to compile.
   const [codeToCompile, setCodeToCompile] = useState<string | undefined>(
     undefined
   );
 
+  // The most recent code that the user has requested to transpile.
+  const [codeToTranspile, setCodeToTranspile] = useState<string | undefined>(
+    undefined
+  );
+
   // Whether or not the current code in the editor has been compiled.
   const [isCompiled, setIsCompiled] = useState(false);
 
@@ -38,13 +55,28 @@ function App() {
   // An error message to display to the user.
   const [drawerOpen, setDrawerOpen] = useState(false);
 
-  const onCodeChange = useCallback(
+  useEffect(() => {
+    if (showSolidity) {
+      setIsCompiled(false);
+    }
+  }, [showSolidity]);
+
+  const onSwayCodeChange = useCallback(
     (code: string) => {
-      saveCode(code);
-      setCode(code);
+      saveSwayCode(code);
+      setSwayCode(code);
       setIsCompiled(false);
     },
-    [setCode]
+    [setSwayCode]
+  );
+
+  const onSolidityCodeChange = useCallback(
+    (code: string) => {
+      saveSolidityCode(code);
+      setSolidityCode(code);
+      setIsCompiled(false);
+    },
+    [setSolidityCode]
   );
 
   const setError = useCallback(
@@ -54,6 +86,28 @@ function App() {
     [updateLog]
   );
 
+  const onCompileClick = useCallback(() => {
+    if (showSolidity) {
+      // Transpile the Solidity code before compiling.
+      setCodeToTranspile(solidityCode);
+    } else {
+      setCodeToCompile(swayCode);
+    }
+  }, [
+    showSolidity,
+    swayCode,
+    solidityCode,
+    setCodeToCompile,
+    setCodeToTranspile,
+  ]);
+
+  useTranspile(
+    codeToTranspile,
+    setCodeToCompile,
+    onSwayCodeChange,
+    setError,
+    updateLog
+  );
   useCompile(codeToCompile, setError, setIsCompiled, updateLog, toolchain);
 
   return (
@@ -66,11 +120,13 @@ function App() {
       <ActionToolbar
         deployState={deployState}
         setContractId={setContractId}
-        onCompile={() => setCodeToCompile(code)}
+        onCompile={onCompileClick}
         isCompiled={isCompiled}
         setDeployState={setDeployState}
         drawerOpen={drawerOpen}
         setDrawerOpen={setDrawerOpen}
+        showSolidity={showSolidity}
+        setShowSolidity={setShowSolidity}
         updateLog={updateLog}
       />
       <div
@@ -81,11 +137,14 @@ function App() {
           display: 'flex',
           flexDirection: 'column',
         }}>
-        <Editor
-          code={code}
-          onChange={onCodeChange}
+        <EditorView
+          swayCode={swayCode}
+          onSwayCodeChange={onSwayCodeChange}
+          solidityCode={solidityCode}
+          onSolidityCodeChange={onSolidityCodeChange}
           toolchain={toolchain}
           setToolchain={setToolchain}
+          showSolidity={showSolidity}
         />
         <LogView results={log} />
       </div>

app/src/components/SecondaryButton.tsx

@@ -22,7 +22,13 @@ function SecondaryButton({
   header,
 }: SecondaryButtonProps) {
   if (!!header) {
-    style = { ...style, minWidth: '115px', height: '40px', marginLeft: '15px' };
+    style = {
+      ...style,
+      minWidth: '115px',
+      height: '40px',
+      marginRight: '15px',
+      marginBottom: '10px',
+    };
   }
   return (
     <Tooltip title={tooltip}>

app/src/constants.ts

@@ -1,6 +1,10 @@
 export const FUEL_GREEN = '#00f58c';
 
-export const DEFAULT_CONTRACT = `contract;
+// TODO: Determine the URL based on the NODE_ENV.
+// export const SERVER_URI = 'https://api.sway-playground.org';
+export const SERVER_URI = 'http://0.0.0.0:8080';
+
+export const DEFAULT_SWAY_CONTRACT = `contract;
 
 abi TestContract {
     #[storage(read, write)]
@@ -27,3 +31,25 @@ impl TestContract for Contract {
         storage.counter.read()
     }
 }`;
+
+export const DEFAULT_SOLIDITY_CONTRACT = `pragma solidity ^0.8.24;
+
+contract Counter {
+    uint64 public count;
+
+    // Function to get the current count
+    function get_counter() public view returns (uint64) {
+        return count;
+    }
+
+    // Function to increment count by 1
+    function increment_counter() public {
+        count += 1;
+    }
+
+    // Function to decrement count by 1
+    function dec() public {
+        // This function will fail if count = 0
+        count -= 1;
+    }
+}`;

app/src/features/editor/components/ActionOverlay.tsx

@@ -6,8 +6,8 @@ import Tooltip from '@mui/material/Tooltip';
 
 export interface ActionOverlayProps {
   handleReset: () => void;
-  toolchain: Toolchain;
-  setToolchain: (toolchain: Toolchain) => void;
+  toolchain?: Toolchain;
+  setToolchain?: (toolchain: Toolchain) => void;
 }
 
 function ActionOverlay({
@@ -25,7 +25,7 @@ function ActionOverlay({
           zIndex: 1,
           pointerEvents: 'none',
         }}>
-        <ToolchainDropdown
+        {(toolchain && setToolchain) && <ToolchainDropdown
           style={{
             position: 'absolute',
             right: '68px',
@@ -34,7 +34,7 @@ function ActionOverlay({
           }}
           toolchain={toolchain}
           setToolchain={setToolchain}
-        />
+        />}
         <div>
           <Tooltip placement='top' title={'Reset the editor'}>
             <IconButton

app/src/features/editor/components/EditorView.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import SolidityEditor from './SolidityEditor';
+import SwayEditor from './SwayEditor';
+import { Toolchain } from './ToolchainDropdown';
+import { useIsMobile } from '../../../hooks/useIsMobile';
+
+export interface EditorViewProps {
+  swayCode: string;
+  onSwayCodeChange: (value: string) => void;
+  solidityCode: string;
+  onSolidityCodeChange: (value: string) => void;
+  toolchain: Toolchain;
+  setToolchain: (toolchain: Toolchain) => void;
+  showSolidity: boolean;
+}
+
+function EditorView({
+  swayCode,
+  solidityCode,
+  onSolidityCodeChange,
+  onSwayCodeChange,
+  toolchain,
+  setToolchain,
+  showSolidity,
+}: EditorViewProps) {
+  const isMobile = useIsMobile();
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: isMobile ? 'column' : 'row',
+        height: '50vh',
+        minHeight: '10vh',
+        maxHeight: '80vh',
+        position: 'relative',
+        resize: isMobile ? 'none' : 'vertical',
+        overflow: 'auto',
+      }}>
+      {showSolidity && (
+        <SolidityEditor code={solidityCode} onChange={onSolidityCodeChange} />
+      )}
+      <SwayEditor
+        code={swayCode}
+        onChange={onSwayCodeChange}
+        toolchain={toolchain}
+        setToolchain={setToolchain}
+      />
+    </div>
+  );
+}
+
+export default EditorView;