feat: Reset the route once go to the home view (#241)

* feat: Update docs * docs: Update docs * feat: Reset the route once go to the home view
node-real · Dec 19, 2024 · 5916cd1 · 5916cd1
1 parent e05d3ca
commit 5916cd1
Show file tree

Hide file tree

Showing 34 changed files with 5,187 additions and 7,113 deletions.
diff --git a/.changeset/shy-cats-admire.md b/.changeset/shy-cats-admire.md
@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Reset the route once go to the home view
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -11,14 +11,14 @@
   },
   "dependencies": {
     "@node-real/walletkit": "workspace:*",
-    "@tanstack/react-query": "^5",
     "encoding": "^0.1.13",
     "next": "^14",
     "pino-pretty": "^11.2.2",
     "react": "^18",
     "react-dom": "^18",
-    "wagmi": "2.13.0",
-    "viem": "^2.21.49"
+    "wagmi": "catalog:",
+    "viem": "catalog:",
+    "@tanstack/react-query": "catalog:"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
@@ -30,23 +30,23 @@ const config: WalletKitConfig = {
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <WalletKitProvider config={config} debugMode={true} mode="auto">
-      <QueryClientProvider client={queryClient}>
+    <QueryClientProvider client={queryClient}>
+      <WalletKitProvider config={config} debugMode={true} mode="auto">
         <Component {...pageProps} />
         <ConnectButton />
         <ConnectModal />
-      </QueryClientProvider>
-    </WalletKitProvider>
+      </WalletKitProvider>
+    </QueryClientProvider>
   );
 }
 
 function ConnectButton() {
   const { onOpen } = useConnectModal();
 
-  const { address } = useAccount();
+  const { address, isConnected } = useAccount();
   const { disconnect } = useDisconnect();
 
-  if (address) {
+  if (isConnected) {
     return (
       <>
         <div>address:{address}</div>

diff --git a/examples/nextjs/pages/_document.tsx b/examples/nextjs/pages/_document.tsx
@@ -1,12 +1,9 @@
 import { Html, Head, Main, NextScript } from 'next/document';
-import { EthereumScript } from '@node-real/walletkit/evm';
 
 export default function Document() {
   return (
     <Html lang="en">
-      <Head>
-        <EthereumScript />
-      </Head>
+      <Head></Head>
       <body>
         <Main />
         <NextScript />

diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -12,11 +12,11 @@
   "dependencies": {
     "@node-real/walletkit": "workspace:*",
     "@particle-network/connectkit": "^2.0.0",
-    "@tanstack/react-query": "^5",
     "react": "^18",
     "react-dom": "^18",
-    "wagmi": "2.13.0",
-    "viem": "^2.21.49"
+    "wagmi": "catalog:",
+    "viem": "catalog:",
+    "@tanstack/react-query": "catalog:"
   },
   "devDependencies": {
     "@types/react": "^18",

diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
@@ -26,12 +26,12 @@ const config: WalletKitConfig = {
 
 export default function App() {
   return (
-    <WalletKitProvider config={config} debugMode={true} mode="auto">
-      <QueryClientProvider client={queryClient}>
+    <QueryClientProvider client={queryClient}>
+      <WalletKitProvider config={config} debugMode={true} mode="auto">
         <ConnectButton />
         <ConnectModal />
-      </QueryClientProvider>
-    </WalletKitProvider>
+      </WalletKitProvider>
+    </QueryClientProvider>
   );
 }
 

diff --git a/packages/walletkit/__dev__/App.tsx b/packages/walletkit/__dev__/App.tsx
@@ -1,8 +1,8 @@
 import './style.css';
 import {
   ConnectModal,
-  EmbeddedConnectModal,
   useConnectModal,
+  useSwitchNetworkModal,
   WalletKitConfig,
   WalletKitProvider,
 } from '@/core/index';
@@ -79,27 +79,20 @@ const config: WalletKitConfig = {
 };
 
 export default function App() {
-  const { isOpen, onClose, onOpen } = useDisclosure();
-
   return (
-    <WalletKitProvider config={config} debugMode>
-      <QueryClientProvider client={queryClient}>
+    <QueryClientProvider client={queryClient}>
+      <WalletKitProvider config={config} debugMode>
         <ConnectButton />
         <ConnectModal />
-        <button onClick={onOpen}>connect modal</button>
-        <Modal isOpen={isOpen} onClose={onClose}>
-          <ModalBody>
-            <EmbeddedConnectModal />
-          </ModalBody>
-        </Modal>
         <SwitchNetworkModal />
-      </QueryClientProvider>
-    </WalletKitProvider>
+      </WalletKitProvider>
+    </QueryClientProvider>
   );
 }
 
 function ConnectButton() {
   const { onOpen } = useConnectModal();
+  const { onOpen: openSwitchNetwork } = useSwitchNetworkModal();
 
   const { address } = useAccount();
   const { disconnect } = useDisconnect();
@@ -123,6 +116,7 @@ function ConnectButton() {
       >
         connect
       </button>
+      <button onClick={() => openSwitchNetwork()}>switch network</button>
       <div>
         evm address:{address} <button onClick={() => disconnect()}>disconnect</button>
       </div>

diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json
@@ -64,7 +64,6 @@
     "tronweb": "~6.0.0"
   },
   "devDependencies": {
-    "@tanstack/react-query": "^5.51.1",
     "@types/qrcode": "^1.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -79,7 +78,8 @@
     "vite": "^4.5.3",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-mkcert": "^1.17.6",
-    "wagmi": "2.13.0",
-    "viem": "^2.21.49"
+    "wagmi": "catalog:",
+    "viem": "catalog:",
+    "@tanstack/react-query": "catalog:"
   }
 }
diff --git a/packages/walletkit/src/core/hooks/useAutoCloseConnectModal.ts b/packages/walletkit/src/core/hooks/useAutoCloseConnectModal.ts
@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
-import { ViewRoutes } from '../modals/ConnectModal/RouteProvider';
+import { ViewRoutes } from '../providers/RouteProvider';
 import { useWalletKit } from '../providers/WalletKitProvider/context';
 import { useConnectModal } from '../modals/ConnectModal/context';
-import { useRouter } from '../modals/ConnectModal/RouteProvider/context';
+import { useRouter } from '../providers/RouteProvider/context';
 
 export function useAutoCloseConnectModal(isConnected: boolean) {
   const { options, selectedWallet } = useWalletKit();

diff --git a/packages/walletkit/src/core/hooks/useCloseAllModals.ts b/packages/walletkit/src/core/hooks/useCloseAllModals.ts
@@ -1,5 +1,5 @@
 import { useConnectModal } from '../modals/ConnectModal/context';
-import { useSwitchNetworkModal } from '../modals/SwitchNetworkModal/SwitchNetworkProvider/context';
+import { useSwitchNetworkModal } from '../modals/SwitchNetworkModal/context';
 
 export function useCloseAllModals() {
   const connectModal = useConnectModal();

diff --git a/packages/walletkit/src/core/index.ts b/packages/walletkit/src/core/index.ts
@@ -12,6 +12,7 @@ export { type Theme } from '@/core/providers/ThemeProvider';
 
 // modals
 export * from '@/core/modals/EmbeddedConnectModal';
-
 export * from '@/core/modals/ConnectModal';
 export { useConnectModal } from '@/core/modals/ConnectModal/context';
+export * from '@/core/modals/SwitchNetworkModal';
+export { useSwitchNetworkModal } from '@/core/modals/SwitchNetworkModal/context';
diff --git a/packages/walletkit/src/core/modals/ConnectModal/context.ts b/packages/walletkit/src/core/modals/ConnectModal/context.ts
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { ViewRoutes } from './RouteProvider';
+import { ViewRoutes } from '../../providers/RouteProvider';
 import { Action } from '@/core/providers/WalletKitProvider/context';
 import { BaseWallet } from '@/core/configs/types';
 

diff --git a/packages/walletkit/src/core/modals/ConnectModal/index.tsx b/packages/walletkit/src/core/modals/ConnectModal/index.tsx
@@ -1,6 +1,6 @@
 import { Modal } from '@/core/base/components/Modal';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
-import { useRouter } from './RouteProvider/context';
+import { useRouter } from '../../providers/RouteProvider/context';
 import { useConnectModal } from './context';
 import { Navbar } from '@/core/components/Navbar';
 

diff --git a/packages/walletkit/src/core/modals/ConnectModal/provider.tsx b/packages/walletkit/src/core/modals/ConnectModal/provider.tsx
@@ -1,9 +1,9 @@
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
-import { RouteProvider, ViewRoutes } from './RouteProvider';
+import { ViewRoutes } from '../../providers/RouteProvider';
 import { useMemo } from 'react';
 import { ConnectModalContext, ConnectModalOpenParams } from './context';
 import { useDisclosure } from '@/core/base/hooks/useDisclosure';
-import { useRouter } from './RouteProvider/context';
+import { useRouter } from '../../providers/RouteProvider/context';
 
 export interface ConnectModalProviderProps {
   children: React.ReactNode;
@@ -12,16 +12,6 @@ export interface ConnectModalProviderProps {
 export function ConnectModalProvider(props: ConnectModalProviderProps) {
   const { children } = props;
 
-  return (
-    <RouteProvider>
-      <WithRouter>{children}</WithRouter>
-    </RouteProvider>
-  );
-}
-
-function WithRouter(props: ConnectModalProviderProps) {
-  const { children } = props;
-
   const { setAction, evmConfig, tronConfig, options } = useWalletKit();
   const { isOpen, onClose, onOpen } = useDisclosure();
   const router = useRouter();

diff --git a/packages/walletkit/src/core/modals/EmbeddedConnectModal/index.tsx b/packages/walletkit/src/core/modals/EmbeddedConnectModal/index.tsx
@@ -2,11 +2,11 @@ import { BoxProps, Box } from '@/core/base/components/Box';
 import { ModalContent } from '@/core/base/components/Modal/ModalContent';
 import { cx } from '@/core/base/utils/css';
 import { clsModal, clsContent } from './style.css';
-import { useRouter } from '../ConnectModal/RouteProvider/context';
+import { useRouter } from '../../providers/RouteProvider/context';
 import { Navbar } from '@/core/components/Navbar';
 import { useEffect } from 'react';
 import { useConnectModal } from '../ConnectModal/context';
-import { ViewRoutes } from '../ConnectModal/RouteProvider';
+import { ViewRoutes } from '../../providers/RouteProvider';
 
 export function EmbeddedConnectModal(props: BoxProps) {
   const { className, ...restProps } = props;
@@ -24,7 +24,7 @@ export function EmbeddedConnectModal(props: BoxProps) {
   return (
     <Box className={cx('wk-embedded-connect-modal', clsModal, className)} {...restProps}>
       <ModalContent className={clsContent} {...restProps}>
-        <Navbar showBack={history.length > 1} showClose={false} onBack={back} />
+        <Navbar showBack={history.length > 1} showClose={true} onBack={back} />
         {view}
       </ModalContent>
     </Box>

diff --git a/...orkModal/SwitchNetworkProvider/context.ts → ...core/modals/SwitchNetworkModal/context.ts b/...orkModal/SwitchNetworkProvider/context.ts → ...core/modals/SwitchNetworkModal/context.ts
diff --git a/packages/walletkit/src/core/modals/SwitchNetworkModal/index.tsx b/packages/walletkit/src/core/modals/SwitchNetworkModal/index.tsx
@@ -1,5 +1,5 @@
 import { useAccount, useChains } from 'wagmi';
-import { useSwitchNetworkModal } from './SwitchNetworkProvider/context';
+import { useSwitchNetworkModal } from './context';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
 import { useEvmSwitchChain } from '@/evm/hooks/useEvmSwitchChain';
 import { Modal } from '@/core/base/components/Modal';

diff --git a/...workModal/SwitchNetworkProvider/index.tsx → ...re/modals/SwitchNetworkModal/provider.tsx b/...workModal/SwitchNetworkProvider/index.tsx → ...re/modals/SwitchNetworkModal/provider.tsx
diff --git a/...ls/ConnectModal/RouteProvider/context.tsx → .../core/providers/RouteProvider/context.tsx b/...ls/ConnectModal/RouteProvider/context.tsx → .../core/providers/RouteProvider/context.tsx
diff --git a/...dals/ConnectModal/RouteProvider/index.tsx → ...rc/core/providers/RouteProvider/index.tsx b/...dals/ConnectModal/RouteProvider/index.tsx → ...rc/core/providers/RouteProvider/index.tsx
@@ -1,11 +1,11 @@
-import { useState, useRef, useMemo, useCallback } from 'react';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import { RouteContext } from './context';
 import { EvmConnectingView } from '@/evm/components/EvmConnectingView';
 import { EvmQRCodeView } from '@/evm/components/EvmQRCodeView';
 import { EvmUriConnectingView } from '@/evm/components/EvmUriConnectingView';
 import { SolanaConnectingView } from '@/solana/components/SolanaConnectingView';
 import { SolanaQRCodeView } from '@/solana/components/SolanaQRCodeView';
-import { HomeView } from '../HomeView';
+import { HomeView } from '../../modals/ConnectModal/HomeView';
 import { TronConnectingView } from '@/tron/components/TronConnectingView';
 
 export enum ViewRoutes {
@@ -58,6 +58,9 @@ export function RouteProvider(props: RouteProviderProps) {
 
   const push = useCallback(
     (nextRoute: string) => {
+      if (nextRoute === ViewRoutes.HOME) {
+        reset();
+      }
       if (history[history.length - 1] !== nextRoute) {
         history.push(nextRoute);
         setRoute(nextRoute);

diff --git a/packages/walletkit/src/core/providers/WalletKitProvider/index.tsx b/packages/walletkit/src/core/providers/WalletKitProvider/index.tsx
@@ -9,7 +9,8 @@ import { ToastProvider } from '@/core/base/components/toast/ToastProvider';
 import { BaseWallet } from '@/core/configs/types';
 import { ProfileModalProvider } from '@/core/modals/ProfileModal/provider';
 import { TronWalletProvider } from '@/tron/components/TronWalletProvider';
-import { SwitchNetworkProvider } from '@/core/modals/SwitchNetworkModal/SwitchNetworkProvider';
+import { SwitchNetworkProvider } from '@/core/modals/SwitchNetworkModal/provider';
+import { RouteProvider } from '@/core/providers/RouteProvider';
 
 export interface WalletKitProviderProps {
   config: WalletKitConfig;
@@ -65,18 +66,19 @@ export function WalletKitProvider(props: WalletKitProviderProps) {
     <WalletKitContext.Provider value={value}>
       <ThemeProvider mode={mode} theme={theme}>
         <ToastProvider />
-
-        <EvmWalletProvider>
-          <SolanaWalletProvider>
-            <TronWalletProvider>
-              <ConnectModalProvider>
-                <ProfileModalProvider>
-                  <SwitchNetworkProvider>{children}</SwitchNetworkProvider>
-                </ProfileModalProvider>
-              </ConnectModalProvider>
-            </TronWalletProvider>
-          </SolanaWalletProvider>
-        </EvmWalletProvider>
+        <RouteProvider>
+          <EvmWalletProvider>
+            <SolanaWalletProvider>
+              <TronWalletProvider>
+                <ConnectModalProvider>
+                  <ProfileModalProvider>
+                    <SwitchNetworkProvider>{children}</SwitchNetworkProvider>
+                  </ProfileModalProvider>
+                </ConnectModalProvider>
+              </TronWalletProvider>
+            </SolanaWalletProvider>
+          </EvmWalletProvider>
+        </RouteProvider>
       </ThemeProvider>
     </WalletKitContext.Provider>
   );

diff --git a/packages/walletkit/src/evm/components/SetEvmWalletClickRef/index.tsx b/packages/walletkit/src/evm/components/SetEvmWalletClickRef/index.tsx
@@ -1,8 +1,8 @@
 import { isMobile, isTMA } from '@/core/base/utils/mobile';
 import { UseWalletRenderProps } from '@/core/hooks/useWalletRender';
 import { useConnectModal } from '@/core/modals/ConnectModal/context';
-import { ViewRoutes } from '@/core/modals/ConnectModal/RouteProvider';
-import { useRouter } from '@/core/modals/ConnectModal/RouteProvider/context';
+import { ViewRoutes } from '@/core/providers/RouteProvider';
+import { useRouter } from '@/core/providers/RouteProvider/context';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
 import { openLink } from '@/core/utils/common';
 import { getEvmGlobalData } from '@/evm/globalData';

diff --git a/packages/walletkit/src/solana/components/SetSolanaWalletClickRef/index.tsx b/packages/walletkit/src/solana/components/SetSolanaWalletClickRef/index.tsx
@@ -1,7 +1,7 @@
 import { isMobile } from '@/core/base/utils/mobile';
 import { useConnectModal } from '@/core/modals/ConnectModal/context';
-import { ViewRoutes } from '@/core/modals/ConnectModal/RouteProvider';
-import { useRouter } from '@/core/modals/ConnectModal/RouteProvider/context';
+import { ViewRoutes } from '@/core/providers/RouteProvider';
+import { useRouter } from '@/core/providers/RouteProvider/context';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
 import { openLink } from '@/core/utils/common';
 import { useSolanaConnect } from '@/solana/hooks/useSolanaConnect';

diff --git a/packages/walletkit/src/tron/components/SetTronWalletClickRef/index.tsx b/packages/walletkit/src/tron/components/SetTronWalletClickRef/index.tsx
@@ -1,7 +1,7 @@
 import { isMobile } from '@/core/index';
 import { useConnectModal } from '@/core/modals/ConnectModal/context';
-import { ViewRoutes } from '@/core/modals/ConnectModal/RouteProvider';
-import { useRouter } from '@/core/modals/ConnectModal/RouteProvider/context';
+import { ViewRoutes } from '@/core/providers/RouteProvider';
+import { useRouter } from '@/core/providers/RouteProvider/context';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
 import { useTronConnect } from '@/tron/hooks/useTronConnect';
 import { TronWallet } from '@/tron/wallets';