feat: implement custom modals for no-webln error on mobile and web

Fixes #91

src/Components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import React, { Component, ErrorInfo, ReactNode } from "react";
+import ErrorMessage from "../ErrorMessage/ErrorMessage";
 
 interface Props {
     place?: string
@@ -25,7 +26,14 @@ class ErrorBoundary extends Component<Props, State> {
 
     public render() {
         if (this.state.hasError) {
-            return <h1>Sorry.. there was an error</h1>;
+            return <ErrorMessage message={
+                <p className="text-body3">
+                    Sorry, something went wrong...😵
+                    <br />
+                    Try refreshing the page.
+                </p>
+
+            } type="unknown"></ErrorMessage>;
         }
 
         return this.props.children;

src/Components/ErrorMessage/ErrorMessage.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom"
 
 interface Props {
-    message?: string,
+    message?: string | JSX.Element,
     type?: 'unknown' | 'fetching'
 }
 
@@ -22,9 +22,9 @@ export default function ErrorMessage({
 
     return (
         <div className="bg-red-50 border border-red-500 rounded-12 text-gray-900 px-20 py-36 flex flex-col items-center ">
-            <p >
+            <div >
                 {messageToShow}
-            </p>
+            </div>
             <a href='/' className='text-primary-500 mt-36 underline' >Back to home page</a>
         </div>
     )

src/Components/Modals/NoWeblnModal/NoWeblnModal.tsx

@@ -0,0 +1,69 @@
+import { motion } from 'framer-motion'
+import { useAppSelector } from 'src/utils/hooks';
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
+import Button from 'src/Components/Button/Button'
+import { IoClose } from 'react-icons/io5';
+import NutImg from './nut.png'
+import AlbyImg from './alby.png'
+
+export default function NoWeblnModal({ onClose, direction, ...props }: ModalCard) {
+
+    const isMobile = useAppSelector(s => s.ui.isMobileScreen);
+
+
+    let content: JSX.Element;
+
+    if (isMobile)
+        content = <>
+            <div className="flex justify-center my-24">
+                <img
+                    src={NutImg}
+                    className='w-full max-w-[164px] aspect-square object-cover'
+                    alt="Nut images" />
+            </div>
+            <h3 className="text-h4 font-bolder">
+                Oops! Looks like you’re browsing on mobile.
+            </h3>
+            <p className="text-body4 text-gray-600 mt-8">
+                In order to use  BOLT🔩FUN’s voting button, you need to use a lightning browser wallet like Alby. You can download the extension on your desktop and try again.
+            </p>
+        </>
+    else
+        content = <>
+            <div className="flex justify-center my-24">
+                <img
+                    src={AlbyImg}
+                    className='w-full max-w-[164px] aspect-square object-cover'
+                    alt="Nut images" />
+            </div>
+            <h3 className="text-h4 font-bolder">
+                Oops! Looks like you don’t have Alby installed
+            </h3>
+            <p className="text-body4 text-gray-600 mt-8">
+                In order to use  BOLT🔩FUN’s voting button, you’ll need to use a lightning browser wallet like Alby. Download it to continue.
+            </p>
+            <Button
+                color='black'
+                fullWidth
+                newTab
+                className='mt-32'
+                href='https://getalby.com'
+            >Download Alby</Button>
+        </>
+
+
+    return (
+        <motion.div
+            custom={direction}
+            variants={modalCardVariants}
+            initial='initial'
+            animate="animate"
+            exit='exit'
+            className="modal-card max-w-[343px] p-24 rounded-xl relative"
+        >
+            <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
+            <h2 className='text-h5 font-bold'>No WebLB Detected</h2>
+            {content}
+        </motion.div>
+    )
+}

src/Components/Modals/NoWeblnModal/index.ts

@@ -0,0 +1,4 @@
+
+import { lazyModal } from 'src/utils/helperFunctions';
+
+export const { LazyComponent: NoWeblnModal } = lazyModal(() => import('./NoWeblnModal'))