diff --git a/components/banners.js b/components/banners.js index 3527d4748..7bf34119b 100644 --- a/components/banners.js +++ b/components/banners.js @@ -5,8 +5,10 @@ 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 default function WelcomeBanner () { +export function WelcomeBanner () { const me = useMe() const toaster = useToast() const [hidden, setHidden] = useState(true) @@ -65,3 +67,20 @@ export default function WelcomeBanner () { ) } + +export function WalletLimitBanner () { + const me = useMe() + + const limitReached = me?.privates?.sats >= msatsToSats(BALANCE_LIMIT_MSATS) + if (!me || !limitReached) return + + return ( + +

+ Your wallet is over the current limit ({numWithUnits(msatsToSats(BALANCE_LIMIT_MSATS))}).
+ You will not be able to deposit any more funds or receive sats from outside of SN.
+ Please withdraw sats to restore full wallet functionality. +

+
+ ) +} diff --git a/components/header.js b/components/header.js index c7bcdae1a..079ee0998 100644 --- a/components/header.js +++ b/components/header.js @@ -12,13 +12,13 @@ import Head from 'next/head' import { signOut } from 'next-auth/react' import { useCallback, useEffect } from 'react' import { randInRange } from '../lib/rand' -import { abbrNum } from '../lib/format' +import { abbrNum, msatsToSats } from '../lib/format' import NoteIcon from '../svgs/notification-4-fill.svg' import { useQuery } from '@apollo/client' import LightningIcon from '../svgs/bolt.svg' import SearchIcon from '../svgs/search-line.svg' import BackArrow from '../svgs/arrow-left-line.svg' -import { SSR } from '../lib/constants' +import { BALANCE_LIMIT_MSATS, SSR } from '../lib/constants' import { useLightning } from './lightning' import { HAS_NOTIFICATIONS } from '../fragments/notifications' import AnonIcon from '../svgs/spy-fill.svg' @@ -153,13 +153,15 @@ function NavProfileMenu ({ me, dropNavKey }) { function StackerCorner ({ dropNavKey }) { const me = useMe() + const walletLimitReached = me.privates?.sats >= msatsToSats(BALANCE_LIMIT_MSATS) + return (
- + diff --git a/pages/wallet.js b/pages/wallet.js index cac51fb04..10354dca4 100644 --- a/pages/wallet.js +++ b/pages/wallet.js @@ -15,8 +15,8 @@ import { CREATE_WITHDRAWL, SEND_TO_LNADDR } from '../fragments/wallet' import { getGetServerSideProps } from '../api/ssrApollo' import { amountSchema, lnAddrSchema, withdrawlSchema } from '../lib/validate' import Nav from 'react-bootstrap/Nav' -import { SSR } from '../lib/constants' -import { numWithUnits } from '../lib/format' +import { BALANCE_LIMIT_MSATS, SSR } from '../lib/constants' +import { msatsToSats, numWithUnits } from '../lib/format' import styles from '../components/user-header.module.css' import HiddenWalletSummary from '../components/hidden-wallet-summary' import AccordianItem from '../components/accordian-item' @@ -27,6 +27,7 @@ import CameraIcon from '../svgs/camera-line.svg' import { useShowModal } from '../components/modal' import { useField } from 'formik' import { useToast } from '../components/toast' +import { WalletLimitBanner } from '../components/banners' export const getServerSideProps = getGetServerSideProps({ authRequired: true }) @@ -49,6 +50,7 @@ export default function Wallet () { return ( + @@ -58,8 +60,9 @@ export default function Wallet () { function YouHaveSats () { const me = useMe() + const limitReached = me?.privates?.sats >= msatsToSats(BALANCE_LIMIT_MSATS) return ( -

+

you have{' '} {me && ( me.privates?.hideWalletBalance @@ -115,6 +118,7 @@ export function FundForm () { return ( <> +
{me && showAlert &&