From 218b69709dcc3b3434686e79973c31bfde5fd60b Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Thu, 16 Nov 2023 02:49:59 +0300 Subject: [PATCH] fix abi and bytecode copy and presentation --- apps/vyper/src/app/app.tsx | 8 +++--- .../src/app/components/CompilerButton.tsx | 28 ++++++++++++++++--- apps/vyper/src/app/components/VyperResult.tsx | 27 +++++++++--------- apps/vyper/src/app/utils/compiler.tsx | 4 ++- apps/vyper/src/app/utils/remix-client.tsx | 8 ++++++ 5 files changed, 53 insertions(+), 22 deletions(-) diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx index 7d09e10d9d..343c1ea98b 100644 --- a/apps/vyper/src/app/app.tsx +++ b/apps/vyper/src/app/app.tsx @@ -1,6 +1,6 @@ import React, {useState, useEffect} from 'react' -import {VyperCompilationOutput, remixClient, toStandardOutput} from './utils' +import {VyperCompilationOutput, normalizeContractPath, remixClient, toStandardOutput} from './utils' import {CompilationResult} from '@remixproject/plugin-api' // Components @@ -13,7 +13,6 @@ import ToggleButton from 'react-bootstrap/ToggleButton' import Button from 'react-bootstrap/Button' import './app.css' -import { VyperCompilationResultType } from './utils/types' interface AppState { status: 'idle' | 'inProgress' @@ -34,7 +33,7 @@ const App: React.FC = () => { environment: 'local', localUrl: 'http://localhost:8000/' }) - const [compilerResponse, setCompilerResponse] = useState({}) + useEffect(() => { async function start() { @@ -100,8 +99,9 @@ const App: React.FC = () => { setOutput={(name, update) => setOutput({...output, [name]: update})} /> +
- + {Object.keys(output).length > 0 ? : null}
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx index 49ef98bec6..90ebda1a05 100644 --- a/apps/vyper/src/app/components/CompilerButton.tsx +++ b/apps/vyper/src/app/components/CompilerButton.tsx @@ -1,11 +1,13 @@ import React from 'react' -import {isVyper, compile, toStandardOutput, VyperCompilationOutput, isCompilationError, remixClient} from '../utils' +import {isVyper, compile, toStandardOutput, VyperCompilationOutput, isCompilationError, remixClient, normalizeContractPath} from '../utils' import Button from 'react-bootstrap/Button' +import _ from 'lodash' +import { runtime } from 'webpack' interface Props { compilerUrl: string contract?: string - setOutput: (name: string, output: VyperCompilationOutput) => void + setOutput: (name: string, output: any) => void } function CompilerButton({contract, setOutput, compilerUrl}: Props) { @@ -40,8 +42,26 @@ function CompilerButton({contract, setOutput, compilerUrl}: Props) { setOutput(_contract.name, {status: 'failed', message: e.message}) return } - setOutput(_contract.name, output) - // setCompilerResponse(output) + const compileReturnType = () => { + const t: any = toStandardOutput(contract, output) + const temp = _.merge(t['contracts'][contract]) + const normal = normalizeContractPath(contract)[2] + console.log(normal) + const abi = temp[normal]['abi'] + const evm = _.merge(temp[normal]['evm']) + const dpb = evm.deployedBytecode + const runtimeBytecode = evm.bytecode + + const result = { + contractName: normal, + abi: abi, + bytecode: dpb, + runtimeBytecode: runtimeBytecode, + ir: '' + } + return result + } + setOutput(_contract.name, compileReturnType()) // ERROR if (isCompilationError(output)) { diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx index c2b942a818..94544de273 100644 --- a/apps/vyper/src/app/components/VyperResult.tsx +++ b/apps/vyper/src/app/components/VyperResult.tsx @@ -3,13 +3,14 @@ import {VyperCompilationOutput, isCompilationError} from '../utils' import Tabs from 'react-bootstrap/Tabs' import Tab from 'react-bootstrap/Tab' import Button from 'react-bootstrap/Button' -import JSONTree from 'react-json-view' +import JSONTree, { ThemeKeys } from 'react-json-view' import ReactJson from 'react-json-view' import {CopyToClipboard} from '@remix-ui/clipboard' import { VyperCompilationResult } from '../utils/types' interface VyperResultProps { - output?: VyperCompilationOutput + output?: any + themeColor?: string } export type ExampleContract = { @@ -17,7 +18,7 @@ export type ExampleContract = { address: string } -function VyperResult({ output }: VyperResultProps) { +function VyperResult({ output, themeColor }: VyperResultProps) { const [active, setActive] = useState('abi') if (!output) @@ -49,36 +50,36 @@ function VyperResult({ output }: VyperResultProps) { return ( setActive(key)}> - JSON.stringify(output.abi)}> + JSON.stringify(Object.values(output)[0]['abi'])}> - + - output.bytecode}> + JSON.stringify(Object.values(output)[0]['bytecode'].object.toString())}> - + - output.bytecode_runtime}> + JSON.stringify(Object.values(output)[0]['runtimeBytecode'].object.toString())}> - + - output.ir}> - - + ) diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx index 47d6b7e544..4dfd11f0ac 100644 --- a/apps/vyper/src/app/utils/compiler.tsx +++ b/apps/vyper/src/app/utils/compiler.tsx @@ -10,6 +10,7 @@ export interface Contract { export interface VyperCompilationResult { status: 'success' bytecode: string + contractName?: string bytecode_runtime: string abi: ABIDescription[] ir: string @@ -102,7 +103,7 @@ export async function compile(url: string, contract: Contract): Promise>(this) @@ -66,6 +67,13 @@ export class RemixClient extends PluginClient { this.client.emit('statusChanged', status) } + checkActiveTheme() { + const active = this.client.call('theme', 'currentTheme') + if (active === 'dark') { + return 'monokai' as any + } + } + /** Highlight a part of the editor */ async highlight(lineColumnPos: HighlightPosition, name: string, message: string) { await this.client.call('editor', 'highlight', lineColumnPos, name)