fix: show default avatar when not find chain icon in ConnectButton pr…

…ofle modal (#1088)

Co-authored-by: tingzhao.ytz <[email protected]>

.changeset/red-hornets-cross.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+fix: show default avatar when not find chain icon in ConnectButton profle modal

packages/web3/src/connect-button/__tests__/profile-modal.test.tsx

@@ -76,6 +76,28 @@ describe('ProfileModal', () => {
     });
   });
 
+  it('show default avatar', async () => {
+    const App = () => (
+      <ConnectButton
+        account={{
+          address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B',
+        }}
+      />
+    );
+    const { baseElement } = render(<App />);
+    expect(baseElement.querySelector('.ant-web3-connect-button')).not.toBeNull();
+
+    fireEvent.click(baseElement.querySelector('.ant-web3-connect-button')!);
+
+    await vi.waitFor(() => {
+      expect(
+        baseElement.querySelector(
+          '.ant-web3-connect-button-chain-icon.ant-web3-connect-button-default-icon',
+        ),
+      ).not.toBeNull();
+    });
+  });
+
   it('show chain icon as the default avatar', async () => {
     const App = () => (
       <ConnectButton

packages/web3/src/connect-button/connect-button.tsx

@@ -96,6 +96,7 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
     },
   };
 
+  const chainIcon = account?.avatar ?? chain?.icon;
   const profileModalProps: ProfileModalProps = {
     intl,
     open: profileOpen,
@@ -110,8 +111,11 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
     address: account?.address,
     name: account?.name,
     avatar: {
-      className: `${prefixCls}-chain-icon`,
-      src: account?.avatar ?? chain?.icon ?? <UserOutlined />,
+      className: chainIcon
+        ? `${prefixCls}-chain-icon`
+        : `${prefixCls}-chain-icon ${prefixCls}-default-icon`,
+      src: chainIcon,
+      icon: !chainIcon && <UserOutlined />,
       ...avatar,
     },
     balance,