add vyper

apps/vyper/src/app/app.tsx

@@ -88,10 +88,10 @@ const App: React.FC = () => {
           type="radio"
           value={state.environment}
         >
-          <ToggleButton data-id="remote-compiler" variant="secondary" name="remote" value="remote">
+          <ToggleButton variant="secondary" name="remote" value="remote">
             Remote Compiler
           </ToggleButton>
-          <ToggleButton data-id="local-compiler" variant="secondary" name="local" value="local">
+          <ToggleButton variant="secondary" name="local" value="local">
             Local Compiler
           </ToggleButton>
         </ToggleButtonGroup>

apps/vyper/src/app/components/CompilerButton.tsx

@@ -103,7 +103,7 @@ function CompilerButton({ contract, setOutput, compilerUrl }: Props) {
   }
 
   return (
-    <Button data-id="compile" onClick={compileContract} variant="primary">
+    <Button onClick={compileContract} variant="primary">
       Compile {contract}
     </Button>
   )

apps/vyper/src/app/components/VyperResult.tsx

@@ -28,8 +28,8 @@ function VyperResult({ output }: VyperResultProps) {
 
     <div id="result">
       <p>No contract compiled yet.</p>
-      <Button data-id="add-repository" variant="info" onClick={() => remixClient.cloneVyperRepo()}>
-          Clone Vyper repository and play with the contract examples
+      <Button variant="info" onClick={() => remixClient.loadContract(Ballot)}>
+        Create Ballot.vy example
       </Button>
     </div>
   )
@@ -38,7 +38,7 @@ function VyperResult({ output }: VyperResultProps) {
     return (
     <div id="result" className="error">
       <i className="fas fa-exclamation-circle text-danger"></i>
-      <pre data-id="error-message" className="alert alert-danger">{output.message}</pre>
+      <p className="alert alert-danger">{output.message}</p>
     </div>)
   }
 

nx.json

@@ -204,6 +204,7 @@
     },
     "etherscan": {
       "tags": []
+
     }
   },
   "targetDependencies": {