From f81777bd967ad60953f53a3bce1d7c9f66b0c5aa Mon Sep 17 00:00:00 2001 From: Wenty Li <105278450+wenty22@users.noreply.github.com> Date: Mon, 22 Apr 2024 14:02:38 +0800 Subject: [PATCH] Alpha (#142) * feat: Support embedding modal into page. (#135) * docs: Change `@totejs/uikit` -> `@node-real/uikit` * fix: Update grid layout condition * feat: Support embedding modal into page. * chore: update versions (alpha) (#136) Co-authored-by: github-actions[bot] * fix: Fixed ssr issue (#137) * docs: Change `@totejs/uikit` -> `@node-real/uikit` * fix: Update grid layout condition * feat: Support embedding modal into page. * fix: Fixed ssr issue * chore: update versions (alpha) (#138) Co-authored-by: github-actions[bot] * docs: Update docs (#139) * docs: Change `@totejs/uikit` -> `@node-real/uikit` * fix: Update grid layout condition * feat: Support embedding modal into page. * fix: Fixed ssr issue * docs: Update docs * docs: Update docs (#140) * docs: Change `@totejs/uikit` -> `@node-real/uikit` * fix: Update grid layout condition * feat: Support embedding modal into page. * fix: Fixed ssr issue * docs: Update docs * docs: Update docs * Update docs (#141) * docs: Change `@totejs/uikit` -> `@node-real/uikit` * fix: Update grid layout condition * feat: Support embedding modal into page. * fix: Fixed ssr issue * docs: Update docs * docs: Update docs * docs: Update docs --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] --- .changeset/eight-bulldogs-heal.md | 5 + .changeset/olive-brooms-lie.md | 5 + .changeset/pre.json | 14 + packages/walletkit/CHANGELOG.md | 12 + packages/walletkit/package.json | 2 +- .../components/Modal/ModalContent/index.tsx | 11 + .../Modal/ModalContent/style.css.ts | 21 + .../src/base/components/Modal/index.tsx | 7 +- .../src/base/components/Modal/styles.css.ts | 18 - .../walletkit/src/components/Avatar/index.tsx | 4 +- .../src/components/DisconnectButton/index.tsx | 22 +- .../src/components/ModalProvider/context.ts | 28 -- .../src/components/ModalProvider/index.tsx | 98 ----- .../walletkit/src/components/Navbar/index.tsx | 20 +- .../ProfileModalProvider/context.ts | 13 + .../ProfileModalProvider/index.tsx | 34 ++ .../ProfileModal}/index.tsx | 18 +- .../ProfileModal}/styles.css.ts | 0 .../src/components/RouteProvider/context.tsx | 4 +- .../src/components/RouteProvider/index.tsx | 23 +- .../SwitchNetworkModal}/ChainOption/index.tsx | 0 .../ChainOption/styles.css.ts | 0 .../ChainSpinner/index.tsx | 0 .../ChainSpinner/styles.css.ts | 0 .../SwitchNetworkProvider/context.ts | 18 + .../SwitchNetworkProvider/index.tsx | 72 ++++ .../components/SwitchNetworkModal/index.tsx | 91 ++++- .../SwitchNetworkModal}/styles.css.ts | 0 .../src/components/ThemeProvider/context.ts | 3 +- .../src/components/ThemeProvider/index.tsx | 21 +- .../ConnectButton/ConnectedInfo/index.tsx | 13 +- .../WalletKitButton/ConnectButton/index.tsx | 14 +- .../ConnectButtonRenderer/index.tsx | 17 +- .../WalletKitEmbeddedModal/index.tsx | 22 ++ .../WalletKitEmbeddedModal/style.css.ts | 17 + .../ConnectWithQRCode/index.tsx | 7 +- .../ConnectWithQRCode/styles.css.ts | 0 .../Connecting/ConnectSpinner/index.tsx | 0 .../Connecting/ConnectSpinner/styles.css.ts | 0 .../Connecting/Content/Description/index.tsx | 0 .../Content/Description/styles.css.ts | 0 .../Connecting/Content/ErrorTitle/index.tsx | 0 .../Content/ErrorTitle/styles.css.ts | 0 .../Connecting/Content/InfoTitle/index.tsx | 0 .../Content/InfoTitle/styles.css.ts | 0 .../Connecting/Content/index.tsx | 0 .../Connecting/Content/styles.css.ts | 0 .../Connecting/UnsupportedContent/index.tsx | 2 +- .../WalletKitModal}/Connecting/index.tsx | 7 +- .../WalletKitModal}/Connecting/styles.css.ts | 0 .../GridLayout/WalletOption/index.tsx | 0 .../GridLayout/WalletOption/styles.css.ts | 0 .../Connectors/GridLayout/index.tsx | 3 +- .../Connectors/GridLayout/styles.css.ts | 0 .../ListLayout/WalletOption/index.tsx | 0 .../ListLayout/WalletOption/styles.css.ts | 0 .../Connectors/ListLayout/index.tsx | 3 +- .../Connectors/ListLayout/styles.css.ts | 0 .../WalletKitModal}/Connectors/index.tsx | 13 +- .../WalletKitModal}/Connectors/styles.css.ts | 0 .../WalletKitModalProvider/context.ts | 19 + .../WalletKitModalProvider/index.tsx | 51 +++ .../src/components/WalletKitModal/index.tsx | 18 +- .../components/WalletKitProvider/context.ts | 7 +- .../components/WalletKitProvider/index.tsx | 30 +- .../src/defaultConfig/getDefaultConfig.ts | 15 +- .../getDefaultProviderOptions.ts | 6 +- .../walletkit/src/hooks/useChainConfig.ts | 2 +- .../walletkit/src/hooks/useClickWallet.ts | 24 +- .../src/hooks/useWalletConnectModal.ts | 5 +- .../src/hooks/useWalletDownloadUrl.ts | 2 +- .../src/hooks/useWalletKitConnect.ts | 2 +- .../src/hooks/useWalletKitSwitchNetwork.ts | 2 +- .../walletkit/src/hooks/useWalletRender.ts | 1 + packages/walletkit/src/index.ts | 24 +- .../src/pages/SwitchNetwork/index.tsx | 75 ---- packages/walletkit/src/themes/base.ts | 5 +- packages/walletkit/test/App.tsx | 21 +- pnpm-lock.yaml | 359 ++++++++++++------ website/package.json | 4 +- website/src/App.tsx | 15 +- .../components/CodeBlock/CopyButton/index.tsx | 2 +- .../components/CodeBlock/Highlight/index.tsx | 2 +- .../components/CodeBlock/LiveCode/index.tsx | 2 +- .../components/CodeBlock/LiveCode/scope.tsx | 4 +- .../src/components/Layout/Header/index.tsx | 2 +- .../Layout/SwitchColorMode/index.tsx | 4 +- website/src/components/Layout/index.tsx | 2 +- website/src/components/MDXComponent/index.tsx | 14 +- website/src/components/SvgIcon/GitHubIcon.tsx | 2 +- website/src/main.tsx | 2 +- website/src/pages/index.mdx | 90 +++-- website/src/playground/example.tsx | 25 ++ website/src/playground/index.tsx | 35 +- website/src/theme/index.tsx | 2 +- 95 files changed, 962 insertions(+), 595 deletions(-) create mode 100644 .changeset/eight-bulldogs-heal.md create mode 100644 .changeset/olive-brooms-lie.md create mode 100644 .changeset/pre.json create mode 100644 packages/walletkit/src/base/components/Modal/ModalContent/index.tsx create mode 100644 packages/walletkit/src/base/components/Modal/ModalContent/style.css.ts delete mode 100644 packages/walletkit/src/components/ModalProvider/context.ts delete mode 100644 packages/walletkit/src/components/ModalProvider/index.tsx create mode 100644 packages/walletkit/src/components/ProfileModal/ProfileModalProvider/context.ts create mode 100644 packages/walletkit/src/components/ProfileModal/ProfileModalProvider/index.tsx rename packages/walletkit/src/{pages/Connected => components/ProfileModal}/index.tsx (73%) rename packages/walletkit/src/{pages/Connected => components/ProfileModal}/styles.css.ts (100%) rename packages/walletkit/src/{pages/SwitchNetwork => components/SwitchNetworkModal}/ChainOption/index.tsx (100%) rename packages/walletkit/src/{pages/SwitchNetwork => components/SwitchNetworkModal}/ChainOption/styles.css.ts (100%) rename packages/walletkit/src/{pages/SwitchNetwork => components/SwitchNetworkModal}/ChainSpinner/index.tsx (100%) rename packages/walletkit/src/{pages/SwitchNetwork => components/SwitchNetworkModal}/ChainSpinner/styles.css.ts (100%) create mode 100644 packages/walletkit/src/components/SwitchNetworkModal/SwitchNetworkProvider/context.ts create mode 100644 packages/walletkit/src/components/SwitchNetworkModal/SwitchNetworkProvider/index.tsx rename packages/walletkit/src/{pages/SwitchNetwork => components/SwitchNetworkModal}/styles.css.ts (100%) create mode 100644 packages/walletkit/src/components/WalletKitEmbeddedModal/index.tsx create mode 100644 packages/walletkit/src/components/WalletKitEmbeddedModal/style.css.ts rename packages/walletkit/src/{pages => components/WalletKitModal}/ConnectWithQRCode/index.tsx (90%) rename packages/walletkit/src/{pages => components/WalletKitModal}/ConnectWithQRCode/styles.css.ts (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/ConnectSpinner/index.tsx (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/ConnectSpinner/styles.css.ts (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/Content/Description/index.tsx (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/Content/Description/styles.css.ts (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/Content/ErrorTitle/index.tsx (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/Content/ErrorTitle/styles.css.ts (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/Content/InfoTitle/index.tsx (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/Content/InfoTitle/styles.css.ts (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/Content/index.tsx (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/Content/styles.css.ts (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/UnsupportedContent/index.tsx (92%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/index.tsx (97%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connecting/styles.css.ts (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connectors/GridLayout/WalletOption/index.tsx (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connectors/GridLayout/WalletOption/styles.css.ts (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connectors/GridLayout/index.tsx (91%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connectors/GridLayout/styles.css.ts (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connectors/ListLayout/WalletOption/index.tsx (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connectors/ListLayout/WalletOption/styles.css.ts (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connectors/ListLayout/index.tsx (90%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connectors/ListLayout/styles.css.ts (100%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connectors/index.tsx (71%) rename packages/walletkit/src/{pages => components/WalletKitModal}/Connectors/styles.css.ts (100%) create mode 100644 packages/walletkit/src/components/WalletKitModal/WalletKitModalProvider/context.ts create mode 100644 packages/walletkit/src/components/WalletKitModal/WalletKitModalProvider/index.tsx delete mode 100644 packages/walletkit/src/pages/SwitchNetwork/index.tsx create mode 100644 website/src/playground/example.tsx diff --git a/.changeset/eight-bulldogs-heal.md b/.changeset/eight-bulldogs-heal.md new file mode 100644 index 00000000..caabf516 --- /dev/null +++ b/.changeset/eight-bulldogs-heal.md @@ -0,0 +1,5 @@ +--- +"@node-real/walletkit": patch +--- + +Support embedding modal into page. diff --git a/.changeset/olive-brooms-lie.md b/.changeset/olive-brooms-lie.md new file mode 100644 index 00000000..5a038553 --- /dev/null +++ b/.changeset/olive-brooms-lie.md @@ -0,0 +1,5 @@ +--- +"@node-real/walletkit": patch +--- + +Fixed ssr issue diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000..277b2e4e --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,14 @@ +{ + "mode": "pre", + "tag": "alpha", + "initialVersions": { + "example-nextjs": "0.0.1", + "example-vite": "0.0.1", + "@node-real/walletkit": "1.0.11", + "website": "0.0.1" + }, + "changesets": [ + "eight-bulldogs-heal", + "olive-brooms-lie" + ] +} diff --git a/packages/walletkit/CHANGELOG.md b/packages/walletkit/CHANGELOG.md index 89000466..b407b15d 100644 --- a/packages/walletkit/CHANGELOG.md +++ b/packages/walletkit/CHANGELOG.md @@ -1,5 +1,17 @@ # @node-real/walletkit +## 1.0.12-alpha.1 + +### Patch Changes + +- 3a9e8f0: Fixed ssr issue + +## 1.0.12-alpha.0 + +### Patch Changes + +- 2e73c6b: Support embedding modal into page. + ## 1.0.11 ### Patch Changes diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json index 7fdede14..8694c055 100644 --- a/packages/walletkit/package.json +++ b/packages/walletkit/package.json @@ -1,6 +1,6 @@ { "name": "@node-real/walletkit", - "version": "1.0.11", + "version": "1.0.12-alpha.1", "author": "node-real", "private": false, "description": "WalletKit is a React component library for easily connecting a wallet to your dApp.", diff --git a/packages/walletkit/src/base/components/Modal/ModalContent/index.tsx b/packages/walletkit/src/base/components/Modal/ModalContent/index.tsx new file mode 100644 index 00000000..f83be145 --- /dev/null +++ b/packages/walletkit/src/base/components/Modal/ModalContent/index.tsx @@ -0,0 +1,11 @@ +import { cx } from '@/base/utils/css'; +import { Box, BoxProps } from '../../Box'; +import { clsModalContent } from './style.css'; + +export type ModalContentProps = BoxProps; + +export function ModalContent(props: ModalContentProps) { + const { className, ...restProps } = props; + + return ; +} diff --git a/packages/walletkit/src/base/components/Modal/ModalContent/style.css.ts b/packages/walletkit/src/base/components/Modal/ModalContent/style.css.ts new file mode 100644 index 00000000..991fbf6e --- /dev/null +++ b/packages/walletkit/src/base/components/Modal/ModalContent/style.css.ts @@ -0,0 +1,21 @@ +import { cssVar } from '@/base/utils/css'; +import { mobile } from '@/base/vanilla/index.css'; +import { style } from '@vanilla-extract/css'; + +export const clsModalContent = style({ + position: 'absolute', + background: cssVar('modalBackground'), + padding: '48px 24px', + width: 'calc(100% - 32px)', + maxWidth: 484, + borderRadius: cssVar('modal', 'radii'), + '@media': mobile({ + width: '100%', + maxWidth: '100vw', + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0, + paddingBottom: 40, + left: 0, + bottom: 0, + }), +}); diff --git a/packages/walletkit/src/base/components/Modal/index.tsx b/packages/walletkit/src/base/components/Modal/index.tsx index e0307991..5f8da409 100644 --- a/packages/walletkit/src/base/components/Modal/index.tsx +++ b/packages/walletkit/src/base/components/Modal/index.tsx @@ -3,9 +3,10 @@ import { cx } from '@/base/utils/css'; import { BoxProps, Box } from '../Box'; import { Portal } from '../Portal'; import { Transition } from '../Transition'; -import { clsModal, clsModalOverlay, clsModalContent } from './styles.css'; +import { clsModal, clsModalOverlay } from './styles.css'; import { useScrollLock } from '@/base/hooks/useScrollLock'; import { useResponsive } from '@/base/hooks/useResponsive'; +import { ModalContent } from './ModalContent'; export interface ModalProps extends BoxProps { isOpen: boolean; @@ -49,9 +50,7 @@ export function Modal(props: ModalProps) { onClick={() => closeOnOverlayClick && onClose()} /> - - {children} - + {children} diff --git a/packages/walletkit/src/base/components/Modal/styles.css.ts b/packages/walletkit/src/base/components/Modal/styles.css.ts index 72ad7788..b59caa3e 100644 --- a/packages/walletkit/src/base/components/Modal/styles.css.ts +++ b/packages/walletkit/src/base/components/Modal/styles.css.ts @@ -28,21 +28,3 @@ export const clsModalOverlay = style({ height: '100%', backgroundColor: cssVar('modalOverlay'), }); - -export const clsModalContent = style({ - position: 'absolute', - background: cssVar('modalBackground'), - padding: '48px 24px', - width: 'calc(100% - 32px)', - maxWidth: 484, - borderRadius: cssVar('modal', 'radii'), - '@media': mobile({ - width: '100%', - maxWidth: '100vw', - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0, - paddingBottom: 40, - left: 0, - bottom: 0, - }), -}); diff --git a/packages/walletkit/src/components/Avatar/index.tsx b/packages/walletkit/src/components/Avatar/index.tsx index a16b38f5..2840f314 100644 --- a/packages/walletkit/src/components/Avatar/index.tsx +++ b/packages/walletkit/src/components/Avatar/index.tsx @@ -1,10 +1,10 @@ import { BoxProps, Box } from '@/base/components/Box'; import { cx } from '@/index'; -import { useEnsAddress, useEnsAvatar, useEnsName } from 'wagmi'; +import { Address, useEnsAddress, useEnsAvatar, useEnsName } from 'wagmi'; import { clsAvatar, clsAvatarImg, clsAvatarDefault } from './styles.css'; export interface AvatarProps extends BoxProps { - address?: `0x${string}`; + address?: Address; name?: string | undefined; } diff --git a/packages/walletkit/src/components/DisconnectButton/index.tsx b/packages/walletkit/src/components/DisconnectButton/index.tsx index 044548c8..a2625c6e 100644 --- a/packages/walletkit/src/components/DisconnectButton/index.tsx +++ b/packages/walletkit/src/components/DisconnectButton/index.tsx @@ -2,8 +2,10 @@ import { ButtonProps, Button } from '@/base/components/Button'; import { ExitIcon } from '@/base/icons/ExitIcon'; import { cx } from '@/index'; import { useConnect, useDisconnect } from 'wagmi'; -import { useModal } from '../ModalProvider/context'; import { clsContainer } from './styles.css'; +import { useProfileModal } from '@/components/ProfileModal/ProfileModalProvider/context'; +import { useSwitchNetworkModal } from '@/components/SwitchNetworkModal/SwitchNetworkProvider/context'; +import { useWalletKitModal } from '@/components/WalletKitModal/WalletKitModalProvider/context'; export type DisconnectButtonProps = ButtonProps; @@ -12,10 +14,10 @@ export function DisconnectButton(props: DisconnectButtonProps) { const { reset } = useConnect(); const { disconnect } = useDisconnect(); - const { onClose } = useModal(); + const { onCloseAllModals } = useCloseAllModals(); const onDisconnect = () => { - onClose(); + onCloseAllModals(); setTimeout(() => { disconnect(); reset(); @@ -33,3 +35,17 @@ export function DisconnectButton(props: DisconnectButtonProps) { ); } + +function useCloseAllModals() { + const walletkitModal = useWalletKitModal(); + const switchNetworkModal = useSwitchNetworkModal(); + const profileModal = useProfileModal(); + + return { + onCloseAllModals() { + walletkitModal.onClose(); + switchNetworkModal.onClose(); + profileModal.onClose(); + }, + }; +} diff --git a/packages/walletkit/src/components/ModalProvider/context.ts b/packages/walletkit/src/components/ModalProvider/context.ts deleted file mode 100644 index 23f27519..00000000 --- a/packages/walletkit/src/components/ModalProvider/context.ts +++ /dev/null @@ -1,28 +0,0 @@ -import React, { useContext } from 'react'; -import { Action } from '../WalletKitProvider/context'; - -export interface OpenSwitchNetworkOptions { - isClosable?: boolean; -} - -export interface OpenOptions { - action?: Action; -} - -export interface ModalContextProps { - isClosable: boolean; - closeOnEsc?: boolean; - closeOnOverlayClick?: boolean; - isOpen: boolean; - onClose: () => void; - onOpen: (options?: OpenOptions) => void; - onOpenProfile: () => void; - onOpenSwitchNetwork: (options?: OpenSwitchNetworkOptions) => void; -} - -export const ModalContext = React.createContext({} as ModalContextProps); - -export function useModal() { - const context = useContext(ModalContext); - return context; -} diff --git a/packages/walletkit/src/components/ModalProvider/index.tsx b/packages/walletkit/src/components/ModalProvider/index.tsx deleted file mode 100644 index 762a7bc7..00000000 --- a/packages/walletkit/src/components/ModalProvider/index.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { toast } from '@/base/components/toast'; -import { useDisclosure } from '@/base/hooks/useDisclosure'; -import { useEffect, useMemo, useState } from 'react'; -import { useAccount, useNetwork } from 'wagmi'; -import { routes } from '../RouteProvider'; -import { useRouter } from '../RouteProvider/context'; -import { useWalletKitContext } from '../WalletKitProvider/context'; -import { OpenSwitchNetworkOptions, ModalContext, OpenOptions } from './context'; - -export interface ModalProviderProps { - children: React.ReactNode; -} - -export function ModalProvider(props: ModalProviderProps) { - const { children } = props; - - const [isClosable, setIsClosable] = useState(true); - - const { isOpen, onClose, onOpen } = useDisclosure(); - const { isConnected } = useAccount(); - const { chain } = useNetwork(); - const router = useRouter(); - - const { options, setAction } = useWalletKitContext(); - const { closeModalAfterConnected, closeModalOnEsc, closeModalOnOverlayClick } = options; - - useEffect(() => { - if (router.route === routes.SWITCH_NETWORK && isConnected && !chain?.unsupported) { - setIsClosable(true); - } - }, [chain?.unsupported, isConnected, router.route]); - - const value = useMemo(() => { - return { - isClosable, - closeOnEsc: closeModalOnEsc, - closeOnOverlayClick: closeModalOnOverlayClick, - isOpen, - onClose() { - onClose(); - setTimeout(() => { - setIsClosable(true); - router.reset(); - }, 300); - }, - onOpen(options?: OpenOptions) { - setAction(options?.action); - router.push(routes.CONNECTORS); - onOpen(); - }, - onOpenProfile() { - if (isConnected) { - router.push(routes.CONNECTED); - onOpen(); - } else { - toast.info({ - description: 'Please connect a wallet first.', - }); - } - }, - onOpenSwitchNetwork(options?: OpenSwitchNetworkOptions) { - const { isClosable = true } = options ?? {}; - - if (isConnected) { - router.push(routes.SWITCH_NETWORK); - setIsClosable(isClosable); - onOpen(); - } else { - toast.info({ - description: 'Please connect a wallet first.', - }); - } - }, - }; - }, [ - closeModalOnEsc, - closeModalOnOverlayClick, - isClosable, - isConnected, - isOpen, - onClose, - onOpen, - router, - setAction, - ]); - - useEffect(() => { - if ( - [routes.CONNECTING, routes.CONNECT_WITH_QRCODE].includes(router.route) && - isConnected && - closeModalAfterConnected - ) { - onClose(); - } - }, [isConnected, onClose, closeModalAfterConnected, router.route]); - - return {children}; -} diff --git a/packages/walletkit/src/components/Navbar/index.tsx b/packages/walletkit/src/components/Navbar/index.tsx index b4cf0577..defdad3e 100644 --- a/packages/walletkit/src/components/Navbar/index.tsx +++ b/packages/walletkit/src/components/Navbar/index.tsx @@ -3,33 +3,27 @@ import { IconButton } from '@/base/components/IconButton'; import { BackIcon } from '@/base/icons/BackIcon'; import { CloseIcon } from '@/base/icons/CloseIcon'; import { cx } from '@/index'; -import { useModal } from '../ModalProvider/context'; -import { useRouter } from '../RouteProvider/context'; import { clsNavbar } from './styles.css'; +import { useRouter } from '../RouteProvider/context'; export interface NavbarProps extends BoxProps { - showBack?: boolean; - onBack?: () => void; + onClose?: () => void; } export function Navbar(props: NavbarProps) { - const { className, showBack = false, onBack, ...restProps } = props; + const { className, onClose, ...restProps } = props; - const { onClose: onCloseModal } = useModal(); - const router = useRouter(); + const { history, back } = useRouter(); - const onBeforeBack = () => { - onBack?.(); - router.back(); - }; + const showBack = history.length > 1; return ( {showBack && ( - } onClick={onBeforeBack} /> + } onClick={back} /> )} - } onClick={onCloseModal} /> + } onClick={onClose} /> ); } diff --git a/packages/walletkit/src/components/ProfileModal/ProfileModalProvider/context.ts b/packages/walletkit/src/components/ProfileModal/ProfileModalProvider/context.ts new file mode 100644 index 00000000..4b44b16d --- /dev/null +++ b/packages/walletkit/src/components/ProfileModal/ProfileModalProvider/context.ts @@ -0,0 +1,13 @@ +import React, { useContext } from 'react'; + +export interface ProfileModalContextProps { + isOpen: boolean; + onClose: () => void; + onOpen: () => void; +} + +export const ProfileModalContext = React.createContext({} as ProfileModalContextProps); + +export function useProfileModal() { + return useContext(ProfileModalContext); +} diff --git a/packages/walletkit/src/components/ProfileModal/ProfileModalProvider/index.tsx b/packages/walletkit/src/components/ProfileModal/ProfileModalProvider/index.tsx new file mode 100644 index 00000000..c7203dbd --- /dev/null +++ b/packages/walletkit/src/components/ProfileModal/ProfileModalProvider/index.tsx @@ -0,0 +1,34 @@ +import { useDisclosure } from '@/base/hooks/useDisclosure'; +import React, { useMemo } from 'react'; +import { ProfileModalContext } from './context'; +import { useAccount } from 'wagmi'; +import { toast } from '@/base/components/toast'; + +export interface ProfileModalProviderProps { + children: React.ReactNode; +} + +export function ProfileModalProvider(props: ProfileModalProviderProps) { + const { children } = props; + + const { isConnected } = useAccount(); + const { isOpen, onClose, onOpen } = useDisclosure(); + + const value = useMemo(() => { + return { + isOpen, + onClose, + onOpen() { + if (isConnected) { + onOpen(); + } else { + toast.info({ + description: 'Please connect a wallet first.', + }); + } + }, + }; + }, [isConnected, isOpen, onClose, onOpen]); + + return {children}; +} diff --git a/packages/walletkit/src/pages/Connected/index.tsx b/packages/walletkit/src/components/ProfileModal/index.tsx similarity index 73% rename from packages/walletkit/src/pages/Connected/index.tsx rename to packages/walletkit/src/components/ProfileModal/index.tsx index bb64f32e..06a46332 100644 --- a/packages/walletkit/src/pages/Connected/index.tsx +++ b/packages/walletkit/src/components/ProfileModal/index.tsx @@ -9,9 +9,14 @@ import { truncateENSName, truncateAddress, formatBalance } from '@/utils/account import { useAccount, useBalance, useEnsName } from 'wagmi'; import { clsAvatar, clsInfo, clsBalance, clsFooter } from './styles.css'; import { ModalFooter } from '@/base/components/Modal/ModalFooter'; +import { Modal } from '@/base/components/Modal'; +import { useProfileModal } from './ProfileModalProvider/context'; +import { useWalletKitContext } from '../WalletKitProvider/context'; -export function ConnectedPage() { +export function ProfileModal() { const { address } = useAccount(); + const { options } = useWalletKitContext(); + const { isOpen, onClose } = useProfileModal(); const { data: ensName } = useEnsName({ chainId: 1, @@ -23,8 +28,13 @@ export function ConnectedPage() { }); return ( - <> - + + Connected @@ -43,6 +53,6 @@ export function ConnectedPage() { - + ); } diff --git a/packages/walletkit/src/pages/Connected/styles.css.ts b/packages/walletkit/src/components/ProfileModal/styles.css.ts similarity index 100% rename from packages/walletkit/src/pages/Connected/styles.css.ts rename to packages/walletkit/src/components/ProfileModal/styles.css.ts diff --git a/packages/walletkit/src/components/RouteProvider/context.tsx b/packages/walletkit/src/components/RouteProvider/context.tsx index a5d43675..b72ec864 100644 --- a/packages/walletkit/src/components/RouteProvider/context.tsx +++ b/packages/walletkit/src/components/RouteProvider/context.tsx @@ -3,6 +3,7 @@ import React, { useContext } from 'react'; export interface RouteContextProps { route: string; page: React.ReactNode; + history: string[]; back: () => void; replace: (nextRoute: string) => void; push: (nextRoute: string) => void; @@ -12,6 +13,5 @@ export interface RouteContextProps { export const RouteContext = React.createContext({} as RouteContextProps); export function useRouter() { - const context = useContext(RouteContext); - return context; + return useContext(RouteContext); } diff --git a/packages/walletkit/src/components/RouteProvider/index.tsx b/packages/walletkit/src/components/RouteProvider/index.tsx index 2e73e763..f8d84e1e 100644 --- a/packages/walletkit/src/components/RouteProvider/index.tsx +++ b/packages/walletkit/src/components/RouteProvider/index.tsx @@ -1,17 +1,13 @@ -import { ConnectWithQRCodePage } from '@/pages/ConnectWithQRCode'; -import { ConnectedPage } from '@/pages/Connected'; -import { ConnectingPage } from '@/pages/Connecting'; -import { ConnectorsPage } from '@/pages/Connectors'; -import { SwitchNetworkPage } from '@/pages/SwitchNetwork'; import { useState, useRef, useMemo, useCallback } from 'react'; import { RouteContext } from './context'; +import { Connecting } from '../WalletKitModal/Connecting'; +import { Connectors } from '../WalletKitModal/Connectors'; +import { ConnectWithQRCode } from '../WalletKitModal/ConnectWithQRCode'; export const routes = { CONNECTING: 'Connecting', CONNECTORS: 'Connectors', CONNECT_WITH_QRCODE: 'ConnectWithQRCode', - CONNECTED: 'Connected', - SWITCH_NETWORK: 'SwitchNetwork', }; export interface RouteProviderProps { @@ -27,15 +23,11 @@ export function RouteProvider(props: RouteProviderProps) { const page = useMemo(() => { switch (route) { case routes.CONNECTING: - return ; + return ; case routes.CONNECTORS: - return ; + return ; case routes.CONNECT_WITH_QRCODE: - return ; - case routes.CONNECTED: - return ; - case routes.SWITCH_NETWORK: - return ; + return ; } return null; }, [route]); @@ -80,8 +72,9 @@ export function RouteProvider(props: RouteProviderProps) { push, replace, reset, + history, }; - }, [back, page, push, replace, reset, route]); + }, [back, history, page, push, replace, reset, route]); return {children}; } diff --git a/packages/walletkit/src/pages/SwitchNetwork/ChainOption/index.tsx b/packages/walletkit/src/components/SwitchNetworkModal/ChainOption/index.tsx similarity index 100% rename from packages/walletkit/src/pages/SwitchNetwork/ChainOption/index.tsx rename to packages/walletkit/src/components/SwitchNetworkModal/ChainOption/index.tsx diff --git a/packages/walletkit/src/pages/SwitchNetwork/ChainOption/styles.css.ts b/packages/walletkit/src/components/SwitchNetworkModal/ChainOption/styles.css.ts similarity index 100% rename from packages/walletkit/src/pages/SwitchNetwork/ChainOption/styles.css.ts rename to packages/walletkit/src/components/SwitchNetworkModal/ChainOption/styles.css.ts diff --git a/packages/walletkit/src/pages/SwitchNetwork/ChainSpinner/index.tsx b/packages/walletkit/src/components/SwitchNetworkModal/ChainSpinner/index.tsx similarity index 100% rename from packages/walletkit/src/pages/SwitchNetwork/ChainSpinner/index.tsx rename to packages/walletkit/src/components/SwitchNetworkModal/ChainSpinner/index.tsx diff --git a/packages/walletkit/src/pages/SwitchNetwork/ChainSpinner/styles.css.ts b/packages/walletkit/src/components/SwitchNetworkModal/ChainSpinner/styles.css.ts similarity index 100% rename from packages/walletkit/src/pages/SwitchNetwork/ChainSpinner/styles.css.ts rename to packages/walletkit/src/components/SwitchNetworkModal/ChainSpinner/styles.css.ts diff --git a/packages/walletkit/src/components/SwitchNetworkModal/SwitchNetworkProvider/context.ts b/packages/walletkit/src/components/SwitchNetworkModal/SwitchNetworkProvider/context.ts new file mode 100644 index 00000000..d2e1e8ff --- /dev/null +++ b/packages/walletkit/src/components/SwitchNetworkModal/SwitchNetworkProvider/context.ts @@ -0,0 +1,18 @@ +import React, { useContext } from 'react'; + +export interface SwitchNetworkModalOpenOptions { + isClosable?: boolean; +} + +export interface SwitchNetworkModalContextProps { + isOpen: boolean; + isClosable: boolean; + onClose: () => void; + onOpen: (options?: SwitchNetworkModalOpenOptions) => void; +} + +export const SwitchNetworkModalContext = React.createContext({} as SwitchNetworkModalContextProps); + +export function useSwitchNetworkModal() { + return useContext(SwitchNetworkModalContext); +} diff --git a/packages/walletkit/src/components/SwitchNetworkModal/SwitchNetworkProvider/index.tsx b/packages/walletkit/src/components/SwitchNetworkModal/SwitchNetworkProvider/index.tsx new file mode 100644 index 00000000..99fc804c --- /dev/null +++ b/packages/walletkit/src/components/SwitchNetworkModal/SwitchNetworkProvider/index.tsx @@ -0,0 +1,72 @@ +import { useDisclosure } from '@/base/hooks/useDisclosure'; +import React, { useEffect, useMemo, useState } from 'react'; +import { useAccount, useNetwork } from 'wagmi'; +import { SwitchNetworkModalContext, SwitchNetworkModalOpenOptions } from './context'; +import { toast } from '@/base/components/toast'; + +export interface SwitchNetworkProviderProps { + children: React.ReactNode; +} + +export function SwitchNetworkProvider(props: SwitchNetworkProviderProps) { + const { children } = props; + + const [isClosable, setIsClosable] = useState(true); + const { isOpen, onClose, onOpen } = useDisclosure(); + + const { chain } = useNetwork(); + const { isConnected } = useAccount(); + + const value = useMemo(() => { + return { + isClosable, + isOpen, + onClose() { + onClose(); + setTimeout(() => { + setIsClosable(true); + }, 300); + }, + onOpen(options?: SwitchNetworkModalOpenOptions) { + const { isClosable = true } = options ?? {}; + if (isConnected) { + setIsClosable(isClosable); + onOpen(); + } else { + toast.info({ + description: 'Please connect a wallet first.', + }); + } + }, + }; + }, [isClosable, isConnected, isOpen, onClose, onOpen]); + + useEffect(() => { + if (isConnected) { + const timer = setTimeout(() => { + if (chain?.unsupported) { + value.onOpen({ + isClosable: false, + }); + } + }, 300); + + return () => { + clearTimeout(timer); + }; + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [chain?.unsupported, isConnected]); + + useEffect(() => { + if (isConnected && !chain?.unsupported) { + setIsClosable(true); + } + }, [chain?.unsupported, isConnected]); + + return ( + + {children} + + ); +} diff --git a/packages/walletkit/src/components/SwitchNetworkModal/index.tsx b/packages/walletkit/src/components/SwitchNetworkModal/index.tsx index b4e0f3f9..e1c5df7c 100644 --- a/packages/walletkit/src/components/SwitchNetworkModal/index.tsx +++ b/packages/walletkit/src/components/SwitchNetworkModal/index.tsx @@ -1,25 +1,82 @@ -import { useAccount, useNetwork } from 'wagmi'; -import { useEffect } from 'react'; -import { useModal } from '../ModalProvider/context'; +import { Box } from '@/base/components/Box'; +import { ModalBody } from '@/base/components/Modal/ModalBody'; +import { ModalHeader } from '@/base/components/Modal/ModalHeader'; +import { DisconnectButton } from '@/components/DisconnectButton'; +import { Navbar } from '@/components/Navbar'; +import { useWalletKitSwitchNetwork } from '@/hooks/useWalletKitSwitchNetwork'; +import { cx } from '@/index'; +import { useNetwork } from 'wagmi'; +import { ChainOption } from './ChainOption'; +import { + clsDescription, + clsChains, + clsOrSeparator, + clsBody, + clsFooter, + clsNoNavHeader, +} from './styles.css'; +import { ModalFooter } from '@/base/components/Modal/ModalFooter'; +import { Modal } from '@/base/components/Modal'; +import { useSwitchNetworkModal } from './SwitchNetworkProvider/context'; +import { useWalletKitContext } from '../WalletKitProvider/context'; export function SwitchNetworkModal() { - const { onOpenSwitchNetwork } = useModal(); const { chain } = useNetwork(); - const { isConnected } = useAccount(); + const { isClosable, isOpen, onClose } = useSwitchNetworkModal(); + const { supportedChains, log, options } = useWalletKitContext(); - useEffect(() => { - if (isConnected) { - const timer = setTimeout(() => { - if (chain?.unsupported) { - onOpenSwitchNetwork({ isClosable: false }); - } - }, 300); + const { isLoading, switchNetwork, pendingChainId } = useWalletKitSwitchNetwork({ + onSuccess() { + if (options.closeModalAfterSwitchingNetwork) { + onClose(); + } + }, + }); - return () => { - clearTimeout(timer); - }; + const onSwitchNetwork = (chainId: number) => { + log('[switch network page]', 'switchNetwork:', switchNetwork, ', isLoading:', isLoading); + + if (switchNetwork && !isLoading) { + switchNetwork(chainId); } - }, [chain?.unsupported, isConnected, onOpenSwitchNetwork]); + }; + + return ( + + {isClosable && } + Switch Network + + + {chain?.unsupported && ( + + This app does not support the current connected network. Switch or disconnect to + continue. + + )} + + {supportedChains?.map((item) => { + return ( + onSwitchNetwork(item.id)} + /> + ); + })} + + or + - return null; + + + + + ); } diff --git a/packages/walletkit/src/pages/SwitchNetwork/styles.css.ts b/packages/walletkit/src/components/SwitchNetworkModal/styles.css.ts similarity index 100% rename from packages/walletkit/src/pages/SwitchNetwork/styles.css.ts rename to packages/walletkit/src/components/SwitchNetworkModal/styles.css.ts diff --git a/packages/walletkit/src/components/ThemeProvider/context.ts b/packages/walletkit/src/components/ThemeProvider/context.ts index ddfe6bc0..cb26a5a0 100644 --- a/packages/walletkit/src/components/ThemeProvider/context.ts +++ b/packages/walletkit/src/components/ThemeProvider/context.ts @@ -9,6 +9,5 @@ export interface ThemeContextProps { export const ThemeContext = React.createContext({} as ThemeContextProps); export function useTheme() { - const context = useContext(ThemeContext); - return context; + return useContext(ThemeContext); } diff --git a/packages/walletkit/src/components/ThemeProvider/index.tsx b/packages/walletkit/src/components/ThemeProvider/index.tsx index 11775624..00ef4775 100644 --- a/packages/walletkit/src/components/ThemeProvider/index.tsx +++ b/packages/walletkit/src/components/ThemeProvider/index.tsx @@ -65,20 +65,6 @@ export function ThemeProvider(props: ThemeProviderProps) { return ''; }, [customTheme, mode, variant]); - useEffect(() => { - const id = 'wk-cssvars'; - - let styleElement = document.getElementById(id); - if (!styleElement) { - styleElement = document.createElement('style'); - - styleElement.id = id; - document.head.appendChild(styleElement); - } - - styleElement.textContent = styleContent; - }, [styleContent]); - const [colorMode, setColorMode] = useState('light'); useEffect(() => { @@ -106,7 +92,12 @@ export function ThemeProvider(props: ThemeProviderProps) { }; }, [colorMode]); - return {children}; + return ( + + + {children} + + ); } function createCssVars(theme: Record, prefix = '') { diff --git a/packages/walletkit/src/components/WalletKitButton/ConnectButton/ConnectedInfo/index.tsx b/packages/walletkit/src/components/WalletKitButton/ConnectButton/ConnectedInfo/index.tsx index 55e844c2..84a99ba2 100644 --- a/packages/walletkit/src/components/WalletKitButton/ConnectButton/ConnectedInfo/index.tsx +++ b/packages/walletkit/src/components/WalletKitButton/ConnectButton/ConnectedInfo/index.tsx @@ -4,7 +4,7 @@ import { Button } from '@/base/components/Button'; import { DownArrowIcon } from '@/base/icons/DownArrowIcon'; import { Avatar } from '@/components/Avatar'; import { useChainConfig } from '@/hooks/useChainConfig'; -import { useModal, cx } from '@/index'; +import { cx } from '@/index'; import { truncateENSName, formatBalance, truncateAddress } from '@/utils/account'; import { useAccount, useBalance, useEnsName, useNetwork } from 'wagmi'; import { clsWalletkitButton } from '../styles.css'; @@ -18,11 +18,14 @@ import { clsSeparator, clsAddress, } from './styles.css'; +import { useSwitchNetworkModal } from '@/components/SwitchNetworkModal/SwitchNetworkProvider/context'; +import { useProfileModal } from '@/components/ProfileModal/ProfileModalProvider/context'; export function ConnectedInfo() { const { address } = useAccount(); - const { onOpenProfile, onOpenSwitchNetwork } = useModal(); + const { onOpen: onOpenSwitchNetworkModal } = useSwitchNetworkModal(); + const { onOpen: onOpenProfileModal } = useProfileModal(); const { data: ensName } = useEnsName({ chainId: 1, @@ -41,7 +44,7 @@ export function ConnectedInfo() { {chain?.unsupported ? ( - - + + + ); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2088a06d..4821a017 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -145,7 +145,7 @@ importers: version: 18.2.0(react@18.2.0) rollup-plugin-peer-deps-external: specifier: ^2.2.4 - version: 2.2.4(rollup@4.12.0) + version: 2.2.4(rollup@4.12.1) typescript: specifier: ^5.3.2 version: 5.3.3 @@ -160,7 +160,7 @@ importers: version: 4.5.1(@types/node@20.11.24) vite-plugin-dts: specifier: ^3.6.3 - version: 3.7.0(@types/node@20.11.24)(rollup@4.12.0)(typescript@5.3.3)(vite@4.5.1) + version: 3.7.0(@types/node@20.11.24)(rollup@4.12.1)(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) @@ -179,15 +179,15 @@ importers: '@mdx-js/react': specifier: ~2.2.1 version: 2.2.1(react@18.2.0) + '@node-real/icons': + specifier: latest + version: 2.21.1(@node-real/styled-system@2.15.1)(react-dom@18.2.0)(react@18.2.0) + '@node-real/uikit': + specifier: latest + version: 2.55.3(@node-real/icons@2.21.1)(@node-real/styled-system@2.15.1)(react-dom@18.2.0)(react@18.2.0) '@node-real/walletkit': specifier: workspace:* version: link:../packages/walletkit - '@totejs/icons': - specifier: ^2.19.0 - version: 2.20.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0) - '@totejs/uikit': - specifier: ^2.54.5 - version: 2.54.5(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0) prism-react-renderer: specifier: ~1.3.5 version: 1.3.5(react@18.2.0) @@ -221,7 +221,7 @@ importers: devDependencies: '@mdx-js/rollup': specifier: ~2.2.1 - version: 2.2.1(rollup@4.12.0) + version: 2.2.1(rollup@4.12.1) '@types/mdx': specifier: ~2.0.10 version: 2.0.10 @@ -472,7 +472,6 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.1 - dev: true /@babel/template@7.22.15: resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==} @@ -1560,14 +1559,14 @@ packages: react: 18.2.0 dev: false - /@mdx-js/rollup@2.2.1(rollup@4.12.0): + /@mdx-js/rollup@2.2.1(rollup@4.12.1): resolution: {integrity: sha512-wpGeK9iO7gPEIyC/ZTiggLY/MkEWDj5IWSsjlpkefgjb5RbmUukXU6/D2rHA+VAopxigS3NlaIL2ctpYBi4fmg==} peerDependencies: rollup: '>=2' dependencies: '@mdx-js/mdx': 2.1.5 - '@rollup/pluginutils': 5.1.0(rollup@4.12.0) - rollup: 4.12.0 + '@rollup/pluginutils': 5.1.0(rollup@4.12.1) + rollup: 4.12.1 source-map: 0.7.4 vfile: 5.3.7 transitivePeerDependencies: @@ -1787,6 +1786,56 @@ packages: resolution: {integrity: sha512-V7/fPHgl+jsVPXqqeOzT8egNj2iBIVt+ECeMMG8TdcnTikP3oaBtUVqpT/gYCR68aEBJSF+XbYUxStjbFMqIIA==} engines: {node: '>= 16'} + /@node-real/icons@2.21.1(@node-real/styled-system@2.15.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-tB4bthv5eUW9Qn0UkK+v0q2ouapshbMaaBIlVXmhIskUr1i2DtCdSGJy8TNuBpDOJZKwZs6iUt7qssAio//yOw==} + peerDependencies: + '@node-real/styled-system': '>=2' + react: '>=17' + react-dom: '>=17' + dependencies: + '@node-real/styled-system': 2.15.1(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@node-real/styled-system@2.15.1(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-OTc8oMXkz5eneViIrcvIAw9PxWxy3ELfkewPphzPO3Ppa+wJOk96LM1yctX/wTmzf7O4bsG/EGeMnxGpRsZVqg==} + peerDependencies: + '@emotion/react': '>=11' + '@emotion/styled': '>=11' + react: '>=17' + react-dom: '>=17' + dependencies: + '@emotion/react': 11.11.3(@types/react@18.2.47)(react@18.2.0) + '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.47)(react@18.2.0) + csstype: 3.1.3 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@node-real/uikit@2.55.3(@node-real/icons@2.21.1)(@node-real/styled-system@2.15.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-beilf5R86wUuwHXvkE3vk5IPOhCI3Hh6B3LNMiyKMk8pe+PW9oHg5ev7WQ0u2rnct8/6JejYmZBLOdNJMm40Qw==} + peerDependencies: + '@node-real/icons': '>=2' + '@node-real/styled-system': '>=2' + react: '>=17' + react-dom: '>=17' + dependencies: + '@node-real/icons': 2.21.1(@node-real/styled-system@2.15.1)(react-dom@18.2.0)(react@18.2.0) + '@node-real/styled-system': 2.15.1(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0) + '@popperjs/core': 2.11.8 + '@xobotyi/scrollbar-width': 1.9.5 + dayjs: 1.11.10 + rc-picker: 4.2.0(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-fast-compare: 3.2.2 + transitivePeerDependencies: + - date-fns + - luxon + - moment + dev: false + /@nodelib/fs.scandir@2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -1940,12 +1989,43 @@ packages: resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} dev: false + /@rc-component/portal@1.1.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==} + engines: {node: '>=8.x'} + peerDependencies: + react: '>=16.9.0' + react-dom: '>=16.9.0' + dependencies: + '@babel/runtime': 7.24.0 + classnames: 2.5.1 + rc-util: 5.39.0(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@rc-component/trigger@1.18.3(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Ksr25pXreYe1gX6ayZ1jLrOrl9OAUHUqnuhEx6MeHnNa1zVM5Y2Aj3Q35UrER0ns8D2cJYtmJtVli+i+4eKrvA==} + engines: {node: '>=8.x'} + peerDependencies: + react: '>=16.9.0' + react-dom: '>=16.9.0' + dependencies: + '@babel/runtime': 7.24.0 + '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0) + classnames: 2.5.1 + rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0) + rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0) + rc-util: 5.39.0(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@remix-run/router@1.2.1: resolution: {integrity: sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==} engines: {node: '>=14'} dev: false - /@rollup/pluginutils@5.1.0(rollup@4.12.0): + /@rollup/pluginutils@5.1.0(rollup@4.12.1): resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==} engines: {node: '>=14.0.0'} peerDependencies: @@ -1957,107 +2037,107 @@ packages: '@types/estree': 1.0.5 estree-walker: 2.0.2 picomatch: 2.3.1 - rollup: 4.12.0 + rollup: 4.12.1 dev: true - /@rollup/rollup-android-arm-eabi@4.12.0: - resolution: {integrity: sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==} + /@rollup/rollup-android-arm-eabi@4.12.1: + resolution: {integrity: sha512-iU2Sya8hNn1LhsYyf0N+L4Gf9Qc+9eBTJJJsaOGUp+7x4n2M9dxTt8UvhJl3oeftSjblSlpCfvjA/IfP3g5VjQ==} cpu: [arm] os: [android] requiresBuild: true dev: true optional: true - /@rollup/rollup-android-arm64@4.12.0: - resolution: {integrity: sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ==} + /@rollup/rollup-android-arm64@4.12.1: + resolution: {integrity: sha512-wlzcWiH2Ir7rdMELxFE5vuM7D6TsOcJ2Yw0c3vaBR3VOsJFVTx9xvwnAvhgU5Ii8Gd6+I11qNHwndDscIm0HXg==} cpu: [arm64] os: [android] requiresBuild: true dev: true optional: true - /@rollup/rollup-darwin-arm64@4.12.0: - resolution: {integrity: sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ==} + /@rollup/rollup-darwin-arm64@4.12.1: + resolution: {integrity: sha512-YRXa1+aZIFN5BaImK+84B3uNK8C6+ynKLPgvn29X9s0LTVCByp54TB7tdSMHDR7GTV39bz1lOmlLDuedgTwwHg==} cpu: [arm64] os: [darwin] requiresBuild: true dev: true optional: true - /@rollup/rollup-darwin-x64@4.12.0: - resolution: {integrity: sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg==} + /@rollup/rollup-darwin-x64@4.12.1: + resolution: {integrity: sha512-opjWJ4MevxeA8FhlngQWPBOvVWYNPFkq6/25rGgG+KOy0r8clYwL1CFd+PGwRqqMFVQ4/Qd3sQu5t7ucP7C/Uw==} cpu: [x64] os: [darwin] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm-gnueabihf@4.12.0: - resolution: {integrity: sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA==} + /@rollup/rollup-linux-arm-gnueabihf@4.12.1: + resolution: {integrity: sha512-uBkwaI+gBUlIe+EfbNnY5xNyXuhZbDSx2nzzW8tRMjUmpScd6lCQYKY2V9BATHtv5Ef2OBq6SChEP8h+/cxifQ==} cpu: [arm] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm64-gnu@4.12.0: - resolution: {integrity: sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==} + /@rollup/rollup-linux-arm64-gnu@4.12.1: + resolution: {integrity: sha512-0bK9aG1kIg0Su7OcFTlexkVeNZ5IzEsnz1ept87a0TUgZ6HplSgkJAnFpEVRW7GRcikT4GlPV0pbtVedOaXHQQ==} cpu: [arm64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm64-musl@4.12.0: - resolution: {integrity: sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==} + /@rollup/rollup-linux-arm64-musl@4.12.1: + resolution: {integrity: sha512-qB6AFRXuP8bdkBI4D7UPUbE7OQf7u5OL+R94JE42Z2Qjmyj74FtDdLGeriRyBDhm4rQSvqAGCGC01b8Fu2LthQ==} cpu: [arm64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-riscv64-gnu@4.12.0: - resolution: {integrity: sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==} + /@rollup/rollup-linux-riscv64-gnu@4.12.1: + resolution: {integrity: sha512-sHig3LaGlpNgDj5o8uPEoGs98RII8HpNIqFtAI8/pYABO8i0nb1QzT0JDoXF/pxzqO+FkxvwkHZo9k0NJYDedg==} cpu: [riscv64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-x64-gnu@4.12.0: - resolution: {integrity: sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==} + /@rollup/rollup-linux-x64-gnu@4.12.1: + resolution: {integrity: sha512-nD3YcUv6jBJbBNFvSbp0IV66+ba/1teuBcu+fBBPZ33sidxitc6ErhON3JNavaH8HlswhWMC3s5rgZpM4MtPqQ==} cpu: [x64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-x64-musl@4.12.0: - resolution: {integrity: sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==} + /@rollup/rollup-linux-x64-musl@4.12.1: + resolution: {integrity: sha512-7/XVZqgBby2qp/cO0TQ8uJK+9xnSdJ9ct6gSDdEr4MfABrjTyrW6Bau7HQ73a2a5tPB7hno49A0y1jhWGDN9OQ==} cpu: [x64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-win32-arm64-msvc@4.12.0: - resolution: {integrity: sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==} + /@rollup/rollup-win32-arm64-msvc@4.12.1: + resolution: {integrity: sha512-CYc64bnICG42UPL7TrhIwsJW4QcKkIt9gGlj21gq3VV0LL6XNb1yAdHVp1pIi9gkts9gGcT3OfUYHjGP7ETAiw==} cpu: [arm64] os: [win32] requiresBuild: true dev: true optional: true - /@rollup/rollup-win32-ia32-msvc@4.12.0: - resolution: {integrity: sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA==} + /@rollup/rollup-win32-ia32-msvc@4.12.1: + resolution: {integrity: sha512-LN+vnlZ9g0qlHGlS920GR4zFCqAwbv2lULrR29yGaWP9u7wF5L7GqWu9Ah6/kFZPXPUkpdZwd//TNR+9XC9hvA==} cpu: [ia32] os: [win32] requiresBuild: true dev: true optional: true - /@rollup/rollup-win32-x64-msvc@4.12.0: - resolution: {integrity: sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==} + /@rollup/rollup-win32-x64-msvc@4.12.1: + resolution: {integrity: sha512-n+vkrSyphvmU0qkQ6QBNXCGr2mKjhP08mPRM/Xp5Ck2FV4NrHU+y6axzDeixUrCBHVUS51TZhjqrKBBsHLKb2Q==} cpu: [x64] os: [win32] requiresBuild: true @@ -2322,65 +2402,6 @@ packages: react-dom: 18.2.0(react@18.2.0) use-sync-external-store: 1.2.0(react@18.2.0) - /@totejs/icons@2.19.1(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-cH0/sutCWyi8LrfBOzOvyshY2PBlKuB4qPCqrqTibPAHGXzQrEDZjYWz3oDK8DKRrIkiAsTjVL1Va6YWA2/f2Q==} - peerDependencies: - '@emotion/react': '>=11' - '@emotion/styled': '>=11' - react: '>=16.9.0' - react-dom: '>=16.9.0' - dependencies: - '@emotion/react': 11.11.3(@types/react@18.2.47)(react@18.2.0) - '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.47)(react@18.2.0) - '@totejs/styled-system': 2.14.0(react-dom@18.2.0)(react@18.2.0) - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - - /@totejs/icons@2.20.0(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-U9RRdfHRaSKX+mwFekk+Cy195QnyQ9rKKkrnLa/DN1o5Z61HwzTH0+vdyjYckMCe6j5tWZRYkaMSphD1JOQ5Yw==} - peerDependencies: - '@emotion/react': '>=11' - '@emotion/styled': '>=11' - react: '>=16.9.0' - react-dom: '>=16.9.0' - dependencies: - '@emotion/react': 11.11.3(@types/react@18.2.47)(react@18.2.0) - '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.47)(react@18.2.0) - '@totejs/styled-system': 2.14.0(react-dom@18.2.0)(react@18.2.0) - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - - /@totejs/styled-system@2.14.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-Tzs5hs+nXhA20Pp6arQPuAfW9vZ5bo5ISaSCcuOMkg5Or82eeWIicoVDGHNzyOeN+b9AumREzwwo+8sz/jETZA==} - peerDependencies: - react: '>=16.9.0' - react-dom: '>=16.9.0' - dependencies: - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - - /@totejs/uikit@2.54.5(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-Ylsw+nolwYZxvtc6Us3/M1NBmHHncJgzJVgoGvajXHlVn3174m3ZDUY/H1sfZyy1Eht2KEEJsoHF+LjpqKWMwQ==} - peerDependencies: - '@emotion/react': '>=11' - '@emotion/styled': '>=11' - react: '>=16.9.0' - react-dom: '>=16.9.0' - dependencies: - '@emotion/react': 11.11.3(@types/react@18.2.47)(react@18.2.0) - '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.47)(react@18.2.0) - '@popperjs/core': 2.11.8 - '@totejs/icons': 2.19.1(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0) - '@totejs/styled-system': 2.14.0(react-dom@18.2.0)(react@18.2.0) - '@xobotyi/scrollbar-width': 1.9.5 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-fast-compare: 3.2.2 - dev: false - /@tsconfig/node10@1.0.9: resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==} dev: true @@ -3805,6 +3826,10 @@ packages: dependencies: consola: 3.2.3 + /classnames@2.5.1: + resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==} + dev: false + /cli-cursor@4.0.0: resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -4090,6 +4115,10 @@ packages: engines: {node: '>=8'} dev: true + /dayjs@1.11.10: + resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==} + dev: false + /de-indent@1.0.2: resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} dev: true @@ -7283,6 +7312,90 @@ packages: dependencies: safe-buffer: 5.2.1 + /rc-motion@2.9.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==} + peerDependencies: + react: '>=16.9.0' + react-dom: '>=16.9.0' + dependencies: + '@babel/runtime': 7.24.0 + classnames: 2.5.1 + rc-util: 5.39.0(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /rc-overflow@1.3.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==} + peerDependencies: + react: '>=16.9.0' + react-dom: '>=16.9.0' + dependencies: + '@babel/runtime': 7.24.0 + classnames: 2.5.1 + rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0) + rc-util: 5.39.0(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /rc-picker@4.2.0(dayjs@1.11.10)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-4a5Gv9UtxDMGhqzJPDDAfXni6DGReqyHI4nu7e3nPrHsuTLH13lL1ykqIXqJ25f5ZqqyjpnMeogU1F4aaOdwhA==} + engines: {node: '>=8.x'} + peerDependencies: + date-fns: '>= 2.x' + dayjs: '>= 1.x' + luxon: '>= 3.x' + moment: '>= 2.x' + react: '>=16.9.0' + react-dom: '>=16.9.0' + peerDependenciesMeta: + date-fns: + optional: true + dayjs: + optional: true + luxon: + optional: true + moment: + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@rc-component/trigger': 1.18.3(react-dom@18.2.0)(react@18.2.0) + classnames: 2.5.1 + dayjs: 1.11.10 + rc-overflow: 1.3.2(react-dom@18.2.0)(react@18.2.0) + rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0) + rc-util: 5.39.0(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /rc-resize-observer@1.4.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==} + peerDependencies: + react: '>=16.9.0' + react-dom: '>=16.9.0' + dependencies: + '@babel/runtime': 7.24.0 + classnames: 2.5.1 + rc-util: 5.39.0(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + resize-observer-polyfill: 1.5.1 + dev: false + + /rc-util@5.39.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-fEVbkOApBUK/lg+NTkfC3fw336EhgRy531ly2QvZj8G+21OjPEzb9TtH/zfKDL2BuQqbGh8J5zXeFyfcELXOlQ==} + peerDependencies: + react: '>=16.9.0' + react-dom: '>=16.9.0' + dependencies: + '@babel/runtime': 7.24.0 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-is: 18.2.0 + dev: false + /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -7300,6 +7413,10 @@ packages: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} dev: false + /react-is@18.2.0: + resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} + dev: false + /react-live@2.4.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-r+32f7oV/kBs3QZBRvaT+9vOkQW47UZrDpgwUe5FiIMOl7sdo5pmISgb7Zpj5PGHgY6XQaiXs3FEh+IWw3KbRg==} engines: {node: '>= 0.12.0', npm: '>= 2.0.0'} @@ -7527,6 +7644,10 @@ packages: /require-main-filename@2.0.0: resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==} + /resize-observer-polyfill@1.5.1: + resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} + dev: false + /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -7582,12 +7703,12 @@ packages: glob: 7.2.3 dev: true - /rollup-plugin-peer-deps-external@2.2.4(rollup@4.12.0): + /rollup-plugin-peer-deps-external@2.2.4(rollup@4.12.1): resolution: {integrity: sha512-AWdukIM1+k5JDdAqV/Cxd+nejvno2FVLVeZ74NKggm3Q5s9cbbcOgUPGdbxPi4BXu7xGaZ8HG12F+thImYu/0g==} peerDependencies: rollup: '*' dependencies: - rollup: 4.12.0 + rollup: 4.12.1 dev: true /rollup@3.29.4: @@ -7598,26 +7719,26 @@ packages: fsevents: 2.3.3 dev: true - /rollup@4.12.0: - resolution: {integrity: sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==} + /rollup@4.12.1: + resolution: {integrity: sha512-ggqQKvx/PsB0FaWXhIvVkSWh7a/PCLQAsMjBc+nA2M8Rv2/HG0X6zvixAB7KyZBRtifBUhy5k8voQX/mRnABPg==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true dependencies: '@types/estree': 1.0.5 optionalDependencies: - '@rollup/rollup-android-arm-eabi': 4.12.0 - '@rollup/rollup-android-arm64': 4.12.0 - '@rollup/rollup-darwin-arm64': 4.12.0 - '@rollup/rollup-darwin-x64': 4.12.0 - '@rollup/rollup-linux-arm-gnueabihf': 4.12.0 - '@rollup/rollup-linux-arm64-gnu': 4.12.0 - '@rollup/rollup-linux-arm64-musl': 4.12.0 - '@rollup/rollup-linux-riscv64-gnu': 4.12.0 - '@rollup/rollup-linux-x64-gnu': 4.12.0 - '@rollup/rollup-linux-x64-musl': 4.12.0 - '@rollup/rollup-win32-arm64-msvc': 4.12.0 - '@rollup/rollup-win32-ia32-msvc': 4.12.0 - '@rollup/rollup-win32-x64-msvc': 4.12.0 + '@rollup/rollup-android-arm-eabi': 4.12.1 + '@rollup/rollup-android-arm64': 4.12.1 + '@rollup/rollup-darwin-arm64': 4.12.1 + '@rollup/rollup-darwin-x64': 4.12.1 + '@rollup/rollup-linux-arm-gnueabihf': 4.12.1 + '@rollup/rollup-linux-arm64-gnu': 4.12.1 + '@rollup/rollup-linux-arm64-musl': 4.12.1 + '@rollup/rollup-linux-riscv64-gnu': 4.12.1 + '@rollup/rollup-linux-x64-gnu': 4.12.1 + '@rollup/rollup-linux-x64-musl': 4.12.1 + '@rollup/rollup-win32-arm64-msvc': 4.12.1 + '@rollup/rollup-win32-ia32-msvc': 4.12.1 + '@rollup/rollup-win32-x64-msvc': 4.12.1 fsevents: 2.3.3 dev: true @@ -8701,7 +8822,7 @@ packages: - terser dev: true - /vite-plugin-dts@3.7.0(@types/node@20.11.24)(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.1)(typescript@5.3.3)(vite@4.5.1): resolution: {integrity: sha512-np1uPaYzu98AtPReB8zkMnbjwcNHOABsLhqVOf81b3ol9b5M2wPcAVs8oqPnOpr6Us+7yDXVauwkxsk5+ldmRA==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: @@ -8712,7 +8833,7 @@ packages: optional: true dependencies: '@microsoft/api-extractor': 7.39.0(@types/node@20.11.24) - '@rollup/pluginutils': 5.1.0(rollup@4.12.0) + '@rollup/pluginutils': 5.1.0(rollup@4.12.1) '@vue/language-core': 1.8.27(typescript@5.3.3) debug: 4.3.4 kolorist: 1.8.0 diff --git a/website/package.json b/website/package.json index fb733124..e731374d 100644 --- a/website/package.json +++ b/website/package.json @@ -14,8 +14,8 @@ "@emotion/styled": "^11.11.0", "@mdx-js/mdx": "~2.1.5", "@mdx-js/react": "~2.2.1", - "@totejs/icons": "^2.19.0", - "@totejs/uikit": "^2.54.5", + "@node-real/icons": "latest", + "@node-real/uikit": "latest", "@node-real/walletkit": "workspace:*", "prism-react-renderer": "~1.3.5", "react": "^18.2.0", diff --git a/website/src/App.tsx b/website/src/App.tsx index ecc72866..0038373b 100644 --- a/website/src/App.tsx +++ b/website/src/App.tsx @@ -1,5 +1,5 @@ import '@node-real/walletkit/styles.css'; -import { ThemeProvider } from '@totejs/uikit'; +import { ThemeProvider } from '@node-real/uikit'; import { Routes, Route } from 'react-router-dom'; import VConsole from 'vconsole'; @@ -7,17 +7,20 @@ import { theme } from './theme'; import { Layout } from './components/Layout'; import DocsPage from './pages/index.mdx'; import { MDXComponents } from './components/MDXComponent'; +import { Playground } from './playground'; new VConsole(); export default function App() { return ( - - - } /> - - + + + + } /> + + + ); } diff --git a/website/src/components/CodeBlock/CopyButton/index.tsx b/website/src/components/CodeBlock/CopyButton/index.tsx index 7825bf1f..756b49ba 100644 --- a/website/src/components/CodeBlock/CopyButton/index.tsx +++ b/website/src/components/CodeBlock/CopyButton/index.tsx @@ -1,4 +1,4 @@ -import { Button, useClipboard } from '@totejs/uikit'; +import { Button, useClipboard } from '@node-real/uikit'; interface CopyButtonProps { code: string; diff --git a/website/src/components/CodeBlock/Highlight/index.tsx b/website/src/components/CodeBlock/Highlight/index.tsx index 65fe76d2..991b5a5b 100644 --- a/website/src/components/CodeBlock/Highlight/index.tsx +++ b/website/src/components/CodeBlock/Highlight/index.tsx @@ -1,4 +1,4 @@ -import { Box } from '@totejs/uikit'; +import { Box } from '@node-real/uikit'; import BaseHighlight, { Language, defaultProps, PrismTheme } from 'prism-react-renderer'; import CopyButton from '../CopyButton'; diff --git a/website/src/components/CodeBlock/LiveCode/index.tsx b/website/src/components/CodeBlock/LiveCode/index.tsx index 3297f70a..71b7894a 100644 --- a/website/src/components/CodeBlock/LiveCode/index.tsx +++ b/website/src/components/CodeBlock/LiveCode/index.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'; import { Language, PrismTheme } from 'prism-react-renderer'; -import { Box } from '@totejs/uikit'; +import { Box } from '@node-real/uikit'; import scope from './scope'; import { EditorStyles, PreviewStyles } from '../styles'; diff --git a/website/src/components/CodeBlock/LiveCode/scope.tsx b/website/src/components/CodeBlock/LiveCode/scope.tsx index 3db7d029..9b07510c 100644 --- a/website/src/components/CodeBlock/LiveCode/scope.tsx +++ b/website/src/components/CodeBlock/LiveCode/scope.tsx @@ -1,5 +1,5 @@ -import * as icons from '@totejs/icons'; -import * as uikit from '@totejs/uikit'; +import * as icons from '@node-real/icons'; +import * as uikit from '@node-real/uikit'; import React from 'react'; const scope = { diff --git a/website/src/components/Layout/Header/index.tsx b/website/src/components/Layout/Header/index.tsx index 226c7804..41889fa3 100644 --- a/website/src/components/Layout/Header/index.tsx +++ b/website/src/components/Layout/Header/index.tsx @@ -1,4 +1,4 @@ -import { Flex, HStack, Heading, IconButton, Link } from '@totejs/uikit'; +import { Flex, HStack, Heading, IconButton, Link } from '@node-real/uikit'; import { GitHubIcon } from '../../SvgIcon/GitHubIcon'; import { SwitchColorMode } from '../SwitchColorMode'; diff --git a/website/src/components/Layout/SwitchColorMode/index.tsx b/website/src/components/Layout/SwitchColorMode/index.tsx index f161005b..71c630d4 100644 --- a/website/src/components/Layout/SwitchColorMode/index.tsx +++ b/website/src/components/Layout/SwitchColorMode/index.tsx @@ -1,5 +1,5 @@ -import { MoonIcon, SunIcon } from '@totejs/icons'; -import { Circle, Flex, useColorMode } from '@totejs/uikit'; +import { MoonIcon, SunIcon } from '@node-real/icons'; +import { Circle, Flex, useColorMode } from '@node-real/uikit'; export function SwitchColorMode() { const { colorMode, toggleColorMode } = useColorMode(); diff --git a/website/src/components/Layout/index.tsx b/website/src/components/Layout/index.tsx index 9b0ea216..3e084b92 100644 --- a/website/src/components/Layout/index.tsx +++ b/website/src/components/Layout/index.tsx @@ -1,4 +1,4 @@ -import { Box, Flex } from '@totejs/uikit'; +import { Box, Flex } from '@node-real/uikit'; import { Header } from './Header'; export function Layout(props: React.PropsWithChildren) { diff --git a/website/src/components/MDXComponent/index.tsx b/website/src/components/MDXComponent/index.tsx index 4420d33f..bd74dc17 100644 --- a/website/src/components/MDXComponent/index.tsx +++ b/website/src/components/MDXComponent/index.tsx @@ -1,23 +1,23 @@ -import * as UIKit from '@totejs/uikit'; +import * as UIKit from '@node-real/uikit'; import CodeBlock from '../CodeBlock'; -import Playground from '../../playground'; +import * as Examples from '../../playground/example'; export const MDXComponents = { - Playground, - h1: (props: any) => , + ...Examples, + h1: (props: any) => , h2: (props: any) => { const { children, ...restProps } = props; return ( - + {children} ); }, - h3: (props: any) => , - h4: (props: any) => , + h3: (props: any) => , + h4: (props: any) => , code: (props: any) => { if (props.className) { return ; diff --git a/website/src/components/SvgIcon/GitHubIcon.tsx b/website/src/components/SvgIcon/GitHubIcon.tsx index 6f80c05b..af7e7700 100644 --- a/website/src/components/SvgIcon/GitHubIcon.tsx +++ b/website/src/components/SvgIcon/GitHubIcon.tsx @@ -1,4 +1,4 @@ -import { Icon, IconProps } from '@totejs/icons'; +import { Icon, IconProps } from '@node-real/icons'; export const GitHubIcon = (props: IconProps) => ( diff --git a/website/src/main.tsx b/website/src/main.tsx index b9028cb6..810f5535 100644 --- a/website/src/main.tsx +++ b/website/src/main.tsx @@ -1,5 +1,5 @@ import ReactDOM from 'react-dom/client'; -import { ColorModeScript } from '@totejs/uikit'; +import { ColorModeScript } from '@node-real/uikit'; import { HashRouter } from 'react-router-dom'; import App from './App'; diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx index e0059200..25029bb1 100644 --- a/website/src/pages/index.mdx +++ b/website/src/pages/index.mdx @@ -3,7 +3,7 @@ ## Installation ```bash -npm i @node-real/walletkit wagmi viem +npm i @node-real/walletkit@^1 wagmi@^1 viem@^1 ``` - wagmi > 1.0.0 @@ -14,10 +14,6 @@ npm i @node-real/walletkit wagmi viem - [nextjs](https://github.com/node-real/walletkit/blob/main/examples/nextjs/pages/_app.tsx) - [vite](https://github.com/node-real/walletkit/blob/main/examples/vite/src/App.tsx) -## Playground - - - ## Supported wallets | wallet | mainnet | testnet | @@ -31,6 +27,16 @@ npm i @node-real/walletkit wagmi viem | trustWallet() | ✅ | ✅ | | walletConnect() | - | - | +## Playground + +### Basic Usage + + + +### Embedded Modal + + + ## How to use ### 1. Import walletkit styles @@ -128,23 +134,44 @@ export default function App() { } ``` -## useModal +## Embed modal into page + +```jsx live=false +import { WalletKitEmbeddedModal } from '@node-real/walletkit'; + + + + + +; +``` -Use hook `useModal` to show/dismiss the specific modal. Must be used within a ``. +## useModal, useProfileModal, useSwitchNetworkModal -- `onOpen`: open the connect wallet modal -- `onOpenProfile`: open the connected modal -- `onOpenSwitchNetwork`: open the switch network modal +Use hooks `useModal`, `useProfileModal`, `useSwitchNetworkModal` to show/dismiss the specific modal. +Must be used within a ``. ```tsx live=false -import { useModal } from '@node-real/walletkit'; +import { useModal, useProfileModal, useSwitchNetworkModal } from '@node-real/walletkit'; -const { isOpen, onOpen, onClose, onOpenProfile, onOpenSwitchNetwork } = useModal(); +// useModal +const { isOpen, onOpen, onClose } = useModal(); +; - - - -``` +// useProfileModal +const { isOpen, onOpen, onClose } = useProfileModal(); +; + +// useSwitchNetworkModal +const { isOpen, onOpen, onClose } = useSwitchNetworkModal(); +; +```` ## Customizing wallets @@ -213,8 +240,8 @@ metaMask({ ## Customizing ConnectButton -Note that `show()` will open the `connected page` instead of the `connectors page` once the wallet -is connected. +Note that `show()` will open the `ProfileModal` instead of the `ConnectorsModal` once the wallet is +connected. ```tsx live=false @@ -230,6 +257,15 @@ is connected. ``` +Or using the hook `useModal` + +```tsx live=false +import { useModal } from '@node-real/walletkit'; + +const { isOpen, onOpen, onClose } = useModal(); +; +``` + ## Customizing WalletConnect recommended wallets Sometimes, we need to customize WalletConnect's wallets, which we can configure as follows. The @@ -269,15 +305,6 @@ const config = createConfig( ); ``` -`useModal` - -```tsx live=false -import { useModal } from '@node-real/walletkit'; - -const { isOpen, onOpen, onClose } = useModal(); -; -``` - ## Customizing chains The chain's information will be displayed in the `switch network modal` @@ -450,12 +477,21 @@ 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; + // Modal title + title?: ReactNode; + // When the amount of wallets exceeds or equals this value, switch to the grid layout. gridLayoutThreshold?: number; + // Whether to use grid layout on mobile devices. + useGridLayoutOnMobile: boolean; + hideNoWalletCTA?: boolean; hideOfficialWalletConnectCTA?: boolean; + // Hide the inner modal so that you can embed the modal into the page. + hideInnerModal?: boolean; + closeModalAfterConnected?: boolean; closeModalAfterSwitchingNetwork?: boolean; closeModalOnEsc?: boolean; diff --git a/website/src/playground/example.tsx b/website/src/playground/example.tsx new file mode 100644 index 00000000..51f39998 --- /dev/null +++ b/website/src/playground/example.tsx @@ -0,0 +1,25 @@ +import { Box } from '@node-real/uikit'; +import { + ProfileModal, + SwitchNetworkModal, + WalletKitButton, + WalletKitEmbeddedModal, +} from '@node-real/walletkit'; + +export function BaseExample() { + return ( + + + + + ); +} + +export function EmbeddedExample() { + return ( + + + + + ); +} diff --git a/website/src/playground/index.tsx b/website/src/playground/index.tsx index 780c7bc5..5f67fcbb 100644 --- a/website/src/playground/index.tsx +++ b/website/src/playground/index.tsx @@ -1,12 +1,6 @@ import { WagmiConfig, createConfig } from 'wagmi'; -import { - WalletKitButton, - WalletKitProvider, - getDefaultConfig, - WalletKitOptions, - SwitchNetworkModal, -} from '@node-real/walletkit'; +import { WalletKitProvider, getDefaultConfig } from '@node-real/walletkit'; import { binanceWeb3Wallet, bitgetWallet, @@ -20,7 +14,7 @@ import { } from '@node-real/walletkit/wallets'; import { chains } from './chains'; -import { Box, useColorMode } from '@totejs/uikit'; +import { useColorMode } from '@node-real/uikit'; const config = createConfig( getDefaultConfig({ @@ -41,21 +35,20 @@ const config = createConfig( }), ); -const options: WalletKitOptions = { - initialChainId: 1, -}; - -export default function Playground() { +export function Playground(props: React.PropsWithChildren) { const { colorMode } = useColorMode(); return ( - - - - - - - - + + + {props.children} + + ); } diff --git a/website/src/theme/index.tsx b/website/src/theme/index.tsx index 442e60cc..311c7cb1 100644 --- a/website/src/theme/index.tsx +++ b/website/src/theme/index.tsx @@ -1,4 +1,4 @@ -import { Theme } from '@totejs/uikit'; +import { Theme } from '@node-real/uikit'; export const theme: Theme = { config: {