feat: move to nextjs

components/Body/IFrameConnectTab/index.tsx

@@ -0,0 +1,140 @@
+import {
+  Button,
+  Box,
+  Center,
+  Spacer,
+  HStack,
+  FormControl,
+  Input,
+  Text,
+  useDisclosure,
+  InputGroup,
+  InputRightElement,
+} from "@chakra-ui/react";
+import { DeleteIcon } from "@chakra-ui/icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faShareAlt } from "@fortawesome/free-solid-svg-icons";
+import SupportedDapps from "./SupportedDapps";
+import AppUrlLabel from "./AppUrlLabel";
+import ShareModal from "./ShareModal";
+
+interface IFrameConnectTabParams {
+  networkId: number;
+  initIFrame: (_inputAppUrl?: string | undefined) => Promise<void>;
+  inputAppUrl: string | undefined;
+  setInputAppUrl: (value: string | undefined) => void;
+  appUrl: string | undefined;
+  isIFrameLoading: boolean;
+  setIsIFrameLoading: (value: boolean) => void;
+  iframeKey: number;
+  iframeRef: React.RefObject<HTMLIFrameElement> | null;
+  showAddress: string;
+}
+
+function IFrameConnectTab({
+  networkId,
+  initIFrame,
+  setInputAppUrl,
+  inputAppUrl,
+  isIFrameLoading,
+  appUrl,
+  iframeKey,
+  iframeRef,
+  setIsIFrameLoading,
+  showAddress,
+}: IFrameConnectTabParams) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <FormControl my={4}>
+        <HStack>
+          <AppUrlLabel />
+          <Spacer />
+          <SupportedDapps
+            networkId={networkId}
+            initIFrame={initIFrame}
+            setInputAppUrl={setInputAppUrl}
+          />
+        </HStack>
+        <HStack mt="2">
+          <InputGroup>
+            <Input
+              pr="3.5rem"
+              bg={"brand.lightBlack"}
+              placeholder="https://app.uniswap.org/"
+              aria-label="dapp-url"
+              autoComplete="off"
+              value={inputAppUrl}
+              onChange={(e) => setInputAppUrl(e.target.value)}
+            />
+            {inputAppUrl && (
+              <InputRightElement px="1rem" mr="0.5rem">
+                <Button
+                  h="1.75rem"
+                  size="sm"
+                  onClick={() => {
+                    setInputAppUrl("");
+                  }}
+                >
+                  <DeleteIcon />
+                </Button>
+              </InputRightElement>
+            )}
+          </InputGroup>
+          {appUrl && (
+            <>
+              <Button onClick={onOpen}>
+                <HStack>
+                  <FontAwesomeIcon icon={faShareAlt} />
+                  <Text>Share</Text>
+                </HStack>
+              </Button>
+              <ShareModal
+                isOpen={isOpen}
+                onClose={onClose}
+                appUrl={appUrl}
+                showAddress={showAddress}
+              />
+            </>
+          )}
+        </HStack>
+      </FormControl>
+      <Center>
+        <Button onClick={() => initIFrame()} isLoading={isIFrameLoading}>
+          Connect
+        </Button>
+      </Center>
+      <Center
+        mt="1rem"
+        ml={{ base: "-385", sm: "-315", md: "-240", lg: "-60" }}
+        px={{ base: "10rem", lg: 0 }}
+        w="70rem"
+      >
+        {appUrl && (
+          <Box
+            as="iframe"
+            w={{
+              base: "22rem",
+              sm: "45rem",
+              md: "55rem",
+              lg: "1500rem",
+            }}
+            h={{ base: "33rem", md: "35rem", lg: "38rem" }}
+            title="app"
+            src={appUrl}
+            key={iframeKey}
+            borderWidth="1px"
+            borderStyle={"solid"}
+            borderColor="white"
+            bg="white"
+            ref={iframeRef}
+            onLoad={() => setIsIFrameLoading(false)}
+          />
+        )}
+      </Center>
+    </>
+  );
+}
+
+export default IFrameConnectTab;