108 lines
3.2 KiB
JavaScript
108 lines
3.2 KiB
JavaScript
import Alert from 'react-bootstrap/Alert'
|
|
import styles from './banners.module.css'
|
|
import { useEffect, useState } from 'react'
|
|
import { useMe } from '../components/me'
|
|
import { useMutation } from '@apollo/client'
|
|
import { WELCOME_BANNER_MUTATION } from '../fragments/users'
|
|
import { useToast } from '../components/toast'
|
|
import { BALANCE_LIMIT_MSATS } from '../lib/constants'
|
|
import { msatsToSats, numWithUnits } from '../lib/format'
|
|
|
|
export function WelcomeBanner () {
|
|
const me = useMe()
|
|
const toaster = useToast()
|
|
const [hidden, setHidden] = useState(true)
|
|
const handleClose = async () => {
|
|
window.localStorage.setItem('hideWelcomeBanner', true)
|
|
setHidden(true)
|
|
if (me) {
|
|
try {
|
|
await hideWelcomeBanner()
|
|
} catch (err) {
|
|
console.log(err)
|
|
toaster.danger('mutation failed')
|
|
}
|
|
}
|
|
}
|
|
const [hideWelcomeBanner] = useMutation(WELCOME_BANNER_MUTATION, {
|
|
update (cache) {
|
|
cache.modify({
|
|
id: `User:${me.id}`,
|
|
fields: {
|
|
hideWelcomeBanner () {
|
|
return true
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
useEffect(() => {
|
|
setHidden(me?.privates?.hideWelcomeBanner || (!me && window.localStorage.getItem('hideWelcomeBanner')))
|
|
}, [me?.privates?.hideWelcomeBanner])
|
|
|
|
if (hidden) return null
|
|
|
|
return (
|
|
<Alert className={styles.banner} key='info' variant='info' onClose={handleClose} dismissible>
|
|
<Alert.Heading>
|
|
👋 Welcome to Stacker News!
|
|
</Alert.Heading>
|
|
<p>
|
|
To get started, check out our{' '}
|
|
<Alert.Link href='/faq'>FAQs</Alert.Link> or{' '}
|
|
<Alert.Link href='/guide'>content guidelines</Alert.Link>, or go ahead and{' '}
|
|
{
|
|
me
|
|
? (
|
|
<Alert.Link href='/post'>make a post</Alert.Link>
|
|
)
|
|
: (
|
|
<>
|
|
<Alert.Link href='/signup'>sign up</Alert.Link> or create an{' '}
|
|
<Alert.Link href='/post'>anonymous post</Alert.Link>
|
|
</>
|
|
)
|
|
}.
|
|
</p>
|
|
</Alert>
|
|
)
|
|
}
|
|
|
|
export function WalletLimitBanner () {
|
|
const me = useMe()
|
|
|
|
const limitReached = me?.privates?.sats >= msatsToSats(BALANCE_LIMIT_MSATS)
|
|
if (!me || !limitReached) return
|
|
|
|
return (
|
|
<Alert className={styles.banner} key='info' variant='warning'>
|
|
<Alert.Heading>
|
|
Your wallet is over the current limit ({numWithUnits(msatsToSats(BALANCE_LIMIT_MSATS))})
|
|
</Alert.Heading>
|
|
<p className='mb-1'>
|
|
Deposits to your wallet from <strong>outside</strong> of SN are blocked.
|
|
</p>
|
|
<p>
|
|
Please spend or withdraw sats to restore full wallet functionality.
|
|
</p>
|
|
</Alert>
|
|
)
|
|
}
|
|
|
|
export function WalletSecurityBanner () {
|
|
return (
|
|
<Alert className={styles.banner} key='info' variant='warning'>
|
|
<Alert.Heading>
|
|
Wallet Security Disclaimer
|
|
</Alert.Heading>
|
|
<p className='mb-1'>
|
|
Your wallet's credentials are stored in the browser and never go to the server.<br />
|
|
However, you should definitely <strong>set a budget in your wallet</strong>.
|
|
</p>
|
|
<p>
|
|
Also, for the time being, you will have to reenter your credentials on other devices.
|
|
</p>
|
|
</Alert>
|
|
)
|
|
}
|