From 97e0ec7842aa01ca52542d4dcfd09943ffa71e03 Mon Sep 17 00:00:00 2001
From: "calvo.generico" <miguelfeliped@gmail.com>
Date: Mon, 23 Dec 2024 14:30:41 -0300
Subject: [PATCH] checking if wallet and rpc are connected to same address

---
 web/components/HiddenContent.tsx   | 12 ++++++++----
 web/hooks/use-connection-status.ts | 30 ++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 web/hooks/use-connection-status.ts

diff --git a/web/components/HiddenContent.tsx b/web/components/HiddenContent.tsx
index 1ceecd3..4e29f62 100644
--- a/web/components/HiddenContent.tsx
+++ b/web/components/HiddenContent.tsx
@@ -1,21 +1,25 @@
 import { LockIcon } from "lucide-react";
-import { useAccount } from "wagmi";
+import { useConnectionStatus } from "~~/hooks/use-connection-status";
 import { cn } from "~~/utils/cn";
 
 export default function HiddenContent({ children, className }: { children: React.ReactNode; className?: string }) {
-  const { isConnected } = useAccount();
+  const { isConnected, walletAndRpcMatch } = useConnectionStatus();
 
-  if (isConnected) {
+  if (isConnected && walletAndRpcMatch) {
     return children;
   }
 
+  const message = !isConnected
+    ? "Connect your wallet to start"
+    : "Please ensure that your rpc is the right one for your address";
+
   return (
     <div className="relative">
       <div className="opacity-50">{children}</div>
       <div className={cn("absolute -inset-4 flex items-center justify-center backdrop-blur-sm z-10", className)}>
         <div className="rounded-lg bg-black px-6 py-4 text-lg font-medium text-neutral-50 shadow-lg flex items-center gap-x-2">
           <LockIcon className="w-5 h-5" />
-          Connect your wallet to start
+          {message}
         </div>
       </div>
     </div>
diff --git a/web/hooks/use-connection-status.ts b/web/hooks/use-connection-status.ts
new file mode 100644
index 0000000..403c1bb
--- /dev/null
+++ b/web/hooks/use-connection-status.ts
@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+import { useAccount, useReadContract } from "wagmi";
+import { DAI_TOKEN, ERC20_ABI } from "~~/contracts/tokens";
+
+export function useConnectionStatus() {
+  const coso = useAccount();
+  const { isConnected, address: walletAddress } = coso;
+
+  const { isSuccess, refetch } = useReadContract({
+    address: DAI_TOKEN.address,
+    abi: ERC20_ABI,
+    functionName: "balanceOf",
+    args: [walletAddress ?? ""],
+    query: {
+      retry: false,
+    },
+  });
+
+  useEffect(() => {
+    const interval = setInterval(() => void refetch().catch(() => null), 3000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [refetch]);
+
+  return {
+    isConnected,
+    walletAndRpcMatch: isSuccess,
+  };
+}