From 06ecbd6326ff7444eb51da2f71c73600e5ca3e72 Mon Sep 17 00:00:00 2001 From: Wenty Li <105278450+wenty22@users.noreply.github.com> Date: Wed, 6 Mar 2024 10:14:35 +0800 Subject: [PATCH] feat: Update option's styles (#126) * 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 --- .changeset/bright-shirts-complain.md | 5 + .changeset/wet-hounds-scream.md | 5 + .github/PULL_REQUEST_TEMPLATE.md | 8 +- CONTRIBUTING.md | 20 +- README.md | 2 +- examples/vite/src/App.tsx | 2 +- package.json | 2 +- packages/walletkit/README.md | 2 +- packages/walletkit/package.json | 2 - .../components/WalletKitProvider/context.ts | 1 + packages/walletkit/src/constants/common.ts | 2 - .../src/defaultConfig/getDefaultConfig.ts | 7 + .../getDefaultProviderOptions.ts | 1 + .../walletkit/src/hooks/useWalletRender.ts | 45 +++ .../GridLayout/WalletOption/index.tsx | 32 +- .../GridLayout/WalletOption/styles.css.ts | 8 + .../ListLayout/WalletOption/index.tsx | 32 +- .../ListLayout/WalletOption/styles.css.ts | 9 + .../walletkit/src/pages/Connectors/index.tsx | 4 +- packages/walletkit/src/wallets/index.ts | 2 - .../src/wallets/particleWallet/connector.ts | 203 ---------- .../src/wallets/particleWallet/icon.tsx | 22 -- .../src/wallets/particleWallet/index.tsx | 52 --- packages/walletkit/src/wallets/types.ts | 16 +- packages/walletkit/test/App.tsx | 26 +- pnpm-lock.yaml | 363 ++++++++---------- website/package.json | 1 - website/src/pages/index.mdx | 79 +++- website/src/playground/index.tsx | 18 - 29 files changed, 383 insertions(+), 588 deletions(-) create mode 100644 .changeset/bright-shirts-complain.md create mode 100644 .changeset/wet-hounds-scream.md create mode 100644 packages/walletkit/src/hooks/useWalletRender.ts delete mode 100644 packages/walletkit/src/wallets/particleWallet/connector.ts delete mode 100644 packages/walletkit/src/wallets/particleWallet/icon.tsx delete mode 100644 packages/walletkit/src/wallets/particleWallet/index.tsx diff --git a/.changeset/bright-shirts-complain.md b/.changeset/bright-shirts-complain.md new file mode 100644 index 00000000..7a52f981 --- /dev/null +++ b/.changeset/bright-shirts-complain.md @@ -0,0 +1,5 @@ +--- +"@node-real/walletkit": patch +--- + +Add a new wallet option `render` to support customize the content of each option. diff --git a/.changeset/wet-hounds-scream.md b/.changeset/wet-hounds-scream.md new file mode 100644 index 00000000..139da436 --- /dev/null +++ b/.changeset/wet-hounds-scream.md @@ -0,0 +1,5 @@ +--- +"@node-real/walletkit": patch +--- + +feat: Add `isDisabled` option to wallet. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index a8cb128d..8d926113 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -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| | | | diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c584890b..9549f689 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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: @@ -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|
  1. Open dapp in PC browser
  2. Select your wallet, check the functions
      3. |✔️|✔️|✔️| -|Android, in system browser|
      1. Open dapp in Android system browser, select your wallet
      2. The wallet app will be evoked, and the dapp will be open in the wallet dapp browser
      3. Select your wallet, check the functions
      |✔️|❌|✔️| -|Android, in wallet dapp browser|
      1. Open dapp in the wallet dapp browser
      2. Select your wallet, check the functions
          3. |✔️|✔️|✔️| -|iOS, in system browser|
          1. Open dapp in iOS system browser, select your wallet
          2. The wallet app will be evoked, and the dapp will be open in the wallet dapp browser
          3. Select your wallet, check the functions
          |✔️|✔️|❌| -|iOS, in wallet dapp browser|
          1. Open dapp in the wallet dapp browser
          2. Select your wallet, check the functions
          |✔️|✔️|❌| +|PC, browser extension|
          1. Open dApp in PC browser
          2. Select your wallet, check the functions
              3. |✔️|✔️|✔️| +|Android, in system browser|
              1. Open dApp in Android system browser, select your wallet
              2. The wallet app will be evoked, and the dApp will be open in the wallet dApp browser
              3. Select your wallet, check the functions
              |✔️|❌|✔️| +|Android, in wallet dApp browser|
              1. Open dApp in the wallet dApp browser
              2. Select your wallet, check the functions
                  3. |✔️|✔️|✔️| +|iOS, in system browser|
                  1. Open dApp in iOS system browser, select your wallet
                  2. The wallet app will be evoked, and the dApp will be open in the wallet dApp browser
                  3. Select your wallet, check the functions
                  |✔️|✔️|❌| +|iOS, in wallet dApp browser|
                  1. Open dApp in the wallet dApp browser
                  2. Select your wallet, check the functions
                  |✔️|✔️|❌| |WalletConnect, PC|
                  1. Scan the QR code of WalletConnect using your wallet app
                  2. You will see a popup on the wallet app that asks you to connect WalletConnect
                  3. Check the functions
                  |✔️|✔️|✔️| -|WalletConnect, Android, in system browser|
                  1. Open dapp in Android system browser, select WalletConnect, choose your wallet in WalletConnect wallet list
                  2. The wallet app will be evoked, a popup for applying to connect WalletConnect will be displayed.
                  3. Check the functions
                  |✔️|✔️|✔️| -|WalletConnect, Android, in wallet dapp browser|
                  1. Open dapp in the wallet dapp browser
                  2. Select WalletConnect, choose your wallet in WalletConnect wallet list
                  3. A popup for applying to connect WalletConnect will be displayed
                  4. Check the functions
                      5. |✔️|✔️|✔️| -|WalletConnect, iOS, in system browser|
                      1. Open dapp in iOS system browser, select WalletConnect, choose your wallet in WalletConnect wallet list
                      2. The wallet app will be evoked, a popup for applying to connect WalletConnect will be displayed.
                      3. Check the functions
                      |✔️|✔️|✔️| -|WalletConnect, iOS, in wallet dapp browser|
                      1. Open dapp in the wallet dapp browser
                      2. Select WalletConnect, choose your wallet in WalletConnect wallet list
                      3. A popup for applying to connect WalletConnect will be displayed
                      4. Check the functions
                          5. |✔️|✔️|✔️| +|WalletConnect, Android, in system browser|
                          1. Open dApp in Android system browser, select WalletConnect, choose your wallet in WalletConnect wallet list
                          2. The wallet app will be evoked, a popup for applying to connect WalletConnect will be displayed.
                          3. Check the functions
                          |✔️|✔️|✔️| +|WalletConnect, Android, in wallet dApp browser|
                          1. Open dApp in the wallet dApp browser
                          2. Select WalletConnect, choose your wallet in WalletConnect wallet list
                          3. A popup for applying to connect WalletConnect will be displayed
                          4. Check the functions
                              5. |✔️|✔️|✔️| +|WalletConnect, iOS, in system browser|
                              1. Open dApp in iOS system browser, select WalletConnect, choose your wallet in WalletConnect wallet list
                              2. The wallet app will be evoked, a popup for applying to connect WalletConnect will be displayed.
                              3. Check the functions
                              |✔️|✔️|✔️| +|WalletConnect, iOS, in wallet dApp browser|
                              1. Open dApp in the wallet dApp browser
                              2. Select WalletConnect, choose your wallet in WalletConnect wallet list
                              3. A popup for applying to connect WalletConnect will be displayed
                              4. Check the functions
                                  5. |✔️|✔️|✔️| ## Release notes diff --git a/README.md b/README.md index b1c414ed..88e9d044 100644 --- a/README.md +++ b/README.md @@ -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. */} diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 6b2f94bc..0b236fe8 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -35,7 +35,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. */} diff --git a/package.json b/package.json index 0e6a521e..183f0573 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/walletkit/README.md b/packages/walletkit/README.md index b1c414ed..88e9d044 100644 --- a/packages/walletkit/README.md +++ b/packages/walletkit/README.md @@ -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. */} diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json index 3a4c160f..de9ca1c7 100644 --- a/packages/walletkit/package.json +++ b/packages/walletkit/package.json @@ -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" } } diff --git a/packages/walletkit/src/components/WalletKitProvider/context.ts b/packages/walletkit/src/components/WalletKitProvider/context.ts index 2b5c337c..c8854e6c 100644 --- a/packages/walletkit/src/components/WalletKitProvider/context.ts +++ b/packages/walletkit/src/components/WalletKitProvider/context.ts @@ -14,6 +14,7 @@ export interface WalletKitOptions { disclaimer?: ReactNode; hideNoWalletCTA?: boolean; hideOfficialWalletConnectCTA?: boolean; + gridLayoutThreshold?: number; closeModalAfterConnected?: boolean; closeModalAfterSwitchingNetwork?: boolean; diff --git a/packages/walletkit/src/constants/common.ts b/packages/walletkit/src/constants/common.ts index 40be169d..a23ac0cd 100644 --- a/packages/walletkit/src/constants/common.ts +++ b/packages/walletkit/src/constants/common.ts @@ -2,5 +2,3 @@ export const WALLET_CONNECT_PROJECT_ID = 'e68a1816d39726c2afabf05661a32767'; export const MODAL_AUTO_CLOSE_DELAY = 800; - -export const LIST_LAYOUT_THRESHOLD = 5; diff --git a/packages/walletkit/src/defaultConfig/getDefaultConfig.ts b/packages/walletkit/src/defaultConfig/getDefaultConfig.ts index eac0747a..ffa6448d 100644 --- a/packages/walletkit/src/defaultConfig/getDefaultConfig.ts +++ b/packages/walletkit/src/defaultConfig/getDefaultConfig.ts @@ -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; diff --git a/packages/walletkit/src/defaultConfig/getDefaultProviderOptions.ts b/packages/walletkit/src/defaultConfig/getDefaultProviderOptions.ts index bdbdc48b..6886cf12 100644 --- a/packages/walletkit/src/defaultConfig/getDefaultProviderOptions.ts +++ b/packages/walletkit/src/defaultConfig/getDefaultProviderOptions.ts @@ -7,6 +7,7 @@ export function getDefaultProviderOptions(options: WalletKitOptions) { const mergedOptions: WalletKitOptions = { disclaimer: undefined, chainsConfig: undefined, + gridLayoutThreshold: 6, hideNoWalletCTA: false, hideOfficialWalletConnectCTA: false, diff --git a/packages/walletkit/src/hooks/useWalletRender.ts b/packages/walletkit/src/hooks/useWalletRender.ts new file mode 100644 index 00000000..57fa202a --- /dev/null +++ b/packages/walletkit/src/hooks/useWalletRender.ts @@ -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) { + onClickWallet(connector, e); + }, + }; + }, [ + colorMode, + connector, + layout, + logos.default, + logos.transparent, + onClickWallet, + wallet.id, + wallet.name, + ]); + + return { + ...renderOptions, + element: wallet.render?.(renderOptions), + }; +} diff --git a/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/index.tsx b/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/index.tsx index b8262c05..3818781d 100644 --- a/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/index.tsx +++ b/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/index.tsx @@ -1,9 +1,6 @@ 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 { @@ -11,28 +8,35 @@ import { 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 ( - onClickWallet(connector, e)} - > - ); diff --git a/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/styles.css.ts b/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/styles.css.ts index 29ca9cd6..5b39b00d 100644 --- a/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/styles.css.ts +++ b/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/styles.css.ts @@ -59,3 +59,11 @@ globalStyle(`${clsWalletOptionIcon} > *`, { width: '100%', height: '100%', }); + +export const clsWalletOptionDisabled = style({ + cursor: 'not-allowed', + opacity: 0.3, + '@media': hover({ + background: 'transparent', + }), +}); diff --git a/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/index.tsx b/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/index.tsx index 5af8ec0b..56c9776a 100644 --- a/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/index.tsx +++ b/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/index.tsx @@ -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 ( ); } diff --git a/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/styles.css.ts b/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/styles.css.ts index 832179c8..8e1ef3ba 100644 --- a/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/styles.css.ts +++ b/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/styles.css.ts @@ -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'), + }), +}); diff --git a/packages/walletkit/src/pages/Connectors/index.tsx b/packages/walletkit/src/pages/Connectors/index.tsx index b03b94e8..c2772f12 100644 --- a/packages/walletkit/src/pages/Connectors/index.tsx +++ b/packages/walletkit/src/pages/Connectors/index.tsx @@ -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 ( <> diff --git a/packages/walletkit/src/wallets/index.ts b/packages/walletkit/src/wallets/index.ts index 94c0115e..5f9051be 100644 --- a/packages/walletkit/src/wallets/index.ts +++ b/packages/walletkit/src/wallets/index.ts @@ -16,5 +16,3 @@ export * from './binanceWeb3Wallet'; export * from './coinbaseWallet'; export * from './coinbaseWallet/connector'; export * from './bitgetWallet'; -// export * from './particleWallet'; -// export * from './particleWallet/connector'; diff --git a/packages/walletkit/src/wallets/particleWallet/connector.ts b/packages/walletkit/src/wallets/particleWallet/connector.ts deleted file mode 100644 index cbfed51f..00000000 --- a/packages/walletkit/src/wallets/particleWallet/connector.ts +++ /dev/null @@ -1,203 +0,0 @@ -import { PARTICLE_WALLET_ID } from '.'; -import { ParticleProvider } from '@particle-network/provider'; -import type { AuthType } from '@particle-network/auth'; -import { - Chain, - ChainNotConfiguredError, - Connector, - ConnectorNotFoundError, - WalletClient, -} from 'wagmi'; -import { - ProviderRpcError, - SwitchChainError, - UserRejectedRequestError, - createWalletClient, - custom, - getAddress, - numberToHex, -} from 'viem'; - -type ParticleAuth = ConstructorParameters[0]; - -export type ParticleConnectorOptions = { - shimDisconnect?: boolean; - auth?: ParticleAuth; - authType?: AuthType; -}; - -export class ParticleConnector extends Connector { - readonly id: string = PARTICLE_WALLET_ID; - readonly name: string = 'Particle'; - readonly ready: boolean; - - protected shimDisconnectKey = `${this.id}.shimDisconnect`; - private provider?: ParticleProvider; - - constructor({ - chains, - options: _options, - }: { - chains?: Chain[]; - options?: ParticleConnectorOptions; - } = {}) { - const options = { - name: 'Particle', - shimDisconnect: true, - ..._options, - }; - - super({ - chains, - options, - }); - - this.name = options.name ?? this.name; - this.ready = true; - - this.onAccountsChanged = this.onAccountsChanged.bind(this); - this.onChainChanged = this.onChainChanged.bind(this); - this.onDisconnect = this.onDisconnect.bind(this); - } - - async connect({ chainId }: { chainId?: number } = {}) { - if (!this.options.auth) { - throw new Error('Please init Particle first'); - } - - try { - const provider = await this.getProvider(); - if (!provider) throw new ConnectorNotFoundError(); - - provider.on('accountsChanged', this.onAccountsChanged); - provider.on('chainChanged', this.onChainChanged); - provider.on('disconnect', this.onDisconnect); - - this.emit('message', { type: 'connecting' }); - - if (!this.options.auth.isLogin()) { - await this.options.auth.login({ - preferredAuthType: this.options.authType, - }); - } - - let id = await this.getChainId(); - let unsupported = this.isChainUnsupported(id); - if (chainId && id !== chainId) { - const chain = await this.switchChain(chainId); - id = chain.id; - unsupported = this.isChainUnsupported(id); - } - - const account = await this.getAccount(); - return { - account, - chain: { id, unsupported }, - }; - } catch (error) { - if ((error as ProviderRpcError).code === 4001) { - throw new UserRejectedRequestError(error as Error); - } - throw error; - } - } - - async disconnect() { - const provider = await this.getProvider(); - await provider.disconnect(); - - provider.removeListener('accountsChanged', this.onAccountsChanged); - provider.removeListener('chainChanged', this.onChainChanged); - provider.removeListener('disconnect', this.onDisconnect); - } - - async getAccount() { - const provider = await this.getProvider(); - const accounts = await provider.request({ method: 'eth_accounts' }); - return getAddress(accounts[0]); - } - - async getChainId() { - const provider = await this.getProvider(); - const chainId = await provider.request({ method: 'eth_chainId' }); - return Number(chainId); - } - - async getProvider() { - if (!this.options.auth) { - throw new Error('Please init Particle first'); - } - if (!this.provider) { - const { ParticleProvider } = await import('@particle-network/provider'); - this.provider = new ParticleProvider(this.options.auth); - } - return this.provider; - } - - async getWalletClient({ chainId }: { chainId?: number } = {}): Promise { - const [provider, account] = await Promise.all([this.getProvider(), this.getAccount()]); - const chain = this.chains.find((x) => x.id === chainId); - - if (!provider) throw new Error('provider is required.'); - - return createWalletClient({ - account, - chain, - transport: custom(provider), - }) as WalletClient; - } - - async isAuthorized() { - if (!this.options.auth) { - throw new Error('Please init Particle first'); - } - return this.options.auth.isLogin() && this.options.auth.walletExist(); - } - - async switchChain(chainId: number) { - const provider = await this.getProvider(); - if (!provider) throw new ConnectorNotFoundError(); - const id = numberToHex(chainId); - - try { - await provider.request({ - method: 'wallet_switchEthereumChain', - params: [{ chainId: id }], - }); - - return ( - this.chains.find((x) => x.id === chainId) ?? { - id: chainId, - name: `Chain ${id}`, - network: `${id}`, - nativeCurrency: { name: 'Ether', decimals: 18, symbol: 'ETH' }, - rpcUrls: { default: { http: [''] }, public: { http: [''] } }, - } - ); - } catch (error) { - const chain = this.chains.find((x) => x.id === chainId); - if (!chain) { - throw new ChainNotConfiguredError({ chainId, connectorId: this.id }); - } - throw new SwitchChainError(error as Error); - } - } - - protected onAccountsChanged(accounts: string[]) { - if (accounts.length === 0) { - this.emit('disconnect'); - } else { - this.emit('change', { account: getAddress(accounts[0]) }); - } - } - - protected onChainChanged(chainId: number | string) { - const id = Number(chainId); - const unsupported = this.isChainUnsupported(id); - this.emit('change', { chain: { id, unsupported } }); - } - - protected onDisconnect() { - this.emit('disconnect'); - } -} diff --git a/packages/walletkit/src/wallets/particleWallet/icon.tsx b/packages/walletkit/src/wallets/particleWallet/icon.tsx deleted file mode 100644 index 711823be..00000000 --- a/packages/walletkit/src/wallets/particleWallet/icon.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { SVGIconProps } from '../..'; - -export const ParticleWalletTransparentIcon = (props: SVGIconProps) => { - return ; -}; - -export const ParticleWalletIcon = (props: SVGIconProps) => { - return ( - - - - - ); -}; diff --git a/packages/walletkit/src/wallets/particleWallet/index.tsx b/packages/walletkit/src/wallets/particleWallet/index.tsx deleted file mode 100644 index cbba2c2d..00000000 --- a/packages/walletkit/src/wallets/particleWallet/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { Chain } from 'wagmi'; -import { PartialWalletProps, WalletProps } from '..'; -import { ParticleWalletIcon, ParticleWalletTransparentIcon } from './icon'; -import { ParticleConnector, ParticleConnectorOptions } from './connector'; - -export const PARTICLE_WALLET_ID = 'particleWallet'; - -export interface ParticleWalletProps extends PartialWalletProps { - connectorOptions?: ParticleConnectorOptions; -} - -export function particleWallet(props: ParticleWalletProps = {}): WalletProps { - const { connectorOptions, ...restProps } = props; - - return { - id: PARTICLE_WALLET_ID, - name: 'Particle', - logos: { - default: , - transparent: , - }, - downloadUrls: { - default: 'https://particle.network/', - }, - spinnerColor: undefined, - showQRCode: false, - isInstalled: isParticleWallet, - createConnector: (chains: Chain[]) => { - return new ParticleConnector({ - chains, - options: { - shimDisconnect: true, - auth: typeof window === 'undefined' ? undefined : window.particle?.auth, - ...connectorOptions, - }, - }); - }, - getDeepLink: () => { - return undefined; - }, - getQRCodeUri(uri) { - return uri; - }, - ...restProps, - }; -} - -export function isParticleWallet() { - if (typeof window === 'undefined') return false; - - return !!window.particle; -} diff --git a/packages/walletkit/src/wallets/types.ts b/packages/walletkit/src/wallets/types.ts index d41a6e9b..ee9ea96b 100644 --- a/packages/walletkit/src/wallets/types.ts +++ b/packages/walletkit/src/wallets/types.ts @@ -1,7 +1,19 @@ import { ColorMode } from '@/components/ThemeProvider/context'; -import { ReactElement } from 'react'; +import { ReactElement, ReactNode } from 'react'; import { Chain, Connector } from 'wagmi'; +export interface WalletRenderProps { + layout: 'list' | 'grid'; + colorMode: ColorMode; + wallet: { + id: string; + name: string; + logo: ReactElement; + isDisabled?: boolean; + }; + onClick: (e: React.MouseEvent) => void; +} + export interface WalletProps { id: string; name: string; @@ -15,9 +27,11 @@ export interface WalletProps { spinnerColor?: string; showQRCode?: boolean; isInstalled: () => boolean | undefined; + isDisabled?: boolean; createConnector: (chains: Chain[]) => Connector; getDeepLink: () => string | undefined; getQRCodeUri?: (uri: string) => string; + render?: (props: WalletRenderProps) => ReactNode; } export type PartialWalletProps = Partial; diff --git a/packages/walletkit/test/App.tsx b/packages/walletkit/test/App.tsx index 7978962f..92d6a63c 100644 --- a/packages/walletkit/test/App.tsx +++ b/packages/walletkit/test/App.tsx @@ -22,28 +22,10 @@ import { tokenPocket, trustWallet, walletConnect, - // particleWallet, } from '@/wallets'; -// import { ParticleNetwork } from '@particle-network/auth'; new VConsole(); -// const env = (import.meta as any).env; - -// const particle = new ParticleNetwork({ -// projectId: env.VITE_PARTICLE_APP_PROJECT_ID, -// clientKey: env.VITE_PARTICLE_APP_CLIENT_KEY, -// appId: env.VITE_PARTICLE_APP_APP_ID, -// wallet: { displayWalletEntry: true }, -// chainId: 204, -// chainName: 'opBNB', -// }); - -// particle.setERC4337({ -// name: 'BICONOMY', -// version: '2.0.0', -// }); - const config = createConfig( getDefaultConfig({ autoConnect: true, @@ -55,17 +37,19 @@ const config = createConfig( coinbaseWallet(), metaMask(), okxWallet(), - tokenPocket(), + tokenPocket({ + isDisabled: true, + }), trustWallet(), walletConnect(), - // mathWallet(), - // particleWallet(), + mathWallet(), ], }), ); const options: WalletKitOptions = { initialChainId: 204, + gridLayoutThreshold: 4, }; export default function App() { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 318886fe..00ac9c4a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,25 +13,25 @@ importers: version: 2.27.1 '@commitlint/cli': specifier: ^18.6.1 - version: 18.6.1(@types/node@20.11.19)(typescript@5.3.3) + version: 18.6.1(@types/node@20.11.24)(typescript@5.3.3) '@commitlint/config-conventional': specifier: ^18.6.2 version: 18.6.2 '@typescript-eslint/eslint-plugin': specifier: ^5.62.0 - version: 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.56.0)(typescript@5.3.3) + version: 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.57.0)(typescript@5.3.3) '@typescript-eslint/parser': specifier: ^5.62.0 - version: 5.62.0(eslint@8.56.0)(typescript@5.3.3) + version: 5.62.0(eslint@8.57.0)(typescript@5.3.3) eslint: - specifier: ^8.56.0 - version: 8.56.0 + specifier: ^8.57.0 + version: 8.57.0 eslint-plugin-react-hooks: specifier: ^4.6.0 - version: 4.6.0(eslint@8.56.0) + version: 4.6.0(eslint@8.57.0) eslint-plugin-react-refresh: specifier: ^0.3.5 - version: 0.3.5(eslint@8.56.0) + version: 0.3.5(eslint@8.57.0) husky: specifier: ^8.0.3 version: 8.0.3 @@ -111,16 +111,10 @@ importers: version: 3.15.1 vite: specifier: ^4.5.0 - version: 4.5.1(@types/node@20.11.19) + version: 4.5.1(@types/node@20.11.24) packages/walletkit: dependencies: - '@particle-network/auth': - specifier: ^1.2.2 - version: 1.2.2 - '@particle-network/provider': - specifier: ^1.2.1 - version: 1.2.1(@particle-network/auth@1.2.2) qrcode: specifier: ^1.5.3 version: 1.5.3 @@ -139,7 +133,7 @@ importers: version: 1.14.0 '@vanilla-extract/vite-plugin': specifier: ^3.9.2 - version: 3.9.3(@types/node@20.11.19)(vite@4.5.1) + version: 3.9.3(@types/node@20.11.24)(vite@4.5.1) '@vitejs/plugin-react': specifier: ^4.2.0 version: 4.2.1(vite@4.5.1) @@ -163,10 +157,10 @@ importers: version: 1.21.4(typescript@5.3.3) vite: specifier: ^4.5.0 - version: 4.5.1(@types/node@20.11.19) + version: 4.5.1(@types/node@20.11.24) vite-plugin-dts: specifier: ^3.6.3 - version: 3.7.0(@types/node@20.11.19)(rollup@4.12.0)(typescript@5.3.3)(vite@4.5.1) + version: 3.7.0(@types/node@20.11.24)(rollup@4.12.0)(typescript@5.3.3)(vite@4.5.1) wagmi: specifier: ^1.4.7 version: 1.4.13(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(viem@1.21.4) @@ -476,8 +470,8 @@ packages: dependencies: regenerator-runtime: 0.14.1 - /@babel/runtime@7.23.9: - resolution: {integrity: sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==} + /@babel/runtime@7.24.0: + resolution: {integrity: sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==} engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.1 @@ -521,7 +515,7 @@ packages: /@changesets/apply-release-plan@7.0.0: resolution: {integrity: sha512-vfi69JR416qC9hWmFGSxj7N6wA5J222XNBmezSVATPWDVPIF7gkd4d8CpbEbXmRWbVrkoli3oerGS6dcL/BGsQ==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.0 '@changesets/config': 3.0.0 '@changesets/get-version-range-type': 0.4.0 '@changesets/git': 3.0.0 @@ -539,7 +533,7 @@ packages: /@changesets/assemble-release-plan@6.0.0: resolution: {integrity: sha512-4QG7NuisAjisbW4hkLCmGW2lRYdPrKzro+fCtZaILX+3zdUELSvYjpL4GTv0E4aM9Mef3PuIQp89VmHJ4y2bfw==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.0 '@changesets/errors': 0.2.0 '@changesets/get-dependents-graph': 2.0.0 '@changesets/types': 6.0.0 @@ -557,7 +551,7 @@ packages: resolution: {integrity: sha512-iJ91xlvRnnrJnELTp4eJJEOPjgpF3NOh4qeQehM6Ugiz9gJPRZ2t+TsXun6E3AMN4hScZKjqVXl0TX+C7AB3ZQ==} hasBin: true dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.0 '@changesets/apply-release-plan': 7.0.0 '@changesets/assemble-release-plan': 6.0.0 '@changesets/changelog-git': 0.2.0 @@ -572,7 +566,7 @@ packages: '@changesets/types': 6.0.0 '@changesets/write': 0.3.0 '@manypkg/get-packages': 1.1.3 - '@types/semver': 7.5.7 + '@types/semver': 7.5.8 ansi-colors: 4.1.3 chalk: 2.4.2 ci-info: 3.9.0 @@ -583,7 +577,7 @@ packages: meow: 6.1.1 outdent: 0.5.0 p-limit: 2.3.0 - preferred-pm: 3.1.2 + preferred-pm: 3.1.3 resolve-from: 5.0.0 semver: 7.6.0 spawndamnit: 2.0.0 @@ -622,7 +616,7 @@ packages: /@changesets/get-release-plan@4.0.0: resolution: {integrity: sha512-9L9xCUeD/Tb6L/oKmpm8nyzsOzhdNBBbt/ZNcjynbHC07WW4E1eX8NMGC5g5SbM5z/V+MOrYsJ4lRW41GCbg3w==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.0 '@changesets/assemble-release-plan': 6.0.0 '@changesets/config': 3.0.0 '@changesets/pre': 2.0.0 @@ -638,7 +632,7 @@ packages: /@changesets/git@3.0.0: resolution: {integrity: sha512-vvhnZDHe2eiBNRFHEgMiGd2CT+164dfYyrJDhwwxTVD/OW0FUD6G7+4DIx1dNwkwjHyzisxGAU96q0sVNBns0w==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.0 '@changesets/errors': 0.2.0 '@changesets/types': 6.0.0 '@manypkg/get-packages': 1.1.3 @@ -663,7 +657,7 @@ packages: /@changesets/pre@2.0.0: resolution: {integrity: sha512-HLTNYX/A4jZxc+Sq8D1AMBsv+1qD6rmmJtjsCJa/9MSRybdxh0mjbTvE6JYZQ/ZiQ0mMlDOlGPXTm9KLTU3jyw==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.0 '@changesets/errors': 0.2.0 '@changesets/types': 6.0.0 '@manypkg/get-packages': 1.1.3 @@ -673,7 +667,7 @@ packages: /@changesets/read@0.6.0: resolution: {integrity: sha512-ZypqX8+/im1Fm98K4YcZtmLKgjs1kDQ5zHpc2U1qdtNBmZZfo/IBiG162RoP0CUF05tvp2y4IspH11PLnPxuuw==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.0 '@changesets/git': 3.0.0 '@changesets/logger': 0.1.0 '@changesets/parse': 0.4.0 @@ -694,7 +688,7 @@ packages: /@changesets/write@0.3.0: resolution: {integrity: sha512-slGLb21fxZVUYbyea+94uFiD6ntQW0M2hIKNznFizDhZPDgn2c/fv1UzzlW43RVzh1BEDuIqW6hzlJ1OflNmcw==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.0 '@changesets/types': 6.0.0 fs-extra: 7.0.1 human-id: 1.0.2 @@ -728,14 +722,14 @@ packages: - supports-color - utf-8-validate - /@commitlint/cli@18.6.1(@types/node@20.11.19)(typescript@5.3.3): + /@commitlint/cli@18.6.1(@types/node@20.11.24)(typescript@5.3.3): resolution: {integrity: sha512-5IDE0a+lWGdkOvKH892HHAZgbAjcj1mT5QrfA/SVbLJV/BbBMGyKN0W5mhgjekPJJwEQdVNvhl9PwUacY58Usw==} engines: {node: '>=v18'} hasBin: true dependencies: '@commitlint/format': 18.6.1 '@commitlint/lint': 18.6.1 - '@commitlint/load': 18.6.1(@types/node@20.11.19)(typescript@5.3.3) + '@commitlint/load': 18.6.1(@types/node@20.11.24)(typescript@5.3.3) '@commitlint/read': 18.6.1 '@commitlint/types': 18.6.1 execa: 5.1.1 @@ -807,7 +801,7 @@ packages: '@commitlint/types': 18.6.1 dev: true - /@commitlint/load@18.6.1(@types/node@20.11.19)(typescript@5.3.3): + /@commitlint/load@18.6.1(@types/node@20.11.24)(typescript@5.3.3): resolution: {integrity: sha512-p26x8734tSXUHoAw0ERIiHyW4RaI4Bj99D8YgUlVV9SedLf8hlWAfyIFhHRIhfPngLlCe0QYOdRKYFt8gy56TA==} engines: {node: '>=v18'} dependencies: @@ -817,7 +811,7 @@ packages: '@commitlint/types': 18.6.1 chalk: 4.1.2 cosmiconfig: 8.3.6(typescript@5.3.3) - cosmiconfig-typescript-loader: 5.0.0(@types/node@20.11.19)(cosmiconfig@8.3.6)(typescript@5.3.3) + cosmiconfig-typescript-loader: 5.0.0(@types/node@20.11.24)(cosmiconfig@8.3.6)(typescript@5.3.3) lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 lodash.uniq: 4.5.0 @@ -1411,13 +1405,13 @@ packages: dev: true optional: true - /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0): + /@eslint-community/eslint-utils@4.4.0(eslint@8.57.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 dependencies: - eslint: 8.56.0 + eslint: 8.57.0 eslint-visitor-keys: 3.4.3 dev: true @@ -1443,8 +1437,8 @@ packages: - supports-color dev: true - /@eslint/js@8.56.0: - resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==} + /@eslint/js@8.57.0: + resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true @@ -1519,7 +1513,7 @@ packages: /@manypkg/find-root@1.1.0: resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.0 '@types/node': 12.20.55 find-up: 4.1.0 fs-extra: 8.1.0 @@ -1528,7 +1522,7 @@ packages: /@manypkg/get-packages@1.1.3: resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==} dependencies: - '@babel/runtime': 7.23.9 + '@babel/runtime': 7.24.0 '@changesets/types': 4.1.0 '@manypkg/find-root': 1.1.0 fs-extra: 8.1.0 @@ -1597,24 +1591,24 @@ packages: transitivePeerDependencies: - supports-color - /@microsoft/api-extractor-model@7.28.3(@types/node@20.11.19): + /@microsoft/api-extractor-model@7.28.3(@types/node@20.11.24): resolution: {integrity: sha512-wT/kB2oDbdZXITyDh2SQLzaWwTOFbV326fP0pUwNW00WeliARs0qjmXBWmGWardEzp2U3/axkO3Lboqun6vrig==} dependencies: '@microsoft/tsdoc': 0.14.2 '@microsoft/tsdoc-config': 0.16.2 - '@rushstack/node-core-library': 3.62.0(@types/node@20.11.19) + '@rushstack/node-core-library': 3.62.0(@types/node@20.11.24) transitivePeerDependencies: - '@types/node' dev: true - /@microsoft/api-extractor@7.39.0(@types/node@20.11.19): + /@microsoft/api-extractor@7.39.0(@types/node@20.11.24): resolution: {integrity: sha512-PuXxzadgnvp+wdeZFPonssRAj/EW4Gm4s75TXzPk09h3wJ8RS3x7typf95B4vwZRrPTQBGopdUl+/vHvlPdAcg==} hasBin: true dependencies: - '@microsoft/api-extractor-model': 7.28.3(@types/node@20.11.19) + '@microsoft/api-extractor-model': 7.28.3(@types/node@20.11.24) '@microsoft/tsdoc': 0.14.2 '@microsoft/tsdoc-config': 0.16.2 - '@rushstack/node-core-library': 3.62.0(@types/node@20.11.19) + '@rushstack/node-core-library': 3.62.0(@types/node@20.11.24) '@rushstack/rig-package': 0.5.1 '@rushstack/ts-command-line': 4.17.1 colors: 1.2.5 @@ -1973,19 +1967,6 @@ packages: uuidv4: 6.2.13 dev: false - /@particle-network/provider@1.2.1(@particle-network/auth@1.2.2): - resolution: {integrity: sha512-mE3CEmzOQu6IrZxK0TJ5T+jRXsF58DNXfvnqO2Crkhr7IHJKbSJaLcrzPC1y95sYWJjYmaOD1gd6Ea66+7sYnA==} - peerDependencies: - '@particle-network/auth': '*' - dependencies: - '@particle-network/auth': 1.2.2 - '@particle-network/chains': 1.3.3 - axios: 1.6.5 - uuid: 8.3.2 - transitivePeerDependencies: - - debug - dev: false - /@popperjs/core@2.11.8: resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} dev: false @@ -2114,7 +2095,7 @@ packages: dev: true optional: true - /@rushstack/node-core-library@3.62.0(@types/node@20.11.19): + /@rushstack/node-core-library@3.62.0(@types/node@20.11.24): resolution: {integrity: sha512-88aJn2h8UpSvdwuDXBv1/v1heM6GnBf3RjEy6ZPP7UnzHNCqOHA2Ut+ScYUbXcqIdfew9JlTAe3g+cnX9xQ/Aw==} peerDependencies: '@types/node': '*' @@ -2122,7 +2103,7 @@ packages: '@types/node': optional: true dependencies: - '@types/node': 20.11.19 + '@types/node': 20.11.24 colors: 1.2.5 fs-extra: 7.0.1 import-lazy: 4.0.0 @@ -2545,8 +2526,8 @@ packages: dependencies: undici-types: 5.26.5 - /@types/node@20.11.19: - resolution: {integrity: sha512-7xMnVEcZFu0DikYjWOlRq7NTPETrm7teqUT2WkQjrTIkEgUyyGdWsj/Zg8bEJt5TNklzbPD1X3fqfsHw3SpapQ==} + /@types/node@20.11.24: + resolution: {integrity: sha512-Kza43ewS3xoLgCEpQrsT+xRo/EJej1y0kVYGiLFE1NEODXGzTfwiC6tXTLMQskn1X4/Rjlh0MQUvx9W+L9long==} dependencies: undici-types: 5.26.5 dev: true @@ -2584,8 +2565,8 @@ packages: /@types/scheduler@0.16.8: resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==} - /@types/semver@7.5.7: - resolution: {integrity: sha512-/wdoPq1QqkSj9/QOeKkFquEuPzQbHTWAMPH/PaUMB+JuR31lXhlWXRZ52IpfDYVlDOUBvX09uBrPwxGT1hjNBg==} + /@types/semver@7.5.8: + resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==} dev: true /@types/trusted-types@2.0.7: @@ -2603,7 +2584,7 @@ packages: dependencies: '@types/node': 20.10.8 - /@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.56.0)(typescript@5.3.3): + /@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.57.0)(typescript@5.3.3): resolution: {integrity: sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -2615,12 +2596,12 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.10.0 - '@typescript-eslint/parser': 5.62.0(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.3.3) '@typescript-eslint/scope-manager': 5.62.0 - '@typescript-eslint/type-utils': 5.62.0(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/type-utils': 5.62.0(eslint@8.57.0)(typescript@5.3.3) + '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.3.3) debug: 4.3.4 - eslint: 8.56.0 + eslint: 8.57.0 graphemer: 1.4.0 ignore: 5.3.1 natural-compare-lite: 1.4.0 @@ -2631,7 +2612,7 @@ packages: - supports-color dev: true - /@typescript-eslint/parser@5.62.0(eslint@8.56.0)(typescript@5.3.3): + /@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.3.3): resolution: {integrity: sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -2645,7 +2626,7 @@ packages: '@typescript-eslint/types': 5.62.0 '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.3.3) debug: 4.3.4 - eslint: 8.56.0 + eslint: 8.57.0 typescript: 5.3.3 transitivePeerDependencies: - supports-color @@ -2659,7 +2640,7 @@ packages: '@typescript-eslint/visitor-keys': 5.62.0 dev: true - /@typescript-eslint/type-utils@5.62.0(eslint@8.56.0)(typescript@5.3.3): + /@typescript-eslint/type-utils@5.62.0(eslint@8.57.0)(typescript@5.3.3): resolution: {integrity: sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -2670,9 +2651,9 @@ packages: optional: true dependencies: '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.3.3) - '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.3.3) debug: 4.3.4 - eslint: 8.56.0 + eslint: 8.57.0 tsutils: 3.21.0(typescript@5.3.3) typescript: 5.3.3 transitivePeerDependencies: @@ -2705,19 +2686,19 @@ packages: - supports-color dev: true - /@typescript-eslint/utils@5.62.0(eslint@8.56.0)(typescript@5.3.3): + /@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.3.3): resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) '@types/json-schema': 7.0.15 - '@types/semver': 7.5.7 + '@types/semver': 7.5.8 '@typescript-eslint/scope-manager': 5.62.0 '@typescript-eslint/types': 5.62.0 '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.3.3) - eslint: 8.56.0 + eslint: 8.57.0 eslint-scope: 5.1.1 semver: 7.6.0 transitivePeerDependencies: @@ -2761,7 +2742,7 @@ packages: outdent: 0.8.0 dev: true - /@vanilla-extract/integration@6.2.4(@types/node@20.11.19): + /@vanilla-extract/integration@6.2.4(@types/node@20.11.24): resolution: {integrity: sha512-+AfymNMVq9sEUe0OJpdCokmPZg4Zi6CqKaW/PnUOfDwEn53ighHOMOBl5hAgxYR8Kiz9NG43Bn00mkjWlFi+ng==} dependencies: '@babel/core': 7.23.7 @@ -2775,8 +2756,8 @@ packages: lodash: 4.17.21 mlly: 1.4.2 outdent: 0.8.0 - vite: 4.5.1(@types/node@20.11.19) - vite-node: 0.28.5(@types/node@20.11.19) + vite: 4.5.1(@types/node@20.11.24) + vite-node: 0.28.5(@types/node@20.11.24) transitivePeerDependencies: - '@types/node' - less @@ -2792,16 +2773,16 @@ packages: resolution: {integrity: sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ==} dev: true - /@vanilla-extract/vite-plugin@3.9.3(@types/node@20.11.19)(vite@4.5.1): + /@vanilla-extract/vite-plugin@3.9.3(@types/node@20.11.24)(vite@4.5.1): resolution: {integrity: sha512-bGyHG98OYTRs5roLRv7LDeyRnD72+vBLonk8cC9VG/xd6hsiHPPj5GyBwoKElT7DyDRfapxWLwLlhgYynrW2Fw==} peerDependencies: vite: ^2.2.3 || ^3.0.0 || ^4.0.3 || ^5.0.0 dependencies: - '@vanilla-extract/integration': 6.2.4(@types/node@20.11.19) + '@vanilla-extract/integration': 6.2.4(@types/node@20.11.24) outdent: 0.8.0 postcss: 8.4.33 postcss-load-config: 4.0.2(postcss@8.4.33) - vite: 4.5.1(@types/node@20.11.19) + vite: 4.5.1(@types/node@20.11.24) transitivePeerDependencies: - '@types/node' - less @@ -2841,7 +2822,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7) '@types/babel__core': 7.20.5 react-refresh: 0.14.0 - vite: 4.5.1(@types/node@20.11.19) + vite: 4.5.1(@types/node@20.11.24) transitivePeerDependencies: - supports-color dev: true @@ -3564,7 +3545,7 @@ packages: dependencies: call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.4 + es-abstract: 1.22.5 es-shim-unscopables: 1.0.2 dev: true @@ -3575,11 +3556,11 @@ packages: array-buffer-byte-length: 1.0.1 call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.4 + es-abstract: 1.22.5 es-errors: 1.3.0 get-intrinsic: 1.2.4 is-array-buffer: 3.0.4 - is-shared-array-buffer: 1.0.2 + is-shared-array-buffer: 1.0.3 dev: true /arrify@1.0.1: @@ -3596,10 +3577,6 @@ packages: dependencies: tslib: 2.6.2 - /asynckit@0.4.0: - resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} - dev: false - /atomic-sleep@1.0.0: resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==} engines: {node: '>=8.0.0'} @@ -3608,20 +3585,12 @@ packages: resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==} engines: {node: '>= 0.4'} - /available-typed-arrays@1.0.6: - resolution: {integrity: sha512-j1QzY8iPNPG4o4xmO3ptzpRxTciqD3MgEHtifP/YnJpIo58Xu+ne4BejlbkuaLfXn/nz6HFiw29bLpj2PNMdGg==} + /available-typed-arrays@1.0.7: + resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} - dev: true - - /axios@1.6.5: - resolution: {integrity: sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==} dependencies: - follow-redirects: 1.15.4 - form-data: 4.0.0 - proxy-from-env: 1.1.0 - transitivePeerDependencies: - - debug - dev: false + possible-typed-array-names: 1.0.0 + dev: true /babel-plugin-macros@3.1.0: resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} @@ -3953,13 +3922,6 @@ packages: engines: {node: '>=0.1.90'} dev: true - /combined-stream@1.0.8: - resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} - engines: {node: '>= 0.8'} - dependencies: - delayed-stream: 1.0.0 - dev: false - /comma-separated-tokens@2.0.3: resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} @@ -4054,7 +4016,7 @@ packages: resolution: {integrity: sha512-ntakECeqg81KqMueeGJ79Q5ZgQNR+6eaE8sxGCx62zMbAIj65q+uYvatToew3m6eAGdU4gNZwpZ34NMe4GYswg==} requiresBuild: true - /cosmiconfig-typescript-loader@5.0.0(@types/node@20.11.19)(cosmiconfig@8.3.6)(typescript@5.3.3): + /cosmiconfig-typescript-loader@5.0.0(@types/node@20.11.24)(cosmiconfig@8.3.6)(typescript@5.3.3): resolution: {integrity: sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==} engines: {node: '>=v16'} peerDependencies: @@ -4062,7 +4024,7 @@ packages: cosmiconfig: '>=8.2' typescript: '>=4' dependencies: - '@types/node': 20.11.19 + '@types/node': 20.11.24 cosmiconfig: 8.3.6(typescript@5.3.3) jiti: 1.21.0 typescript: 5.3.3 @@ -4255,11 +4217,6 @@ packages: resolution: {integrity: sha512-ReEBKkIfe4ya47wlPYf/gu5ib6yUG0/Aez0JQZQz94kiWtRQvZIQbTiehsnwHvLSWJnQdhVeqYue7Id1dKr0qw==} engines: {node: '>=10'} - /delayed-stream@1.0.0: - resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} - engines: {node: '>=0.4.0'} - dev: false - /denque@2.1.0: resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==} engines: {node: '>=0.10'} @@ -4376,17 +4333,17 @@ packages: dependencies: is-arrayish: 0.2.1 - /es-abstract@1.22.4: - resolution: {integrity: sha512-vZYJlk2u6qHYxBOTjAeg7qUxHdNfih64Uu2J8QqWgXZ2cri0ZpJAkzDUK/q593+mvKwlxyaxr6F1Q+3LKoQRgg==} + /es-abstract@1.22.5: + resolution: {integrity: sha512-oW69R+4q2wG+Hc3KZePPZxOiisRIqfKBVo/HLx94QcJeWGU/8sZhCvc829rd1kS366vlJbzBfXf9yWwf0+Ko7w==} engines: {node: '>= 0.4'} dependencies: array-buffer-byte-length: 1.0.1 arraybuffer.prototype.slice: 1.0.3 - available-typed-arrays: 1.0.6 + available-typed-arrays: 1.0.7 call-bind: 1.0.7 es-define-property: 1.0.0 es-errors: 1.3.0 - es-set-tostringtag: 2.0.2 + es-set-tostringtag: 2.0.3 es-to-primitive: 1.2.1 function.prototype.name: 1.1.6 get-intrinsic: 1.2.4 @@ -4394,15 +4351,15 @@ packages: globalthis: 1.0.3 gopd: 1.0.1 has-property-descriptors: 1.0.2 - has-proto: 1.0.1 + has-proto: 1.0.3 has-symbols: 1.0.3 hasown: 2.0.1 internal-slot: 1.0.7 is-array-buffer: 3.0.4 is-callable: 1.2.7 - is-negative-zero: 2.0.2 + is-negative-zero: 2.0.3 is-regex: 1.1.4 - is-shared-array-buffer: 1.0.2 + is-shared-array-buffer: 1.0.3 is-string: 1.0.7 is-typed-array: 1.1.13 is-weakref: 1.0.2 @@ -4415,10 +4372,10 @@ packages: string.prototype.trim: 1.2.8 string.prototype.trimend: 1.0.7 string.prototype.trimstart: 1.0.7 - typed-array-buffer: 1.0.1 - typed-array-byte-length: 1.0.0 - typed-array-byte-offset: 1.0.1 - typed-array-length: 1.0.4 + typed-array-buffer: 1.0.2 + typed-array-byte-length: 1.0.1 + typed-array-byte-offset: 1.0.2 + typed-array-length: 1.0.5 unbox-primitive: 1.0.2 which-typed-array: 1.1.14 dev: true @@ -4435,8 +4392,8 @@ packages: engines: {node: '>= 0.4'} dev: true - /es-set-tostringtag@2.0.2: - resolution: {integrity: sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==} + /es-set-tostringtag@2.0.3: + resolution: {integrity: sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==} engines: {node: '>= 0.4'} dependencies: get-intrinsic: 1.2.4 @@ -4710,21 +4667,21 @@ packages: engines: {node: '>=12'} dev: true - /eslint-plugin-react-hooks@4.6.0(eslint@8.56.0): + /eslint-plugin-react-hooks@4.6.0(eslint@8.57.0): resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==} engines: {node: '>=10'} peerDependencies: eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 dependencies: - eslint: 8.56.0 + eslint: 8.57.0 dev: true - /eslint-plugin-react-refresh@0.3.5(eslint@8.56.0): + /eslint-plugin-react-refresh@0.3.5(eslint@8.57.0): resolution: {integrity: sha512-61qNIsc7fo9Pp/mju0J83kzvLm0Bsayu7OQSLEoJxLDCBjIIyb87bkzufoOvdDxLkSlMfkF7UxomC4+eztUBSA==} peerDependencies: eslint: '>=7' dependencies: - eslint: 8.56.0 + eslint: 8.57.0 dev: true /eslint-scope@5.1.1: @@ -4748,15 +4705,15 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /eslint@8.56.0: - resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==} + /eslint@8.57.0: + resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} hasBin: true dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) '@eslint-community/regexpp': 4.10.0 '@eslint/eslintrc': 2.1.4 - '@eslint/js': 8.56.0 + '@eslint/js': 8.57.0 '@humanwhocodes/config-array': 0.11.14 '@humanwhocodes/module-importer': 1.0.1 '@nodelib/fs.walk': 1.2.8 @@ -5076,39 +5033,20 @@ packages: resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==} engines: {node: ^10.12.0 || >=12.0.0} dependencies: - flatted: 3.2.9 + flatted: 3.3.1 keyv: 4.5.4 rimraf: 3.0.2 dev: true - /flatted@3.2.9: - resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==} + /flatted@3.3.1: + resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==} dev: true - /follow-redirects@1.15.4: - resolution: {integrity: sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==} - engines: {node: '>=4.0'} - peerDependencies: - debug: '*' - peerDependenciesMeta: - debug: - optional: true - dev: false - /for-each@0.3.3: resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==} dependencies: is-callable: 1.2.7 - /form-data@4.0.0: - resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==} - engines: {node: '>= 6'} - dependencies: - asynckit: 0.4.0 - combined-stream: 1.0.8 - mime-types: 2.1.35 - dev: false - /fs-extra@7.0.1: resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==} engines: {node: '>=6 <7 || >=8'} @@ -5147,7 +5085,7 @@ packages: dependencies: call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.4 + es-abstract: 1.22.5 functions-have-names: 1.2.3 dev: true @@ -5183,7 +5121,7 @@ packages: dependencies: es-errors: 1.3.0 function-bind: 1.1.2 - has-proto: 1.0.1 + has-proto: 1.0.3 has-symbols: 1.0.3 hasown: 2.0.1 dev: true @@ -5352,6 +5290,11 @@ packages: resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==} engines: {node: '>= 0.4'} + /has-proto@1.0.3: + resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==} + engines: {node: '>= 0.4'} + dev: true + /has-symbols@1.0.3: resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==} engines: {node: '>= 0.4'} @@ -5528,7 +5471,7 @@ packages: dependencies: es-errors: 1.3.0 hasown: 2.0.1 - side-channel: 1.0.5 + side-channel: 1.0.6 dev: true /ioredis@5.3.2: @@ -5672,8 +5615,8 @@ packages: dependencies: is-docker: 3.0.0 - /is-negative-zero@2.0.2: - resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==} + /is-negative-zero@2.0.3: + resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==} engines: {node: '>= 0.4'} dev: true @@ -5725,8 +5668,9 @@ packages: has-tostringtag: 1.0.2 dev: true - /is-shared-array-buffer@1.0.2: - resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==} + /is-shared-array-buffer@1.0.3: + resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==} + engines: {node: '>= 0.4'} dependencies: call-bind: 1.0.7 dev: true @@ -6761,18 +6705,6 @@ packages: braces: 3.0.2 picomatch: 2.3.1 - /mime-db@1.52.0: - resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} - engines: {node: '>= 0.6'} - dev: false - - /mime-types@2.1.35: - resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} - engines: {node: '>= 0.6'} - dependencies: - mime-db: 1.52.0 - dev: false - /mime@3.0.0: resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==} engines: {node: '>=10.0.0'} @@ -7247,6 +7179,11 @@ packages: resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==} engines: {node: '>=10.13.0'} + /possible-typed-array-names@1.0.0: + resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} + engines: {node: '>= 0.4'} + dev: true + /postcss-load-config@4.0.2(postcss@8.4.33): resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} engines: {node: '>= 14'} @@ -7285,8 +7222,8 @@ packages: /preact@10.19.3: resolution: {integrity: sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==} - /preferred-pm@3.1.2: - resolution: {integrity: sha512-nk7dKrcW8hfCZ4H6klWcdRknBOXWzNQByJ0oJyX97BOupsYD+FzLS4hflgEu/uPUEHZCuRfMxzCBsuWd7OzT8Q==} + /preferred-pm@3.1.3: + resolution: {integrity: sha512-MkXsENfftWSRpzCzImcp4FRsCc3y1opwB73CfCNWyzMqArju2CrlMHlqB7VexKiPEOjGMbttv1r9fSCn5S610w==} engines: {node: '>=10'} dependencies: find-up: 5.0.0 @@ -7337,10 +7274,6 @@ packages: /proxy-compare@2.5.1: resolution: {integrity: sha512-oyfc0Tx87Cpwva5ZXezSp5V9vht1c7dZBhvuV/y3ctkgMVUmiAGDVeeB0dKhGSyT0v1ZTEQYpe/RXlBVBNuCLA==} - /proxy-from-env@1.1.0: - resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} - dev: false - /pseudomap@1.0.2: resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==} dev: true @@ -7570,7 +7503,7 @@ packages: call-bind: 1.0.7 define-properties: 1.2.1 es-errors: 1.3.0 - set-function-name: 2.0.1 + set-function-name: 2.0.2 dev: true /regexpu-core@4.8.0: @@ -7855,11 +7788,12 @@ packages: has-property-descriptors: 1.0.2 dev: true - /set-function-name@2.0.1: - resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==} + /set-function-name@2.0.2: + resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==} engines: {node: '>= 0.4'} dependencies: define-data-property: 1.1.4 + es-errors: 1.3.0 functions-have-names: 1.2.3 has-property-descriptors: 1.0.2 dev: true @@ -7900,8 +7834,8 @@ packages: get-intrinsic: 1.2.2 object-inspect: 1.13.1 - /side-channel@1.0.5: - resolution: {integrity: sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==} + /side-channel@1.0.6: + resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==} engines: {node: '>= 0.4'} dependencies: call-bind: 1.0.7 @@ -8095,7 +8029,7 @@ packages: dependencies: call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.4 + es-abstract: 1.22.5 dev: true /string.prototype.trimend@1.0.7: @@ -8103,7 +8037,7 @@ packages: dependencies: call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.4 + es-abstract: 1.22.5 dev: true /string.prototype.trimstart@1.0.7: @@ -8111,7 +8045,7 @@ packages: dependencies: call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.4 + es-abstract: 1.22.5 dev: true /string_decoder@1.3.0: @@ -8385,8 +8319,8 @@ packages: engines: {node: '>=14.16'} dev: true - /typed-array-buffer@1.0.1: - resolution: {integrity: sha512-RSqu1UEuSlrBhHTWC8O9FnPjOduNs4M7rJ4pRKoEjtx1zUNOPN2sSXHLDX+Y2WPbHIxbvg4JFo2DNAEfPIKWoQ==} + /typed-array-buffer@1.0.2: + resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==} engines: {node: '>= 0.4'} dependencies: call-bind: 1.0.7 @@ -8394,34 +8328,39 @@ packages: is-typed-array: 1.1.13 dev: true - /typed-array-byte-length@1.0.0: - resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==} + /typed-array-byte-length@1.0.1: + resolution: {integrity: sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==} engines: {node: '>= 0.4'} dependencies: call-bind: 1.0.7 for-each: 0.3.3 - has-proto: 1.0.1 + gopd: 1.0.1 + has-proto: 1.0.3 is-typed-array: 1.1.13 dev: true - /typed-array-byte-offset@1.0.1: - resolution: {integrity: sha512-tcqKMrTRXjqvHN9S3553NPCaGL0VPgFI92lXszmrE8DMhiDPLBYLlvo8Uu4WZAAX/aGqp/T1sbA4ph8EWjDF9Q==} + /typed-array-byte-offset@1.0.2: + resolution: {integrity: sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==} engines: {node: '>= 0.4'} dependencies: - available-typed-arrays: 1.0.6 + available-typed-arrays: 1.0.7 call-bind: 1.0.7 for-each: 0.3.3 gopd: 1.0.1 - has-proto: 1.0.1 + has-proto: 1.0.3 is-typed-array: 1.1.13 dev: true - /typed-array-length@1.0.4: - resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==} + /typed-array-length@1.0.5: + resolution: {integrity: sha512-yMi0PlwuznKHxKmcpoOdeLwxBoVPkqZxd7q2FgMkmD3bNwvF5VW0+UlUQ1k1vmktTu4Yu13Q0RIxEP8+B+wloA==} + engines: {node: '>= 0.4'} dependencies: call-bind: 1.0.7 for-each: 0.3.3 + gopd: 1.0.1 + has-proto: 1.0.3 is-typed-array: 1.1.13 + possible-typed-array-names: 1.0.0 dev: true /typedarray-to-buffer@3.1.5: @@ -8805,7 +8744,7 @@ packages: - utf-8-validate - zod - /vite-node@0.28.5(@types/node@20.11.19): + /vite-node@0.28.5(@types/node@20.11.24): resolution: {integrity: sha512-LmXb9saMGlrMZbXTvOveJKwMTBTNUH66c8rJnQ0ZPNX+myPEol64+szRzXtV5ORb0Hb/91yq+/D3oERoyAt6LA==} engines: {node: '>=v14.16.0'} hasBin: true @@ -8817,7 +8756,7 @@ packages: picocolors: 1.0.0 source-map: 0.6.1 source-map-support: 0.5.21 - vite: 4.5.1(@types/node@20.11.19) + vite: 4.5.1(@types/node@20.11.24) transitivePeerDependencies: - '@types/node' - less @@ -8829,7 +8768,7 @@ packages: - terser dev: true - /vite-plugin-dts@3.7.0(@types/node@20.11.19)(rollup@4.12.0)(typescript@5.3.3)(vite@4.5.1): + /vite-plugin-dts@3.7.0(@types/node@20.11.24)(rollup@4.12.0)(typescript@5.3.3)(vite@4.5.1): resolution: {integrity: sha512-np1uPaYzu98AtPReB8zkMnbjwcNHOABsLhqVOf81b3ol9b5M2wPcAVs8oqPnOpr6Us+7yDXVauwkxsk5+ldmRA==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: @@ -8839,13 +8778,13 @@ packages: vite: optional: true dependencies: - '@microsoft/api-extractor': 7.39.0(@types/node@20.11.19) + '@microsoft/api-extractor': 7.39.0(@types/node@20.11.24) '@rollup/pluginutils': 5.1.0(rollup@4.12.0) '@vue/language-core': 1.8.27(typescript@5.3.3) debug: 4.3.4 kolorist: 1.8.0 typescript: 5.3.3 - vite: 4.5.1(@types/node@20.11.19) + vite: 4.5.1(@types/node@20.11.24) vue-tsc: 1.8.27(typescript@5.3.3) transitivePeerDependencies: - '@types/node' @@ -8903,7 +8842,7 @@ packages: fsevents: 2.3.3 dev: true - /vite@4.5.1(@types/node@20.11.19): + /vite@4.5.1(@types/node@20.11.24): resolution: {integrity: sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -8931,7 +8870,7 @@ packages: terser: optional: true dependencies: - '@types/node': 20.11.19 + '@types/node': 20.11.24 esbuild: 0.18.20 postcss: 8.4.33 rollup: 3.29.4 @@ -9062,7 +9001,7 @@ packages: resolution: {integrity: sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==} engines: {node: '>= 0.4'} dependencies: - available-typed-arrays: 1.0.6 + available-typed-arrays: 1.0.7 call-bind: 1.0.7 for-each: 0.3.3 gopd: 1.0.1 diff --git a/website/package.json b/website/package.json index e242413e..fb733124 100644 --- a/website/package.json +++ b/website/package.json @@ -14,7 +14,6 @@ "@emotion/styled": "^11.11.0", "@mdx-js/mdx": "~2.1.5", "@mdx-js/react": "~2.2.1", - "@particle-network/auth": "^1.2.2", "@totejs/icons": "^2.19.0", "@totejs/uikit": "^2.54.5", "@node-real/walletkit": "workspace:*", diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx index 6170b29e..102d4a39 100644 --- a/website/src/pages/index.mdx +++ b/website/src/pages/index.mdx @@ -118,7 +118,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. */} @@ -181,6 +181,34 @@ const config = createConfig( ); ``` +## Using `render` to customize the content of each option + +It should be noted that if your dApp supports small screens or light/dark mode, you may need to +write different content for the corresponding scenarios. The `render` callback function will pass +the `layout`(list/grid) and `colorMode`(light/dark) to tell you the current state. + +```tsx live=false +metaMask({ + name: 'MetaMask', + logos: { + default: , + }, + // Disabling a wallet will cut off the connection between the dApp and the wallet, + // the existing caches will be cleaned up, preventing automatically connect to the wallet. + isDisabled: true, + render({ wallet, colorMode, layout, onClick }) { + const { id, name, logo, isDisabled } = wallet; + + return ( +
                                  +
                                  {name}
                                  +
                                  {logo}
                                  +
                                  + ); + }, +}); +``` + ## Customizing ConnectButton Note that `show()` will open the `connected page` instead of the `connectors page` once the wallet @@ -200,13 +228,13 @@ is connected. ``` -## Customizing walletConnect recommended wallets +## Customizing WalletConnect recommended wallets -Sometimes, we need to customize walletConnect's wallets, which we can configure as follows. The -wallet id can be obtained from [walletConnect explorer](https://walletconnect.com/explorer). +Sometimes, we need to customize WalletConnect's wallets, which we can configure as follows. The +wallet id can be obtained from [WalletConnect explorer](https://walletconnect.com/explorer). Other supported configurations are also available from -[walletConnect's official documentation](https://docs.walletconnect.com/advanced/walletconnectmodal/options). +[WalletConnect's official documentation](https://docs.walletconnect.com/advanced/walletconnectmodal/options). ```tsx live=false const config = createConfig( @@ -224,7 +252,7 @@ const config = createConfig( metaMask(), walletConnect({ connectorOptions: { - showQrModal: true, // Open walletConnect's modal directly rather than displaying the QR code. + showQrModal: true, // Open WalletConnect's modal directly rather than displaying the QR code. qrModalOptions: { explorerRecommendedWalletIds: [ '8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4', @@ -420,6 +448,9 @@ interface WalletKitOptions { // Provide a disclaimer for things like terms and conditions that will be displayed to users when they're not yet connected. disclaimer?: ReactNode; + // When the amount of wallets exceeds or equals this value, switch to the grid layout. + gridLayoutThreshold?: number; + hideNoWalletCTA?: boolean; hideOfficialWalletConnectCTA?: boolean; @@ -478,3 +509,39 @@ export interface DefaultConfigProps { stallTimeout?: number; } ``` + +### 4. WalletProps + +```tsx live=false +export interface WalletRenderProps { + layout: 'list' | 'grid'; + colorMode: ColorMode; + wallet: { + id: string; + name: string; + logo: ReactElement; + isDisabled?: boolean; + }; + onClick: (e: React.MouseEvent) => void; +} + +export interface WalletProps { + id: string; + name: string; + logos: { + default: ReactElement | { [x in ColorMode]: ReactElement }; + transparent?: ReactElement | { [x in ColorMode]: ReactElement }; + }; + downloadUrls: { + default: string | undefined; + }; + spinnerColor?: string; + showQRCode?: boolean; + isInstalled: () => boolean | undefined; + isDisabled?: boolean; + createConnector: (chains: Chain[]) => Connector; + getDeepLink: () => string | undefined; + getQRCodeUri?: (uri: string) => string; + render?: (props: WalletRenderProps) => ReactNode; +} +``` diff --git a/website/src/playground/index.tsx b/website/src/playground/index.tsx index c42d8777..780c7bc5 100644 --- a/website/src/playground/index.tsx +++ b/website/src/playground/index.tsx @@ -17,28 +17,11 @@ import { tokenPocket, trustWallet, walletConnect, - // particleWallet, } from '@node-real/walletkit/wallets'; -// import { ParticleNetwork } from '@particle-network/auth'; import { chains } from './chains'; import { Box, useColorMode } from '@totejs/uikit'; -// const { VITE_PARTICLE_APP_PROJECT_ID, VITE_PARTICLE_APP_CLIENT_KEY, VITE_PARTICLE_APP_APP_ID } = -// import.meta.env; - -// const particle = new ParticleNetwork({ -// projectId: VITE_PARTICLE_APP_PROJECT_ID, -// clientKey: VITE_PARTICLE_APP_CLIENT_KEY, -// appId: VITE_PARTICLE_APP_APP_ID, -// wallet: { displayWalletEntry: true }, -// }); - -// particle.setERC4337({ -// name: 'BICONOMY', -// version: '2.0.0', -// }); - const config = createConfig( getDefaultConfig({ appName: 'WalletKit', @@ -54,7 +37,6 @@ const config = createConfig( trustWallet(), walletConnect(), // mathWallet(), - // particleWallet(), ], }), );