Update tooltips and toaster for solidity and udapp

libs/remix-ui/run-tab/src/lib/actions/account.ts

@@ -1,7 +1,7 @@
 import { shortenAddress } from "@remix-ui/helper"
 import { RunTab } from "../types/run-tab"
 import { clearInstances, setAccount, setExecEnv } from "./actions"
-import { displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, setMatchPassphrase, setPassphrase } from "./payload"
+import { displayNotification, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, setMatchPassphrase, setPassphrase } from "./payload"
 import { toChecksumAddress } from '@ethereumjs/util'
 
 export const updateAccountBalances = async (plugin: RunTab, dispatch: React.Dispatch<any>) => {
@@ -39,7 +39,7 @@ export const fillAccountsList = async (plugin: RunTab, dispatch: React.Dispatch<
       dispatch(fetchAccountsListFailed(e.message))
     }
   } catch (e) {
-    dispatch(displayPopUp(`Cannot get account list: ${e}`))
+    plugin.call('notification', 'toast', `Cannot get account list: ${e}`)
   }
 }
 
@@ -78,9 +78,9 @@ export const createNewBlockchainAccount = async (plugin: RunTab, dispatch: React
     },
     async (error, address) => {
       if (error) {
-        return dispatch(displayPopUp('Cannot create an account: ' + error))
+        return plugin.call('notification', 'toast', 'Cannot create an account: ' + error)
       }
-      dispatch(displayPopUp(`account ${address} created`))
+      plugin.call('notification', 'toast', `account ${address} created`)
       await fillAccountsList(plugin, dispatch)
     }
   )
@@ -89,7 +89,7 @@ export const createNewBlockchainAccount = async (plugin: RunTab, dispatch: React
 export const signMessageWithAddress = (plugin: RunTab, dispatch: React.Dispatch<any>, account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => {
   plugin.blockchain.signMessage(message, account, passphrase, (err, msgHash, signedData) => {
     if (err) {
-      return displayPopUp(err)
+      return plugin.call('notification', 'toast', err)
     }
     dispatch(displayNotification('Signed Message', modalContent(msgHash, signedData), 'OK', null, () => {}, null))
   })

libs/remix-ui/run-tab/src/lib/actions/deploy.ts

@@ -6,7 +6,7 @@ import { SolcInput, SolcOutput } from "@openzeppelin/upgrades-core"
 // Used direct path to UpgradeableContract class to fix cyclic dependency error from @openzeppelin/upgrades-core library
 import { UpgradeableContract } from '../../../../../../node_modules/@openzeppelin/upgrades-core/dist/standalone'
 import { DeployMode, MainnetPrompt } from "../types"
-import { displayNotification, displayPopUp, fetchProxyDeploymentsSuccess, setDecodedResponse, updateInstancesBalance } from "./payload"
+import { displayNotification, fetchProxyDeploymentsSuccess, setDecodedResponse, updateInstancesBalance } from "./payload"
 import { addInstance } from "./actions"
 import { addressToString, logBuilder } from "@remix-ui/helper"
 import Web3 from "web3"
@@ -256,7 +256,7 @@ export const loadAddress = (plugin: RunTab, dispatch: React.Dispatch<any>, contr
         const contractData = { name: '<at address>', abi, contract: { file: plugin.REACT_API.contracts.currentFile } } as ContractData
         return addInstance(dispatch, { contractData, address, name: '<at address>' })
       } else if (loadType === 'instance') {
-        if (!contract) return dispatch(displayPopUp('No compiled contracts found.'))
+        if (!contract) return plugin.call('notification', 'toast', 'No compiled contracts found.')
         const currentFile = plugin.REACT_API.contracts.currentFile
         const compiler = plugin.REACT_API.contracts.contractList[currentFile].find(item => item.alias === contract.name)
         const contractData = getSelectedContract(contract.name, compiler.compiler)

libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx

@@ -416,7 +416,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
         ) : null}
       </div>
       <div className="udapp_subcontainer">
-        <CustomTooltip placement={'right'} tooltipClasses="text-nowrap text-left" tooltipId="remixUdappContractNamesTooltip" tooltipText={contractOptions.title}>
+        <CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap text-left" tooltipId="remixUdappContractNamesTooltip" tooltipText={contractOptions.title}>
           <select
             ref={contractsRef}
             value={currentContract}
@@ -447,7 +447,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
       </div>
       {evmVersion && loadedContractData && (
         <CustomTooltip
-          placement={'right'}
+          placement={'auto-end'}
           tooltipClasses="text-wrap text-left"
           tooltipId="info-evm-version-warn"
           tooltipText={
@@ -497,7 +497,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
                   checked={props.ipfsCheckedState}
                 />
                 <CustomTooltip
-                  placement={'right'}
+                  placement={'auto-end'}
                   tooltipClasses="text-wrap text-left"
                   tooltipId="remixIpfsUdappTooltip"
                   tooltipText={

libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx

@@ -285,7 +285,7 @@ export function ContractGUI(props: ContractGUIProps) {
       <div className="udapp_contractActionsContainerSingle pt-2" style={{ display: toggleContainer ? 'none' : 'flex' }}>
         <CustomTooltip
           delay={0}
-          placement={'right'}
+          placement={'auto-end'}
           tooltipClasses="text-wrap"
           tooltipId="remixUdappInstanceButtonTooltip"
           tooltipText={
@@ -368,7 +368,7 @@ export function ContractGUI(props: ContractGUIProps) {
                 </label>
               </button>
             </CopyToClipboard>
-            <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="remixUdappInstanceButtonTooltip" tooltipText={buttonOptions.title}>
+            <CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap" tooltipId="remixUdappInstanceButtonTooltip" tooltipText={buttonOptions.title}>
               <div onClick={handleExpandMultiClick}>
                 <button
                   type="button"

libs/remix-ui/run-tab/src/lib/components/environment.tsx

@@ -24,12 +24,12 @@ export function EnvironmentUI(props: EnvironmentProps) {
       <label id="selectExEnv" className="udapp_settingsLabel">
         <FormattedMessage id="udapp.environment" />
 
-        <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText2" />}>
+        <CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText2" />}>
           <a href="https://chainlist.org/" target="_blank">
             <i className={'ml-2 fas fa-plug'} aria-hidden="true"></i>
           </a>
         </CustomTooltip>
-        <CustomTooltip placement={'right'} tooltipClasses="text-wrap" tooltipId="runAndDeployAddresstooltip" tooltipText={<FormattedMessage id="udapp.environmentDocs" />}>
+        <CustomTooltip placement={'auto-end'} tooltipClasses="text-wrap" tooltipId="runAndDeployAddresstooltip" tooltipText={<FormattedMessage id="udapp.environmentDocs" />}>
           <a href="https://remix-ide.readthedocs.io/en/latest/run.html#environment" target="_blank" rel="noreferrer">
             <i className="udapp_infoDeployAction ml-2 fas fa-info-circle"></i>
           </a>
@@ -41,7 +41,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
             {isL2(currentProvider && currentProvider.displayName)}
             {currentProvider && currentProvider.displayName}
             {currentProvider && bridges[currentProvider.displayName] && (
-              <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText3" />}>
+              <CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText3" />}>
                 <i
                   style={{ fontSize: 'medium' }}
                   className={'ml-2 fa fa-rocket-launch'}

libs/remix-ui/run-tab/src/lib/components/gasLimit.tsx

@@ -64,7 +64,7 @@ export function GasLimitUI(props: GasPriceProps) {
           <label className="mb-1 w-50 form-check-label custom-control-label" htmlFor="glManualConfig" data-id="glManualConfiguration">
             <FormattedMessage id="udapp.gasLimitManual" />
           </label>
-          <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="remixGasPriceTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText4" />}>
+          <CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap" tooltipId="remixGasPriceTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText4" />}>
             <input
               type="number"
               ref={inputComponent}

libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx

@@ -64,7 +64,7 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
         </CustomTooltip>
         {instanceList.length > 0 ? (
           <CustomTooltip
-            placement="right"
+            placement={'auto-end'}
             tooltipClasses="text-nowrap"
             tooltipId="deployAndRunClearInstancesTooltip"
             tooltipText={<FormattedMessage id="udapp.deployAndRunClearInstances" />}

libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx

@@ -41,7 +41,7 @@ export function RecorderUI(props: RecorderProps) {
             <FormattedMessage id="udapp.transactionsRecorded" />
           </label>
           <CustomTooltip
-            placement={'right'}
+            placement={'auto-end'}
             tooltipClasses="text-nowrap"
             tooltipId="recordedTransactionsCounttooltip"
             tooltipText={<FormattedMessage id="udapp.transactionsCountTooltip" />}
@@ -51,7 +51,7 @@ export function RecorderUI(props: RecorderProps) {
             </div>
           </CustomTooltip>
           <CustomTooltip
-            placement={'right'}
+            placement={'auto-end'}
             tooltipClasses="text-nowrap"
             tooltipId="recordedTransactionsWalkthroughtooltip"
             tooltipText={<FormattedMessage id="udapp.transactionsWalkthroughTooltip" />}
@@ -77,7 +77,7 @@ export function RecorderUI(props: RecorderProps) {
         <div className="mb-1 mt-1 custom-control custom-checkbox mb-1" id='udappRecorderUseLatest'>
           <input ref={inputLive} type="checkbox" id="livemode-recorder" className="custom-control-input custom-select" name="input-livemode" />
           <CustomTooltip
-            placement={'right'}
+            placement={'auto-end'}
             tooltipClasses="text-wrap"
             tooltipId="tooltip-livemode-recorder"
             tooltipText={

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -1127,7 +1127,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton}
             >
               <CustomTooltip
-                placement="right"
+                placement={'auto-end'}
                 tooltipId="overlay-tooltip-compile-run"
                 tooltipText={
                   <div className="text-left">

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

@@ -272,7 +272,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
               }}
             >
               <CustomTooltip
-                placement="right"
+                placement={'auto-end'}
                 tooltipId="publishOnIpfsTooltip"
                 tooltipClasses="text-nowrap"
                 tooltipText={`${intl.formatMessage({
@@ -295,7 +295,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
               }}
             >
               <CustomTooltip
-                placement="right"
+                placement={'auto-end'}
                 tooltipId="publishOnSwarmTooltip"
                 tooltipClasses="text-nowrap"
                 tooltipText={`${intl.formatMessage({
@@ -320,7 +320,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
               }}
             >
               <CustomTooltip
-                placement="right"
+                placement={'auto-end'}
                 tooltipId="CompilationDetailsTooltip"
                 tooltipClasses="text-nowrap"
                 tooltipText={<FormattedMessage id="solidity.displayContractDetails" />}

libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx

@@ -27,7 +27,7 @@ const StaticAnalyserButton = ({ onClick, buttonText, disabled, title, classList
   )
 
   const buttonWithTooltip = () => (
-    <CustomTooltip placement="right" tooltipId="ssaRunButtonTooltip" tooltipClasses="text-nowrap" tooltipText={title}>
+    <CustomTooltip placement={'auto-end'} tooltipId="ssaRunButtonTooltip" tooltipClasses="text-nowrap" tooltipText={title}>
       <div id="staticAnalysisWrapper" className={`${newclassList} p-0`}>
         <button id="staticAnalysisRunBtn" className={newclassList} disabled={disabled} onClick={onClick} style={{ pointerEvents: 'none', color: 'white' }}>
           <span className="pl-3 pr-4">{buttonText}</span>

libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx

@@ -118,7 +118,7 @@ const Icon = ({ iconRecord, verticalIconPlugin, contextMenuAction, theme }: Icon
           >
             <img
               data-id={iconRecord.active ? `selected` : ''}
-              className={`${theme === 'dark' ? 'invert' : ''} ${theme} remixui_image ${iconRecord.active ? `selected-${theme}` : ''}`}
+              className={`${theme === 'dark' ? 'invert' : ''} ${theme} remixui_image ${iconRecord.active || iconRecord.pinned ? `selected-${theme}` : ''}`}
               src={icon}
               alt={name}
             />