feat: add blocked user modal

src/components/modals/Modal.tsx

@@ -130,6 +130,7 @@ export default function Modal({
                       className={cx(
                         'mb-2 text-2xl',
                         withCloseButton && 'pr-8',
+                        !description && 'mb-4',
                         titleClassName
                       )}
                     >

src/components/navbar/Navbar/AuthErrorModal.tsx

@@ -0,0 +1,41 @@
+import Button from '@/components/Button'
+import Modal from '@/components/modals/Modal'
+import ProfilePreview from '@/components/ProfilePreview'
+import { getUrlQuery } from '@/utils/links'
+import { useEffect, useState } from 'react'
+
+export default function AuthErrorModal() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [blockedAddress, setBlockedAddress] = useState('')
+
+  useEffect(() => {
+    const blockedAddress = getUrlQuery('auth-blocked')
+    if (blockedAddress) {
+      setIsOpen(true)
+      setBlockedAddress(blockedAddress)
+    }
+  }, [])
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      closeModal={() => setIsOpen(false)}
+      title='🚫 Your account was banned'
+      withCloseButton
+    >
+      <div className='flex flex-col gap-6'>
+        <div className='flex flex-col rounded-2xl bg-background-lighter p-4'>
+          <ProfilePreview address={blockedAddress} />
+        </div>
+        <div className='flex flex-col rounded-2xl bg-background-lighter p-4'>
+          <span className='mb-1 text-sm text-text-muted'>Reason for ban</span>
+          <span>You are stupid</span>
+          {/* TODO: add href to google forms */}
+          <Button className='mt-4' variant='primaryOutline' size='lg'>
+            Contact support
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

src/components/navbar/Navbar/Navbar.tsx

@@ -20,6 +20,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ComponentProps, ReactNode, useEffect, useRef, useState } from 'react'
 import { HiOutlineBell, HiOutlineChevronLeft } from 'react-icons/hi2'
+import AuthErrorModal from './AuthErrorModal'
 
 const ProfileAvatar = dynamic(() => import('./ProfileAvatar'), {
   ssr: false,
@@ -59,14 +60,16 @@ export default function Navbar({
   const prevAddress = usePrevious(address)
   const isLoggedIn = !!address
 
-  const isOpen = useLoginModal((state) => state.isOpen)
-  const setIsOpen = useLoginModal((state) => state.setIsOpen)
-  const initialOpenState = useLoginModal((state) => state.initialOpenState)
+  const isLoginModalOpen = useLoginModal((state) => state.isOpen)
+  const setIsLoginModalOpen = useLoginModal((state) => state.setIsOpen)
+  const initialLoginModalOpenState = useLoginModal(
+    (state) => state.initialOpenState
+  )
 
   useEffect(() => {
     const auth = getUrlQuery('auth') === 'true'
-    if (auth) setIsOpen(true)
-  }, [setIsOpen])
+    if (auth) setIsLoginModalOpen(true)
+  }, [setIsLoginModalOpen])
 
   const [openPrivateKeyNotice, setOpenPrivateKeyNotice] = useState(false)
   const isLoggingInWithKey = useRef(false)
@@ -88,7 +91,7 @@ export default function Navbar({
   }, [address, isInitializedAddress, prevAddress])
 
   const login = () => {
-    setIsOpen(true)
+    setIsLoginModalOpen(true)
   }
 
   const renderAuthComponent = () => {
@@ -163,12 +166,13 @@ export default function Navbar({
         </Container>
       </nav>
       <LoginModal
-        isOpen={isOpen}
-        closeModal={() => setIsOpen(false)}
-        initialOpenState={initialOpenState}
+        isOpen={isLoginModalOpen}
+        closeModal={() => setIsLoginModalOpen(false)}
+        initialOpenState={initialLoginModalOpenState}
         beforeLogin={() => (isLoggingInWithKey.current = true)}
         afterLogin={() => (isLoggingInWithKey.current = false)}
       />
+      <AuthErrorModal />
     </>
   )
 }

src/pages/api/auth/[...nextauth].ts

@@ -35,11 +35,12 @@ export const authOptions: NextAuthOptions = {
       const blockedAddressesSet = new Set(
         blockedInAppIds.map((data) => data.blockedResources.address).flat()
       )
-      const isAllowedToSignIn = linkedAddresses.every(
-        (address) => !blockedAddressesSet.has(address)
+      const blockedAddress = linkedAddresses.find((address) =>
+        blockedAddressesSet.has(address)
       )
 
-      return isAllowedToSignIn
+      if (!blockedAddress) return true
+      return `/?auth-blocked=${blockedAddress}`
     },
     async session({ session, token }) {
       let image = session.user.image ?? ''