perf(solana): Optimize rendering times when using default connectionConfig

.changeset/shaggy-jokes-fold.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3-solana': minor
+---
+
+perf(solana): Optimize rendering times when using default connectionConfig

packages/solana/src/solana-provider/__tests__/basic.test.tsx

@@ -1,4 +1,4 @@
-import { useState, type FC, type PropsWithChildren } from 'react';
+import { useEffect, useState, type FC, type PropsWithChildren } from 'react';
 import { Connector, useProvider, type ConnectorTriggerProps } from '@ant-design/web3';
 import type { ConnectionContextState } from '@solana/wallet-adapter-react';
 import { fireEvent, render } from '@testing-library/react';
@@ -9,9 +9,12 @@ import { SolanaWeb3ConfigProvider } from '../index';
 import { xrender } from './utils';
 
 type TestConnection = Partial<ConnectionContextState['connection']>;
+const mockCreateConnectionInstance = vi.fn();
 
 describe('SolanaWeb3ConfigProvider', () => {
   beforeEach(() => {
+    mockCreateConnectionInstance.mockClear();
+
     vi.resetAllMocks();
   });
 
@@ -46,15 +49,27 @@ describe('SolanaWeb3ConfigProvider', () => {
 
     const publicKey = new PublicKey(mockedData.address.value);
 
-    const ConnectionProvider: React.FC<React.PropsWithChildren<{ endpoint: string }>> = ({
+    const ConnectionProvider: React.FC<
+      React.PropsWithChildren<{ endpoint: string; config: any }>
+    > = ({
       children,
       endpoint,
-    }) => (
-      <div>
-        <div className="endpoint">{endpoint}</div>
-        {children}
-      </div>
-    );
+      // default value: copy from ConnectionProvider in @solana/wallet-adapter-react
+      config = { commitment: 'confirmed' },
+    }) => {
+      useEffect(() => {
+        mockCreateConnectionInstance(endpoint, config?.commitment);
+      }, [endpoint, config]);
+
+      return (
+        <div>
+          <div className="endpoint">{endpoint}</div>
+          <div className="commitment">{config?.commitment}</div>
+          {children}
+        </div>
+      );
+    };
+
     const WalletProvider: React.FC<React.PropsWithChildren> = ({ children }) => <>{children}</>;
 
     const connectedRef = remember(false);
@@ -183,7 +198,7 @@ describe('SolanaWeb3ConfigProvider', () => {
     expect(mockRpcProvider).toBeCalled();
   });
 
-  it('ConnectionProvider', () => {
+  it('available endpoint', () => {
     const App = () => (
       <SolanaWeb3ConfigProvider rpcProvider={() => `https://main-beta.fake-domain.com/`}>
         <div className="content">test</div>
@@ -194,6 +209,34 @@ describe('SolanaWeb3ConfigProvider', () => {
     expect(selector('.endpoint')?.textContent).toBe('https://main-beta.fake-domain.com/');
   });
 
+  it('available connectionConfig and is optimized by default when creating connection', async () => {
+    const connectionConfig = { commitment: 'processed' };
+
+    const App = ({ config }: { config?: any }) => (
+      <SolanaWeb3ConfigProvider
+        rpcProvider={() => `https://api.zan.top/node/v1/solana/mainnet/${'YOUR_ZAN_API_KEY'}`}
+        connectionConfig={config}
+      >
+        <div className="content">test</div>
+      </SolanaWeb3ConfigProvider>
+    );
+
+    const { selector, rerender } = xrender(App);
+    expect(selector('.commitment')?.textContent).toBe('confirmed');
+
+    // simulate multiple renderings
+    rerender(<App />);
+    rerender(<App />);
+
+    expect(mockCreateConnectionInstance).toBeCalledTimes(1);
+
+    // simulate re-render with different connectionConfig
+    rerender(<App config={connectionConfig} />);
+
+    expect(selector('.commitment')?.textContent).toBe('processed');
+    expect(mockCreateConnectionInstance).toBeCalledTimes(2);
+  });
+
   it('available show account address', async () => {
     const { useWallet } = await import('@solana/wallet-adapter-react');
     const connectRunned = vi.fn();

packages/solana/src/solana-provider/index.tsx

@@ -31,7 +31,7 @@ export interface SolanaWeb3ConfigProviderProps {
   //#endregion
 
   //#region Solana WalletProvider specific
-  autoConnect?: boolean;
+  autoConnect?: WalletProviderProps['autoConnect'];
   walletProviderProps?: Omit<WalletProviderProps, 'wallets' | 'autoConnect' | 'children'>;
   //#endregion
 
@@ -88,8 +88,15 @@ export const SolanaWeb3ConfigProvider: FC<PropsWithChildren<SolanaWeb3ConfigProv
     [currentChain, endpoint, walletConnect, walletConnectProviderGetter, walletFactories],
   );
 
+  const connectionProviderProps = useMemo(() => {
+    return {
+      endpoint,
+      config: connectionConfig ?? { commitment: 'confirmed' },
+    } as ConnectionProviderProps;
+  }, [endpoint, connectionConfig]);
+
   return (
-    <ConnectionProvider endpoint={endpoint} config={connectionConfig}>
+    <ConnectionProvider {...connectionProviderProps}>
       <WalletProvider
         wallets={walletAdapters}
         autoConnect={autoConnect}