refactor: ♻️ refactor isHosted && type clean up (#3290)

* refactor: ♻️ refactor isHosted && type clean up

Change-Id: I4dfbad8a07607432801de78920ce42bf81e46498

* refactor: ♻️ code clean up

Change-Id: I8f487a33d332a2acaff84397a97371b56ace28a1

* feat: 💄 lint

Change-Id: I776b1a5e249bdb542f8e6da7cb2277821cf91094

* feat: ✨ ci type

Change-Id: I486dde7bf60321238e9a394c40ad8cdb8bfc54c8

* feat: some code sugession

Change-Id: I4761d057344b95a98e99068d312a42292977875b

app/components/Popover.tsx

@@ -7,12 +7,11 @@ import useMobile from "~/hooks/useMobile";
 import { fadeAndScaleIn } from "~/styles/animations";
 
 type Props = {
-  children: React.ReactNode;
   tabIndex?: number;
   width?: number;
 };
 
-function Popover({ children, width = 380, ...rest }: Props) {
+const Popover: React.FC<Props> = ({ children, width = 380, ...rest }) => {
   const isMobile = useMobile();
 
   if (isMobile) {
@@ -28,7 +27,7 @@ function Popover({ children, width = 380, ...rest }: Props) {
       <Contents $width={width}>{children}</Contents>
     </ReakitPopover>
   );
-}
+};
 
 const Contents = styled.div<{ $width?: number }>`
   animation: ${fadeAndScaleIn} 200ms ease;