-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: added network notice banner as a resuable component
- Loading branch information
1 parent
02a116c
commit 87cbb39
Showing
5 changed files
with
162 additions
and
5 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
90 changes: 90 additions & 0 deletions
90
packages/react-components/src/lib/components/NoticeBanner.tsx
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,90 @@ | ||
| import { FiX } from 'react-icons/fi'; | ||
| import { GrAnnounce } from 'react-icons/gr'; | ||
| import { motion, AnimatePresence } from 'framer-motion'; | ||
| import { useState } from 'react'; | ||
| import { activeNotices, loadNetworkConfig } from '../utils/networkConfig'; | ||
| import { atom, useAtomValue } from 'jotai'; | ||
| import { loadable, atomWithStorage } from 'jotai/utils'; | ||
|
|
||
| const networkConfigs = { | ||
| mainnet: { | ||
| label: 'Agoric Mainnet', | ||
| url: 'https://main.agoric.net/network-config', | ||
| }, | ||
| testnet: { | ||
| label: 'Agoric Testnet', | ||
| url: 'https://testnet.agoric.net/network-config', | ||
| }, | ||
| devnet: { | ||
| label: 'Agoric Devnet', | ||
| url: 'https://devnet.agoric.net/network-config', | ||
| }, | ||
| ollinet: { | ||
| label: 'Agoric Ollinet', | ||
| url: 'https://ollinet.agoric.net/network-config', | ||
| }, | ||
| emerynet: { | ||
| label: 'Agoric Emerynet', | ||
| url: 'https://emerynet.agoric.net/network-config', | ||
| }, | ||
| localhost: { | ||
| label: 'Local Network', | ||
| url: 'https://wallet.agoric.app/wallet/network-config', | ||
| }, | ||
| }; | ||
|
|
||
| const networkConfigAtom = atomWithStorage( | ||
| 'agoric-network-config', | ||
| networkConfigs.mainnet | ||
| ); | ||
|
|
||
| const networkConfigPAtom = atom(async get => | ||
| loadNetworkConfig(get(networkConfigAtom).url) | ||
| ); | ||
|
|
||
| export const NoticeBanner = () => { | ||
| const [isDismissed, setIsDismissed] = useState(false); | ||
| const config = useAtomValue(loadable(networkConfigPAtom)); | ||
| const bannerContent = | ||
| config.state === 'hasData' && activeNotices(config.data).join(' • '); | ||
| const isVisible = | ||
| !isDismissed && bannerContent && bannerContent.trim().length; | ||
|
|
||
| return ( | ||
| <AnimatePresence initial={false}> | ||
| {isVisible && ( | ||
| <motion.div | ||
| initial="open" | ||
| animate="open" | ||
| exit="collapsed" | ||
| variants={{ | ||
| open: { height: 'auto' }, | ||
| collapsed: { height: 0 }, | ||
| }} | ||
| className="bg-yellow-400 overflow-hidden" | ||
| > | ||
| <motion.div className="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8"> | ||
| <motion.div className="flex flex-wrap items-center justify-between"> | ||
| <motion.div className="flex w-0 flex-1 items-center"> | ||
| <span className="flex rounded-lgp-2"> | ||
| <GrAnnounce className="h-6 w-6" aria-hidden="true" /> | ||
| </span> | ||
| <p className="ml-3 font-medium text-black">{bannerContent}</p> | ||
| </motion.div> | ||
| <motion.div className="order-2 flex-shrink-0 sm:order-3 sm:ml-3"> | ||
| <button | ||
| onClick={() => setIsDismissed(true)} | ||
| type="button" | ||
| className="-mr-1 flex rounded-md p-2 hover:bg-black hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2" | ||
| > | ||
| <FiX className="h-6 w-6" /> | ||
| </button> | ||
| </motion.div> | ||
| </motion.div> | ||
| </motion.div> | ||
| </motion.div> | ||
| )} | ||
| </AnimatePresence> | ||
| ); | ||
| }; | ||
|
|
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| type NetworkNotice = { | ||
| start: string; | ||
| // In the future this might be optional to indicate that it's user-dismissable. | ||
| // In that case the client would need some persistent state, perhaps keyed by `message`. | ||
| end: string; | ||
| message: string; | ||
| }; | ||
|
|
||
| export type MinimalNetworkConfig = { | ||
| rpcAddrs: string[]; | ||
| chainName: string; | ||
| notices?: NetworkNotice[]; | ||
| }; | ||
|
|
||
| export const loadNetworkConfig = (url: string): Promise<MinimalNetworkConfig> => | ||
| fetch(url).then(res => res.json()); | ||
|
|
||
| export const activeNotices = ( | ||
| config: Pick<MinimalNetworkConfig, 'notices'>, | ||
| ) => { | ||
| const { notices } = config; | ||
| if (!notices) return []; | ||
|
|
||
| const now = Date.now(); | ||
| const active = notices.filter(n => { | ||
| const startD = Date.parse(n.start); | ||
| if (startD > now) { | ||
| return false; | ||
| } | ||
| const endD = Date.parse(n.end); | ||
| return startD < endD; | ||
| }); | ||
| return active.map(n => n.message); | ||
| }; | ||
|
|
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