From b2651ab3e5186691ac45c125262475080bd0f4a0 Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Mon, 11 Dec 2023 20:19:25 +0400 Subject: [PATCH] [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/api/static/favicon.ico | Bin 996 -> 0 bytes tools/walletextension/frontend/next.config.js | 11 +++++++---- .../frontend/src/api/ethRequests.ts | 10 +++++----- .../components/modules/common/connect-wallet.tsx | 12 ++++++++++-- .../src/components/modules/home/disconnected.tsx | 11 +++++++++-- tools/walletextension/frontend/src/lib/utils.ts | 7 +++++++ .../frontend/src/services/ethService.ts | 3 ++- .../frontend/src/services/useGatewayService.ts | 2 +- 8 files changed, 41 insertions(+), 15 deletions(-) delete mode 100644 tools/walletextension/api/static/favicon.ico diff --git a/tools/walletextension/api/static/favicon.ico b/tools/walletextension/api/static/favicon.ico deleted file mode 100644 index 1bb8f324a18a956628274ccbacffa64f1eeabc5f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 996 zcmVPx#1ZP1_K>z@;j|==^1poj532;bRa{vGf6951U69E94oEQKA19?eAK~!i%?U_#~ zJy8_L&-2LhzsUcxV_`wrVId1ik%*KXODVFjKv~Jw#!6W}DK?~}Y$R4F3Qmu&@xu#>QZ6Z4C|%4q#_z2cpp^bar+^I2`7v z-(!^1QdU${gfuWZ866!J#(r5>R~J4$K612|?d@$WC@2v2l{BH#Wl2d%I5aeb4-XGK z?0?3`$Ax_iYiw-9_xE>>^k;8x4V$FMS=?QS9vo;I0SyMr%ggMIPjz)QD}eR&byjXpPEO$R@{+II zePof^Mrp1By&%4dPkMSf(2m7d0LRD2th_kejF%h^Ykz!IR7m=!>6ZLMjs3=a>p0ysN6gWcU-Q&aH>R0u+SeLW;3#D7Hl zSQeR4I?#=_>Gz(v;vRtJZ02Ys1XUOe`rW z!KtY!Zn5a=>$AtC?+o@LPESwUejgJ$ZR_dj;akZuJ3DLlr4Juh-Q>r{#)e(UWoKuz z*W&K(&c2_>;{Ja!GBQ}nk(HIj3Set%3)6-(tuC7dN zaCCIUN=)1zIE>S=zrP=Hb933_kFonui40Wxv&SMQCkJ|adx5G=^Yilc_0_C_78e&` zWo5;4fK^sj!rDtj^(ZA5BMkk;eoq%d|0; { 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({ diff --git a/tools/walletextension/frontend/src/components/modules/common/connect-wallet.tsx b/tools/walletextension/frontend/src/components/modules/common/connect-wallet.tsx index 4004c6e149..c75f73fcbb 100644 --- a/tools/walletextension/frontend/src/components/modules/common/connect-wallet.tsx +++ b/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 = () => { diff --git a/tools/walletextension/frontend/src/components/modules/home/disconnected.tsx b/tools/walletextension/frontend/src/components/modules/home/disconnected.tsx index f7a1004228..33de612f4a 100644 --- a/tools/walletextension/frontend/src/components/modules/home/disconnected.tsx +++ b/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 (

Welcome to the Ten Gateway!

@@ -102,9 +104,14 @@ const Disconnected = () => { -
); diff --git a/tools/walletextension/frontend/src/lib/utils.ts b/tools/walletextension/frontend/src/lib/utils.ts index 483a82f59f..3b0e78b9ca 100644 --- a/tools/walletextension/frontend/src/lib/utils.ts +++ b/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; +}; diff --git a/tools/walletextension/frontend/src/services/ethService.ts b/tools/walletextension/frontend/src/services/ethService.ts index b44de0ccd0..32127a0fd6 100644 --- a/tools/walletextension/frontend/src/services/ethService.ts +++ b/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; }, diff --git a/tools/walletextension/frontend/src/services/useGatewayService.ts b/tools/walletextension/frontend/src/services/useGatewayService.ts index 5b548b4389..3eb5fa355f 100644 --- a/tools/walletextension/frontend/src/services/useGatewayService.ts +++ b/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);