fix lint issues. update workspace naming for cloned vyper workspace.

apps/vyper/src/app/app.tsx

@@ -1,7 +1,7 @@
-import React, {useState, useEffect, useRef} from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 
-import {remixClient} from './utils'
-import {CompilationResult} from '@remixproject/plugin-api'
+import { remixClient } from './utils'
+import { CompilationResult } from '@remixproject/plugin-api'
 
 // Components
 import CompilerButton from './components/CompilerButton'
@@ -15,9 +15,9 @@ import Accordion from 'react-bootstrap/Accordion'
 import Card from 'react-bootstrap/Card'
 
 import './app.css'
-import {CustomTooltip} from '@remix-ui/helper'
-import {Form} from 'react-bootstrap'
-import {CompileErrorCard} from './components/CompileErrorCard'
+import { CustomTooltip } from '@remix-ui/helper'
+import { Form } from 'react-bootstrap'
+import { CompileErrorCard } from './components/CompileErrorCard'
 import CustomAccordionToggle from './components/CustomAccordionToggle'
 
 interface AppState {
@@ -89,11 +89,11 @@ const App = () => {
 
   /** Update the environment state value */
   function setEnvironment(environment: 'local' | 'remote') {
-    setState({...state, environment})
+    setState({ ...state, environment })
   }
 
   function setLocalUrl(url: string) {
-    setState({...state, localUrl: url})
+    setState({ ...state, localUrl: url })
   }
 
   function compilerUrl() {
@@ -111,14 +111,20 @@ const App = () => {
     spinnerIcon.current.classList.add('remixui_spinningIcon')
   }
 
-  const [toggleAccordion, setToggleAccordion] = useState(false)
+  const [cloneCount, setCloneCount] = useState(0)
 
   return (
     <main id="vyper-plugin">
       <section>
         <div className="px-3 pt-3 mb-3 w-100">
           <CustomTooltip placement="bottom" tooltipText="Clone a repo of Vyper examples. Switch to the File Explorer to see the examples.">
-            <Button data-id="add-repository" className="w-100 btn btn-secondary" onClick={() => remixClient.cloneVyperRepo()}>
+            <Button data-id="add-repository" className="w-100 btn btn-secondary" onClick={() => {
+              {cloneCount === 0 ? remixClient.cloneVyperRepo() : remixClient.cloneVyperRepo(cloneCount)}
+              setCloneCount((prev) => {
+                console.log(prev)
+                return ++prev
+              })
+            }}>
               Clone a repo of Vyper examples
             </Button>
           </CustomTooltip>
@@ -162,7 +168,7 @@ const App = () => {
           in the .vy file.
         </span>
         <div className="px-3 w-100 mb-3 mt-1" id="compile-btn">
-          <CompilerButton compilerUrl={compilerUrl()} contract={contract} setOutput={(name, update) => setOutput({...output, [name]: update})} resetCompilerState={resetCompilerResultState} output={output} remixClient={remixClient}/>
+          <CompilerButton compilerUrl={compilerUrl()} contract={contract} setOutput={(name, update) => setOutput({ ...output, [name]: update })} resetCompilerState={resetCompilerResultState} output={output} remixClient={remixClient}/>
         </div>
 
         <article id="result" className="p-2 mx-3 border-top mt-2">

apps/vyper/src/app/utils/remix-client.tsx

@@ -1,9 +1,9 @@
-import {HighlightPosition, CompilationResult, RemixApi, customAction} from '@remixproject/plugin-api'
-import {Api, Status} from '@remixproject/plugin-utils'
-import {createClient} from '@remixproject/plugin-webview'
-import {PluginClient} from '@remixproject/plugin'
-import {Contract, compileContract} from './compiler'
-import {ExampleContract} from '../components/VyperResult'
+import { HighlightPosition, CompilationResult, RemixApi, customAction } from '@remixproject/plugin-api'
+import { Api, Status } from '@remixproject/plugin-utils'
+import { createClient } from '@remixproject/plugin-webview'
+import { PluginClient } from '@remixproject/plugin'
+import { Contract, compileContract } from './compiler'
+import { ExampleContract } from '../components/VyperResult'
 import EventEmitter from 'events'
 
 export type VyperComplierAddress = 'https://vyper2.remixproject.org/' | 'http://localhost:8000/'
@@ -49,7 +49,7 @@ export class RemixClient extends PluginClient {
   }
 
   /** Load Ballot contract example into the file manager */
-  async loadContract({name, address}: ExampleContract) {
+  async loadContract({ name, address }: ExampleContract) {
     try {
       const content = await this.client.call('contentImport', 'resolve', address)
       await this.client.call('fileManager', 'setFile', content.cleanUrl, content.content)
@@ -77,23 +77,24 @@ export class RemixClient extends PluginClient {
     }
   }
 
-  async cloneVyperRepo() {
+  async cloneVyperRepo(count?: number) {
+
     try {
       // @ts-ignore
-      this.call('notification', 'toast', 'cloning Snekmate Vyper repository...')
+      this.call('notification', 'toast', 'cloning Vyper-lang repository...')
       await this.call('manager', 'activatePlugin', 'dGitProvider')
       await this.call(
         'dGitProvider',
         'clone',
-        {url: 'https://github.com/pcaversaccio/snekmate', token: null, branch: 'v0.0.5'},
+        { url: 'https://github.com/vyperlang/vyper', token: null, branch: 'v0.3.10' },
         // @ts-ignore
-        'snekmate'
+        (count === undefined || count === 0) ? 'vyper-lang' : `vyper-lang_${count}`
       )
       this.call(
         // @ts-ignore
         'notification',
         'toast',
-        'Snekmate Vyper repository cloned, the workspace snekmate has been created.'
+        'Vyper repository cloned, the workspace Vyper has been created.'
       )
     } catch (e) {
       // @ts-ignore