{mergedTitle}
-
{footer && {footer}
}
+
+
+ {typeof item.icon === 'string' || item.icon === undefined ? (
+ 
+ ) : (
+ item.icon
+ )}
+
+ {item.name}
+
- {groupKeys.map((group) => (
- setOpen(false)}
/>
diff --git a/packages/web3/src/connect-modal/demos/customGuide.tsx b/packages/web3/src/connect-modal/demos/customGuide.tsx
index 2b35fc92b..cb7c922e5 100644
--- a/packages/web3/src/connect-modal/demos/customGuide.tsx
+++ b/packages/web3/src/connect-modal/demos/customGuide.tsx
@@ -90,7 +90,9 @@ const App: React.FC = () => {
setOpen(false)}
guide={guide}
diff --git a/packages/web3/src/connect-modal/demos/panel.tsx b/packages/web3/src/connect-modal/demos/panel.tsx
index e84a77a84..427aea8f2 100644
--- a/packages/web3/src/connect-modal/demos/panel.tsx
+++ b/packages/web3/src/connect-modal/demos/panel.tsx
@@ -61,7 +61,12 @@ const App: React.FC = () => {
padding: 0,
}}
>
- setOpen(false)}
mode="simple"
diff --git a/packages/web3/src/connect-modal/demos/ungroupedBasic.tsx b/packages/web3/src/connect-modal/demos/ungroupedBasic.tsx
new file mode 100644
index 000000000..59c6c1660
--- /dev/null
+++ b/packages/web3/src/connect-modal/demos/ungroupedBasic.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { ConnectModal } from '@ant-design/web3';
+import { metadata_MetaMask, metadata_WalletConnect } from '@ant-design/web3-assets';
+import { Button } from 'antd';
+import { useIntl } from 'dumi';
+
+import type { Wallet } from '../interface';
+
+const walletList: Wallet[] = [
+ metadata_MetaMask,
+ {
+ ...metadata_WalletConnect,
+ getQrCode: () => {
+ return new Promise<{
+ uri: string;
+ }>((resolve) =>
+ setTimeout(
+ () =>
+ resolve({
+ uri: `https://ant.design/docs/react/migrate-less-variables-cn#avatar-%E5%A4%B4%E5%83%8F?timestamp=${Date.now()}&random=${Math.random()}`,
+ }),
+ 2000,
+ ),
+ );
+ },
+ },
+ {
+ icon: 'https://xsgames.co/randomusers/avatar.php?g=pixel&key=3',
+ name: 'Test Wallet3',
+ remark: 'remark 3',
+ app: {
+ link: 'https://test.com/xxx',
+ },
+ getQrCode: () => {
+ return new Promise<{
+ uri: string;
+ }>((resolve) =>
+ setTimeout(
+ () =>
+ resolve({
+ uri: `https://ant.design/docs/react/migrate-less-variables-cn#avatar-%E5%A4%B4%E5%83%8F?timestamp=${Date.now()}&random=${Math.random()}`,
+ }),
+ 2000,
+ ),
+ );
+ },
+ },
+];
+
+const App: React.FC = () => {
+ const [open, setOpen] = React.useState(false);
+ const { locale } = useIntl();
+ return (
+ <>
+
+ setOpen(false)}
+ group={false}
+ />
+
+ );
+};
+
+export default App;
diff --git a/packages/web3/src/connect-modal/index.md b/packages/web3/src/connect-modal/index.md
index bcea748b5..1a68d0c11 100644
--- a/packages/web3/src/connect-modal/index.md
+++ b/packages/web3/src/connect-modal/index.md
@@ -14,6 +14,10 @@ The connection wallet popup, used with [ConnectButton](../connect-button/index.m
& {
const prefixCls = getPrefixCls('web3-connect-modal');
const { wrapSSR, hashId } = useStyle(prefixCls);
+ // Warning for deprecated usage
+ const warning = devUseWarning('ConnectModal');
+ warning.deprecated(!('groupOrder' in restProps), 'groupOrder', 'group={{groupOrder: ()=> {}}}');
+
return wrapSSR(
+## 钱包不进行分组
+
+
-
- ))}
+ )}
);
};
diff --git a/packages/web3/src/connect-modal/demos/basic.tsx b/packages/web3/src/connect-modal/demos/basic.tsx
index 22a1baadd..ed8f0fb94 100644
--- a/packages/web3/src/connect-modal/demos/basic.tsx
+++ b/packages/web3/src/connect-modal/demos/basic.tsx
@@ -63,7 +63,9 @@ const App: React.FC = () => {
{group}
+ {internalGroup ? (
+ groupKeys.map((group) => (
+
+
+ ))
+ ) : (
+ {group}
+
+
+
-
- itemLayout="horizontal"
- dataSource={dataSource[group]}
- rowKey="key"
- renderItem={(item) => (
- {
- const hasWalletReady = await item.hasWalletReady?.();
- if (hasWalletReady) {
- // wallet is ready, call ConnectModal's onWalletSelected
- const hasExtensionInstalled = await item?.hasExtensionInstalled?.();
- updateSelectedWallet(item, true);
- if (item.getQrCode && !hasExtensionInstalled) {
- // Extension not installed and can use qr code to connect
- updatePanelRoute('qrCode', true);
- }
- return;
- }
-
- // wallet not ready
- // go to wallet page
- updateSelectedWallet(item);
- updatePanelRoute('wallet', true);
- }}
- >
-
- )}
- />
+
-
-
- {typeof item.icon === 'string' || item.icon === undefined ? (
-
- ) : (
- item.icon
- )}
-
- {item.name}
-