-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add more directive methods for open different modals (#17)
* feat: Add test example * feat: Update examples * feat: Add disclaimer & download url * docs: Update example * docs: Update docs * docs: Update docs * docs: Update gitignore * docs: Update docs * feat: Add zIndices theme config * feat: Update examples * feat: Refactor switch network modal * refactor: Clean code * feat: Update examples * refactor: Update dependencies * feat: Update version * docs: Update docs
- Loading branch information
Showing
43 changed files
with
729 additions
and
1,783 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
packages/walletkit/src/components/ModalProvider/context.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React, { useContext } from 'react'; | ||
|
|
||
| export interface OpenSwitchNetworkOptions extends React.MouseEvent { | ||
| isClosable?: boolean; | ||
| } | ||
|
|
||
| export interface ModalContextProps { | ||
| isClosable: boolean; | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| onOpen: () => void; | ||
| onOpenProfile: () => void; | ||
| onOpenSwitchNetwork: (options?: OpenSwitchNetworkOptions) => void; | ||
| } | ||
|
|
||
| export const ModalContext = React.createContext({} as ModalContextProps); | ||
|
|
||
| export function useModal() { | ||
| const context = useContext(ModalContext); | ||
| return context; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { useEffect, useMemo, useState } from 'react'; | ||
| import { useDisclosure } from '../../base/hooks/useDisclosure'; | ||
| import { ModalContext, OpenSwitchNetworkOptions } from './context'; | ||
| import { useRouter } from '../RouteProvider/context'; | ||
| import { useAccount, useNetwork } from 'wagmi'; | ||
| import { routes } from '../RouteProvider'; | ||
| import { toast } from '../../base/components/toast'; | ||
|
|
||
| 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(); | ||
|
|
||
| useEffect(() => { | ||
| if (router.route === routes.SWITCH_NETWORK && isConnected && !chain?.unsupported) { | ||
| setIsClosable(true); | ||
| } | ||
| }, [chain?.unsupported, isConnected, router.route]); | ||
|
|
||
| const value = useMemo(() => { | ||
| return { | ||
| isClosable, | ||
| isOpen, | ||
| onClose() { | ||
| router.reset(); | ||
| setIsClosable(true); | ||
| onClose(); | ||
| }, | ||
| onOpen() { | ||
| 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.', | ||
| }); | ||
| } | ||
| }, | ||
| }; | ||
| }, [isClosable, isConnected, isOpen, onClose, onOpen, router]); | ||
|
|
||
| useEffect(() => { | ||
| if ([routes.CONNECTING, routes.CONNECT_WITH_QRCODE].includes(router.route) && isConnected) { | ||
| onClose(); | ||
| } | ||
| }, [isConnected, onClose, router.route]); | ||
|
|
||
| return <ModalContext.Provider value={value}>{children}</ModalContext.Provider>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,35 @@ | ||
| import { cx } from '../../base/utils/css'; | ||
| import { useRouter } from '../RouteProvider/context'; | ||
| import { useWalletKitContext } from '../WalletKitProvider/context'; | ||
| import { Box, BoxProps } from '../../base/components/Box'; | ||
| import { IconButton } from '../../base/components/IconButton'; | ||
| import { BackIcon } from '../../base/icons/BackIcon'; | ||
| import { CloseIcon } from '../../base/icons/CloseIcon'; | ||
| import { clsNavbar } from './styles.css'; | ||
| import { useModal } from '../..'; | ||
|
|
||
| export interface NavbarProps extends BoxProps { | ||
| showBack?: boolean; | ||
| onBack?: () => void; | ||
| onClose?: () => void; | ||
| } | ||
|
|
||
| export function Navbar(props: NavbarProps) { | ||
| const { className, showBack = false, onBack, onClose, ...restProps } = props; | ||
| const { className, showBack = false, onBack, ...restProps } = props; | ||
|
|
||
| const { onClose: onCloseModal } = useWalletKitContext(); | ||
| const { onClose: onCloseModal } = useModal(); | ||
| const router = useRouter(); | ||
|
|
||
| const onBeforeBack = () => { | ||
| onBack?.(); | ||
| router.back(); | ||
| }; | ||
|
|
||
| const onBeforeClose = () => { | ||
| onClose?.(); | ||
| onCloseModal(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box className={cx('wk-navbar', clsNavbar, className)} {...restProps}> | ||
| {showBack && ( | ||
| <IconButton className="wk-back-button" icon={<BackIcon />} onClick={onBeforeBack} /> | ||
| <IconButton className="wk-navbar-back-button" icon={<BackIcon />} onClick={onBeforeBack} /> | ||
| )} | ||
| <Box style={{ flex: 1 }} /> | ||
| <IconButton className="wk-close-button" icon={<CloseIcon />} onClick={onBeforeClose} /> | ||
| <IconButton className="wk-navbar-close-button" icon={<CloseIcon />} onClick={onCloseModal} /> | ||
| </Box> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.