From f75d89943e33250e2514facf581660934f2ee76b Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Fri, 20 Oct 2023 11:21:12 +0100 Subject: [PATCH] showing compilation details in main tab --- .../src/app/plugins/compile-details.tsx | 24 ++++++-- .../src/lib/solidity-compile-details.tsx | 59 ++++++++++++++++++- .../src/lib/compiler-container.tsx | 11 +--- .../src/lib/contract-selection.tsx | 18 +++++- .../solidity-compiler/src/lib/css/style.css | 9 ++- .../src/lib/solidity-compiler.tsx | 2 +- 6 files changed, 101 insertions(+), 22 deletions(-) diff --git a/apps/remix-ide/src/app/plugins/compile-details.tsx b/apps/remix-ide/src/app/plugins/compile-details.tsx index 24a0cf3b4c..0992797864 100644 --- a/apps/remix-ide/src/app/plugins/compile-details.tsx +++ b/apps/remix-ide/src/app/plugins/compile-details.tsx @@ -19,16 +19,25 @@ export class CompilationDetailsPlugin extends ViewPlugin { dispatch: React.Dispatch = () => {} appManager: RemixAppManager element: HTMLDivElement + payload: any constructor(appManager: RemixAppManager) { super(profile) this.appManager = appManager this.element = document.createElement('div') this.element.setAttribute('id', 'compileDetails') + this.payload = { + contractProperties: {} as any, + intl: {} as any, + selectedContract: '', + help: {} as any, + insertValue: {} as any, + saveAs: {} as any, + } } async onActivation() { + await this.call('tabs', 'focus', 'compilationdetails') this.renderComponent() - // await this.call('tabs', 'focus', 'compilationdetails') _paq.push(['trackEvent', 'plugin', 'activated', 'compilationDetails']) } @@ -36,8 +45,9 @@ export class CompilationDetailsPlugin extends ViewPlugin { } - async showDetails() { + async showDetails(sentPayload: any) { await this.call('tabs', 'focus', 'compilationdetails') + this.payload = sentPayload this.renderComponent() } @@ -54,8 +64,8 @@ export class CompilationDetailsPlugin extends ViewPlugin { renderComponent() { this.dispatch({ - ...this - + ...this, + ...this.payload }) } @@ -63,6 +73,12 @@ export class CompilationDetailsPlugin extends ViewPlugin { return ( ) } 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 4b56c2f92a..328b4b3a62 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 @@ -1,14 +1,67 @@ +import { CopyToClipboard } from '@remix-ui/clipboard' +import { TreeView, TreeViewItem } from '@remix-ui/tree-view' import React from 'react' export interface RemixUiCompileDetailsProps { plugin: any + contractProperties: any + intl: any + selectedContract: string + help: any + insertValue: any + saveAs: any } -export function RemixUiCompileDetails({ plugin }: RemixUiCompileDetailsProps) { +const _paq = (window._paq = window._paq || []) + +export function RemixUiCompileDetails({ plugin, contractProperties, intl, selectedContract, saveAs, help, insertValue }: RemixUiCompileDetailsProps) { + + const downloadFn = () => { + _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download']) + saveAs(new Blob([JSON.stringify(contractProperties, null, '\t')]), `${selectedContract}_compData.json`) + } return ( <> -

Compile Details!!!

-

Every thing works fine.

+
+ {selectedContract}Download Compile details +
+
+ + {Object.keys(contractProperties).map((propertyName, index) => { + const copyDetails = ( + + + + ) + const questionMark = ( + + + + ) + + return ( +
+ + {propertyName} {copyDetails} {questionMark} +
+ } + > + {insertValue(contractProperties, propertyName)} + +
+ ) + })} + + ) } diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx index e57b540f93..586cf75953 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx +++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx @@ -41,7 +41,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => { //@ts-ignore pluginProps } = props // eslint-disable-line - console.log({ props }) + const [state, setState] = useState({ hideWarnings: false, autoCompile: false, @@ -1182,15 +1182,6 @@ export const CompilerContainer = (props: CompilerContainerProps) => { - ) 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 eb2fb58495..a77f404a7f 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx +++ b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx @@ -156,6 +156,15 @@ export const ContractSelection = (props: ContractSelectionProps) => { return 
{node || ''}
} + const payload = { + saveAs: saveAs, + intl: intl, + contractProperties: {}, + selectedContract: '', + help: {}, + insertValue: insertValue + } + const details = () => { _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'display']) if (!selectedContract) throw new Error('No contract compiled yet') @@ -182,6 +191,10 @@ export const ContractSelection = (props: ContractSelectionProps) => { // Make 'compilerInput' first field to display it as first item in 'Compilation Details' modal if (compilerInput) contractProperties.compilerInput = compilerInput contractProperties = Object.assign(contractProperties, contractsDetails[selectedContract]) + payload.contractProperties = contractProperties + payload.selectedContract = selectedContract + payload.help = help + payload.insertValue = insertValue const log = (
@@ -225,7 +238,7 @@ export const ContractSelection = (props: ContractSelectionProps) => { _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download']) saveAs(new Blob([JSON.stringify(contractProperties, null, '\t')]), `${selectedContract}_compData.json`) } - modal(selectedContract, log, intl.formatMessage({id: 'solidity.download'}), downloadFn, true, intl.formatMessage({id: 'solidity.close'}), null) + // modal(selectedContract, log, intl.formatMessage({id: 'solidity.download'}), downloadFn, true, intl.formatMessage({id: 'solidity.close'}), null) } const copyBytecode = () => { @@ -301,8 +314,9 @@ export const ContractSelection = (props: ContractSelectionProps) => {