Merge pull request #4153 from ethereum/compiledetails-mainpanel-plugin
Move compilation details to Main panel pluginpull/5370/head
Joseph Izang
1 year ago
committed by
GitHub
commit
831b4b9ff2
@ -1,7 +1,8 @@ |
||||
{ |
||||
"tabWidth": 2, |
||||
"printWidth": 500, |
||||
"bracketSpacing": false, |
||||
"useTabs": false, |
||||
"printWidth": 180, |
||||
"semi": false, |
||||
"singleQuote": true |
||||
} |
||||
|
||||
@ -0,0 +1,61 @@ |
||||
{ |
||||
"name": "compile-details", |
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json", |
||||
"sourceRoot": "apps/compile-details/src", |
||||
"projectType": "application", |
||||
"implicitDependencies": [ |
||||
], |
||||
"targets": { |
||||
"build": { |
||||
"executor": "@nrwl/webpack:webpack", |
||||
"outputs": ["{options.outputPath}"], |
||||
"defaultConfiguration": "development", |
||||
"options": { |
||||
"compiler": "babel", |
||||
"outputPath": "dist/apps/compile-details", |
||||
"index": "apps/compile-details/src/index.html", |
||||
"baseHref": "./", |
||||
"main": "apps/compile-details/src/main.tsx", |
||||
"tsConfig": "apps/compile-details/tsconfig.app.json", |
||||
"assets": [ |
||||
"apps/compile-details/src/favicon.ico", |
||||
"apps/compile-details/src/profile.json" |
||||
], |
||||
"styles": [], |
||||
"scripts": [], |
||||
"webpackConfig": "apps/compile-details/webpack.config.js" |
||||
}, |
||||
"configurations": { |
||||
"development": { |
||||
}, |
||||
"production": { |
||||
"fileReplacements": [ |
||||
{ |
||||
"replace": "apps/compile-details/src/environments/environment.ts", |
||||
"with": "apps/compile-details/src/environments/environment.prod.ts" |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
"serve": { |
||||
"executor": "@nrwl/webpack:dev-server", |
||||
"defaultConfiguration": "development", |
||||
"options": { |
||||
"buildTarget": "compile-details:build", |
||||
"hmr": true, |
||||
"baseHref": "/" |
||||
}, |
||||
"configurations": { |
||||
"development": { |
||||
"buildTarget": "compile-details:build:development", |
||||
"port": 6003 |
||||
}, |
||||
"production": { |
||||
"buildTarget": "compile-details:build:production" |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
"tags": [] |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>Compilation Details</title> |
||||
<base href="/" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" /> |
||||
</head> |
||||
<body> |
||||
<div id="root"></div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,23 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../../dist/out-tsc", |
||||
"types": ["node"] |
||||
}, |
||||
"files": [ |
||||
"../../node_modules/@nrwl/react/typings/cssmodule.d.ts", |
||||
"../../node_modules/@nrwl/react/typings/image.d.ts" |
||||
], |
||||
"exclude": [ |
||||
"jest.config.ts", |
||||
"**/*.spec.ts", |
||||
"**/*.test.ts", |
||||
"**/*.spec.tsx", |
||||
"**/*.test.tsx", |
||||
"**/*.spec.js", |
||||
"**/*.test.js", |
||||
"**/*.spec.jsx", |
||||
"**/*.test.jsx" |
||||
], |
||||
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
{ |
||||
"extends": "../../tsconfig.base.json", |
||||
"compilerOptions": { |
||||
"jsx": "react-jsx", |
||||
"allowJs": true, |
||||
"esModuleInterop": true, |
||||
"allowSyntheticDefaultImports": true |
||||
}, |
||||
"files": [], |
||||
"include": [], |
||||
"references": [ |
||||
{ |
||||
"path": "./tsconfig.app.json" |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,70 @@ |
||||
const { composePlugins, withNx } = require('@nrwl/webpack') |
||||
const { withReact } = require('@nrwl/react') |
||||
const webpack = require('webpack') |
||||
const TerserPlugin = require('terser-webpack-plugin') |
||||
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') |
||||
|
||||
// Nx plugins for webpack.
|
||||
module.exports = composePlugins(withNx(), withReact(), config => { |
||||
// Update the webpack config as needed here.
|
||||
// e.g. `config.plugins.push(new MyPlugin())`
|
||||
|
||||
// add fallback for node modules
|
||||
config.resolve.fallback = { |
||||
...config.resolve.fallback, |
||||
path: require.resolve('path-browserify'), |
||||
fs: false, |
||||
} |
||||
|
||||
// add externals
|
||||
config.externals = { |
||||
...config.externals, |
||||
solc: 'solc', |
||||
} |
||||
|
||||
config.module.rules.push({ |
||||
test: /\.hbs$/, |
||||
type: 'asset/source', |
||||
}) |
||||
|
||||
// add public path
|
||||
config.output.publicPath = '/' |
||||
|
||||
// add copy & provide plugin
|
||||
config.plugins.push( |
||||
new webpack.ProvidePlugin({ |
||||
Buffer: ['buffer', 'Buffer'], |
||||
url: ['url', 'URL'], |
||||
process: 'process/browser', |
||||
}), |
||||
new webpack.DefinePlugin({}), |
||||
) |
||||
|
||||
// souce-map loader
|
||||
config.module.rules.push({ |
||||
test: /\.js$/, |
||||
use: ['source-map-loader'], |
||||
enforce: 'pre', |
||||
}) |
||||
|
||||
config.ignoreWarnings = [/Failed to parse source map/] // ignore source-map-loader warnings
|
||||
|
||||
// set minimizer
|
||||
config.optimization.minimizer = [ |
||||
new TerserPlugin({ |
||||
parallel: true, |
||||
terserOptions: { |
||||
ecma: 2015, |
||||
compress: false, |
||||
mangle: false, |
||||
format: { |
||||
comments: false, |
||||
}, |
||||
}, |
||||
extractComments: false, |
||||
}), |
||||
new CssMinimizerPlugin(), |
||||
] |
||||
|
||||
return config |
||||
}) |
||||
@ -0,0 +1,84 @@ |
||||
import React from 'react' |
||||
import { ViewPlugin } from '@remixproject/engine-web' |
||||
import {PluginViewWrapper} from '@remix-ui/helper' |
||||
import { RemixAppManager } from '../../remixAppManager' |
||||
import { RemixUiCompileDetails } from '@remix-ui/solidity-compile-details' |
||||
|
||||
const _paq = (window._paq = window._paq || []) |
||||
|
||||
const profile = { |
||||
name: 'compilationDetails', |
||||
displayName: 'Solidity Compile Details', |
||||
description: 'Displays details from solidity compiler', |
||||
location: 'mainPanel', |
||||
methods: ['showDetails'], |
||||
events: [] |
||||
} |
||||
|
||||
export class CompilationDetailsPlugin extends ViewPlugin { |
||||
dispatch: React.Dispatch<any> = () => {} |
||||
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, |
||||
selectedContract: '', |
||||
help: {} as any, |
||||
insertValue: {} as any, |
||||
saveAs: {} as any, |
||||
} |
||||
} |
||||
|
||||
async onActivation() { |
||||
await this.call('tabs', 'focus', 'compilationDetails') |
||||
this.renderComponent() |
||||
_paq.push(['trackEvent', 'plugin', 'activated', 'compilationDetails']) |
||||
} |
||||
|
||||
onDeactivation(): void { |
||||
|
||||
} |
||||
|
||||
async showDetails(sentPayload: any) { |
||||
await this.call('tabs', 'focus', 'compilationDetails') |
||||
this.payload = sentPayload |
||||
this.renderComponent() |
||||
} |
||||
|
||||
setDispatch(dispatch: React.Dispatch<any>): void { |
||||
this.dispatch = dispatch |
||||
} |
||||
render() { |
||||
return ( |
||||
<div id="compileDetails"> |
||||
<PluginViewWrapper plugin={this} /> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
renderComponent() { |
||||
this.dispatch({ |
||||
...this, |
||||
...this.payload |
||||
}) |
||||
} |
||||
|
||||
updateComponent(state: any) { |
||||
return ( |
||||
<RemixUiCompileDetails |
||||
plugin={this} |
||||
contractProperties={state.contractProperties} |
||||
selectedContract={state.selectedContract} |
||||
saveAs={state.saveAs} |
||||
help={state.help} |
||||
insertValue={state.insertValue} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1 @@ |
||||
export * from './lib/solidity-compile-details' |
||||
@ -0,0 +1,72 @@ |
||||
import { CopyToClipboard } from '@remix-ui/clipboard' |
||||
import { CustomTooltip } from '@remix-ui/helper' |
||||
import { TreeView, TreeViewItem } from '@remix-ui/tree-view' |
||||
import React from 'react' |
||||
import { useIntl } from 'react-intl' |
||||
|
||||
export interface RemixUiCompileDetailsProps { |
||||
plugin: any |
||||
contractProperties: any |
||||
selectedContract: string |
||||
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`) |
||||
} |
||||
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, 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> |
||||
} |
||||
> |
||||
{insertValue(contractProperties, propertyName)} |
||||
</TreeViewItem> |
||||
</div> |
||||
) |
||||
})} |
||||
</TreeView> |
||||
</div> |
||||
</> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue