From cc36a2d160c53e2a81cf24e373842060eaa9e427 Mon Sep 17 00:00:00 2001
From: wenty22 <wenty.l@nodereal.io>
Date: Fri, 7 Feb 2025 12:23:40 +0800
Subject: [PATCH] feat: Update website

---
 .changeset/beige-cups-poke.md                 |  5 ++
 .../src/core/configs/getDefaultConfig.ts      |  2 +-
 packages/walletkit/src/core/index.ts          |  1 +
 website/src/pages/index.mdx                   | 69 ++++++++++++++-----
 website/src/playground/example.tsx            | 11 +--
 5 files changed, 61 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/beige-cups-poke.md

diff --git a/.changeset/beige-cups-poke.md b/.changeset/beige-cups-poke.md
new file mode 100644
index 00000000..e922b599
--- /dev/null
+++ b/.changeset/beige-cups-poke.md
@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Update website
diff --git a/packages/walletkit/src/core/configs/getDefaultConfig.ts b/packages/walletkit/src/core/configs/getDefaultConfig.ts
index 030e7ff5..17521956 100644
--- a/packages/walletkit/src/core/configs/getDefaultConfig.ts
+++ b/packages/walletkit/src/core/configs/getDefaultConfig.ts
@@ -25,7 +25,7 @@ export function getDefaultConfig(config: WalletKitConfig): DefaultConfig {
       closeModalAfterConnected: true,
       closeModalOnEsc: true,
       closeModalOnOverlayClick: true,
-      openModalOnWrongNetwork: false,
+      openModalOnWrongNetwork: true,
 
       onError(_err: any, description: string) {
         if (description) {
diff --git a/packages/walletkit/src/core/index.ts b/packages/walletkit/src/core/index.ts
index eb95b1e8..a2ac1339 100644
--- a/packages/walletkit/src/core/index.ts
+++ b/packages/walletkit/src/core/index.ts
@@ -1,6 +1,7 @@
 // utils
 export * from '@/core/base/utils/mobile';
 export * from '@/core/base/utils/css';
+export * from '@/core/base/utils/common';
 
 // providers
 export type { BaseWallet, WalletType } from '@/core/configs/types';
diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx
index 45aea7dc..6cf5a059 100644
--- a/website/src/pages/index.mdx
+++ b/website/src/pages/index.mdx
@@ -104,7 +104,12 @@ const config: WalletKitConfig = {
 ### 4. Add related components
 
 ```tsx live=false
-import { WalletKitProvider, ConnectModal, SwitchNetworkModal } from '@node-real/walletkit';
+import {
+  WalletKitProvider,
+  ConnectModal,
+  SwitchNetworkModal,
+  ConnectButton,
+} from '@node-real/walletkit';
 
 const queryClient = new QueryClient();
 
@@ -135,6 +140,7 @@ import {
   ConnectModal,
   useConnectModal,
   WalletKitConfig,
+  ConnectButton,
 } from '@node-real/walletkit';
 import { AppProps } from 'next/app';
 
@@ -172,10 +178,6 @@ export default function App({ Component, pageProps }: AppProps) {
     </QueryClientProvider>
   );
 }
-
-function ConnectButton() {
-  // ...
-}
 ```
 
 ## Embed modal into page
@@ -563,27 +565,36 @@ interface CustomizedTronConfig {
 }
 ```
 
-### 3. WalletProps
+### 3. Wallet
 
 ```tsx live=false
-export interface WalletProps {
-  id: string;
+export interface BaseBehavior {
+  platforms: PlatformType[];
+  connectType: ConnectType;
+  isInstalled?: () => boolean | undefined;
+  getAppLink?: () => string | undefined;
+  getUri?: (uri: string) => string | undefined;
+}
+
+export interface WalletConfig {
   name: string;
   logos: {
-    default: ReactElement | { [x in ColorMode]: ReactElement };
-    transparent?: ReactElement | { [x in ColorMode]: ReactElement };
+    default: React.ReactElement | { [x in ColorMode]: React.ReactElement };
+    transparent?: React.ReactElement | { [x in ColorMode]: React.ReactElement };
   };
   downloadUrls: {
     default: string | undefined;
   };
   spinnerColor?: string;
-  showQRCode?: boolean;
-  isInstalled: () => boolean | undefined;
+}
+
+export interface BaseWallet<T extends BaseBehavior = BaseBehavior> extends WalletConfig {
+  id: string;
+  walletType: WalletType;
   isDisabled?: boolean;
-  getCreateConnectorFn: () => CreateConnectorFn;
-  getDeepLink: () => string | undefined;
-  getQRCodeUri?: (uri: string) => string;
-  render?: (props: WalletRenderProps) => ReactNode;
+  isVisible?: boolean;
+  render?: (props: WalletRenderProps) => React.ReactNode;
+  behaviors: T[];
 }
 
 export interface WalletRenderProps {
@@ -592,9 +603,33 @@ export interface WalletRenderProps {
   wallet: {
     id: string;
     name: string;
-    logo: ReactElement;
+    logo: React.ReactElement;
     isDisabled?: boolean;
+    isVisible?: boolean;
+    walletType: WalletType;
   };
   onClick: (e: React.MouseEvent<Element, MouseEvent>) => void;
 }
+
+// evm wallet
+export interface EvmWalletBehavior extends BaseBehavior {
+  getCreateConnectorFn?: () => CreateConnectorFn;
+}
+export interface EvmWallet extends BaseWallet<EvmWalletBehavior> {}
+
+// solana wallet
+export interface SolanaWalletBehavior extends BaseBehavior {
+  getAdapter?: () => Adapter;
+}
+export interface SolanaWallet extends BaseWallet<SolanaWalletBehavior> {
+  adapterName: string;
+}
+
+// tron wallet
+export interface TronWalletBehavior extends BaseBehavior {
+  getAdapter?: () => Adapter;
+}
+export interface TronWallet extends BaseWallet<TronWalletBehavior> {
+  adapterName: string;
+}
 ```
diff --git a/website/src/playground/example.tsx b/website/src/playground/example.tsx
index 8c250736..36b3fd83 100644
--- a/website/src/playground/example.tsx
+++ b/website/src/playground/example.tsx
@@ -3,9 +3,9 @@ import { useDisconnect, useAccount } from 'wagmi';
 import {
   SwitchNetworkModal,
   EmbeddedConnectModal,
-  useConnectModal,
   ConnectModal,
   useSwitchNetworkModal,
+  ConnectButton,
 } from '@node-real/walletkit';
 import { useSolanaWallet } from '@node-real/walletkit/solana';
 import { useTronWallet } from '@node-real/walletkit/tron';
@@ -13,18 +13,11 @@ import { Playground } from './Playground';
 
 export function BaseExample() {
   const Content = () => {
-    const { onOpen } = useConnectModal();
     const { isConnected } = useAppAccount();
 
     return (
       <Box borderRadius={8} border="1px solid readable.border" p={16}>
-        {isConnected ? (
-          <ConnectedInfo />
-        ) : (
-          <Button size="sm" onClick={() => onOpen()}>
-            open connect modal
-          </Button>
-        )}
+        {isConnected ? <ConnectedInfo /> : <ConnectButton />}
         <ConnectModal />
       </Box>
     );