Skip to content

Commit

Permalink
fix: Address style in ConnecButton ProfileModal (#1173)
Browse files Browse the repository at this point in the history
* fix: Address style in ConnecButton ProfileModal

* chore: remove useless var

* test: udpate and fix test case

* fix: remove useless color

---------

Co-authored-by: tingzhao.ytz <[email protected]>
  • Loading branch information
yutingzhao1991 and tingzhao.ytz authored Sep 23, 2024
1 parent fe0dd02 commit 4c137b0
Show file tree
Hide file tree
Showing 13 changed files with 206 additions and 71 deletions.
5 changes: 5 additions & 0 deletions .changeset/long-walls-kneel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@ant-design/web3': patch
---

fix: Address style in ConnecButton ProfileModal
Original file line number Diff line number Diff line change
@@ -1,19 +1,11 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Address > display address with default format 1`] = `
<div
class="ant-space css-dev-only-do-not-override-1c0na6j ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small ant-web3-address css-dev-only-do-not-override-1c0na6j"
<span
class="ant-typography ant-web3-address css-dev-only-do-not-override-1c0na6j css-dev-only-do-not-override-1c0na6j"
>
<div
class="ant-space-item"
>
<span
class="ant-typography css-dev-only-do-not-override-1c0na6j"
>
<span>
0x 21CD f097 4d53 a6e9 6eF0 5d7B 324a 9803 735f Fd3B
</span>
</span>
</div>
</div>
<span>
0x 21CD f097 4d53 a6e9 6eF0 5d7B 324a 9803 735f Fd3B
</span>
</span>
`;
6 changes: 3 additions & 3 deletions packages/web3/src/address/__tests__/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ describe('Address', () => {
);

expect(baseElement.querySelector('.ant-web3-address')?.textContent).toBe('0x21CD...Fd3B');
fireEvent.mouseEnter(baseElement.querySelector('.ant-web3-address .ant-typography span')!);
fireEvent.mouseEnter(baseElement.querySelector('.ant-web3-address.ant-typography span')!);
await vi.waitFor(() => {
expect(baseElement.querySelector('.ant-tooltip-inner')?.textContent).toBe(
'0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B',
Expand Down Expand Up @@ -108,7 +108,7 @@ describe('Address', () => {
const { baseElement } = render(
<Address tooltip={false} address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B" />,
);
fireEvent.mouseEnter(baseElement.querySelector('.ant-web3-address .ant-typography span')!);
fireEvent.mouseEnter(baseElement.querySelector('.ant-web3-address.ant-typography span')!);
await vi.waitFor(() => {
expect(baseElement.querySelector('.ant-tooltip-inner')).toBeNull();
});
Expand All @@ -131,7 +131,7 @@ describe('Address', () => {
tooltip={<span>hello</span>}
/>,
);
fireEvent.mouseEnter(baseElement.querySelector('.ant-web3-address .ant-typography span')!);
fireEvent.mouseEnter(baseElement.querySelector('.ant-web3-address.ant-typography span')!);
await vi.waitFor(() => {
expect(baseElement.querySelector('.ant-tooltip-inner')?.textContent).toBe('hello');
});
Expand Down
2 changes: 2 additions & 0 deletions packages/web3/src/address/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,5 @@ coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*ymJDSYEjQKwAAA
| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
| locale | Multilingual settings | `Locale["address"]` | - | - |

More properties are inherited from [Typography.Text](https://ant.design/components/typography#typographytext).
45 changes: 24 additions & 21 deletions packages/web3/src/address/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import type { ReactNode } from 'react';
import React, { isValidElement, useContext, useMemo } from 'react';
import { type Locale } from '@ant-design/web3-common';
import type { TooltipProps } from 'antd';
import { ConfigProvider, Space, Tooltip, Typography } from 'antd';
import { ConfigProvider, Tooltip, Typography } from 'antd';
import type { TextProps } from 'antd/lib/typography/Text';
import classNames from 'classnames';

import { useProvider } from '../hooks';
Expand All @@ -13,7 +14,7 @@ import { useStyle } from './style';
/**
* Props for the Address component.
*/
export interface AddressProps {
export interface AddressProps extends Omit<TextProps, 'ellipsis'> {
/**
* Address ellipsis configuration.
* If true, the address will be clipped with default head and tail values.
Expand Down Expand Up @@ -66,6 +67,8 @@ export const Address: React.FC<React.PropsWithChildren<AddressProps>> = (props)
format = false,
children,
locale,
className,
...restProps
} = props;
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const { addressPrefix: addressPrefixContext } = useProvider();
Expand Down Expand Up @@ -111,24 +114,24 @@ export const Address: React.FC<React.PropsWithChildren<AddressProps>> = (props)
const formattedAddress = mergedFormat(filledAddress);

return wrapSSR(
<Space className={classNames(prefixCls, hashId)}>
<Typography.Text
copyable={
copyable
? {
text: filledAddress,
tooltips: [messages.copyTips, messages.copiedTips],
}
: false
}
>
<Tooltip title={mergedTooltip()}>
{children ??
(isEllipsis
? `${filledAddress.slice(0, headClip)}...${filledAddress.slice(-tailClip)}`
: formattedAddress)}
</Tooltip>
</Typography.Text>
</Space>,
<Typography.Text
copyable={
copyable
? {
text: filledAddress,
tooltips: [messages.copyTips, messages.copiedTips],
}
: false
}
className={classNames(prefixCls, hashId, className)}
{...restProps}
>
<Tooltip title={mergedTooltip()}>
{children ??
(isEllipsis
? `${filledAddress.slice(0, headClip)}...${filledAddress.slice(-tailClip)}`
: formattedAddress)}
</Tooltip>
</Typography.Text>,
);
};
2 changes: 2 additions & 0 deletions packages/web3/src/address/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,5 @@ coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*ymJDSYEjQKwAAA
| tooltip | 鼠标移入地址时展示提示 | `boolean \|` [Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
| format | 地址格式化 | `boolean \| (input: string) => ReactNode` | `false` | - |
| locale | 多语言设置 | `Locale["address"]` | - | - |

更多属性继承自[Typography.Text](https://ant.design/components/typography-cn#typographytext)
Original file line number Diff line number Diff line change
Expand Up @@ -91,21 +91,143 @@ exports[`ProfileModal > match snapshot 1`] = `
<div
class="ant-space-item"
>
<div
class="ant-space css-dev-only-do-not-override-1c0na6j ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small ant-web3-address css-dev-only-do-not-override-1c0na6j"
<span
class="ant-typography ant-typography-secondary ant-web3-address css-dev-only-do-not-override-1c0na6j css-dev-only-do-not-override-1c0na6j"
>
<div
class="ant-space-item"
>
<span
class="ant-typography css-dev-only-do-not-override-1c0na6j"
>
<span>
0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B
</span>
</span>
</div>
</div>
<span>
0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B
</span>
</span>
</div>
</div>
</div>
<div
class="ant-modal-footer"
>
<div
class="ant-web3-connect-button-profile-modal-footer hashId"
>
<button
class="ant-btn css-dev-only-do-not-override-1c0na6j ant-btn-default"
type="button"
>
<span>
Copy Address
</span>
</button>
<button
class="ant-btn css-dev-only-do-not-override-1c0na6j ant-btn-default"
type="button"
>
<span>
Disconnect
</span>
</button>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
</div>
</div>
</div>
</div>
</body>
`;

exports[`ProfileModal > match snapshot without name 1`] = `
<body>
<div />
<div>
<div
class="ant-modal-root css-dev-only-do-not-override-1c0na6j"
>
<div
class="ant-modal-mask ant-fade-appear ant-fade-appear-start ant-fade"
/>
<div
class="ant-modal-wrap"
tabindex="-1"
>
<div
aria-modal="true"
class="ant-modal css-dev-only-do-not-override-1c0na6j hashId ant-web3-connect-button-profile-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
>
<div
class="ant-modal-content"
>
<button
aria-label="Close"
class="ant-modal-close"
type="button"
>
<span
class="ant-modal-close-x"
>
<span
aria-label="close"
class="anticon anticon-close ant-modal-close-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</span>
</button>
<div
class="ant-modal-body"
style="text-align: center;"
>
<div
class="ant-space css-dev-only-do-not-override-1c0na6j ant-space-vertical ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-1c0na6j"
>
<img
src="https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*9jfLS41kn00AAAAAAAAAAAAADlrGAQ/original"
/>
</span>
</div>
<div
class="ant-space-item"
>
<span
class="ant-typography ant-web3-address css-dev-only-do-not-override-1c0na6j css-dev-only-do-not-override-1c0na6j"
>
<span>
0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B
</span>
</span>
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,13 @@ exports[`ConnectButton > should display formatted by custom formatter when pass
<div
class="ant-web3-connect-button-text"
>
<div
class="ant-space css-dev-only-do-not-override-1c0na6j ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small ant-web3-address css-dev-only-do-not-override-1c0na6j"
<span
class="ant-typography ant-web3-address css-dev-only-do-not-override-1c0na6j css-dev-only-do-not-override-1c0na6j"
>
<div
class="ant-space-item"
>
<span
class="ant-typography css-dev-only-do-not-override-1c0na6j"
>
<span>
0x3ea2...7c18
</span>
</span>
</div>
</div>
<span>
0x3ea2...7c18
</span>
</span>
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ describe('ConnectButton connect', async () => {
fireEvent.click(baseElement.querySelector('.custom-btn')!);
await vi.waitFor(() => {
expect(onClickCallFn).toBeCalled();
expect(baseElement.querySelector('.ant-web3-address .ant-typography span')?.textContent).toBe(
expect(baseElement.querySelector('.ant-web3-address.ant-typography span')?.textContent).toBe(
'0x1234...7890',
);
});
Expand Down
19 changes: 19 additions & 0 deletions packages/web3/src/connect-button/__tests__/profile-modal.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,25 @@ describe('ProfileModal', () => {
expect(baseElement).toMatchSnapshot();
});

it('match snapshot without name', () => {
const App = () => {
const intl = useIntl('ConnectButton');
return (
<ProfileModal
intl={intl}
open
__hashId__="hashId"
address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
avatar={{
src: 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*9jfLS41kn00AAAAAAAAAAAAADlrGAQ/original',
}}
/>
);
};
const { baseElement } = render(<App />);
expect(baseElement).toMatchSnapshot();
});

it('open profile modal in ConnectButton', async () => {
const App = () => (
<ConnectButton
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ describe('ConnectButton', () => {
);
};
const { baseElement, rerender } = render(<App />);
const btn = baseElement.querySelector('.ant-web3-address .ant-typography span')!;
const btn = baseElement.querySelector('.ant-web3-address.ant-typography span')!;
fireEvent.mouseEnter(btn);
rerender(<App />);
// When the tooltip's title is string, baseElement.outerHTML does not contain '.ant-tooltip'.
Expand Down
1 change: 1 addition & 0 deletions packages/web3/src/connect-button/profile-modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ export const ProfileModal: React.FC<ProfileModalProps> = ({
<Address
ellipsis={false}
address={address}
type={name ? 'secondary' : undefined}
tooltip={false}
addressPrefix={addressPrefix}
>
Expand Down
3 changes: 0 additions & 3 deletions packages/web3/src/connect-button/style/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,6 @@ const genConnectButtonStyle: GenerateStyle<ConnectButtonToken> = (token) => {
[`${token.componentCls}-default-icon`]: {
fontSize: token.sizeLG,
},
[`${token.antCls}-web3-address`]: {
color: token.colorTextTertiary,
},
},

[`${token.componentCls}-tooltip`]: {
Expand Down

0 comments on commit 4c137b0

Please sign in to comment.