fix: Remove antd/lib import from @ant-design/web3 for better esm supp…

…ort (#522)

* chore: release 1.4.1

* fix: Remove antt/lib import for better support esm

* chore: add changelog

.changeset/great-ties-watch.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+fix: Remove antd/lib import from @ant-design/web3 for better esm support

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ConfigContext } from 'antd/lib/config-provider';
+import { ConfigProvider } from 'antd';
 import classNames from 'classnames';
 
 import useIntl from '../../hooks/useIntl';
@@ -20,7 +20,7 @@ const ModalPanel: React.FC<ModalPanelProps> = (props) => {
   const [panelRoute, setPanelRoute] = React.useState<PanelRoute>('init');
   const routeStack = React.useRef<PanelRoute[]>(['init']);
   const [selectedWallet, setSelectedWallet] = React.useState<Wallet>();
-  const { getPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('web3-connect-modal');
   const { wrapSSR, hashId } = useStyle(prefixCls);
 

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Modal } from 'antd';
-import { ConfigContext } from 'antd/lib/config-provider';
+import { ConfigProvider, Modal } from 'antd';
 import classNames from 'classnames';
 
 import ModalPanel from './components/ModalPanel';
@@ -15,7 +14,7 @@ export const ConnectModal: React.FC<ConnectModalProps> & {
 } = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-vars
   const { title, footer, open, className, mode, rootClassName, onCancel, ...restProps } = props;
-  const { getPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
 
   const { isSimple } = useMode(mode);
 

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

@@ -1,6 +1,5 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import { mergeToken } from 'antd/lib/theme/internal';
 
 import {
   useStyle as useAntdStyle,
@@ -428,7 +427,8 @@ const genModalStyle: GenerateStyle<ConnectModalToken> = (token) => {
 export function useStyle(prefixCls: string): UseStyleResult {
   return useAntdStyle('ConnectModal', (token) => {
     const isDark = isDarkTheme(token);
-    const connectModalToken: ConnectModalToken = mergeToken<ConnectModalToken>(token, {
+    const connectModalToken: ConnectModalToken = {
+      ...token,
       selectedBg: isDark ? token.colorWhite : token.colorPrimary,
       selectedColor: token.colorBgContainer,
       hoverBg: new TinyColor(isDark ? token.colorWhite : token.colorPrimary)
@@ -446,7 +446,7 @@ export function useStyle(prefixCls: string): UseStyleResult {
       cardBg: new TinyColor(token.colorText).setAlpha(0.1).toRgbString(),
       iconSize: token.sizeXL,
       web3ComponentsCls: `.${prefixCls}`,
-    });
+    };
     return [genModalStyle(connectModalToken)];
   });
 }

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

@@ -4,7 +4,7 @@ import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import { ConfigProvider as AntdConfigProvider, theme as AntTheme } from 'antd';
-import type { GlobalToken } from 'antd/lib/theme/interface';
+import type { GlobalToken } from 'antd';
 
 const { useToken } = AntTheme;