68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
|
import {
|
||
|
|
FormControl,
|
||
|
|
FormLabel,
|
||
|
|
InputGroup,
|
||
|
|
Input,
|
||
|
|
InputRightElement,
|
||
|
|
Button,
|
||
|
|
} from "@chakra-ui/react";
|
||
|
|
|
||
|
|
interface AddressInputParams {
|
||
|
|
showAddress: string;
|
||
|
|
setShowAddress: (value: string) => void;
|
||
|
|
setAddress: (value: string) => void;
|
||
|
|
setIsAddressValid: (value: boolean) => void;
|
||
|
|
bg: string;
|
||
|
|
isAddressValid: boolean;
|
||
|
|
selectedTabIndex: number;
|
||
|
|
isConnected: boolean;
|
||
|
|
appUrl: string | undefined;
|
||
|
|
isIFrameLoading: boolean;
|
||
|
|
updateAddress: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
function AddressInput({
|
||
|
|
showAddress,
|
||
|
|
setShowAddress,
|
||
|
|
setAddress,
|
||
|
|
setIsAddressValid,
|
||
|
|
bg,
|
||
|
|
isAddressValid,
|
||
|
|
selectedTabIndex,
|
||
|
|
isConnected,
|
||
|
|
appUrl,
|
||
|
|
isIFrameLoading,
|
||
|
|
updateAddress,
|
||
|
|
}: AddressInputParams) {
|
||
|
|
return (
|
||
|
|
<FormControl>
|
||
|
|
<FormLabel>Enter Address or ENS to Impersonate</FormLabel>
|
||
|
|
<InputGroup>
|
||
|
|
<Input
|
||
|
|
placeholder="vitalik.eth"
|
||
|
|
autoComplete="off"
|
||
|
|
value={showAddress}
|
||
|
|
onChange={(e) => {
|
||
|
|
const _showAddress = e.target.value;
|
||
|
|
setShowAddress(_showAddress);
|
||
|
|
setAddress(_showAddress);
|
||
|
|
setIsAddressValid(true); // remove inValid warning when user types again
|
||
|
|
}}
|
||
|
|
bg={bg}
|
||
|
|
isInvalid={!isAddressValid}
|
||
|
|
/>
|
||
|
|
{((selectedTabIndex === 0 && isConnected) ||
|
||
|
|
(selectedTabIndex === 1 && appUrl && !isIFrameLoading)) && (
|
||
|
|
<InputRightElement width="4.5rem" mr="1rem">
|
||
|
|
<Button h="1.75rem" size="sm" onClick={updateAddress}>
|
||
|
|
Update
|
||
|
|
</Button>
|
||
|
|
</InputRightElement>
|
||
|
|
)}
|
||
|
|
</InputGroup>
|
||
|
|
</FormControl>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default AddressInput;
|