Merge pull request #4167 from ethereum/compile-details-update

Compile details update

apps/remix-ide-e2e/src/commands/verifyContracts.ts

@@ -25,7 +25,6 @@ function verifyContracts (browser: NightwatchBrowser, compiledContractNames: str
           .click('*[data-id="compilation-details"]')
           .waitForElementVisible('*[data-id="remixui_treeviewitem_metadata"]')
           .pause(2000)
-          .click('*[data-id="remixui_treeviewitem_metadata"]')
           .waitForElementVisible('*[data-id="treeViewDivtreeViewItemcompiler"]')
           .pause(2000)
           .click('*[data-id="treeViewDivtreeViewItemcompiler"]')
@@ -43,7 +42,6 @@ function verifyContracts (browser: NightwatchBrowser, compiledContractNames: str
           .click('*[data-id="compilation-details"]')
           .waitForElementVisible('*[data-id="remixui_treeviewitem_metadata"]')
           .pause(2000)
-          .click('*[data-id="remixui_treeviewitem_metadata"]')
           .assert.visible('*[data-id="treeViewDivtreeViewItemsettings"]')
           .pause(2000)
           .click('*[data-id="treeViewDivtreeViewItemsettings"]')

apps/remix-ide-e2e/src/tests/transactionExecution.test.ts

@@ -240,7 +240,7 @@ module.exports = {
       .waitForElementPresent({
         locateStrategy: 'css selector',
         selector: 'select[data-id="runTabSelectAccount"] option[value="0xdD870fA1b7C4700F2BD7f44238821C26f7392148"]',
-        timeout: 240000
+        timeout: 250000
       }) // wait for the udapp to load the list of accounts
       .selectContract('MyResolver')
       .createContract('')

libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx

@@ -1,6 +1,8 @@
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { CustomTooltip } from '@remix-ui/helper'
 import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
+import { ContractPropertyName } from '@remix-ui/solidity-compiler'
+
 import React from 'react'
 import { useIntl } from 'react-intl'
 
@@ -32,7 +34,7 @@ export function RemixUiCompileDetails({ plugin, contractProperties, selectedCont
       </div>
       <div className="remixui_detailsJSON">
         <TreeView>
-          {Object.keys(contractProperties).map((propertyName, index) => {
+          {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" />
@@ -59,6 +61,8 @@ export function RemixUiCompileDetails({ plugin, contractProperties, selectedCont
                       {propertyName} {copyDetails} {questionMark}
                     </div>
                   }
+                  expand={propertyName === 'metadata' || propertyName === 'bytecode' ? true : false}
+                  iconY='fas fa-caret-down'
                 >
                   {insertValue(contractProperties, propertyName)}
                 </TreeViewItem>

libs/remix-ui/solidity-compiler/src/index.ts

@@ -2,3 +2,4 @@ export * from './lib/solidity-compiler'
 export * from './lib/logic'
 export * from './lib/logic/flattenerUtilities'
 export * from './lib/api/compiler-api'
+export * from './lib/types'

libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react' // eslint-disable-line
 import {FormattedMessage, useIntl} from 'react-intl'
-import {ContractSelectionProps} from './types'
+import {ContractPropertyName, ContractSelectionProps} from './types'
 import {PublishToStorage} from '@remix-ui/publish-to-storage' // eslint-disable-line
 import {TreeView, TreeViewItem} from '@remix-ui/tree-view' // eslint-disable-line
 import {CopyToClipboard} from '@remix-ui/clipboard' // eslint-disable-line
@@ -122,7 +122,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
     return ret
   }
 
-  const insertValue = (details, propertyName) => {
+  const insertValue = (details, propertyName: ContractPropertyName) => {
     let node
     if (propertyName === 'web3Deploy' || propertyName === 'name' || propertyName === 'Assembly') {
       node = <pre>{details[propertyName]}</pre>
@@ -197,7 +197,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
     const log = (
       <div className="remixui_detailsJSON">
         <TreeView>
-          {Object.keys(contractProperties).map((propertyName, index) => {
+          {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" />

libs/remix-ui/solidity-compiler/src/lib/types/index.ts

@@ -53,3 +53,7 @@ export interface CompilationDetails {
 export interface ContractsFile {
  [currentFile: string]: CompilationDetails
 }
+
+export type ContractPropertyName = 'compilerInput' | 'name' | 'metadata' | 'bytecode' | 'abi' | 'storageLayout'
+  | 'web3Deploy' | 'metadataHash' | 'functionHashes' | 'gasEstimates' | 'devdoc' | 'userdoc' | 'Runtime Bytecode'
+  | 'Assembly'