From 0728a5ac5bfbe4ac67d71bd2cd099272292177d2 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Wed, 16 Nov 2022 19:57:43 +0100 Subject: [PATCH 01/23] add tooltip for HomeIcon --- .../src/lib/components/Home.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx index 94a56bed15..c0ba0a4add 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx @@ -1,3 +1,4 @@ +import { CustomTooltip } from '@remix-ui/helper' import React from 'react' import BasicLogo from './BasicLogo' interface HomeProps { @@ -6,16 +7,20 @@ interface HomeProps { function Home ({ verticalIconPlugin }: HomeProps) { return ( -
await verticalIconPlugin.activateHome()} - {...{ plugin: 'home'}} - title="Home" - data-id="verticalIconsHomeIcon" - id="verticalIconsHomeIcon" + - -
+
await verticalIconPlugin.activateHome()} + {...{ plugin: 'home'}} + data-id="verticalIconsHomeIcon" + id="verticalIconsHomeIcon" + > + +
+ ) } From 50117ab06e4fe0beed2f56711603fb74cf4d4b88 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Thu, 17 Nov 2022 11:15:43 +0100 Subject: [PATCH 02/23] add fixes to tooltips --- .../src/lib/components/contractDropdownUI.tsx | 16 +++---- .../src/lib/components/recorderCardUI.tsx | 2 +- .../src/lib/components/Icon.tsx | 45 ++++++++++--------- .../src/lib/components/file-explorer-menu.tsx | 4 +- 4 files changed, 36 insertions(+), 31 deletions(-) diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx index ac14cde8b9..477768d353 100644 --- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx @@ -17,12 +17,12 @@ export function ContractDropdownUI (props: ContractDropdownProps) { display: '', content: '' }) - const [atAddressOptions, setAtAddressOptions] = useState<{ title: string, disabled: boolean }>({ + const [atAddressOptions, setAtAddressOptions] = useState<{ title: string | JSX.Element, disabled: boolean }>({ title: 'address of contract', disabled: true }) const [loadedAddress, setLoadedAddress] = useState('') - const [contractOptions, setContractOptions] = useState<{ title: string, disabled: boolean }>({ + const [contractOptions, setContractOptions] = useState<{ title: string | JSX.Element, disabled: boolean }>({ title: 'Please compile *.sol file to deploy or access a contract', disabled: true }) @@ -136,12 +136,12 @@ export function ContractDropdownUI (props: ContractDropdownProps) { if (enable) { setAtAddressOptions({ disabled: false, - title: 'Interact with the deployed contract - requires the .abi file or compiled .sol file to be selected in the editor (with the same compiler configuration)' + title: Interact with the deployed contract - requires the .abi file or
compiled .sol file to be selected in the editor
(with the same compiler configuration) }) } else { setAtAddressOptions({ disabled: true, - title: loadedAddress ? 'Compile a *.sol file or select a *.abi file.' : 'To interact with a deployed contract, enter its address and compile its source *.sol file (with the same compiler settings) or select its .abi file in the editor. ' + title: loadedAddress ? 'Compile a *.sol file or select a *.abi file.' : To interact with a deployed contract,
enter its address and compile its source *.sol file
(with the same compiler settings) or select its .abi file in the editor. }) } } @@ -155,7 +155,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) { } else { setContractOptions({ disabled: true, - title: loadType === 'sol' ? 'Select and compile *.sol file to deploy or access a contract.' : 'When there is a compiled .sol file, the choice of contracts to deploy or to use with AtAddress is made here.' + title: loadType === 'sol' ? 'Select and compile *.sol file to deploy or access a contract.' : When there is a compiled .sol file,
choose the contract to deploy or to use with AtAddress.' }) } } @@ -266,8 +266,8 @@ export function ContractDropdownUI (props: ContractDropdownProps) { placement={'right'} tooltipClasses="text-wrap" tooltipId="info-sync-compiled-contract" - tooltipText="Click here to import contracts compiled from an external framework. - This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd." + tooltipText={Click here to import contracts compiled from an external framework.
+ This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.} >
Choose the script to execute right after compilation by adding the `dev-run-script` natspec tag, as in:
diff --git a/libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx b/libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx index b6567c020b..4f8eed6086 100644 --- a/libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx +++ b/libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx @@ -19,12 +19,12 @@ const StaticAnalyserButton = ({ return ( ) : null} - -
- +
+ + {abiLabel.content} +
- {abiLabel.content} -
-
{((contractList[currentFile] && contractList[currentFile].filter(contract => contract)) || []).length <= 0 ? intl.formatMessage({id: 'udapp.noCompiledContracts', defaultMessage: 'No compiled contracts'}) : loadedContractData ?
@@ -343,7 +341,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
-
+
Date: Tue, 22 Nov 2022 12:23:10 +0100 Subject: [PATCH 19/23] address changes in review comments --- .../checkbox/src/lib/remix-ui-checkbox.tsx | 2 +- .../src/lib/components/contractDropdownUI.tsx | 64 +++++++++++-------- .../src/lib/compiler-container.tsx | 2 +- .../src/lib/Button/StaticAnalyserButton.tsx | 2 +- 4 files changed, 41 insertions(+), 29 deletions(-) diff --git a/libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx b/libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx index 8c36fa5fa8..268927908e 100644 --- a/libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx +++ b/libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx @@ -34,7 +34,7 @@ export const RemixUiCheckbox = ({ title, visibility, display = 'flex', - tooltipPlacement = 'right-start' + tooltipPlacement = 'right' }: RemixUiCheckboxProps) => { const childJSX = ( diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx index 78da4cd98e..cd05f0823c 100644 --- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx @@ -136,12 +136,12 @@ export function ContractDropdownUI (props: ContractDropdownProps) { if (enable) { setAtAddressOptions({ disabled: false, - title: Interact with the deployed contract - requires the .abi file or
compiled .sol file to be selected in the editor
(with the same compiler configuration) + title: Interact with the deployed contract - requires the .abi file or
compiled .sol file to be selected in the editor
(with the same compiler configuration) }) } else { setAtAddressOptions({ disabled: true, - title: loadedAddress ? 'Compile a *.sol file or select a *.abi file.' : To interact with a deployed contract,
enter its address and compile its source *.sol file
(with the same compiler settings) or select its .abi file in the editor. + title: loadedAddress ? 'Compile a *.sol file or select a *.abi file.' : To interact with a deployed contract either,
enter its address and compile its source *.sol file
(with the same compiler settings) or select its .abi file in the editor. }) } } @@ -155,7 +155,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) { } else { setContractOptions({ disabled: true, - title: loadType === 'sol' ? 'Select and compile *.sol file to deploy or access a contract.' : When there is a compiled .sol file, choose the
contract to deploy or to use with AtAddress.' + title: loadType === 'sol' ? 'Select and compile *.sol file to deploy or access a contract.' : When there is a compiled .sol file, choose the
contract to deploy or to use with AtAddress.' }) } } @@ -236,7 +236,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) { const checkSumWarning = () => { return ( - + It seems you are not using a checksumed address.
A checksummed address is an address that contains uppercase letters, as specified in EIP-55.
Checksummed addresses are meant to help prevent users from sending transactions to the wrong address. @@ -264,10 +264,12 @@ export function ContractDropdownUI (props: ContractDropdownProps) { {props.remixdActivated ? (Click here to import contracts compiled from an external framework.
- This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.} + tooltipText={ + Click here to import contracts compiled from an external framework.
+ This action is enabled when Remix is connected to an external
framework (hardhat, truffle, foundry) through remixd. + } > ) : null} - +
+ {contractOptions.disabled ? ( + + ) : ( -
- - {abiLabel.content} -
- + + )} + {abiLabel.content} +
+
{((contractList[currentFile] && contractList[currentFile].filter(contract => contract)) || []).length <= 0 ? intl.formatMessage({id: 'udapp.noCompiledContracts', defaultMessage: 'No compiled contracts'}) : loadedContractData ?
@@ -322,9 +334,9 @@ export function ContractDropdownUI (props: ContractDropdownProps) { /> Publishing the source code and metadata to IPFS
facilitates source code verification using Sourcify and
will greatly foster contract adoption
(auditing, debugging, calling it, etc...)} + tooltipText={Publishing the source code and metadata to IPFS facilitates
source code verification using Sourcify and will greatly foster
contract adoption (auditing, debugging, calling it, etc...)} >
-
+
@@ -356,9 +368,9 @@ export function ContractDropdownUI (props: ContractDropdownProps) { { contract ContractName {'{}'}
- Click to know more + Click the i icon to learn more
} > diff --git a/libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx b/libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx index 4f8eed6086..db660c1d49 100644 --- a/libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx +++ b/libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx @@ -19,7 +19,7 @@ const StaticAnalyserButton = ({ return (
- {contractOptions.disabled ? ( - - ) : ( - - )} +
+ +
+ {abiLabel.content}
diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx index 2d39863b6c..9dd58a07bb 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx +++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx @@ -862,7 +862,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => { tooltipText={{'Language specification available from Compiler >= v0.5.7'}} >
- handleLanguageChange(e.target.value)} disabled={state.useFileConfiguration} value={state.language} className="custom-select" id="compilierLanguageSelector" style={{ pointerEvents: 'none' }}> diff --git a/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx b/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx index 7073b2366a..b8eafbbc4f 100644 --- a/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx +++ b/libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx @@ -431,7 +431,6 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => { onClick={event => handleCheckSingle(event, item._index)} checked={categoryIndex.includes(item._index.toString())} onChange={() => {}} - title={item.description} />
) diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx index 50948f49ed..7f6080fb44 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx @@ -86,9 +86,9 @@ const Icon = ({ return ( <>
Date: Wed, 23 Nov 2022 13:11:49 +0100 Subject: [PATCH 21/23] make tooltip position auto --- libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx index 7f6080fb44..da65a2da41 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx @@ -86,7 +86,8 @@ const Icon = ({ return ( <> From 532153192b0560bab82d9ba5256c37dc69d94507 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Tue, 29 Nov 2022 09:30:06 +0100 Subject: [PATCH 22/23] fix e2e --- libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx index aa11635733..a055758440 100644 --- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx @@ -288,7 +288,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) { tooltipText={contractOptions.title} >
- {(contractList[currentFile] || []).map((contract, index) => { return