Skip to content

Commit

Permalink
feat: ConnectModal support group configuration (#547)
Browse files Browse the repository at this point in the history
* feat: ConnectModal support group=false

* feat: add changelog

* chore: Merge group and grouporder

* revert: groupOrder

* chore: update

* feat: add deprecated warning

* feat: add warning util

* fix: rm
  • Loading branch information
thinkasany authored Feb 1, 2024
1 parent 393cad6 commit 90db5e8
Show file tree
Hide file tree
Showing 21 changed files with 420 additions and 132 deletions.
5 changes: 5 additions & 0 deletions .changeset/young-brooms-pump.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@ant-design/web3': minor
---

feat: ConnectModal support group configuration
1 change: 0 additions & 1 deletion docs/course/contract-dapp.md
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,6 @@ The following is the complete example of the course:

<code src="./demos/dapp.tsx"></code>


You can also refer to the Github project source code [https://github.com/ant-design/ant-design-web3-demo](https://github.com/ant-design/ant-design-web3-demo).

So far, we have completed all the content of this course, I hope you can learn something from it, thank you all! 🎉
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@
"lint-staged": "^15.2.0",
"lodash": "^4.17.21",
"prettier": "^3.1.1",
"rc-util": "^5.38.1",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
Expand Down
107 changes: 107 additions & 0 deletions packages/common/src/utils/warning.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import * as React from 'react';
import rcWarning, { resetWarned as rcResetWarned } from 'rc-util/lib/warning';

export function noop() {}

let deprecatedWarnList: Record<string, string[]> | null = null;

export function resetWarned() {
deprecatedWarnList = null;
rcResetWarned();
}

type Warning = (valid: boolean, component: string, message?: string) => void;

// eslint-disable-next-line
let warning: Warning = noop;
if (process.env.NODE_ENV !== 'production') {
warning = (valid, component, message) => {
rcWarning(valid, `[ant-design-web3: ${component}] ${message}`);

// StrictMode will inject console which will not throw warning in React 17.
if (process.env.NODE_ENV === 'test') {
resetWarned();
}
};
}

type BaseTypeWarning = (
valid: boolean,
/**
* - deprecated: Some API will be removed in future but still support now.
* - usage: Some API usage is not correct.
* - breaking: Breaking change like API is removed.
*/
type: 'deprecated' | 'usage' | 'breaking',
message?: string,
) => void;

type TypeWarning = BaseTypeWarning & {
deprecated: (valid: boolean, oldProp: string, newProp: string, message?: string) => void;
};

export interface WarningContextProps {
strict?: boolean;
}

export const WarningContext = React.createContext<WarningContextProps>({});

/**
* This is a hook but we not named as `useWarning`
* since this is only used in development.
* We should always wrap this in `if (process.env.NODE_ENV !== 'production')` condition
*/
export const devUseWarning: (component: string) => TypeWarning =
process.env.NODE_ENV !== 'production'
? (component) => {
const { strict } = React.useContext(WarningContext);

const typeWarning: TypeWarning = (valid, type, message) => {
if (!valid) {
if (strict === false && type === 'deprecated') {
const existWarning = deprecatedWarnList;

if (!deprecatedWarnList) {
deprecatedWarnList = {};
}

deprecatedWarnList[component] = deprecatedWarnList[component] || [];
if (!deprecatedWarnList[component].includes(message || '')) {
deprecatedWarnList[component].push(message || '');
}

// Warning for the first time
if (!existWarning) {
// eslint-disable-next-line no-console
console.warn(
'[ant-design-web3] There exists deprecated usage in your code:',
deprecatedWarnList,
);
}
} else {
warning(valid, component, message);
}
}
};

typeWarning.deprecated = (valid, oldProp, newProp, message) => {
typeWarning(
valid,
'deprecated',
`\`${oldProp}\` is deprecated. Please use \`${newProp}\` instead.${
message ? ` ${message}` : ''
}`,
);
};

return typeWarning;
}
: () => {
const noopWarning: TypeWarning = () => {};

noopWarning.deprecated = noop;

return noopWarning;
};

export default warning;
31 changes: 28 additions & 3 deletions packages/web3/src/connect-modal/__tests__/basic.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ describe('ConnectModal with guide', () => {
vi.spyOn(Grid, 'useBreakpoint').mockReturnValue({
md: true, // ≥ 768px, mock PC
});

const errorFn = vi.fn();
vi.spyOn(console, 'error').mockImplementation((msg) => {
errorFn(msg);
});
const App = () => (
<ConfigProvider
theme={{
Expand All @@ -40,6 +43,9 @@ describe('ConnectModal with guide', () => {
</ConfigProvider>
);
const { baseElement } = render(<App />);
expect(errorFn).toBeCalledWith(
'Warning: [ant-design-web3: ConnectModal] `groupOrder` is deprecated. Please use `group={{groupOrder: ()=> {}}}` instead.',
);

expect(baseElement).toMatchSnapshot();
// should have ant-web3-connect-modal class
Expand Down Expand Up @@ -125,7 +131,9 @@ describe('ConnectModal with guide', () => {
open={open}
title="ConnectModal"
footer="Powered by AntChain"
groupOrder={groupOrder}
group={{
groupOrder,
}}
walletList={walletList}
guide={guide}
destroyOnClose={true}
Expand Down Expand Up @@ -155,7 +163,9 @@ describe('ConnectModal with guide', () => {
open
title="ConnectModal"
footer="Powered by AntChain"
groupOrder={groupOrder}
group={{
groupOrder,
}}
walletList={walletList}
/>
);
Expand Down Expand Up @@ -202,4 +212,19 @@ describe('ConnectModal with guide', () => {
expect(baseElement.querySelector('.ant-web3-connect-modal-guide-item-icon')).toBeNull();
expect(baseElement.querySelector('.ant-web3-icon-bitcoin-circle-colorful')).toBeTruthy();
});

it('Wallets are not grouped', async () => {
const App = () => (
<ConnectModal
open
title="ConnectModal"
footer="Powered by AntChain"
walletList={walletList}
guide={guide}
group={false}
/>
);
const { baseElement } = render(<App />);
expect(baseElement.querySelector('.ant-web3-connect-modal-group-title')).toBeNull();
});
});
16 changes: 12 additions & 4 deletions packages/web3/src/connect-modal/__tests__/mode.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ describe('ConnectModal with guide', () => {
open
title="ConnectModal"
footer="Powered by AntChain"
groupOrder={groupOrder}
group={{
groupOrder,
}}
walletList={walletList}
guide={guide}
mode="simple"
Expand All @@ -39,7 +41,9 @@ describe('ConnectModal with guide', () => {
open
title="ConnectModal"
footer="Powered by AntChain"
groupOrder={groupOrder}
group={{
groupOrder,
}}
walletList={walletList}
guide={guide}
mode="auto"
Expand All @@ -62,7 +66,9 @@ describe('ConnectModal with guide', () => {
open
title="ConnectModal"
footer="Powered by AntChain"
groupOrder={groupOrder}
group={{
groupOrder,
}}
walletList={walletList}
guide={guide}
/>
Expand All @@ -84,7 +90,9 @@ describe('ConnectModal with guide', () => {
open
title="ConnectModal"
footer="Powered by AntChain"
groupOrder={groupOrder}
group={{
groupOrder,
}}
walletList={walletList}
guide={guide}
mode="normal"
Expand Down
4 changes: 3 additions & 1 deletion packages/web3/src/connect-modal/__tests__/panel.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ describe('ConnectModal with ConnectModal', () => {
<ConnectModal.ModalPanel
title="ConnectModal"
footer="Powered by AntChain"
groupOrder={groupOrder}
group={{
groupOrder,
}}
walletList={walletList}
guide={guide}
/>
Expand Down
4 changes: 3 additions & 1 deletion packages/web3/src/connect-modal/__tests__/simple.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ describe('ConnectModal without guide', () => {
open
title="ConnectModal"
footer="Powered by AntChain"
groupOrder={groupOrder}
group={{
groupOrder,
}}
walletList={walletList}
/>
</ConfigProvider>
Expand Down
4 changes: 3 additions & 1 deletion packages/web3/src/connect-modal/__tests__/theme.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ describe('ConnectModal theme', () => {
<ConnectModal
open
title="ConnectModal"
groupOrder={groupOrder}
group={{
groupOrder,
}}
walletList={walletList}
mode="normal"
/>
Expand Down
14 changes: 12 additions & 2 deletions packages/web3/src/connect-modal/components/ModalPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,17 @@ import WalletList from './WalletList';
export type ModalPanelProps = ConnectModalProps;

const ModalPanel: React.FC<ModalPanelProps> = (props) => {
const { title, footer, walletList, groupOrder, guide, mode, onWalletSelected, locale } = props;
const {
title,
footer,
walletList,
guide,
group = true,
groupOrder,
mode,
onWalletSelected,
locale,
} = props;
const intl = useIntl('ConnectModal', locale);

const [panelRoute, setPanelRoute] = React.useState<PanelRoute>('init');
Expand Down Expand Up @@ -92,7 +102,7 @@ const ModalPanel: React.FC<ModalPanelProps> = (props) => {
<div className={classNames(`${prefixCls}-list-panel`)}>
<div className={`${prefixCls}-header`}>{mergedTitle}</div>
<div className={`${prefixCls}-list-container`}>
<WalletList walletList={walletList} groupOrder={groupOrder} />
<WalletList walletList={walletList} group={group} groupOrder={groupOrder} />
</div>
{footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
</div>
Expand Down
Loading

0 comments on commit 90db5e8

Please sign in to comment.