feat: move to nextjs

components/Body/IFrameConnectTab/SupportedDapps/DappTile.tsx

@@ -0,0 +1,45 @@
+import { GridItem, Center, Image, Text } from "@chakra-ui/react";
+import { SafeDappInfo } from "../../../../types";
+
+interface DappTileParams {
+  initIFrame: (_inputAppUrl?: string | undefined) => Promise<void>;
+  setInputAppUrl: (value: string | undefined) => void;
+  closeSafeApps: () => void;
+  dapp: SafeDappInfo;
+}
+
+function DappTile({
+  initIFrame,
+  setInputAppUrl,
+  closeSafeApps,
+  dapp,
+}: DappTileParams) {
+  return (
+    <GridItem
+      border="2px solid"
+      borderColor={"gray.500"}
+      bg={"white"}
+      color={"black"}
+      _hover={{
+        cursor: "pointer",
+        bgColor: "gray.600",
+        color: "white",
+      }}
+      rounded="lg"
+      onClick={() => {
+        initIFrame(dapp.url);
+        setInputAppUrl(dapp.url);
+        closeSafeApps();
+      }}
+    >
+      <Center flexDir={"column"} h="100%" p="1rem">
+        <Image bg="white" w="2rem" src={dapp.iconUrl} borderRadius="full" />
+        <Text mt="0.5rem" textAlign={"center"}>
+          {dapp.name}
+        </Text>
+      </Center>
+    </GridItem>
+  );
+}
+
+export default DappTile;