custom tooltip to reset etherscan

libs/remix-ui/settings/src/lib/etherscan-settings.tsx

@@ -1,4 +1,5 @@
 import { CopyToClipboard } from '@remix-ui/clipboard'
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useEffect, useState } from 'react'
 import { EtherscanSettingsProps } from '../types'
 import { etherscanTokenTitle, etherscanAccessTokenText, etherscanAccessTokenText2, etherscanTokenLink } from './constants'
@@ -48,7 +49,13 @@ export function EtherscanSettings (props: EtherscanSettingsProps) {
           <div className="text-secondary mb-0 h6">
             <div className="d-flex justify-content-end pt-2">
               <input className="btn btn-sm btn-primary ml-2" id="saveetherscantoken" data-id="settingsTabSaveEtherscanToken" onClick={saveEtherscanToken} value="Save" type="button" disabled={etherscanToken === ''}></input>
-              <button className="btn btn-sm btn-secondary ml-2" id="removeetherscantoken" data-id="settingsTabRemoveEtherscanToken" title="Delete Etherscan token" onClick={removeToken}>Remove</button>
+              <CustomTooltip
+                tooltipText="Delete Etherscan token"
+                tooltipClasses="text-nowrap"
+                tooltipId="removeetherscantokenTooltip"
+                placement="left-start"
+              >
+                <button className="btn btn-sm btn-secondary ml-2" id="removeetherscantoken" data-id="settingsTabRemoveEtherscanToken" title="Delete Etherscan token" onClick={removeToken}>Remove</button></CustomTooltip>
             </div>
           </div>
         </div>

libs/remix-ui/settings/src/lib/github-settings.tsx

@@ -1,4 +1,5 @@
 import { CopyToClipboard } from '@remix-ui/clipboard'
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useEffect, useState } from 'react'
 import { GithubSettingsProps } from '../types'
 import { gitAccessTokenTitle, gitAccessTokenText, gitAccessTokenText2, gitAccessTokenLink } from './constants'
@@ -73,7 +74,14 @@ export function GithubSettings (props: GithubSettingsProps) {
             <input id="githubemail" data-id="settingsTabGithubEmail" type="text" className="form-control" onChange={(e) => handleChangeEmailState(e)} value={ githubEmail } />
             <div className="d-flex justify-content-end pt-2">
               <input className="btn btn-sm btn-primary ml-2" id="savegisttoken" data-id="settingsTabSaveGistToken" onClick={saveGithubToken} value="Save" type="button" disabled={githubToken === ''}></input>
-              <button className="btn btn-sm btn-secondary ml-2" id="removegisttoken" data-id="settingsTabRemoveGistToken" title="Delete GitHub Credentials" onClick={removeToken}>Remove</button>
+              <CustomTooltip
+                tooltipText="Delete Github Credentials"
+                tooltipClasses="text-nowrap"
+                tooltipId="removegisttokenTooltip"
+                placement="top-start"
+              >
+                <button className="btn btn-sm btn-secondary ml-2" id="removegisttoken" data-id="settingsTabRemoveGistToken" onClick={removeToken}>Remove</button>
+              </CustomTooltip>
             </div>
           </div>
         </div>

libs/remix-ui/settings/src/lib/remix-ui-settings.tsx

@@ -9,6 +9,7 @@ import { Toaster } from '@remix-ui/toaster'// eslint-disable-line
 import { RemixUiThemeModule, ThemeModule} from '@remix-ui/theme-module'
 import { GithubSettings } from './github-settings'
 import { EtherscanSettings } from './etherscan-settings'
+import { CustomTooltip } from '@remix-ui/helper'
 
 /* eslint-disable-next-line */
 export interface RemixUiSettingsProps {
@@ -154,25 +155,32 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     const displayErrorsChecked = props.config.get('settings/display-errors') || false
     return (
       <div className="$border-top">
-        <div title="Reset to Default settings." className='d-flex justify-content-end pr-4'>
+        <CustomTooltip
-          <button className="btn btn-sm btn-secondary ml-2" onClick={() => {
+          tooltipText="Reset to Default settings"
-            try {
+          tooltipId="resetDefaultTooltip"
-              if ((window as any).remixFileSystem.name === 'indexedDB') {
+          tooltipClasses="text-nowrap"
-                props.config.clear()
+          placement="top-start"
-                try {
+        >
-                  localStorage.clear() // remove the whole storage
+          <div className='d-flex justify-content-end pr-4'>
-                } catch (e) {
+            <button className="btn btn-sm btn-secondary ml-2" onClick={() => {
-                  console.log(e)
+              try {
+                if ((window as any).remixFileSystem.name === 'indexedDB') {
+                  props.config.clear()
+                  try {
+                    localStorage.clear() // remove the whole storage
+                  } catch (e) {
+                    console.log(e)
+                  }
+                } else {
+                  props.config.clear() // remove only the remix settings
                 }
-              } else {
+                refresh(resetState + 1)
-                props.config.clear() // remove only the remix settings
+              } catch (e) {
+                console.log(e)
               }
-              refresh(resetState + 1)
+            }}>Reset to Default settings</button>
-            } catch (e) {
+          </div>
-              console.log(e)
+        </CustomTooltip>
-            }
-          }}>Reset to Default settings</button>
-        </div>
         <div className="card-body pt-3 pb-2">
           <h6 className="card-title">General settings</h6>
           <div className="mt-2 custom-control custom-checkbox mb-1">