yann300
11 months ago
committed by
GitHub
commit
bc775cb885
@ -0,0 +1,170 @@ |
||||
import React from 'react' |
||||
import { ViewPlugin } from '@remixproject/engine-web' |
||||
import {PluginViewWrapper} from '@remix-ui/helper' |
||||
import { RemixAppManager } from '../../remixAppManager' |
||||
import { RemixUiVyperCompileDetails } from '@remix-ui/vyper-compile-details' |
||||
import { ThemeKeys, ThemeObject } from '@microlink/react-json-view' |
||||
//@ts-ignore
|
||||
const _paq = (window._paq = window._paq || []) |
||||
|
||||
const profile = { |
||||
name: 'vyperCompilationDetails', |
||||
displayName: 'Vyper Compile Details', |
||||
description: 'Displays details from vyper compiler', |
||||
location: 'mainPanel', |
||||
methods: ['showDetails'], |
||||
events: [] |
||||
} |
||||
|
||||
export class VyperCompilationDetailsPlugin extends ViewPlugin { |
||||
dispatch: React.Dispatch<any> = () => {} |
||||
appManager: RemixAppManager |
||||
element: HTMLDivElement |
||||
payload: any |
||||
themeStyle: any |
||||
theme: ThemeKeys | ThemeObject |
||||
constructor(appManager: RemixAppManager) { |
||||
super(profile) |
||||
this.appManager = appManager |
||||
this.element = document.createElement('div') |
||||
this.element.setAttribute('id', 'vypercompileDetails') |
||||
this.payload = { |
||||
contractProperties: {} as any, |
||||
selectedContract: '', |
||||
help: {} as any, |
||||
insertValue: {} as any, |
||||
saveAs: {} as any, |
||||
} |
||||
} |
||||
|
||||
async onActivation() { |
||||
this.handleThemeChange() |
||||
await this.call('tabs', 'focus', 'vyperCompilationDetails') |
||||
this.renderComponent() |
||||
_paq.push(['trackEvent', 'plugin', 'activated', 'vyperCompilationDetails']) |
||||
} |
||||
|
||||
onDeactivation(): void { |
||||
|
||||
} |
||||
|
||||
async showDetails(sentPayload: any) { |
||||
const contractName = Object.entries(sentPayload).find(([key, value]) => key ) |
||||
await this.call('tabs', 'focus', 'vyperCompilationDetails') |
||||
this.profile.displayName = `${contractName}` |
||||
this.payload = sentPayload |
||||
const active = await this.call('theme', 'currentTheme') |
||||
if (active.quality === 'dark') { |
||||
switch(active.name) { |
||||
case 'HackerOwl': |
||||
this.theme = 'harmonic' |
||||
this.themeStyle = { backgroundColor: active.backgroundColor } |
||||
break |
||||
case 'Black': |
||||
this.theme = 'eighties' |
||||
this.themeStyle = { backgroundColor: active.backgroundColor } |
||||
break |
||||
case 'Cyborg': |
||||
this.theme = 'shapeshifter' |
||||
this.themeStyle = { backgroundColor: active.backgroundColor } |
||||
break |
||||
case 'Dark': |
||||
this.theme = 'flat' |
||||
this.themeStyle = { backgroundColor: active.backgroundColor } |
||||
break |
||||
default: |
||||
this.theme = 'shapeshifter' |
||||
this.themeStyle = { backgroundColor: active.backgroundColor } |
||||
break |
||||
} |
||||
} else { |
||||
switch(active.name) { |
||||
case 'Candy': |
||||
this.theme = 'apathy:inverted' |
||||
this.themeStyle = { backgroundColor: active.backgroundColor } |
||||
break |
||||
case 'Midcentury': |
||||
this.theme = 'apathy:inverted' |
||||
this.themeStyle = { backgroundColor: active.backgroundColor } |
||||
break |
||||
case 'Unicorn': |
||||
this.theme = 'apathy:inverted' |
||||
this.themeStyle = { backgroundColor: active.backgroundColor } |
||||
break |
||||
case 'Violet': |
||||
this.theme = 'summerfruit:inverted' |
||||
this.themeStyle = { backgroundColor: active.backgroundColor } |
||||
break |
||||
default: |
||||
this.theme = 'bright:inverted' |
||||
break |
||||
} |
||||
} |
||||
this.renderComponent() |
||||
} |
||||
|
||||
private handleThemeChange() { |
||||
this.on('theme', 'themeChanged', (theme: any) => { |
||||
if (theme.quality === 'dark') { |
||||
switch(theme.name) { |
||||
case 'HackerOwl': |
||||
this.theme = 'solarized' |
||||
this.themeStyle = { backgroundColor: theme.backgroundColor } |
||||
break |
||||
case 'Black': |
||||
this.theme = 'shapeshifter' |
||||
this.themeStyle = { backgroundColor: theme.backgroundColor } |
||||
break |
||||
case 'Cyborg': |
||||
this.theme = 'shapeshifter' |
||||
this.themeStyle = { backgroundColor: theme.backgroundColor } |
||||
break |
||||
case 'Dark': |
||||
this.theme = 'harmonic' |
||||
this.themeStyle = { backgroundColor: theme.backgroundColor } |
||||
break |
||||
default: |
||||
this.theme = 'shapeshifter' |
||||
this.themeStyle = { backgroundColor: theme.backgroundColor } |
||||
break |
||||
} |
||||
} else { |
||||
this.theme = 'bright:inverted' |
||||
this.themeStyle = { backgroundColor: theme.backgroundColor } |
||||
} |
||||
this.renderComponent() |
||||
}) |
||||
} |
||||
|
||||
setDispatch(dispatch: React.Dispatch<any>): void { |
||||
this.dispatch = dispatch |
||||
this.renderComponent() |
||||
} |
||||
render() { |
||||
return ( |
||||
<div id="compileDetails"> |
||||
<PluginViewWrapper plugin={this} /> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
renderComponent() { |
||||
this.dispatch({ |
||||
...this, |
||||
...this.payload, |
||||
themeStyle: this.themeStyle, |
||||
theme: this.theme |
||||
}) |
||||
} |
||||
|
||||
updateComponent(state: any) { |
||||
return ( |
||||
<RemixUiVyperCompileDetails |
||||
payload={state.payload} |
||||
theme={state.theme} |
||||
themeStyle={state.themeStyle} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,540 @@ |
||||
import {CompilationResult, ABIDescription} from '@remixproject/plugin-api' |
||||
|
||||
export interface VyperCompilationResult { |
||||
status: 'success' |
||||
bytecode: string |
||||
bytecode_runtime: string |
||||
abi: ABIDescription[] |
||||
ir: string |
||||
method_identifiers: { |
||||
[method: string]: string |
||||
} |
||||
} |
||||
|
||||
export interface VyperCompilationError { |
||||
status: 'failed' |
||||
column?: number |
||||
line?: number |
||||
message: string |
||||
} |
||||
|
||||
|
||||
export type VyperCompilationResultType = { |
||||
buildDependencies: any |
||||
compilers: [ |
||||
contractTypes: [], |
||||
name: string, |
||||
settings: { |
||||
optimize: boolean |
||||
outputSelection: { |
||||
['fileName']: { |
||||
['contractName']: string[] |
||||
} |
||||
} |
||||
version: string |
||||
} |
||||
] |
||||
contractTypes: { |
||||
['fileName']: { |
||||
abi: any[] |
||||
ast: { |
||||
name: string, |
||||
children: any[] |
||||
classification: number |
||||
col_offset: number |
||||
end_col_offset: number |
||||
end_lineno: number |
||||
lineno: number |
||||
src: { |
||||
length: number |
||||
jump_code: string |
||||
} |
||||
} |
||||
contractName: string |
||||
deploymentBytecode: { |
||||
bytecode: string |
||||
} |
||||
dev_messages: any |
||||
devdoc: { |
||||
methods: any |
||||
} |
||||
pcmap: any |
||||
runtimeBytecode: { |
||||
bytecode: string |
||||
} |
||||
sourceId: string |
||||
sourcemap: string |
||||
userdoc: { |
||||
methods: any |
||||
} |
||||
} |
||||
} |
||||
deployments: any |
||||
manifest: string |
||||
meta: any |
||||
sources: { |
||||
['fileName'] : { |
||||
checksum: any |
||||
content: string |
||||
imports: string[] |
||||
references: [] |
||||
urls: [] |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
export interface PackageManifest { |
||||
title: string; |
||||
description: string; |
||||
type: TypeEnum; |
||||
required: string[]; |
||||
version: string; |
||||
properties: PackageManifestProperties; |
||||
definitions: Definitions; |
||||
} |
||||
|
||||
export interface Definitions { |
||||
packageMeta: ByteString; |
||||
contractType: ByteString; |
||||
contractInstance: ContractInstance; |
||||
byteString: ByteString; |
||||
bytecodeObject: BytecodeObject; |
||||
linkReference: LinkReference; |
||||
linkValue: LinkValue; |
||||
identifier: ByteString; |
||||
contractInstanceName: ByteString; |
||||
deployment: Deployment; |
||||
packageContractInstanceName: ByteString; |
||||
compilerInformation: CompilerInformation; |
||||
address: Address; |
||||
transactionHash: Address; |
||||
blockHash: Address; |
||||
contentURI: ByteString; |
||||
} |
||||
|
||||
export interface Address { |
||||
title: string; |
||||
description: string; |
||||
allOf: AllOf[]; |
||||
} |
||||
|
||||
export interface AllOf { |
||||
ref?: string; |
||||
minLength?: number; |
||||
maxLength?: number; |
||||
} |
||||
|
||||
export interface ByteStringProperties { |
||||
contractName?: ByteString; |
||||
deploymentBytecode?: Meta; |
||||
runtimeBytecode?: Meta; |
||||
abi?: ByteString; |
||||
natspec?: ByteString; |
||||
compiler?: Meta; |
||||
authors?: ByteString; |
||||
license?: ByteString; |
||||
description?: ByteString; |
||||
keywords?: ByteString; |
||||
links?: Links; |
||||
} |
||||
|
||||
export interface ByteString { |
||||
title: string; |
||||
description?: string; |
||||
type: TypeEnum; |
||||
pattern?: string; |
||||
format?: string; |
||||
items?: Items; |
||||
properties?: ByteStringProperties; |
||||
patternProperties?: { [key: string]: Meta }; |
||||
} |
||||
|
||||
export interface Meta { |
||||
ref: string; |
||||
} |
||||
|
||||
export interface Links { |
||||
title: string; |
||||
descriptions: string; |
||||
type: TypeEnum; |
||||
additionalProperties: AdditionalProperties; |
||||
} |
||||
|
||||
export interface AdditionalProperties { |
||||
type: TypeEnum; |
||||
format: string; |
||||
} |
||||
|
||||
export type TypeEnum = "string" | "array" | "object"; |
||||
|
||||
export interface Items { |
||||
ref?: string; |
||||
type?: TypeEnum; |
||||
} |
||||
|
||||
export interface BytecodeObject { |
||||
title: string |
||||
type: TypeEnum |
||||
offsets: number[] |
||||
anyOf: BytecodeObjectAnyOf[] |
||||
properties: BytecodeObjectProperties |
||||
bytecode: string |
||||
linkReferences?: { offset?: any; length?: number; name?: string}[] |
||||
} |
||||
|
||||
export interface BytecodeObjectAnyOf { |
||||
required: string[]; |
||||
} |
||||
|
||||
export interface BytecodeObjectProperties { |
||||
bytecode: Meta; |
||||
linkReferences: Link; |
||||
linkDependencies: Link; |
||||
} |
||||
|
||||
export interface Link { |
||||
type: TypeEnum; |
||||
items: Meta; |
||||
} |
||||
|
||||
export interface CompilerInformation { |
||||
title: string; |
||||
description: string; |
||||
type: TypeEnum; |
||||
required: string[]; |
||||
properties: CompilerInformationProperties; |
||||
} |
||||
|
||||
export interface CompilerInformationProperties { |
||||
name: Name; |
||||
version: Name; |
||||
settings: Name; |
||||
} |
||||
|
||||
export interface Name { |
||||
description: string; |
||||
type: TypeEnum; |
||||
} |
||||
|
||||
export interface ContractInstance { |
||||
title: string; |
||||
description: string; |
||||
type: TypeEnum; |
||||
required: string[]; |
||||
properties: ContractInstanceProperties; |
||||
} |
||||
|
||||
export interface ContractInstanceProperties { |
||||
contractType: ByteString; |
||||
address: Meta; |
||||
transaction: Meta; |
||||
block: Meta; |
||||
runtimeBytecode: Meta; |
||||
compiler: Meta; |
||||
linkDependencies: ByteString; |
||||
} |
||||
|
||||
export interface Deployment { |
||||
title: string; |
||||
type: TypeEnum; |
||||
patternProperties: DeploymentPatternProperties; |
||||
} |
||||
|
||||
export interface DeploymentPatternProperties { |
||||
aZAZAZAZ09_0254$: Meta; |
||||
} |
||||
|
||||
export interface LinkReference { |
||||
title: string; |
||||
description: string; |
||||
type: TypeEnum; |
||||
required: string[]; |
||||
properties: LinkReferenceProperties; |
||||
} |
||||
|
||||
export interface LinkReferenceProperties { |
||||
offsets: Offsets; |
||||
length: Length; |
||||
name: Meta; |
||||
} |
||||
|
||||
export interface Length { |
||||
type: string; |
||||
minimum: number; |
||||
} |
||||
|
||||
export interface Offsets { |
||||
type: TypeEnum; |
||||
items: Length; |
||||
} |
||||
|
||||
export interface LinkValue { |
||||
title: string; |
||||
description: string; |
||||
type: TypeEnum; |
||||
required: string[]; |
||||
properties: LinkValueProperties; |
||||
oneOf: OneOf[]; |
||||
} |
||||
|
||||
export interface OneOf { |
||||
properties: OneOfProperties; |
||||
} |
||||
|
||||
export interface OneOfProperties { |
||||
type: TypeClass; |
||||
value: PurpleValue; |
||||
} |
||||
|
||||
export interface TypeClass { |
||||
enum: string[]; |
||||
} |
||||
|
||||
export interface PurpleValue { |
||||
ref?: string; |
||||
anyOf?: Meta[]; |
||||
} |
||||
|
||||
export interface LinkValueProperties { |
||||
offsets: Offsets; |
||||
type: Name; |
||||
value: FluffyValue; |
||||
} |
||||
|
||||
export interface FluffyValue { |
||||
description: string; |
||||
} |
||||
|
||||
export interface PackageManifestProperties { |
||||
manifestVersion: ManifestVersion; |
||||
packageName: ByteString; |
||||
meta: Meta; |
||||
version: Version; |
||||
sources: Sources; |
||||
contractTypes: ByteString; |
||||
deployments: ByteString; |
||||
buildDependencies: BuildDependencies; |
||||
} |
||||
|
||||
export interface BuildDependencies { |
||||
title: string; |
||||
type: TypeEnum; |
||||
patternProperties: BuildDependenciesPatternProperties; |
||||
} |
||||
|
||||
export interface BuildDependenciesPatternProperties { |
||||
aZAZ090254$: Meta; |
||||
} |
||||
|
||||
export interface ManifestVersion { |
||||
type: TypeEnum; |
||||
title: string; |
||||
description: string; |
||||
default: string; |
||||
enum: string[]; |
||||
} |
||||
|
||||
export interface Sources { |
||||
title: string; |
||||
type: TypeEnum; |
||||
patternProperties: SourcesPatternProperties; |
||||
} |
||||
|
||||
export interface SourcesPatternProperties { |
||||
empty: Empty; |
||||
} |
||||
|
||||
export interface Empty { |
||||
anyOf: AnyOf[]; |
||||
} |
||||
|
||||
export interface AnyOf { |
||||
title?: string; |
||||
type?: TypeEnum; |
||||
ref?: string; |
||||
} |
||||
|
||||
export interface Version { |
||||
title: string; |
||||
type: TypeEnum; |
||||
} |
||||
|
||||
export type CompileFormat = { |
||||
contractTypes: { |
||||
abi?: ABI[] |
||||
ast?: AST |
||||
contractName?: string |
||||
depolymentBytecode?: BytecodeObject |
||||
devMessages?: { [key: string]: string } |
||||
devdoc?: Devdoc |
||||
methodIdentifiers?: { [key: string]: string } |
||||
pcmap?: any |
||||
runtimeBytecode?: BytecodeObject |
||||
sourceId?: string |
||||
sourcemap?: string |
||||
userdoc?: { [key: string]: string } |
||||
} |
||||
manifest?: string |
||||
sources?: { |
||||
[fileName: string]: { |
||||
content: string |
||||
urls?: string[] |
||||
references?: string[] |
||||
imports?: string[] |
||||
checksum?: { [key: string]: string } |
||||
} |
||||
} |
||||
} |
||||
|
||||
export type Devdoc = { |
||||
methods: any |
||||
} |
||||
|
||||
export type ETHPM3Format = { |
||||
manifest: 'ethpm/3' |
||||
name: string |
||||
version: string |
||||
meta: Record<string, any> |
||||
buildDependencies: Record<string, any> |
||||
sources: { |
||||
[fileName: string]: { |
||||
content: string |
||||
checksum?: { |
||||
keccak256: string |
||||
hash: string |
||||
} |
||||
type?: any |
||||
license?: string |
||||
} |
||||
} |
||||
compilers: CompilerInformationObject[] |
||||
contractTypes: { |
||||
contractName: string |
||||
sourceId?: string |
||||
depolymentBytecode: { |
||||
bytecode: string |
||||
linkReferences: { |
||||
offset: any |
||||
length: number |
||||
name?: string |
||||
} |
||||
linkDependencies?: { offsets: number[]} |
||||
} |
||||
runtimeBytecode: { |
||||
bytecode: string |
||||
linkReferences: { |
||||
offset: any |
||||
length: number |
||||
name?: string |
||||
} |
||||
linkDependencies?: LinkValueObject |
||||
} |
||||
abi: ABI[] |
||||
ast: AST |
||||
userDoc?: { |
||||
methods: any |
||||
notice: string |
||||
} |
||||
devDoc?: { |
||||
methods: any, |
||||
author: string |
||||
details: string |
||||
title: string |
||||
license: string |
||||
} |
||||
} |
||||
deployments: { |
||||
[contractName: string]: ContractInstanceObject |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
export type CompilerInformationObject = { |
||||
name: string |
||||
version: string |
||||
settings?: { |
||||
optimizer: { |
||||
enabled: boolean |
||||
runs: number |
||||
} |
||||
outputSelection: { |
||||
[fileName: string]: { |
||||
[contractName: string]: string[] |
||||
} |
||||
} |
||||
}, |
||||
contractTypes?: string[] |
||||
} |
||||
|
||||
export type LinkValueObject = { |
||||
offsets: number[] |
||||
type: string |
||||
value: string |
||||
} |
||||
|
||||
export type PackageMetaDataObject = { |
||||
authors?: string[] |
||||
description?: string |
||||
keywords?: string[] |
||||
license?: string |
||||
links?: { |
||||
[key: string]: string |
||||
} |
||||
} |
||||
|
||||
export type ContractInstanceObject = { |
||||
contractType: string |
||||
address: string |
||||
transaction?: string |
||||
block?: string |
||||
runtimeBytecode?: BytecodeObject |
||||
compiler?: string |
||||
linkDependencies?: LinkValueObject |
||||
} |
||||
|
||||
export type ASTSrc = { |
||||
jumpCode: string; |
||||
length: number; |
||||
} |
||||
|
||||
export type Child = { |
||||
astType: string; |
||||
children: Child[]; |
||||
classification: number; |
||||
colOffset: number; |
||||
endColOffset: number; |
||||
endLineno: number; |
||||
lineno: number; |
||||
name?: string; |
||||
src: ChildSrc; |
||||
docStr?: Child; |
||||
} |
||||
|
||||
export type ChildSrc = { |
||||
jumpCode: string; |
||||
length: number; |
||||
start: number; |
||||
} |
||||
|
||||
export type AST = { |
||||
astType: string; |
||||
children: Child[]; |
||||
classification: number; |
||||
colOffset: number; |
||||
endColOffset: number; |
||||
endLineno: number; |
||||
lineno: number; |
||||
name: string; |
||||
src: ASTSrc; |
||||
} |
||||
|
||||
export type ABI = { |
||||
anonymous?: boolean; |
||||
inputs: any[]; |
||||
name?: string; |
||||
type: any |
||||
stateMutability?: any; |
||||
outputs?: any[]; |
||||
} |
||||
@ -0,0 +1,65 @@ |
||||
import { CopyToClipboard } from '@remix-ui/clipboard' |
||||
import { CustomTooltip } from '@remix-ui/helper' |
||||
import { ContractPropertyName } from '@remix-ui/solidity-compiler' |
||||
import React from 'react' |
||||
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 @@ |
||||
export * from './lib/vyper-compile-details' |
||||
@ -0,0 +1,28 @@ |
||||
import React from 'react' |
||||
import VyperCompile from './vyperCompile' |
||||
import { ThemeKeys, ThemeObject } from '@microlink/react-json-view' |
||||
|
||||
|
||||
interface RemixUiVyperCompileDetailsProps { |
||||
payload: any |
||||
theme?: ThemeKeys | ThemeObject |
||||
themeStyle?: any |
||||
} |
||||
|
||||
export function RemixUiVyperCompileDetails({ payload, theme, themeStyle }: RemixUiVyperCompileDetailsProps) { |
||||
const dpayload = Object.values(payload) as any ?? {} |
||||
const bcode = dpayload[0].bytecode ? dpayload[0].bytecode.object : '' |
||||
const runtimeBcode = dpayload[0].runtimeBytecode ? dpayload[0].runtimeBytecode.object : '' |
||||
const ir = dpayload[0].ir |
||||
const methodIdentifiers= dpayload[0].methodIdentifiers |
||||
const abi= dpayload[0].abi |
||||
return ( |
||||
<> |
||||
<VyperCompile |
||||
result={{bytecode: bcode, bytecodeRuntime: runtimeBcode, ir: ir, methodIdentifiers: methodIdentifiers, abi: abi}} |
||||
theme={theme} |
||||
themeStyle={themeStyle} |
||||
/> |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,85 @@ |
||||
import { CopyToClipboard } from '@remix-ui/clipboard' |
||||
import JSONTree, { ThemeKeys, ThemeObject } from '@microlink/react-json-view' |
||||
import React, { useState } from 'react' |
||||
import Tabs from 'react-bootstrap/Tabs' |
||||
import Tab from 'react-bootstrap/Tab' |
||||
import Button from 'react-bootstrap/Button' |
||||
import { ABIDescription } from '@remixproject/plugin-api' |
||||
const _paq = (window._paq = window._paq || []) |
||||
|
||||
export interface VyperCompilationResult { |
||||
status?: 'success' |
||||
bytecode: string |
||||
bytecodeRuntime: string |
||||
abi: ABIDescription[] |
||||
ir: string |
||||
methodIdentifiers: { |
||||
[method: string]: string |
||||
} |
||||
} |
||||
|
||||
export interface VyperCompileProps { |
||||
result: VyperCompilationResult |
||||
theme?: ThemeKeys | ThemeObject |
||||
themeStyle?: any |
||||
} |
||||
|
||||
export default function VyperCompile({result, theme, themeStyle}: VyperCompileProps) { |
||||
|
||||
const [active, setActive] = useState<keyof VyperCompilationResult>('abi') |
||||
const tabContent = [ |
||||
{ |
||||
tabHeadingText: 'ABI', |
||||
tabPayload: result.abi, |
||||
tabMemberType: 'abi', |
||||
tabButtonText: () => 'Copy ABI', |
||||
eventKey: 'abi' |
||||
}, |
||||
{ |
||||
tabHeadingText: 'Bytecode', |
||||
tabPayload: result.bytecode, |
||||
tabMemberType: 'bytecode', |
||||
tabButtonText: () => 'Copy Bytecode', |
||||
eventKey: 'bytecode' |
||||
}, |
||||
{ |
||||
tabHeadingText: 'Runtime Bytecode', |
||||
tabPayload: result.bytecodeRuntime, |
||||
tabMemberType: 'bytecode_runtime', |
||||
tabButtonText: () => 'Copy Runtime Bytecode', |
||||
eventKey: 'bytecode_runtime' |
||||
} |
||||
] |
||||
|
||||
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}`}> |
||||
<div className="d-flex flex-column w-75 justify-content-center mx-auto rounded-2"> |
||||
<CopyToClipboard getContent={() => (content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(result['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> |
||||
</> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue