Refactor QRModal and add FundRequirement component

frontend/components/Modals/QRModal/QRModal.tsx

@@ -1,12 +1,27 @@
+import { ModalsContext } from "@/context";
 import { Modal, QRCode } from "antd";
+import { useContext } from "react";
+
+export const QRModal = ({
+  address,
+  open,
+}: {
+  address: string;
+  open: boolean;
+}) => {
+  const { setQrModalOpen, setQrModalAddress } = useContext(ModalsContext);
+
+  const handleCancel = () => {
+    setQrModalOpen(false);
+    setQrModalAddress(undefined);
+  };
 
-export const QRModal = ({ address }: { address: string }) => {
   return (
     <Modal
+      open={open}
       title="Scan QR code"
-      visible={true}
       footer={null}
-      onCancel={() => {}}
+      onCancel={handleCancel}
     >
       <QRCode value={`ethereum:${address}`} />
     </Modal>

frontend/components/Spawn/SpawnFunds/FundRequirement.tsx

@@ -0,0 +1,76 @@
+import { copyToClipboard } from "@/helpers/copyToClipboard";
+import { useEthers, useServices, useModals } from "@/hooks";
+import { message, Flex, Typography, Spin, Button } from "antd";
+import {
+  Dispatch,
+  SetStateAction,
+  useState,
+  useMemo,
+  useCallback,
+} from "react";
+import { useInterval } from "usehooks-ts";
+
+export const FundRequirement = ({
+  setReceivedFunds,
+  serviceHash,
+  address,
+  requirement,
+}: {
+  setReceivedFunds: Dispatch<SetStateAction<{ [address: string]: boolean }>>;
+  serviceHash: string;
+  address: string;
+  requirement: number;
+}) => {
+  const { getETHBalance } = useEthers();
+  const { getServiceFromState } = useServices();
+  const { setQrModalOpen, setQrModalAddress } = useModals();
+
+  const [isPollingBalance, setIsPollingBalance] = useState(true);
+
+  const rpc = useMemo(() => {
+    const service = getServiceFromState(serviceHash);
+    if (!service) return "";
+    return service.ledger?.rpc || "";
+  }, [getServiceFromState, serviceHash]);
+
+  const handleCopy = useCallback(() => {
+    copyToClipboard(address);
+    message.success("Copied to clipboard");
+  }, [address]);
+
+  const handleShowQr = useCallback(() => {
+    setQrModalAddress(address);
+    setQrModalOpen(true);
+  }, [address, setQrModalAddress, setQrModalOpen]);
+
+  useInterval(
+    () =>
+      getETHBalance(address, rpc).then((balance) => {
+        if (balance && balance >= requirement) {
+          setIsPollingBalance(false);
+          setReceivedFunds((prev: { [address: string]: boolean }) => ({
+            ...prev,
+            [address]: true,
+          }));
+        }
+      }),
+    isPollingBalance ? 3000 : null,
+  );
+
+  return (
+    <Flex gap={8} vertical key={address}>
+      <Typography.Text>
+        Send {requirement} XDAI to: {address}{" "}
+        {isPollingBalance && <Spin size="small" />}
+      </Typography.Text>
+      <Flex gap={8}>
+        <Button type="primary" onClick={handleCopy}>
+          Copy address
+        </Button>
+        <Button type="default" onClick={handleShowQr}>
+          Show QR
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};

frontend/components/Spawn/SpawnFunds/SpawnFunds.tsx

@@ -1,10 +1,9 @@
 import { Service } from "@/client";
 import { SpawnScreenState } from "@/enums";
-import { copyToClipboard } from "@/helpers/copyToClipboard";
-import { useServices, useSpawn, useEthers } from "@/hooks";
-import { Button, Flex, Spin, Timeline, Typography, message } from "antd";
-import { Dispatch, SetStateAction, useMemo, useState } from "react";
-import { useInterval } from "usehooks-ts";
+import { useSpawn } from "@/hooks";
+import { Button, Flex, Timeline, Typography } from "antd";
+import { useMemo, useState } from "react";
+import { FundRequirement } from "./FundRequirement";
 
 export const SpawnFunds = ({
   service,
@@ -70,62 +69,3 @@ export const SpawnFunds = ({
     </>
   );
 };
-
-const FundRequirement = ({
-  setReceivedFunds,
-  serviceHash,
-  address,
-  requirement,
-}: {
-  setReceivedFunds: Dispatch<SetStateAction<{ [address: string]: boolean }>>;
-  serviceHash: string;
-  address: string;
-  requirement: number;
-}) => {
-
-  const [isPollingBalance, setIsPollingBalance] = useState(true);
-  const { getETHBalance } = useEthers();
-  const { getServiceFromState } = useServices();
-
-  const rpc = useMemo(() => {
-    const service = getServiceFromState(serviceHash);
-    if (!service) return "";
-    return service.ledger?.rpc || "";
-  }, [getServiceFromState, serviceHash]);
-
-  useInterval(
-    () =>
-      getETHBalance(address, rpc).then((balance) => {
-        if (balance && balance >= requirement) {
-          setIsPollingBalance(false);
-          setReceivedFunds((prev: { [address: string]: boolean }) => ({
-            ...prev,
-            [address]: true,
-          }));
-        }
-      }),
-    isPollingBalance ? 3000 : null,
-  );
-
-  return (
-    <Flex gap={8} vertical key={address}>
-      <Typography.Text>
-        Send {requirement} XDAI to: {address} {isPollingBalance && <Spin />}
-      </Typography.Text>
-      <Flex gap={8}>
-        <Button
-          type="primary"
-          onClick={() => {
-            copyToClipboard(address);
-            message.success("Copied to clipboard");
-          }}
-        >
-          Copy address
-        </Button>
-        <Button type="default" disabled>
-          Show QR
-        </Button>
-      </Flex>
-    </Flex>
-  );
-};

frontend/context/ModalsProvider/ModalsProvider.tsx

@@ -1,3 +1,4 @@
+import dynamic from "next/dynamic";
 import {
   createContext,
   Dispatch,
@@ -6,23 +7,38 @@ import {
   useState,
 } from "react";
 
+const QRModal = dynamic(
+  () =>
+    import("../../components/Modals/QRModal/QRModal").then(
+      (mod) => mod.QRModal,
+    ),
+  { ssr: false },
+);
+
 export const ModalsContext = createContext<{
   qrModalOpen: boolean;
   setQrModalOpen: Dispatch<SetStateAction<boolean>>;
+  setQrModalAddress: Dispatch<SetStateAction<string | undefined>>;
 }>({
   qrModalOpen: false,
   setQrModalOpen: () => {},
+  setQrModalAddress: () => {},
 });
 
 export const ModalsProvider = ({ children }: PropsWithChildren) => {
   const [qrModalOpen, setQrModalOpen] = useState(false);
+  const [qrModalAddress, setQrModalAddress] = useState<string | undefined>();
   return (
     <ModalsContext.Provider
       value={{
         qrModalOpen,
         setQrModalOpen,
+        setQrModalAddress,
       }}
     >
+      {qrModalAddress && (
+        <QRModal address={qrModalAddress} open={qrModalOpen} />
+      )}
       {children}
     </ModalsContext.Provider>
   );