[LUM-847] Website -> Update Oct 2023

.github/workflows/merge.yaml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     environment: production
     steps:
-      - name: Set up Node version to 14
+      - name: Set up Node version to 16
         uses: actions/setup-node@v2
         with:
-            node-version: '14'
+            node-version: '16'
 
       - name: Checkout repository
         uses: actions/checkout@v2

.github/workflows/pull_request.yml

@@ -10,10 +10,10 @@ jobs:
   build_and_preview:
     runs-on: ubuntu-latest
     steps:
-      - name: Set up Node version to 14
+      - name: Set up Node version to 16
         uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
       - name: Checkout repository and submodules
         uses: actions/checkout@v2
         with:

.gitignore

@@ -1,6 +1,9 @@
 build
 .idea
 
+# misc
+.DS_Store
+
 # Logs
 logs
 *.log

package.json

@@ -3,7 +3,7 @@
     "version": "0.2.0",
     "private": true,
     "dependencies": {
-        "@lum-network/sdk-javascript": "^0.7.11",
+        "@lum-network/sdk-javascript": "^0.8.9",
         "@octokit/auth-token": "^3.0.2",
         "@octokit/core": "^4.1.0",
         "@octokit/plugin-rest-endpoint-methods": "^6.7.0",
@@ -73,18 +73,11 @@
             "react-app/jest"
         ]
     },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
+    "browserslist": [
+        ">0.2%",
+        "not dead",
+        "not op_mini all"
+    ],
     "resolutions": {
         "react-scripts/**/react-error-overlay": "6.0.9",
         "@types/react": "~17.0.21"

src/App.tsx

@@ -75,8 +75,7 @@ const App = (): JSX.Element => {
 
     useEffect(() => {
         dispatch.stats.getLumStats().finally(() => null);
-        dispatch.stats.getDfrStats().finally(() => null);
-        dispatch.stats.getSkrStats().finally(() => null);
+        dispatch.stats.getCmStats().finally(() => null);
         dispatch.stats.getToolsStats().finally(() => null);
     }, []);
 

src/assets/index.ts

@@ -27,12 +27,8 @@ import transparencyIcon from './images/transparency.png';
 import trustLayers from './images/trust_layers.png';
 import trustLayersShadows from './images/trust_layers_shadows.png';
 
-import showcaseLumkiIllu from './images/showcase_lumki_illu.png';
-import showcaseNetreviewsIllu from './images/showcase_netreviews_illu.png';
-import showcaseJoinIllu from './images/showcase_join_illu.png';
-
-import skeepers from './images/partners/skeepers.png';
 import arcanum from './images/partners/arcanum.png';
+import citadelone from './images/partners/citadelone.svg';
 import swissborg from './images/partners/swissborg.png';
 import stakefish from './images/partners/stakefish.png';
 import cosmostation from './images/partners/cosmostation.png';
@@ -75,14 +71,11 @@ const Assets = {
         transparencyIcon,
         trustLayers,
         trustLayersShadows,
-        showcaseLumkiIllu,
-        showcaseNetreviewsIllu,
-        showcaseJoinIllu,
     },
     partners: {
         ignite,
-        skeepers,
         arcanum,
+        citadelone,
         swissborg,
         stakefish,
         cosmostation,

src/components/Footer/Footer.tsx

@@ -13,7 +13,6 @@ import {
     LUM_TWITTER,
     LUM_WALLET,
     LUM_DISCORD,
-    LUM_NETWORK_WHITEPAPER,
     NavigationConstants,
     LUM_MEDIUM,
 } from 'constant';
@@ -59,17 +58,10 @@ const Footer = (): JSX.Element => {
                                     <strong>{t('footer.useCases')}</strong>
                                     <NavLink
                                         preventScrollReset
-                                        to={NavigationConstants.SKR}
+                                        to={NavigationConstants.CM}
                                         className="footer-link text-reset text-decoration-none scale-anim my-4"
                                     >
-                                        Skeepers Rewards
-                                    </NavLink>
-                                    <NavLink
-                                        preventScrollReset
-                                        to={NavigationConstants.DFRACT}
-                                        className="footer-link text-reset text-decoration-none scale-anim mb-4"
-                                    >
-                                        DFract
+                                        Cosmos Millions
                                     </NavLink>
                                 </div>
                                 <div className="d-flex flex-column ms-0 ms-lg-3 mt-4 mt-lg-0">
@@ -106,9 +98,6 @@ const Footer = (): JSX.Element => {
                                 <div className="d-flex flex-column-reverse flex-lg-row justify-content-around">
                                     <p className="footer-link mb-0">Lum Network {moment().utc().year()} ©</p>
                                     <p className="footer-link mb-0 ms-0 ms-lg-5">[email protected]</p>
-                                    <Link link={LUM_NETWORK_WHITEPAPER} className="footer-link mb-0 ms-0 ms-lg-5">
-                                        White paper
-                                    </Link>
                                     {/* <p className="footer-link mb-0 ms-5">{t('footer.privacyPolicy')}</p> */}
                                 </div>
                                 <Button

src/components/Header/Header.tsx

@@ -1,17 +1,17 @@
-import React, { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { useEffect, useRef } from 'react';
 import { gsap } from 'gsap';
 
-import { LUM_NETWORK_WHITEPAPER, NavigationConstants } from 'constant';
-import { DropdownButton, Link } from 'components';
+import { NavigationConstants } from 'constant';
+import { DropdownButton } from 'components';
 
 import './styles/Header.scss';
 
 import lumNetworkLogoDark from 'assets/images/lum_network_logo_dark.png';
 import { Link as ReactRouterLink } from 'react-router-dom';
 
-const Header = ({ bgTriggerElem }: { modalId: string; bgTriggerElem?: string }): JSX.Element => {
-    const { t } = useTranslation();
+const Header = (): JSX.Element => {
+    const tl = useRef<gsap.core.Timeline>();
+
     useEffect(() => {
         // Enables Header GSAP animation only on the landing page
         if (window.location.pathname === '/') {
@@ -36,24 +36,23 @@ const Header = ({ bgTriggerElem }: { modalId: string; bgTriggerElem?: string }):
     }, []);
 
     useEffect(() => {
-        if (bgTriggerElem) {
-            gsap.to(`header .background`, {
-                opacity: 1,
-                ease: 'none',
-                scrollTrigger: {
-                    trigger: `#welcome`,
-                    start: '10% top',
-                    end: '30% top',
-                    scrub: true,
-                },
-            });
-        } else {
-            gsap.to(`header .background`, {
-                opacity: 1,
-                duration: 0,
-            });
+        const scrollTrigger = {
+            trigger: '#root',
+            start: 'top top',
+            end: 'top+=45px top',
+            scrub: true,
+        };
+
+        if (!tl.current) {
+            tl.current = gsap.timeline();
         }
-    }, [bgTriggerElem]);
+
+        tl.current.to(`header .background`, {
+            opacity: 1,
+            ease: 'none',
+            scrollTrigger,
+        });
+    }, []);
 
     return (
         <header className="navbar fixed-top mt-4 mx-auto container p-4">
@@ -63,18 +62,12 @@ const Header = ({ bgTriggerElem }: { modalId: string; bgTriggerElem?: string }):
                     <img alt="Lum" src={lumNetworkLogoDark} width="235" height="38" className="lum-logo-header" />
                 </ReactRouterLink>
                 <div className="navbar-items-container d-none d-md-flex flex-row align-items-center">
-                    <Link className="me-sm-3 me-md-5" link={LUM_NETWORK_WHITEPAPER}>
-                        {t('landing.whitePaper')}
-                    </Link>
                     <ReactRouterLink to={NavigationConstants.TOOLS} className="link-btn me-sm-3 me-md-5">
                         Tools
                     </ReactRouterLink>
                     <DropdownButton
                         title="Use Cases"
-                        items={[
-                            { title: 'Skeepers Rewards', onPress: NavigationConstants.SKR },
-                            { title: 'DFract', onPress: NavigationConstants.DFRACT },
-                        ]}
+                        items={[{ title: 'Cosmos Millions', onPress: NavigationConstants.CM }]}
                     />
                 </div>
             </nav>

src/components/UseCaseCard/UseCaseCard.tsx

@@ -4,42 +4,34 @@ import { useTranslation } from 'react-i18next';
 
 import { NavigationConstants } from 'constant';
 
-import skr from 'assets/images/skr.png';
-import dfract from 'assets/images/dfract.png';
-import dfractBig from 'assets/images/dfract_big.png';
-import skrBig from 'assets/images/skr_big.png';
+import cm from 'assets/images/cm_big.png';
+import tools from 'assets/images/tools_big.png';
 import ellipse1 from 'assets/images/ellipse.svg';
 
+import { ResponsiveImage } from 'components';
+
 import './UseCaseCard.scss';
-import ResponsiveImage from 'components/ResponsiveImage/ResponsiveImage';
-
-const UseCaseCard = ({
-    className,
-    useCase,
-    big,
-}: {
-    useCase: 'skr' | 'dfract';
-    className?: string;
-    big?: boolean;
-}): JSX.Element => {
+
+const UseCaseCard = ({ className, useCase }: { useCase: 'cm' | 'tools'; className?: string }): JSX.Element => {
     const { t } = useTranslation();
 
-    const icon = useCase === 'skr' ? (big ? skrBig : skr) : big ? dfractBig : dfract;
-    const title = useCase === 'skr' ? 'useCases.skr.card.title' : 'useCases.dfract.card.title';
-    const description = useCase === 'skr' ? 'useCases.skr.card.description' : 'useCases.dfract.card.description';
-    const to = useCase === 'skr' ? NavigationConstants.SKR : NavigationConstants.DFRACT;
+    const image = useCase === 'cm' ? cm : tools;
+    const title = useCase === 'cm' ? 'useCases.cosmosMillions.card.title' : 'tools.page.title';
+    const description =
+        useCase === 'cm' ? 'useCases.cosmosMillions.card.description' : 'tools.landingSection.description';
+    const to = useCase === 'cm' ? NavigationConstants.CM : NavigationConstants.TOOLS;
 
     return (
         <div className={`use-case-card w-100 ${className}`}>
             <img src={ellipse1} className="ellipse" />
             <div className="content">
                 <NavLink preventScrollReset to={to} className="position-relative">
-                    <ResponsiveImage src={icon} alt={useCase} className="illustration" />
+                    <ResponsiveImage src={image} alt={useCase} className="illustration" />
                 </NavLink>
                 <div className="p-4">
                     <div className="fw-bold fs-3">{t(title)}</div>
                     <div className="d-flex flex-column flex-lg-row justify-content-between mt-2">
-                        <p>{t(description)}</p>
+                        <p>{t(description).replace('\n', ' ')}</p>
                         <NavLink
                             to={to}
                             preventScrollReset

src/constant/constants/index.ts

@@ -2,13 +2,13 @@ const isTestEnv = (): boolean => {
     return window.location.href.includes('localhost') || window.location.href.includes('testnet');
 };
 
+export const COSMOS_MILLIONS_URL = 'https://cosmosmillions.com';
 export const LUM_DOMAIN = isTestEnv() ? 'testnet.lum.network' : 'lum.network';
 export const LUM_NETWORK_DOCUMENTATION = 'https://docs.lum.network';
 export const LUM_EXPLORER_GITHUB = 'https://github.com/lum-network/explorer';
 export const LUM_WALLET_GITHUB = 'https://github.com/lum-network/wallet';
 export const LUM_WALLET = `https://wallet.${LUM_DOMAIN}`;
 export const LUM_EXPLORER = `https://explorer.${LUM_DOMAIN}`;
-export const LUM_DFRACT = `https://dfract.${LUM_DOMAIN}`;
 export const LUM_NETWORK_GITHUB = 'https://github.com/lum-network';
 export const LUM_DISCORD = 'https://discord.gg/KwyVvnBcXF';
 export const LUM_TELEGRAM = 'https://t.me/lum_network';
@@ -21,7 +21,6 @@ export const LUM_OSMOSIS = 'https://app.osmosis.zone/?from=ATOM&to=LUM';
 export const LUM_OSMOSIS_LBP_ARTICLE =
     'https://medium.com/lum-network/participate-to-lum-liquidity-pool-2-2-d8af19e94a21';
 export const COINGECKO_API_URL = 'https://api.coingecko.com/api/v3';
-export const SKR_URL = 'https://rwd.skeepers.io';
 export const MIN_LARGE_DEVICE_WIDTH = 992;
 export const MAX_PHONE_DEVICE_WIDTH = 640;
 export const IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

src/constant/constants/navigation.ts

@@ -1,5 +1,4 @@
 export const NavigationConstants = {
-    SKR: '/skeepers-rewards',
-    DFRACT: '/dfract',
     TOOLS: '/tools',
+    CM: '/cosmos-millions',
 };

src/layout/index.tsx

@@ -39,7 +39,7 @@ const MainLayout = (): JSX.Element => {
 
     return (
         <>
-            <Header modalId="#get-informed-modal" bgTriggerElem="#welcome" />
+            <Header />
             <SwitchTransition>
                 <CSSTransition key={location.pathname} nodeRef={nodeRef} timeout={1200} classNames="page" unmountOnExit>
                     {() => (