feat: update button styles

Author: gin-lsl

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

@@ -164,10 +164,6 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
     );
   }
 
-  const unsigned = needSign && !signed;
-
-  console.log('unsigned:', unsigned, account?.status);
-
   const buttonInnerText = (
     <div className={`${prefixCls}-content`}>
       <div className={`${prefixCls}-content-inner`}>
@@ -185,8 +181,6 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
     </div>
   );
 
-  console.log('signIn:', typeof sign?.signIn, account?.status);
-
   const buttonContent = (
     <ConnectButtonInner
       intl={intl}
@@ -207,7 +201,6 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
           return;
         }
 
-        console.log('onSignInClick:', account, needSign, signed);
         if (signed) {
           return;
         }
@@ -219,14 +212,12 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
 
         // If account is not connected, we need to sign in
         // If account is connected but not signed, we also need to sign in
-        console.log('signIn:', account?.address, needSign);
         if (account?.status === ConnectStatus.Connected && signed) {
           return;
         }
 
         // If account is not connected, we need to sign in
         // If account is connected but not signed, we also need to sign in
-        console.log('signIn:', account?.address, needSign);
         if (account && needSign) {
           sign
             .signIn?.(account.address!)

packages/web3/src/connect-button/style/index.ts

@@ -22,6 +22,9 @@ const genConnectButtonStyle: GenerateStyle<ConnectButtonToken> = (token) => {
         alignItems: 'center',
         flexDirection: 'row',
       },
+      [`${token.antCls}-badge`]: {
+        marginRight: token.marginXS,
+      },
       [`${token.componentCls}-text`]: {
         [`${token.antCls}-typography`]: {
           color: 'unset',

packages/web3/src/theme/useStyle/index.ts

@@ -6,7 +6,7 @@ import { TinyColor } from '@ctrl/tinycolor';
 import { ConfigProvider as AntdConfigProvider, theme as AntTheme } from 'antd';
 import type { GlobalToken } from 'antd';
 
-import { ComponentToken as ConnectModalComponentToken } from '../../connect-modal/style';
+import type { ComponentToken as ConnectModalComponentToken } from '../../connect-modal/style';
 
 const { useToken } = AntTheme;
 
@@ -50,13 +50,13 @@ export type Web3AliasToken = GlobalToken & {
    */
   web3ComponentsCls: string;
   /**
-   * antd 的 className
+   * className for antd components
    * @type {string}
    * @example .ant
    */
   antCls: string;
   /**
-   * 自定义 ConnectModal 的 token
+   * custom `ConnectModal` token
    * @type {Partial<ConnectModalComponentToken>}
    * @example { hoverBg: 'red' }
    */
@@ -65,8 +65,8 @@ export type Web3AliasToken = GlobalToken & {
 
 /**
  * useStyle for css in js
- * @param componentName {string} 组件的名字
- * @param styleFn {GenerateStyle} 生成样式的函数
+ * @param componentName {string} component name
+ * @param styleFn {GenerateStyle} generate style function
  * @returns UseStyleResult
  */
 export function useStyle(