Refactor ConnectIframe component to improve URL connection handling a…

…nd error management; add onError prop to ImpersonatorIframe and integrate dapp selection functionality in SupportDapps component.

src/app/_components/connect-iframe.tsx

@@ -11,6 +11,7 @@ import useGenerateAction from '@/hooks/useGenerateAction';
 import { useImpersonatorIframe } from '@/contexts/ImpersonatorIframeContext';
 import { useLocalStorageState } from '@/hooks/useLocalStorageState';
 import { SupportDapps } from '@/components/support-dapps';
+import { SafeDappInfo } from '@/types/communicator';
 
 export const ConnectIframe = ({
   timeLockContractAddress,
@@ -37,28 +38,47 @@ export const ConnectIframe = ({
   // const rpc = 'https://eth.llamarpc.com';
   const { latestTransaction, iframeRef } = useImpersonatorIframe();
 
-  const handleConnect = useCallback(() => {
-    if (!iframeConnectUri || !isValidUrl(iframeConnectUri)) {
-      toast.error('Invalid URL');
-      return;
-    }
+  const connectToUrl = useCallback(
+    (url: string) => {
+      if (!url || !isValidUrl(url)) {
+        toast.error('Invalid URL');
+        return false;
+      }
 
-    if (!targetAccount) {
-      toast.error('Address is not an ENS or Ethereum address');
-      return;
-    }
+      if (!targetAccount) {
+        toast.error('Address is not an ENS or Ethereum address');
+        return false;
+      }
 
-    if (!rpc) {
-      toast.error('RPC is not available');
-      return;
-    }
+      if (!rpc) {
+        toast.error('RPC is not available');
+        return false;
+      }
 
-    setUri('');
-    setTimeout(() => {
-      setUri(iframeConnectUri);
-    }, 100);
-    setIsIframeLoading(true);
-  }, [iframeConnectUri, targetAccount, setIsIframeLoading, rpc]);
+      setUri('');
+      setTimeout(() => {
+        setUri(url);
+      }, 100);
+      setIsIframeLoading(true);
+      return true;
+    },
+    [targetAccount, rpc, setUri, setIsIframeLoading]
+  );
+
+  const handleConnect = useCallback(() => {
+    connectToUrl(iframeConnectUri);
+  }, [iframeConnectUri, connectToUrl]);
+
+  const handleSelectDapp = useCallback(
+    (dapp: SafeDappInfo) => {
+      const url = dapp.url;
+      setIframeConnectUri(url);
+      if (connectToUrl(url)) {
+        setIsSupportDappsOpen(false);
+      }
+    },
+    [setIframeConnectUri, connectToUrl, setIsSupportDappsOpen]
+  );
 
   const handleIframeLoad = useCallback(() => {
     setIsIframeLoading(false);
@@ -72,6 +92,11 @@ export const ConnectIframe = ({
     }
   }, [setIsIframeLoading, iframeRef]);
 
+  const handleIframeError = useCallback(() => {
+    toast.error('Failed to load iframe');
+    setIsIframeLoading(false);
+  }, [setIsIframeLoading]);
+
   const { generateAction, sourcePort, actionState, reset, isLoading } = useGenerateAction({
     timeLockContractAddress: timeLockContractAddress as `0x${string}`,
     moduleAddress: moduleAddress as `0x${string}`,
@@ -158,6 +183,7 @@ export const ConnectIframe = ({
               height={'510px'}
               src={uri}
               onLoad={handleIframeLoad}
+              onError={handleIframeError}
               address={targetAccount}
               rpcUrl={rpc}
             />
@@ -187,6 +213,7 @@ export const ConnectIframe = ({
         networkId={Number(targetChainId)}
         open={isSupportDappsOpen}
         onOpenChange={setIsSupportDappsOpen}
+        onSelect={handleSelectDapp}
       />
     </div>
   );

src/components/ImpersonatorIframe.tsx

@@ -11,6 +11,7 @@ interface Props {
   address: string;
   rpcUrl: string;
   onLoad?: () => void;
+  onError?: () => void;
 }
 
 export const ImpersonatorIframe = ({
@@ -20,6 +21,7 @@ export const ImpersonatorIframe = ({
   address,
   rpcUrl,
   onLoad,
+  onError,
   targetChainId
 }: Props) => {
   const { iframeRef, setAddress, setAppUrl, setRpcUrl, setTargetChainId, isReady } =
@@ -42,6 +44,7 @@ export const ImpersonatorIframe = ({
       id={`iframe-${src}`}
       className="rounded-[10px] border border-[#666] bg-[#141414]"
       onLoad={onLoad}
+      onError={onError}
       src={src}
       sandbox={IFRAME_SANDBOX_ALLOWED_FEATURES}
     />

src/components/support-dapps.tsx

@@ -8,11 +8,15 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 interface DappCardProps {
   dapp: SafeDappInfo;
+  onSelect: (dapp: SafeDappInfo) => void;
 }
 
-const DappCard = ({ dapp }: DappCardProps) => {
+const DappCard = ({ dapp, onSelect }: DappCardProps) => {
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center space-y-2 rounded-lg p-4 transition-all duration-200 hover:scale-105 hover:opacity-80">
+    <div
+      className="flex h-full w-full cursor-pointer flex-col items-center justify-center space-y-2 rounded-lg p-4 transition-all duration-200 hover:scale-105 hover:opacity-80"
+      onClick={() => onSelect(dapp)}
+    >
       <Image
         src={dapp.iconUrl}
         alt={`${dapp.name} logo`}
@@ -37,11 +41,13 @@ const DappCardSkeleton = () => {
 export function SupportDapps({
   networkId,
   open,
-  onOpenChange
+  onOpenChange,
+  onSelect
 }: {
   networkId: number;
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  onSelect: (dapp: SafeDappInfo) => void;
 }) {
   const [searchQuery, setSearchQuery] = useState('');
   const [safeDapps, setSafeDapps] = useState<Record<number, SafeDappInfo[]>>({});
@@ -104,7 +110,9 @@ export function SupportDapps({
                   .fill(0)
                   .map((_, i) => <DappCardSkeleton key={i} />)
               ) : filteredDapps.length > 0 ? (
-                filteredDapps.map((dapp) => <DappCard key={dapp.id} dapp={dapp} />)
+                filteredDapps.map((dapp) => (
+                  <DappCard key={dapp.id} dapp={dapp} onSelect={onSelect} />
+                ))
               ) : (
                 <div className="col-span-full mt-8 text-center text-gray-500">No dapps found</div>
               )}

src/contexts/ImpersonatorIframeContext.tsx

@@ -142,11 +142,11 @@ export const ImpersonatorIframeProvider: React.FunctionComponent<FCProps> = ({ c
     communicator?.on(Methods.getSafeInfo, async () => {
       return {
         safeAddress: address,
-        chainId: targetChainId,
+        chainId: Number(targetChainId),
         owners: [],
         threshold: 1,
         isReadOnly: false,
-        network: targetChainId
+        network: Number(targetChainId)
       };
     });