From 81023016cb7f256d95e8468f4be2b0c42891bb4d Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Sun, 10 Jul 2022 13:32:45 +0200
Subject: [PATCH] add vyper

---
 apps/vyper/.babelrc                           |  13 +
 apps/vyper/.browserslistrc                    |  16 +
 apps/vyper/.eslintrc                          |  18 +
 apps/vyper/src/app/app.css                    | 124 +++++
 apps/vyper/src/app/app.tsx                    | 118 +++++
 .../src/app/components/CompilerButton.tsx     |  75 +++
 apps/vyper/src/app/components/LocalUrl.tsx    |  36 ++
 apps/vyper/src/app/components/VyperResult.tsx |  70 +++
 apps/vyper/src/app/components/WarnRemote.tsx  |  19 +
 apps/vyper/src/app/examples/ballot.tsx        | 161 ++++++
 apps/vyper/src/app/logo.svg                   |  14 +
 apps/vyper/src/app/star.svg                   |  11 +
 apps/vyper/src/app/utils/compiler.tsx         | 139 +++++
 apps/vyper/src/app/utils/index.ts             |  12 +
 apps/vyper/src/app/utils/remix-client.tsx     |  71 +++
 apps/vyper/src/assets/.gitkeep                |   0
 .../src/environments/environment.prod.ts      |   3 +
 apps/vyper/src/environments/environment.ts    |   6 +
 apps/vyper/src/favicon.ico                    | Bin 0 -> 15086 bytes
 apps/vyper/src/index.html                     |  14 +
 apps/vyper/src/main.tsx                       |   7 +
 apps/vyper/src/polyfills.ts                   |   7 +
 apps/vyper/src/styles.css                     |   1 +
 apps/vyper/tsconfig.app.json                  |  14 +
 apps/vyper/tsconfig.json                      |  20 +
 .../copy-to-clipboard/copy-to-clipboard.tsx   |   2 +-
 nx.json                                       |  44 +-
 package.json                                  |   1 +
 workspace.json                                | 498 ++++++++++++++----
 yarn.lock                                     | 137 ++++-
 30 files changed, 1522 insertions(+), 129 deletions(-)
 create mode 100644 apps/vyper/.babelrc
 create mode 100644 apps/vyper/.browserslistrc
 create mode 100644 apps/vyper/.eslintrc
 create mode 100644 apps/vyper/src/app/app.css
 create mode 100644 apps/vyper/src/app/app.tsx
 create mode 100644 apps/vyper/src/app/components/CompilerButton.tsx
 create mode 100644 apps/vyper/src/app/components/LocalUrl.tsx
 create mode 100644 apps/vyper/src/app/components/VyperResult.tsx
 create mode 100644 apps/vyper/src/app/components/WarnRemote.tsx
 create mode 100644 apps/vyper/src/app/examples/ballot.tsx
 create mode 100644 apps/vyper/src/app/logo.svg
 create mode 100644 apps/vyper/src/app/star.svg
 create mode 100644 apps/vyper/src/app/utils/compiler.tsx
 create mode 100644 apps/vyper/src/app/utils/index.ts
 create mode 100644 apps/vyper/src/app/utils/remix-client.tsx
 create mode 100644 apps/vyper/src/assets/.gitkeep
 create mode 100644 apps/vyper/src/environments/environment.prod.ts
 create mode 100644 apps/vyper/src/environments/environment.ts
 create mode 100644 apps/vyper/src/favicon.ico
 create mode 100644 apps/vyper/src/index.html
 create mode 100644 apps/vyper/src/main.tsx
 create mode 100644 apps/vyper/src/polyfills.ts
 create mode 100644 apps/vyper/src/styles.css
 create mode 100644 apps/vyper/tsconfig.app.json
 create mode 100644 apps/vyper/tsconfig.json

diff --git a/apps/vyper/.babelrc b/apps/vyper/.babelrc
new file mode 100644
index 0000000000..b1fc975456
--- /dev/null
+++ b/apps/vyper/.babelrc
@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel", {
+        "runtime": "automatic"
+        
+      }
+    ]
+  ],
+  "plugins": [
+    
+  ]
+}
diff --git a/apps/vyper/.browserslistrc b/apps/vyper/.browserslistrc
new file mode 100644
index 0000000000..f1d12df4fa
--- /dev/null
+++ b/apps/vyper/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by:
+# 1. autoprefixer to adjust CSS to support the below specified browsers
+# 2. babel preset-env to adjust included polyfills
+#
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# If you need to support different browsers in production, you may tweak the list below.
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major version
+last 2 iOS major versions
+Firefox ESR
+not IE 9-11 # For IE 9-11 support, remove 'not'.
\ No newline at end of file
diff --git a/apps/vyper/.eslintrc b/apps/vyper/.eslintrc
new file mode 100644
index 0000000000..b7d498eea1
--- /dev/null
+++ b/apps/vyper/.eslintrc
@@ -0,0 +1,18 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "../../.eslintrc.json",
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 11,
+        "sourceType": "module"
+    },
+    "rules": {
+        "standard/no-callback-literal": "off"
+    }
+} 
diff --git a/apps/vyper/src/app/app.css b/apps/vyper/src/app/app.css
new file mode 100644
index 0000000000..978406926a
--- /dev/null
+++ b/apps/vyper/src/app/app.css
@@ -0,0 +1,124 @@
+* {
+  box-sizing: border-box;
+}
+html, body, #root, main {
+  height: 100%;
+  margin: 0;
+}
+
+#vyper-plugin header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  padding: 5px 15px;
+}
+
+#vyper-plugin header a,
+#vyper-plugin header .title {
+  display: flex;
+  height: 60%;
+}
+
+#vyper-plugin header svg,
+#vyper-plugin header img {
+  width: auto;
+  height: 100%;
+}
+
+#vyper-plugin section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: calc(100% - 50px);
+}
+
+.btn-group-toggle {
+  width: 90%;
+  text-transform: uppercase;
+  margin: 10px 0;
+}
+
+.btn-group-toggle .btn {
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+
+#local-url {
+  width: 90%;
+}
+
+#compile-btn {
+  width: 90%;
+}
+
+#compile-btn * {
+  width: 100%;
+}
+
+#result {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding-top: 10px;
+  overflow: hidden;
+}
+
+#result.error {
+  justify-content: flex-start;
+}
+#result.error svg {
+  width: 40px;
+  height: 40px;
+  margin: 10px;
+}
+
+#result nav {
+  width: 100%;
+  flex-wrap: nowrap;
+  justify-content: space-evenly;
+}
+
+
+#result nav a {
+  padding: 0.5rem 1rem;
+  font-size: 0.8rem;
+}
+
+#result .tab-content {
+  flex: 1;
+  width: 100%;
+  padding: 15px;
+  overflow: auto;
+}
+
+#result .tab-pane.active {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+#result .copy {
+  padding: 5x;
+  font-size: 0.8rem;
+  margin: 10px;
+}
+
+#result p {
+  text-align: center;
+  width: 100% !important;
+}
+
+#result .react-json-view {
+  overflow-y: auto;
+}
+
+#result textarea {
+  border: none;
+  height: 100%;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
new file mode 100644
index 0000000000..2b06263214
--- /dev/null
+++ b/apps/vyper/src/app/app.tsx
@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from 'react'
+
+import { VyperCompilationOutput, remixClient } from './utils'
+import { CompilationResult } from '@remixproject/plugin-api'
+
+// Components
+import CompilerButton from './components/CompilerButton'
+import WarnRemote from './components/WarnRemote'
+import VyperResult from './components/VyperResult'
+import LocalUrlInput from './components/LocalUrl'
+import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'
+import ToggleButton from 'react-bootstrap/ToggleButton'
+
+import vyperLogo from './logo.svg'
+import './app.css'
+
+interface AppState {
+  status: 'idle' | 'inProgress'
+  environment: 'remote' | 'local'
+  compilationResult?: CompilationResult
+  localUrl: string
+}
+
+interface OutputMap {
+  [fileName: string]: VyperCompilationOutput
+}
+
+const App: React.FC = () => {
+  const [contract, setContract] = useState<string>()
+  const [output, setOutput] = useState<OutputMap>({})
+  const [state, setState] = useState<AppState>({
+    status: 'idle',
+    environment: 'local',
+    localUrl: 'http://localhost:8000/compile'
+  })
+
+  useEffect(() => {
+    async function start() {
+      try {
+        await remixClient.loaded()
+        remixClient.onFileChange(name => setContract(name))
+        const name = await remixClient.getContractName()
+        setContract(name)
+      } catch (err) {
+        console.log(err)
+      }
+    }
+    start()
+  }, [])
+
+  /** Update the environment state value */
+  function setEnvironment(environment: 'local' | 'remote') {
+    setState({ ...state, environment })
+  }
+
+  function setLocalUrl(url: string) {
+    setState({ ...state, localUrl: url })
+  }
+
+  function compilerUrl() {
+    return state.environment === 'remote'
+      ? 'https://vyper.live/compile'
+      : state.localUrl
+  }
+
+  return (
+    <main id="vyper-plugin">
+      <header className="bg-light">
+        <div className="title">
+          <img src={vyperLogo} alt="Vyper logo" />
+          <h4>yper Compiler</h4>
+        </div>
+        <a
+          rel="noopener noreferrer"
+          href="https://github.com/GrandSchtroumpf/vyper-remix"
+          target="_blank"
+        >
+        <i className="fab fa-github"></i>
+        </a>
+      </header>
+      <section>
+        <ToggleButtonGroup
+          name="remote"
+          onChange={setEnvironment}
+          type="radio"
+          value={state.environment}
+        >
+          <ToggleButton variant="secondary" name="remote" value="remote">
+            Remote Compiler
+          </ToggleButton>
+          <ToggleButton variant="secondary" name="local" value="local">
+            Local Compiler
+          </ToggleButton>
+        </ToggleButtonGroup>
+        <LocalUrlInput
+          url={state.localUrl}
+          setUrl={setLocalUrl}
+          environment={state.environment}
+        />
+        <WarnRemote environment={state.environment} />
+        <div id="compile-btn">
+          <CompilerButton
+            compilerUrl={compilerUrl()}
+            contract={contract}
+            setOutput={(name, update) =>
+              setOutput({ ...output, [name]: update })
+            }
+          />
+        </div>
+        <article id="result">
+          <VyperResult output={contract ? output[contract] : undefined} />
+        </article>
+      </section>
+    </main>
+  )
+}
+
+export default App
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
new file mode 100644
index 0000000000..8c59abf3cb
--- /dev/null
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -0,0 +1,75 @@
+import React from 'react'
+import {
+  isVyper,
+  compile,
+  toStandardOutput,
+  VyperCompilationOutput,
+  isCompilationError,
+  remixClient
+} from '../utils'
+import Button from 'react-bootstrap/Button'
+
+interface Props {
+  compilerUrl: string
+  contract?: string,
+  setOutput: (name: string, output: VyperCompilationOutput) => void
+}
+
+function CompilerButton({ contract, setOutput, compilerUrl }: Props) {
+
+  if (!contract || !contract) {
+    return <Button disabled>No contract selected</Button>
+  }
+
+  if (!isVyper(contract)) {
+    return <Button disabled>Not a vyper contract</Button>
+  }
+
+  /** Compile a Contract */
+  async function compileContract() {
+    try {
+      const _contract = await remixClient.getContract()
+      remixClient.changeStatus({
+        key: 'loading',
+        type: 'info',
+        title: 'Compiling'
+      })
+      const output = await compile(compilerUrl, _contract)
+      setOutput(_contract.name, output)
+      // ERROR
+      if (isCompilationError(output)) {
+        const line = output.line
+        const lineColumnPos = {
+          start: { line: line - 1 },
+          end: { line: line - 1 }
+        }
+        remixClient.highlight(lineColumnPos as any, _contract.name, '#e0b4b4')
+        throw new Error(output.message)
+      }
+      // SUCCESS
+      remixClient.discardHighlight()
+      remixClient.changeStatus({
+        key: 'succeed',
+        type: 'success',
+        title: 'succeed'
+      })
+      const data = toStandardOutput(_contract.name, output)
+      remixClient.compilationFinish(_contract.name, _contract.content, data)
+    } catch (err: any) {
+      remixClient.changeStatus({
+        key: 'failed',
+        type: 'error',
+        title: err.message
+      })
+      console.error(err)
+    }
+  }
+
+  return (
+    <Button onClick={compileContract} variant="primary">
+      Compile {contract}
+    </Button>
+  )
+}
+
+export default CompilerButton
diff --git a/apps/vyper/src/app/components/LocalUrl.tsx b/apps/vyper/src/app/components/LocalUrl.tsx
new file mode 100644
index 0000000000..3659b4094e
--- /dev/null
+++ b/apps/vyper/src/app/components/LocalUrl.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import Form from 'react-bootstrap/Form'
+
+interface Props {
+  url: string
+  setUrl: (url: string) => void,
+  environment: 'remote' | 'local'
+}
+
+function LocalUrlInput({ url, setUrl, environment }: Props) {
+
+  if (environment === 'remote') {
+    return <></>
+  }
+
+  function updateUrl(event: React.FocusEvent<HTMLInputElement>) {
+    setUrl(event.target.value)
+  }
+
+  return (
+  <Form id="local-url">
+    <Form.Group controlId="localUrl">
+      <Form.Label>Local Compiler Url</Form.Label>
+      <Form.Control onBlur={updateUrl}
+        defaultValue={url}
+        type="email"
+        placeholder="eg http://localhost:8000/compile" />
+      <Form.Text className="text-muted">
+        The url to your local compiler
+      </Form.Text>
+    </Form.Group>
+  </Form>
+  )
+}
+
+export default LocalUrlInput;
\ No newline at end of file
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
new file mode 100644
index 0000000000..b6fd49b69f
--- /dev/null
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import {
+  VyperCompilationResult,
+  VyperCompilationOutput,
+  isCompilationError,
+  remixClient
+} from '../utils';
+import Tabs from 'react-bootstrap/Tabs'
+import Tab from 'react-bootstrap/Tab'
+import { Ballot } from '../examples/ballot';
+import Button from 'react-bootstrap/Button';
+import JSONTree from 'react-json-view'
+import { CopyToClipboard } from '@remix-ui/clipboard'
+
+
+interface VyperResultProps {
+  output?: VyperCompilationOutput;
+}
+
+function VyperResult({ output }: VyperResultProps) {
+  const [ active, setActive ] = useState<keyof VyperCompilationResult>('abi');
+  
+  if (!output) return (
+    <div id="result">
+      <p>No contract compiled yet.</p>
+      <Button variant="info" onClick={() => remixClient.loadContract(Ballot)}>
+        Create Ballot.vy example
+      </Button>
+    </div>
+  )
+
+  if (isCompilationError(output)) {
+    return (
+    <div id="result" className="error">
+      <i className="fas fa-exclamation-circle text-danger"></i>
+      <p className="alert alert-danger">{output.message}</p>
+    </div>)
+  }
+
+  return (
+    <Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)}>
+      <Tab eventKey="abi" title="ABI">
+        <CopyToClipboard getContent={() => JSON.stringify(output.abi)}>
+          <Button variant="info" className="copy">Copy ABI</Button>
+        </CopyToClipboard>
+        <JSONTree src={output.abi} />
+      </Tab>
+      <Tab eventKey="bytecode" title="Bytecode">
+        <CopyToClipboard getContent={() => output.bytecode}>
+          <Button variant="info" className="copy">Copy Bytecode</Button>
+        </CopyToClipboard>
+        <textarea defaultValue={output.bytecode}></textarea>
+      </Tab>
+      <Tab eventKey="bytecode_runtime" title="Runtime Bytecode">
+        <CopyToClipboard getContent={() => output.bytecode_runtime}>
+          <Button variant="info" className="copy">Copy Runtime Bytecode</Button>
+        </CopyToClipboard>
+        <textarea defaultValue={output.bytecode_runtime}></textarea>
+      </Tab>
+      <Tab eventKey="ir" title="LLL">
+        <CopyToClipboard getContent={() => output.ir}>
+          <Button variant="info" className="copy">Copy LLL Code</Button>
+        </CopyToClipboard>
+        <textarea defaultValue={output.ir}></textarea>
+      </Tab>
+    </Tabs>
+  );
+}
+
+export default VyperResult;
\ No newline at end of file
diff --git a/apps/vyper/src/app/components/WarnRemote.tsx b/apps/vyper/src/app/components/WarnRemote.tsx
new file mode 100644
index 0000000000..3ece01895b
--- /dev/null
+++ b/apps/vyper/src/app/components/WarnRemote.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+interface Props {
+  environment: 'remote' | 'local'
+}
+
+function WarnRemoteLabel({ environment }: Props) {
+
+  if (environment === 'local') {
+    return <></>
+  }
+
+  return (
+    <div className="alert alert-warning">It is really important to not use the remote compiler for production environment.
+        Please only use it for testing purpose and prefer to using a local compiler for production like environment.</div>
+  )
+}
+
+export default WarnRemoteLabel;
\ No newline at end of file
diff --git a/apps/vyper/src/app/examples/ballot.tsx b/apps/vyper/src/app/examples/ballot.tsx
new file mode 100644
index 0000000000..4b368c6fda
--- /dev/null
+++ b/apps/vyper/src/app/examples/ballot.tsx
@@ -0,0 +1,161 @@
+export const Ballot = {
+    name: 'browser/ballot.vy',
+    content: `# Voting with delegation.
+  
+  # Information about voters
+  struct Voter:
+    # weight is accumulated by delegation
+    weight: int128
+    # if true, that person already voted (which includes voting by delegating)
+    voted: bool
+    # person delegated to
+    delegate: address
+    # index of the voted proposal, which is not meaningful unless 'voted' is True.
+    vote: int128
+  
+  # Users can create proposals
+  struct Proposal:
+    # short name (up to 32 bytes)
+    name: bytes32
+    # number of accumulated votes
+    voteCount: int128
+  
+  voters: public(map(address, Voter))
+  proposals: public(map(int128, Proposal))
+  voterCount: public(int128)
+  chairperson: public(address)
+  int128Proposals: public(int128)
+  
+  
+  @public
+  @constant
+  def delegated(addr: address) -> bool:
+    return self.voters[addr].delegate != ZERO_ADDRESS
+  
+  
+  @public
+  @constant
+  def directlyVoted(addr: address) -> bool:
+    return self.voters[addr].voted and (self.voters[addr].delegate == ZERO_ADDRESS)
+  
+  
+  # Setup global variables
+  @public
+  def __init__(_proposalNames: bytes32[2]):
+    self.chairperson = msg.sender
+    self.voterCount = 0
+    for i in range(2):
+        self.proposals[i] = Proposal({
+            name: _proposalNames[i],
+            voteCount: 0
+        })
+        self.int128Proposals += 1
+  
+  # Give a 'voter' the right to vote on this ballot.
+  # This may only be called by the 'chairperson'.
+  @public
+  def giveRightToVote(voter: address):
+    # Throws if the sender is not the chairperson.
+    assert msg.sender == self.chairperson
+    # Throws if the voter has already voted.
+    assert not self.voters[voter].voted
+    # Throws if the voter's voting weight isn't 0.
+    assert self.voters[voter].weight == 0
+    self.voters[voter].weight = 1
+    self.voterCount += 1
+  
+  # Used by 'delegate' below, and can be called by anyone.
+  @public
+  def forwardWeight(delegate_with_weight_to_forward: address):
+    assert self.delegated(delegate_with_weight_to_forward)
+    # Throw if there is nothing to do:
+    assert self.voters[delegate_with_weight_to_forward].weight > 0
+  
+    target: address = self.voters[delegate_with_weight_to_forward].delegate
+    for i in range(4):
+        if self.delegated(target):
+            target = self.voters[target].delegate
+            # The following effectively detects cycles of length <= 5,
+            # in which the delegation is given back to the delegator.
+            # This could be done for any int128ber of loops,
+            # or even infinitely with a while loop.
+            # However, cycles aren't actually problematic for correctness;
+            # they just result in spoiled votes.
+            # So, in the production version, this should instead be
+            # the responsibility of the contract's client, and this
+            # check should be removed.
+            assert target != delegate_with_weight_to_forward
+        else:
+            # Weight will be moved to someone who directly voted or
+            # hasn't voted.
+            break
+  
+    weight_to_forward: int128 = self.voters[delegate_with_weight_to_forward].weight
+    self.voters[delegate_with_weight_to_forward].weight = 0
+    self.voters[target].weight += weight_to_forward
+  
+    if self.directlyVoted(target):
+        self.proposals[self.voters[target].vote].voteCount += weight_to_forward
+        self.voters[target].weight = 0
+  
+    # To reiterate: if target is also a delegate, this function will need
+    # to be called again, similarly to as above.
+  
+  # Delegate your vote to the voter 'to'.
+  @public
+  def delegate(to: address):
+    # Throws if the sender has already voted
+    assert not self.voters[msg.sender].voted
+    # Throws if the sender tries to delegate their vote to themselves or to
+    # the default address value of 0x0000000000000000000000000000000000000000
+    # (the latter might not be problematic, but I don't want to think about it).
+    assert to != msg.sender
+    assert to != ZERO_ADDRESS
+  
+    self.voters[msg.sender].voted = True
+    self.voters[msg.sender].delegate = to
+  
+    # This call will throw if and only if this delegation would cause a loop
+        # of length <= 5 that ends up delegating back to the delegator.
+    self.forwardWeight(msg.sender)
+  
+  # Give your vote (including votes delegated to you)
+  # to proposal 'proposals[proposal].name'.
+  @public
+  def vote(proposal: int128):
+    # can't vote twice
+    assert not self.voters[msg.sender].voted
+    # can only vote on legitimate proposals
+    assert proposal < self.int128Proposals
+  
+    self.voters[msg.sender].vote = proposal
+    self.voters[msg.sender].voted = True
+  
+    # transfer msg.sender's weight to proposal
+    self.proposals[proposal].voteCount += self.voters[msg.sender].weight
+    self.voters[msg.sender].weight = 0
+  
+  # Computes the winning proposal taking all
+  # previous votes into account.
+  @public
+  @constant
+  def winningProposal() -> int128:
+    winning_vote_count: int128 = 0
+    winning_proposal: int128 = 0
+    for i in range(2):
+        if self.proposals[i].voteCount > winning_vote_count:
+            winning_vote_count = self.proposals[i].voteCount
+            winning_proposal = i
+    return winning_proposal
+  
+  # Calls winningProposal() function to get the index
+  # of the winner contained in the proposals array and then
+  # returns the name of the winner
+  @public
+  @constant
+  def winnerName() -> bytes32:
+    return self.proposals[self.winningProposal()].name
+  
+  `
+  }
+  
\ No newline at end of file
diff --git a/apps/vyper/src/app/logo.svg b/apps/vyper/src/app/logo.svg
new file mode 100644
index 0000000000..78302e19f4
--- /dev/null
+++ b/apps/vyper/src/app/logo.svg
@@ -0,0 +1,14 @@
+<svg id="Flat_Logo" data-name="Flat Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 1773.62">
+  <title>vyper-logo-flat</title>
+  /*add logo description for screen readers*/
+  <desc>The vyper logo, consists of a letter V superimposed on the letter A, in shades of gray, black and white.</desc>
+  <polyline points="1024 886.81 768 1330.22 1024 1773.62 1280 1330.22 1024 886.81" style="fill:#333"/>
+  <polyline points="1280 443.41 1024 886.81 1280 1330.22 1536 886.81 1280 443.41" style="fill:#666"/>
+  <polyline points="768 443.41 512 886.81 768 1330.22 1024 886.81 768 443.41" style="fill:#666"/>
+  <polyline points="1536 0 1280 443.41 1536 886.81 1792 443.41 1536 0" style="fill:#8c8c8c"/>
+  <polyline points="1152 221.7 896 221.7 768 443.41 1024 886.81 1280 443.41 1152 221.7" style="fill:#8c8c8c"/>
+  <polyline points="512 0 256 443.41 512 886.81 768 443.41 512 0" style="fill:#8c8c8c"/>
+  <polyline points="2048 0 1536 0 1792 443.4 2048 0" style="fill:#b2b2b2"/>
+  <polyline points="512 0 0 0 256 443.4 512 0" style="fill:#b2b2b2"/>
+  /*Author: @yudetamago, last update: @evertonmelo*/
+</svg>
diff --git a/apps/vyper/src/app/star.svg b/apps/vyper/src/app/star.svg
new file mode 100644
index 0000000000..901053d385
--- /dev/null
+++ b/apps/vyper/src/app/star.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+        className="material-icons"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+>
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
+</svg>
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
new file mode 100644
index 0000000000..ebc117dba1
--- /dev/null
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -0,0 +1,139 @@
+import { CompilationResult, ABIDescription } from "@remixproject/plugin-api";
+
+export interface Contract {
+  name: string;
+  content: string;
+}
+
+export interface VyperCompilationResult {
+  status: 'success',
+  bytecode: string,
+  bytecode_runtime: string,
+  abi: ABIDescription[],
+  ir: string,
+  method_identifiers: {
+    [method: string]: string
+  }
+}
+
+export interface VyperCompilationError {
+  status: 'failed'
+  column: number
+  line: number
+  message: string
+}
+
+export type VyperCompilationOutput = VyperCompilationResult | VyperCompilationError
+
+/** Check if the output is an error */
+export function isCompilationError(output: VyperCompilationOutput): output is VyperCompilationError {
+  return output.status === 'failed'
+}
+
+/**
+ * Compile the a contract
+ * @param url The url of the compiler 
+ * @param contract The name and content of the contract
+ */
+export async function compile(url: string, contract: Contract): Promise<VyperCompilationOutput> {
+  if (!contract.name) {
+    throw new Error('Set your Vyper contract file.')
+  }
+  const extension = contract.name.split('.')[1]
+  if (extension !== 'vy') {
+    throw new Error('Use extension .vy for Vyper.')
+  }
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ code: contract.content })
+  })
+
+  if (response.status === 404) {
+    throw new Error(`Vyper compiler not found at "${url}".`)
+  }
+  /*if (response.status === 400) {
+    throw new Error(`Vyper compilation failed: ${response.statusText}`)
+  }*/
+  return response.json()
+}
+
+/**
+ * Transform Vyper Output to Solidity-like Compiler output
+ * @param name Name of the contract file
+ * @param compilationResult Result returned by the compiler
+ */
+export function toStandardOutput(fileName: string, compilationResult: VyperCompilationResult): CompilationResult {
+  const contractName = fileName.split('/').slice(-1)[0].split('.')[0];
+  const methodIdentifiers = JSON.parse(JSON.stringify(compilationResult['method_identifiers']).replace(/0x/g,''));
+  return {
+    sources: {
+      [fileName]: {
+        id: 1,
+        ast: {} as any,
+        legacyAST: {} as any
+      }
+    },
+    contracts: {
+      [fileName]: {
+        // If the language used has no contract names, this field should equal to an empty string
+        [contractName]: {
+          // The Ethereum Contract ABI. If empty, it is represented as an empty array.
+          // See https://github.com/ethereum/wiki/wiki/Ethereum-Contract-ABI
+          abi: compilationResult['abi'],
+          evm: {
+            bytecode: {
+              linkReferences: {},
+              object: compilationResult['bytecode'].replace('0x',''),
+              opcodes: ""
+            },
+            deployedBytecode: {
+              linkReferences: {},
+              object: compilationResult['bytecode_runtime'].replace('0x',''),
+              opcodes: ""
+            },
+            methodIdentifiers: methodIdentifiers
+          }
+        }
+      } as any
+    }
+  };
+}
+
+
+/*
+export function createCompilationResultMessage(name: string, result: any) {
+  if(result.status == 'success') {
+    return {
+      bytecode: this.state.compilationResult['bytecode'],
+      bytecode_runtime: this.state.compilationResult['bytecode_runtime'],
+      abi: JSON.stringify(this.state.compilationResult['abi'], null , "\t"),
+      ir: this.state.compilationResult['ir']
+    }
+  } else if(result.status == 'failed' && result.column && result.line) {
+    const header = `${name}:${result.line}:${result.column}`
+    const body = this.state.compilationResult.message.split(/\r\n|\r|\n/)
+    const arr = [header].concat(body).join("\n")
+    return {
+      bytecode: arr,
+      bytecode_runtime: arr,
+      abi: arr,
+      ir: arr
+    }
+  } else if(result.status == 'failed') {
+    const message = this.state.compilationResult.message
+    return {
+      bytecode: message,
+      bytecode_runtime: message,
+      abi: message,
+      ir: message
+    }
+  }
+  return {
+    bytecode: "",
+    bytecode_runtime: "",
+    abi: "",
+    ir: ""
+  }
+}
+*/
\ No newline at end of file
diff --git a/apps/vyper/src/app/utils/index.ts b/apps/vyper/src/app/utils/index.ts
new file mode 100644
index 0000000000..cb094b5d7b
--- /dev/null
+++ b/apps/vyper/src/app/utils/index.ts
@@ -0,0 +1,12 @@
+export * from './compiler'
+export * from './remix-client'
+
+export function contractName(fileName: string): string {
+  const parts = fileName.split('/')
+  return parts[parts.length - 1]
+}
+
+export function isVyper(name: string): boolean {
+  const parts = name.split('.')
+  return parts[parts.length - 1] === 'vy'
+}
\ No newline at end of file
diff --git a/apps/vyper/src/app/utils/remix-client.tsx b/apps/vyper/src/app/utils/remix-client.tsx
new file mode 100644
index 0000000000..080ba64a75
--- /dev/null
+++ b/apps/vyper/src/app/utils/remix-client.tsx
@@ -0,0 +1,71 @@
+import { HighlightPosition, CompilationResult, RemixApi } from '@remixproject/plugin-api';
+import { Api, Status } from '@remixproject/plugin-utils';
+import { createClient } from '@remixproject/plugin-webview'
+import { PluginClient } from '@remixproject/plugin';
+import { Contract } from './compiler';
+
+export class RemixClient extends PluginClient {
+  private client = createClient<Api, Readonly<RemixApi>>(this);
+
+  loaded() {
+    return this.client.onload()
+  }
+
+  /** Emit an event when file changed */
+  async onFileChange(cb: (contract: string) => any) {
+    this.client.on('fileManager', 'currentFileChanged', async (name: string) => {
+      if (!name) return
+      cb(name)
+    })
+  }
+
+  /** Load Ballot contract example into the file manager */
+  async loadContract({name, content}: Contract) {
+    try {
+      await this.client.call('fileManager', 'setFile', name, content)
+      await this.client.call('fileManager', 'switchFile', name)
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  /** Update the status of the plugin in remix */
+  changeStatus(status: Status) {
+    this.client.emit('statusChanged', status);
+  }
+
+  /** Highlight a part of the editor */
+  highlight(lineColumnPos: HighlightPosition, name: string, color: string) {
+    return this.client.call('editor', 'highlight', lineColumnPos, name, color)
+  }
+
+  /** Remove current Hightlight */
+  discardHighlight() {
+    return this.client.call('editor', 'discardHighlight')
+  }
+
+  /** Get the name of the current contract */
+  async getContractName(): Promise<string> {
+    await this.client.onload()
+    return this.client.call('fileManager', 'getCurrentFile')
+  }
+
+  /** Get the current contract file */
+  async getContract(): Promise<Contract> {
+    const name = await this.getContractName()
+    if (!name) throw new Error('No contract selected yet')
+    const content = await this.client.call('fileManager', 'getFile', name)
+    return {
+      name,
+      content,
+    }
+  }
+
+  /** Emit an event to Remix with compilation result */
+  compilationFinish(title: string, content: string, data: CompilationResult) {
+    this.client.emit('compilationFinished', title, content, 'vyper', data);
+  }
+}
+
+export const remixClient = new RemixClient()
+// export const RemixClientContext = React.createContext(new RemixClient())
\ No newline at end of file
diff --git a/apps/vyper/src/assets/.gitkeep b/apps/vyper/src/assets/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/vyper/src/environments/environment.prod.ts b/apps/vyper/src/environments/environment.prod.ts
new file mode 100644
index 0000000000..3612073bc3
--- /dev/null
+++ b/apps/vyper/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/apps/vyper/src/environments/environment.ts b/apps/vyper/src/environments/environment.ts
new file mode 100644
index 0000000000..d9370e924b
--- /dev/null
+++ b/apps/vyper/src/environments/environment.ts
@@ -0,0 +1,6 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// When building for production, this file is replaced with `environment.prod.ts`.
+
+export const environment = {
+  production: false
+};
diff --git a/apps/vyper/src/favicon.ico b/apps/vyper/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..317ebcb2336e0833a22dddf0ab287849f26fda57
GIT binary patch
literal 15086
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
X*GBfq^a!*Sks)$E_17kl@BRM)`^nwN

literal 0
HcmV?d00001

diff --git a/apps/vyper/src/index.html b/apps/vyper/src/index.html
new file mode 100644
index 0000000000..b6b64f4a61
--- /dev/null
+++ b/apps/vyper/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Vyper</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/apps/vyper/src/main.tsx b/apps/vyper/src/main.tsx
new file mode 100644
index 0000000000..353ad43f6d
--- /dev/null
+++ b/apps/vyper/src/main.tsx
@@ -0,0 +1,7 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom';
+
+
+import App from './app/app';
+
+ReactDOM.render(<StrictMode><App /></StrictMode>, document.getElementById('root'));
diff --git a/apps/vyper/src/polyfills.ts b/apps/vyper/src/polyfills.ts
new file mode 100644
index 0000000000..2adf3d05b6
--- /dev/null
+++ b/apps/vyper/src/polyfills.ts
@@ -0,0 +1,7 @@
+/**
+ * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
+ *
+ * See: https://github.com/zloirock/core-js#babel
+ */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
diff --git a/apps/vyper/src/styles.css b/apps/vyper/src/styles.css
new file mode 100644
index 0000000000..90d4ee0072
--- /dev/null
+++ b/apps/vyper/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/apps/vyper/tsconfig.app.json b/apps/vyper/tsconfig.app.json
new file mode 100644
index 0000000000..62d6d52c3d
--- /dev/null
+++ b/apps/vyper/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/apps/vyper/tsconfig.json b/apps/vyper/tsconfig.json
new file mode 100644
index 0000000000..a3e71f89f3
--- /dev/null
+++ b/apps/vyper/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx b/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx
index 2220bc1d1b..a90dc433af 100644
--- a/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx
+++ b/libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx
@@ -36,7 +36,7 @@ export const CopyToClipboard = (props: ICopyToClipboard) => {
     }
   }
 
-  const handleClick = (e) => {
+  const handleClick = (e: any) => {
     if (content) { // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory
       copyData()
     } else {
diff --git a/nx.json b/nx.json
index 13cd26c2b2..2afa03ec50 100644
--- a/nx.json
+++ b/nx.json
@@ -15,7 +15,12 @@
     "default": {
       "runner": "@nrwl/workspace/tasks-runners/default",
       "options": {
-        "cacheableOperations": ["build", "lint", "test", "e2e"]
+        "cacheableOperations": [
+          "build",
+          "lint",
+          "test",
+          "e2e"
+        ]
       }
     }
   },
@@ -25,27 +30,43 @@
     },
     "remix-astwalker": {
       "tags": [],
-      "implicitDependencies": ["remix-lib"]
+      "implicitDependencies": [
+        "remix-lib"
+      ]
     },
     "remix-analyzer": {
       "tags": [],
-      "implicitDependencies": ["remix-astwalker", "remix-lib"]
+      "implicitDependencies": [
+        "remix-astwalker",
+        "remix-lib"
+      ]
     },
     "remix-debug": {
       "tags": [],
-      "implicitDependencies": ["remix-astwalker", "remix-lib"]
+      "implicitDependencies": [
+        "remix-astwalker",
+        "remix-lib"
+      ]
     },
     "remix-simulator": {
       "tags": [],
-      "implicitDependencies": ["remix-lib"]
+      "implicitDependencies": [
+        "remix-lib"
+      ]
     },
     "remix-solidity": {
       "tags": [],
-      "implicitDependencies": ["remix-lib"]
+      "implicitDependencies": [
+        "remix-lib"
+      ]
     },
     "remix-tests": {
       "tags": [],
-      "implicitDependencies": ["remix-lib", "remix-simulator", "remix-solidity"]
+      "implicitDependencies": [
+        "remix-lib",
+        "remix-simulator",
+        "remix-solidity"
+      ]
     },
     "remix-url-resolver": {
       "tags": []
@@ -69,7 +90,9 @@
     },
     "remix-ide-e2e": {
       "tags": [],
-      "implicitDependencies": ["remix-ide"]
+      "implicitDependencies": [
+        "remix-ide"
+      ]
     },
     "remixd": {
       "tags": []
@@ -172,6 +195,9 @@
     },
     "remix-ui-tooltip-popup": {
       "tags": []
+    },
+    "vyper": {
+      "tags": []
     }
   },
   "targetDependencies": {
@@ -182,4 +208,4 @@
       }
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 6faf18ebd2..37cbe00ad6 100644
--- a/package.json
+++ b/package.json
@@ -199,6 +199,7 @@
     "react-bootstrap": "^1.6.4",
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.4",
+    "react-json-view": "^1.21.3",
     "react-tabs": "^3.2.2",
     "regenerator-runtime": "0.13.7",
     "rss-parser": "^3.12.0",
diff --git a/workspace.json b/workspace.json
index b1ec5f63d5..0f76a94da2 100644
--- a/workspace.json
+++ b/workspace.json
@@ -1,5 +1,37 @@
 {
   "version": 1,
+  "cli": {
+    "defaultCollection": "@nrwl/react"
+  },
+  "defaultProject": "remix-ide",
+  "schematics": {
+    "@nrwl/workspace": {
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "strict": true,
+        "babel": true
+      },
+      "component": {
+        "style": "css"
+      },
+      "library": {
+        "style": "css",
+        "linter": "eslint",
+        "strict": true
+      }
+    },
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    }
+  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -75,7 +107,9 @@
           "options": {
             "linter": "eslint",
             "config": "apps/remix-ide/.eslintrc",
-            "files": ["apps/remix-ide/src/**/*.js"],
+            "files": [
+              "apps/remix-ide/src/**/*.js"
+            ],
             "exclude": [
               "**/node_modules/**",
               "apps/remix-ide/src/app/editor/mode-solidity.js",
@@ -94,8 +128,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["apps/remix-ide-e2e/tsconfig.e2e.json"],
-            "exclude": ["**/node_modules/**", "!apps/remix-ide-e2e/**/*"]
+            "tsConfig": [
+              "apps/remix-ide-e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!apps/remix-ide-e2e/**/*"
+            ]
           }
         }
       }
@@ -111,14 +150,21 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-analyzer/.eslintrc",
-            "tsConfig": ["libs/remix-analyzer/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "libs/remix-analyzer/test/**/*"]
+            "tsConfig": [
+              "libs/remix-analyzer/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "libs/remix-analyzer/test/**/*"
+            ]
           }
         },
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": ["./../../node_modules/.bin/npm-run-all test"],
+            "commands": [
+              "./../../node_modules/.bin/npm-run-all test"
+            ],
             "cwd": "libs/remix-analyzer"
           }
         },
@@ -129,7 +175,9 @@
             "tsConfig": "libs/remix-analyzer/tsconfig.lib.json",
             "packageJson": "libs/remix-analyzer/package.json",
             "main": "libs/remix-analyzer/src/index.ts",
-            "assets": ["libs/remix-analyzer/*.md"]
+            "assets": [
+              "libs/remix-analyzer/*.md"
+            ]
           }
         }
       }
@@ -145,14 +193,21 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-astwalker/.eslintrc",
-            "tsConfig": ["libs/remix-astwalker/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "libs/remix-astwalker/tests/**/*"]
+            "tsConfig": [
+              "libs/remix-astwalker/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "libs/remix-astwalker/tests/**/*"
+            ]
           }
         },
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": ["./../../node_modules/.bin/npm-run-all test"],
+            "commands": [
+              "./../../node_modules/.bin/npm-run-all test"
+            ],
             "cwd": "libs/remix-astwalker"
           }
         },
@@ -163,7 +218,9 @@
             "tsConfig": "libs/remix-astwalker/tsconfig.lib.json",
             "packageJson": "libs/remix-astwalker/package.json",
             "main": "libs/remix-astwalker/src/index.ts",
-            "assets": ["libs/remix-astwalker/*.md"]
+            "assets": [
+              "libs/remix-astwalker/*.md"
+            ]
           }
         }
       }
@@ -179,14 +236,21 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-debug/.eslintrc",
-            "tsConfig": ["libs/remix-debug/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "libs/remix-debug/test/**/*"]
+            "tsConfig": [
+              "libs/remix-debug/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "libs/remix-debug/test/**/*"
+            ]
           }
         },
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": ["./../../node_modules/.bin/npm-run-all test"],
+            "commands": [
+              "./../../node_modules/.bin/npm-run-all test"
+            ],
             "cwd": "libs/remix-debug"
           }
         },
@@ -224,14 +288,21 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-lib/.eslintrc",
-            "tsConfig": ["libs/remix-lib/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "libs/remix-lib/test/**/*"]
+            "tsConfig": [
+              "libs/remix-lib/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "libs/remix-lib/test/**/*"
+            ]
           }
         },
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": ["./../../node_modules/.bin/npm-run-all test"],
+            "commands": [
+              "./../../node_modules/.bin/npm-run-all test"
+            ],
             "cwd": "libs/remix-lib"
           }
         },
@@ -242,7 +313,9 @@
             "tsConfig": "libs/remix-lib/tsconfig.lib.json",
             "packageJson": "libs/remix-lib/package.json",
             "main": "libs/remix-lib/src/index.ts",
-            "assets": ["libs/remix-lib/*.md"]
+            "assets": [
+              "libs/remix-lib/*.md"
+            ]
           }
         }
       }
@@ -258,14 +331,21 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-simulator/.eslintrc",
-            "tsConfig": ["libs/remix-simulator/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "libs/remix-simulator/test/**/*"]
+            "tsConfig": [
+              "libs/remix-simulator/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "libs/remix-simulator/test/**/*"
+            ]
           }
         },
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": ["./../../node_modules/.bin/npm-run-all test"],
+            "commands": [
+              "./../../node_modules/.bin/npm-run-all test"
+            ],
             "cwd": "libs/remix-simulator"
           }
         },
@@ -303,8 +383,12 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-solidity/.eslintrc",
-            "tsConfig": ["libs/remix-solidity/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**"]
+            "tsConfig": [
+              "libs/remix-solidity/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         },
         "test": {
@@ -321,7 +405,9 @@
             "tsConfig": "libs/remix-solidity/tsconfig.lib.json",
             "packageJson": "libs/remix-solidity/package.json",
             "main": "libs/remix-solidity/src/index.ts",
-            "assets": ["libs/remix-solidity/*.md"]
+            "assets": [
+              "libs/remix-solidity/*.md"
+            ]
           }
         }
       }
@@ -337,7 +423,9 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-tests/.eslintrc",
-            "tsConfig": ["libs/remix-tests/tsconfig.lib.json"],
+            "tsConfig": [
+              "libs/remix-tests/tsconfig.lib.json"
+            ],
             "exclude": [
               "**/node_modules/**",
               "libs/remix-tests/tests/**/*",
@@ -386,7 +474,9 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-url-resolver/.eslintrc",
-            "tsConfig": ["libs/remix-url-resolver/tsconfig.lib.json"],
+            "tsConfig": [
+              "libs/remix-url-resolver/tsconfig.lib.json"
+            ],
             "exclude": [
               "**/node_modules/**",
               "libs/remix-url-resolver/tests/**/*"
@@ -396,7 +486,9 @@
         "test": {
           "builder": "@nrwl/workspace:run-commands",
           "options": {
-            "commands": ["./../../node_modules/.bin/npm-run-all test"],
+            "commands": [
+              "./../../node_modules/.bin/npm-run-all test"
+            ],
             "cwd": "libs/remix-url-resolver"
           }
         },
@@ -407,7 +499,9 @@
             "tsConfig": "libs/remix-url-resolver/tsconfig.lib.json",
             "packageJson": "libs/remix-url-resolver/package.json",
             "main": "libs/remix-url-resolver/src/index.ts",
-            "assets": ["libs/remix-url-resolver/*.md"]
+            "assets": [
+              "libs/remix-url-resolver/*.md"
+            ]
           }
         }
       }
@@ -426,7 +520,10 @@
               "libs/remixd/tsconfig.lib.json",
               "libs/remixd/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**", "!libs/remixd/**/*"]
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remixd/**/*"
+            ]
           }
         },
         "test": {
@@ -444,7 +541,10 @@
             "tsConfig": "libs/remixd/tsconfig.lib.json",
             "packageJson": "libs/remixd/package.json",
             "main": "libs/remixd/src/index.ts",
-            "assets": ["libs/remixd/*.md", "libs/remixd/src/origins.json"]
+            "assets": [
+              "libs/remixd/*.md",
+              "libs/remixd/src/origins.json"
+            ]
           }
         }
       }
@@ -463,7 +563,10 @@
               "libs/remix-ui/tree-view/tsconfig.lib.json",
               "libs/remix-ui/tree-view/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/tree-view/**/*"]
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/tree-view/**/*"
+            ]
           }
         },
         "test": {
@@ -490,7 +593,10 @@
               "libs/remix-ui/debugger-ui/tsconfig.lib.json",
               "libs/remix-ui/debugger-ui/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/debugger-ui/**/*"]
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/debugger-ui/**/*"
+            ]
           }
         },
         "test": {
@@ -517,7 +623,10 @@
               "libs/remix-ui/utils/tsconfig.lib.json",
               "libs/remix-ui/utils/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/utils/**/*"]
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/utils/**/*"
+            ]
           }
         },
         "test": {
@@ -544,7 +653,10 @@
               "libs/remix-ui/clipboard/tsconfig.lib.json",
               "libs/remix-ui/clipboard/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/clipboard/**/*"]
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/clipboard/**/*"
+            ]
           }
         },
         "test": {
@@ -597,8 +709,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/toaster/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/toaster/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/toaster/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/toaster/**/*"
+            ]
           }
         }
       }
@@ -666,8 +783,13 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["apps/debugger/tsconfig.app.json"],
-            "exclude": ["**/node_modules/**", "!apps/debugger/**/*"]
+            "tsConfig": [
+              "apps/debugger/tsconfig.app.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!apps/debugger/**/*"
+            ]
           }
         }
       }
@@ -682,8 +804,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/workspace/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/workspace/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/workspace/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/workspace/**/*"
+            ]
           }
         }
       }
@@ -698,8 +825,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/settings/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/settings/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/settings/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/settings/**/*"
+            ]
           }
         }
       }
@@ -714,7 +846,9 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/static-analyser/tsconfig.lib.json"],
+            "tsConfig": [
+              "libs/remix-ui/static-analyser/tsconfig.lib.json"
+            ],
             "exclude": [
               "**/node_modules/**",
               "!libs/remix-ui/static-analyser/**/*"
@@ -733,8 +867,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/checkbox/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/checkbox/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/checkbox/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/checkbox/**/*"
+            ]
           }
         }
       }
@@ -749,8 +888,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/terminal/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/terminal/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/terminal/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/terminal/**/*"
+            ]
           }
         }
       }
@@ -765,7 +909,9 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/plugin-manager/tsconfig.lib.json"],
+            "tsConfig": [
+              "libs/remix-ui/plugin-manager/tsconfig.lib.json"
+            ],
             "exclude": [
               "**/node_modules/**",
               "!libs/remix-ui/plugin-manager/**/*"
@@ -784,8 +930,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-core-plugin/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-core-plugin/**/*"]
+            "tsConfig": [
+              "libs/remix-core-plugin/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-core-plugin/**/*"
+            ]
           }
         },
         "build": {
@@ -809,7 +960,9 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/solidity-compiler/tsconfig.lib.json"],
+            "tsConfig": [
+              "libs/remix-ui/solidity-compiler/tsconfig.lib.json"
+            ],
             "exclude": [
               "**/node_modules/**",
               "!libs/remix-ui/solidity-compiler/**/*"
@@ -828,7 +981,9 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/publish-to-storage/tsconfig.lib.json"],
+            "tsConfig": [
+              "libs/remix-ui/publish-to-storage/tsconfig.lib.json"
+            ],
             "exclude": [
               "**/node_modules/**",
               "!libs/remix-ui/publish-to-storage/**/*"
@@ -847,8 +1002,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/renderer/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/renderer/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/renderer/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/renderer/**/*"
+            ]
           }
         }
       }
@@ -872,7 +1032,9 @@
               "apps/solidity-compiler/src/assets",
               "apps/solidity-compiler/src/index.html"
             ],
-            "styles": ["apps/solidity-compiler/src/styles.css"],
+            "styles": [
+              "apps/solidity-compiler/src/styles.css"
+            ],
             "scripts": [],
             "webpackConfig": "apps/solidity-compiler/webpack.config.js",
             "maxWorkers": 2
@@ -917,8 +1079,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["apps/solidity-compiler/tsconfig.app.json"],
-            "exclude": ["**/node_modules/**", "!apps/solidity-compiler/**/*"]
+            "tsConfig": [
+              "apps/solidity-compiler/tsconfig.app.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!apps/solidity-compiler/**/*"
+            ]
           }
         }
       }
@@ -941,7 +1108,9 @@
               "apps/remix-ide-e2e/src/local-plugin/src/favicon.ico",
               "apps/remix-ide-e2e/src/local-plugin/src/assets"
             ],
-            "styles": ["apps/remix-ide-e2e/src/local-plugin/src/styles.css"],
+            "styles": [
+              "apps/remix-ide-e2e/src/local-plugin/src/styles.css"
+            ],
             "scripts": [],
             "webpackConfig": "@nrwl/react/plugins/webpack"
           },
@@ -1007,8 +1176,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/home-tab/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/home-tab/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/home-tab/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/home-tab/**/*"
+            ]
           }
         }
       }
@@ -1023,8 +1197,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/editor/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/editor/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/editor/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/editor/**/*"
+            ]
           }
         }
       }
@@ -1038,8 +1217,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/editor/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/editor/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/editor/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/editor/**/*"
+            ]
           }
         }
       }
@@ -1054,8 +1238,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/app/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/app/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/app/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/app/**/*"
+            ]
           }
         }
       }
@@ -1070,8 +1259,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/helper/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/helper/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/helper/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/helper/**/*"
+            ]
           }
         }
       }
@@ -1085,8 +1279,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/tabs/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/tabs/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/tabs/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/tabs/**/*"
+            ]
           }
         }
       }
@@ -1120,8 +1319,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/search/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/search/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/search/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/search/**/*"
+            ]
           }
         }
       }
@@ -1135,8 +1339,13 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/panel/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**", "!libs/remix-ui/panel/**/*"]
+            "tsConfig": [
+              "libs/remix-ui/panel/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/panel/**/*"
+            ]
           }
         }
       }
@@ -1170,7 +1379,9 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/editor-context-view/tsconfig.lib.json"],
+            "tsConfig": [
+              "libs/remix-ui/editor-context-view/tsconfig.lib.json"
+            ],
             "exclude": [
               "**/node_modules/**",
               "!libs/remix-ui/editor-context-view/**/*"
@@ -1188,7 +1399,9 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/run-tab/tsconfig.lib.json"],
+            "tsConfig": [
+              "libs/remix-ui/run-tab/tsconfig.lib.json"
+            ],
             "exclude": [
               "**/node_modules/**",
               "libs/remix-ui/run-tab/**/*.d.ts",
@@ -1207,7 +1420,9 @@
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
-            "tsConfig": ["libs/remix-ui/permission-handler/tsconfig.lib.json"],
+            "tsConfig": [
+              "libs/remix-ui/permission-handler/tsconfig.lib.json"
+            ],
             "exclude": [
               "**/node_modules/**",
               "libs/remix-ui/permission-handler/**/*.d.ts",
@@ -1227,8 +1442,12 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-ws-templates/.eslintrc",
-            "tsConfig": ["libs/remix-ws-templates/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**"]
+            "tsConfig": [
+              "libs/remix-ws-templates/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         },
         "build": {
@@ -1241,7 +1460,9 @@
             "assets": [
               {
                 "glob": "templates/**/*",
-                "ignore": ["templates/**/*/index.ts"],
+                "ignore": [
+                  "templates/**/*/index.ts"
+                ],
                 "input": "libs/remix-ws-templates/src/",
                 "output": "src/"
               },
@@ -1265,41 +1486,94 @@
           "options": {
             "linter": "eslint",
             "config": "libs/remix-ui/tooltip-popup/.eslintrc.json",
-            "tsConfig": ["libs/remix-ui/tooltip-popup/tsconfig.lib.json"],
-            "exclude": ["**/node_modules/**"]
+            "tsConfig": [
+              "libs/remix-ui/tooltip-popup/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
-    }
-  },
-  "cli": {
-    "defaultCollection": "@nrwl/react"
-  },
-  "schematics": {
-    "@nrwl/workspace": {
-      "library": {
-        "linter": "eslint"
-      }
-    },
-    "@nrwl/react": {
-      "application": {
-        "style": "css",
-        "linter": "eslint",
-        "babel": true
-      },
-      "component": {
-        "style": "css"
-      },
-      "library": {
-        "style": "css",
-        "linter": "eslint"
-      }
     },
-    "@nrwl/nx-plugin": {
-      "plugin": {
-        "linter": "eslint"
+    "vyper": {
+      "root": "apps/vyper",
+      "sourceRoot": "apps/vyper/src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/web:build",
+          "outputs": [
+            "{options.outputPath}"
+          ],
+          "options": {
+            "outputPath": "dist/apps/vyper",
+            "index": "apps/vyper/src/index.html",
+            "main": "apps/vyper/src/main.tsx",
+            "polyfills": "apps/vyper/src/polyfills.ts",
+            "tsConfig": "apps/vyper/tsconfig.app.json",
+            "assets": [
+              "apps/vyper/src/favicon.ico",
+              "apps/vyper/src/assets"
+            ],
+            "styles": [
+              "apps/vyper/src/styles.css"
+            ],
+            "scripts": [],
+            "webpackConfig": "@nrwl/react/plugins/webpack"
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "apps/vyper/src/environments/environment.ts",
+                  "with": "apps/vyper/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@nrwl/web:dev-server",
+          "options": {
+            "buildTarget": "vyper:build",
+            "hmr": true
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "vyper:build:production",
+              "hmr": false
+            }
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "config": "apps/vyper/.eslintrc",
+            "files": [
+              "apps/vyper/src/**/*.js", "apps/vyper/src/**/*.ts"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
       }
     }
-  },
-  "defaultProject": "remix-ide"
-}
+  }
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 6bac163214..ead77d9fa4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5359,6 +5359,11 @@ asap@^2.0.0, asap@~2.0.5:
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
   integrity sha512-7Ql0Lz9sffzP1jDkhjeju5/6z0LnwZAMZdlJoTe2GghKnYNA+H1rZOD8rWx4b9EBjux0kJq66igvQkANmbWnKg==
 
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
+
 asn1.js@^5.2.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
@@ -6325,6 +6330,11 @@ base-x@^3.0.2, base-x@^3.0.8:
   dependencies:
     safe-buffer "^5.0.1"
 
+base16@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
+  integrity sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==
+
 base64-js@^1.0.2, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -8385,6 +8395,13 @@ cross-blob@^2.0.1:
     blob-polyfill "^5.0.20210201"
     fetch-blob "^2.1.2"
 
+cross-fetch@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
+  integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==
+  dependencies:
+    node-fetch "2.6.7"
+
 cross-spawn-async@^2.1.1:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
@@ -10577,6 +10594,31 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fbemitter@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/fbemitter/-/fbemitter-3.0.0.tgz#00b2a1af5411254aab416cd75f9e6289bee4bff3"
+  integrity sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==
+  dependencies:
+    fbjs "^3.0.0"
+
+fbjs-css-vars@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
+  integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
+
+fbjs@^3.0.0, fbjs@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.4.tgz#e1871c6bd3083bac71ff2da868ad5067d37716c6"
+  integrity sha512-ucV0tDODnGV3JCnnkmoszb5lf4bNpzjv80K41wd4k798Etq+UYD0y0TIfalLjZoKgjive6/adkRnszwapiDgBQ==
+  dependencies:
+    cross-fetch "^3.1.5"
+    fbjs-css-vars "^1.0.0"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.30"
+
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -10864,6 +10906,14 @@ flush-write-stream@^1.0.0, flush-write-stream@^1.0.2:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+flux@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/flux/-/flux-4.0.3.tgz#573b504a24982c4768fdfb59d8d2ea5637d72ee7"
+  integrity sha512-yKAbrp7JhZhj6uiT1FTuVMlIAT1J4jqEyBpFApi1kxpGZCvacMVc/t1pMQyotqHhAgvoE3bNvAykhCo2CLjnYw==
+  dependencies:
+    fbemitter "^3.0.0"
+    fbjs "^3.0.1"
+
 fn.name@1.x.x:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fn.name/-/fn.name-1.1.0.tgz#26cad8017967aea8731bc42961d04a3d5988accc"
@@ -15082,6 +15132,11 @@ lodash.clonedeep@^4.5.0, lodash.clonedeep@~4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
+lodash.curry@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
+  integrity sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -15097,6 +15152,11 @@ lodash.flattendeep@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
   integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=
 
+lodash.flow@^3.3.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+  integrity sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==
+
 lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -16600,6 +16660,13 @@ node-fetch-npm@^2.0.2:
     json-parse-better-errors "^1.0.0"
     safe-buffer "^5.1.1"
 
+node-fetch@2.6.7, node-fetch@^2.5.0, node-fetch@^2.6.0, node-fetch@^2.6.1:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+  dependencies:
+    whatwg-url "^5.0.0"
+
 node-fetch@3.0.0-beta.9:
   version "3.0.0-beta.9"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.0.0-beta.9.tgz#0a7554cfb824380dd6812864389923c783c80d9b"
@@ -16608,13 +16675,6 @@ node-fetch@3.0.0-beta.9:
     data-uri-to-buffer "^3.0.1"
     fetch-blob "^2.1.1"
 
-node-fetch@^2.5.0, node-fetch@^2.6.0, node-fetch@^2.6.1:
-  version "2.6.7"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
-  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
-  dependencies:
-    whatwg-url "^5.0.0"
-
 node-forge@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
@@ -18833,6 +18893,13 @@ promise.series@^0.2.0:
   resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
   integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=
 
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
 prompts@^2.0.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
@@ -19021,6 +19088,11 @@ pupa@^2.1.1:
   dependencies:
     escape-goat "^2.0.0"
 
+pure-color@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
+  integrity sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==
+
 q@^1.1.2, q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -19202,6 +19274,16 @@ re-emitter@1.1.3:
   resolved "https://registry.yarnpkg.com/re-emitter/-/re-emitter-1.1.3.tgz#fa9e319ffdeeeb35b27296ef0f3d374dac2f52a7"
   integrity sha1-+p4xn/3u6zWycpbvDz03TawvUqc=
 
+react-base16-styling@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.6.0.tgz#ef2156d66cf4139695c8a167886cb69ea660792c"
+  integrity sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ==
+  dependencies:
+    base16 "^1.0.0"
+    lodash.curry "^4.0.1"
+    lodash.flow "^3.3.0"
+    pure-color "^1.2.0"
+
 react-beautiful-dnd@^13.1.0:
   version "13.1.0"
   resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d"
@@ -19265,6 +19347,16 @@ react-is@^17.0.1, react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-json-view@^1.21.3:
+  version "1.21.3"
+  resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.21.3.tgz#f184209ee8f1bf374fb0c41b0813cff54549c475"
+  integrity sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==
+  dependencies:
+    flux "^4.0.1"
+    react-base16-styling "^0.6.0"
+    react-lifecycles-compat "^3.0.4"
+    react-textarea-autosize "^8.3.2"
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -19314,6 +19406,15 @@ react-tabs@^3.2.2:
     clsx "^1.1.0"
     prop-types "^15.5.0"
 
+react-textarea-autosize@^8.3.2:
+  version "8.3.4"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz#270a343de7ad350534141b02c9cb78903e553524"
+  integrity sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    use-composed-ref "^1.3.0"
+    use-latest "^1.2.1"
+
 react-transition-group@^4.4.1:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -22580,6 +22681,11 @@ typescript@^4.4.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c"
   integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
 
+ua-parser-js@^0.7.30:
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
+  integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
+
 uglify-js@^2.8.16:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
@@ -22966,6 +23072,23 @@ url@^0.11.0, url@~0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-composed-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
+  integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
+
+use-isomorphic-layout-effect@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
+use-latest@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.1.tgz#d13dfb4b08c28e3e33991546a2cee53e14038cf2"
+  integrity sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==
+  dependencies:
+    use-isomorphic-layout-effect "^1.1.1"
+
 use-memo-one@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"