mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

add custom tooltip to solidity-compiler

Browse Source
pull/3081/head
Joseph Izang 2 years ago
parent c118f2388a
commit 86f6747bf5
5 changed files with 76 additions and 98 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
  2. 2
      libs/remix-ui/helper/src/types/customtooltip.ts
  3. 2
      libs/remix-ui/search/src/lib/components/Find.tsx
  4. 121
      libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
  5. 47
      libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx

2
libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
Unescape View File

@ -12,7 +12,7 @@ export function CustomTooltip({ children, placement, tooltipId, tooltipClasses,
placement={placement} placement={placement}
overlay={ overlay={
<Tooltip id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} className={tooltipClasses}> <Tooltip id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} className={tooltipClasses}>
<span className={tooltipTextClasses}>{tooltipText}</span> {typeof tooltipText === 'string' ? (<span className={tooltipTextClasses}>{tooltipText}</span>) : (tooltipText)}
</Tooltip> </Tooltip>
} }
> >

2
libs/remix-ui/helper/src/types/customtooltip.ts
Unescape View File

@ -6,6 +6,6 @@ export type CustomTooltipType = {
placement?: Placement, placement?: Placement,
tooltipId?: string, tooltipId?: string,
tooltipClasses?:string, tooltipClasses?:string,
tooltipText: string, tooltipText: string | JSX.Element,
tooltipTextClasses?: string tooltipTextClasses?: string
} }

2
libs/remix-ui/search/src/lib/components/Find.tsx
Unescape View File

@ -1,5 +1,5 @@
import { CustomTooltip } from '@remix-ui/helper' import { CustomTooltip } from '@remix-ui/helper'
import React, { useContext, useEffect, useRef, useState } from 'react' import React, { useContext, useEffect, useState } from 'react'
import { SearchContext } from '../context/context' import { SearchContext } from '../context/context'
export const Find = () => { export const Find = () => {

121
libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
Unescape View File

@ -2,11 +2,10 @@ import React, { useEffect, useState, useRef, useReducer } from 'react' // eslint
import semver from 'semver' import semver from 'semver'
import { CompilerContainerProps } from './types' import { CompilerContainerProps } from './types'
import { ConfigurationSettings } from '@remix-project/remix-lib-ts' import { ConfigurationSettings } from '@remix-project/remix-lib-ts'
import { checkSpecialChars, extractNameFromKey } from '@remix-ui/helper' import { checkSpecialChars, CustomTooltip, extractNameFromKey } from '@remix-ui/helper'
import { canUseWorker, baseURLBin, baseURLWasm, urlFromVersion, pathToURL, promisedMiniXhr } from '@remix-project/remix-solidity' import { canUseWorker, baseURLBin, baseURLWasm, urlFromVersion, pathToURL, promisedMiniXhr } from '@remix-project/remix-solidity'
import { compilerReducer, compilerInitialState } from './reducers/compiler' import { compilerReducer, compilerInitialState } from './reducers/compiler'
import { resetEditorMode, listenToEvents } from './actions/compiler' import { resetEditorMode, listenToEvents } from './actions/compiler'
import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
import { getValidLanguage } from '@remix-project/remix-solidity' import { getValidLanguage } from '@remix-project/remix-solidity'
import { CopyToClipboard } from '@remix-ui/clipboard' import { CopyToClipboard } from '@remix-ui/clipboard'
import { configFileContent } from './compilerConfiguration' import { configFileContent } from './compilerConfiguration'
@ -725,26 +724,22 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
<div className='pt-0 remixui_compilerSection'> <div className='pt-0 remixui_compilerSection'>
<div className="mb-1"> <div className="mb-1">
<label className="remixui_compilerLabel form-check-label" htmlFor="versionSelector">Compiler</label> <label className="remixui_compilerLabel form-check-label" htmlFor="versionSelector">Compiler</label>
<OverlayTrigger <CustomTooltip
placement="top" placement="top"
overlay={ tooltipId="promptCompilerTooltip"
<Tooltip id="promptCompilerTooltip" className="text-nowrap"> tooltipClasses="text-nowrap"
<span>{"Add a custom compiler with URL"}</span> tooltipText={"Add a custom compiler with URL"}
</Tooltip>
}
> >
<span className="far fa-plus border-0 p-0 ml-3" onClick={() => promptCompiler()}></span> <span className="far fa-plus border-0 p-0 ml-3" onClick={() => promptCompiler()}></span>
</OverlayTrigger> </CustomTooltip>
<OverlayTrigger <CustomTooltip
placement="top" placement="top"
overlay={ tooltipId="showCompilerTooltip"
<Tooltip id="showCompilerTooltip" className="text-nowrap"> tooltipClasses="text-nowrap"
<span>{"See compiler license"}</span> tooltipText={"See compiler license"}
</Tooltip>
}
> >
<span className="fa fa-file-text-o border-0 p-0 ml-2" onClick={() => showCompilerLicense()}></span> <span className="fa fa-file-text-o border-0 p-0 ml-2" onClick={() => showCompilerLicense()}></span>
</OverlayTrigger> </CustomTooltip>
<select value={state.selectedVersion || state.defaultVersion} onChange={(e) => handleLoadVersion(e.target.value)} className="custom-select" id="versionSelector" disabled={state.allversions.length <= 0}> <select value={state.selectedVersion || state.defaultVersion} onChange={(e) => handleLoadVersion(e.target.value)} className="custom-select" id="versionSelector" disabled={state.allversions.length <= 0}>
{state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === state.defaultVersion ? 'selected' : ''}>{state.defaultVersion}</option>} {state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === state.defaultVersion ? 'selected' : ''}>{state.defaultVersion}</option>}
{state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === 'builtin' ? 'selected' : ''}>builtin</option>} {state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === 'builtin' ? 'selected' : ''}>builtin</option>}
@ -775,13 +770,14 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
<input className="remixui_autocompile custom-control-input" onChange={updatehhCompilation} id="enableHardhat" type="checkbox" title="Enable Hardhat Compilation" checked={hhCompilation} /> <input className="remixui_autocompile custom-control-input" onChange={updatehhCompilation} id="enableHardhat" type="checkbox" title="Enable Hardhat Compilation" checked={hhCompilation} />
<label className="form-check-label custom-control-label" htmlFor="enableHardhat">Enable Hardhat Compilation</label> <label className="form-check-label custom-control-label" htmlFor="enableHardhat">Enable Hardhat Compilation</label>
<a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/hardhat.html#enable-hardhat-compilation' target={'_blank'}> <a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/hardhat.html#enable-hardhat-compilation' target={'_blank'}>
<OverlayTrigger placement={'right'} overlay={ <CustomTooltip
<Tooltip className="text-nowrap" id="overlay-tooltip-hardhat"> placement={'right'}
<span className="border bg-light text-dark p-1 pr-3" style={{ minWidth: '230px' }}>Learn how to use Hardhat Compilation</span> tooltipClasses="text-nowrap"
</Tooltip> tooltipId="overlay-tooltip-hardhat"
}> tooltipText={<span className="border bg-light text-dark p-1 pr-3" style={{ minWidth: '230px' }}>Learn how to use Hardhat Compilation</span>}
>
<i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle'} aria-hidden="true"></i> <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle'} aria-hidden="true"></i>
</OverlayTrigger> </CustomTooltip>
</a> </a>
</div> </div>
} }
@ -791,13 +787,14 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
<input className="remixui_autocompile custom-control-input" onChange={updateTruffleCompilation} id="enableTruffle" type="checkbox" title="Enable Truffle Compilation" checked={truffleCompilation} /> <input className="remixui_autocompile custom-control-input" onChange={updateTruffleCompilation} id="enableTruffle" type="checkbox" title="Enable Truffle Compilation" checked={truffleCompilation} />
<label className="form-check-label custom-control-label" htmlFor="enableTruffle">Enable Truffle Compilation</label> <label className="form-check-label custom-control-label" htmlFor="enableTruffle">Enable Truffle Compilation</label>
<a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/truffle.html#enable-truffle-compilation' target={'_blank'}> <a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/truffle.html#enable-truffle-compilation' target={'_blank'}>
<OverlayTrigger placement={'right'} overlay={ <CustomTooltip
<Tooltip className="text-nowrap" id="overlay-tooltip-truffle"> placement={'right'}
<span className="border bg-light text-dark p-1 pr-3" style={{ minWidth: '230px' }}>Learn how to use Truffle Compilation</span> tooltipClasses="text-nowrap"
</Tooltip> tooltipId="overlay-tooltip-truffle"
}> tooltipText={<span className="border bg-light text-dark p-1 pr-3" style={{ minWidth: '230px' }}>Learn how to use Truffle Compilation</span>}
>
<i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle'} aria-hidden="true"></i> <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle'} aria-hidden="true"></i>
</OverlayTrigger> </CustomTooltip>
</a> </a>
</div> </div>
} }
@ -820,19 +817,17 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
<div className={`flex-column 'd-flex'}`}> <div className={`flex-column 'd-flex'}`}>
<div className="mb-2 ml-4"> <div className="mb-2 ml-4">
<label className="remixui_compilerLabel form-check-label" htmlFor="compilierLanguageSelector">Language</label> <label className="remixui_compilerLabel form-check-label" htmlFor="compilierLanguageSelector">Language</label>
<OverlayTrigger <CustomTooltip
placement="right-start" placement="right-start"
overlay={ tooltipId="compilerLabelTooltip"
<Tooltip id="compilerLabelTooltip" className="text-nowrap"> tooltipClasses="text-nowrap"
<span>{'Language specification available from Compiler >= v0.5.7'}</span> tooltipText={<span>{'Language specification available from Compiler >= v0.5.7'}</span>}
</Tooltip>
}
> >
<select onChange={(e) => handleLanguageChange(e.target.value)} disabled={state.useFileConfiguration} value={state.language} className="custom-select" id="compilierLanguageSelector"> <select onChange={(e) => handleLanguageChange(e.target.value)} disabled={state.useFileConfiguration} value={state.language} className="custom-select" id="compilierLanguageSelector">
<option data-id={state.language === 'Solidity' ? 'selected' : ''} value='Solidity'>Solidity</option> <option data-id={state.language === 'Solidity' ? 'selected' : ''} value='Solidity'>Solidity</option>
<option data-id={state.language === 'Yul' ? 'selected' : ''} value='Yul'>Yul</option> <option data-id={state.language === 'Yul' ? 'selected' : ''} value='Yul'>Yul</option>
</select> </select>
</OverlayTrigger> </CustomTooltip>
</div> </div>
<div className="mb-2 ml-4"> <div className="mb-2 ml-4">
<label className="remixui_compilerLabel form-check-label" htmlFor="evmVersionSelector">EVM Version</label> <label className="remixui_compilerLabel form-check-label" htmlFor="evmVersionSelector">EVM Version</label>
@ -863,21 +858,19 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
<label className="form-check-label custom-control-label" htmlFor="scFileConfig" data-id="scFileConfiguration">Use configuration file</label> <label className="form-check-label custom-control-label" htmlFor="scFileConfig" data-id="scFileConfiguration">Use configuration file</label>
</div> </div>
<div className={`pt-2 ml-4 ml-2 align-items-start justify-content-between d-flex`}> <div className={`pt-2 ml-4 ml-2 align-items-start justify-content-between d-flex`}>
{(!showFilePathInput && state.useFileConfiguration) && <OverlayTrigger {(!showFilePathInput && state.useFileConfiguration) && <CustomTooltip
placement="bottom" placement="bottom"
overlay={ tooltipId="configfileTooltip"
<Tooltip id="configfileTooltip" className="text-nowrap"> tooltipClasses="text-nowrap"
<span> tooltipText={<span>
Click to open the config file Click to open the config file
</span> </span>}
</Tooltip>
}
> >
<span <span
onClick={configFilePath === '' ? () => { } : async () => { await openFile() }} onClick={configFilePath === '' ? () => { } : async () => { await openFile() }}
className="py-2 remixui_compilerConfigPath" className="py-2 remixui_compilerConfigPath"
>{configFilePath === '' ? 'No file selected.' : configFilePath}</span> >{configFilePath === '' ? 'No file selected.' : configFilePath}</span>
</OverlayTrigger>} </CustomTooltip>}
{(!showFilePathInput && !state.useFileConfiguration) && <span className="py-2 text-secondary">{configFilePath}</span>} {(!showFilePathInput && !state.useFileConfiguration) && <span className="py-2 text-secondary">{configFilePath}</span>}
<input <input
ref={configFilePathInput} ref={configFilePathInput}
@ -897,19 +890,19 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
</div> </div>
<div className="px-4"> <div className="px-4">
<button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block d-block w-100 text-break remixui_disabled mb-1 mt-3" onClick={compile} disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton}> <button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block d-block w-100 text-break remixui_disabled mb-1 mt-3" onClick={compile} disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton}>
<OverlayTrigger overlay={ <CustomTooltip
<Tooltip id="overlay-tooltip-compile"> placement="auto"
<div className="text-left"> tooltipId="overlay-tooltip-compile"
tooltipText={<div className="text-left">
{!(configFilePath === '' && state.useFileConfiguration) && <div><b>Ctrl+S</b> for compiling</div>} {!(configFilePath === '' && state.useFileConfiguration) && <div><b>Ctrl+S</b> for compiling</div>}
{(configFilePath === '' && state.useFileConfiguration) && <div> No config file selected</div>} {(configFilePath === '' && state.useFileConfiguration) && <div> No config file selected</div>}
</div> </div>}
</Tooltip> >
}>
<span> <span>
{<i ref={compileIcon} className="fas fa-sync remixui_iconbtn" aria-hidden="true"></i>} {<i ref={compileIcon} className="fas fa-sync remixui_iconbtn" aria-hidden="true"></i>}
Compile {typeof state.compiledFileName === 'string' ? extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>'} Compile {typeof state.compiledFileName === 'string' ? extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>'}
</span> </span>
</OverlayTrigger> </CustomTooltip>
</button> </button>
<div className='d-flex align-items-center'> <div className='d-flex align-items-center'>
<button <button
@ -919,22 +912,23 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
onClick={compileAndRun} onClick={compileAndRun}
disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton} disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton}
> >
<OverlayTrigger overlay={ <CustomTooltip
<Tooltip id="overlay-tooltip-compile-run"> placement="auto"
<div className="text-left"> tooltipId="overlay-tooltip-compile-run"
tooltipText={<div className="text-left">
{!(configFilePath === '' && state.useFileConfiguration) && <div><b>Ctrl+Shift+S</b> for compiling and script execution</div>} {!(configFilePath === '' && state.useFileConfiguration) && <div><b>Ctrl+Shift+S</b> for compiling and script execution</div>}
{(configFilePath === '' && state.useFileConfiguration) && <div> No config file selected</div>} {(configFilePath === '' && state.useFileConfiguration) && <div> No config file selected</div>}
</div> </div>}
</Tooltip> >
}>
<span> <span>
Compile and Run script Compile and Run script
</span> </span>
</OverlayTrigger> </CustomTooltip>
</button> </button>
<OverlayTrigger overlay={ <CustomTooltip
<Tooltip id="overlay-tooltip-compile-run-doc"> placement="auto"
<div className="text-left p-2"> tooltipId="overlay-tooltip-compile-run-doc"
tooltipText={<div className="text-left p-2">
<div>Choose the script to execute right after compilation by adding the `dev-run-script` natspec tag, as in:</div> <div>Choose the script to execute right after compilation by adding the `dev-run-script` natspec tag, as in:</div>
<pre> <pre>
<code> <code>
@ -947,11 +941,10 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
</code> </code>
</pre> </pre>
Click to know more Click to know more
</div> </div>}
</Tooltip> >
}>
<a href="https://remix-ide.readthedocs.io/en/latest/running_js_scripts.html#compile-a-contract-and-run-a-script-on-the-fly" target="_blank" ><i className="pl-2 ml-2 mt-3 mb-1 fas fa-info text-dark"></i></a> <a href="https://remix-ide.readthedocs.io/en/latest/running_js_scripts.html#compile-a-contract-and-run-a-script-on-the-fly" target="_blank" ><i className="pl-2 ml-2 mt-3 mb-1 fas fa-info text-dark"></i></a>
</OverlayTrigger> </CustomTooltip>
<CopyToClipboard tip="Click to copy the custom NatSpec tag" getContent={() => '@custom:dev-run-script file_path'} direction='top'> <CopyToClipboard tip="Click to copy the custom NatSpec tag" getContent={() => '@custom:dev-run-script file_path'} direction='top'>
<button className="btn remixui_copyButton ml-2 mt-3 mb-1 text-dark"> <button className="btn remixui_copyButton ml-2 mt-3 mb-1 text-dark">
<i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i> <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>

47
libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
Unescape View File

@ -5,7 +5,7 @@ import { TreeView, TreeViewItem } from '@remix-ui/tree-view' // eslint-disable-l
import { CopyToClipboard } from '@remix-ui/clipboard' // eslint-disable-line import { CopyToClipboard } from '@remix-ui/clipboard' // eslint-disable-line
import './css/style.css' import './css/style.css'
import { OverlayTrigger, Tooltip } from 'react-bootstrap' import { CustomTooltip } from '@remix-ui/helper'
export const ContractSelection = (props: ContractSelectionProps) => { export const ContractSelection = (props: ContractSelectionProps) => {
const { api, compiledFileName, contractsDetails, contractList, modal } = props const { api, compiledFileName, contractsDetails, contractList, modal } = props
@ -197,55 +197,40 @@ export const ContractSelection = (props: ContractSelectionProps) => {
</div> </div>
<article className="mt-2 pb-0"> <article className="mt-2 pb-0">
<button id="publishOnIpfs" className="btn btn-secondary btn-block" onClick={() => { handlePublishToStorage('ipfs') }}> <button id="publishOnIpfs" className="btn btn-secondary btn-block" onClick={() => { handlePublishToStorage('ipfs') }}>
<OverlayTrigger <CustomTooltip
placement="right-start" placement="right-start"
overlay={ tooltipId="publishOnIpfsTooltip"
<Tooltip tooltipClasses="text-nowrap"
id="publishOnIpfsTooltip" tooltipText="Publish on Ipfs"
className="text-nowrap"
>
<span>Publish on Ipfs</span>
</Tooltip>
}
> >
<span> <span>
<span>Publish on Ipfs</span> <span>Publish on Ipfs</span>
<img id="ipfsLogo" className="remixui_storageLogo ml-2" src="assets/img/ipfs.webp" /> <img id="ipfsLogo" className="remixui_storageLogo ml-2" src="assets/img/ipfs.webp" />
</span> </span>
</OverlayTrigger> </CustomTooltip>
</button> </button>
<button id="publishOnSwarm" className="btn btn-secondary btn-block" onClick={() => { handlePublishToStorage('swarm') }}> <button id="publishOnSwarm" className="btn btn-secondary btn-block" onClick={() => { handlePublishToStorage('swarm') }}>
<OverlayTrigger <CustomTooltip
placement="right-start" placement="right-start"
overlay={ tooltipId="publishOnSwarmTooltip"
<Tooltip tooltipClasses="text-nowrap"
id="publishOnSwarmTooltip" tooltipText="Publish on Swarm"
className="text-nowrap"
>
<span>Publish on Swarm</span>
</Tooltip>
}
> >
<span> <span>
<span>Publish on Swarm</span> <span>Publish on Swarm</span>
<img id="swarmLogo" className="remixui_storageLogo ml-2" src="assets/img/swarm.webp" /> <img id="swarmLogo" className="remixui_storageLogo ml-2" src="assets/img/swarm.webp" />
</span> </span>
</OverlayTrigger> </CustomTooltip>
</button> </button>
<button data-id="compilation-details" className="btn btn-secondary btn-block" onClick={() => { details() }}> <button data-id="compilation-details" className="btn btn-secondary btn-block" onClick={() => { details() }}>
<OverlayTrigger <CustomTooltip
placement="right-start" placement="right-start"
overlay={ tooltipId="CompilationDetailsTooltip"
<Tooltip tooltipClasses="text-nowrap"
id="CompilationDetailsTooltip" tooltipText="Display Contract Details"
className="text-nowrap"
>
<span>Display Contract Details</span>
</Tooltip>
}
> >
<span>Compilation Details</span> <span>Compilation Details</span>
</OverlayTrigger> </CustomTooltip>
</button> </button>
{/* Copy to Clipboard */} {/* Copy to Clipboard */}
<div className="remixui_contractHelperButtons"> <div className="remixui_contractHelperButtons">

Write Preview
Loading…
Cancel
Save