diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx index 73850794cf..dc925a8756 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} from './utils' +import {VyperCompilationOutput, remixClient, toStandardOutput} from './utils' import {CompilationResult} from '@remixproject/plugin-api' // Components @@ -13,6 +13,7 @@ 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' @@ -27,7 +28,7 @@ interface OutputMap { const App: React.FC = () => { const [contract, setContract] = useState() - const [output, setOutput] = useState({}) + const [output, setOutput] = useState({}) const [state, setState] = useState({ status: 'idle', environment: 'local', @@ -52,6 +53,52 @@ const App: React.FC = () => { start() }, []) + // useEffect(() => { + // const getStandardOutput = () => { + // const contractName = contract.split('/').slice(-1)[0].split('.')[0] + // const compiledAbi = output['contractTypes'][contractName].abi + // const deployedBytecode = output['contractTypes'][contractName].deploymentBytecode.bytecode.replace('0x', '') + // const bytecode = output['contractTypes'][contractName].runtimeBytecode.bytecode.replace('0x', '') + // const compiledAst = output['contractTypes'][contractName].abi + // //const methodIdentifiers = JSON.parse(JSON.stringify(compilationResult['method_identifiers']).replace(/0x/g, '')) + // return { + // sources: { + // [contract]: { + // id: 1, + // ast: compiledAst, + // legacyAST: {} as any + // } + // }, + // contracts: { + // [contract]: { + // // If the language used has no contract names, this field should equal to an empty string + // [contractName]: { + // // The Ethereum Contract ABI. If empty, it is represented as an empty array. + // // See https://github.com/ethereum/wiki/wiki/Ethereum-Contract-ABI + // abi: compiledAbi, + // evm: { + // bytecode: { + // linkReferences: {}, + // object: deployedBytecode, + // opcodes: '' + // }, + // deployedBytecode: { + // linkReferences: {}, + // object: bytecode, + // opcodes: '' + // }, + // // methodIdentifiers: methodIdentifiers + // } + // } + // } as any + // } + // } + // } + // const data = getStandardOutput() + // console.log({ data }) + // setCompilerResponse(data) + // }, [output]) + /** Update the environment state value */ function setEnvironment(environment: 'local' | 'remote') { setState({...state, environment}) @@ -97,11 +144,11 @@ const App: React.FC = () => { compilerUrl={compilerUrl()} contract={contract} setOutput={(name, update) => setOutput({...output, [name]: update})} - setCompilerResponse={setCompilerResponse} />
- + {/* */} +
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx index b85a356337..49ef98bec6 100644 --- a/apps/vyper/src/app/components/CompilerButton.tsx +++ b/apps/vyper/src/app/components/CompilerButton.tsx @@ -6,10 +6,9 @@ interface Props { compilerUrl: string contract?: string setOutput: (name: string, output: VyperCompilationOutput) => void - setCompilerResponse: (response: any) => void } -function CompilerButton({contract, setOutput, compilerUrl, setCompilerResponse}: Props) { +function CompilerButton({contract, setOutput, compilerUrl}: Props) { if (!contract || !contract) { return } @@ -42,7 +41,7 @@ function CompilerButton({contract, setOutput, compilerUrl, setCompilerResponse}: return } setOutput(_contract.name, output) - setCompilerResponse(output) + // setCompilerResponse(output) // ERROR if (isCompilationError(output)) { diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx index e6ad250d79..6ba82c4ce4 100644 --- a/apps/vyper/src/app/components/VyperResult.tsx +++ b/apps/vyper/src/app/components/VyperResult.tsx @@ -4,13 +4,12 @@ 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 { JsonView } from 'react-json-view-lite' +import ReactJson from 'react-json-view' import {CopyToClipboard} from '@remix-ui/clipboard' import { VyperCompilationResult } from '../utils/types' interface VyperResultProps { output?: VyperCompilationOutput - compilerResponse?: any } export type ExampleContract = { @@ -18,7 +17,7 @@ export type ExampleContract = { address: string } -function VyperResult(props, {output, compilerResponse}: VyperResultProps) { +function VyperResult({ output }: VyperResultProps) { const [active, setActive] = useState('abi') if (!output) @@ -56,9 +55,7 @@ function VyperResult(props, {output, compilerResponse}: VyperResultProps) { {/* */} - + output.bytecode}> diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx index e131b52e27..8db1f0c12a 100644 --- a/apps/vyper/src/app/utils/compiler.tsx +++ b/apps/vyper/src/app/utils/compiler.tsx @@ -88,16 +88,12 @@ export async function compile(url: string, contract: Contract): Promise setTimeout(() => resolve({}), 2000)) - } /** @@ -116,7 +112,7 @@ export function toStandardOutput(fileName: string, compilationResult: VyperCompi sources: { [fileName]: { id: 1, - ast: compiledAst,//{} as any, + ast: compiledAst, legacyAST: {} as any } }, diff --git a/package.json b/package.json index f934d2eb4d..3ad91b7184 100644 --- a/package.json +++ b/package.json @@ -203,7 +203,6 @@ "react-image-magnifiers": "^1.4.0", "react-intl": "^6.0.4", "react-json-view": "^1.21.3", - "react-json-view-lite": "^1.2.0", "react-markdown": "^8.0.5", "react-multi-carousel": "^2.8.2", "react-router-dom": "^6.3.0", diff --git a/yarn.lock b/yarn.lock index 6df878e4b2..e75886fbe1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23389,11 +23389,6 @@ react-is@^17.0.1, react-is@^17.0.2: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -react-json-view-lite@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/react-json-view-lite/-/react-json-view-lite-1.2.0.tgz#2fced1da474ae6e71ccd2352931033f3133311b4" - integrity sha512-Z5KSFNDjw3oYr6a2ZZ6SxAiU5OlXrlTbvEUshYeEn9eCEgrfb+DaJRK+6ZG+x7nLVl5RtOOBsfzD5iseUgLMRQ== - react-json-view@^1.21.3: version "1.21.3" resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.21.3.tgz#f184209ee8f1bf374fb0c41b0813cff54549c475"