feat: Add openModalOnWrongNetwork option to customize whether displ…

…ay SwitchNetworkModal if on the wrong network
node-real · Jun 21, 2024 · 36affe5 · 36affe5
1 parent ab14858
commit 36affe5
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 3 deletions.
diff --git a/.changeset/angry-dolls-fix.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -494,6 +494,9 @@ interface WalletKitOptions {
   closeModalOnEsc?: boolean;
   closeModalOnOverlayClick?: boolean;
 
+  // Display SwitchNetworkModal if on the wrong network
+  openModalOnWrongNetwork?: boolean;
+
   walletDownloadUrl?: string;
   chainsConfig?: ChainProps[];