[Gateway] - FE Fixes for non-MM users (#1690)

* feat:
- proper error handling for non-MM users
- prompt user to install MM

* fix: serve files in dist directory in `.next` for dev

* add comment for config

tools/walletextension/frontend/next.config.js

@@ -1,8 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  output: 'export',
-  distDir: '../api/static'
-}
+  output: "export",
+  // distDir is where the static files are generated
+  // on dev mode, it is generated in .next folder in the root directory
+  // comment this during dev mode
+  distDir: "../api/static",
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

tools/walletextension/frontend/src/api/ethRequests.ts

@@ -39,7 +39,7 @@ const typedData = {
 
 export const switchToTenNetwork = async () => {
   if (!ethereum) {
-    throw new Error("No ethereum object found");
+    throw "No ethereum object found";
   }
   try {
     await ethereum.request({
@@ -55,7 +55,7 @@ export const switchToTenNetwork = async () => {
 
 export const connectAccounts = async () => {
   if (!ethereum) {
-    throw new Error("No ethereum object found");
+    throw "No ethereum object found";
   }
   try {
     return await ethereum.request({
@@ -69,7 +69,7 @@ export const connectAccounts = async () => {
 
 export const getSignature = async (account: string, data: any) => {
   if (!ethereum) {
-    throw new Error("No ethereum object found");
+    throw "No ethereum object found";
   }
   try {
     return await ethereum.request({
@@ -78,7 +78,7 @@ export const getSignature = async (account: string, data: any) => {
     });
   } catch (error) {
     console.error(error);
-    throw new Error("Failed to get signature");
+    throw "Failed to get signature";
   }
 };
 
@@ -110,7 +110,7 @@ export const getToken = async (provider: ethers.providers.Web3Provider) => {
 
 export async function addNetworkToMetaMask(rpcUrls: string[]) {
   if (!ethereum) {
-    throw new Error("No ethereum object found");
+    throw "No ethereum object found";
   }
   try {
     await ethereum.request({

tools/walletextension/frontend/src/components/modules/common/connect-wallet.tsx

@@ -3,6 +3,7 @@ import { Button } from "../../ui/button";
 import useGatewayService from "../../../services/useGatewayService";
 import { Link2Icon, LinkBreak2Icon } from "@radix-ui/react-icons";
 import React from "react";
+import { downloadMetaMask, ethereum } from "@/lib/utils";
 const ConnectWalletButton = () => {
   const { walletConnected, revokeAccounts } = useWalletConnection();
   const { connectToTenTestnet } = useGatewayService();
@@ -11,7 +12,14 @@ const ConnectWalletButton = () => {
     <Button
       className="text-sm font-medium leading-none"
       variant={"outline"}
-      onClick={walletConnected ? revokeAccounts : connectToTenTestnet}
+      onClick={
+        ethereum
+          ? walletConnected
+            ? revokeAccounts
+            : connectToTenTestnet
+          : downloadMetaMask
+      }
+      suppressHydrationWarning
     >
       {walletConnected ? (
         <>
@@ -21,7 +29,7 @@ const ConnectWalletButton = () => {
       ) : (
         <>
           <Link2Icon className="h-4 w-4 mr-1" />
-          Connect
+          {ethereum ? "Connect" : "Install"}
         </>
       )}
     </Button>

tools/walletextension/frontend/src/components/modules/home/disconnected.tsx

@@ -16,6 +16,7 @@ import {
 } from "../../ui/dialog";
 import Copy from "../common/copy";
 import { testnetUrls, tenChainIDDecimal } from "../../../lib/constants";
+import { downloadMetaMask, ethereum } from "@/lib/utils";
 
 const CONNECTION_STEPS = [
   "Hit Connect to Ten and start your journey",
@@ -25,6 +26,7 @@ const CONNECTION_STEPS = [
 
 const Disconnected = () => {
   const { connectToTenTestnet } = useGatewayService();
+
   return (
     <div className="flex flex-col items-center justify-center space-y-4">
       <h1 className="text-4xl font-bold">Welcome to the Ten Gateway!</h1>
@@ -102,9 +104,14 @@ const Disconnected = () => {
         </DialogContent>
       </Dialog>
 
-      <Button className="mt-4" onClick={connectToTenTestnet}>
+      <Button
+        className="mt-4"
+        onClick={ethereum ? connectToTenTestnet : downloadMetaMask}
+      >
         <Terminal />
-        <span className="ml-2">Connect to Ten Testnet</span>
+        <span className="ml-2">
+          {ethereum ? "Connect to Ten Testnet" : "Install MetaMask to continue"}
+        </span>
       </Button>
     </div>
   );

tools/walletextension/frontend/src/lib/utils.ts

@@ -40,6 +40,9 @@ export function getNetworkName() {
 }
 
 export async function isTenChain() {
+  if (!ethereum) {
+    return false;
+  }
   let currentChain = await ethereum.request({
     method: "eth_chainId",
   });
@@ -48,3 +51,7 @@ export async function isTenChain() {
 
 export const { ethereum } =
   typeof window !== "undefined" ? window : ({} as any);
+
+export const downloadMetaMask = () => {
+  window ? window.open("https://metamask.io/download", "_blank") : null;
+};

tools/walletextension/frontend/src/services/ethService.ts

@@ -50,7 +50,7 @@ const ethService = {
       if (ethereum && ethereum.isMetaMask) {
         return;
       } else {
-        showToast(
+        return showToast(
           ToastType.WARNING,
           "Please install MetaMask to use Ten Gateway."
         );
@@ -96,6 +96,7 @@ const ethService = {
       })
     );
     updatedAccounts = await Promise.all(authenticationPromise);
+    showToast(ToastType.SUCCESS, "Account authentication status updated!");
     return updatedAccounts;
   },
 

tools/walletextension/frontend/src/services/useGatewayService.ts

@@ -58,7 +58,7 @@ const useGatewayService = () => {
 
       await fetchUserAccounts();
     } catch (error: any) {
-      showToast(ToastType.DESTRUCTIVE, `${error.message}`);
+      showToast(ToastType.DESTRUCTIVE, `${error}`);
       throw error;
     } finally {
       setLoading(false);