Orderly airdrop guide (#540)

* feat: add orderly airdrop * feat: add new ad * feat: modifity link * fix: blink href * fix: change img src --------- Co-authored-by: deep-path <[email protected]>
ref-finance · Jun 14, 2024 · 707147a · 707147a
1 parent 67d9984
commit 707147a
Show file tree

Hide file tree

Showing 10 changed files with 919 additions and 133 deletions.
diff --git a/src/assets/imgs/orderlyAirDrop.png b/src/assets/imgs/orderlyAirDrop.png
diff --git a/src/components/layout/Swiper.tsx b/src/components/layout/Swiper.tsx
@@ -18,7 +18,7 @@ export default function AdSwiper() {
     }
   }, []);
   const closePop = (e: any) => {
-    localStorage.setItem('ad-announcement', '12');
+    localStorage.setItem('ad-announcement', '13');
     e.stopPropagation();
     setCloseStatus(true);
   };
@@ -69,6 +69,26 @@ export default function AdSwiper() {
                 {is_mobile ? <FRAXUSDCFARMMobile /> : <FRAXUSDCFARM />}
               </div>
             </SwiperSlide>
+            <SwiperSlide>
+              <div
+                onClick={closePop}
+                className="flex justify-end items-center absolute top-0 right-0 cursor-pointer z-10"
+              >
+                <SwiperCloseButton className="cursor-pointer"></SwiperCloseButton>
+              </div>
+              <div
+                className="relative cursor-pointer"
+                onClick={() => {
+                  window.open('https://airdrop.orderly.network/');
+                }}
+              >
+                {is_mobile ? (
+                  <img src="https://assets.ref.finance/images/swipeOrderlyMobile.jpg" />
+                ) : (
+                  <img src="https://assets.ref.finance/images/swipeOrderlyPc.jpg" />
+                )}
+              </div>
+            </SwiperSlide>
           </Swiper>
         </div>
       )}

diff --git a/src/components/orderlyAirdrop/Carousel.tsx b/src/components/orderlyAirdrop/Carousel.tsx
@@ -0,0 +1,221 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  LeftActive,
+  LeftDisabled,
+  RightActive,
+  RightDisabled,
+  Close,
+} from './icon';
+import { useOrderlyGuidePopStore } from '../../stores/orderlyGuidePop';
+
+export const Carousel = ({
+  list,
+  autoPlay = true,
+  autoPlayInterval = 5000,
+}: {
+  list: Array<any>;
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const carouselRef = useRef(null);
+  const timerRef = useRef(null); //
+  const orderlyGuidePopStore: any = useOrderlyGuidePopStore();
+
+  const closePop = () => {
+    localStorage.setItem('hasGo', 'true');
+    orderlyGuidePopStore.setHasGo(true);
+  };
+
+  const blank = () => {
+    window.open('https://airdrop.orderly.network/', '_blank');
+  };
+
+  useEffect(() => {
+    //
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+
+    //
+    if (autoPlay) {
+      timerRef.current = setInterval(() => {
+        goToNext();
+      }, autoPlayInterval);
+    }
+
+    //
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, [autoPlay, autoPlayInterval]); //
+
+  const goToPrev = () => {
+    //
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+    //
+    if (autoPlay) {
+      timerRef.current = setInterval(() => {
+        goToNext();
+      }, autoPlayInterval);
+    }
+    setCurrentIndex((prevIndex) => (prevIndex + list.length - 1) % list.length);
+  };
+
+  const goToNext = () => {
+    //
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+    if (autoPlay) {
+      timerRef.current = setInterval(() => {
+        goToNext();
+      }, autoPlayInterval);
+    }
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % list.length);
+  };
+
+  return (
+    <div
+      className="relative frcc p-5 overflow-hidden rounded-2xl"
+      ref={carouselRef}
+      style={{
+        zIndex: 100000,
+        width: '512px',
+        height: '614px',
+        background: 'rgba(29, 41, 50, 1)',
+        border: '1px solid rgba(0, 255, 216, 0.2)',
+      }}
+    >
+      {/* close */}
+      <span
+        className="absolute top-8 right-8 cursor-pointer hover:opacity-70"
+        style={{
+          zIndex: 200,
+        }}
+        onClick={closePop}
+      >
+        <Close></Close>
+      </span>
+      {/* img container */}
+      {list.map((item, index) => (
+        <div
+          key={index}
+          style={{
+            display: currentIndex === index ? 'block' : 'none',
+            position: 'absolute',
+            top: '20px',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: currentIndex === index ? '472px' : '0',
+            height: '266px',
+          }}
+        >
+          {/* modal */}
+          <div
+            className="absolute top-0 left-0 rounded-lg"
+            style={{
+              width: '472px',
+              height: '266px',
+              background:
+                'linear-gradient(289.98deg, rgba(0, 0, 0, 0) 6.59%, rgba(0, 214, 175, 0.2) 100%)',
+            }}
+          ></div>
+          {/* img */}
+          <img src={item.src} alt="" className="w-full h-full rounded-lg" />
+        </div>
+      ))}
+
+      {/* content */}
+      <div
+        className="font-gotham font-medium rounded-lg p-5 absolute overflow-auto"
+        style={{
+          width: '472px',
+          height: '234px',
+          border: '1px solid rgba(145, 162, 174, 0.08)',
+          top: '306px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+        }}
+      >
+        <p className="text-lg text-white mb-5">{list[currentIndex].title}</p>
+        <p className="text-gray2 text-sm">
+          {list[currentIndex].content}
+          <span
+            className="underline cursor-pointer hover:text-greenLight"
+            onClick={() => {
+              closePop();
+              window.open('https://airdrop.orderly.network/', '_blank');
+            }}
+          >
+            https://airdrop.orderly.network/
+          </span>
+        </p>
+      </div>
+
+      {/* operate div */}
+
+      {list.length > 3 ? (
+        <div
+          className="absolute bottom-4 flex items-center justify-between"
+          style={{ width: '472px' }}
+        >
+          {currentIndex == 0 ? (
+            <LeftDisabled />
+          ) : (
+            <div onClick={goToPrev}>
+              <LeftActive />
+            </div>
+          )}
+          <div className="frcc">
+            {list.map((item, index) => (
+              <div
+                key={index}
+                style={{
+                  width: '67px',
+                  height: '38px',
+                }}
+                className={`rounded-lg mr-2 ${
+                  currentIndex == index
+                    ? 'border border-greenLight'
+                    : 'opacity-40'
+                }`}
+                onClick={() => {
+                  setCurrentIndex(index);
+                }}
+              >
+                <img
+                  src={item.src}
+                  alt=""
+                  className="w-full h-full rounded-lg"
+                />
+              </div>
+            ))}
+          </div>
+
+          {currentIndex == list.length - 1 ? (
+            <RightDisabled />
+          ) : (
+            <div onClick={goToNext}>
+              <RightActive />
+            </div>
+          )}
+        </div>
+      ) : (
+        <div
+          className="w-32 h-10 frcc text-white text-sm absolute bottom-4 border border-borderColor rounded-lg cursor-pointer hover:text-greenLight hover:border-greenLight"
+          onClick={() => {
+            closePop();
+            blank();
+          }}
+        >
+          Bind Now
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/orderlyAirdrop/icon.tsx b/src/components/orderlyAirdrop/icon.tsx
@@ -0,0 +1,123 @@
+import React, { SVGProps } from 'react';
+export function LeftDisabled(props: any) {
+  return (
+    <svg
+      width="42"
+      height="38"
+      viewBox="0 0 42 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.5"
+        y="0.5"
+        width="41"
+        height="37"
+        rx="7.5"
+        stroke="#7E8A93"
+        strokeOpacity="0.2"
+      />
+      <path
+        d="M13.6464 19.3536C13.4512 19.1583 13.4512 18.8417 13.6464 18.6464L16.8284 15.4645C17.0237 15.2692 17.3403 15.2692 17.5355 15.4645C17.7308 15.6597 17.7308 15.9763 17.5355 16.1716L14.7071 19L17.5355 21.8284C17.7308 22.0237 17.7308 22.3403 17.5355 22.5355C17.3403 22.7308 17.0237 22.7308 16.8284 22.5355L13.6464 19.3536ZM28 19.5H14V18.5H28V19.5Z"
+        fill="white"
+        fillOpacity="0.5"
+      />
+    </svg>
+  );
+}
+
+export function LeftActive(props: any) {
+  return (
+    <svg
+      width="42"
+      height="38"
+      viewBox="0 0 42 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.5"
+        y="0.5"
+        width="41"
+        height="37"
+        rx="7.5"
+        stroke="#7E8A93"
+        strokeOpacity="0.2"
+      />
+      <path
+        d="M13.6464 19.3536C13.4512 19.1583 13.4512 18.8417 13.6464 18.6464L16.8284 15.4645C17.0237 15.2692 17.3403 15.2692 17.5355 15.4645C17.7308 15.6597 17.7308 15.9763 17.5355 16.1716L14.7071 19L17.5355 21.8284C17.7308 22.0237 17.7308 22.3403 17.5355 22.5355C17.3403 22.7308 17.0237 22.7308 16.8284 22.5355L13.6464 19.3536ZM28 19.5H14V18.5H28V19.5Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function RightDisabled(props: any) {
+  return (
+    <svg
+      width="42"
+      height="38"
+      viewBox="0 0 42 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.5"
+        y="0.5"
+        width="41"
+        height="37"
+        rx="7.5"
+        stroke="#7E8A93"
+        strokeOpacity="0.2"
+      />
+      <path
+        d="M28.3536 19.3536C28.5488 19.1583 28.5488 18.8417 28.3536 18.6464L25.1716 15.4645C24.9763 15.2692 24.6597 15.2692 24.4645 15.4645C24.2692 15.6597 24.2692 15.9763 24.4645 16.1716L27.2929 19L24.4645 21.8284C24.2692 22.0237 24.2692 22.3403 24.4645 22.5355C24.6597 22.7308 24.9763 22.7308 25.1716 22.5355L28.3536 19.3536ZM14 19.5H28V18.5H14V19.5Z"
+        fill="white"
+        fillOpacity="0.5"
+      />
+    </svg>
+  );
+}
+
+export function RightActive(props: any) {
+  return (
+    <svg
+      width="42"
+      height="38"
+      viewBox="0 0 42 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.5"
+        y="0.5"
+        width="41"
+        height="37"
+        rx="7.5"
+        stroke="#7E8A93"
+        strokeOpacity="0.2"
+      />
+      <path
+        d="M28.3536 19.3536C28.5488 19.1583 28.5488 18.8417 28.3536 18.6464L25.1716 15.4645C24.9763 15.2692 24.6597 15.2692 24.4645 15.4645C24.2692 15.6597 24.2692 15.9763 24.4645 16.1716L27.2929 19L24.4645 21.8284C24.2692 22.0237 24.2692 22.3403 24.4645 22.5355C24.6597 22.7308 24.9763 22.7308 25.1716 22.5355L28.3536 19.3536ZM14 19.5H28V18.5H14V19.5Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function Close(props: any) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.99973 5.10533L1.07987 0.185461C0.960569 0.0702397 0.800789 0.00648358 0.63494 0.00792476C0.469091 0.00936594 0.310444 0.0758891 0.193166 0.193166C0.0758891 0.310444 0.00936596 0.469092 0.00792478 0.63494C0.0064836 0.800789 0.0702397 0.960569 0.185461 1.07987L5.10469 5.99973L0.185461 10.9196C0.126692 10.9783 0.0800658 11.0481 0.0482443 11.1248C0.0164228 11.2015 2.94086e-05 11.2838 3.95314e-08 11.3669C-2.93295e-05 11.45 0.0163059 11.5322 0.0480731 11.609C0.0798403 11.6858 0.126417 11.7555 0.185145 11.8143C0.243872 11.8731 0.3136 11.9197 0.390347 11.9515C0.467094 11.9834 0.549358 11.9997 0.63244 11.9998C0.715523 11.9998 0.797798 11.9835 0.874567 11.9517C0.951337 11.9199 1.0211 11.8734 1.07987 11.8146L5.99973 6.89414L10.9196 11.8146C10.9784 11.8734 11.0481 11.92 11.1249 11.9518C11.2017 11.9836 11.284 12 11.3671 12C11.4502 12 11.5325 11.9836 11.6093 11.9518C11.6861 11.92 11.7559 11.8734 11.8146 11.8146C11.8734 11.7559 11.92 11.6861 11.9518 11.6093C11.9836 11.5325 12 11.4502 12 11.3671C12 11.284 11.9836 11.2017 11.9518 11.1249C11.92 11.0481 11.8734 10.9784 11.8146 10.9196L6.89414 5.99973L11.8146 1.07987C11.9332 0.961177 11.9998 0.800233 11.9998 0.63244C11.9997 0.464648 11.933 0.30375 11.8143 0.185145C11.6956 0.0665393 11.5347 -5.92694e-05 11.3669 3.95789e-08C11.1991 5.93485e-05 11.0382 0.0667717 10.9196 0.185461L5.99973 5.10469V5.10533Z"
+        fill="white"
+      />
+    </svg>
+  );
+}