From 36affe5e898e847ee538f78ab6c04cac4789b665 Mon Sep 17 00:00:00 2001
From: Wenty Li <wenty.l@nodereal.io>
Date: Fri, 21 Jun 2024 11:10:59 +0800
Subject: [PATCH] feat: Add `openModalOnWrongNetwork` option to customize
 whether display SwitchNetworkModal if on the wrong network

---
 .changeset/angry-dolls-fix.md                                | 5 +++++
 packages/walletkit/__dev__/App.tsx                           | 3 +--
 .../SwitchNetworkModal/SwitchNetworkProvider/index.tsx       | 4 +++-
 .../walletkit/src/components/WalletKitProvider/context.ts    | 2 ++
 .../walletkit/src/defaultConfig/getDefaultProviderOptions.ts | 2 ++
 packages/walletkit/src/wallets/custom/connector.ts           | 4 ++++
 website/src/pages/index.mdx                                  | 3 +++
 7 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/angry-dolls-fix.md

diff --git a/.changeset/angry-dolls-fix.md b/.changeset/angry-dolls-fix.md
new file mode 100644
index 00000000..c8f7a44c
--- /dev/null
+++ b/.changeset/angry-dolls-fix.md
@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Add `openModalOnWrongNetwork` option to customize whether display SwitchNetworkModal if on the wrong network
diff --git a/packages/walletkit/__dev__/App.tsx b/packages/walletkit/__dev__/App.tsx
index b5faf4a5..40a7e1d9 100644
--- a/packages/walletkit/__dev__/App.tsx
+++ b/packages/walletkit/__dev__/App.tsx
@@ -49,7 +49,7 @@ const client = createClient(
 
 const options: WalletKitOptions = {
   initialChainId: 204,
-  hideInnerModal: true,
+  closeModalAfterSwitchingNetwork: true,
 };
 
 export default function App() {
@@ -66,7 +66,6 @@ export default function App() {
         <WalletKitButton />
         <Example />
         <SwitchNetworkModal />
-        <WalletKitEmbeddedModal />
       </WalletKitProvider>
     </WagmiConfig>
   );
diff --git a/packages/walletkit/src/components/SwitchNetworkModal/SwitchNetworkProvider/index.tsx b/packages/walletkit/src/components/SwitchNetworkModal/SwitchNetworkProvider/index.tsx
index 99fc804c..3708169c 100644
--- a/packages/walletkit/src/components/SwitchNetworkModal/SwitchNetworkProvider/index.tsx
+++ b/packages/walletkit/src/components/SwitchNetworkModal/SwitchNetworkProvider/index.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useAccount, useNetwork } from 'wagmi';
 import { SwitchNetworkModalContext, SwitchNetworkModalOpenOptions } from './context';
 import { toast } from '@/base/components/toast';
+import { useWalletKitContext } from '@/components/WalletKitProvider/context';
 
 export interface SwitchNetworkProviderProps {
   children: React.ReactNode;
@@ -16,6 +17,7 @@ export function SwitchNetworkProvider(props: SwitchNetworkProviderProps) {
 
   const { chain } = useNetwork();
   const { isConnected } = useAccount();
+  const { options } = useWalletKitContext();
 
   const value = useMemo(() => {
     return {
@@ -42,7 +44,7 @@ export function SwitchNetworkProvider(props: SwitchNetworkProviderProps) {
   }, [isClosable, isConnected, isOpen, onClose, onOpen]);
 
   useEffect(() => {
-    if (isConnected) {
+    if (isConnected && options.openModalOnWrongNetwork) {
       const timer = setTimeout(() => {
         if (chain?.unsupported) {
           value.onOpen({
diff --git a/packages/walletkit/src/components/WalletKitProvider/context.ts b/packages/walletkit/src/components/WalletKitProvider/context.ts
index 6479294c..2f0eaca5 100644
--- a/packages/walletkit/src/components/WalletKitProvider/context.ts
+++ b/packages/walletkit/src/components/WalletKitProvider/context.ts
@@ -25,6 +25,8 @@ export interface WalletKitOptions {
   closeModalOnEsc?: boolean;
   closeModalOnOverlayClick?: boolean;
 
+  openModalOnWrongNetwork?: boolean;
+
   walletDownloadUrl?: string;
   chainsConfig?: ChainProps[];
   onClickWallet?: (connector: Connector, e?: React.MouseEvent) => undefined | boolean;
diff --git a/packages/walletkit/src/defaultConfig/getDefaultProviderOptions.ts b/packages/walletkit/src/defaultConfig/getDefaultProviderOptions.ts
index a4c7ebbd..62ef20f0 100644
--- a/packages/walletkit/src/defaultConfig/getDefaultProviderOptions.ts
+++ b/packages/walletkit/src/defaultConfig/getDefaultProviderOptions.ts
@@ -21,6 +21,8 @@ export function getDefaultProviderOptions(options: WalletKitOptions) {
     closeModalOnEsc: true,
     closeModalOnOverlayClick: true,
 
+    openModalOnWrongNetwork: true,
+
     walletDownloadUrl: `https://trustwallet.com/`,
     onError,
     ...restOptions,
diff --git a/packages/walletkit/src/wallets/custom/connector.ts b/packages/walletkit/src/wallets/custom/connector.ts
index f2eda2f7..631020b8 100644
--- a/packages/walletkit/src/wallets/custom/connector.ts
+++ b/packages/walletkit/src/wallets/custom/connector.ts
@@ -26,4 +26,8 @@ export class CustomConnector extends InjectedConnector {
     this.id = id;
     this.shimDisconnectKey = `${this.id}.shimDisconnect`;
   }
+
+  public async getProvider() {
+    return this.options.getProvider();
+  }
 }
diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx
index a3b0565a..f7bdca52 100644
--- a/website/src/pages/index.mdx
+++ b/website/src/pages/index.mdx
@@ -494,6 +494,9 @@ interface WalletKitOptions {
   closeModalOnEsc?: boolean;
   closeModalOnOverlayClick?: boolean;
 
+  // Display SwitchNetworkModal if on the wrong network
+  openModalOnWrongNetwork?: boolean;
+
   walletDownloadUrl?: string;
   chainsConfig?: ChainProps[];