add snap icon at WalletList

Author: gin-lsl

packages/web3/src/connect-modal/components/WalletList.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useContext, useImperativeHandle, useMemo } from 'react';
 import { QrcodeOutlined } from '@ant-design/icons';
+import { MetaMaskColorful } from '@ant-design/web3-icons';
 import { Button, List, Space, Typography } from 'antd';
 import classNames from 'classnames';
 
@@ -91,7 +92,12 @@ const WalletList = forwardRef<ConnectModalActionType, WalletListProps>((props, r
               {typeof item.icon === 'string' || item.icon === undefined ? (
                 <img className={`${prefixCls}-img`} src={item.icon} alt={item.name} />
               ) : (
-                <div className={`${prefixCls}-icon`}>{item.icon}</div>
+                <div className={`${prefixCls}-icon`}>
+                  {item.icon}
+                  {(item as any).isMetaMaskSnap && (
+                    <MetaMaskColorful className={`${prefixCls}-icon-metamask-snap`} />
+                  )}
+                </div>
               )}
               <Typography.Text ellipsis={{ tooltip: true }} className={`${prefixCls}-name`}>
                 {item.name}

packages/web3/src/connect-modal/style/index.tsx

@@ -129,13 +129,20 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
                       width: '100%',
                       overflow: 'hidden',
                       [`${componentCls}-icon`]: {
+                        position: 'relative',
                         borderRadius: 8,
                         overflow: 'hidden',
                         width: token.iconSize,
                         height: token.iconSize,
                         fontSize: token.iconSize,
                         lineHeight: `${token.iconSize}px`,
                         flexShrink: 0,
+                        [`${componentCls}-icon-metamask-snap`]: {
+                          position: 'absolute',
+                          right: 2,
+                          bottom: 2,
+                          fontSize: 12,
+                        },
                       },
                       [`${componentCls}-img`]: {
                         borderRadius: 8,

packages/web3/src/solana/demos/more-wallets.tsx

@@ -1,16 +1,16 @@
 import { ConnectButton, Connector } from '@ant-design/web3';
 import {
   CoinbaseWallet,
-  MetamaskSnapWallet,
   PhantomWallet,
   SolanaWeb3ConfigProvider,
+  SolflareMetaMaskSnapWallet,
 } from '@ant-design/web3-solana';
 
 const App: React.FC = () => {
   return (
     <SolanaWeb3ConfigProvider
       autoConnect
-      wallets={[CoinbaseWallet(), PhantomWallet(), MetamaskSnapWallet()]}
+      wallets={[CoinbaseWallet(), PhantomWallet(), SolflareMetaMaskSnapWallet()]}
     >
       <Connector>
         <ConnectButton />