Skip to content

Commit

Permalink
feat: optimize code
Browse files Browse the repository at this point in the history
  • Loading branch information
@kiner-tang
kiner-tang committed Nov 25, 2023
1 parent 72cf7e5 commit 12f28c3
Show file tree
Hide file tree
Showing 3 changed files with 262 additions and 15 deletions.
245 changes: 245 additions & 0 deletions packages/web3/src/connect-button/__tests__/__snapshots__/menu.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,245 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`ConnectButton > Should show menu when hover button 1`] = `
<body>
<div>
<button
class="ant-btn css-dev-only-do-not-override-1ck3jst ant-btn-default ant-dropdown-trigger css-dev-only-do-not-override-1ck3jst ant-web3-connect-button ant-dropdown-open"
type="button"
>
<div
class="ant-web3-connect-button-text css-dev-only-do-not-override-1ck3jst"
>
Connect Wallet
</div>
</button>
</div>
<div>
<div
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-dev-only-do-not-override-1ck3jst ant-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-dev-only-do-not-override-1ck3jst"
data-menu-list="true"
role="menu"
tabindex="0"
>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-1"
role="menuitem"
tabindex="-1"
>
<span
class="ant-dropdown-menu-title-content"
>
Menu Item 1
</span>
</li>
<li
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-2"
role="menuitem"
tabindex="-1"
>
<span
class="ant-dropdown-menu-title-content"
>
Menu Item 2
</span>
</li>
<li
class="ant-dropdown-menu-item"
data-menu-id="rc-menu-uuid-test-copyAddress"
role="menuitem"
tabindex="-1"
>
<span
aria-label="copy"
class="anticon anticon-copy ant-dropdown-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="copy"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
/>
</svg>
</span>
<span
class="ant-dropdown-menu-title-content"
>
Copy Address
</span>
</li>
<li
class="ant-dropdown-menu-item"
data-menu-id="rc-menu-uuid-test-disconnect"
role="menuitem"
tabindex="-1"
>
<span
aria-label="logout"
class="anticon anticon-logout ant-dropdown-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="logout"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5a353.84 353.84 0 01-112.7 75.9A352.8 352.8 0 01512.4 866c-47.9 0-94.3-9.4-137.9-27.8a353.84 353.84 0 01-112.7-75.9 353.28 353.28 0 01-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-.4-12.3-6.7-12.3zm88.9-226.3L815 393.7c-5.3-4.2-13-.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 000-12.6z"
/>
</svg>
</span>
<span
class="ant-dropdown-menu-title-content"
>
Disconnect
</span>
</li>
</ul>
<div
aria-hidden="true"
style="display: none;"
/>
</div>
</div>
</body>
`;

exports[`ConnectButton > Should show profile modal when click button 1`] = `
<body>
<div>
<button
class="ant-btn css-dev-only-do-not-override-1ck3jst ant-btn-default css-dev-only-do-not-override-1ck3jst ant-web3-connect-button"
type="button"
>
<div
class="ant-web3-connect-button-text css-dev-only-do-not-override-1ck3jst"
/>
</button>
</div>
<div>
<div
class="ant-modal-root css-dev-only-do-not-override-1ck3jst"
>
<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-1ck3jst css-dev-only-do-not-override-1ck3jst ant-web3-connect-button-profile-modal ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
style="width: 280px; transform-origin: 0px 0px;"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<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"
>
<div
class="ant-space css-dev-only-do-not-override-1ck3jst 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 css-dev-only-do-not-override-1ck3jst"
>
<span
class="ant-avatar-string"
style="transform: scale(1) translateX(-50%);"
/>
</span>
</div>
<div
class="ant-space-item"
>
<div
class="ant-space css-dev-only-do-not-override-1ck3jst ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
<button
class="ant-btn css-dev-only-do-not-override-1ck3jst ant-btn-default"
type="button"
>
<span>
Disconnect
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-modal-footer"
/>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
</div>
</div>
</div>
</div>
</body>
`;
8 changes: 5 additions & 3 deletions packages/web3/src/connect-button/__tests__/menu.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,16 +64,18 @@ describe('ConnectButton', () => {
});
});
it('Should show profile modal when click button', async () => {
const App = () => <ConnectButton menuItems={menuItems} clickActionType="showProfileModal" />;
const App = () => (
<ConnectButton menuItems={menuItems} clickActionType="showProfileModal" connected />
);
const { baseElement } = render(<App />);

fireEvent.click(baseElement.querySelector('.ant-web3-connect-button') as Element);
fireEvent.click(baseElement.querySelector('.ant-web3-connect-button-text') as Element);
await vi.waitFor(() => {
expect(baseElement.querySelector('.ant-web3-connect-button-profile-modal')).not.toBeNull();
expect(baseElement).toMatchSnapshot();
});
});
it.only('Should call action when click menu item with build-in action key', async () => {
it('Should call action when click menu item with build-in action key', async () => {
const onDisconnectClick = vi.fn();
const App = () => (
<ConnectButton
Expand Down
24 changes: 12 additions & 12 deletions packages/web3/src/connect-button/connect-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,23 +42,12 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
buttonText = name ?? <Address tooltip={false} ellipsis address={address} />;
}

const onClickButton: React.MouseEventHandler<HTMLElement> = (e) => {
const { onClick } = props;
if (clickActionType !== 'showMenu' && connected && !profileOpen) {
setProfileOpen(true);
} else {
onConnectClick?.();
}
onClick?.(e);
};

const buttonProps: ButtonProps = {
style: props.style,
className: classNames(props.className, hashId, prefixCls),
size: props.size,
type: props.type,
ghost: props.ghost,
onClick: onClickButton,
...restProps,
};

Expand Down Expand Up @@ -97,7 +86,18 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
}
}
/>
<div className={classNames(`${prefixCls}-text`, hashId)}>{buttonText}</div>
<div
className={classNames(`${prefixCls}-text`, hashId)}
onClick={() => {
if (clickActionType !== 'showMenu' && connected && !profileOpen) {
setProfileOpen(true);
} else {
onConnectClick?.();
}
}}
>
{buttonText}
</div>
</Button>
);

Expand Down

0 comments on commit 12f28c3

Please sign in to comment.