fix: error page for non-MM users (#1696)

ten-protocol · Dec 12, 2023 · 7c2a4df · 7c2a4df
1 parent 457777e
commit 7c2a4df
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 11 deletions.
diff --git a/tools/obscuroscan_v3/frontend/pages/personal/index.tsx b/tools/obscuroscan_v3/frontend/pages/personal/index.tsx
@@ -5,6 +5,7 @@ import PersonalTransactions from "@/src/components/modules/personal";
 import { useWalletConnection } from "@/src/components/providers/wallet-provider";
 import ConnectWalletButton from "@/src/components/modules/common/connect-wallet";
 import EmptyState from "@/src/components/modules/common/empty-state";
+import { ethereum } from "@/src/lib/utils";
 
 export const metadata: Metadata = {
   title: "Personal Transactions",
@@ -20,9 +21,17 @@ export default function PersonalPage() {
         <PersonalTransactions />
       ) : (
         <EmptyState
-          title="Connect your wallet"
+          title="Connect Wallet"
           description="Connect your wallet to view your personal transactions."
-          action={<ConnectWalletButton />}
+          action={
+            <ConnectWalletButton
+              text={
+                ethereum
+                  ? "Connect Wallet to continue"
+                  : "Install MetaMask to continue"
+              }
+            />
+          }
         />
       )}
     </Layout>

diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/connect-wallet.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/connect-wallet.tsx
@@ -3,15 +3,23 @@ import { Button } from "@/src/components/ui/button";
 import { Link2Icon, LinkBreak2Icon } from "@radix-ui/react-icons";
 import React from "react";
 import TruncatedAddress from "./truncated-address";
-const ConnectWalletButton = () => {
+import { downloadMetaMask, ethereum } from "@/src/lib/utils";
+const ConnectWalletButton = ({ text }: { text?: string }) => {
   const { walletConnected, walletAddress, connectWallet, disconnectWallet } =
     useWalletConnection();
 
   return (
     <Button
       className="text-sm font-medium leading-none"
       variant={"outline"}
-      onClick={walletConnected ? disconnectWallet : connectWallet}
+      onClick={
+        ethereum
+          ? walletConnected
+            ? disconnectWallet
+            : connectWallet
+          : downloadMetaMask
+      }
+      suppressHydrationWarning
     >
       {walletConnected ? (
         <>
@@ -25,8 +33,7 @@ const ConnectWalletButton = () => {
       ) : (
         <>
           <Link2Icon className="h-4 w-4 mr-1" />
-          Connect
-          <span className="hidden sm:inline">&nbsp;Wallet</span>
+          {ethereum ? "Connect Wallet" : text || "Install MetaMask"}
         </>
       )}
     </Button>

diff --git a/tools/obscuroscan_v3/frontend/src/components/providers/wallet-provider.tsx b/tools/obscuroscan_v3/frontend/src/components/providers/wallet-provider.tsx
@@ -6,6 +6,7 @@ import {
 } from "@/src/types/interfaces/WalletInterfaces";
 import { showToast } from "../ui/use-toast";
 import { ToastType } from "@/src/types/interfaces";
+import { ethereum } from "@/src/lib/utils";
 
 const WalletConnectionContext =
   createContext<WalletConnectionContextType | null>(null);
@@ -29,10 +30,8 @@ export const WalletConnectionProvider = ({
     useState<ethers.providers.Web3Provider | null>(null);
 
   const connectWallet = async () => {
-    if ((window as any).ethereum) {
-      const ethProvider = new ethers.providers.Web3Provider(
-        (window as any).ethereum
-      );
+    if (ethereum) {
+      const ethProvider = new ethers.providers.Web3Provider(ethereum);
       setProvider(ethProvider);
 
       try {
@@ -65,16 +64,21 @@ export const WalletConnectionProvider = ({
   };
 
   useEffect(() => {
-    const ethereum = (window as any).ethereum;
+    if (!ethereum) {
+      return;
+    }
+
     const handleAccountsChanged = (accounts: string[]) => {
       if (accounts.length === 0) {
         showToast(ToastType.DESTRUCTIVE, "Please connect to MetaMask.");
       } else if (accounts[0] !== walletAddress) {
         setWalletAddress(accounts[0]);
       }
     };
+
     ethereum.on("accountsChanged", handleAccountsChanged);
     return () => {
+      if (!ethereum) return;
       ethereum.removeListener("accountsChanged", handleAccountsChanged);
     };
   });

diff --git a/tools/obscuroscan_v3/frontend/src/lib/utils.ts b/tools/obscuroscan_v3/frontend/src/lib/utils.ts
@@ -10,3 +10,10 @@ export function formatTimeAgo(unixTimestampSeconds: string) {
   const date = new Date(Number(unixTimestampSeconds) * 1000);
   return formatDistanceToNow(date, { addSuffix: true });
 }
+
+export const { ethereum } =
+  typeof window !== "undefined" ? window : ({} as any);
+
+export const downloadMetaMask = () => {
+  window ? window.open("https://metamask.io/download", "_blank") : null;
+};