diff --git a/deployables/app/app/components/AvatarInput.tsx b/deployables/app/app/components/AvatarInput.tsx new file mode 100644 index 00000000..6427b04d --- /dev/null +++ b/deployables/app/app/components/AvatarInput.tsx @@ -0,0 +1,109 @@ +import { Blockie, Select, selectStyles, TextInput } from '@zodiac/ui' +import { getAddress } from 'ethers' +import { useEffect, useState } from 'react' + +type Props = { + value: string + availableSafes?: string[] + onChange(value: string): void +} + +type Option = { + value: string + label: string +} + +export const AvatarInput = ({ + value, + onChange, + availableSafes = [], +}: Props) => { + const [pendingValue, setPendingValue] = useState(value) + + useEffect(() => { + setPendingValue(value) + }, [value]) + + const checksumAvatarAddress = validateAddress(pendingValue) + + if (availableSafes.length > 0 || checksumAvatarAddress) { + return ( + + {({ inputId }) => ( -