Set iframe visiblity conditionally

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

@@ -38,14 +38,16 @@ type ConfigureFormValues = ConfigureDeploymentFormValues &
 const DEFAULT_MAX_PRICE = '10000';
 
 const Configure = () => {
-  const { signClient, session, accounts } = useWalletConnectClient();
+  const { signClient, session } = useWalletConnectClient();
 
   const [isLoading, setIsLoading] = useState(false);
   const [deployers, setDeployers] = useState<Deployer[]>([]);
   const [selectedAccount, setSelectedAccount] = useState<string>();
+  const [accounts, setAccounts] = useState<string[]>([]);
   const [selectedDeployer, setSelectedDeployer] = useState<Deployer>();
   const [isPaymentLoading, setIsPaymentLoading] = useState(false);
   const [isPaymentDone, setIsPaymentDone] = useState(false);
+  const [isFrameVisible, setIsFrameVisible] = useState(false);
 
   const [searchParams] = useSearchParams();
   const templateId = searchParams.get('templateId');
@@ -175,6 +177,7 @@ const Configure = () => {
   const handleFormSubmit = useCallback(
     async (createFormData: FieldValues) => {
       try {
+        setIsFrameVisible(true);
         const deployerLrn = createFormData.lrn;
         const deployer = deployers.find(
           (deployer) => deployer.deployerLrn === deployerLrn,
@@ -534,7 +537,7 @@ const Configure = () => {
               </div>
             ) : (
               <>
-                <IFrame onAccountChange={onAccountChange} />
+                <IFrame accounts={accounts} setAccounts={setAccounts} onAccountChange={onAccountChange} isVisible={isFrameVisible} />
                 {accounts.length > 0 && (
                   <div>
                     <Button

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

@@ -1,14 +1,18 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { Select, Option } from '@snowballtools/material-tailwind-react-fork';
 import { VITE_LACONICD_CHAIN_ID } from 'utils/constants';
 
 const IFrame = ({
+  accounts,
+  setAccounts,
   onAccountChange,
+  isVisible,
 }: {
+  accounts: string[];
+  setAccounts: (accounts: string[]) => void
   onAccountChange: (selectedAccount: string) => void;
+  isVisible: boolean;
 }) => {
-  const [accounts, setAccounts] = useState<string[]>([]);
-
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
       if (event.origin !== 'http://localhost:3001') return;
@@ -22,11 +26,6 @@ const IFrame = ({
 
     window.addEventListener('message', handleMessage);
 
-    const iframe = document.getElementById('walletIframe');
-    if (iframe) {
-      iframe.onload = getDataFromWallet;
-    }
-
     return () => {
       window.removeEventListener('message', handleMessage);
     };
@@ -84,11 +83,12 @@ const IFrame = ({
         onLoad={getDataFromWallet}
         id="walletIframe"
         src="http://localhost:3001"
-        width="510"
-        height="300"
+        width={isVisible ? "510": 0}
+        height={isVisible ? "300": 0}
         sandbox="allow-scripts allow-same-origin"
-        className="border rounded-md shadow-sm mt-4"
-        title="Wallet Integration"
+        className={`border rounded-md shadow-sm transition-opacity duration-300 ${
+          isVisible ? 'opacity-100 visible mt-4 ' : 'opacity-0 invisible'
+        }`}
       ></iframe>
     </div>
   );