feat: move to nextjs

components/Body/IFrameConnectTab/ShareModal.tsx

@@ -0,0 +1,59 @@
+import {
+  HStack,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Input,
+} from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faShareAlt } from "@fortawesome/free-solid-svg-icons";
+import CopyToClipboard from "../CopyToClipboard";
+
+interface ShareModalParams {
+  isOpen: boolean;
+  onClose: () => void;
+  appUrl: string;
+  showAddress: string;
+}
+
+function ShareModal({
+  isOpen,
+  onClose,
+  appUrl,
+  showAddress,
+}: ShareModalParams) {
+  const urlToShare = `https://impersonator.xyz/?address=${showAddress}&url=${encodeURI(
+    appUrl
+  )}`;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay bg="none" backdropFilter="auto" backdropBlur="5px" />
+      <ModalContent>
+        <ModalHeader>
+          <HStack>
+            <FontAwesomeIcon icon={faShareAlt} />
+            <Text>Share</Text>
+          </HStack>
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Text>
+            Share this link so that anyone can auto-connect to this dapp with
+            your provided address!
+          </Text>
+          <HStack my="3">
+            <Input value={urlToShare} isReadOnly />
+            <CopyToClipboard txt={urlToShare} />
+          </HStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export default ShareModal;