diff --git a/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx b/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx index 61c27bce8e..77076ac67f 100644 --- a/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx +++ b/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx @@ -55,3 +55,38 @@ export const CustomMenu = React.forwardRef( ) }, ) + +export const ProxyAddressToggle = React.forwardRef(({ children, onClick, className = '' }: { children: React.ReactNode, onClick: (e) => void, className: string }, ref: Ref) => ( + +)) + +export const ProxyDropdownMenu = React.forwardRef( + ({ children, style, className, 'aria-labelledby': labeledBy }: { children: React.ReactNode, style?: React.CSSProperties, className: string, 'aria-labelledby'?: string }, ref: Ref) => { + return ( +
+
    + { + children + } +
+
+ ) + }, +) diff --git a/libs/remix-ui/helper/src/lib/remix-ui-helper.ts b/libs/remix-ui/helper/src/lib/remix-ui-helper.ts index c4d6ce6cb8..17d4af95a3 100644 --- a/libs/remix-ui/helper/src/lib/remix-ui-helper.ts +++ b/libs/remix-ui/helper/src/lib/remix-ui-helper.ts @@ -129,7 +129,7 @@ export const addSlash = (file: string) => { return file } -export const shortenDeploymentAddresses = (address: string, date: Date) => { +export const shortenAddressAndDate = (address: string, date: Date) => { const len = address.length return address.slice(0, 5) + '...' + address.slice(len - 5, len) + ' (' + date.toString() + ')' 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 3cd52134c9..883bac2d00 100644 --- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx @@ -4,7 +4,8 @@ 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, shortenDeploymentAddresses } from '@remix-ui/helper' +import { CustomTooltip, ProxyAddressToggle, ProxyDropdownMenu, shortenAddressAndDate } from '@remix-ui/helper' +import { Dropdown } from 'react-bootstrap' const txFormat = remixLib.execution.txFormat const txHelper = remixLib.execution.txHelper @@ -23,6 +24,7 @@ export function ContractGUI (props: ContractGUIProps) { const [deployState, setDeployState] = useState<{ deploy: boolean, upgrade: boolean }>({ deploy: false, upgrade: false }) const [proxyAddress, setProxyAddress] = useState('') const [proxyAddressError, setProxyAddressError] = useState('') + const [showDropdown, setShowDropdown] = useState(false) const multiFields = useRef>([]) const initializeFields = useRef>([]) const basicInputRef = useRef() @@ -228,9 +230,8 @@ export function ContractGUI (props: ContractGUIProps) { setDeployState({ deploy: false, upgrade: value }) } - const handleSelectProxyAddress = (e) => { - const value = e.target.value - setProxyAddress(value) + const switchProxyAddress = (address: string) => { + setProxyAddress(address) } const validateProxyAddress = async (address: string) => { @@ -245,6 +246,10 @@ export function ContractGUI (props: ContractGUIProps) { } } + const toggleDropdown = (isOpen: boolean) => { + setShowDropdown(isOpen) + } + return (
+ + + { proxyAddress } + + + + { + props.proxy.deployments.map((deployment, index) => ( + { + switchProxyAddress(deployment.address) + }} + > +
+ { proxyAddress === deployment.address ? ✓ { shortenAddressAndDate(deployment.address, deployment.date) } : { shortenAddressAndDate(deployment.address, deployment.date) } } + +
+
+ )) + } +
+
- { proxyAddressError && { proxyAddressError } }