-
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.
Merge pull request #104 from Agoric/feat/add-notice-banner
feat: added banner for network-config notices
- Loading branch information
Showing
6 changed files
with
109 additions
and
13 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import { FiX } from 'react-icons/fi'; | ||
import { GrAnnounce } from 'react-icons/gr'; | ||
import { motion, AnimatePresence } from 'framer-motion'; | ||
import { useContext, useState } from 'react'; | ||
import { activeNotices } from 'utils/networkConfig'; | ||
import { WalletContext } from 'lib/wallet'; | ||
|
||
const NoticeBanner = () => { | ||
const [isDismissed, setIsDismissed] = useState(false); | ||
const { chainKit } = useContext(WalletContext); | ||
const config = chainKit.networkConfig; | ||
const bannerContent = config && activeNotices(config).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> | ||
); | ||
}; | ||
|
||
export default NoticeBanner; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
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 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); | ||
}; | ||
|
||
export const fetchNetworkConfig = async url => { | ||
console.log('fetchNetworkConfig: fetch', url); // log net IO | ||
const res = await fetch(url); | ||
if (!res.ok) { | ||
throw Error(`Cannot fetch network: ${res.status}`); | ||
} | ||
return await res.json(); | ||
}; |