Merge pull request #4885 from ethereum/vyper-updates-005

Updates to Vyper plugin

apps/remix-ide-e2e/src/commands/addFileSnekmate.ts

@@ -60,7 +60,7 @@ function addFileSnekmate(browser: NightwatchBrowser, name: string, content: Nigh
           })
           .setEditorValue(content.content)
           .getEditorValue((result) => {
-            if(result != content.content) {
+            if (result != content.content) {
               browser.setEditorValue(content.content)
             }
           })

apps/remix-ide-e2e/src/tests/vyper_api.test.ts

@@ -27,30 +27,30 @@ module.exports = {
       .frameParent()
       .clickLaunchIcon('filePanel')
       .waitForElementVisible({
-        selector: "//*[@data-id='workspacesSelect' and contains(.,'snekmate')]",
+        selector: "//*[@data-id='workspacesSelect' and contains(.,'vyper-lang')]",
         locateStrategy: 'xpath',
         timeout: 60000
       })
-      .currentWorkspaceIs('snekmate')
-      .waitForElementVisible({
-        selector: "//*[@data-id='treeViewLitreeViewItemsrc' and contains(.,'src')]",
-        locateStrategy: 'xpath',
-        timeout: 60000
-      })
-      .openFile('src')
-      .openFile('src/snekmate')
-      .openFile('src/snekmate/tokens')
-      .openFile('src/snekmate/tokens/ERC721.vy')
+      .currentWorkspaceIs('vyper-lang')
+      // .waitForElementVisible({
+      //   selector: "//*[@data-id='treeViewLitreeViewItemsrc' and contains(.,'src')]",
+      //   locateStrategy: 'xpath',
+      //   timeout: 60000
+      // })
+      .openFile('examples')
+      .openFile('examples/auctions')
+      .openFile('examples/auctions/simple_open_auction.vy')
   },
-  // 'Add vyper file to run tests #group1': function (browser: NightwatchBrowser) {
-  //   browser.addFile('TestBallot.sol', sources[0]['TestBallot.sol'])
-  // },
-  '@sources': () => sources,
+
+  // '@sources': () => sources,
+  // 'Context menu click to compile blind_auction should succeed #group1': function (browser: NightwatchBrowser) {
+  //   browser
+  //     .addFileSnekmate('blind_auction.vy', sources[0]['blindAuction'])
+
   'Context menu click to compile blind_auction should succeed #group1': function (browser: NightwatchBrowser) {
     browser
-      .addFileSnekmate('blind_auction.vy', sources[0]['blindAuction'])
-      .click('*[data-id="treeViewLitreeViewItemblind_auction.vy"]')
-      .rightClick('*[data-id="treeViewLitreeViewItemblind_auction.vy"]')
+      .click('*[data-id="treeViewDivtreeViewItemexamples/auctions/blind_auction.vy"]')
+      .rightClick('*[data-id="treeViewDivtreeViewItemexamples/auctions/blind_auction.vy"]')
       .waitForElementPresent('[data-id="contextMenuItemvyper"]')
       .click('[data-id="contextMenuItemvyper"]')
       .clickLaunchIcon('vyper')
@@ -149,32 +149,32 @@ module.exports = {
       })
   },
 
-  'Compile Ownable contract from snekmate #group1': function (browser: NightwatchBrowser) {
-    let contractAddress
-    browser
-      .frameParent()
-      .clickLaunchIcon('filePanel')
-      .switchWorkspace('snekmate')
-      .openFile('src')
-      .openFile('src/snekmate')
-      .openFile('src/snekmate/auth')
-      .openFile('src/snekmate/auth/Ownable.vy')
-      .rightClick('*[data-id="treeViewLitreeViewItemsrc/snekmate/auth/Ownable.vy"]')
-      .waitForElementVisible('*[data-id="contextMenuItemvyper"]')
-      .click('*[data-id="contextMenuItemvyper"]')
-      .clickLaunchIcon('vyper')
-      // @ts-ignore
-      .frame(0)
-      .click('[data-id="compile"]')
-      .waitForElementVisible({
-        selector:'[data-id="compilation-details"]',
-        timeout: 60000
-      })
-      .click('[data-id="compilation-details"]')
-      .frameParent()
-      .waitForElementVisible('[data-id="copy-abi"]')
-      .end()
-  }
+  // 'Compile Ownable contract from snekmate #group1': function (browser: NightwatchBrowser) {
+  //   let contractAddress
+  //   browser
+  //     .frameParent()
+  //     .clickLaunchIcon('filePanel')
+  //     .switchWorkspace('snekmate')
+  //     .openFile('src')
+  //     .openFile('src/snekmate')
+  //     .openFile('src/snekmate/auth')
+  //     .openFile('src/snekmate/auth/Ownable.vy')
+  //     .rightClick('*[data-id="treeViewLitreeViewItemsrc/snekmate/auth/Ownable.vy"]')
+  //     .waitForElementVisible('*[data-id="contextMenuItemvyper"]')
+  //     .click('*[data-id="contextMenuItemvyper"]')
+  //     .clickLaunchIcon('vyper')
+  //     // @ts-ignore
+  //     .frame(0)
+  //     .click('[data-id="compile"]')
+  //     .waitForElementVisible({
+  //       selector:'[data-id="compilation-details"]',
+  //       timeout: 60000
+  //     })
+  //     .click('[data-id="compilation-details"]')
+  //     .frameParent()
+  //     .waitForElementVisible('[data-id="copy-abi"]')
+  //     .end()
+  // }
 }
 
 const testContract = `
@@ -388,6 +388,6 @@ def auctionEnd():
 
     # Transfer funds to beneficiary
     send(self.beneficiary, self.highestBid)
-`}
+` }
 }
 ]

apps/vyper/src/app/app.tsx

@@ -1,23 +1,19 @@
-import React, {useState, useEffect, useRef} from 'react'
+import { 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'
-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 Button from 'react-bootstrap/Button'
 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 +85,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 +107,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 +164,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