diff --git a/tools/obscuroscan_v3/frontend/pages/personal/index.tsx b/tools/obscuroscan_v3/frontend/pages/personal/index.tsx index ba87befdfd..4662608164 100644 --- 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() { ) : ( } + action={ + + } /> )} 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 index ce29123e27..e33e0d7c6c 100644 --- 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,7 +3,8 @@ 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(); @@ -11,7 +12,14 @@ const ConnectWalletButton = () => { diff --git a/tools/obscuroscan_v3/frontend/src/components/providers/wallet-provider.tsx b/tools/obscuroscan_v3/frontend/src/components/providers/wallet-provider.tsx index f7772769b9..e9f89eb051 100644 --- 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(null); @@ -29,10 +30,8 @@ export const WalletConnectionProvider = ({ useState(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,7 +64,10 @@ 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."); @@ -73,8 +75,10 @@ export const WalletConnectionProvider = ({ 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 index 628a129218..563e2f9b52 100644 --- 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; +};