tracking compile results

pull/4182/head
Joseph Izang 12 months ago
parent 8ec50238f6
commit 4a75e124fb
  1. 2
      apps/vyper/src/app/components/CompilerButton.tsx
  2. 65
      apps/vyper/src/app/components/VyperResult.tsx
  3. 34
      apps/vyper/src/app/utils/compiler.tsx
  4. 64
      libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx
  5. 92
      libs/remix-ui/solidity-compile-details/src/lib/components/vyperCompile.tsx
  6. 77
      libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
  7. 2
      libs/remix-ui/solidity-compiler/src/lib/contract-selection.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({

@ -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<keyof VyperCompilationResult>('abi')
const [active, setActive] = useState<keyof VyperCompilationResult>('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 (
// <Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)} justify>
// {tabContent.map((content, index) => (
// <Tab eventKey={content.eventKey} title={content.tabHeadingText} as={'span'} key={`${index}-${content.eventKey}`}>
// {/* <CopyToClipboard getContent={() => content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(output)[0]['abi'])}>
// <Button variant="info" className="copy" data-id={content.eventKey === 'abi' ? "copy-abi" : ''}>
// {content.tabButtonText()}
// </Button>
// </CopyToClipboard>
// {
// content.eventKey === 'abi' ? <JSONTree src={content.tabPayload} theme={themeColor as any}/> : (
// <textarea defaultValue={content.tabPayload}></textarea>
// )
// }
// } */}
// <Button>
// {content.tabButtonText()}
// </Button>
// </Tab>))}
// </Tabs>
<h1>There was a result!</h1>
<>
<div className="border border-top"></div>
<div>
<button className="btn btn-secondary btn-block mx-2" onClick={() => {
}}>
<span>Compilation Details</span>
</button>
</div>
</>
)
}

@ -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<any> {
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<string, any>,
object: string,
opcodes: string
}
/*
export function createCompilationResultMessage(name: string, result: any) {

@ -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 (
<>
<div className="d-flex justify-content-between align-items-center mr-1">
<span className="lead">{selectedContract}</span>
<CustomTooltip tooltipText={intl.formatMessage({id: 'solidity.compileDetails'})}>
<span className="btn btn-outline-success border-success mr-1" onClick={downloadFn}>Download</span>
</CustomTooltip>
</div>
<div className="remixui_detailsJSON">
{<TreeView>
{Object.keys(contractProperties).map((propertyName: ContractPropertyName, index) => {
const copyDetails = (
<span className="remixui_copyDetails">
<CopyToClipboard tip={intl.formatMessage({id: 'solidity.copy'})} content={contractProperties[propertyName]} direction="top" />
</span>
)
const questionMark = (
<span className="remixui_questionMark">
<i
title={intl.formatMessage({
id: `solidity.${propertyName}`,
defaultMessage: help[propertyName]
})}
className="fas fa-question-circle"
aria-hidden="true"
></i>
</span>
)
return (
<div className="remixui_log" key={index}>
<TreeViewItem
label={
<div data-id={`remixui_treeviewitem_${propertyName}`} className="remixui_key">
{propertyName} {copyDetails} {questionMark}
</div>
}
expand={propertyName === 'metadata' || propertyName === 'bytecode' ? true : false}
iconY='fas fa-caret-down'
>
{insertValue(contractProperties, propertyName)}
</TreeViewItem>
</div>
)
})}
</TreeView>}
</div>
</>
)
}

@ -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<keyof VyperCompilationResult>('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 (
<>
<div className="d-flex justify-content-between align-items-center mr-1">
<span className="lead">{selectedContract}</span>
<CustomTooltip tooltipText={intl.formatMessage({id: 'solidity.compileDetails'})}>
<span className="btn btn-outline-success border-success mr-1" onClick={downloadFn}>Download</span>
</CustomTooltip>
</div>
<Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)} justify>
{tabContent.map((content, index) => (
<Tab eventKey={content.eventKey} title={content.tabHeadingText} as={'span'} key={`${index}-${content.eventKey}`}>
<CopyToClipboard getContent={() => content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(contractProperties)[0]['abi'])}>
<Button variant="info" className="copy" data-id={content.eventKey === 'abi' ? "copy-abi" : ''}>
{content.tabButtonText()}
</Button>
</CopyToClipboard>
{
content.eventKey === 'abi' ? <JSONTree src={content.tabPayload} theme={{} as any}/> : (
<textarea defaultValue={content.tabPayload}></textarea>
)
}
<Button>
{content.tabButtonText()}
</Button>
</Tab>))}
</Tabs>
</>
)
}

@ -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 (
<>
<div className="d-flex justify-content-between align-items-center mr-1">
<span className="lead">{selectedContract}</span>
<CustomTooltip tooltipText={intl.formatMessage({id: 'solidity.compileDetails'})}>
<span className="btn btn-outline-success border-success mr-1" onClick={downloadFn}>Download</span>
</CustomTooltip>
</div>
<div className="remixui_detailsJSON">
{<TreeView>
{Object.keys(contractProperties).map((propertyName: ContractPropertyName, index) => {
const copyDetails = (
<span className="remixui_copyDetails">
<CopyToClipboard tip={intl.formatMessage({id: 'solidity.copy'})} content={contractProperties[propertyName]} direction="top" />
</span>
)
const questionMark = (
<span className="remixui_questionMark">
<i
title={intl.formatMessage({
id: `solidity.${propertyName}`,
defaultMessage: help[propertyName]
})}
className="fas fa-question-circle"
aria-hidden="true"
></i>
</span>
)
return (
<div className="remixui_log" key={index}>
<TreeViewItem
label={
<div data-id={`remixui_treeviewitem_${propertyName}`} className="remixui_key">
{propertyName} {copyDetails} {questionMark}
</div>
}
expand={propertyName === 'metadata' || propertyName === 'bytecode' ? true : false}
iconY='fas fa-caret-down'
>
{insertValue(contractProperties, propertyName)}
</TreeViewItem>
</div>
)
})}
</TreeView>}
</div>
{
contractProperties.abi && contractProperties.gasEstimates.Creation && contractProperties.web3Deploy ? (
<SolidityCompile
contractProperties={contractProperties}
plugin={plugin}
selectedContract={selectedContract}
help={help}
insertValue={insertValue}
saveAs={saveAs}
/> ) :
<VyperCompile
saveAs={saveAs}
contractProperties={contractProperties}
selectedContract={selectedContract}
/>
}
</>
)
}

@ -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 = <pre>{details[propertyName]}</pre>
@ -311,6 +310,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
</span>
</CustomTooltip>
</button>
{console.log(payload)}
<button
data-id="compilation-details"
className="btn btn-secondary btn-block"

Loading…
Cancel
Save