add tooltip for vyper repo clone button. update docs url

Author: joeizang

apps/vyper/src/app/app.tsx

@@ -13,6 +13,7 @@ import ToggleButton from 'react-bootstrap/ToggleButton'
 import Button from 'react-bootstrap/Button'
 
 import './app.css'
+import { CustomTooltip } from '@remix-ui/helper'
 
 interface AppState {
   status: 'idle' | 'inProgress'
@@ -71,20 +72,16 @@ const App: React.FC = () => {
 
   return (
     <main id="vyper-plugin">
-      <header>
-        <div className="title">
-          <img src={'assets/logo.svg'} alt="Vyper logo" />
-          <h4>yper Compiler</h4>
-        </div>
-        <a rel="noopener noreferrer" href="https://github.com/ethereum/remix-project/tree/master/apps/vyper" target="_blank">
-          <i className="fab fa-github"></i>
-        </a>
-      </header>
       <section>
         <div className="px-3 w-100">
-          <Button data-id="add-repository" className="w-100 text-dark bg-light btn-outline-primary " onClick={() => remixClient.cloneVyperRepo()}>
+          <CustomTooltip
+            placement="top"
+            tooltipText="Clone vyper examples. Switch to the Vyper workspace to see the examples."
+          >
+            <Button data-id="add-repository" className="w-100 text-dark bg-light btn-outline-primary " onClick={() => remixClient.cloneVyperRepo()}>
             Clone Vyper examples repository
-          </Button>
+            </Button>
+          </CustomTooltip>
         </div>
         <ToggleButtonGroup name="remote" onChange={setEnvironment} type="radio" value={state.environment}>
           <ToggleButton data-id="remote-compiler" variant="secondary" name="remote" value="remote">

apps/vyper/src/profile.json

@@ -1,14 +1,14 @@
 {
   "name": "vyper",
-  "displayName": "Vyper",
+  "displayName": "Vyper Plugin",
   "methods": ["getCompilationResult", "compile"],
   "url": "https://ipfs-cluster.ethdevops.io/ipfs/QmbmPzUg7ghTKcF2eo64zm1k1LKdibYfqYmiqXkHKXks8r",
-  "documentation": "https://github.com/GrandSchtroumpf/vyper-remix",
+  "documentation": "https://remix-ide.readthedocs.io/en/latest/plugin_list.html",
   "description": "Compile vyper contracts",
   "kind": "compiler",
   "icon": "data:image/svg+xml;base64,PHN2ZyBpZD0iRmxhdF9Mb2dvIiBkYXRhLW5hbWU9IkZsYXQgTG9nbyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjA0OCAxNzczLjYyIj4gIDx0aXRsZT52eXBlci1sb2dvLWZsYXQ8L3RpdGxlPiAgPHBvbHlsaW5lIHBvaW50cz0iMTAyNCA4ODYuODEgNzY4IDEzMzAuMjIgMTAyNCAxNzczLjYyIDEyODAgMTMzMC4yMiAxMDI0IDg4Ni44MSIgc3R5bGU9ImZpbGw6IzMzMyIvPiAgPHBvbHlsaW5lIHBvaW50cz0iMTI4MCA0NDMuNDEgMTAyNCA4ODYuODEgMTI4MCAxMzMwLjIyIDE1MzYgODg2LjgxIDEyODAgNDQzLjQxIiBzdHlsZT0iZmlsbDojNjY2Ii8+ICA8cG9seWxpbmUgcG9pbnRzPSI3NjggNDQzLjQxIDUxMiA4ODYuODEgNzY4IDEzMzAuMjIgMTAyNCA4ODYuODEgNzY4IDQ0My40MSIgc3R5bGU9ImZpbGw6IzY2NiIvPiAgPHBvbHlsaW5lIHBvaW50cz0iMTUzNiAwIDEyODAgNDQzLjQxIDE1MzYgODg2LjgxIDE3OTIgNDQzLjQxIDE1MzYgMCIgc3R5bGU9ImZpbGw6IzhjOGM4YyIvPiAgPHBvbHlsaW5lIHBvaW50cz0iMTE1MiAyMjEuNyA4OTYgMjIxLjcgNzY4IDQ0My40MSAxMDI0IDg4Ni44MSAxMjgwIDQ0My40MSAxMTUyIDIyMS43IiBzdHlsZT0iZmlsbDojOGM4YzhjIi8+ICA8cG9seWxpbmUgcG9pbnRzPSI1MTIgMCAyNTYgNDQzLjQxIDUxMiA4ODYuODEgNzY4IDQ0My40MSA1MTIgMCIgc3R5bGU9ImZpbGw6IzhjOGM4YyIvPiAgPHBvbHlsaW5lIHBvaW50cz0iMjA0OCAwIDE1MzYgMCAxNzkyIDQ0My40IDIwNDggMCIgc3R5bGU9ImZpbGw6I2IyYjJiMiIvPiAgPHBvbHlsaW5lIHBvaW50cz0iNTEyIDAgMCAwIDI1NiA0NDMuNCA1MTIgMCIgc3R5bGU9ImZpbGw6I2IyYjJiMiIvPjwvc3ZnPg==",
   "location": "sidePanel",
   "repo": "https://github.com/ethereum/remix-project/tree/master/apps/vyper",
   "maintainedBy": "Remix",
   "authorContact": "[email protected]"
-}
+}