Add wallet limit banner

api/resolvers/user.js

@@ -648,6 +648,14 @@ export default {
 
       await models.user.update({ where: { id: me.id }, data: { hideWelcomeBanner: true } })
       return true
+    },
+    hideWalletLimitBanner: async (parent, data, { me, models }) => {
+      if (!me) {
+        throw new GraphQLError('you must be logged in', { extensions: { code: 'UNAUTHENTICATED' } })
+      }
+
+      await models.user.update({ where: { id: me.id }, data: { hideWalletLimitBanner: true } })
+      return true
     }
   },
 

api/typeDefs/user.js

@@ -28,6 +28,7 @@ export default gql`
     unlinkAuth(authType: String!): AuthMethods!
     linkUnverifiedEmail(email: String!): Boolean
     hideWelcomeBanner: Boolean
+    hideWalletLimitBanner: Boolean
     subscribeUserPosts(id: ID): User
     subscribeUserComments(id: ID): User
     toggleMute(id: ID): User
@@ -103,6 +104,7 @@ export default gql`
     """
     lastCheckedJobs: String
     hideWelcomeBanner: Boolean!
+    hideWalletLimitBanner: Boolean!
     tipPopover: Boolean!
     upvotePopover: Boolean!
     hasInvites: Boolean!

components/banners.js

@@ -3,8 +3,10 @@ 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 { WALLET_LIMIT_BANNER_MUTATION, 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 () {
   const me = useMe()
@@ -65,3 +67,50 @@ export default function WelcomeBanner () {
     </Alert>
   )
 }
+
+export function WalletLimitBanner ({ dismissible }) {
+  // TODO refactor this since it's mostly the same as the code for the welcome banner
+  const me = useMe()
+  const toaster = useToast()
+  const [hidden, setHidden] = useState(true)
+  const handleClose = async () => {
+    window.localStorage.setItem('hideWalletLimitBanner', true)
+    setHidden(true)
+    if (me) {
+      try {
+        await hideWalletLimitBanner()
+      } catch (err) {
+        console.log(err)
+        toaster.danger('mutation failed')
+      }
+    }
+  }
+  const [hideWalletLimitBanner] = useMutation(WALLET_LIMIT_BANNER_MUTATION, {
+    update (cache) {
+      cache.modify({
+        id: `User:${me.id}`,
+        fields: {
+          hideWalletLimitBanner () {
+            return true
+          }
+        }
+      })
+    }
+  })
+  useEffect(() => {
+    setHidden(me?.privates?.hideWalletLimitBanner || (!me && window.localStorage.getItem('hideWalletLimitBanner')))
+  }, [me?.privates?.hideWalletLimitBanner])
+
+  const limitReached = me.privates?.sats >= BALANCE_LIMIT_MSATS
+  if (!limitReached || (hidden && dismissible)) return
+
+  return (
+    <Alert className={styles.banner} key='info' variant='warning' onClose={handleClose} dismissible={dismissible}>
+      <p>
+        Your wallet is over the current limit ({numWithUnits(msatsToSats(BALANCE_LIMIT_MSATS))}).<br />
+        You will not be able to deposit any more funds or receive sats from outside of SN.<br />
+        Please withdraw sats to restore full wallet functionality.
+      </p>
+    </Alert>
+  )
+}

fragments/users.js

@@ -126,6 +126,13 @@ gql`
   }
 `
 
+export const WALLET_LIMIT_BANNER_MUTATION =
+gql`
+  mutation hideWalletLimitBanner {
+    hideWalletLimitBanner
+  }
+`
+
 export const USER_SUGGESTIONS =
 gql`
   query userSuggestions($q: String!, $limit: Limit) {

pages/wallet.js

@@ -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 (
       <CenterLayout>
         <YouHaveSats />
+        <WalletLimitBanner />
         <WalletForm />
         <WalletHistory />
       </CenterLayout>
@@ -116,6 +118,7 @@ export function FundForm () {
     <>
       <YouHaveSats />
       <div className='w-100 py-5'>
+        <WalletLimitBanner />
         {me && showAlert &&
           <Alert
             variant='success' dismissible onClose={() => {

pages/~/index.js

@@ -4,7 +4,7 @@ import Items from '../../components/items'
 import Layout from '../../components/layout'
 import { SUB_FULL, SUB_ITEMS } from '../../fragments/subs'
 import Snl from '../../components/snl'
-import WelcomeBanner from '../../components/banners'
+import WelcomeBanner, { WalletLimitBanner } from '../../components/banners'
 import { AccordianCard } from '../../components/accordian-item'
 import Text from '../../components/text'
 import { useMe } from '../../components/me'
@@ -72,6 +72,7 @@ export default function Sub ({ ssrData }) {
           <>
             <Snl />
             <WelcomeBanner />
+            <WalletLimitBanner dismissible />
           </>)}
       <Items ssrData={ssrData} variables={variables} />
     </Layout>

prisma/migrations/20231220044019_wallet_limit_banner/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN     "hideWalletLimitBanner" BOOLEAN NOT NULL DEFAULT false;

prisma/schema.prisma

@@ -94,6 +94,7 @@ model User {
   followers             UserSubscription[]   @relation("follower")
   followees             UserSubscription[]   @relation("followee")
   hideWelcomeBanner     Boolean              @default(false)
+  hideWalletLimitBanner Boolean              @default(false)
   diagnostics           Boolean              @default(false)
   hideIsContributor     Boolean              @default(false)
   muters                Mute[]               @relation("muter")