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

@@ -147,7 +147,7 @@ module.exports = {
       .clickFunction('inputValue3 - transact (not payable)', { types: 'uint256[] _u', values: '["2.445e10", "13e1"]' })
       .waitForElementContainsText('*[data-id="terminalJournal"]', '24450000000', 60000)
       .waitForElementContainsText('*[data-id="terminalJournal"]', '130', 60000)
-      .click('*[data-id="deployAndRunClearInstances"]')      
+      .click('*[data-id="deployAndRunClearInstances"]')
   },
 
   'Should Compile and Deploy a contract which define a custom error, the error should be logged in the terminal #group3': function (browser: NightwatchBrowser) {
@@ -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('')
@@ -385,7 +385,7 @@ contract C {
       content: `// SPDX-License-Identifier: GPL-3.0
 
       pragma solidity ^0.8.7;
-      
+
       /// error description
       /// @param a param1
       /// @param b param2
@@ -397,7 +397,7 @@ contract C {
           }
           function g() public {
               revert CustomError(2, 3, "error_string_2");
-          }          
+          }
       }`
     }
   },
@@ -406,7 +406,7 @@ contract C {
       content: `// SPDX-License-Identifier: GPL-3.0
 
       pragma solidity ^0.8.7;
-      
+
       library lib {
           /// error description from library
           /// @param a param1 from library
@@ -415,13 +415,13 @@ contract C {
           error CustomError(uint a, uint b, string c);
           function set() public {
               revert CustomError(48, 46, "error_string_from_library");
-          }      
-      }      
-      
+          }
+      }
+
       contract D {
           function h() public {
               lib.set();
-          }      
+          }
       }`
     }
   },
@@ -439,10 +439,10 @@ contract C {
       contract Owner {
 
           address private owner;
-          
+
           // event for EVM logging
           event OwnerSet(address indexed oldOwner, address indexed newOwner);
-          
+
           // modifier to check if caller is owner
           modifier isOwner() {
               // If the first argument of 'require' evaluates to 'false', execution terminates and all
@@ -453,7 +453,7 @@ contract C {
               require(msg.sender == owner, "Caller is not owner");
               _;
           }
-          
+
           /**
            * @dev Set contract deployer as owner
            */
@@ -472,7 +472,7 @@ contract C {
           }
 
           /**
-           * @dev Return owner address 
+           * @dev Return owner address
            * @return address of owner
            */
           function getOwner() external view returns (address) {
@@ -507,7 +507,7 @@ contract C {
           }
 
           /**
-           * @dev Return value 
+           * @dev Return value
            * @return value of 'number'
            */
           function retrieve() public view returns (uint256){
@@ -539,7 +539,7 @@ contract C {
                 return resolver.addr(node);
             }
         }
-        `      
+        `
     }
   }, {
     "scientific_notation.sol": {
@@ -571,7 +571,7 @@ contract C {
              cake++;
           }
       }
-        `      
+        `
     }
   }
 ]

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

@@ -1,4 +1,5 @@
 export * from './lib/solidity-compiler'
 export * from './lib/logic'
 export * from './lib/logic/flattenerUtilities'
-export * from './lib/api/compiler-api'
+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'