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

.changeset/shaggy-jokes-fold.md

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

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

@@ -1,4 +1,3 @@
-import { type FC } from 'react';
 import { useProvider } from '@ant-design/web3';
 import type { ConnectionContextState } from '@solana/wallet-adapter-react';
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -43,10 +42,10 @@ describe('SolanaWeb3ConfigProvider balance', () => {
 
     const publicKey = new PublicKey(mockedData.address.value);
 
-    const ConnectionProvider: FC<React.PropsWithChildren<{ endpoint: string }>> = ({
+    const ConnectionProvider: React.FC<React.PropsWithChildren<{ endpoint: string }>> = ({
       children,
     }) => <div>{children}</div>;
-    const WalletProvider: FC<React.PropsWithChildren> = ({ children }) => <>{children}</>;
+    const WalletProvider: React.FC<React.PropsWithChildren> = ({ children }) => <>{children}</>;
 
     return {
       ...originModules,
@@ -75,13 +74,13 @@ describe('SolanaWeb3ConfigProvider balance', () => {
   });
 
   it('availabel show balance', async () => {
-    const BalanceDisplay: FC = () => {
+    const BalanceDisplay: React.FC = () => {
       const { balance } = useProvider();
 
       return <div className="shown-balance">{balance?.value?.toString()}</div>;
     };
 
-    const App: FC = () => (
+    const App: React.FC = () => (
       <SolanaWeb3ConfigProvider balance>
         <div className="content">test</div>
         <BalanceDisplay />

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

@@ -1,4 +1,4 @@
-import { useState, type FC, type PropsWithChildren } from 'react';
+import { useEffect, useState } 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);
@@ -138,7 +153,7 @@ describe('SolanaWeb3ConfigProvider', () => {
   });
 
   it('available custom trigger', () => {
-    const CustomButton: FC<PropsWithChildren<ConnectorTriggerProps>> = (props) => {
+    const CustomButton: React.FC<React.PropsWithChildren<ConnectorTriggerProps>> = (props) => {
       const { chain, onSwitchChain } = props;
 
       return (
@@ -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();
@@ -244,7 +287,7 @@ describe('SolanaWeb3ConfigProvider', () => {
   });
 
   it('available disconnect', () => {
-    const CustomConnector: FC = () => {
+    const CustomConnector: React.FC = () => {
       const { disconnect } = useProvider();
       return (
         <div>
@@ -253,7 +296,7 @@ describe('SolanaWeb3ConfigProvider', () => {
       );
     };
 
-    const App: FC = () => {
+    const App: React.FC = () => {
       return (
         <SolanaWeb3ConfigProvider>
           <CustomConnector />

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

@@ -1,4 +1,3 @@
-import type { FC, PropsWithChildren } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -64,8 +63,8 @@ describe('SolanaWeb3ConfigProvider rpcProvider', () => {
     vi.resetAllMocks();
 
     vi.mock('../config-provider.tsx', () => {
-      const AntDesignWeb3ConfigProvider: FC<
-        PropsWithChildren<{ onCurrentChainChange: () => void }>
+      const AntDesignWeb3ConfigProvider: React.FC<
+        React.PropsWithChildren<{ onCurrentChainChange: () => void }>
       > = ({ children, onCurrentChainChange }) => {
         return (
           <div>

packages/solana/src/solana-provider/__tests__/utils.tsx

@@ -1,12 +1,11 @@
-import type { FC } from 'react';
 import { render } from '@testing-library/react';
 
 type RenderResult = ReturnType<typeof render>;
 type RenderWithUtils = RenderResult & {
   selector: <T extends Element = Element>(selector: string) => T | null;
   selectors: <T extends Element = Element>(selector: string) => NodeListOf<T>;
 };
-type XRender = (Comp: FC, options?: Parameters<typeof render>[1]) => RenderWithUtils;
+type XRender = (Comp: React.FC, options?: Parameters<typeof render>[1]) => RenderWithUtils;
 
 export const xrender: XRender = (Comp, options) => {
   const { baseElement, ...others } = render(<Comp />, options);

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}