|
|
|
|
@ -1,13 +1,10 @@ |
|
|
|
|
import { CopyToClipboard } from '@remix-ui/clipboard' |
|
|
|
|
import { CustomTooltip } from '@remix-ui/helper' |
|
|
|
|
import JSONTree, { ThemeKeys } from 'react-json-view' |
|
|
|
|
import JSONTree, { ThemeKeys, ThemeObject } from '@microlink/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 || []) |
|
|
|
|
|
|
|
|
|
@ -22,70 +19,69 @@ export interface VyperCompilationResult { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export interface VyperCompileProps { |
|
|
|
|
result: VyperCompilationResult |
|
|
|
|
theme?: ThemeKeys | ThemeObject |
|
|
|
|
themeStyle?: any |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function VyperCompile(props: VyperCompilationResult) { |
|
|
|
|
export default function VyperCompile({result, theme, themeStyle}: VyperCompileProps) { |
|
|
|
|
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 [active, setActive] = useState<keyof VyperCompilationResult>('abi') |
|
|
|
|
console.log(theme, themeStyle) |
|
|
|
|
const tabContent = [ |
|
|
|
|
{ |
|
|
|
|
tabHeadingText: 'ABI', |
|
|
|
|
tabPayload: props.abi, //Object.values(props)[0]['abi'],
|
|
|
|
|
tabPayload: result.abi, |
|
|
|
|
tabMemberType: 'abi', |
|
|
|
|
tabButtonText: () => 'Copy ABI', |
|
|
|
|
eventKey: 'abi' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
tabHeadingText: 'Bytecode', |
|
|
|
|
tabPayload: props.bytecode, //Object.values(props)[0]['bytecode'].object.toString(),
|
|
|
|
|
tabPayload: result.bytecode, |
|
|
|
|
tabMemberType: 'bytecode', |
|
|
|
|
tabButtonText: () => 'Copy Bytecode', |
|
|
|
|
eventKey: 'bytecode' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
tabHeadingText: 'Runtime Bytecode', |
|
|
|
|
tabPayload: props.bytecodeRuntime,// Object.values(props)[0]['runtimeBytecode'].object.toString(),
|
|
|
|
|
tabPayload: result.bytecodeRuntime, |
|
|
|
|
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(props)[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 as ABIDescription[]} theme={{} as any}/> : ( |
|
|
|
|
<textarea defaultValue={content.tabPayload as string}></textarea> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
{/* <Button> |
|
|
|
|
{content.tabButtonText()} |
|
|
|
|
</Button> */} |
|
|
|
|
</Tab>))} |
|
|
|
|
<div className="d-flex flex-column w-75 justify-content-center mx-auto rounded-2"> |
|
|
|
|
<CopyToClipboard getContent={() => (content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(result)[0]['abi']))}> |
|
|
|
|
<Button variant="info" className="copy mt-3 ml-2" data-id={content.eventKey === 'abi' ? 'copy-abi' : ''}> |
|
|
|
|
<span className="far fa-copy mr-2"></span> |
|
|
|
|
{content.tabButtonText()} |
|
|
|
|
</Button> |
|
|
|
|
</CopyToClipboard> |
|
|
|
|
{content.eventKey === 'abi' ? ( |
|
|
|
|
<div className="my-3"> |
|
|
|
|
<JSONTree |
|
|
|
|
src={content.tabPayload as ABIDescription[]} |
|
|
|
|
theme={theme} |
|
|
|
|
style={themeStyle} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
) : ( |
|
|
|
|
<div className="w-100 mt-2 p-2 mx-auto"> |
|
|
|
|
<textarea className="form-control rounded-2" defaultValue={content.tabPayload as string} rows={15}></textarea> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
</Tab> |
|
|
|
|
))} |
|
|
|
|
</Tabs> |
|
|
|
|
</> |
|
|
|
|
) |
|
|
|
|
|
Joseph Izang
12 months ago