Implement EligibilityChecker component

src/assets/icons/svg-icons.tsx

@@ -124,20 +124,33 @@ export const GradientCopyIcon: FC = () => (
   </svg>
 );
 
-export const OpenInNewIcon: FC = () => (
+export const GradientOpenInNewIcon: FC = () => (
   <svg
     width="15"
-    height="15"
-    viewBox="0 0 15 15"
+    height="16"
+    viewBox="0 0 15 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M12 13C12.5523 13 13 12.5523 13 12V3C13 2.44771 12.5523 2 12 2H3C2.44771 2 2 2.44771 2 3V6.5C2 6.77614 2.22386 7 2.5 7C2.77614 7 3 6.77614 3 6.5V3H12V12H8.5C8.22386 12 8 12.2239 8 12.5C8 12.7761 8.22386 13 8.5 13H12ZM9 6.5C9 6.5001 9 6.50021 9 6.50031V6.50035V9.5C9 9.77614 8.77614 10 8.5 10C8.22386 10 8 9.77614 8 9.5V7.70711L2.85355 12.8536C2.65829 13.0488 2.34171 13.0488 2.14645 12.8536C1.95118 12.6583 1.95118 12.3417 2.14645 12.1464L7.29289 7H5.5C5.22386 7 5 6.77614 5 6.5C5 6.22386 5.22386 6 5.5 6H8.5C8.56779 6 8.63244 6.01349 8.69139 6.03794C8.74949 6.06198 8.80398 6.09744 8.85143 6.14433C8.94251 6.23434 8.9992 6.35909 8.99999 6.49708L8.99999 6.49738"
-      fill="currentColor"
-    ></path>
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3 2.5C2.44772 2.5 2 2.94772 2 3.5V12.5C2 13.0523 2.44772 13.5 3 13.5H12C12.5523 13.5 13 13.0523 13 12.5V9C13 8.72386 12.7761 8.5 12.5 8.5C12.2239 8.5 12 8.72386 12 9V12.5H3V3.5L6.5 3.5C6.77614 3.5 7 3.27614 7 3C7 2.72386 6.77614 2.5 6.5 2.5H3ZM12.8536 2.64645C12.9015 2.69439 12.9377 2.74964 12.9621 2.80861C12.9861 2.86669 12.9996 2.9303 13 2.997L13 3V3.00049V6C13 6.27614 12.7761 6.5 12.5 6.5C12.2239 6.5 12 6.27614 12 6V4.20711L6.85355 9.35355C6.65829 9.54882 6.34171 9.54882 6.14645 9.35355C5.95118 9.15829 5.95118 8.84171 6.14645 8.64645L11.2929 3.5H9.5C9.22386 3.5 9 3.27614 9 3C9 2.72386 9.22386 2.5 9.5 2.5H12.4999H12.5C12.5678 2.5 12.6324 2.51349 12.6914 2.53794C12.7504 2.56234 12.8056 2.59851 12.8536 2.64645Z"
+      fill="url(#paint0_linear_2721_4450)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_2721_4450"
+        x1="2"
+        y1="8"
+        x2="13"
+        y2="8"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#FFC955" />
+        <stop offset="1" stop-color="#FF7CD5" />
+      </linearGradient>
+    </defs>
   </svg>
 );
 

src/pages/Airdrops/EligibilityChecker/eligibility-checker-styles.ts

@@ -0,0 +1,107 @@
+import { Flex, Text } from "@radix-ui/themes";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import theme from "../../../theme";
+
+export const LineSeparator = styled(Flex)`
+  @media (min-width: ${theme.breakpoints.sm}) {
+    height: 0;
+    width: calc(100% - ${theme.headerSize.tabletWidth});
+    position: absolute;
+    top: ${theme.headerSize.height};
+    left: ${theme.headerSize.tabletWidth};
+    border-bottom: 1px solid ${theme.color.darkBlue};
+  }
+
+  @media (min-width: ${theme.breakpoints.lg}) {
+    display: none;
+  }
+`
+
+export const GradientBorderBox = styled(Flex)<{ bordercolor?: string }>`
+  @media (min-width: ${theme.breakpoints.sm}) {    
+    border: solid 1px ${({ bordercolor }) => (bordercolor ? bordercolor : 'transparent')}; 
+    border-radius: 16px;
+    background: ${({ bordercolor }) => (bordercolor ? '' : `linear-gradient(${theme.color.background}, ${theme.color.background}) padding-box,
+      linear-gradient(90deg, #ffc955 0%, #ff7cd5 100%) border-box`)};
+    box-shadow: 0px 0px 12px 3px rgba(255, 255, 255, 0.45);
+  }  
+`;
+
+export const StyledInput = styled.input`
+  width: 100%;
+  padding: 16px;
+  outline: none;
+  border: none;
+  border-radius: 8px;
+  box-sizing: border-box;
+  color: ${theme.color.white};
+  background-color: ${theme.color.grey4};
+  font-size: 14px;
+  font-weight: 600;
+  font-family: Inter;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &::placeholder {
+    color: #6c7180;
+  }
+`;
+
+export const DisabledButton = styled.button`
+  width: 100%;
+  height: 49px;
+  color: ${theme.color.grey11};
+  background: #393939;
+  cursor: default;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 8px;
+  border: none;
+  transition: opacity 0.2s ease;
+`;
+
+export const BummerContainer = styled(Flex)`
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  padding: 16px;
+  border: solid 1px ${theme.color.red1}; 
+  border-radius: 16px;
+
+  @media (min-width: ${theme.breakpoints.sm}) {
+    padding: 16px 32px;
+  } 
+`
+
+export const InfoContainer = styled(Flex)`
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border: solid 1px ${theme.color.darkBlue}; 
+  border-radius: 16px;
+  margin-top: -20px;
+
+  @media (min-width: ${theme.breakpoints.sm}) {
+    margin-top: 0;
+  } 
+`
+
+export const GradientLink = styled(Text)`
+  font-size: 12px;
+  font-weight: 500;
+  color: transparent;
+  --grad: linear-gradient(90deg, #ffc955 0%, #ff7cd5 100%);
+  background: var(--grad), var(--grad) bottom 2px left 0/100% 1px no-repeat;
+  background-clip: text, padding-box;
+  -webkit-background-clip: text, padding-box;
+`;
+
+export const StyledLink = styled(Link)`
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  gap: 4px;
+`

src/pages/Airdrops/EligibilityChecker/index.tsx

@@ -0,0 +1,174 @@
+import { Flex, Text } from "@radix-ui/themes";
+import React, { Dispatch, SetStateAction } from "react";
+import {
+  BummerContainer,
+  DisabledButton,
+  GradientBorderBox,
+  GradientLink,
+  InfoContainer,
+  LineSeparator,
+  StyledInput,
+  StyledLink,
+} from "./eligibility-checker-styles";
+import { AIRDROP_LEARN_MORE_LINK } from "../../../constants/airdrops";
+import { GradientOpenInNewIcon } from "../../../assets/icons/svg-icons";
+import theme from "../../../theme";
+import {
+  GradientLoaderButton,
+  GradientSolidButton,
+} from "../../../components/Button";
+import { EligibilityStatus } from "..";
+import { useMediaQuery } from "../../../hooks/useMediaQuery";
+
+type EligibilityCheckerProps = {
+  eligibilityStatus: EligibilityStatus;
+  address: string;
+  setAddress: Dispatch<SetStateAction<string>>;
+  loading: boolean;
+  handleAddressesCheck: () => Promise<void>;
+};
+
+const EligibilityChecker: React.FC<EligibilityCheckerProps> = ({
+  eligibilityStatus,
+  address,
+  setAddress,
+  loading,
+  handleAddressesCheck,
+}) => {
+  const isDesktop = useMediaQuery("(min-width: 1280px)");
+
+  return (
+    <Flex width={"100%"} height={"100%"} direction={"column"}>
+      <Flex
+        display={{ initial: "none", sm: "flex", lg: "none" }}
+        justify={"start"}
+        align={"center"}
+        width={"100%"}
+        height={theme.headerSize.height}
+        px={"10px"}
+      >
+        <Text size={"2"} weight={"medium"}>
+          Airdrops
+        </Text>
+      </Flex>
+      <LineSeparator />
+
+      <Flex
+        width={"100%"}
+        height={"100%"}
+        direction={"column"}
+        pt={{ initial: "16px", sm: "0", lg: "150px" }}
+        justify={{ initial: "start", sm: "center", lg: "start" }}
+        align={"center"}
+      >
+        <Flex
+          direction={"column"}
+          width={{ initial: "343px", sm: "424px", lg: "459px" }}
+          gap={{ initial: "32px", sm: "28px" }}
+        >
+          <Text
+            style={{ fontWeight: "600", textAlign: "center" }}
+            size={{ initial: "6", sm: "8" }}
+          >
+            Eligibility Checker 🪂
+          </Text>
+          <GradientBorderBox
+            bordercolor={
+              eligibilityStatus === "ineligible" && isDesktop
+                ? theme.color.grey11
+                : ""
+            }
+          >
+            <Flex
+              direction={"column"}
+              width={"100%"}
+              gap={"16px"}
+              p={{ sm: "32px" }}
+            >
+              <Flex
+                direction={"column"}
+                gap="8px"
+                align={{ initial: "center", sm: "start" }}
+              >
+                <Text size={"4"} weight={"bold"} style={{ lineHeight: "21px" }}>
+                  Enter address to check
+                </Text>
+                <Text size={"1"} style={{ color: theme.color.grey10 }}>
+                  ENS is ok
+                </Text>
+              </Flex>
+
+              <StyledInput
+                type="text"
+                value={address}
+                disabled={loading}
+                onChange={(e) => setAddress(e.target.value.trim())}
+                placeholder="Enter address"
+              />
+
+              <Flex>
+                {loading ? (
+                  <GradientLoaderButton
+                    title={"Checking address ..."}
+                    height="49px"
+                    width="100%"
+                  />
+                ) : address.length === 0 && isDesktop ? (
+                  <DisabledButton>Check address</DisabledButton>
+                ) : (
+                  <GradientSolidButton
+                    title="Check address"
+                    size={"14px"}
+                    height="49px"
+                    width="100%"
+                    isDisabled={address.length === 0}
+                    handleClick={() => {
+                      address && handleAddressesCheck();
+                    }}
+                  />
+                )}
+              </Flex>
+            </Flex>
+          </GradientBorderBox>
+
+          {eligibilityStatus === "ineligible" && (
+            <BummerContainer>
+              <Text size={"4"} weight={"bold"} style={{ lineHeight: "21px" }}>
+                Bummer!
+              </Text>
+              <Text
+                size={"1"}
+                style={{ color: theme.color.grey10, lineHeight: "14px" }}
+              >
+                This address is not eligible.
+              </Text>
+            </BummerContainer>
+          )}
+
+          {eligibilityStatus === "ineligible" && (
+            <InfoContainer>
+              <Text size={"1"} style={{ lineHeight: "14.5px" }}>
+                <span style={{ fontWeight: "700" }}>Didn’t make the cut?</span>{" "}
+                <br />
+                <span style={{ fontWeight: "200" }}>
+                  Airdrop 2 campaign is now live.
+                </span>
+              </Text>
+
+              <StyledLink
+                to={AIRDROP_LEARN_MORE_LINK}
+                target="_blank"
+                style={{ textDecoration: "none" }}
+              >
+                <GradientLink> Don’t miss out</GradientLink>
+                <GradientOpenInNewIcon />
+              </StyledLink>
+            </InfoContainer>
+          )}
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default EligibilityChecker;

src/theme/index.ts

@@ -26,6 +26,7 @@ const theme = {
     grey8: '#90A6BF',
     grey9: '#1F2538',
     grey10: '#8D8F94',
+    grey11: '#B9BABD',
   },  
   headerSize: {
     width: '88px',