Added tooltip

pull/5370/head
ioedeveloper 2 years ago committed by Aniket
parent 03483a7dcd
commit 1ec12a8a44
  1. 7
      libs/remix-ui/helper/src/lib/remix-ui-helper.ts
  2. 9
      libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx

@ -137,13 +137,6 @@ export const shortenProxyAddress = (address: string) => {
export const shortenDate = (dateString: string) => { export const shortenDate = (dateString: string) => {
const date = new Date(dateString) const date = new Date(dateString)
const now = new Date()
const diff = now.getTime() - date.getTime()
const oneDay = 24 * 60 * 60 * 1000
if (diff < oneDay) {
return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
} else {
return date.toLocaleDateString(undefined, { month: "short", day: "numeric" }) + ', ' + date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }) return date.toLocaleDateString(undefined, { month: "short", day: "numeric" }) + ', ' + date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
}
} }

@ -538,14 +538,21 @@ export function ContractGUI (props: ContractGUIProps) {
<Dropdown.Menu as={ProxyDropdownMenu} className='w-100 custom-dropdown-items' data-id="custom-dropdown-items" style={{ overflow: 'hidden' }}> <Dropdown.Menu as={ProxyDropdownMenu} className='w-100 custom-dropdown-items' data-id="custom-dropdown-items" style={{ overflow: 'hidden' }}>
{ {
props.proxy.deployments.map((deployment, index) => ( props.proxy.deployments.map((deployment, index) => (
<CustomTooltip
placement={"right"}
tooltipClasses="text-nowrap"
tooltipId={`proxyAddressTooltip${index}`}
tooltipText={'Deployed ' + shortenDate(deployment.date)}
>
<Dropdown.Item <Dropdown.Item
key={index} key={index}
onClick={() => { onClick={() => {
switchProxyAddress(deployment.address) switchProxyAddress(deployment.address)
}} }}
> >
<span>{ proxyAddress === deployment.address ? <span>&#10003; { deployment.contractName + ' ' + shortenProxyAddress(deployment.address) + ' (' + shortenDate(deployment.date) + ')' } </span> : <span className="pl-3">{ deployment.contractName + ' ' + shortenProxyAddress(deployment.address) + ' (' + shortenDate(deployment.date) + ')' }</span> }</span> <span>{ proxyAddress === deployment.address ? <span>&#10003; { deployment.contractName + ' ' + shortenProxyAddress(deployment.address) } </span> : <span className="pl-3">{ deployment.contractName + ' ' + shortenProxyAddress(deployment.address) }</span> }</span>
</Dropdown.Item> </Dropdown.Item>
</CustomTooltip>
)) ))
} }
</Dropdown.Menu> </Dropdown.Menu>

Loading…
Cancel
Save