diff --git a/package.json b/package.json
index d1951d7f9..0b23b907f 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/img/carousel/sakeswap.jpg b/src/assets/img/carousel/sakeswap.jpg
new file mode 100644
index 000000000..79977bdf4
Binary files /dev/null and b/src/assets/img/carousel/sakeswap.jpg differ
diff --git a/src/assets/img/carousel/sfinance.jpg b/src/assets/img/carousel/sfinance.jpg
new file mode 100644
index 000000000..2d366e2a5
Binary files /dev/null and b/src/assets/img/carousel/sfinance.jpg differ
diff --git a/src/assets/img/carousel/wepiggy.jpg b/src/assets/img/carousel/wepiggy.jpg
new file mode 100644
index 000000000..de8dc61cf
Binary files /dev/null and b/src/assets/img/carousel/wepiggy.jpg differ
diff --git a/src/assets/jss/material-kit-pro-react/components/customCarouselStyle.js b/src/assets/jss/material-kit-pro-react/components/customCarouselStyle.js
new file mode 100644
index 000000000..13c5d14e6
--- /dev/null
+++ b/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;
diff --git a/src/components/CustomCarousel/CustomCarousel.js b/src/components/CustomCarousel/CustomCarousel.js
new file mode 100644
index 000000000..b64abd7f2
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+export default React.memo(CustomCarousel);
diff --git a/src/features/liquidity/LiquidityPage.js b/src/features/liquidity/LiquidityPage.js
index e9012017e..db2640401 100644
--- a/src/features/liquidity/LiquidityPage.js
+++ b/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() {
<>
window.open(t('Liquidity-SnackBarUrl'))} style={{fontWeight: "bold"}}>
- {t('Liquidity-SnackBarText')}
-
+ window.open(t("Liquidity-SnackBarUrl"))}
+ style={{ fontWeight: "bold" }}
+ >
+ {t("Liquidity-SnackBarText")}
+
}
close
color="success"
/>
+
);
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index 4bce2bb9b..7a57db055 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4138,6 +4138,11 @@ base@^0.11.1:
mixin-deep "^1.2.0"
pascalcase "^0.1.1"
+batch-processor@1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+ integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+
batch@0.6.1:
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"
+
elliptic@6.5.2:
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 @@ react-router@5.2.0:
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"
+
+ 
+
+ 
+
+