From c894d158d3811e157d066d29ac80e9037c544390 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Mon, 4 Dec 2023 11:18:04 +0100 Subject: [PATCH] tracking compile results --- .../src/app/components/CompilerButton.tsx | 2 + apps/vyper/src/app/components/VyperResult.tsx | 65 +++---------- apps/vyper/src/app/utils/compiler.tsx | 34 ++++++- .../src/lib/components/solidityCompile.tsx | 64 +++++++++++++ .../src/lib/components/vyperCompile.tsx | 92 +++++++++++++++++++ .../src/lib/solidity-compile-details.tsx | 77 +++++----------- .../src/lib/contract-selection.tsx | 2 +- 7 files changed, 226 insertions(+), 110 deletions(-) create mode 100644 libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx create mode 100644 libs/remix-ui/solidity-compile-details/src/lib/components/vyperCompile.tsx diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx index 28ac810b60..b02cc2406d 100644 --- a/apps/vyper/src/app/components/CompilerButton.tsx +++ b/apps/vyper/src/app/components/CompilerButton.tsx @@ -109,6 +109,8 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}: }) const data = toStandardOutput(_contract.name, output) remixClient.compilationFinish(_contract.name, _contract.content, data) + console.log(data) + setOutput(_contract.name, data) // remixClient.call('compilationDetails' as any, 'showDetails', data) } catch (err: any) { remixClient.changeStatus({ diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx index 2b273631ec..8218aa3be3 100644 --- a/apps/vyper/src/app/components/VyperResult.tsx +++ b/apps/vyper/src/app/components/VyperResult.tsx @@ -10,7 +10,6 @@ import { VyperCompilationResult } from '../utils/types' interface VyperResultProps { output?: any - themeColor?: string } export type ExampleContract = { @@ -25,9 +24,8 @@ type TabContentMembers = { className: string } -function VyperResult({ output, themeColor }: VyperResultProps) { +function VyperResult({ output }: VyperResultProps) { // const [active, setActive] = useState('abi') - const [active, setActive] = useState('abi') if (!output) return ( @@ -55,58 +53,17 @@ function VyperResult({ output, themeColor }: VyperResultProps) { ) } - // const tabContent = [ - // { - // tabHeadingText: 'ABI', - // tabPayload: Object.values(output)[0]['abi'], - // tabMemberType: 'abi', - // tabButtonText: () => 'Copy ABI', - // eventKey: 'abi' - // }, - // { - // tabHeadingText: 'Bytecode', - // // tabPayload: Object.values(output)[0]['bytecode'].object.toString(), - // tabMemberType: 'bytecode', - // tabButtonText: () => 'Copy Bytecode', - // eventKey: 'bytecode' - // }, - // { - // tabHeadingText: 'Runtime Bytecode', - // // tabPayload: Object.values(output)[0]['runtimeBytecode'].object.toString(), - // tabMemberType: 'bytecode_runtime', - // tabButtonText: () => 'Copy Runtime Bytecode', - // eventKey: 'bytecode_runtime' - // }, - // { - // tabHeadingText: 'LLL', - // tabPayload: Object.values(output)[0]['ir'] ? '' : '', - // tabMemberType: 'ir', - // tabButtonText: () => Object.values(output)[0]['ir'] ? 'Copy LLL Code' : 'Nothing to copy yet', - // eventKey: 'ir' - // } - // ] - return ( - // setActive(key)} justify> - // {tabContent.map((content, index) => ( - // - // {/* content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(output)[0]['abi'])}> - // - // - // { - // content.eventKey === 'abi' ? : ( - // - // ) - // } - // } */} - // - // ))} - // -

There was a result!

+ <> +
+
+ +
+ ) } diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx index 249d6f70c8..1d6ae34ae0 100644 --- a/apps/vyper/src/app/utils/compiler.tsx +++ b/apps/vyper/src/app/utils/compiler.tsx @@ -1,6 +1,6 @@ import {CompilationResult, ABIDescription} from '@remixproject/plugin-api' import axios from 'axios' -import { VyperCompilationResultType, CompileFormat, BytecodeObject, AST, ABI, ETHPM3Format, CompilerInformationObject } from './types' +import { VyperCompilationResultType, CompileFormat, ETHPM3Format, CompilerInformationObject } from './types' export interface Contract { name: string @@ -108,6 +108,7 @@ export async function compile(url: string, contract: Contract): Promise { result = await(await axios.get(url + 'artifacts/' + compileCode , { method: 'Get' })).data + console.log(result) return result } else if (status === 'FAILED') { const intermediate = await(await axios.get(url + 'exceptions/' + compileCode , { @@ -167,6 +168,37 @@ export function toStandardOutput(fileName: string, compilationResult: any): any } } } +export type StandardOutput = { + sources: { + [fileName: string]: { + id: number, + ast: AST + } + }, + contracts: { + [fileName: string]: { + [contractName: string]: { + abi: ABI, + contractName: string, + evm: { + bytecode: BytecodeObject, + deployedBytecode: BytecodeObject, + methodIdentifiers: { + [method: string]: string + } + } + } + } + } +} + +type AST = any // Replace with the actual AST type +type ABI = ABIDescription[] // Replace with the actual ABI type +type BytecodeObject = { + linkReferences: Record, + object: string, + opcodes: string +} /* export function createCompilationResultMessage(name: string, result: any) { diff --git a/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx b/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx new file mode 100644 index 0000000000..52fd791dfd --- /dev/null +++ b/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx @@ -0,0 +1,64 @@ +import { CopyToClipboard } from '@remix-ui/clipboard' +import { CustomTooltip } from '@remix-ui/helper' +import { ContractPropertyName } from '@remix-ui/solidity-compiler' +import { TreeView, TreeViewItem } from '@remix-ui/tree-view' +import { useIntl } from 'react-intl' +const _paq = (window._paq = window._paq || []) + + +export default function SolidityCompile({ contractProperties, selectedContract, help, insertValue, saveAs, plugin }: any) { + const intl = useIntl() + const downloadFn = () => { + _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download']) + saveAs(new Blob([JSON.stringify(contractProperties, null, '\t')]), `${selectedContract}_compData.json`) + } + return ( + <> +
+ {selectedContract} + + Download + +
+
+ { + {Object.keys(contractProperties).map((propertyName: ContractPropertyName, index) => { + const copyDetails = ( + + + + ) + const questionMark = ( + + + + ) + + return ( +
+ + {propertyName} {copyDetails} {questionMark} +
+ } + expand={propertyName === 'metadata' || propertyName === 'bytecode' ? true : false} + iconY='fas fa-caret-down' + > + {insertValue(contractProperties, propertyName)} + +
+ ) + })} + } + + + ) +} diff --git a/libs/remix-ui/solidity-compile-details/src/lib/components/vyperCompile.tsx b/libs/remix-ui/solidity-compile-details/src/lib/components/vyperCompile.tsx new file mode 100644 index 0000000000..10e73d5031 --- /dev/null +++ b/libs/remix-ui/solidity-compile-details/src/lib/components/vyperCompile.tsx @@ -0,0 +1,92 @@ +import { CopyToClipboard } from '@remix-ui/clipboard' +import { CustomTooltip } from '@remix-ui/helper' +import JSONTree, { ThemeKeys } from 'react-json-view' +import React, { useState } from 'react' +// import { Tabs, Tab, Button } from 'react-bootstrap' +import { useIntl } from 'react-intl' +import Tabs from 'react-bootstrap/Tabs' +import Tab from 'react-bootstrap/Tab' +import Button from 'react-bootstrap/Button' +import { TreeView, TreeViewItem } from '@remix-ui/tree-view' +import { ABIDescription } from '@remixproject/plugin-api' +const _paq = (window._paq = window._paq || []) + +export interface VyperCompilationResult { + status: 'success' + bytecode: string + bytecode_runtime: string + abi: ABIDescription[] + ir: string + method_identifiers: { + [method: string]: string + } +} + + +export default function VyperCompile({ saveAs, contractProperties, selectedContract }: any) { + const intl = useIntl() + const downloadFn = () => { + _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download']) + saveAs(new Blob([JSON.stringify(contractProperties, null, '\t')]), `${selectedContract}_compData.json`) + } + const [active, setActive] = useState('abi') + + const tabContent = [ + { + tabHeadingText: 'ABI', + tabPayload: Object.values(contractProperties)[0]['abi'], + tabMemberType: 'abi', + tabButtonText: () => 'Copy ABI', + eventKey: 'abi' + }, + { + tabHeadingText: 'Bytecode', + tabPayload: Object.values(contractProperties)[0]['bytecode'].object.toString(), + tabMemberType: 'bytecode', + tabButtonText: () => 'Copy Bytecode', + eventKey: 'bytecode' + }, + { + tabHeadingText: 'Runtime Bytecode', + tabPayload: Object.values(contractProperties)[0]['runtimeBytecode'].object.toString(), + tabMemberType: 'bytecode_runtime', + tabButtonText: () => 'Copy Runtime Bytecode', + eventKey: 'bytecode_runtime' + } + // { + // tabHeadingText: 'LLL', + // tabPayload: Object.values(contractProperties)[0]['ir'] ? '' : '', + // tabMemberType: 'ir', + // tabButtonText: () => Object.values(contractProperties)[0]['ir'] ? 'Copy LLL Code' : 'Nothing to copy yet', + // eventKey: 'ir' + // } + ] + return ( + <> +
+ {selectedContract} + + Download + +
+ setActive(key)} justify> + {tabContent.map((content, index) => ( + + content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(contractProperties)[0]['abi'])}> + + + { + content.eventKey === 'abi' ? : ( + + ) + } + + ))} + + + ) +} diff --git a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx index cac1531659..449eb84f63 100644 --- a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx +++ b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx @@ -4,72 +4,41 @@ import { TreeView, TreeViewItem } from '@remix-ui/tree-view' import { ContractPropertyName } from '@remix-ui/solidity-compiler' import React from 'react' -import { useIntl } from 'react-intl' +import SolidityCompile from './components/solidityCompile' +import VyperCompile from './components/vyperCompile' export interface RemixUiCompileDetailsProps { - plugin: any + plugin?: any contractProperties: any selectedContract: string - help: any - insertValue: any + help?: any + insertValue?: any saveAs: any } const _paq = (window._paq = window._paq || []) export function RemixUiCompileDetails({ plugin, contractProperties, selectedContract, saveAs, help, insertValue }: RemixUiCompileDetailsProps) { - const intl = useIntl() - const downloadFn = () => { - _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download']) - saveAs(new Blob([JSON.stringify(contractProperties, null, '\t')]), `${selectedContract}_compData.json`) - } + console.log(contractProperties) + return ( <> -
- {selectedContract} - - Download - -
-
- { - {Object.keys(contractProperties).map((propertyName: ContractPropertyName, index) => { - const copyDetails = ( - - - - ) - const questionMark = ( - - - - ) - - return ( -
- - {propertyName} {copyDetails} {questionMark} -
- } - expand={propertyName === 'metadata' || propertyName === 'bytecode' ? true : false} - iconY='fas fa-caret-down' - > - {insertValue(contractProperties, propertyName)} - -
- ) - })} - } - + { + contractProperties.abi && contractProperties.gasEstimates.Creation && contractProperties.web3Deploy ? ( + ) : + + } ) } diff --git a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx index f39eb74146..25b92593c0 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx +++ b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx @@ -123,7 +123,6 @@ export const ContractSelection = (props: ContractSelectionProps) => { } const insertValue = (details, propertyName: ContractPropertyName) => { - console.log({ details }) let node if (propertyName === 'web3Deploy' || propertyName === 'name' || propertyName === 'Assembly') { node = 
{details[propertyName]}
@@ -311,6 +310,7 @@ export const ContractSelection = (props: ContractSelectionProps) => { + {console.log(payload)}