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 e56a66ba32
commit 96159751f1
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}
overlay={
<Tooltip id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} className={tooltipClasses}>
<span className={tooltipTextClasses}>{tooltipText}</span>
{typeof tooltipText === 'string' ? (<span className={tooltipTextClasses}>{tooltipText}</span>) : (tooltipText)}
</Tooltip>
}
>

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

@ -6,6 +6,6 @@ export type CustomTooltipType = {
placement?: Placement,
tooltipId?: string,
tooltipClasses?:string,
tooltipText: string,
tooltipText: string | JSX.Element,
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 React, { useContext, useEffect, useRef, useState } from 'react'
import React, { useContext, useEffect, useState } from 'react'
import { SearchContext } from '../context/context'
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 { CompilerContainerProps } from './types'
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 { compilerReducer, compilerInitialState } from './reducers/compiler'
import { resetEditorMode, listenToEvents } from './actions/compiler'
import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
import { getValidLanguage } from '@remix-project/remix-solidity'
import { CopyToClipboard } from '@remix-ui/clipboard'
import { configFileContent } from './compilerConfiguration'
@ -725,26 +724,22 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
<div className='pt-0 remixui_compilerSection'>
<div className="mb-1">
<label className="remixui_compilerLabel form-check-label" htmlFor="versionSelector">Compiler</label>
<OverlayTrigger
<CustomTooltip
placement="top"
overlay={
<Tooltip id="promptCompilerTooltip" className="text-nowrap">
<span>{"Add a custom compiler with URL"}</span>
</Tooltip>
}
tooltipId="promptCompilerTooltip"
tooltipClasses="text-nowrap"
tooltipText={"Add a custom compiler with URL"}
>
<span className="far fa-plus border-0 p-0 ml-3" onClick={() => promptCompiler()}></span>
</OverlayTrigger>
<OverlayTrigger
</CustomTooltip>
<CustomTooltip
placement="top"
overlay={
<Tooltip id="showCompilerTooltip" className="text-nowrap">
<span>{"See compiler license"}</span>
</Tooltip>
}
tooltipId="showCompilerTooltip"
tooltipClasses="text-nowrap"
tooltipText={"See compiler license"}
>
<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}>
{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>}
@ -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} />
<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'}>
<OverlayTrigger placement={'right'} overlay={
<Tooltip className="text-nowrap" id="overlay-tooltip-hardhat">
<span className="border bg-light text-dark p-1 pr-3" style={{ minWidth: '230px' }}>Learn how to use Hardhat Compilation</span>
</Tooltip>
}>
<CustomTooltip
placement={'right'}
tooltipClasses="text-nowrap"
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>
</OverlayTrigger>
</CustomTooltip>
</a>
</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} />
<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'}>
<OverlayTrigger placement={'right'} overlay={
<Tooltip className="text-nowrap" id="overlay-tooltip-truffle">
<span className="border bg-light text-dark p-1 pr-3" style={{ minWidth: '230px' }}>Learn how to use Truffle Compilation</span>
</Tooltip>
}>
<CustomTooltip
placement={'right'}
tooltipClasses="text-nowrap"
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>
</OverlayTrigger>
</CustomTooltip>
</a>
</div>
}
@ -820,19 +817,17 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
<div className={`flex-column 'd-flex'}`}>
<div className="mb-2 ml-4">
<label className="remixui_compilerLabel form-check-label" htmlFor="compilierLanguageSelector">Language</label>
<OverlayTrigger
<CustomTooltip
placement="right-start"
overlay={
<Tooltip id="compilerLabelTooltip" className="text-nowrap">
<span>{'Language specification available from Compiler >= v0.5.7'}</span>
</Tooltip>
}
tooltipId="compilerLabelTooltip"
tooltipClasses="text-nowrap"
tooltipText={<span>{'Language specification available from Compiler >= v0.5.7'}</span>}
>
<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 === 'Yul' ? 'selected' : ''} value='Yul'>Yul</option>
</select>
</OverlayTrigger>
</CustomTooltip>
</div>
<div className="mb-2 ml-4">
<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>
</div>
<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"
overlay={
<Tooltip id="configfileTooltip" className="text-nowrap">
<span>
tooltipId="configfileTooltip"
tooltipClasses="text-nowrap"
tooltipText={<span>
Click to open the config file
</span>
</Tooltip>
}
</span>}
>
<span
onClick={configFilePath === '' ? () => { } : async () => { await openFile() }}
className="py-2 remixui_compilerConfigPath"
>{configFilePath === '' ? 'No file selected.' : configFilePath}</span>
</OverlayTrigger>}
</CustomTooltip>}
{(!showFilePathInput && !state.useFileConfiguration) && <span className="py-2 text-secondary">{configFilePath}</span>}
<input
ref={configFilePathInput}
@ -897,19 +890,19 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
</div>
<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}>
<OverlayTrigger overlay={
<Tooltip id="overlay-tooltip-compile">
<div className="text-left">
<CustomTooltip
placement="auto"
tooltipId="overlay-tooltip-compile"
tooltipText={<div className="text-left">
{!(configFilePath === '' && state.useFileConfiguration) && <div><b>Ctrl+S</b> for compiling</div>}
{(configFilePath === '' && state.useFileConfiguration) && <div> No config file selected</div>}
</div>
</Tooltip>
}>
</div>}
>
<span>
{<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>'}
</span>
</OverlayTrigger>
</CustomTooltip>
</button>
<div className='d-flex align-items-center'>
<button
@ -919,22 +912,23 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
onClick={compileAndRun}
disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton}
>
<OverlayTrigger overlay={
<Tooltip id="overlay-tooltip-compile-run">
<div className="text-left">
<CustomTooltip
placement="auto"
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> No config file selected</div>}
</div>
</Tooltip>
}>
</div>}
>
<span>
Compile and Run script
</span>
</OverlayTrigger>
</CustomTooltip>
</button>
<OverlayTrigger overlay={
<Tooltip id="overlay-tooltip-compile-run-doc">
<div className="text-left p-2">
<CustomTooltip
placement="auto"
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>
<pre>
<code>
@ -947,11 +941,10 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
</code>
</pre>
Click to know more
</div>
</Tooltip>
}>
</div>}
>
<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'>
<button className="btn remixui_copyButton ml-2 mt-3 mb-1 text-dark">
<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 './css/style.css'
import { OverlayTrigger, Tooltip } from 'react-bootstrap'
import { CustomTooltip } from '@remix-ui/helper'
export const ContractSelection = (props: ContractSelectionProps) => {
const { api, compiledFileName, contractsDetails, contractList, modal } = props
@ -197,55 +197,40 @@ export const ContractSelection = (props: ContractSelectionProps) => {
</div>
<article className="mt-2 pb-0">
<button id="publishOnIpfs" className="btn btn-secondary btn-block" onClick={() => { handlePublishToStorage('ipfs') }}>
<OverlayTrigger
<CustomTooltip
placement="right-start"
overlay={
<Tooltip
id="publishOnIpfsTooltip"
className="text-nowrap"
>
<span>Publish on Ipfs</span>
</Tooltip>
}
tooltipId="publishOnIpfsTooltip"
tooltipClasses="text-nowrap"
tooltipText="Publish on Ipfs"
>
<span>
<span>Publish on Ipfs</span>
<img id="ipfsLogo" className="remixui_storageLogo ml-2" src="assets/img/ipfs.webp" />
</span>
</OverlayTrigger>
</CustomTooltip>
</button>
<button id="publishOnSwarm" className="btn btn-secondary btn-block" onClick={() => { handlePublishToStorage('swarm') }}>
<OverlayTrigger
<CustomTooltip
placement="right-start"
overlay={
<Tooltip
id="publishOnSwarmTooltip"
className="text-nowrap"
>
<span>Publish on Swarm</span>
</Tooltip>
}
tooltipId="publishOnSwarmTooltip"
tooltipClasses="text-nowrap"
tooltipText="Publish on Swarm"
>
<span>
<span>Publish on Swarm</span>
<img id="swarmLogo" className="remixui_storageLogo ml-2" src="assets/img/swarm.webp" />
</span>
</OverlayTrigger>
</CustomTooltip>
</button>
<button data-id="compilation-details" className="btn btn-secondary btn-block" onClick={() => { details() }}>
<OverlayTrigger
<CustomTooltip
placement="right-start"
overlay={
<Tooltip
id="CompilationDetailsTooltip"
className="text-nowrap"
>
<span>Display Contract Details</span>
</Tooltip>
}
tooltipId="CompilationDetailsTooltip"
tooltipClasses="text-nowrap"
tooltipText="Display Contract Details"
>
<span>Compilation Details</span>
</OverlayTrigger>
</CustomTooltip>
</button>
{/* Copy to Clipboard */}
<div className="remixui_contractHelperButtons">

Write Preview
Loading…
Cancel
Save