refactor(ad-banner): remove controls and transitions from AdBanner co…

…mponent
BlockPILabs · Jun 9, 2023 · 9fe85e1 · 9fe85e1
1 parent c7cc9e6
commit 9fe85e1
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 68 deletions.
diff --git a/.gitignore b/.gitignore
@@ -33,3 +33,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# others
+build.log
diff --git a/components/AdBanner/index.js b/components/AdBanner/index.js
@@ -9,65 +9,41 @@ const BANNERS = [
     image: "brave.png",
     name: "Brave",
     url: "https://brave.com/wallet/?mtm_campaign=q2&mtm_kwd=chainlist",
+    isActive: true,
   },
   {
     image: "llamanodes.png",
     name: "LlamaNodes",
     url: "https://llamanodes.com",
+    isActive: true,
+  },
+  {
+    image: "gmx.png",
+    name: "GMX",
+    url: "https://app.gmx.io/#/trade/?ref=chainlist",
+    isActive: false,
   },
-  // {
-  //   image: "gmx.png",
-  //   name: "GMX",
-  //   url: "https://app.gmx.io/#/trade/?ref=chainlist",
-  // },
 ];
 
-const randomBanners = shuffleArray(BANNERS);
+const randomBanners = shuffleArray(BANNERS.filter((banner) => banner.isActive));
+const currentIndex = 0
 
-export const AdBanner = ({ timer = 15000, startTransition = true, showControls = false }) => {
+export const AdBanner = () => {
   const t = useTranslations("Common");
   const [isMounted, setIsMounted] = useState(false);
 
-  const [currentIndex, setCurrentIndex] = useState(0);
-
   // only render the image client-side to prevent hydration errors due to the random banners
   useEffect(() => {
     setIsMounted(true);
   }, []);
 
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      if (startTransition) {
-        return handleNextBanner();
-      }
-
-      return;
-    }, timer);
-
-    return () => clearInterval(intervalId);
-  }, [currentIndex]);
-
-  const handlePrevBanner = () => {
-    const isFirstBanner = currentIndex === 0;
-    const newIndex = isFirstBanner ? randomBanners.length - 1 : currentIndex - 1;
-
-    setCurrentIndex(newIndex);
-  };
-
-  const handleNextBanner = () => {
-    const isLastBanner = currentIndex === randomBanners.length - 1;
-    const newIndex = isLastBanner ? 0 : currentIndex + 1;
-
-    setCurrentIndex(newIndex);
-  };
-
   const srcLarge = `./banners/large/${randomBanners[currentIndex].image}`;
   const srcSmall = `./banners/small/${randomBanners[currentIndex].image}`;
   const srcName = randomBanners[currentIndex].name;
 
   return (
     <div className="flex flex-col w-full h-full justify-center gap-2">
-      <div className="w-full h-full relative group rounded-[10px]">
+      <div className="w-full h-full rounded-[10px]">
         <a
           href={randomBanners[currentIndex].url}
           rel="noopener noreferrer"
@@ -76,54 +52,34 @@ export const AdBanner = ({ timer = 15000, startTransition = true, showControls =
         >
           <picture className="rounded-[10px] duration-500 w-full h-full">
             <source
-              srcset={srcSmall}
+              srcSet={srcSmall}
               media="(max-width: 420px)"
               className="rounded-[10px] duration-500 w-full h-full"
             />
             <source
-              srcset={srcLarge}
+              srcSet={srcLarge}
               media="(max-width: 639px)"
               className="rounded-[10px] duration-500 w-full h-full"
             />
             <source
-              srcset={srcSmall}
+              srcSet={srcSmall}
               media="(max-width: 1399px)"
               className="rounded-[10px] duration-500 w-full h-full"
             />
             <source
-              srcset={srcLarge}
+              srcSet={srcLarge}
               media="(max-width: 1679px)"
               className="rounded-[10px] duration-500 w-full h-full"
             />
             <source
-              srcset={srcSmall}
+              srcSet={srcSmall}
               media="(max-width: 2000px)"
               className="rounded-[10px] duration-500 w-full h-full"
             />
 
             {isMounted && <img src={srcLarge} alt={srcName} className="rounded-[10px] duration-500 w-full h-full" />}
           </picture>
         </a>
-
-        {/* left arrow */}
-        {showControls && (
-          <div
-            className="hidden group-hover:block absolute top-[50%] -translate-x-0 translate-y-[-50%] left-2 text-xl rounded-full px-2 bg-black/20 text-white cursor-pointer"
-            onClick={handlePrevBanner}
-          >
-            &lsaquo;
-          </div>
-        )}
-
-        {/* right arrow */}
-        {showControls && (
-          <div
-            className="hidden group-hover:block absolute top-[50%] -translate-x-0 translate-y-[-50%] right-2 text-xl rounded-full px-2 bg-black/20 text-white cursor-pointer"
-            onClick={handleNextBanner}
-          >
-            &rsaquo;
-          </div>
-        )}
       </div>
 
       <div className="w-full text-center text-xs text-gray-500 dark:text-[#B3B3B3] italic">

diff --git a/pages/index.js b/pages/index.js
@@ -69,10 +69,10 @@ function Home({ chains }) {
             {filteredChains.map((chain, idx) => {
               if (idx === 2) {
                 return (
-                  <>
-                    <AdBanner timer={20000} startTransition={false} showControls={false} />
-                    <Chain chain={chain} key={idx} lang="en" />
-                  </>
+                  <React.Fragment key={idx}>
+                    <AdBanner />
+                    <Chain chain={chain} lang="en" />
+                  </React.Fragment>
                 )
               }
 

diff --git a/yarn.lock b/yarn.lock
@@ -752,9 +752,9 @@ camelcase@^7.0.0:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001426:
-  version "1.0.30001436"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001436.tgz"
-  integrity sha512-ZmWkKsnC2ifEPoWUvSAIGyOYwT+keAaaWPHiQ9DfMqS1t6tfuyFYoWR78TeZtznkEQ64+vGXH9cZrElwR2Mrxg==
+  version "1.0.30001497"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001497.tgz"
+  integrity sha512-I4/duVK4wL6rAK/aKZl3HXB4g+lIZvaT4VLAn2rCgJ38jVLb0lv2Xug6QuqmxXFVRJMF74SPPWPJ/1Sdm3vCzw==
 
 [email protected]:
   version "0.4.0"