Display IFrame in modal

packages/frontend/src/components/projects/create/Configure.tsx

@@ -286,6 +286,10 @@ const Configure = () => {
     [client, createProject, dismiss, toast],
   );
 
+  const toggleModal = () => {
+    setIsFrameVisible((prev) => !prev);
+  };
+
   const fetchDeployers = useCallback(async () => {
     const res = await client.getDeployers();
     setDeployers(res.deployers);
@@ -537,7 +541,13 @@ const Configure = () => {
               </div>
             ) : (
               <>
-                <IFrame accounts={accounts} setAccounts={setAccounts} onAccountChange={onAccountChange} isVisible={isFrameVisible} />
+                <IFrame
+                  accounts={accounts}
+                  setAccounts={setAccounts}
+                  onAccountChange={onAccountChange}
+                  isVisible={isFrameVisible}
+                  toggleModal={toggleModal}
+                />
                 {accounts.length > 0 && (
                   <div>
                     <Button

packages/frontend/src/components/projects/create/IFrame.tsx

@@ -1,5 +1,8 @@
 import { useCallback, useEffect } from 'react';
+
 import { Select, Option } from '@snowballtools/material-tailwind-react-fork';
+import { Box, Modal } from '@mui/material';
+
 import { VITE_LACONICD_CHAIN_ID } from 'utils/constants';
 
 const IFrame = ({
@@ -7,11 +10,13 @@ const IFrame = ({
   setAccounts,
   onAccountChange,
   isVisible,
+  toggleModal,
 }: {
   accounts: string[];
-  setAccounts: (accounts: string[]) => void
+  setAccounts: (accounts: string[]) => void;
   onAccountChange: (selectedAccount: string) => void;
   isVisible: boolean;
+  toggleModal: () => void;
 }) => {
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
@@ -40,10 +45,13 @@ const IFrame = ({
       return;
     }
 
-    iframe.contentWindow.postMessage({
+    iframe.contentWindow.postMessage(
+      {
         type: 'REQUEST_WALLET_ACCOUNTS',
         chainId: VITE_LACONICD_CHAIN_ID,
-    }, 'http://localhost:3001');
+      },
+      'http://localhost:3001'
+    );
   }, []);
 
   return (
@@ -80,16 +88,37 @@ const IFrame = ({
           </Select>
         </div>
       )}
+      <Modal open={isVisible} onClose={toggleModal}>
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: '800px',
+            boxShadow: 24,
+            borderRadius: '8px',
+            outline: 'none',
+          }}
+        >
+          <iframe
+            onLoad={getDataFromWallet}
+            id="walletIframe"
+            src="http://localhost:3001/WalletEmbed"
+            width="100%"
+            height="300"
+            sandbox="allow-scripts allow-same-origin"
+            className="border rounded-md shadow-sm"
+          ></iframe>
+        </Box>
+      </Modal>
       <iframe
         onLoad={getDataFromWallet}
         id="walletIframe"
         src="http://localhost:3001"
-        width={isVisible ? "510": 0}
-        height={isVisible ? "300": 0}
+        width="0"
+        height="0"
         sandbox="allow-scripts allow-same-origin"
-        className={`border rounded-md shadow-sm transition-opacity duration-300 ${
-          isVisible ? 'opacity-100 visible mt-4 ' : 'opacity-0 invisible'
-        }`}
       ></iframe>
     </div>
   );