updates to vyper as per @LianaHus more to come

apps/vyper/src/app/app.tsx

@@ -164,7 +164,7 @@ const App = () => {
           <CompilerButton compilerUrl={compilerUrl()} contract={contract} setOutput={(name, update) => setOutput({...output, [name]: update})} resetCompilerState={resetCompilerResultState} />
         </div>
 
-        <article id="result" className="p-4 mx-3 border-top mt-2">
+        <article id="result" className="p-2 mx-3 border-top mt-2">
           {output && Object.keys(output).length > 0 && output.status !== 'failed' ? (
             <>
               <VyperResult output={output} plugin={remixClient} />

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

@@ -67,17 +67,17 @@ function VyperResult({ output, plugin }: VyperResultProps) {
         <div className="mt-1">
           <div className="input-group input-group mt-3 d-flex flex-row-reverse">
             <div className="btn-group align-self-start" role="group" aria-label="Copy to Clipboard">
-              <CopyToClipboard tip={'Copy ABI to clipboard'} getContent={() => (Object.values(output)[0] as OutputType).abi} direction="bottom" icon="far fa-copy">
+              <CopyToClipboard tip={'Copy ABI to clipboard'} getContent={() => (Object.values(output)[1] as OutputType)?.abi} direction="bottom" icon="far fa-copy">
-                <button className="btn remixui_copyButton">
+                <span className="btn remixui_copyButton">
                   <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
                   <span>ABI</span>
-                </button>
+                </span>
               </CopyToClipboard>
-              <CopyToClipboard tip={'Copy Bytecode to clipboard'} getContent={() => (Object.values(output)[0] as OutputType).bytecode.object} direction="bottom" icon="far fa-copy">
+              <CopyToClipboard tip={'Copy Bytecode to clipboard'} getContent={() => (Object.values(output)[1] as OutputType)?.bytecode.object} direction="bottom" icon="far fa-copy">
-                <button className="btn remixui_copyButton">
+                <span className="btn remixui_copyButton">
                   <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
                   <span>Bytecode</span>
-                </button>
+                </span>
               </CopyToClipboard>
             </div>
           </div>

apps/vyper/src/app/utils/compiler.tsx

@@ -141,6 +141,22 @@ const compileReturnType = (output, contract) => {
   return result
 }
 
+const fixContractContent = (content: string) => {
+  if (content.length === 0) return
+  const pragmaFound = content.includes('#pragma version ^0.3.10')
+  const evmVerFound = content.includes('#pragma evm-version shanghai')
+  const pragma = '#pragma version ^0.3.10'
+  const evmVer = '#pragma evm-version shanghai'
+
+  if (!evmVerFound) {
+    content = `${evmVer}\n${content}`
+  }
+  if (!pragmaFound) {
+    content = `${pragma}\n${content}`
+  }
+  return content
+}
+
 /**
  * Compile the a contract
  * @param url The url of the compiler
@@ -155,11 +171,13 @@ export async function compile(url: string, contract: Contract): Promise<any> {
     throw new Error('Use extension .vy for Vyper.')
   }
 
+
+
   let contractName = contract['name']
   const compilePackage = {
     manifest: 'ethpm/3',
     sources: {
-      [contractName] : {content : contract.content}
+      [contractName] : {content : fixContractContent(contract.content)}
     }
   }
   let response = await axios.post(`${url}compile`, compilePackage )

apps/vyper/src/profile.json

@@ -3,7 +3,7 @@
   "displayName": "Vyper Compiler",
   "methods": ["getCompilationResult", "compile", "vyperCompileCustomAction"],
   "url": "https://ipfs-cluster.ethdevops.io/ipfs/QmbmPzUg7ghTKcF2eo64zm1k1LKdibYfqYmiqXkHKXks8r",
-  "documentation": "https://remix-ide.readthedocs.io/en/latest/plugin_list.html",
+  "documentation": "https://remix-ide.readthedocs.io/en/latest/vyper.html",
   "description": "Compile vyper contracts",
   "kind": "compiler",
   "icon": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzM4IiBoZWlnaHQ9IjM3NiIgdmlld0JveD0iMCAwIDMzOCAzNzYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOTUuMzA0IDMxMS44MzdMODIuNTE4IDE5OS4wODRDNzcuOTI0MSAxOTQuMzA0IDc1LjM5MjcgMTg3LjgzNyA3NS4zOTI3IDE4MC42MlYxOS42OTE0Qzc1LjM5MjcgMTAuMzE4OCA2Ni4wMTc0IDAuOTQ2MTI3IDU2LjY0MiAwLjk0NjEyN0gxOS4wNDY3QzkuNjcxMjggMC45NDYxMjcgMC4yOTU4OTggMTAuMzE4OCAwLjI5NTg5OCAxOS42OTE0VjIwNy4xNDVDMC4yOTU4OTggMjE3LjA4IDMuOTUyMyAyMjYuNjQgMTAuOTgzOCAyMzMuNjY5TDE0Mi4yMzkgMzY0Ljg4NkMxNDkuNTUyIDM3Mi4xOTcgMTU5LjExNSAzNzUuODUyIDE2OC43NzIgMzc1Ljg1MkgxODcuNTIyQzE5Ny45MjkgMzc1Ljg1MiAyMDYuMjczIDM2Ny40MTcgMjA2LjI3MyAzNTcuMTA3VjMzOC40NTZDMjA2LjI3MyAzMjguODAyIDIwMi42MTcgMzE5LjI0MiAxOTUuMzA0IDMxMS45MzFWMzExLjgzN1oiIGZpbGw9IiMxODBDMjUiLz4KPHBhdGggZD0iTTMzNy44MSAxOS41OTc3QzMzNy44MSAxMC4xMzEzIDMyOC41MjkgMC44NTI0MTcgMzE5LjA1OSAwLjg1MjQxN0gyODEuNDY0QzI3Mi4wODkgMC44NTI0MTcgMjYyLjcxMyAxMC4yMjUxIDI2Mi43MTMgMTkuNTk3N1YxODAuNDMzQzI2Mi43MTMgMTg3LjY1IDI1OS45MDEgMTk0LjExNyAyNTUuMjEzIDE5OC45OUwyMTcuNDMgMjM2Ljc2MkMyMTAuMTE4IDI0NC4wNzMgMjA2LjQ2MSAyNTMuNjMzIDIwNi40NjEgMjYzLjI4N1YyODIuMDMyQzIwNi40NjEgMjkyLjQzNiAyMTQuODk5IDMwMC43NzggMjI1LjIxMiAzMDAuNzc4SDI0My45NjNDMjUzLjUyNiAzMDAuNzc4IDI2My4xODIgMjk3LjEyMiAyNzAuNDk1IDI4OS44MTFMMzI2Ljc0NyAyMzMuNTc2QzMzMy43NzkgMjI2LjU0NiAzMzcuNzE2IDIxNi45ODYgMzM3LjcxNiAyMDcuMDUxVjE5LjU5NzdIMzM3LjgxWiIgZmlsbD0iIzE4MEMyNSIvPgo8L3N2Zz4K",