From 503f56c8dc04b683cc3f44a9b363472803b054c0 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Sat, 10 Feb 2024 18:53:50 +0100 Subject: [PATCH 01/10] change clone button style --- apps/vyper/src/app/app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx index 0a20e9d462..3ab6244afc 100644 --- a/apps/vyper/src/app/app.tsx +++ b/apps/vyper/src/app/app.tsx @@ -102,7 +102,7 @@ const App = () => { placement="bottom" tooltipText="Clone Vyper examples. Switch to the File Explorer to see the examples." > - From 6a4008ddecd952d676f9508b02f3cbf1c0b4b7d7 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Sun, 11 Feb 2024 14:44:44 +0100 Subject: [PATCH 02/10] update css for vyper --- apps/vyper/src/app/app.css | 109 +++++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) diff --git a/apps/vyper/src/app/app.css b/apps/vyper/src/app/app.css index 7e4107ba67..f299c4d37a 100644 --- a/apps/vyper/src/app/app.css +++ b/apps/vyper/src/app/app.css @@ -113,3 +113,112 @@ html, body, #root, main { height: 100%; width: 100%; } + + + +.remixui_copyButton { + padding: 6px; + font-weight: bold; + font-size: 11px; + line-height: 15px; +} + +.remixui_contractHelperButtons { + margin-top: 6px; + display: flex; + align-items: center; + justify-content: space-between; + float: right; +} +.remixui_copyToClipboard { + font-size: 1rem; +} +.remixui_copyIcon { + margin-right: 5px; +} +.remixui_log { + display: flex; + flex-direction: column; + margin-bottom: 0.5rem; + overflow: visible; +} +.remixui_key { + margin-right: 5px; + text-transform: uppercase; + width: 100%; +} +.remixui_value { + display: flex; + width: 100%; + margin-top: 1.5%; +} +.remixui_questionMark { + margin-left: 2%; + cursor: pointer; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} +@-webkit-keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} +@-moz-keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} +@-o-keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} +@-ms-keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.remixui_bouncingIcon { + display: inline-block; + position: relative; + -moz-animation: bounce 2s infinite linear; + -o-animation: bounce 2s infinite linear; + -webkit-animation: bounce 2s infinite linear; + animation: bounce 2s infinite linear; +} + +@-webkit-keyframes bounce { + 0% { top: 0; } + 50% { top: -0.2em; } + 70% { top: -0.3em; } + 100% { top: 0; } +} +@-moz-keyframes bounce { + 0% { top: 0; } + 50% { top: -0.2em; } + 70% { top: -0.3em; } + 100% { top: 0; } +} +@-o-keyframes bounce { + 0% { top: 0; } + 50% { top: -0.2em; } + 70% { top: -0.3em; } + 100% { top: 0; } +} +@-ms-keyframes bounce { + 0% { top: 0; } + 50% { top: -0.2em; } + 70% { top: -0.3em; } + 100% { top: 0; } +} +@keyframes bounce { + 0% { top: 0; } + 50% { top: -0.2em; } + 70% { top: -0.3em; } + 100% { top: 0; } +} + +#compileDetails { + margin: 15px; + padding: 15px; +} From 31af6a9a0de66baa08179bf4e0994352696291f6 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Sun, 11 Feb 2024 14:45:07 +0100 Subject: [PATCH 03/10] update markup and cursor --- apps/vyper/src/app/app.tsx | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx index 3ab6244afc..842863f324 100644 --- a/apps/vyper/src/app/app.tsx +++ b/apps/vyper/src/app/app.tsx @@ -102,19 +102,33 @@ const App = () => { placement="bottom" tooltipText="Clone Vyper examples. Switch to the File Explorer to see the examples." > - - + Remote Compiler - + Local Compiler + Specify the compiler version & EVM version in the .vy file
Date: Sun, 11 Feb 2024 14:45:41 +0100 Subject: [PATCH 04/10] copy abi and bytecode markup and logic --- apps/vyper/src/app/components/VyperResult.tsx | 37 +++++++++++++++---- 1 file changed, 30 insertions(+), 7 deletions(-) diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx index 56c32702de..a1f799cfb0 100644 --- a/apps/vyper/src/app/components/VyperResult.tsx +++ b/apps/vyper/src/app/components/VyperResult.tsx @@ -1,16 +1,21 @@ import React, {useState} from 'react' -import {VyperCompilationOutput, isCompilationError} from '../utils' -import Tabs from 'react-bootstrap/Tabs' -import Tab from 'react-bootstrap/Tab' -import Button from 'react-bootstrap/Button' +import {isCompilationError} from '../utils' import {CopyToClipboard} from '@remix-ui/clipboard' -import { VyperCompilationResult } from '../utils/types' interface VyperResultProps { output?: any plugin?: any } +export type OutputType = { + contractName: string + abi: any + bytecode: any + runtimeBytecode: any + ir: string + methodIdentifiers: any +} + export type ExampleContract = { name: string address: string @@ -24,7 +29,6 @@ type TabContentMembers = { } function VyperResult({ output, plugin }: VyperResultProps) { - // const [active, setActive] = useState('abi') if (!output) return ( @@ -51,15 +55,34 @@ function VyperResult({ output, plugin }: VyperResultProps) {
) } + return ( <>
-
+
+
+
+
+ (Object.values(output)[0] as OutputType).abi} direction="bottom" icon="far fa-copy"> + + + (Object.values(output)[0] as OutputType).bytecode.object} direction="bottom" icon="far fa-copy"> + + +
+
+
) From bc546db28f9baffd0ffef68adb85c627fe384ce2 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Tue, 13 Feb 2024 18:26:37 +0100 Subject: [PATCH 05/10] changing compile buttons --- apps/vyper/src/app/app.tsx | 52 ++++++++++++++++++++++++++++---------- 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx index 842863f324..436cef7fde 100644 --- a/apps/vyper/src/app/app.tsx +++ b/apps/vyper/src/app/app.tsx @@ -14,6 +14,7 @@ import Button from 'react-bootstrap/Button' import './app.css' import { CustomTooltip } from '@remix-ui/helper' +import { Form } from 'react-bootstrap' interface AppState { status: 'idle' | 'inProgress' @@ -107,8 +108,8 @@ const App = () => {
- - */} + {/* { style={{ cursor: state.environment === 'remote' ? 'default' : 'pointer' }} > Remote Compiler - - + */} +
+
+ + +
+
+ {/* Local Compiler - - + */} + {/* */} Specify the compiler version & EVM version in the .vy file
From 91d32951d311d6f0cd8927630d922e24216beebe Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Tue, 13 Feb 2024 18:31:38 +0100 Subject: [PATCH 06/10] Add markup for logo --- apps/vyper/src/app/app.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx index 436cef7fde..48627a7e06 100644 --- a/apps/vyper/src/app/app.tsx +++ b/apps/vyper/src/app/app.tsx @@ -97,6 +97,15 @@ const App = () => { return (
+
+
+ Vyper logo +

yper Compiler

+
+ + + +
Date: Tue, 13 Feb 2024 19:03:08 +0100 Subject: [PATCH 07/10] more changes to ui --- apps/vyper/src/app/app.tsx | 23 ++--------------------- apps/vyper/src/profile.json | 2 +- 2 files changed, 3 insertions(+), 22 deletions(-) diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx index 48627a7e06..f0216cb2a6 100644 --- a/apps/vyper/src/app/app.tsx +++ b/apps/vyper/src/app/app.tsx @@ -117,16 +117,6 @@ const App = () => {
- {/* */} - {/* - Remote Compiler - */}
{ type="radio" value={state.environment} checked={state.environment === 'remote'} + onChange={() => setEnvironment('remote')} label="Remote Compiler" style={{ cursor: state.environment === 'remote' ? 'default' : 'pointer' }} className="d-flex mr-4" @@ -147,22 +138,12 @@ const App = () => { type="radio" name="local" value={state.environment} + onChange={() => setEnvironment('local')} label="Local Compiler" style={{ cursor: state.environment === 'local' ? 'default' : 'pointer' }} />
- {/* - Local Compiler - */} - {/* */} Specify the compiler version & EVM version in the .vy file
diff --git a/apps/vyper/src/profile.json b/apps/vyper/src/profile.json index c641db5ad8..8ed04d3cb3 100644 --- a/apps/vyper/src/profile.json +++ b/apps/vyper/src/profile.json @@ -1,6 +1,6 @@ { "name": "vyper", - "displayName": "Vyper Plugin", + "displayName": "Vyper", "methods": ["getCompilationResult", "compile", "vyperCompileCustomAction"], "url": "https://ipfs-cluster.ethdevops.io/ipfs/QmbmPzUg7ghTKcF2eo64zm1k1LKdibYfqYmiqXkHKXks8r", "documentation": "https://remix-ide.readthedocs.io/en/latest/plugin_list.html", From 487bbb320ffe329f51bfc2bc29b46272088b7d6f Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Tue, 13 Feb 2024 23:47:24 +0100 Subject: [PATCH 08/10] fixing ui updates --- apps/vyper/src/app/app.tsx | 7 +++++- .../src/app/components/CompileErrorCard.tsx | 19 +++++++++++++++ apps/vyper/src/app/components/VyperResult.tsx | 2 +- apps/vyper/src/app/utils/compiler.tsx | 24 +++++++++++-------- 4 files changed, 40 insertions(+), 12 deletions(-) create mode 100644 apps/vyper/src/app/components/CompileErrorCard.tsx diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx index f0216cb2a6..4974934198 100644 --- a/apps/vyper/src/app/app.tsx +++ b/apps/vyper/src/app/app.tsx @@ -15,6 +15,7 @@ import Button from 'react-bootstrap/Button' import './app.css' import { CustomTooltip } from '@remix-ui/helper' import { Form } from 'react-bootstrap' +import { CompileErrorCard } from './components/CompileErrorCard' interface AppState { status: 'idle' | 'inProgress' @@ -68,6 +69,9 @@ const App = () => { useEffect(() => { remixClient.eventEmitter.on('setOutput', (payload) => { + if (payload.status === 'failed') { + console.error('Error in the compiler', payload) + } setOutput(payload) }) @@ -95,6 +99,7 @@ const App = () => { setOutput(remixClient.compilerOutput) } + console.log('output', output) return (
@@ -161,7 +166,7 @@ const App = () => { <> - ) : null + ) : output.status === 'failed' ? : null }
diff --git a/apps/vyper/src/app/components/CompileErrorCard.tsx b/apps/vyper/src/app/components/CompileErrorCard.tsx new file mode 100644 index 0000000000..53f2486c70 --- /dev/null +++ b/apps/vyper/src/app/components/CompileErrorCard.tsx @@ -0,0 +1,19 @@ +import Reaact from 'react' + +export function CompileErrorCard(props: any) { + return ( +
+ + + {props.output.message.trim()} + +
+ ) +} diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx index a1f799cfb0..3234ef0cdc 100644 --- a/apps/vyper/src/app/components/VyperResult.tsx +++ b/apps/vyper/src/app/components/VyperResult.tsx @@ -59,7 +59,7 @@ function VyperResult({ output, plugin }: VyperResultProps) { return ( <>
-
+
- setEnvironment('remote')} - label="Remote Compiler" - style={{ cursor: state.environment === 'remote' ? 'default' : 'pointer' }} - className="d-flex mr-4" - /> - setEnvironment('local')} - label="Local Compiler" - style={{ cursor: state.environment === 'local' ? 'default' : 'pointer' }} - /> + setEnvironment('remote')} label="Remote Compiler" style={{cursor: state.environment === 'remote' ? 'default' : 'pointer'}} className="d-flex mr-4" /> + setEnvironment('local')} label="Local Compiler" style={{cursor: state.environment === 'local' ? 'default' : 'pointer'}} />
Specify the compiler version & EVM version in the .vy file
- setOutput({...output, [name]: update})} - resetCompilerState={resetCompilerResultState} - /> + setOutput({...output, [name]: update})} resetCompilerState={resetCompilerResultState} />
- { - output && Object.keys(output).length > 0 && output.status !== 'failed' ? ( - <> - - - ) : output.status === 'failed' ? : null - } + {output && Object.keys(output).length > 0 && output.status !== 'failed' ? ( + <> + + + ) : output.status === 'failed' ? ( + + ) : null}
diff --git a/apps/vyper/src/app/components/CompileErrorCard.tsx b/apps/vyper/src/app/components/CompileErrorCard.tsx index 53f2486c70..4c8d1128b8 100644 --- a/apps/vyper/src/app/components/CompileErrorCard.tsx +++ b/apps/vyper/src/app/components/CompileErrorCard.tsx @@ -6,10 +6,10 @@ export function CompileErrorCard(props: any) { {props.output.message.trim()} diff --git a/apps/vyper/src/assets/vyperLogo_v2.webp b/apps/vyper/src/assets/vyperLogo_v2.webp new file mode 100644 index 0000000000000000000000000000000000000000..fc8599362730673b65abfe2218246956b419a847 GIT binary patch literal 2556 zcmV<|BMM6+kP&il$0000G0000{0RVOZ06|PpNcaT+00E!?0FWU$ zs@=QTwr$(CZQHhOXY#g<*tTsar`TCkoXt*kRXsN%Ai0g?NKz=Ufz6pUNB;nLa~uVR z|8U^KP5&h9^yc?kCjz08bI31e?x3IYIBd&;TG7Gh#2$PW{T=u3l?5WW%^vi7ZZAmZ z<7d!60&U6Wg3?gqB-)ZE3*z`dwmoQ9T+<>+LaZ;)wp^+BRvO+z8?!m79Ar9-w!4T6-au`S?cm{<5|HR3+Mgb;k>M5+$kzhk zT!jR9Qux(RVIz`AWB%!ZByv2;OWGj~LfC&*qB}?Zs~^nfqP=`N;MaU;L<3ZQtCdk2riGxCnfG8O=!w!i9%F1OBJdzS+bCo#WD-7 zh{|9ILs<4om$h`krBOJe^gX1@7k?m1JWJk1!YuvVFi7Y)d= zC~Q2#04_QJU>lk-rQA3bUeE^(QOIJhmn3%~nsJoyint$M$=7JglyGBd_mip!#MbtU=NjzzuZOyM>jiv+LdGc-rpidEnZB)M&nqV+p?W4a*9^@Ni5&=f+G z!JG4qIj)Qz(yYp8ahFk784W&U)E3hIMpa0Y+%~CFI>)3+X}o&|RZK@3R51;@X3l$+(<J{0=#GfIv7VRyx7U@c@MY&>Y5w6@?bStVp)*!u7bd)bi?Kp|#$Wb6Ojiv}RF zl+O!;fs-`h#Gtiyai=K&XvJh_?O|(L0L7T`k`08ka{{Qwln4FIgPCyvKsiQx&+AVj z#w7#*{RpM@_zTzaHZcG|M>?wg{`B3s`gP|-@FHpwAb!Jnt4@X7^d(_u_ig%USi_9) zGP;mL{?lU2{|ejEZH}Kf6gsDXLT4Y)=k!!is3A!ddR*#I=xh!8G$f9oHa5mt0P1|g z)6}5PIT!TlgM^^Z<8aXDJPryqFMv9a(?Fl|Am~$X0)<*fT%d*9go8Tgub@wlfu`@|_j|Q0FWTf=d|5rHkm2MRutoyhM>+nusq+o31kjAgOrQ#&5s4WNpiY;+M487y0NR}1 z3;^1k8$lzf^Uz+Zs{|;0%T6{qbOPi$Zy!%`fmRax8{6myib=Nz_VA@cGeDXj?cn!F zpqx}Z=yyI02KB^IeS=@Q-w||_Li0oX_9fa6sXMs(mN09H^qAl3r_0B|t?odGIR0e1mDQ7Dl{qq3o)B9O@1PzniYZsBbH z3I1K>%jExneT8a(e*pdg_K~yyv;Ud{@DJb@E5Wc=@$DqLi8)GBz@1tVxA=2|eL^@!P>P9^#PVu9s+1^8s%nNT3B{Y?QA{{VDHgD1nOG;KfoyS~o?YbK;M*o?vfqqnte*Cu;R;SWs^=GcdQBX{G$pWMBe}w$SYRH0x>{p ziEsOs*mK6_V94|=&YM1?zwrA&*Zili9I2;7RFxHpPjnfnf{K6_V94|=&Odn-z; zLmm!{!{DPc_NWjp-TTewABaqhLd?&1n-0b*jt+D~USNVuvMsCwO0T6_z$gW)02EHp zwMZ*&2?9Tj`~8_DaC}hClJ?p7^gkePckEi!loHu>W1w^%B|U<%=a-}r^!;A!8=-YE^{jYgg45yTrQdZufM&)WK_eAKCt;FHF~_CbCY+{v@k}Q~)hNW0?AE1;K?L#3zF^Sr z%LPyXdtO+slWx$(735-M006!_SE>8^&a25?1Z&=M9r%vMI0At8xL)}mf)h-J-Z7Nb zhzePQa+iJ7_5w&V6~h}4scG(NS3bj}-~j;F2R(}>C;XVB0~O-c|4yA(a`!C$SG`;+@e>|x{pO7iAWfB+BtNg|2vC<`ZeHiSJ6`tdfs Sv|Ou74;+MR#myirumAvRL(D?} literal 0 HcmV?d00001 From 8dc595e2cdc34450bf14c7c0d9df401f54149abc Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Wed, 14 Feb 2024 12:29:55 +0100 Subject: [PATCH 10/10] remove console log --- apps/vyper/src/app/app.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx index 92c5654088..f09dc06cda 100644 --- a/apps/vyper/src/app/app.tsx +++ b/apps/vyper/src/app/app.tsx @@ -98,7 +98,6 @@ const App = () => { setOutput(remixClient.compilerOutput) } - console.log('output', output) return (