add tooltip to download button.

apps/remix-ide/src/app/plugins/compile-details.tsx

@@ -27,7 +27,6 @@ export class CompilationDetailsPlugin extends ViewPlugin {
     this.element.setAttribute('id', 'compileDetails')
     this.payload = {
       contractProperties: {} as any,
-      intl: {} as any,
       selectedContract: '',
       help: {} as any,
       insertValue: {} as any,
@@ -74,7 +73,6 @@ export class CompilationDetailsPlugin extends ViewPlugin {
       <RemixUiCompileDetails
         plugin={this}
         contractProperties={state.contractProperties}
-        intl={state.intl}
         selectedContract={state.selectedContract}
         saveAs={state.saveAs}
         help={state.help}

apps/remix-ide/src/app/tabs/locales/en/solidity.json

@@ -59,6 +59,7 @@
   "solidity.copyBytecode": "Copy Bytecode to clipboard",
   "solidity.unableToDisplay": "Unable to display",
   "solidity.download": "Download",
+  "solidity.compileDetails": "Download compilation details (JSON format)",
   "solidity.close": "Close",
   "solidity.contract": "Contract",
   "solidity.displayContractDetails": "Display Contract Details",

apps/remix-ide/src/remixAppManager.js

@@ -80,7 +80,7 @@ const requiredModules = [
 // dependentModules shouldn't be manually activated (e.g hardhat is activated by remixd)
 const dependentModules = ['foundry', 'hardhat', 'truffle', 'slither']
 
-const loadLocalPlugins = ['doc-gen', 'doc-viewer', 'etherscan', 'vyper', 'solhint', 'walletconnect', 'circuit-compiler']
+const loadLocalPlugins = ['doc-gen', 'doc-viewer', 'etherscan', 'vyper', 'solhint', 'walletconnect', 'circuit-compiler', 'compilationDetails']
 
 const sensitiveCalls = {
   fileManager: ['writeFile', 'copyFile', 'rename', 'copyDir'],

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

@@ -1,11 +1,12 @@
 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
-  intl: any
   selectedContract: string
   help: any
   insertValue: any
@@ -14,16 +15,20 @@ export interface RemixUiCompileDetailsProps {
 
 const _paq = (window._paq = window._paq || [])
 
-export function RemixUiCompileDetails({ plugin, contractProperties, intl, selectedContract, saveAs, help, insertValue }: RemixUiCompileDetailsProps) {
+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>
-        <span>{selectedContract}</span><span>Download Compile details</span>
+      <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>

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

@@ -158,7 +158,6 @@ export const ContractSelection = (props: ContractSelectionProps) => {
 
   const payload = {
     saveAs: saveAs,
-    intl: intl,
     contractProperties: {},
     selectedContract: '',
     help: {},