Implement automatic Safe login via custom hook

.gitignore

@@ -35,4 +35,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-/.vscode
+/.vscode
+certificates

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev --turbo --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

src/components/header.tsx

@@ -2,8 +2,10 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 import ConnectButton from '@/components/connect-button';
+import { useAppAutoConnect } from '@/hooks/useAppAutoConnect';
 
 const Header = () => {
+  useAppAutoConnect();
   return (
     <header className="h-12 w-full md:h-[3.5rem]">
       <div className="mx-auto flex h-full w-full items-center justify-between px-8">

src/hooks/useAppAutoConnect.ts

@@ -0,0 +1,34 @@
+import { useConnect, useReconnect } from 'wagmi';
+import { useEffect } from 'react';
+import { Connector } from 'wagmi';
+
+interface AppConnector extends Connector {
+  rkDetails?: {
+    installed: boolean;
+    isRainbowKitConnector: boolean;
+  };
+}
+
+function useAppAutoConnect() {
+  const { connect, connectors } = useConnect();
+  const { reconnect } = useReconnect();
+
+  useEffect(() => {
+    if (window.self !== window.top) {
+      const appConnector = connectors.find(
+        (connector: AppConnector) =>
+          connector.id === 'safe' &&
+          connector.rkDetails?.installed &&
+          connector.rkDetails?.isRainbowKitConnector
+      ) as AppConnector;
+
+      if (appConnector) {
+        connect({ connector: appConnector });
+        return;
+      }
+    }
+    reconnect();
+  }, [connect, connectors, reconnect]);
+}
+
+export { useAppAutoConnect };

src/providers/web3-app-provider.tsx

@@ -46,7 +46,7 @@ const queryClient = new QueryClient();
 
 export function Web3AppProvider({ children }: React.PropsWithChildren<{}>) {
   return (
-    <WagmiProvider config={config}>
+    <WagmiProvider config={config} reconnectOnMount={false}>
       <QueryClientProvider client={queryClient}>
         <RainbowKitProvider>{children}</RainbowKitProvider>
       </QueryClientProvider>