Error Modal

frontend/components/Layout.tsx

@@ -1,6 +1,8 @@
 import Image from 'next/image'
 import { usePathname } from 'next/navigation'
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
+import Close from '@images/close.inline.svg'
+import Warn from '@images/warning.inline.svg'
 
 import { useRouter } from 'next/router'
 import { WELCOME_METADATA } from 'pages'
@@ -24,6 +26,7 @@ type LayoutProps = {
 export const Layout = ({ children, setDisclaimerWasRead }: LayoutProps) => {
   const pathname = usePathname()
   const router = useRouter()
+  const [banner, setBanner] = useState(true)
 
   const disableSideNav = process.env.NODE_ENV === 'production'
 
@@ -43,8 +46,25 @@ export const Layout = ({ children, setDisclaimerWasRead }: LayoutProps) => {
 
   return (
     <>
-      <header className="absolute left-0 top-0 z-40 w-full px-1 transition-all lg:px-10">
-        <div className=" relative flex items-center justify-between  gap-2 px-4 py-3 lg:px-10 lg:py-6">
+      <header className="absolute left-0 top-0 z-40 w-full py-3 transition-all  lg:py-6 xl:px-10">
+        {banner && (
+          <div className="relative px-4 lg:px-10 ">
+            <div className="relative mb-2 flex justify-between gap-4 border border-light  border-opacity-60 bg-[#BA4A62] bg-opacity-40 px-2 py-2 leading-snug sm:px-4 md:px-[29px] ">
+              <span className="flex items-center gap-2">
+                <Warn className="flex-shrink-0" />
+                This airdrop is expected to cause congestion on Solana. Please
+                try again if your claim does not go through.
+              </span>
+              <button
+                onClick={() => setBanner(false)}
+                className="flex-shrink-0"
+              >
+                <Close />
+              </button>
+            </div>
+          </div>
+        )}
+        <div className=" relative flex items-center justify-between  gap-2 px-4  lg:px-10 ">
           <Link
             href="/"
             className="flex items-center justify-center  border-light border-opacity-60 outline-none sm:h-12 sm:border sm:px-4 md:px-[29px]"
@@ -60,7 +80,7 @@ export const Layout = ({ children, setDisclaimerWasRead }: LayoutProps) => {
           </div>
         </div>
       </header>
-      <div className="relative min-h-[calc(100vh-80px)] px-4 pb-32 pt-20 sm:pt-28 lg:pt-40">
+      <div className="relative min-h-[calc(100vh-80px)] px-4 pb-32 pt-40">
         <div className="mx-auto max-w-[997px] items-start justify-between gap-2.5 lg:flex">
           <ul
             className={classNames(

frontend/components/modal/ErrorModal.tsx

@@ -0,0 +1,46 @@
+import { Button } from '@components/buttons/Button'
+import { ModalWrapper } from '@components/modal/ModalWrapper'
+import { useRouter } from 'next/navigation'
+
+export function ErrorModal({ showModal }: { showModal: Function }) {
+  const router = useRouter()
+  return (
+    <ModalWrapper>
+      <div className="w-full max-w-[600px] divide-y divide-white divide-opacity-25 border  border-white border-opacity-25 bg-black bg-opacity-50 text-center">
+        <h3 className="font-heading relative bg-black bg-opacity-50 py-6 px-8 text-[28px]  font-light">
+          Something went wrong
+        </h3>
+        <div className="p-6">
+          <p className="mx-auto max-w-[350px] text-[15px] tracking-[.3px]">
+            Solana is currently experiencing congestion and was unable to
+            include your transaction. Please try again in a few minutes
+          </p>
+        </div>
+        <div className="bg-black bg-opacity-50 px-10 py-8">
+          <Button
+            type={'primary'}
+            onClick={() => {
+              showModal(false)
+              router.back()
+            }}
+          >
+            <span className="flex  items-center gap-2">
+              Try again
+              <svg
+                width={13}
+                height={9}
+                viewBox="0 0 13 9"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8.13445 8.97557L13 4.4995L8.13445 0.0234376L7.11722 0.959101L10.2404 3.83123L4.43299e-08 3.83123L5.98891e-08 5.16772L10.2404 5.16772L7.11722 8.03985L8.13445 8.97557Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+          </Button>
+        </div>
+      </div>
+    </ModalWrapper>
+  )
+}

frontend/sections/ClaimStatus.tsx

@@ -14,6 +14,7 @@ import { Box } from '@components/Box'
 import Tooltip from '@components/Tooltip'
 import { TotalAllocationRow } from '@components/table/TotalAllocationRow'
 import { BoxTitle } from '@components/BoxTitle'
+import { ErrorModal } from '@components/modal/ErrorModal'
 
 export const ClaimStatus = ({
   onProceed,
@@ -26,14 +27,17 @@ export const ClaimStatus = ({
   const totalGrantedCoins = useTotalGrantedCoins()
   const [isProceedDisabled, setIsProceedDisabled] = useState(true)
   const [proceedTooltipContent, setProceedTooltipContent] = useState<string>()
+  const [modal, showModal] = useState(false)
 
   // disable proceed
   useEffect(() => {
     if (ecosystemsClaimState !== undefined) {
       let isAnyProccessing = false
+      let hasErrors = false
       // if a claim submission is still proceesing
       Object.values(ecosystemsClaimState).forEach((ecosystemClaimState) => {
         if (ecosystemClaimState.error === undefined) isAnyProccessing = true
+        else if (ecosystemClaimState.error) hasErrors = true
       })
 
       if (isAnyProccessing) {
@@ -43,38 +47,45 @@ export const ClaimStatus = ({
         setIsProceedDisabled(false)
         setProceedTooltipContent(undefined)
       }
+
+      if (hasErrors) {
+        showModal(true)
+      }
     }
   }, [ecosystemsClaimState])
 
   return (
-    <Box>
-      <BoxTitle>
-        <div className="flex items-center justify-between ">
-          <h4 className=" text-[20px] sm:text-[28px]">Sign and Claim</h4>
-          <div className="flex gap-4">
-            <ProceedButton
-              onProceed={onProceed}
-              disabled={isProceedDisabled}
-              tooltipContent={proceedTooltipContent}
-            />
+    <>
+      <Box>
+        <BoxTitle>
+          <div className="flex items-center justify-between ">
+            <h4 className=" text-[20px] sm:text-[28px]">Sign and Claim</h4>
+            <div className="flex gap-4">
+              <ProceedButton
+                onProceed={onProceed}
+                disabled={isProceedDisabled}
+                tooltipContent={proceedTooltipContent}
+              />
+            </div>
           </div>
-        </div>
-      </BoxTitle>
-      <table className="">
-        <tbody>
-          {Object.values(Ecosystem).map((ecosystem) => (
-            <SignAndClaimRowLayout ecosystem={ecosystem} key={ecosystem}>
-              {ecosystemsClaimState?.[ecosystem] !== undefined && (
-                <ClaimState
-                  ecosystemClaimState={ecosystemsClaimState?.[ecosystem]!}
-                />
-              )}
-            </SignAndClaimRowLayout>
-          ))}
-          <TotalAllocationRow totalGrantedCoins={totalGrantedCoins} />
-        </tbody>
-      </table>
-    </Box>
+        </BoxTitle>
+        <table className="">
+          <tbody>
+            {Object.values(Ecosystem).map((ecosystem) => (
+              <SignAndClaimRowLayout ecosystem={ecosystem} key={ecosystem}>
+                {ecosystemsClaimState?.[ecosystem] !== undefined && (
+                  <ClaimState
+                    ecosystemClaimState={ecosystemsClaimState?.[ecosystem]!}
+                  />
+                )}
+              </SignAndClaimRowLayout>
+            ))}
+            <TotalAllocationRow totalGrantedCoins={totalGrantedCoins} />
+          </tbody>
+        </table>
+      </Box>
+      {modal && <ErrorModal showModal={showModal} />}
+    </>
   )
 }
 
@@ -102,8 +113,9 @@ function ClaimState({
     if (error === null) return 'Successfully claimed'
     if (error)
       return (
-        error.message ??
-        'There was some error while claiming. Please refresh the page and try again.'
+        // error.message ??
+        // 'There was some error while claiming. Please refresh the page and try again.'
+        'Solana is currently experiencing congestion and was unable to include your transaction. Please try again in a few minutes.'
       )
   }, [error])
 

frontend/sections/TokensReceived.tsx

@@ -2,11 +2,6 @@ import W from '@images/wtoken.inline.svg'
 
 import { Box } from '@components/Box'
 import { Button } from '@components/buttons/Button'
-import Discord from '@images/discord.inline.svg'
-import Linkedin from '@images/linkedin.inline.svg'
-import Telegram from '@images/telegram.inline.svg'
-import Twitter from '@images/twitter.inline.svg'
-import Link from 'next/link'
 import { resetLocalState } from 'utils/store'
 import { BoxTitle } from '@components/BoxTitle'
 import Subscribe from '@components/Subscribe'