Skip to content

Commit

Permalink
feat: Update option's styles (#126)
Browse files Browse the repository at this point in the history
* feat: Add a new wallet option `render` to support customize the content of each option.

* feat: Remove particleAuth (not completed, temporarily put on hold)

* feat: Add `isDisabled` option to wallet

* fix: Fix typos

* fix: Update wallet option styles
  • Loading branch information
wenty22 authored Mar 6, 2024
1 parent b6fb180 commit 06ecbd6
Show file tree
Hide file tree
Showing 29 changed files with 383 additions and 588 deletions.
5 changes: 5 additions & 0 deletions .changeset/bright-shirts-complain.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@node-real/walletkit": patch
---

Add a new wallet option `render` to support customize the content of each option.
5 changes: 5 additions & 0 deletions .changeset/wet-hounds-scream.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@node-real/walletkit": patch
---

feat: Add `isDisabled` option to wallet.
8 changes: 4 additions & 4 deletions .github/PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@ Please fill out the form below if you are adding a new wallet, for more detail,
|-|-|-|-|
|PC, browser extension| ✔️ | ✔️ ||
|Android, in system browser| | | |
|Android, in wallet dapp browser| | | |
|Android, in wallet dApp browser| | | |
|iOS, in system browser| | | |
|iOS, in wallet dapp browser| | | |
|iOS, in wallet dApp browser| | | |
|WalletConnect, PC| | | |
|WalletConnect, Android, in system browser| | | |
|WalletConnect, Android, in wallet dapp browser| | | |
|WalletConnect, Android, in wallet dApp browser| | | |
|WalletConnect, iOS, in system browser| | | |
|WalletConnect, iOS, in wallet dapp browser| | | |
|WalletConnect, iOS, in wallet dApp browser| | | |
20 changes: 10 additions & 10 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ Before adding a new wallet, you need to collect some information:
| short name | If display space is insufficient, the short name will be displayed. | Trust | optional |
| wallet logo | Logo in svg format. It should be noted that WalletKit supports both dark and light modes, for better presentation, you can provide logos in the two modes respectively. | - | ✔️ |
| download url | - | https://trustwallet.com/download | ✔️ |
| deeplink | After clicking deeplink in the system browser, we can directly open dapp in the app's dapp browser. | trust://open_url?coin_id=60&url=xxx | ✔️ |
| deeplink | After clicking deeplink in the system browser, we can directly open dApp in the app's dApp browser. | trust://open_url?coin_id=60&url=xxx | ✔️ |
| WalletConnect uri | If your app supports WalletConnect, please provides the WalletConnect uri. | trust://wc?uri=xxx | optional |

Then you can add it to project by following steps:
Expand Down Expand Up @@ -218,16 +218,16 @@ In general, wallet is available at several different platforms, such as PC brows
|test case|steps|Does the wallet support connecting by this way?|Does the wallet support switching networks?|Does the wallet support testnet?|
|-|-|-|-|-|
|PC, browser extension|<ol><li>Open dapp in PC browser</li><li>Select your wallet, check the functions</li><ol>|✔️|✔️|✔️|
|Android, in system browser|<ol><li>Open dapp in Android system browser, select your wallet</li><li>The wallet app will be evoked, and the dapp will be open in the wallet dapp browser</li><li>Select your wallet, check the functions</li></ol>|✔️|❌|✔️|
|Android, in wallet dapp browser|<ol><li>Open dapp in the wallet dapp browser</li><li>Select your wallet, check the functions</li><ol>|✔️|✔️|✔️|
|iOS, in system browser|<ol><li>Open dapp in iOS system browser, select your wallet</li><li>The wallet app will be evoked, and the dapp will be open in the wallet dapp browser</li><li>Select your wallet, check the functions</li></ol>|✔️|✔️|❌|
|iOS, in wallet dapp browser|<ol><li>Open dapp in the wallet dapp browser </li><li>Select your wallet, check the functions</li></ol>|✔️|✔️|❌|
|PC, browser extension|<ol><li>Open dApp in PC browser</li><li>Select your wallet, check the functions</li><ol>|✔️|✔️|✔️|
|Android, in system browser|<ol><li>Open dApp in Android system browser, select your wallet</li><li>The wallet app will be evoked, and the dApp will be open in the wallet dApp browser</li><li>Select your wallet, check the functions</li></ol>|✔️|❌|✔️|
|Android, in wallet dApp browser|<ol><li>Open dApp in the wallet dApp browser</li><li>Select your wallet, check the functions</li><ol>|✔️|✔️|✔️|
|iOS, in system browser|<ol><li>Open dApp in iOS system browser, select your wallet</li><li>The wallet app will be evoked, and the dApp will be open in the wallet dApp browser</li><li>Select your wallet, check the functions</li></ol>|✔️|✔️|❌|
|iOS, in wallet dApp browser|<ol><li>Open dApp in the wallet dApp browser </li><li>Select your wallet, check the functions</li></ol>|✔️|✔️|❌|
|WalletConnect, PC|<ol><li>Scan the QR code of WalletConnect using your wallet app</li><li>You will see a popup on the wallet app that asks you to connect WalletConnect</li><li>Check the functions</li></ol>|✔️|✔️|✔️|
|WalletConnect, Android, in system browser|<ol><li>Open dapp in Android system browser, select WalletConnect, choose your wallet in WalletConnect wallet list</li><li>The wallet app will be evoked, a popup for applying to connect WalletConnect will be displayed. </li><li>Check the functions</li></ol>|✔️|✔️|✔️|
|WalletConnect, Android, in wallet dapp browser|<ol><li>Open dapp in the wallet dapp browser</li><li>Select WalletConnect, choose your wallet in WalletConnect wallet list</li><li>A popup for applying to connect WalletConnect will be displayed</li><li>Check the functions</li><ol>|✔️|✔️|✔️|
|WalletConnect, iOS, in system browser|<ol><li>Open dapp in iOS system browser, select WalletConnect, choose your wallet in WalletConnect wallet list</li><li>The wallet app will be evoked, a popup for applying to connect WalletConnect will be displayed. </li><li>Check the functions</li></ol>|✔️|✔️|✔️|
|WalletConnect, iOS, in wallet dapp browser|<ol><li>Open dapp in the wallet dapp browser</li><li>Select WalletConnect, choose your wallet in WalletConnect wallet list</li><li>A popup for applying to connect WalletConnect will be displayed</li><li>Check the functions</li><ol>|✔️|✔️|✔️|
|WalletConnect, Android, in system browser|<ol><li>Open dApp in Android system browser, select WalletConnect, choose your wallet in WalletConnect wallet list</li><li>The wallet app will be evoked, a popup for applying to connect WalletConnect will be displayed. </li><li>Check the functions</li></ol>|✔️|✔️|✔️|
|WalletConnect, Android, in wallet dApp browser|<ol><li>Open dApp in the wallet dApp browser</li><li>Select WalletConnect, choose your wallet in WalletConnect wallet list</li><li>A popup for applying to connect WalletConnect will be displayed</li><li>Check the functions</li><ol>|✔️|✔️|✔️|
|WalletConnect, iOS, in system browser|<ol><li>Open dApp in iOS system browser, select WalletConnect, choose your wallet in WalletConnect wallet list</li><li>The wallet app will be evoked, a popup for applying to connect WalletConnect will be displayed. </li><li>Check the functions</li></ol>|✔️|✔️|✔️|
|WalletConnect, iOS, in wallet dApp browser|<ol><li>Open dApp in the wallet dApp browser</li><li>Select WalletConnect, choose your wallet in WalletConnect wallet list</li><li>A popup for applying to connect WalletConnect will be displayed</li><li>Check the functions</li><ol>|✔️|✔️|✔️|
## Release notes
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default function App() {

{/*
👇 Here's the SwitchNetworkModal
If the user switches to a network that is not supported by our dapp,
If the user switches to a network that is not supported by our dApp,
this modal will be displayed to remind the user to switch to our supported networks.
*/}
<SwitchNetworkModal />
Expand Down
2 changes: 1 addition & 1 deletion examples/vite/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default function App() {
<WalletKitButton />
{/*
👇 Here's the SwitchNetworkModal
If the user switches to a network that is not supported by our dapp,
If the user switches to a network that is not supported by our dApp,
this modal will be displayed to remind the user to switch to our supported networks.
*/}
<SwitchNetworkModal />
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"@commitlint/config-conventional": "^18.6.2",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"eslint": "^8.56.0",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.5",
"husky": "^8.0.3",
Expand Down
2 changes: 1 addition & 1 deletion packages/walletkit/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default function App() {

{/*
👇 Here's the SwitchNetworkModal
If the user switches to a network that is not supported by our dapp,
If the user switches to a network that is not supported by our dApp,
this modal will be displayed to remind the user to switch to our supported networks.
*/}
<SwitchNetworkModal />
Expand Down
2 changes: 0 additions & 2 deletions packages/walletkit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,6 @@
"wagmi": "^1.4.7"
},
"dependencies": {
"@particle-network/auth": "^1.2.2",
"@particle-network/provider": "^1.2.1",
"qrcode": "^1.5.3"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface WalletKitOptions {
disclaimer?: ReactNode;
hideNoWalletCTA?: boolean;
hideOfficialWalletConnectCTA?: boolean;
gridLayoutThreshold?: number;

closeModalAfterConnected?: boolean;
closeModalAfterSwitchingNetwork?: boolean;
Expand Down
2 changes: 0 additions & 2 deletions packages/walletkit/src/constants/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,3 @@
export const WALLET_CONNECT_PROJECT_ID = 'e68a1816d39726c2afabf05661a32767';

export const MODAL_AUTO_CLOSE_DELAY = 800;

export const LIST_LAYOUT_THRESHOLD = 5;
7 changes: 7 additions & 0 deletions packages/walletkit/src/defaultConfig/getDefaultConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,13 @@ function createConnectors(wallets: WalletProps[], chains: Chain[]) {
const connectors = wallets.map((w) => {
const c = w.createConnector(chains);
c._wallet = w;

// If we disable a wallet but still let it show up in the list,
// we should clear the cache to prevent `autoConnect` from automatically connecting to the wallet.
if (w.isDisabled && typeof window !== 'undefined') {
localStorage.removeItem(`wagmi.${w.id}.shimDisconnect`);
}

return c;
});
return connectors;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export function getDefaultProviderOptions(options: WalletKitOptions) {
const mergedOptions: WalletKitOptions = {
disclaimer: undefined,
chainsConfig: undefined,
gridLayoutThreshold: 6,

hideNoWalletCTA: false,
hideOfficialWalletConnectCTA: false,
Expand Down
45 changes: 45 additions & 0 deletions packages/walletkit/src/hooks/useWalletRender.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { Connector } from 'wagmi';
import { useClickWallet } from './useClickWallet';
import { useWalletConfig } from './useWalletConfig';
import { useWalletLogos } from './useWalletLogos';
import { WalletRenderProps } from '@/wallets';
import { useMemo } from 'react';
import { useTheme } from '@/components/ThemeProvider/context';

export function useWalletRender(connector: Connector, layout: WalletRenderProps['layout']) {
const onClickWallet = useClickWallet();
const { colorMode } = useTheme();

const wallet = useWalletConfig(connector);
const logos = useWalletLogos(wallet.logos);

const renderOptions = useMemo(() => {
return {
layout,
colorMode,
wallet: {
id: wallet.id,
name: wallet.name,
logo: layout === 'grid' ? logos.default : logos.transparent,
isDisabled: wallet.isDisabled,
},
onClick(e: React.MouseEvent<Element, MouseEvent>) {
onClickWallet(connector, e);
},
};
}, [
colorMode,
connector,
layout,
logos.default,
logos.transparent,
onClickWallet,
wallet.id,
wallet.name,
]);

return {
...renderOptions,
element: wallet.render?.(renderOptions),
};
}
Original file line number Diff line number Diff line change
@@ -1,38 +1,42 @@
import { Box } from '@/base/components/Box';
import { Text } from '@/base/components/Text';
import { Button } from '@/base/components/Button';
import { useClickWallet } from '@/hooks/useClickWallet';
import { useWalletConfig } from '@/hooks/useWalletConfig';
import { useWalletLogos } from '@/hooks/useWalletLogos';
import { cx } from '@/index';
import { Connector } from 'wagmi';
import {
clsWalletOption,
clsWalletOptionName,
clsWalletOptionIcon,
clsWalletOptionWrapper,
clsWalletOptionDisabled,
} from './styles.css';
import { useWalletRender } from '@/hooks/useWalletRender';

export interface WalletOptionProps {
connector: Connector;
}

export function WalletOption(props: WalletOptionProps) {
const { connector } = props;
const renderOptions = useWalletRender(props.connector, 'grid');

const onClickWallet = useClickWallet();
if (renderOptions.element) {
return <>{renderOptions.element}</>;
}

const wallet = useWalletConfig(connector);
const logos = useWalletLogos(wallet.logos);
const { logo, name, isDisabled } = renderOptions.wallet;

return (
<Box
className={cx('wk-wallet-option-wrapper', clsWalletOptionWrapper)}
onClick={(e) => onClickWallet(connector, e)}
>
<Button className={cx('wk-wallet-option', clsWalletOption)}>
<Box className={cx('wk-wallet-option-logo', clsWalletOptionIcon)}>{logos.default}</Box>
<Text className={cx('wk-wallet-option-name', clsWalletOptionName)}>{wallet.name}</Text>
<Box className={cx('wk-wallet-option-wrapper', clsWalletOptionWrapper)}>
<Button
className={cx(
'wk-wallet-option',
clsWalletOption,
isDisabled ? clsWalletOptionDisabled : undefined,
)}
onClick={isDisabled ? undefined : renderOptions.onClick}
>
<Box className={cx('wk-wallet-option-logo', clsWalletOptionIcon)}>{logo}</Box>
<Text className={cx('wk-wallet-option-name', clsWalletOptionName)}>{name}</Text>
</Button>
</Box>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,11 @@ globalStyle(`${clsWalletOptionIcon} > *`, {
width: '100%',
height: '100%',
});

export const clsWalletOptionDisabled = style({
cursor: 'not-allowed',
opacity: 0.3,
'@media': hover({
background: 'transparent',
}),
});
Original file line number Diff line number Diff line change
@@ -1,32 +1,40 @@
import { Box } from '@/base/components/Box';
import { Text } from '@/base/components/Text';
import { Button } from '@/base/components/Button';
import { useClickWallet } from '@/hooks/useClickWallet';
import { useWalletConfig } from '@/hooks/useWalletConfig';
import { useWalletLogos } from '@/hooks/useWalletLogos';
import { cx } from '@/index';
import { Connector } from 'wagmi';
import { clsWalletOption, clsWalletOptionName, clsWalletOptionIcon } from './styles.css';
import {
clsWalletOption,
clsWalletOptionName,
clsWalletOptionIcon,
clsWalletOptionDisabled,
} from './styles.css';
import { useWalletRender } from '@/hooks/useWalletRender';

export interface WalletOptionProps {
connector: Connector;
}

export function WalletOption(props: WalletOptionProps) {
const { connector } = props;
const renderOptions = useWalletRender(props.connector, 'list');

const onClickWallet = useClickWallet();
if (renderOptions.element) {
return <>{renderOptions.element}</>;
}

const wallet = useWalletConfig(connector);
const logos = useWalletLogos(wallet.logos);
const { logo, name, isDisabled } = renderOptions.wallet;

return (
<Button
className={cx('wk-wallet-option', clsWalletOption)}
onClick={(e) => onClickWallet(connector, e)}
className={cx(
'wk-wallet-option',
clsWalletOption,
isDisabled ? clsWalletOptionDisabled : undefined,
)}
onClick={isDisabled ? undefined : renderOptions.onClick}
>
<Text className={cx('wk-wallet-option-name', clsWalletOptionName)}>{wallet.name}</Text>
<Box className={cx('wk-wallet-option-logo', clsWalletOptionIcon)}>{logos.transparent}</Box>
<Text className={cx('wk-wallet-option-name', clsWalletOptionName)}>{name}</Text>
<Box className={cx('wk-wallet-option-logo', clsWalletOptionIcon)}>{logo}</Box>
</Button>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,12 @@ export const clsWalletOptionIcon = style({
borderRadius: cssVar('walletOptionIcon', 'radii'),
overflow: 'hidden',
});

export const clsWalletOptionDisabled = style({
cursor: 'not-allowed',
opacity: 0.3,
'@media': hover({
color: cssVar('walletOptionText'),
background: cssVar('walletOptionBackground'),
}),
});
4 changes: 2 additions & 2 deletions packages/walletkit/src/pages/Connectors/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ import { useConnect } from 'wagmi';
import { GridLayout } from './GridLayout';
import { ListLayout } from './ListLayout';
import { clsDisclaimer } from './styles.css';
import { LIST_LAYOUT_THRESHOLD } from '@/constants/common';

export function ConnectorsPage() {
const { connectors } = useConnect();
const { options, isMobileLayout } = useWalletKitContext();

const visibleConnectors = connectors.filter((c) => !!c._wallet);
const useGridLayout = visibleConnectors.length > LIST_LAYOUT_THRESHOLD || isMobileLayout;
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const useGridLayout = visibleConnectors.length > options.gridLayoutThreshold! || isMobileLayout;

return (
<>
Expand Down
2 changes: 0 additions & 2 deletions packages/walletkit/src/wallets/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,3 @@ export * from './binanceWeb3Wallet';
export * from './coinbaseWallet';
export * from './coinbaseWallet/connector';
export * from './bitgetWallet';
// export * from './particleWallet';
// export * from './particleWallet/connector';
Loading

0 comments on commit 06ecbd6

Please sign in to comment.