Merge pull request #7 from Moonsong-Labs/feat/check-if-right-rpc-for-…

…address

checking if wallet and rpc are connected to same address

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>

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,
+  };
+}