Merge branch 'master' into ppmm

apps/vyper/src/app/app.css

@@ -49,7 +49,7 @@ html, body, #root, main {
 }
 
 #compile-btn {
-  width: 90%;
+  width: 100%;
 }
 
 #compile-btn * {
@@ -60,7 +60,6 @@ html, body, #root, main {
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   width: 100%;
   padding-top: 10px;

apps/vyper/src/app/app.tsx

@@ -10,6 +10,7 @@ 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 vyperLogo from './logo.svg'
 import './app.css'
@@ -68,7 +69,7 @@ const App: React.FC = () => {
 
   return (
     <main id="vyper-plugin">
-      <header className="bg-light">
+      <header>
         <div className="title">
           <img src={vyperLogo} alt="Vyper logo" />
           <h4>yper Compiler</h4>
@@ -82,6 +83,11 @@ const App: React.FC = () => {
         </a>
       </header>
       <section>
+        <div className="px-4 w-100">
+          <Button data-id="add-repository" className="w-100 text-dark w-100 bg-light btn-outline-primary " onClick={() => remixClient.cloneVyperRepo()}>
+            Clone Vyper examples repository
+          </Button>
+        </div>
         <ToggleButtonGroup
           name="remote"
           onChange={setEnvironment}
@@ -89,7 +95,7 @@ const App: React.FC = () => {
           value={state.environment}
         >
           <ToggleButton data-id="remote-compiler" variant="secondary" name="remote" value="remote">
-            Remote Compiler
+            Remote Compiler v0.2.16
           </ToggleButton>
           <ToggleButton data-id="local-compiler" variant="secondary" name="local" value="local">
             Local Compiler
@@ -101,7 +107,7 @@ const App: React.FC = () => {
           environment={state.environment}
         />
         <WarnRemote environment={state.environment} />
-        <div id="compile-btn">
+        <div className="px-4" id="compile-btn">
           <CompilerButton
             compilerUrl={compilerUrl()}
             contract={contract}
@@ -110,7 +116,7 @@ const App: React.FC = () => {
             }
           />
         </div>
-        <article id="result">
+        <article id="result" className="px-2">
           <VyperResult output={contract ? output[contract] : undefined} />
         </article>
       </section>

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

@@ -69,7 +69,7 @@ function CompilerButton({ contract, setOutput, compilerUrl }: Props) {
               errorIndex = errorIndex + 4
               if (message && message.split('\n\n').length > 0) {
                 try {
-                  message = message.split('\n\n')[1]
+                  message = message.split('\n\n')[message.split('\n\n').length - 1]
                 } catch (e) {}                
               }
               if (location.length > 0) {
@@ -103,8 +103,9 @@ function CompilerButton({ contract, setOutput, compilerUrl }: Props) {
   }
 
   return (
-    <Button data-id="compile" onClick={compileContract} variant="primary">
-      Compile {contract}
+    <Button data-id="compile" onClick={compileContract} variant="primary" title={contract} className="d-flex flex-column">
+      <span>Compile</span>
+      <span className="overflow-hidden text-truncate text-nowrap" >{contract}</span>
     </Button>
   )
 }

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

@@ -18,17 +18,18 @@ function LocalUrlInput({ url, setUrl, environment }: Props) {
   }
 
   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">
-      </Form.Text>
-    </Form.Group>
-  </Form>
+    <Form id="local-url">
+      <Form.Group controlId="localUrl">
+        <Form.Text className="text-warning pb-2">Currently we support vyper version > 0.2.16</Form.Text>
+        <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">
+        </Form.Text>
+      </Form.Group>
+    </Form>
   )
 }
 

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

@@ -3,7 +3,6 @@ import {
   VyperCompilationResult,
   VyperCompilationOutput,
   isCompilationError,
-  remixClient
 } from '../utils';
 import Tabs from 'react-bootstrap/Tabs'
 import Tab from 'react-bootstrap/Tab'
@@ -11,7 +10,6 @@ import Button from 'react-bootstrap/Button';
 import JSONTree from 'react-json-view'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 
-
 interface VyperResultProps {
   output?: VyperCompilationOutput;
 }
@@ -27,19 +25,21 @@ function VyperResult({ output }: VyperResultProps) {
   if (!output) return (
 
     <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>
+      <p className="my-3">No contract compiled yet.</p>
     </div>
   )
 
   if (isCompilationError(output)) {
     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>
-    </div>)
+      <div id="result" className="error" title={output.message}>
+        <i className="fas fa-exclamation-circle text-danger"></i>
+        <pre data-id="error-message" className="px-2 w-100 alert alert-danger" style={{
+          fontSize: "0.5rem",
+          overflowX: "hidden",
+          textOverflow: "ellipsis"
+        }}>{output.message}</pre>
+      </div>
+    )
   }
 
   return (

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

@@ -11,7 +11,7 @@ function WarnRemoteLabel({ environment }: Props) {
   }
 
   return (
-    <div className="alert alert-warning">The remote compiler should only be used for testing NOT for production environments. For production, use a local compiler.</div>
+    <small className="mx-4 text-warning pb-4">The remote compiler should only be used for testing NOT for production environments. For production, use a local compiler.</small>
   )
 }