feat: Add openModalOnWrongNetwork option to customize whether displ…

…ay SwitchNetworkModal if on the wrong network (#159) * test: Test binance web3 wallet * test: Test binance web3 wallet * test: Test binance web3 wallet * test: Test * test: Test * test: Test * test: Test binance web3 wallet * test: Test * test: Test binance web3 wallet * docs: Add log * test: Test binance web3 wallet * test: Test * test: Test * test: Test * refactor: Remove unused code * docs: Add log * refactor: Adjust structure * refactor: Update cicd workflows * feat: Add `openModalOnWrongNetwork` option to customize whether display SwitchNetworkModal if on the wrong network
node-real · Jun 21, 2024 · 4725a51 · 4725a51
1 parent 1dee8db
commit 4725a51
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 4 deletions.
diff --git a/.changeset/angry-dolls-fix.md b/.changeset/angry-dolls-fix.md
@@ -0,0 +1,6 @@
+---
+'@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
@@ -52,7 +52,7 @@ const config = createConfig(
 
 const options: WalletKitOptions = {
   initialChainId: 204,
-  hideInnerModal: true,
+  closeModalAfterSwitchingNetwork: true,
 };
 
 export default function App() {
@@ -69,7 +69,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/website/src/pages/index.mdx b/website/src/pages/index.mdx
@@ -171,7 +171,7 @@ const { isOpen, onOpen, onClose } = useProfileModal();
 // useSwitchNetworkModal
 const { isOpen, onOpen, onClose } = useSwitchNetworkModal();
 <button onClick={() => onOpen()}>Open SwitchNetwork Modal</button>;
-````
+```
 
 ## Customizing wallets
 
@@ -497,6 +497,9 @@ interface WalletKitOptions {
   closeModalOnEsc?: boolean;
   closeModalOnOverlayClick?: boolean;
 
+  // Display SwitchNetworkModal if on the wrong network
+  openModalOnWrongNetwork?: boolean;
+
   walletDownloadUrl?: string;
   chainsConfig?: ChainProps[];