resizeable

FuelLabs · Mar 15, 2024 · 482c748 · 482c748
1 parent c8db7d0
commit 482c748
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 78 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,4 +6,5 @@ target
 build
 node_modules
 tmp
+projects
 .vscode/*
diff --git a/README.md b/README.md
@@ -82,10 +82,10 @@ This will open http://localhost:3000 in your browser. By default, it will use th
 To test against the backend running locally, make this change in `app/src/constants.ts`:
 
 ```diff
--    export const SERVER_URI = 'https://api.sway-playground.org/compile';
--    // export const SERVER_URI = 'http://0.0.0.0:8080/compile';
-+    // export const SERVER_URI = 'https://api.sway-playground.org/compile';
-+    export 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

diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import SwayEditor from './features/editor/components/SwayEditor';
 import ActionToolbar from './features/toolbar/components/ActionToolbar';
 import LogView from './features/editor/components/LogView';
 import { useCompile } from './features/editor/hooks/useCompile';
@@ -13,8 +12,8 @@ import {
 import InteractionDrawer from './features/interact/components/InteractionDrawer';
 import { useLog } from './features/editor/hooks/useLog';
 import { Toolchain } from './features/editor/components/ToolchainDropdown';
-import SolidityEditor from './features/editor/components/SolidityEditor';
 import { useTranspile } from './features/editor/hooks/useTranspile';
+import EditorView from './features/editor/components/EditorView';
 
 const DRAWER_WIDTH = '40vw';
 
@@ -96,7 +95,13 @@ function App() {
     }
   }, [showSolidity, swayCode, solidityCode, setCodeToCompile, updateLog]);
 
-  useTranspile(codeToTranspile, setCodeToCompile, onSwayCodeChange, setError, updateLog);
+  useTranspile(
+    codeToTranspile,
+    setCodeToCompile,
+    onSwayCodeChange,
+    setError,
+    updateLog
+  );
   useCompile(codeToCompile, setError, setIsCompiled, updateLog, toolchain);
 
   return (
@@ -126,29 +131,15 @@ function App() {
           display: 'flex',
           flexDirection: 'column',
         }}>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            // TODO
-            // resize: 'vertical',
-            // overflow: 'auto'
-          }}>
-          {showSolidity && <div style={{ flex: 1, marginRight: '1rem' }}>
-            <SolidityEditor
-              code={solidityCode}
-              onChange={onSolidityCodeChange}
-            />
-          </div>}
-          <div style={{ flex: 1 }}>
-            <SwayEditor
-              code={swayCode}
-              onChange={onSwayCodeChange}
-              toolchain={toolchain}
-              setToolchain={setToolchain}
-            />
-          </div>
-        </div>
+        <EditorView
+          swayCode={swayCode}
+          onSwayCodeChange={onSwayCodeChange}
+          solidityCode={solidityCode}
+          onSolidityCodeChange={onSolidityCodeChange}
+          toolchain={toolchain}
+          setToolchain={setToolchain}
+          showSolidity={showSolidity}
+        />
         <LogView results={log} />
       </div>
       <InteractionDrawer

diff --git a/app/src/constants.ts b/app/src/constants.ts
@@ -1,8 +1,8 @@
 export const FUEL_GREEN = '#00f58c';
 
 // TODO: Determine the URL based on the NODE_ENV.
-export const SERVER_URI = 'https://api.sway-playground.org/compile';
-// export const SERVER_URI = 'http://0.0.0.0:8080/transpile';
+// 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;
 
@@ -32,14 +32,13 @@ impl TestContract for Contract {
     }
 }`;
 
-export const DEFAULT_SOLIDITY_CONTRACT = `// SPDX-License-Identifier: MIT
-pragma solidity ^0.8.24;
+export const DEFAULT_SOLIDITY_CONTRACT = `pragma solidity ^0.8.24;
 
 contract Counter {
-    uint256 public count;
+    uint64 public count;
 
     // Function to get the current count
-    function get_counter() public view returns (uint256) {
+    function get_counter() public view returns (uint64) {
         return count;
     }
 

diff --git a/app/src/features/editor/components/EditorView.tsx b/app/src/features/editor/components/EditorView.tsx
@@ -0,0 +1,50 @@
+import React, { useEffect, useRef } from 'react';
+import SolidityEditor from './SolidityEditor';
+import SwayEditor from './SwayEditor';
+import { Toolchain } from './ToolchainDropdown';
+
+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) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        height: '50vh',
+        minHeight: '10vh',
+        maxHeight: '80vh',
+        position: 'relative',
+        resize: 'vertical',
+        overflow: 'auto',
+      }}>
+      {showSolidity && (
+        <SolidityEditor code={solidityCode} onChange={onSolidityCodeChange} />
+      )}
+      <SwayEditor
+        code={swayCode}
+        onChange={onSwayCodeChange}
+        toolchain={toolchain}
+        setToolchain={setToolchain}
+      />
+    </div>
+  );
+}
+
+export default EditorView;
diff --git a/app/src/features/editor/components/SolidityEditor.tsx b/app/src/features/editor/components/SolidityEditor.tsx
@@ -15,26 +15,22 @@ export interface SolidityEditorProps {
 
 function SolidityEditor({ code, onChange }: SolidityEditorProps) {
   return (
-    <div>
+    <StyledBorder style={{ flex: 1, marginRight: '1rem' }}>
       <ActionOverlay handleReset={() => onChange(DEFAULT_SOLIDITY_CONTRACT)} />
-      <StyledBorder>
-        <AceEditor
-          style={{
-            width: '100%',
-            resize: 'vertical',
-            minHeight: '10vh',
-            maxHeight: '80vh',
-          }}
-          mode='solidity'
-          theme='chrome'
-          name='editor'
-          fontSize='14px'
-          onChange={onChange}
-          value={code}
-          editorProps={{ $blockScrolling: true }}
-        />
-      </StyledBorder>
-    </div>
+      <AceEditor
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+        mode='solidity'
+        theme='chrome'
+        name='editor'
+        fontSize='14px'
+        onChange={onChange}
+        value={code}
+        editorProps={{ $blockScrolling: true }}
+      />
+    </StyledBorder>
   );
 }
 

diff --git a/app/src/features/editor/components/SwayEditor.tsx b/app/src/features/editor/components/SwayEditor.tsx
@@ -15,32 +15,33 @@ export interface SwayEditorProps {
   setToolchain: (toolchain: Toolchain) => void;
 }
 
-function SwayEditor({ code, onChange, toolchain, setToolchain }: SwayEditorProps) {
+function SwayEditor({
+  code,
+  onChange,
+  toolchain,
+  setToolchain,
+}: SwayEditorProps) {
   return (
-    <div>
+    <StyledBorder style={{ flex: 1 }}>
       <ActionOverlay
         handleReset={() => onChange(DEFAULT_SWAY_CONTRACT)}
         toolchain={toolchain}
         setToolchain={setToolchain}
       />
-      <StyledBorder>
-        <AceEditor
-          style={{
-            width: '100%',
-            resize: 'vertical',
-            minHeight: '10vh',
-            maxHeight: '80vh',
-          }}
-          mode='rust'
-          theme='chrome'
-          name='editor'
-          fontSize='14px'
-          onChange={onChange}
-          value={code}
-          editorProps={{ $blockScrolling: true }}
-        />
-      </StyledBorder>
-    </div>
+      <AceEditor
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+        mode='rust'
+        theme='chrome'
+        name='editor'
+        fontSize='14px'
+        onChange={onChange}
+        value={code}
+        editorProps={{ $blockScrolling: true }}
+      />
+    </StyledBorder>
   );
 }
 

diff --git a/app/src/features/editor/hooks/useCompile.tsx b/app/src/features/editor/hooks/useCompile.tsx
@@ -34,7 +34,7 @@ export function useCompile(
   onError: (error: string | undefined) => void,
   setIsCompiled: (isCompiled: boolean) => void,
   setResults: (entry: React.ReactElement[]) => void,
-  toolchain: Toolchain,
+  toolchain: Toolchain
 ) {
   const [serverError, setServerError] = useState<boolean>(false);
   const [version, setVersion] = useState<string | undefined>();
@@ -50,7 +50,7 @@ export function useCompile(
     }
     setResults([<>Compiling Sway contract...</>]);
 
-    const request = new Request(SERVER_URI, {
+    const request = new Request(`${SERVER_URI}/compile`, {
       method: 'POST',
       body: JSON.stringify({
         contract: code,

diff --git a/app/src/features/editor/hooks/useTranspile.tsx b/app/src/features/editor/hooks/useTranspile.tsx
@@ -23,7 +23,7 @@ export function useTranspile(
       </>,
     ]);
 
-    const request = new Request(SERVER_URI, {
+    const request = new Request(`${SERVER_URI}/transpile`, {
       method: 'POST',
       body: JSON.stringify({
         contract: code,