Show dropdown menu only if proxy address are available

libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx

@@ -56,20 +56,25 @@ export const CustomMenu = React.forwardRef(
   },
 )
 
-export const ProxyAddressToggle = React.forwardRef(({ children, onClick, className = '' }: { children: React.ReactNode, onClick: (e) => void, className: string }, ref: Ref<HTMLButtonElement>) => (
-  <button
+export const ProxyAddressToggle = React.forwardRef(({ address, onClick, className = '', onChange }: { address: string, onClick: (e) => void, className: string, onChange: (e: React.ChangeEvent<HTMLInputElement>) => void }, ref: Ref<HTMLDivElement>) => (
+  <div
     ref={ref}
     onClick={(e) => {
       e.preventDefault()
       onClick(e)
     }}
-    className={className.replace('dropdown-toggle', '')}
-  >
-    <div className="d-flex">
-      <div className="mr-auto text-nowrap">{ children }</div>
-      <div><i className="fad fa-sort-circle"></i></div>
-    </div>
-  </button>
+  className={'d-flex '+ className.replace('dropdown-toggle', '')}>
+    <input
+      onChange={(e) => {
+        e.preventDefault()
+        onChange(e)
+      }}
+      className="udapp_input udapp_ataddressinput form-control"
+      value={address}
+      placeholder="Enter Proxy Address"
+      style={{ width: '100%' }}
+    />
+  </div>
 ))
 
 export const ProxyDropdownMenu = React.forwardRef(

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

@@ -129,8 +129,8 @@ export const addSlash = (file: string) => {
   return file
 }
 
-export const shortenAddressAndDate = (address: string, date: Date) => {
+export const shortenAddressAndDate = (address: string, date: string) => {
   const len = address.length
 
-  return address.slice(0, 5) + '...' + address.slice(len - 5, len) + ' (' + date.toString() + ')'
+  return address.slice(0, 5) + '...' + address.slice(len - 5, len) + ' (' + new Date(date).toISOString().split('T')[0] + ')'
 }

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

@@ -41,7 +41,7 @@ export function ContractGUI (props: ContractGUIProps) {
     if (!proxyAddress && props.proxy && props.proxy.deployments.length > 0) {
       setProxyAddress(props.proxy.deployments[0].address)
     }
-  }, [proxyAddress, props.proxy])
+  }, [props.proxy])
 
   useEffect(() => {
     if (props.title) {
@@ -225,7 +225,6 @@ export function ContractGUI (props: ContractGUIProps) {
     setToggleUpgradeImp(value)
     if (value) {
       setToggleDeployProxy(false)
-      // if (useLastProxy) setProxyAddress(props.savedProxyAddress)
     }
     setDeployState({ deploy: false, upgrade: value })
   }
@@ -250,6 +249,12 @@ export function ContractGUI (props: ContractGUIProps) {
     setShowDropdown(isOpen)
   }
 
+  const handleAddressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const address = e.target.value
+
+    setProxyAddress(address)
+  }
+
   return (
     <div
       className={`udapp_contractProperty ${
@@ -513,27 +518,24 @@ export function ContractGUI (props: ContractGUIProps) {
             }`}
           >
             <Dropdown onToggle={toggleDropdown} show={showDropdown}>
-              <Dropdown.Toggle as={ProxyAddressToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1">
-                { proxyAddress }
-              </Dropdown.Toggle>
-
-              <Dropdown.Menu as={ProxyDropdownMenu} className='w-100 custom-dropdown-items' data-id="custom-dropdown-items">
-                {
-                  props.proxy.deployments.map((deployment, index) => (
-                    <Dropdown.Item
-                      key={index}
-                      onClick={() => {
-                        switchProxyAddress(deployment.address)
-                      }}
-                    >
-                        <div className='d-flex justify-content-between'>
+              <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">
+                  {
+                    props.proxy.deployments.map((deployment, index) => (
+                      <Dropdown.Item
+                        key={index}
+                        onClick={() => {
+                          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>
-                          <i className='fas fa-code-branch pt-1'></i>
-                        </div> 
-                      </Dropdown.Item>
-                    ))
-                  }
-                </Dropdown.Menu>
+                        </Dropdown.Item>
+                      ))
+                    }
+                  </Dropdown.Menu>
+                }
               </Dropdown>
             <div className={`flex-column 'd-flex'}`}>
                 <div className="mb-2">

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: Date }[] = action.payload
+      const payload: { address: string, date: 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: Date } = action.payload
+      const payload: { address: string, date: 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: Date }[]
+    deployments: { address: string, date: 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: Date }[] }
+  proxy: { deployments: { address: string, date: 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: Date }[] },
+  proxy?: { deployments: { address: string, date: string }[] },
   isValidProxyAddress?: (address: string) => Promise<boolean>,
   isValidProxyUpgrade?: (proxyAddress: string) => void
 }