Add contract name to display

apps/remix-ide/src/blockchain/blockchain.js

@@ -181,7 +181,7 @@ export class Blockchain extends Plugin {
         return this.call('terminal', 'logHtml', log)
       }
       await this.saveDeployedContractStorageLayout(implementationContractObject, address, networkInfo)
-      this.events.emit('newProxyDeployment', address, new Date().toISOString())
+      this.events.emit('newProxyDeployment', address, new Date().toISOString(), implementationContractObject.contractName)
       _paq.push(['trackEvent', 'blockchain', 'Deploy With Proxy', 'Proxy deployment successful'])
       this.call('udapp', 'addInstance', addressToString(address), implementationContractObject.abi, implementationContractObject.name)
     }

libs/remix-ui/helper/src/lib/remix-ui-helper.ts

@@ -129,8 +129,21 @@ export const addSlash = (file: string) => {
   return file
 }
 
-export const shortenAddressAndDate = (address: string, date: string) => {
+export const shortenProxyAddress = (address: string) => {
   const len = address.length
 
-  return address.slice(0, 5) + '...' + address.slice(len - 5, len) + ' (' + new Date(date).toISOString().split('T')[0] + ')'
+  return address.slice(0, 5) + '...' + address.slice(len - 5, len)
+}
+
+export const shortenDate = (dateString: string) => {
+  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' })
+  }
 }

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

@@ -91,6 +91,6 @@ export const setSendTransactionValue = (dispatch: React.Dispatch<any>, value: st
   dispatch(setSendValue(value))
 }
 
-export const addNewProxyDeployment = (dispatch: React.Dispatch<any>, address: string, date: Date) => {
+export const addNewProxyDeployment = (dispatch: React.Dispatch<any>, address: string, date: string, contractName: string) => {
-  dispatch(newProxyDeployment({ address, date }))
+  dispatch(newProxyDeployment({ address, date, contractName }))
 }

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

@@ -353,7 +353,7 @@ export const getNetworkProxyAddresses = async (plugin: RunTab, dispatch: React.D
     for (const proxyAddress in Object.keys(parsedNetworkFile.deployments)) {
       const solcBuildExists = await plugin.call('fileManager', 'exists', `.deploys/upgradeable-contracts/${identifier}/solc-${parsedNetworkFile.deployments[proxyAddress].implementationAddress}.json`)
 
-      if (solcBuildExists) deployments.push({ address: proxyAddress, date: parsedNetworkFile.deployments[proxyAddress].date })
+      if (solcBuildExists) deployments.push({ address: proxyAddress, date: parsedNetworkFile.deployments[proxyAddress].date, contractName: parsedNetworkFile.deployments[proxyAddress].contractName })
     }
     dispatch(fetchProxyDeploymentsSuccess(deployments))
   } else {

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

@@ -45,7 +45,7 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
 
   plugin.blockchain.event.register('removeProvider', name => removeExternalProvider(dispatch, name))
 
-  plugin.blockchain.events.on('newProxyDeployment', (address, date) => addNewProxyDeployment(dispatch, address, date))
+  plugin.blockchain.events.on('newProxyDeployment', (address, date, contractName) => addNewProxyDeployment(dispatch, address, date, contractName))
 
   plugin.on('solidity', 'compilationFinished', (file, source, languageVersion, data, input, version) => broadcastCompilationResult('remix', plugin, dispatch, file, source, languageVersion, data, input))
 

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

@@ -308,14 +308,14 @@ export const setRemixDActivated = (activated: boolean) => {
   }
 }
 
-export const fetchProxyDeploymentsSuccess = (deployments: { address: string, date: Date }[]) => {
+export const fetchProxyDeploymentsSuccess = (deployments: { address: string, date: string, contractName: string }[]) => {
   return {
     type: FETCH_PROXY_DEPLOYMENTS,
     payload: deployments
   }
 }
 
-export const newProxyDeployment = (deployment: { address: string, date: Date }) => {
+export const newProxyDeployment = (deployment: { address: string, date: string, contractName: string }) => {
   return {
     type: NEW_PROXY_DEPLOYMENT,
     payload: deployment

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

@@ -4,7 +4,7 @@ import { FormattedMessage, useIntl } from 'react-intl'
 import * as remixLib from '@remix-project/remix-lib'
 import { ContractGUIProps } from '../types'
 import { CopyToClipboard } from '@remix-ui/clipboard'
-import { CustomTooltip, ProxyAddressToggle, ProxyDropdownMenu, shortenAddressAndDate } from '@remix-ui/helper'
+import { CustomTooltip, ProxyAddressToggle, ProxyDropdownMenu, shortenDate, shortenProxyAddress } from '@remix-ui/helper'
 import { Dropdown } from 'react-bootstrap'
 
 const txFormat = remixLib.execution.txFormat
@@ -521,7 +521,7 @@ export function ContractGUI (props: ContractGUIProps) {
               <Dropdown.Toggle id="dropdown-custom-components" as={ProxyAddressToggle} address={proxyAddress} onChange={handleAddressChange} className="d-inline-block border border-dark bg-dark" />
 
               { props.proxy.deployments.length > 0 &&
-                <Dropdown.Menu as={ProxyDropdownMenu} className='w-100 custom-dropdown-items' data-id="custom-dropdown-items">
+                <Dropdown.Menu as={ProxyDropdownMenu} className='w-100 custom-dropdown-items' data-id="custom-dropdown-items" style={{ overflow: 'hidden' }}>
                   {
                     props.proxy.deployments.map((deployment, index) => (
                       <Dropdown.Item
@@ -530,7 +530,7 @@ export function ContractGUI (props: ContractGUIProps) {
                           switchProxyAddress(deployment.address)
                         }}
                       >
-                          <span>{ proxyAddress === deployment.address ? <span>&#10003; { shortenAddressAndDate(deployment.address, deployment.date) } </span> : <span className="pl-3">{ shortenAddressAndDate(deployment.address, deployment.date) }</span> }</span>
+                          <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>
                         </Dropdown.Item>
                       ))
                     }

libs/remix-ui/run-tab/src/lib/reducers/runTab.ts

@@ -612,7 +612,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
     }
 
     case FETCH_PROXY_DEPLOYMENTS: {
-      const payload: { address: string, date: string }[] = action.payload
+      const payload: { address: string, date: string, contractName: string }[] = action.payload
 
       return {
         ...state,
@@ -624,7 +624,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
     }
 
     case NEW_PROXY_DEPLOYMENT: {
-      const payload: { address: string, date: string } = action.payload
+      const payload: { address: string, date: string, contractName: string } = action.payload
 
       return {
         ...state,

libs/remix-ui/run-tab/src/lib/types/index.ts

@@ -101,7 +101,7 @@ export interface RunTabState {
   }
   remixdActivated: boolean,
   proxy: {
-    deployments: { address: string, date: string }[]
+    deployments: { address: string, date: string, contractName: string }[]
   }
 }
 
@@ -265,7 +265,7 @@ export interface ContractDropdownProps {
   remixdActivated: boolean,
   isValidProxyAddress?: (address: string) => Promise<boolean>,
   isValidProxyUpgrade?: (proxyAddress: string, contractName: string, solcInput: SolcInput, solcOuput: SolcOutput) => void,
-  proxy: { deployments: { address: string, date: string }[] }
+  proxy: { deployments: { address: string, date: string, contractName: string }[] }
 }
 
 export interface RecorderProps {
@@ -360,7 +360,7 @@ export interface ContractGUIProps {
   isDeploy?: boolean,
   deployOption?: { title: DeployMode, active: boolean }[],
   initializerOptions?: DeployOption,
-  proxy?: { deployments: { address: string, date: string }[] },
+  proxy?: { deployments: { address: string, date: string, contractName: string }[] },
   isValidProxyAddress?: (address: string) => Promise<boolean>,
   isValidProxyUpgrade?: (proxyAddress: string) => void
 }