Attemp_to_improve_mobile_metamask_experience (#55)

* Jovells workflow auto sync after pr merge (#4) * Update main.yml * Update main.yml * Update wallet connectors and remove unused imports * Add useSwitchNetwork hook and toast notification for changed network
mowblox · Dec 24, 2023 · 80558ca · 80558ca
1 parent 06cd48a
commit 80558ca
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 19 deletions.
diff --git a/frontend/nextjs/emt.config.ts b/frontend/nextjs/emt.config.ts
@@ -1,37 +1,51 @@
 
-import {getDefaultWallets} from "@rainbow-me/rainbowkit";
-import { LucideImport } from "lucide-react";
+import {connectorsForWallets} from "@rainbow-me/rainbowkit";
+import {
+  injectedWallet,
+  metaMaskWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';
   import { configureChains, createConfig } from 'wagmi';
-  import {
-  hardhat,
-  } from 'wagmi/chains';
 import { publicProvider } from 'wagmi/providers/public';
 
-
-import { Chain } from 'wagmi'
 import { collection } from "firebase/firestore";
 import { firestore } from "@/lib/firebase";
-import { JsonRpcProvider, ethers } from "ethers6";
-import { EMTMarketplace as EMTMarketplaceType } from "../../blockchain/typechain-types/contracts/EMTMarketplace";
-import { ExpertToken as ExpertTokenType } from "../../blockchain/typechain-types/contracts/ExpertToken";
-import { MentorToken as MentorTokenType } from "../../blockchain/typechain-types/contracts/MentorToken";
-import { StableCoin as StableCoinType } from "../../blockchain/typechain-types/contracts/StableCoin";
 
 import {chain, envChains} from './contracts'
+import { HOME_PAGE } from "@/app/(with wallet)/_components/page-links";
 
  const { chains, publicClient } = configureChains(
   envChains,
     [
       publicProvider()
     ]
   );
+
+  const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID as string
+
+  const customMetamaskWallet = metaMaskWallet({ projectId, chains })
+  customMetamaskWallet.createConnector = () => { 
+    const old = metaMaskWallet({ projectId, chains }).createConnector()
+   const oldMobileGetUri = old.mobile!.getUri;
+    old.mobile!.getUri = async () => {
+      if(window?.ethereum){
+        return  oldMobileGetUri as any
+      }
+      return 'metamask.app.link/dapp/'+location.host+HOME_PAGE
+    }
+    return old
+  }
 
- const { connectors } = getDefaultWallets({
-    appName: 'My RainbowKit App',
-    //todo: @od41 add walletconnect project id in Vercel
-    projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID as string,
-    chains
-  });
+ const  connectors  = connectorsForWallets([
+  {
+    groupName: 'Recommended',
+    wallets: [
+      injectedWallet({ chains }),
+      customMetamaskWallet,
+      walletConnectWallet({ projectId, chains }),
+    ],
+  },
+]);
 
  const wagmiConfig = createConfig({
     autoConnect: true,

diff --git a/frontend/nextjs/src/lib/hooks/useContracts.tsx b/frontend/nextjs/src/lib/hooks/useContracts.tsx
@@ -11,7 +11,7 @@ import {
   useAccountModal,
   useChainModal,
 } from "@rainbow-me/rainbowkit";
-import { WagmiConfigProps, useAccount, useNetwork } from "wagmi";
+import { WagmiConfigProps, useAccount, useNetwork, useSwitchNetwork } from "wagmi";
 import PageLoading from "@/components/ui/page-loading";
 import { chain } from "../../../contracts";
 import {
@@ -21,6 +21,7 @@ import {
   stableCoin as _stableCoin,
   expertToken as _expertToken,
 } from "@/../../contracts";
+import { toast } from "@/components/ui/use-toast";
 
 /**
  * The context interface that defines the contract context object.
@@ -78,6 +79,8 @@ export function ContractProvider({ children }: { children: React.ReactNode }) {
   const { openChainModal } = useChainModal();
   const network = useNetwork()
   const account = useAccount();
+  const [wrongNetwork, setWrongNetwork] = useState(false);
+
 
   const [contracts, setContracts] = useState<ContractContext>({
     emtMarketplace: _emtMarketPlace,
@@ -143,6 +146,26 @@ export function ContractProvider({ children }: { children: React.ReactNode }) {
     fetchContracts();
   }, [ethereum, chain.id, account.address, network?.chain?.id]);
 
+  useEffect(() => {
+    if (network?.chain?.id !== chain.id) {
+      toast({
+        title: "Wrong Network",
+        description: "Please change to the topos network",
+        variant: "destructive",
+      })
+      setWrongNetwork(true);
+    } else {
+      if (wrongNetwork) {
+        toast({
+          title: "Network Changed",
+          description: "You have successfully changed to the topos network",
+          variant: "success",
+        })
+        setWrongNetwork(false);
+      }
+    }
+  }, [network?.chain?.id]);
+
   if (!contracts) {
     return (
       <div>