fund error on upvote

components/fund-error.js

@@ -0,0 +1,47 @@
+import { Button, Modal } from 'react-bootstrap'
+import React, { useState, useCallback, useContext } from 'react'
+import Link from 'next/link'
+
+export const FundErrorContext = React.createContext({
+  error: null,
+  toggleError: () => {}
+})
+
+export function FundErrorProvider ({ children }) {
+  const [error, setError] = useState(false)
+
+  const contextValue = {
+    error,
+    setError: useCallback(e => setError(e), [])
+  }
+
+  return (
+    <FundErrorContext.Provider value={contextValue}>
+      {children}
+    </FundErrorContext.Provider>
+  )
+}
+
+export function useFundError () {
+  const { error, setError } = useContext(FundErrorContext)
+  return { error, setError }
+}
+
+export function FundErrorModal () {
+  const { error, setError } = useFundError()
+  return (
+    <Modal
+      show={error}
+      onHide={() => setError(false)}
+    >
+      <Modal.Body>
+        <p>you're out of sats!</p>
+        <div className='d-flex justify-content-end'>
+          <Link href='/wallet?type=fund'>
+            <Button variant='success' onClick={() => setError(false)}>fund</Button>
+          </Link>
+        </div>
+      </Modal.Body>
+    </Modal>
+  )
+}

components/upvote.js

@@ -3,9 +3,11 @@ import UpArrow from '../svgs/lightning-arrow.svg'
 import styles from './upvote.module.css'
 import { gql, useMutation } from '@apollo/client'
 import { signIn, useSession } from 'next-auth/client'
+import { useFundError } from './fund-error'
 
 export default function UpVote ({ itemId, meSats, className }) {
   const [session] = useSession()
+  const { setError } = useFundError()
   const [vote] = useMutation(
     gql`
       mutation vote($id: ID!, $sats: Int!) {
@@ -45,8 +47,15 @@ export default function UpVote ({ itemId, meSats, className }) {
             session
               ? async () => {
                   if (!itemId) return
-                  const { error } = await vote({ variables: { id: itemId, sats: 1 } })
+                  try {
-                  if (error) {
+                    await vote({ variables: { id: itemId, sats: 1 } })
+                  } catch (error) {
+                    console.log(error.toString())
+                    if (error.toString().includes('insufficient funds')) {
+                      console.log('hjo')
+                      setError(true)
+                      return
+                    }
                     throw new Error({ message: error.toString() })
                   }
 

pages/_app.js

@@ -1,6 +1,7 @@
 import '../styles/globals.scss'
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
 import { Provider } from 'next-auth/client'
+import { FundErrorModal, FundErrorProvider } from '../components/fund-error'
 
 const client = new ApolloClient({
   uri: '/api/graphql',
@@ -10,9 +11,12 @@ const client = new ApolloClient({
 function MyApp ({ Component, pageProps }) {
   return (
     <Provider session={pageProps.session}>
+      <FundErrorProvider>
+        <FundErrorModal />
         <ApolloProvider client={client}>
           <Component {...pageProps} />
         </ApolloProvider>
+      </FundErrorProvider>
     </Provider>
   )
 }