feat(home): add Carousel

package.json

@@ -54,6 +54,7 @@
     "css-loader": "3.4.2",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
+    "element-resize-detector": "^1.2.1",
     "eslint": "^6.6.0",
     "eslint-config-react-app": "^5.2.1",
     "eslint-loader": "3.0.3",
@@ -98,6 +99,7 @@
     "react-image-gallery": "^1.0.8",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
+    "react-slick": "^0.27.12",
     "react-web3": "^1.2.0",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",

src/assets/jss/material-kit-pro-react/components/customCarouselStyle.js

@@ -0,0 +1,48 @@
+const customCarouselStyle = {
+  container: {
+    borderRadius: "6px",
+    overflow: "hidden",
+    backgroundColor: "#42475A",
+  },
+  slider: {
+    width: "100%",
+    height: "100%",
+    lineHeight: "0",
+    // "& img": {
+    //   borderRadius: "6px",
+    //   overflow: "hidden",
+    // },
+    // "& .slick-list": {
+    //   borderRadius: "6px",
+    //   overflow: "hidden",
+    // },
+  },
+  dots: {
+    textAlign: "right",
+    bottom: "20px",
+    paddingRight: "30px",
+    margin: "0",
+    "& li": {
+      width: "8px",
+      height: "8px",
+      borderRadius: "8px",
+      overflow: "hidden",
+      backgroundColor: "rgba(255, 255, 255, 0.3)",
+      margin: "0 4px",
+    },
+    "& li.slick-active": {
+      width: "16px",
+      backgroundColor: "rgba(255, 255, 255, 0.7)",
+    },
+    "& li button": {
+      // visibility: "hidden",
+      opacity: "0",
+      padding: "0",
+      width: "8px",
+      height: "8px",
+      // backgroundColor: "transparent",
+    },
+  },
+};
+
+export default customCarouselStyle;

src/components/CustomCarousel/CustomCarousel.js

@@ -0,0 +1,162 @@
+// import _ from 'lodash';
+import React from "react";
+// import PropTypes from 'prop-types';
+// import ClassNames from 'classnames';
+import { makeStyles } from "@material-ui/core/styles";
+import Slider from "react-slick";
+import ElementResizeDetector from "element-resize-detector";
+
+import ImgWePiggy from "assets/img/carousel/wepiggy.jpg";
+import ImgSFinance from "assets/img/carousel/sfinance.jpg";
+import ImgSakeSwap from "assets/img/carousel/sakeswap.jpg";
+
+import styles from "assets/jss/material-kit-pro-react/components/customCarouselStyle.js";
+
+const useStyles = makeStyles(styles);
+
+function useResize() {
+  const reSizer = React.useRef(
+    ElementResizeDetector({
+      strategy: "scroll", // <- For ultra performance.
+    })
+  );
+
+  const refDom = React.useRef(null);
+
+  const [rect, setRect] = React.useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  });
+
+  React.useEffect(() => {
+    // console.log('Mount');
+    return () => {
+      // console.log('unMount');
+      const uninstall = reSizer.current.uninstall;
+      if (uninstall && refDom.current) {
+        uninstall(refDom.current);
+      }
+
+      refDom.current = undefined;
+      reSizer.current = undefined;
+    };
+  }, []);
+
+  const ref = React.useCallback((dom) => {
+    const listenTo = reSizer.current.listenTo;
+    if (dom && listenTo) {
+      console.log("0000", dom);
+      refDom.current = dom;
+      listenTo(refDom.current, (element) =>
+        setRect(element.getBoundingClientRect())
+      );
+    }
+  }, []);
+
+  return [ref, rect];
+}
+
+function CustomCarousel(props) {
+  // const {  } = props;
+
+  const classes = useStyles();
+
+  const [ref, rect] = useResize();
+  console.log(rect);
+
+  const { width } = rect;
+  const height = width / (1200 / 300);
+
+  const sliderProps = {
+    accessibility: true,
+    adaptiveHeight: true,
+    // afterChange: ,
+    // appendDots: ,
+    arrows: false,
+    // asNavFor: ,
+    autoplaySpeed: 3000,
+    autoplay: true,
+    // beforeChange: ,
+    // centerMode: true,
+    // centerPadding: "50px",
+    // customPaging: ,
+    dotsClass: `slick-dots ${classes.dots}`,
+    dots: true,
+    draggable: true,
+    easing: "linear",
+    fade: false,
+    focusOnSelect: false,
+    infinite: true,
+    initialSlide: 0,
+    lazyLoad: true,
+    // onEdge: ,
+    // onInit: ,
+    // onLazyLoad: ,
+    // onReInit: ,
+    // onSwipe: ,
+    // pauseOnDotsHover: ,
+    // pauseOnFocus: ,
+    // pauseOnHover: ,
+    // responsive: ,
+    rows: 1,
+    rtl: false,
+    slide: "div",
+    slidesPerRow: 1,
+    slidesToScroll: 1,
+    slidesToShow: 1,
+    speed: 500,
+    swipeToSlide: false,
+    swipe: true,
+    touchMove: true,
+    touchThreshold: 5,
+    useCSS: true,
+    useTransform: true,
+    variableWidth: false,
+    vertical: false,
+  };
+
+  return (
+    <div ref={ref} className={classes.container}>
+      <Slider className={classes.slider} {...sliderProps}>
+        <div>
+          <a
+            className={classes.link}
+            href="https://wepiggy.com/"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
+            <img src={ImgWePiggy} alt="slider" width={width} height={height} />
+          </a>
+        </div>
+        <div>
+          <a
+            className={classes.link}
+            href="https://sakeswap.finance/"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
+            <img src={ImgSakeSwap} alt="slider" width={width} height={height} />
+          </a>
+        </div>
+        <div>
+          <a
+            className={classes.link}
+            href="https://s.finance/"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
+            <img src={ImgSFinance} alt="slider" width={width} height={height} />
+          </a>
+        </div>
+      </Slider>
+    </div>
+  );
+}
+
+export default React.memo(CustomCarousel);

src/features/liquidity/LiquidityPage.js

@@ -1,12 +1,13 @@
-import React, { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 // @material-ui/core components
 // @material-ui/icons
 // import Close from "@material-ui/icons/Close";
 // core components
 // sections for this page
-import { SectionTitle, SectionPools } from '.';
+import { SectionTitle, SectionPools } from ".";
 import SnackbarContent from "components/Snackbar/SnackbarContent.js";
+import CustomCarousel from "components/CustomCarousel/CustomCarousel.js";
 // hooks
 
 export default function LiquidityPage() {
@@ -19,15 +20,19 @@ export default function LiquidityPage() {
     <>
       <SnackbarContent
         message={
-            <span onClick={() => window.open(t('Liquidity-SnackBarUrl'))} style={{fontWeight: "bold"}}>
-              {t('Liquidity-SnackBarText')}
-            </span>
+          <span
+            onClick={() => window.open(t("Liquidity-SnackBarUrl"))}
+            style={{ fontWeight: "bold" }}
+          >
+            {t("Liquidity-SnackBarText")}
+          </span>
         }
         close
         color="success"
       />
+      <CustomCarousel />
       <SectionTitle />
       <SectionPools />
     </>
   );
-}
+}

yarn.lock

@@ -4138,6 +4138,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+
 [email protected]:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -4938,7 +4943,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.6:
+classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -6240,6 +6245,13 @@ electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.47, electron-to-chromiu
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.578.tgz#e6671936f4571a874eb26e2e833aa0b2c0b776e0"
   integrity sha512-z4gU6dA1CbBJsAErW5swTGAaU2TBzc2mPAonJb00zqW1rOraDo2zfBMDRvaz9cVic+0JEZiYbHWPw/fTaZlG2Q==
 
+element-resize-detector@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.1.tgz#b0305194447a4863155e58f13323a0aef30851d1"
+  integrity sha512-BdFsPepnQr9fznNPF9nF4vQ457U/ZJXQDSNF1zBe7yaga8v9AdZf3/NElYxFdUh7SitSGt040QygiTo6dtatIw==
+  dependencies:
+    batch-processor "1.0.0"
+
 [email protected]:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
@@ -6339,6 +6351,11 @@ enhanced-resolve@^4.3.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
+enquire.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
+  integrity sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ=
+
 entities@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
@@ -10006,6 +10023,13 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=
+  dependencies:
+    string-convert "^0.2.0"
+
 json3@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
@@ -13524,6 +13548,17 @@ [email protected]:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-slick@^0.27.12:
+  version "0.27.12"
+  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.27.12.tgz#9970d9f040e3ee57ad6e0ab98e4e04bb9dd823ab"
+  integrity sha512-MGhkKK2YACB5+65/AjW+V9e/M+labh6zCJzSSGi34YiMg5n9LBzTUV8Qz6N0PbsKZQpeRwEwWkyIwqm8987B1w==
+  dependencies:
+    classnames "^2.2.5"
+    enquire.js "^2.1.6"
+    json2mq "^0.2.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
+
 react-swipeable@^5.2.0:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-5.5.1.tgz#48ae6182deaf62f21d4b87469b60281dbd7c4a76"
@@ -14955,6 +14990,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"