From f11362b68d6657c909d462cecc84a63f6ba89c05 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 18 Oct 2022 00:25:35 +0100
Subject: [PATCH] finish addressing review comments

---
 .../src/lib/components/contractDropdownUI.tsx |  4 +-
 .../src/lib/components/contractGUI.tsx        | 30 +++++++++------
 .../src/lib/components/deployButton.tsx       | 17 +++++++--
 .../src/lib/components/deployInput.tsx        | 28 +++++++++-----
 .../lib/components/instanceContainerUI.tsx    | 37 +++++++++++++++----
 .../src/lib/components/multiDeployInput.tsx   | 12 +++++-
 .../src/lib/components/universalDappUI.tsx    | 22 +++++++----
 7 files changed, 108 insertions(+), 42 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 a128fc1cf4..a4b9cbc23d 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -323,8 +323,8 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
                   checked={props.ipfsCheckedState}
                 />
                 <OverlayTrigger placement={'right'} overlay={
-                  <Tooltip className="text-nowrap" id="remixIpfsUdappTooltip">
-                    <span>{"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...)"}</span>
+                  <Tooltip className="text-wrap" id="remixIpfsUdappTooltip">
+                    <span>Publishing the source code and metadata to IPFS facilitates source code verification <br />using Sourcify and will greatly foster contract adoption (auditing, debugging, calling it, etc...)</span>
                   </Tooltip>
                 }>
                   <label
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 0237665932..cccbbbbb2e 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
@@ -248,10 +248,10 @@ export function ContractGUI (props: ContractGUIProps) {
         style={{ display: toggleContainer ? "none" : "flex" }}
       >
         <OverlayTrigger
-          placement={"right"}
+          placement={"right-start"}
           overlay={
             <Tooltip
-              className="text-nowrap"
+              className="text-wrap"
               id="remixUdappInstanceButtonTooltip"
             >
               <span>{buttonOptions.title}</span>
@@ -337,15 +337,23 @@ export function ContractGUI (props: ContractGUIProps) {
               return (
                 <div className="udapp_multiArg" key={index}>
                   <label htmlFor={inp.name}> {inp.name}: </label>
-                  <input
-                    ref={(el) => {
-                      multiFields.current[index] = el;
-                    }}
-                    className="form-control"
-                    placeholder={inp.type}
-                    title={inp.name}
-                    data-id={`multiParamManagerInput${inp.name}`}
-                  />
+                  <OverlayTrigger
+                    placement="left-end"
+                    overlay={
+                      <Tooltip id="udappContractActionsTooltip" className="text-nowrap">
+                        <span>{inp.name}</span>
+                      </Tooltip>
+                    }
+                  >
+                    <input
+                      ref={(el) => {
+                        multiFields.current[index] = el;
+                      }}
+                      className="form-control"
+                      placeholder={inp.type}
+                      data-id={`multiParamManagerInput${inp.name}`}
+                    />
+                  </OverlayTrigger>
                 </div>
               );
             })}
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 ced72344d5..08fa2843c7 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,6 @@
 import React, { useState } from 'react'
 import { DeployButtonProps } from '../types'
-import { ButtonGroup, Dropdown } from 'react-bootstrap'
+import { ButtonGroup, Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 export function DeployButton (props: DeployButtonProps) {
   const [showOptions, setShowOptions] = useState<boolean>(false)
@@ -24,9 +24,18 @@ export function DeployButton (props: DeployButtonProps) {
           }
         </Dropdown.Menu>
       </Dropdown> : 
-      <button onClick={props.handleActionClick} title={props.buttonOptions.title} className={`udapp_instanceButton ${props.buttonOptions.widthClass} btn btn-sm ${props.buttonOptions.classList}`} data-id={props.buttonOptions.dataId}>
-        Deploy
-      </button>
+      <OverlayTrigger
+        placement="right-start"
+        overlay={
+          <Tooltip id="deployButtonTooltip" className="text-nowrap">
+            <span>{props.buttonOptions.title}</span>
+          </Tooltip>
+        }
+      >
+        <button onClick={props.handleActionClick} className={`udapp_instanceButton ${props.buttonOptions.widthClass} btn btn-sm ${props.buttonOptions.classList}`} data-id={props.buttonOptions.dataId}>
+          Deploy
+        </button>
+      </OverlayTrigger>
     }
     </>
   )
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 26fcf2a164..c5dc153e42 100644
--- a/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { DeployInputProps } from '../types'
 import { DeployButton } from './deployButton'
 
@@ -6,15 +7,24 @@ export function DeployInput (props: DeployInputProps) {
   return (
     <div className="udapp_contractActionsContainerSingle pt-2" style={{ display: 'flex' }}>
       <DeployButton buttonOptions={props.buttonOptions} selectedIndex={props.selectedIndex} setSelectedIndex={props.setSelectedIndex} handleActionClick={props.handleActionClick} deployOptions={props.deployOptions} />
-      <input
-        className="form-control"
-        data-id={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : 'multiParamManagerBasicInputField'}
-        placeholder={props.inputs}
-        title={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs}
-        onChange={props.handleBasicInput}
-        ref={props.basicInputRef}
-        style={{ visibility: !props.inputs ? 'hidden' : 'visible' }}
-      />
+      <OverlayTrigger
+        placement="right-start"
+        overlay={
+          <Tooltip id="deployInputTooltip" className="text-nowrap">
+            <span>{props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs}</span>
+          </Tooltip>
+        }
+      >
+        <input
+          className="form-control"
+          data-id={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : 'multiParamManagerBasicInputField'}
+          placeholder={props.inputs}
+          title={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs}
+          onChange={props.handleBasicInput}
+          ref={props.basicInputRef}
+          style={{ visibility: !props.inputs ? 'hidden' : 'visible' }}
+        />
+      </OverlayTrigger>
     </div>
   )
 }
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 c6a838bf12..94cb03deba 100644
--- a/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { InstanceContainerProps } from '../types'
 import { UniversalDappUI } from './universalDappUI'
 
@@ -12,15 +13,35 @@ export function InstanceContainerUI (props: InstanceContainerProps) {
 
   return (
     <div className="udapp_instanceContainer mt-3 border-0 list-group-item">
-      <label className="udapp_deployedContracts d-flex justify-content-between align-items-center pl-2 mb-2"
-        title="Autogenerated generic user interfaces for interaction with deployed contracts">
-        Deployed Contracts
+      <div className="d-flex justify-content-between align-items-center pl-2 mb-2">
+        <OverlayTrigger
+          placement="top-start"
+          overlay={
+            <Tooltip className="text-nowrap" id="deployAndRunClearInstancesTooltip">
+              <span>{"Autogenerated generic user interfaces for interaction with deployed contracts"}</span>
+            </Tooltip>
+          }
+        >
+          <label className="udapp_deployedContracts">
+            Deployed Contracts
+          </label>
+        </OverlayTrigger>
         { instanceList.length > 0
-          ? <i className="mr-2 udapp_icon far fa-trash-alt" data-id="deployAndRunClearInstances" onClick={clearInstance}
-            title="Clear instances list and reset recorder" aria-hidden="true">
-          </i> : null
-        }
-      </label>
+            ? (
+            <OverlayTrigger
+              placement="right"
+              overlay={
+                <Tooltip className="text-nowrap" id="deployAndRunClearInstancesTooltip">
+                  <span>{"Clear instances list and reset recorder"}</span>
+                </Tooltip>
+              } 
+            >
+              <i className="mr-2 udapp_icon far fa-trash-alt" data-id="deployAndRunClearInstances" onClick={clearInstance} aria-hidden="true">
+              </i>
+            </OverlayTrigger>
+            ) : null
+          }
+      </div>
       { instanceList.length > 0
         ? <div> { props.instances.instanceList.map((instance, index) => {
           return <UniversalDappUI
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 6f3d355852..8764750402 100644
--- a/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx
@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { MultiDeployInputProps } from '../types'
 import { DeployButton } from './deployButton'
 
@@ -16,7 +17,16 @@ export function MultiDeployInput(props: MultiDeployInputProps) {
             return (
               <div className="udapp_multiArg" key={index}>
                 <label htmlFor={inp.name}> {inp.name}: </label>
-                <input ref={el => { multiFields.current[index] = el }} className="form-control" placeholder={inp.type} title={inp.name} data-id={`multiParamManagerInput${inp.name}`} />
+                <OverlayTrigger
+                  placement="left-end"
+                  overlay={
+                    <Tooltip id="udappMultiArgTooltip" className="text-nowrap">
+                      <span>{inp.name}</span>
+                    </Tooltip>
+                  }
+                >
+                  <input ref={el => { multiFields.current[index] = el }} className="form-control" placeholder={inp.type} data-id={`multiParamManagerInput${inp.name}`} />
+                </OverlayTrigger>
               </div>)
           })}
         </div>
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 a144be38b8..b9bdfa82ed 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -244,14 +244,22 @@ export function UniversalDappUI (props: UdappProps) {
             </button>
           </div>
         </div>
-        <button
-          className="udapp_udappClose mr-1 p-1 btn btn-secondary align-items-center"
-          data-id="universalDappUiUdappClose"
-          onClick={remove}
-          title="Remove from the list"
+        <OverlayTrigger
+          placement="right"
+          overlay={
+            <Tooltip className="text-nowrap" id="udapp_udappCloseTooltip">
+              <span>{'Remove from the list'}</span>
+            </Tooltip>
+          }
         >
-          <i className="udapp_closeIcon fas fa-times" aria-hidden="true"></i>
-        </button>
+          <button
+            className="udapp_udappClose mr-1 p-1 btn btn-secondary align-items-center"
+            data-id="universalDappUiUdappClose"
+            onClick={remove}
+          >
+            <i className="udapp_closeIcon fas fa-times" aria-hidden="true"></i>
+          </button>
+        </OverlayTrigger>
       </div>
       <div
         className="udapp_cActionsWrapper"