From 9450be29182e8a8c7ac327378082783a692f7c09 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Thu, 27 Oct 2022 22:39:57 +0100 Subject: [PATCH] apply custom tooltip to run-tab --- .../run-tab/src/lib/components/account.tsx | 28 +-- .../src/lib/components/contractDropdownUI.tsx | 90 ++++---- .../src/lib/components/contractGUI.tsx | 211 ++++++++++-------- .../src/lib/components/deployButton.tsx | 15 +- .../src/lib/components/deployInput.tsx | 14 +- .../src/lib/components/environment.tsx | 31 +-- .../run-tab/src/lib/components/gasPrice.tsx | 15 +- .../lib/components/instanceContainerUI.tsx | 26 +-- .../src/lib/components/multiDeployInput.tsx | 13 +- .../src/lib/components/recorderCardUI.tsx | 71 +++--- .../src/lib/components/universalDappUI.tsx | 51 ++--- .../run-tab/src/lib/components/value.tsx | 20 +- 12 files changed, 299 insertions(+), 286 deletions(-) diff --git a/libs/remix-ui/run-tab/src/lib/components/account.tsx b/libs/remix-ui/run-tab/src/lib/components/account.tsx index 0dd64facc9..a74652ca61 100644 --- a/libs/remix-ui/run-tab/src/lib/components/account.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/account.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState, useRef } from 'react' import { CopyToClipboard } from '@remix-ui/clipboard' import { AccountProps } from '../types' import { PassphrasePrompt } from './passphrase' -import { OverlayTrigger, Tooltip } from 'react-bootstrap' +import { CustomTooltip } from '@remix-ui/helper' export function AccountUI (props: AccountProps) { const { selectedAccount, loadedAccounts } = props.accounts @@ -151,15 +151,16 @@ export function AccountUI (props: AccountProps) {
- - {"Sign a message using this account"} - - }> + - +
) 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 25850555a4..b76748349e 100644 --- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx @@ -2,10 +2,9 @@ import React, { useEffect, useRef, useState } from 'react' import { ContractDropdownProps, DeployMode } from '../types' import { ContractData, FuncABI } from '@remix-project/core-plugin' -import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line import * as ethJSUtil from 'ethereumjs-util' import { ContractGUI } from './contractGUI' -import { deployWithProxyMsg, upgradeWithProxyMsg } from '@remix-ui/helper' +import { CustomTooltip, deployWithProxyMsg, upgradeWithProxyMsg } from '@remix-ui/helper' const _paq = window._paq = window._paq || [] export function ContractDropdownUI(props: ContractDropdownProps) { @@ -259,41 +258,37 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
{compilerName && compilerName !== '' && }
{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.
- - }> + ( - + ) : null}
- - {contractOptions.title} - - } - > - - + + + {abiLabel.content}
@@ -323,11 +318,12 @@ export function ContractDropdownUI(props: ContractDropdownProps) { onChange={handleCheckedIPFS} checked={props.ipfsCheckedState} /> - - 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...) - - }> + - +
: '' }
or
- - {atAddressOptions.title} - - }> +
- - - {"address of contract"} - - }> + + - +
diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx index 04dce73e53..16a2d4152c 100644 --- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx @@ -5,6 +5,7 @@ import Web3 from 'web3' import { ContractGUIProps } from '../types' import { CopyToClipboard } from '@remix-ui/clipboard' import { OverlayTrigger, Tooltip } from 'react-bootstrap' +import { CustomTooltip } from '@remix-ui/helper' const txFormat = remixLib.execution.txFormat const txHelper = remixLib.execution.txHelper @@ -269,16 +270,11 @@ export function ContractGUI (props: ContractGUIProps) { className="udapp_contractActionsContainerSingle pt-2" style={{ display: toggleContainer ? "none" : "flex" }} > - - {buttonOptions.title} - - } + tooltipClasses="text-wrap" + tooltipId="remixUdappInstanceButtonTooltip" + tooltipText={buttonOptions.title} > - - + - - {props.funcABI.type === "fallback" || - props.funcABI.type === "receive" - ? `'(${props.funcABI.type}')` - : props.inputs} - - - } + tooltipClasses="text-nowrap" + tooltipId="remixContractGuiTooltip" + tooltipText={props.funcABI.type === "fallback" ||props.funcABI.type === "receive" ? `'(${props.funcABI.type}')` + : props.inputs} > - - 0 - ) - ? "hidden" - : "visible", - }} - > + + + 0 + ) + ? "hidden" + : "visible", + }} + > +
- - {inp.name} - - } + tooltipId="udappContractActionsTooltip" + tooltipClasses="text-nowrap" + tooltipText={inp.name} > { @@ -375,7 +370,7 @@ export function ContractGUI (props: ContractGUIProps) { placeholder={inp.type} data-id={`multiParamManagerInput${inp.name}`} /> - +
); })} @@ -411,16 +406,11 @@ export function ContractGUI (props: ContractGUIProps) { - - {buttonOptions.title} - - } + tooltipClasses="text-nowrap" + tooltipId="remixUdappInstanceButtonTooltip" + tooltipText={buttonOptions.title} > - + @@ -446,14 +436,20 @@ export function ContractGUI (props: ContractGUIProps) { onChange={(e) => handleDeployProxySelect(e.target.checked)} checked={deployState.deploy} /> - + +
{props.initializerOptions && @@ -489,15 +485,21 @@ export function ContractGUI (props: ContractGUIProps) { {" "} {inp.name}:{" "} - { - initializeFields.current[index] = el; - }} - style={{ height: 32 }} - className="form-control udapp_input" - placeholder={inp.type} - title={inp.name} - /> + + { + initializeFields.current[index] = el; + }} + style={{ height: 32 }} + className="form-control udapp_input" + placeholder={inp.type} + /> +
); })} @@ -514,14 +516,20 @@ export function ContractGUI (props: ContractGUIProps) { onChange={(e) => handleUpgradeImpSelect(e.target.checked)} checked={deployState.upgrade} /> - + + - + + { !useLastProxy ?
- - validateProxyAddress(proxyAddress) } /> - { proxyAddressError && { proxyAddressError } } -
: - { proxyAddress || proxyAddressError } - } + + + + + + : ( + + {proxyAddress || "No proxy address available"} + + )} diff --git a/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx b/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx index 08fa2843c7..579a103f36 100644 --- a/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/deployButton.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react' import { DeployButtonProps } from '../types' -import { ButtonGroup, Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap' +import { ButtonGroup, Dropdown } from 'react-bootstrap' +import { CustomTooltip } from '@remix-ui/helper' export function DeployButton (props: DeployButtonProps) { const [showOptions, setShowOptions] = useState(false) @@ -24,18 +25,16 @@ export function DeployButton (props: DeployButtonProps) { } : - - {props.buttonOptions.title} - - } + tooltipId="deployButtonTooltip" + tooltipClasses="text-nowrap" + tooltipText={props.buttonOptions.title} > - + } ) diff --git a/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx b/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx index c5dc153e42..d211bfc0b9 100644 --- a/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx @@ -1,5 +1,5 @@ +import { CustomTooltip } from '@remix-ui/helper' import React from 'react' -import { OverlayTrigger, Tooltip } from 'react-bootstrap' import { DeployInputProps } from '../types' import { DeployButton } from './deployButton' @@ -7,13 +7,11 @@ export function DeployInput (props: DeployInputProps) { return (
- - {props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs} - - } + tooltipId="deployInputTooltip" + tooltipClasses="text-nowrap" + tooltipText={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs} > - +
) } diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx index b4a875b1b5..af7c0b043d 100644 --- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx @@ -2,8 +2,7 @@ import React from 'react' import { EnvironmentProps } from '../types' import { Dropdown } from 'react-bootstrap' -import { CustomMenu, CustomToggle } from '@remix-ui/helper' -import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line +import { CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper' export function EnvironmentUI (props: EnvironmentProps) { @@ -29,13 +28,10 @@ export function EnvironmentUI (props: EnvironmentProps) { return (
@@ -43,13 +39,9 @@ export function EnvironmentUI (props: EnvironmentProps) { { isL2(currentProvider) && 'L2 - '} { currentProvider && currentProvider.content } - { currentProvider && bridges[currentProvider.value] && - Click to open a bridge for converting L1 mainnet ETH to the selected network currency. - - }> + { currentProvider && bridges[currentProvider.value] && - } + } { @@ -67,13 +59,10 @@ export function EnvironmentUI (props: EnvironmentProps) { } - - {"Click for docs about Environment"} - - }> + - +
) diff --git a/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx b/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx index 1dcd3fb57f..f831bdeaf2 100644 --- a/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/gasPrice.tsx @@ -1,6 +1,6 @@ // eslint-disable-next-line no-use-before-define +import { CustomTooltip } from '@remix-ui/helper' import React from 'react' -import { OverlayTrigger, Tooltip } from 'react-bootstrap' import { GasPriceProps } from '../types' export function GasPriceUI (props: GasPriceProps) { @@ -11,13 +11,14 @@ export function GasPriceUI (props: GasPriceProps) { return (
- - {"The default gas limit is 3M. Adjust as needed."} - - }> + - +
) } diff --git a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx index 94cb03deba..36a8e0446b 100644 --- a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx @@ -1,6 +1,6 @@ // eslint-disable-next-line no-use-before-define +import { CustomTooltip } from '@remix-ui/helper' import React from 'react' -import { OverlayTrigger, Tooltip } from 'react-bootstrap' import { InstanceContainerProps } from '../types' import { UniversalDappUI } from './universalDappUI' @@ -14,31 +14,27 @@ export function InstanceContainerUI (props: InstanceContainerProps) { return (
- - {"Autogenerated generic user interfaces for interaction with deployed contracts"} - - } + tooltipClasses="text-nowrap" + tooltipId="deployAndRunClearInstancesTooltip" + tooltipText={"Autogenerated generic user interfaces for interaction with deployed contracts"} > - + { instanceList.length > 0 ? ( - - {"Clear instances list and reset recorder"} - - } + tooltipClasses="text-nowrap" + tooltipId="deployAndRunClearInstancesTooltip" + tooltipText={"Clear instances list and reset recorder"} > - + ) : null }
diff --git a/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx b/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx index 8764750402..ca25e8e1b7 100644 --- a/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx @@ -1,3 +1,4 @@ +import { CustomTooltip } from '@remix-ui/helper' import React, { useRef, useState } from 'react' import { OverlayTrigger, Tooltip } from 'react-bootstrap' import { MultiDeployInputProps } from '../types' @@ -17,16 +18,14 @@ export function MultiDeployInput(props: MultiDeployInputProps) { return (
- - {inp.name} - - } + tooltipId="udappMultiArgTooltip" + tooltipClasses="text-nowrap" + tooltipText={inp.name} > { multiFields.current[index] = el }} className="form-control" placeholder={inp.type} data-id={`multiParamManagerInput${inp.name}`} /> - +
) })}
diff --git a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx index c413e2ec90..11f63add19 100644 --- a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx @@ -2,6 +2,7 @@ import React, {useRef, useState, useEffect} from 'react' import { RecorderProps } from '../types' import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line +import { CustomTooltip } from '@remix-ui/helper' export function RecorderUI (props: RecorderProps) { const inputLive = useRef() @@ -31,21 +32,22 @@ export function RecorderUI (props: RecorderProps) {
- - {'The number of recorded transactions'} - - }> +
{props.count}
- - - Save transactions (deployed contracts and function executions) and replay them in another environment.
e.g Transactions created in Remix VM can be replayed in the Injected Provider. - - - }> + + - +
@@ -56,43 +58,44 @@ export function RecorderUI (props: RecorderProps) {
- - If contracts are updated after recording transactions, checking this box
will run recorded transactions with the latest copy of the compiled contracts - - }> - - + + +
- - - { + - - }> + > - - - Run transaction(s) from the current scenario file - - }> + + - +
diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx index b9bdfa82ed..4c6b89133b 100644 --- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx @@ -7,9 +7,8 @@ import * as remixLib from '@remix-project/remix-lib' import * as ethJSUtil from 'ethereumjs-util' import { ContractGUI } from './contractGUI' import { TreeView, TreeViewItem } from '@remix-ui/tree-view' -import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line import { BN } from 'ethereumjs-util' -import { is0XPrefixed, isHexadecimal, isNumeric, shortenAddress } from '@remix-ui/helper' +import { CustomTooltip, is0XPrefixed, isHexadecimal, isNumeric, shortenAddress } from '@remix-ui/helper' const txHelper = remixLib.execution.txHelper @@ -244,13 +243,11 @@ export function UniversalDappUI (props: UdappProps) {
- - {'Remove from the list'} - - } + tooltipClasses="text-nowrap" + tooltipId="udapp_udappCloseTooltip" + tooltipText="Remove from the list" > - +
Low level interactions
- - {"check out docs for using 'receive'/'fallback'"} - - } + tooltipClasses="text-wrap" + tooltipId="receiveEthDocstoolTip" + tooltipText={"check out docs for using 'receive'/'fallback'"} > - +
- - {"The Calldata to send to fallback function of the contract."} - - } + tooltipClasses="text-nowrap" + tooltipId="deployAndRunLLTxCalldataInputTooltip" + tooltipText="The Calldata to send to fallback function of the contract." > - - + - Send data to contract. - - } + tooltipClasses="text-nowrap" + tooltipId="deployAndRunLLTxCalldataTooltip" + tooltipText="Send data to contract." > - +
diff --git a/libs/remix-ui/run-tab/src/lib/components/value.tsx b/libs/remix-ui/run-tab/src/lib/components/value.tsx index 3e23867aee..d4cd484a60 100644 --- a/libs/remix-ui/run-tab/src/lib/components/value.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/value.tsx @@ -1,9 +1,8 @@ // eslint-disable-next-line no-use-before-define import React, { useEffect, useRef, useState } from 'react' import { BN } from 'ethereumjs-util' -import { isNumeric } from '@remix-ui/helper' +import { CustomTooltip, isNumeric } from '@remix-ui/helper' import { ValueProps } from '../types' -import { OverlayTrigger, Tooltip } from 'react-bootstrap' export function ValueUI (props: ValueProps) { const [sendValue, setSendValue] = useState(props.sendValue) @@ -50,11 +49,12 @@ export function ValueUI (props: ValueProps) {
- - {"Enter an amount and choose its unit"} - - }> + - - { props.setUnit((e.target.value) as 'ether' | 'finney' | 'gwei' | 'wei') }}>