refactor: separate into components

src/components/Body/AddressInput.tsx

@@ -0,0 +1,67 @@
+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;