feat: add custom button (#1506)

* feat: add custom button

* chore: add changeset

Author: LCJove

.changeset/cool-ghosts-notice.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': minor
+---
+
+feat: add custom connect button

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

@@ -47,6 +47,7 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
     addressPrefix: addressPrefixProp,
     sign,
     signBtnTextRender,
+    children,
     ...restProps
   } = props;
   const intl = useIntl('ConnectButton', locale);
@@ -60,7 +61,7 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
 
   const { coverAddress = true } = typeof balance !== 'object' ? { coverAddress: true } : balance;
   const needSign = !!(sign?.signIn && account?.status === ConnectStatus.Connected && account);
-  let buttonText: React.ReactNode = intl.getMessage(intl.messages.connect);
+  let buttonText: React.ReactNode = children || intl.getMessage(intl.messages.connect);
   if (account) {
     buttonText = (
       <>

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

@@ -0,0 +1,28 @@
+import { ArrowRightOutlined } from '@ant-design/icons';
+import { ConnectButton } from '@ant-design/web3';
+import { EthereumCircleColorful } from '@ant-design/web3-icons';
+import { Flex, Space } from 'antd';
+
+const App: React.FC = () => {
+  return (
+    <ConnectButton
+      style={{
+        height: 60,
+        borderRadius: 12,
+      }}
+    >
+      <Flex justify="space-between">
+        <Space size={8}>
+          <EthereumCircleColorful />
+          <Flex vertical gap={4} align="start" style={{ width: 200 }}>
+            <div>Ethereum</div>
+            <div style={{ opacity: 0.25 }}>Connect to this network</div>
+          </Flex>
+        </Space>
+        <ArrowRightOutlined style={{ opacity: 0.25 }} />
+      </Flex>
+    </ConnectButton>
+  );
+};
+
+export default App;

packages/web3/src/connect-button/index.md

@@ -57,6 +57,10 @@ After configuring the `quickConnect` property, the installed wallets and univers
 
 <code src="./demos/balance.tsx"></code>
 
+## Custom Button
+
+<code src="./demos/customButton.tsx"></code>
+
 ## API
 
 | Property | Description | Type | Default | Version |

packages/web3/src/connect-button/index.zh-CN.md

@@ -58,6 +58,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*S4cyQ7OCxDUAAA
 
 <code src="./demos/balance.tsx"></code>
 
+## 自定义按钮内容
+
+<code src="./demos/customButton.tsx"></code>
+
 ## API
 
 | 属性 | 描述 | 类型 | 默认值 | 版本 |