From 9d695b1b440d4eb7de5e43bedb09d13f6d9f80c8 Mon Sep 17 00:00:00 2001 From: Eugene Date: Thu, 5 Jan 2023 12:21:51 +0800 Subject: [PATCH 1/4] Add new banner for jan comp --- .../assets/background/OSMOSAirdropBanner.svg | 770 ++++++++++++++++++ .../background/OSMOSAirdropBannerMobile.svg | 758 +++++++++++++++++ src/@demex-info/assets/background/index.ts | 2 + src/@demex-info/assets/icons/OSMOGradient.svg | 125 +++ src/@demex-info/assets/icons/index.ts | 1 + src/@demex-info/components/Banner/Banner.tsx | 35 +- .../views/HeroSection/HeroSection.tsx | 26 +- 7 files changed, 1701 insertions(+), 16 deletions(-) create mode 100644 src/@demex-info/assets/background/OSMOSAirdropBanner.svg create mode 100644 src/@demex-info/assets/background/OSMOSAirdropBannerMobile.svg create mode 100644 src/@demex-info/assets/icons/OSMOGradient.svg diff --git a/src/@demex-info/assets/background/OSMOSAirdropBanner.svg b/src/@demex-info/assets/background/OSMOSAirdropBanner.svg new file mode 100644 index 00000000..5aa9c830 --- /dev/null +++ b/src/@demex-info/assets/background/OSMOSAirdropBanner.svg @@ -0,0 +1,770 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/@demex-info/assets/background/OSMOSAirdropBannerMobile.svg b/src/@demex-info/assets/background/OSMOSAirdropBannerMobile.svg new file mode 100644 index 00000000..a6310d11 --- /dev/null +++ b/src/@demex-info/assets/background/OSMOSAirdropBannerMobile.svg @@ -0,0 +1,758 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/@demex-info/assets/background/index.ts b/src/@demex-info/assets/background/index.ts index 5a9b8d89..1c591e49 100644 --- a/src/@demex-info/assets/background/index.ts +++ b/src/@demex-info/assets/background/index.ts @@ -2,3 +2,5 @@ export { ReactComponent as BannerBlueLeft } from "./BannerBlueLeft.svg"; export { ReactComponent as BannerBlueMiddle } from "./BannerBlueMiddle.svg"; export { ReactComponent as BannerBlueRight } from "./BannerBlueRight.svg"; export { ReactComponent as BannerOrange } from "./BannerOrange.svg"; +export { ReactComponent as OSMOSAirdropBanner } from "./OSMOSAirdropBanner.svg"; +export { ReactComponent as OSMOSAirdropBannerMobile } from "./OSMOSAirdropBannerMobile.svg"; diff --git a/src/@demex-info/assets/icons/OSMOGradient.svg b/src/@demex-info/assets/icons/OSMOGradient.svg new file mode 100644 index 00000000..5908ca68 --- /dev/null +++ b/src/@demex-info/assets/icons/OSMOGradient.svg @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/@demex-info/assets/icons/index.ts b/src/@demex-info/assets/icons/index.ts index 79157805..65f16efd 100644 --- a/src/@demex-info/assets/icons/index.ts +++ b/src/@demex-info/assets/icons/index.ts @@ -7,3 +7,4 @@ export { ReactComponent as MenuIcon } from "./Menu.svg"; export { ReactComponent as Nitron } from "./Nitron.svg"; export { ReactComponent as TendermintCore } from "./TendermintCore.svg"; export { ReactComponent as TickIcon } from "./Tick.svg"; +export { ReactComponent as OSMOGradient } from "./OSMOGradient.svg"; diff --git a/src/@demex-info/components/Banner/Banner.tsx b/src/@demex-info/components/Banner/Banner.tsx index 8814c4e5..8a8846c5 100644 --- a/src/@demex-info/components/Banner/Banner.tsx +++ b/src/@demex-info/components/Banner/Banner.tsx @@ -5,27 +5,28 @@ import { Box, BoxProps, Button, makeStyles, Theme, } from "@material-ui/core"; import clsx from "clsx"; -import React from "react"; +import React, { ReactNode } from "react"; import { SvgIcon } from "../SvgIcon"; interface Props extends BoxProps { bannerIcon: React.FunctionComponent> headerText: string - subHeader: string + subHeader: ReactNode bannerIconClass?: string ctaText?: string ctaUrl?: string buttonText?: string buttonUrl?: string + backgroundImg?: string } const Banner: React.FC = (props: Props) => { - const { bannerIcon, headerText, subHeader, ctaText, ctaUrl, buttonText, buttonUrl, className, ...rest } = props; + const { bannerIcon, headerText, subHeader, ctaText, ctaUrl, buttonText, buttonUrl, className, backgroundImg, ...rest } = props; const classes = useStyles(); return ( - + @@ -58,12 +59,18 @@ const Banner: React.FC = (props: Props) => { )} {/* background vectors */} - - - - + { + !backgroundImg && ( + + + + + + + ) + } - + ); }; @@ -97,6 +104,16 @@ const useStyles = makeStyles((theme: Theme) => ({ [theme.breakpoints.down("sm")]: { minHeight: "unset", }, + "&.backgroundImg": { + background: "border-box", + backgroundSize: "105%", + backgroundRepeat: "no-repeat", + backgroundPosition: "center", + [theme.breakpoints.down(380)]: { + backgroundPosition: "unset", + backgroundSize: "auto", + }, + }, }, leftBanner: { display: "flex", diff --git a/src/@demex-info/views/HeroSection/HeroSection.tsx b/src/@demex-info/views/HeroSection/HeroSection.tsx index 55fe3d11..5d1e3c16 100644 --- a/src/@demex-info/views/HeroSection/HeroSection.tsx +++ b/src/@demex-info/views/HeroSection/HeroSection.tsx @@ -1,4 +1,4 @@ -import { Nitron } from "@demex-info/assets"; +import { OSMOGradient, OSMOSAirdropBannerMobile, OSMOSAirdropBanner } from "@demex-info/assets"; import { BackgroundAnimation } from "@demex-info/components"; import { Banner } from "@demex-info/components/Banner"; import { getDemexLink, Paths, StaticLinks } from "@demex-info/constants"; @@ -9,6 +9,7 @@ import React, { Suspense, useEffect } from "react"; import { useSelector } from "react-redux"; import TextLoop from "react-text-loop"; import MarketsGrid from "./components/MarketsGrid"; +import { renderToStaticMarkup } from "react-dom/server"; const HeroSection: React.FC = () => { const classes = useStyles(); @@ -20,20 +21,24 @@ const HeroSection: React.FC = () => { const items = ["Bitcoin", "Perpetuals", "Ethereum", "SWTH", "USDC", "Futures", "Atom", "AAVE", "Wrapped Bitcoin", "Gold", "Anything"]; + const isMobile = useMediaQuery(theme.breakpoints.down("sm")); + const bannerAsString = encodeURIComponent(renderToStaticMarkup(isMobile ? : )); + useEffect(() => { setTimeout(() => setReady(true)); }, []); return ( - Trade OSMO, BTC & ETH Perpetual Contracts and earn up to 110 USDC!} ctaText="Learn more" - buttonText={isDesktop ? "Explore Nitron" : "Explore"} + ctaUrl={StaticLinks.DemexDocs.Nitron} + buttonText="Join Now" buttonUrl={getDemexLink(Paths.Nitron, net)} + backgroundImg={bannerAsString} /> { ready && ( @@ -234,6 +239,13 @@ const useStyles = makeStyles((theme) => ({ }, }, }, + orangeStrong: { + fontWeight: 700, + background: "linear-gradient(90deg, #FFA800 0%, #FF5107 100%)", + backgroundClip: "text", + WebkitTextFillColor: "transparent", + WebkitBackgroundClip: "text", + }, })); export default HeroSection; From 6269d247af185cc21a2557001c35a42f651fbb0a Mon Sep 17 00:00:00 2001 From: Eugene Date: Thu, 5 Jan 2023 13:25:51 +0800 Subject: [PATCH 2/4] fix ctaUrl --- src/@demex-info/constants/links.ts | 1 + src/@demex-info/utils/styles.ts | 1 + src/@demex-info/views/HeroSection/HeroSection.tsx | 11 ++++++----- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/@demex-info/constants/links.ts b/src/@demex-info/constants/links.ts index c0eae6d2..c9b5dc27 100644 --- a/src/@demex-info/constants/links.ts +++ b/src/@demex-info/constants/links.ts @@ -51,6 +51,7 @@ export const Paths = { Competition: { Leaderboard: "/competition", + SignUp: "/competition/register", }, Pools: { diff --git a/src/@demex-info/utils/styles.ts b/src/@demex-info/utils/styles.ts index 728043e5..a56bb30d 100644 --- a/src/@demex-info/utils/styles.ts +++ b/src/@demex-info/utils/styles.ts @@ -8,4 +8,5 @@ export const StyleUtils = { purpleGradient: "linear-gradient(90deg, #B6F4FD 45.4%, #943EB7 80.52%, #3D2347 130.74%)", boxShadow: (theme: Theme) => `0px 0px 16px ${theme.palette.shadow}`, bannerGradient: "linear-gradient(298.71deg, #282B2D 32.3%, #000000 100%)", + orangeGradient: "linear-gradient(90deg, #FFA800 0%, #FF5107 100%)", }; diff --git a/src/@demex-info/views/HeroSection/HeroSection.tsx b/src/@demex-info/views/HeroSection/HeroSection.tsx index 5d1e3c16..cc8d5e25 100644 --- a/src/@demex-info/views/HeroSection/HeroSection.tsx +++ b/src/@demex-info/views/HeroSection/HeroSection.tsx @@ -1,15 +1,16 @@ -import { OSMOGradient, OSMOSAirdropBannerMobile, OSMOSAirdropBanner } from "@demex-info/assets"; +import { OSMOGradient, OSMOSAirdropBanner, OSMOSAirdropBannerMobile } from "@demex-info/assets"; import { BackgroundAnimation } from "@demex-info/components"; import { Banner } from "@demex-info/components/Banner"; -import { getDemexLink, Paths, StaticLinks } from "@demex-info/constants"; +import { getDemexLink, Paths } from "@demex-info/constants"; import { RootState } from "@demex-info/store/types"; import { Box, Button, Container, makeStyles, useMediaQuery, useTheme } from "@material-ui/core"; import clsx from "clsx"; import React, { Suspense, useEffect } from "react"; +import { StyleUtils } from "@demex-info/utils"; +import { renderToStaticMarkup } from "react-dom/server"; import { useSelector } from "react-redux"; import TextLoop from "react-text-loop"; import MarketsGrid from "./components/MarketsGrid"; -import { renderToStaticMarkup } from "react-dom/server"; const HeroSection: React.FC = () => { const classes = useStyles(); @@ -35,7 +36,7 @@ const HeroSection: React.FC = () => { headerText="$OSMO Perpetuals Airdrop Campaign is LIVE!" subHeader={Trade OSMO, BTC & ETH Perpetual Contracts and earn up to 110 USDC!} ctaText="Learn more" - ctaUrl={StaticLinks.DemexDocs.Nitron} + ctaUrl={Paths.Competition.SignUp} buttonText="Join Now" buttonUrl={getDemexLink(Paths.Nitron, net)} backgroundImg={bannerAsString} @@ -241,7 +242,7 @@ const useStyles = makeStyles((theme) => ({ }, orangeStrong: { fontWeight: 700, - background: "linear-gradient(90deg, #FFA800 0%, #FF5107 100%)", + background: StyleUtils.orangeGradient, backgroundClip: "text", WebkitTextFillColor: "transparent", WebkitBackgroundClip: "text", From dbfc7439206fe091605a20e03353791f14cbb21d Mon Sep 17 00:00:00 2001 From: Eugene Date: Thu, 5 Jan 2023 13:37:07 +0800 Subject: [PATCH 3/4] fix banner link --- src/@demex-info/constants/links.ts | 16 ++++++++++++++++ .../views/HeroSection/HeroSection.tsx | 6 +++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/@demex-info/constants/links.ts b/src/@demex-info/constants/links.ts index c9b5dc27..9e5de842 100644 --- a/src/@demex-info/constants/links.ts +++ b/src/@demex-info/constants/links.ts @@ -128,6 +128,22 @@ export const StaticLinks = { Crosschain: "https://guide.dem.exchange/about-demex/master/features-overview#cross-chain-compatibility", }, Nitron: "https://guide.dem.exchange/products/nitron", + Competition: { + Past: { + Main: "https://guide.dem.exchange/competition/perpetuals-trading-competition/top-gainers-and-top-traders-2", + TopGainers: "https://guide.dem.exchange/competition/perpetuals-trading-competition/top-gainers-and-top-traders-1#top-gainers", + TopTraders: "https://guide.dem.exchange/competition/perpetuals-trading-competition/top-gainers-and-top-traders-1#top-traders", + }, + Current: { + Main: "https://guide.dem.exchange/competition/perpetuals-trading-competition/top-gainers-3-dec", + TopGainers: "https://guide.dem.exchange/competition/perpetuals-trading-competition/top-gainers-3-dec#top-gainers", + TopTraders: "https://guide.dem.exchange/competition/perpetuals-trading-competition/top-gainers-and-top-traders-2#top-traders", + }, + Upcoming: { + Main: "https://guide.dem.exchange/competition/usdosmo-perpetuals-airdrop-campaign-jan-2023", + TopGainers: "https://guide.dem.exchange/competition/usdosmo-perpetuals-airdrop-campaign-jan-2023", + }, + }, }, Tendermint: "https://tendermint.com/core/", Docs: { diff --git a/src/@demex-info/views/HeroSection/HeroSection.tsx b/src/@demex-info/views/HeroSection/HeroSection.tsx index cc8d5e25..ca589457 100644 --- a/src/@demex-info/views/HeroSection/HeroSection.tsx +++ b/src/@demex-info/views/HeroSection/HeroSection.tsx @@ -1,7 +1,7 @@ import { OSMOGradient, OSMOSAirdropBanner, OSMOSAirdropBannerMobile } from "@demex-info/assets"; import { BackgroundAnimation } from "@demex-info/components"; import { Banner } from "@demex-info/components/Banner"; -import { getDemexLink, Paths } from "@demex-info/constants"; +import { getDemexLink, Paths, StaticLinks } from "@demex-info/constants"; import { RootState } from "@demex-info/store/types"; import { Box, Button, Container, makeStyles, useMediaQuery, useTheme } from "@material-ui/core"; import clsx from "clsx"; @@ -36,9 +36,9 @@ const HeroSection: React.FC = () => { headerText="$OSMO Perpetuals Airdrop Campaign is LIVE!" subHeader={Trade OSMO, BTC & ETH Perpetual Contracts and earn up to 110 USDC!} ctaText="Learn more" - ctaUrl={Paths.Competition.SignUp} + ctaUrl={StaticLinks.DemexDocs.Competition.Upcoming.Main} buttonText="Join Now" - buttonUrl={getDemexLink(Paths.Nitron, net)} + buttonUrl={Paths.Competition.SignUp} backgroundImg={bannerAsString} /> { From 97136216c50cdcf402b079c66b20c48026b99e05 Mon Sep 17 00:00:00 2001 From: Eugene Date: Thu, 5 Jan 2023 13:38:38 +0800 Subject: [PATCH 4/4] fix import --- src/@demex-info/views/HeroSection/HeroSection.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/@demex-info/views/HeroSection/HeroSection.tsx b/src/@demex-info/views/HeroSection/HeroSection.tsx index ca589457..cb75c555 100644 --- a/src/@demex-info/views/HeroSection/HeroSection.tsx +++ b/src/@demex-info/views/HeroSection/HeroSection.tsx @@ -2,13 +2,11 @@ import { OSMOGradient, OSMOSAirdropBanner, OSMOSAirdropBannerMobile } from "@dem import { BackgroundAnimation } from "@demex-info/components"; import { Banner } from "@demex-info/components/Banner"; import { getDemexLink, Paths, StaticLinks } from "@demex-info/constants"; -import { RootState } from "@demex-info/store/types"; +import { StyleUtils } from "@demex-info/utils"; import { Box, Button, Container, makeStyles, useMediaQuery, useTheme } from "@material-ui/core"; import clsx from "clsx"; import React, { Suspense, useEffect } from "react"; -import { StyleUtils } from "@demex-info/utils"; import { renderToStaticMarkup } from "react-dom/server"; -import { useSelector } from "react-redux"; import TextLoop from "react-text-loop"; import MarketsGrid from "./components/MarketsGrid"; @@ -18,7 +16,6 @@ const HeroSection: React.FC = () => { const [ready, setReady] = React.useState(false); const isDesktop = useMediaQuery(theme.breakpoints.up("md")); - const net = useSelector((state: RootState) => state.app.network); const items = ["Bitcoin", "Perpetuals", "Ethereum", "SWTH", "USDC", "Futures", "Atom", "AAVE", "Wrapped Bitcoin", "Gold", "Anything"];