feat: Remove close button in EmbeddedModal & Add address to onConnect…

…ed callback (#244)
node-real · Dec 20, 2024 · 8b72b41 · 8b72b41
1 parent 6a74e3c
commit 8b72b41
Show file tree

Hide file tree

Showing 15 changed files with 36 additions and 14 deletions.
diff --git a/.changeset/smart-icons-rhyme.md b/.changeset/smart-icons-rhyme.md
@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Remove close button in EmbeddedModal & Add address to onConnected callback
diff --git a/packages/walletkit/__dev__/App.tsx b/packages/walletkit/__dev__/App.tsx
@@ -29,9 +29,6 @@ import { bsc, mainnet } from 'viem/chains';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useAccount, useDisconnect } from 'wagmi';
 import { defaultTronConfig, tronLink, useTronWallet } from '@/tron/index';
-import { Modal } from '@/core/base/components/Modal';
-import { ModalBody } from '@/core/base/components/Modal/ModalBody';
-import { useDisclosure } from '@/core/base/hooks/useDisclosure';
 import { SwitchNetworkModal } from '@/core/modals/SwitchNetworkModal';
 
 new VConsole();
@@ -111,6 +108,9 @@ function ConnectButton() {
             tronConfig: {
               initialChainId: '0xcd8690dc',
             },
+            onConnected(params) {
+              console.log(params, '====xx');
+            },
           })
         }
       >

diff --git a/packages/walletkit/src/core/hooks/useAutoCloseConnectModal.ts b/packages/walletkit/src/core/hooks/useAutoCloseConnectModal.ts
@@ -4,7 +4,7 @@ import { useWalletKit } from '../providers/WalletKitProvider/context';
 import { useConnectModal } from '../modals/ConnectModal/context';
 import { useRouter } from '../providers/RouteProvider/context';
 
-export function useAutoCloseConnectModal(isConnected: boolean) {
+export function useAutoCloseConnectModal(isConnected: boolean, address: string | undefined | null) {
   const { options, selectedWallet } = useWalletKit();
 
   const router = useRouter();
@@ -14,6 +14,7 @@ export function useAutoCloseConnectModal(isConnected: boolean) {
     if (router.route !== ViewRoutes.HOME && isConnected) {
       options.onConnected?.({
         wallet: selectedWallet,
+        address: address!,
       });
 
       if (options.closeModalAfterConnected) {

diff --git a/packages/walletkit/src/core/modals/ConnectModal/TemplateConnectingView/index.tsx b/packages/walletkit/src/core/modals/ConnectModal/TemplateConnectingView/index.tsx
@@ -25,10 +25,11 @@ interface TemplateConnectingViewProps {
   onTryAgain: () => void;
   wallet: BaseWallet;
   isConnected: boolean;
+  address: string | undefined | null;
 }
 
 export function TemplateConnectingView(props: TemplateConnectingViewProps) {
-  const { status, runConnect, onTryAgain, wallet, isConnected } = props;
+  const { status, runConnect, onTryAgain, wallet, isConnected, address } = props;
 
   const { log } = useWalletKit();
   const logos = useWalletLogos(wallet.logos);
@@ -54,7 +55,7 @@ export function TemplateConnectingView(props: TemplateConnectingViewProps) {
 
   const isLoading = status === CONNECT_STATUS.CONNECTING;
 
-  useAutoCloseConnectModal(isConnected);
+  useAutoCloseConnectModal(isConnected, address);
 
   return (
     <>

diff --git a/packages/walletkit/src/core/modals/ConnectModal/TemplateQRCodeView/index.tsx b/packages/walletkit/src/core/modals/ConnectModal/TemplateQRCodeView/index.tsx
@@ -17,15 +17,16 @@ export interface TemplateQRCodeViewProps {
   onClickOpenWcModal: () => void;
   isConnected: boolean;
   isWalletConnect: boolean;
+  address: string | undefined | null;
 }
 
 export function TemplateQRCodeView(props: TemplateQRCodeViewProps) {
-  const { wallet, qrCodeUri, onClickOpenWcModal, isConnected, isWalletConnect } = props;
+  const { wallet, qrCodeUri, onClickOpenWcModal, isConnected, isWalletConnect, address } = props;
 
   const { options } = useWalletKit();
   const logos = useWalletLogos(wallet?.logos);
 
-  useAutoCloseConnectModal(isConnected);
+  useAutoCloseConnectModal(isConnected, address);
 
   return (
     <>

diff --git a/packages/walletkit/src/core/modals/ConnectModal/context.ts b/packages/walletkit/src/core/modals/ConnectModal/context.ts
@@ -13,7 +13,7 @@ export interface ConnectModalOpenParams {
   evmConfig?: {
     initialChainId?: number;
   };
-  onConnected?: (params: { wallet: BaseWallet }) => void;
+  onConnected?: (params: { wallet: BaseWallet; address: string }) => void;
 }
 
 export interface ConnectModalContextProps {

diff --git a/packages/walletkit/src/core/modals/EmbeddedConnectModal/index.tsx b/packages/walletkit/src/core/modals/EmbeddedConnectModal/index.tsx
@@ -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={true} onBack={back} />
+        <Navbar showBack={history.length > 1} showClose={false} onBack={back} />
         {view}
       </ModalContent>
     </Box>

diff --git a/packages/walletkit/src/core/providers/WalletKitProvider/context.ts b/packages/walletkit/src/core/providers/WalletKitProvider/context.ts
@@ -29,7 +29,7 @@ export interface WalletKitConfig {
 
     onClickWallet?: (wallet: BaseWallet, e?: React.MouseEvent) => undefined | boolean;
     onChainAlreadyAdded?: (params: { wallet: BaseWallet; chainId: number }) => void;
-    onConnected?: (params: { wallet: BaseWallet }) => void;
+    onConnected?: (params: { wallet: BaseWallet; address: string }) => void;
     onError?: (err: any, description: string) => void;
   };
 

diff --git a/packages/walletkit/src/evm/components/EvmConnectingView/index.tsx b/packages/walletkit/src/evm/components/EvmConnectingView/index.tsx
@@ -5,13 +5,15 @@ import { useIsConnected } from '@/evm/hooks/useIsConnected';
 import { useWalletConnector } from '@/evm/hooks/useWalletConnector';
 import { useCallback } from 'react';
 import { useConnectingStatus } from '@/evm/hooks/useConnectingStatus';
+import { useAccount } from 'wagmi';
 
 export function EvmConnectingView() {
   const { selectedWallet } = useWalletKit();
   const isConnected = useIsConnected();
   const selectedConnector = useWalletConnector(selectedWallet.id);
 
   const { connect, status, setStatus } = useConnectingStatus();
+  const { address } = useAccount();
 
   const runConnect = useCallback(() => {
     if (!selectedWallet.isInstalled()) return;
@@ -31,6 +33,7 @@ export function EvmConnectingView() {
       onTryAgain={runConnect}
       wallet={selectedWallet}
       isConnected={isConnected}
+      address={address}
     />
   );
 }
diff --git a/packages/walletkit/src/evm/components/EvmQRCodeView/index.tsx b/packages/walletkit/src/evm/components/EvmQRCodeView/index.tsx
@@ -4,6 +4,7 @@ import { useIsConnected } from '@/evm/hooks/useIsConnected';
 import { useWalletConnectUri } from '@/evm/hooks/useWalletConnectUri';
 import { useWalletConnectModal } from '@/evm/hooks/useWalletConnectModal';
 import { EvmWallet, isWalletConnect } from '@/evm/wallets';
+import { useAccount } from 'wagmi';
 
 export function EvmQRCodeView() {
   const { selectedWallet } = useWalletKit();
@@ -12,6 +13,7 @@ export function EvmQRCodeView() {
   const wcModal = useWalletConnectModal();
   const qrCodeUri = wcUri && ((selectedWallet as EvmWallet).getUri?.(wcUri) ?? wcUri);
   const isConnected = useIsConnected();
+  const { address } = useAccount();
 
   return (
     <TemplateQRCodeView
@@ -20,6 +22,7 @@ export function EvmQRCodeView() {
       onClickOpenWcModal={wcModal.onOpen}
       isConnected={isConnected}
       isWalletConnect={isWalletConnect(selectedWallet.id)}
+      address={address}
     />
   );
 }
diff --git a/packages/walletkit/src/evm/components/EvmUriConnectingView/index.tsx b/packages/walletkit/src/evm/components/EvmUriConnectingView/index.tsx
@@ -6,10 +6,12 @@ import { EvmWallet } from '@/evm/wallets';
 import { openLink } from '@/core/utils/common';
 import { useWalletConnectUri } from '@/evm/hooks/useWalletConnectUri';
 import { useConnectingStatus } from '@/evm/hooks/useConnectingStatus';
+import { useAccount } from 'wagmi';
 
 export function EvmUriConnectingView() {
   const { selectedWallet } = useWalletKit();
   const isConnected = useIsConnected();
+  const { address } = useAccount();
 
   const { status, setStatus } = useConnectingStatus({
     initialStatus: CONNECT_STATUS.CONNECTING,
@@ -34,6 +36,7 @@ export function EvmUriConnectingView() {
       runConnect={() => undefined}
       onTryAgain={onTryAgain}
       wallet={selectedWallet}
+      address={address}
     />
   );
 }
diff --git a/packages/walletkit/src/evm/wallets/metaMask/index.tsx b/packages/walletkit/src/evm/wallets/metaMask/index.tsx
@@ -30,6 +30,7 @@ export function metaMask(props: MetaMaskOptions = {}): EvmWallet {
     getCreateConnectorFn() {
       return metaMaskSDk({
         useDeeplink: false,
+        headless: true,
         openDeeplink(arg) {
           openLink(arg);
         },

diff --git a/packages/walletkit/src/solana/components/SolanaConnectingView/index.tsx b/packages/walletkit/src/solana/components/SolanaConnectingView/index.tsx
@@ -5,7 +5,7 @@ import { EventEmitter } from '@/core/utils/eventEmitter';
 import { useSolanaConnect } from '@/solana/hooks/useSolanaConnect';
 import { solanaCommonErrorHandler } from '@/solana/utils/solanaCommonErrorHandler';
 import { SolanaWallet } from '@/solana/wallets';
-import { WalletProviderProps } from '@solana/wallet-adapter-react';
+import { useWallet, WalletProviderProps } from '@solana/wallet-adapter-react';
 import { useCallback, useEffect, useState } from 'react';
 
 type WalletError = Parameters<Required<WalletProviderProps>['onError']>[0];
@@ -18,6 +18,7 @@ export function SolanaConnectingView() {
   );
 
   const { isConnected, connect } = useSolanaConnect();
+  const { publicKey } = useWallet();
 
   useEffect(() => {
     const onError = (error: WalletError) => {
@@ -64,6 +65,7 @@ export function SolanaConnectingView() {
       onTryAgain={runConnect}
       wallet={selectedWallet}
       isConnected={isConnected}
+      address={publicKey?.toBase58()}
     />
   );
 }
diff --git a/packages/walletkit/src/tron/components/TronConnectingView/index.tsx b/packages/walletkit/src/tron/components/TronConnectingView/index.tsx
@@ -5,7 +5,7 @@ import { EventEmitter } from '@/core/utils/eventEmitter';
 import { useTronConnect } from '@/tron/hooks/useTronConnect';
 import { tronCommonErrorHandler } from '@/tron/utils/tronCommonErrorHandler';
 import { TronWallet } from '@/tron/wallets';
-import { WalletProviderProps } from '@tronweb3/tronwallet-adapter-react-hooks';
+import { useWallet, WalletProviderProps } from '@tronweb3/tronwallet-adapter-react-hooks';
 import { useCallback, useEffect, useState } from 'react';
 
 type WalletError = Parameters<Required<WalletProviderProps>['onError']>[0];
@@ -18,6 +18,7 @@ export function TronConnectingView() {
   );
 
   const { connect, isConnected } = useTronConnect();
+  const { address } = useWallet();
 
   useEffect(() => {
     const onError = (error: WalletError) => {
@@ -62,6 +63,7 @@ export function TronConnectingView() {
       onTryAgain={runConnect}
       wallet={selectedWallet}
       isConnected={isConnected}
+      address={address}
     />
   );
 }
diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx
@@ -526,7 +526,7 @@ export interface WalletKitConfig {
     onChainAlreadyAdded?: (params: { wallet: BaseWallet; chainId: number }) => void;
 
     // Once wallet is connected, this method will be invoked.
-    onConnected?: (params: { wallet: BaseWallet }) => void;
+    onConnected?: (params: { wallet: BaseWallet; address: string }) => void;
 
     // handle wallet errors by yourself
     onError?: (err: any, description: string) => void;