mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
b8247c7ef4
* WIP * query update * quick fix Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * get blocks number when no provider, added threshold * format code * naming fix * show graph out of sync message inside announcement banner * added loader * moved sync component * refactor all the things * new atoms/AnnouncementBanner : banner component reduced to presentation only, where its content is always passed as props * revised molecules/NetworkBanner: the former AnnouncementBanner now holds all the specific network detection logic, in the end also returns the atoms/AnnouncementBanner * new hook hooks/useGraphSyncStatus: move all the graph fetching logic in there so we can use its status in multiple places in the app without all this props passing. This also decouples the SyncStatus component in footer from its logic * in App.tsx, add the graph sync warning banner in another atoms/AnnouncementBanner, getting its values from the hook * data flow refactor * .env.example tweak * race condition fighting * subgraph loading * polygon fallback fix * no interval fetching * turn around logic for adding infura ID * removed graphNotSynched Co-authored-by: mihaisc <mihai.scarlat@smartcontrol.ro> Co-authored-by: Norbi <katunanorbert@gmai.com> Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
45 lines
1017 B
TypeScript
45 lines
1017 B
TypeScript
import React, { ReactElement } from 'react'
|
|
import classNames from 'classnames/bind'
|
|
import Markdown from '../atoms/Markdown'
|
|
import Button from '../atoms/Button'
|
|
import styles from './AnnouncementBanner.module.css'
|
|
|
|
const cx = classNames.bind(styles)
|
|
|
|
export interface AnnouncementAction {
|
|
name: string
|
|
style?: string
|
|
handleAction: () => void
|
|
}
|
|
|
|
export default function AnnouncementBanner({
|
|
text,
|
|
action,
|
|
state,
|
|
className
|
|
}: {
|
|
text: string
|
|
action?: AnnouncementAction
|
|
state?: 'success' | 'warning' | 'error'
|
|
className?: string
|
|
}): ReactElement {
|
|
const styleClasses = cx({
|
|
banner: true,
|
|
error: state === 'error',
|
|
warning: state === 'warning',
|
|
success: state === 'success',
|
|
[className]: className
|
|
})
|
|
|
|
return (
|
|
<div className={styleClasses}>
|
|
{text && <Markdown className={styles.text} text={text} />}
|
|
{action && (
|
|
<Button style="text" size="small" onClick={action.handleAction}>
|
|
{action.name}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|