Invoke enhance

app/package.json

@@ -12,12 +12,16 @@
     "@types/react-dom": "^18.2.6",
     "bootstrap": "^5.3.0",
     "bootstrap-icons": "^1.10.5",
+    "highlight.js": "^11.8.0",
+    "@monaco-editor/react": "^4.5.1",
+    "node-fetch": "2.6.1",
+    "octokit": "^3.1.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.1",
-    "highlight.js": "^11.8.0",
     "react-highlight": "^0.15.0",
+    "react-monaco-editor": "^0.54.0",
+    "react-router-dom": "^6.14.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
@@ -61,8 +65,11 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-promise": "^6.1.1",
-    "prettier": "^2.8.8",
-    "@types/react-highlight": "^0.12.5"
+    "@types/node-fetch": "^2.6.4",
+    "prettier": "^2.8.8"
+  },
+  "browser": {
+    "fs": false
   },
   "homepage": "https://eigerco.github.io/nebula/"
 }

app/src/Editor.css

@@ -0,0 +1,8 @@
+.console {
+  background-color: #0d1117;
+  padding: 1rem;
+}
+
+.codelens-decoration {
+  --vscode-editorCodeLens-fontSize: 13px;
+}

app/src/Editor.tsx

@@ -1,21 +1,140 @@
 import React from 'react'
-import Highlight from 'react-highlight'
-import 'highlight.js/styles/github-dark.css'
-
-export function Editor({
-  contractTrait,
-  codeGen,
-  contractName,
-  author,
-  license,
-}: any) {
-  codeGen.generateHeader(author, license)
-  codeGen.generateContractCode(contractTrait, contractName)
-  const contractCode = codeGen.getCode()
-
-  return (
-    <div className="Editor">
-      <Highlight className="language-rust">{contractCode}</Highlight>
-    </div>
-  )
+import Button from 'react-bootstrap/Button'
+import Modal from 'react-bootstrap/Modal'
+import MonacoEditor from '@monaco-editor/react'
+import './Editor.css'
+import { ContractService } from './contractsources/contractservice'
+
+interface Props {
+  contractTrait: any
+  codeGen: any
+  contractName: any
+  author: any
+  license: any
+}
+
+export class Editor extends React.Component<Props> {
+  state = {
+    showInvokeModal: false,
+  }
+
+  modalBody = ''
+  contractCode = ''
+  monaco: any
+  editor: any
+
+  contractService = new ContractService()
+
+  editorDidMount = (ed: any, mon: any) => {
+    this.contractService
+      .readContracts()
+      .then(() => {
+        // force redraw editor
+        this.forceUpdate()
+      })
+      .catch(e => {
+        console.error(e)
+      })
+
+    this.monaco = mon
+    this.editor = ed
+    ed.focus()
+    this.updateInvokes(this)
+  }
+
+  private updateInvokes(outerThis: any) {
+    const commandId = (method: string, params: string) => {
+      return this.editor.addCommand(
+        0,
+        function () {
+          const contractName: string = outerThis.props.contractName
+          // services available in `ctx`
+          outerThis.modalBody = `soroban contract invoke \\
+    --wasm ${contractName}.wasm \\
+    --id 1 \\
+    -- \\
+    ${method} \\
+        ${params}`
+          outerThis.setState({ showInvokeModal: true })
+        },
+        ''
+      )
+    }
+    this.monaco.languages.registerCodeLensProvider('rust', {
+      provideCodeLenses: function (model: any, token: any) {
+        return outerThis.props.codeGen.getInvokes(commandId)
+      },
+      resolveCodeLens: function (model: any, codeLens: any, token: any) {
+        return codeLens
+      },
+    })
+  }
+
+  private handleInvokeModalClose(outerThis: any) {
+    outerThis.setState({ showInvokeModal: false })
+  }
+
+  generateContractCode() {
+    this.props.codeGen.generateHeader(this.props.author, this.props.license)
+    const traitLowerCase: string = this.props.contractTrait.toLowerCase()
+    const originalCode = this.contractService.getContractCode(traitLowerCase)
+    this.props.codeGen.generateContractCode(
+      originalCode,
+      this.props.contractName
+    )
+    this.contractCode = this.props.codeGen.getCode()
+  }
+
+  render() {
+    const options = {
+      selectOnLineNumbers: true,
+      readOnly: true,
+    }
+    this.generateContractCode()
+
+    return (
+      <div className="Editor">
+        <div
+          className="modal show"
+          style={{ display: 'block', position: 'initial' }}
+        >
+          <Modal
+            show={this.state.showInvokeModal}
+            onHide={() => {
+              this.handleInvokeModalClose(this)
+            }}
+          >
+            <Modal.Header closeButton>
+              <Modal.Title>Invoke command example</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              <pre className="console">
+                <code>{this.modalBody}</code>
+              </pre>
+            </Modal.Body>
+            <Modal.Footer>
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  this.handleInvokeModalClose(this)
+                }}
+              >
+                <i className="bi bi-x-circle"></i>
+                Close
+              </Button>
+            </Modal.Footer>
+          </Modal>
+        </div>
+        <MonacoEditor
+          width="100%"
+          height="90vh"
+          language="rust"
+          theme="vs-dark"
+          value={this.contractCode}
+          options={options}
+          onMount={this.editorDidMount}
+        />
+      </div>
+    )
+  }
 }

app/src/Toolbox.css

@@ -16,6 +16,7 @@
 
 .buttons {
   margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 .contract-menu {
@@ -26,22 +27,15 @@
   margin-top: 10px;
 }
 
+.input-group-text {
+  min-width: 100px;
+}
+
 .buttons button {
   margin-bottom: 5px;
   width: 160px;
 }
 
-.contract-params {
-  border: 1px solid #4e4e4e;
-  margin-bottom: 1em;
-  margin-top: 1em;
-  padding: 1em;
-}
-
-.contract-params span {
-  min-width: 150px;
-}
-
 .bi {
   margin-right: 5px;
 }

app/src/Toolbox.tsx

@@ -1,14 +1,11 @@
 import React from 'react'
 import Form from 'react-bootstrap/Form'
-import { ContractParams } from './contractparams/ContractParams'
 import './Toolbox.css'
 
 export function Toolbox({
   contractName,
   onContractNameChanged,
-  contractTrait,
   onContractTraitChanged,
-  updateParams,
   author,
   onAuthorChanged,
   license,
@@ -45,7 +42,29 @@ export function Toolbox({
           {/* <option disabled>NFT</option> */}
         </Form.Select>
       </div>
-      <div>
+      <div className="input-group mb-2">
+        <span className="input-group-text">Author</span>
+        <input
+          type="text"
+          className="form-control"
+          aria-label="License"
+          aria-describedby="basic-addon1"
+          value={author}
+          onChange={e => onAuthorChanged(e.target.value)}
+        />
+      </div>
+      <div className="input-group mb-2">
+        <span className="input-group-text">License</span>
+        <input
+          type="text"
+          className="form-control"
+          aria-label="License"
+          aria-describedby="basic-addon1"
+          value={license}
+          onChange={e => onLicenseChanged(e.target.value)}
+        />
+      </div>
+      <div className="buttons">
         <div className="row mt-1">
           <div className="col">
             <button
@@ -57,18 +76,6 @@ export function Toolbox({
               <i className="bi bi-clipboard"></i>Copy
             </button>
           </div>
-          <div className="col">
-            <button
-              type="button"
-              className="btn btn-secondary w-100"
-              onClick={e => handleClick('Invoke')}
-              title="Invoke"
-            >
-              <i className="bi bi-gear"></i>Invoke
-            </button>
-          </div>
-        </div>
-        <div className="row mt-1">
           <div className="col">
             <button
               type="button"
@@ -81,35 +88,6 @@ export function Toolbox({
           </div>
         </div>
       </div>
-      <label className="params">Init params:</label>
-      <div className="contract-params">
-        <ContractParams
-          contractTrait={contractTrait}
-          updateParams={updateParams}
-        />
-      </div>
-      <div className="input-group mb-2">
-        <span className="input-group-text">Author</span>
-        <input
-          type="text"
-          className="form-control"
-          aria-label="License"
-          aria-describedby="basic-addon1"
-          value={author}
-          onChange={e => onAuthorChanged(e.target.value)}
-        />
-      </div>
-      <div className="input-group mb-2">
-        <span className="input-group-text">License</span>
-        <input
-          type="text"
-          className="form-control"
-          aria-label="License"
-          aria-describedby="basic-addon1"
-          value={license}
-          onChange={e => onLicenseChanged(e.target.value)}
-        />
-      </div>
     </div>
   )
 }