Joseph Izang
12 months ago
parent
cec124a2dc
commit
c894d158d3
@ -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> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
Loading…
Reference in new issue