Quick fixes

package.json

@@ -106,7 +106,7 @@
     "stylelint:fix": "stylelint \"src/**/*.scss\" --fix",
     "lint:all": "yarn lint && yarn stylelint --fix",
     "build": "NODE_OPTIONS=--openssl-legacy-provider gatsby build",
-    "develop": "cross-env NODE_OPTIONS=--openssl-legacy-provider gatsby develop",
+    "develop": "NODE_OPTIONS=--openssl-legacy-provider gatsby develop",
     "format": "prettier --write src/**/*.{js,jsx}",
     "start": "yarn develop",
     "serve": "NODE_OPTIONS=--openssl-legacy-provider gatsby serve",
@@ -123,4 +123,4 @@
   "engines": {
     "node": "^18"
   }
-}
+}

src/components/index-page/Ecosystem/styles.scss

@@ -20,7 +20,7 @@
 
 .IndexPage {
   &__ecosystem-wrapper {
-    padding: 96px 32px;
+    padding: 0 32px 96px 32px;
     background-color: $c_black;
   }
 
@@ -612,7 +612,7 @@
 
   @media (max-width: 1024px) {
     &__ecosystem-wrapper {
-      padding: 64px 16px;
+      padding: 0px 16px 64px 16px;
     }
 
     &__ecosystem {

src/components/index-page/JoystreamDAO/style.scss

@@ -4,7 +4,7 @@
 
 .IndexPage {
   &__joystream-dao-wrapper {
-    padding: 96px 32px 0 32px;
+    padding: 96px 32px;
     background-color: #f2f5f9;
   }
 
@@ -239,7 +239,7 @@
 
   @media (max-width: 1024px) {
     &__joystream-dao-wrapper {
-      padding: 64px 16px 0 16px;
+      padding: 64px 16px;
     }
 
     &__joystream-dao {

src/components/index-page/Tokenomics/index.js

@@ -93,10 +93,10 @@ const Tokenomics = ({ tokenomicsData, priceData, t }) => {
   return (
     <section className="IndexPage__tokenomics-wrapper">
       <div className="IndexPage__tokenomics">
-        <header className="IndexPage__tokenomics__header">
+        {/* <header className="IndexPage__tokenomics__header">
           <span className="IndexPage__tokenomics__header__section-title">{t('landing.tokenomics.sectionTitle')}</span>
           <h2 className="IndexPage__tokenomics__header__title">{t('landing.tokenomics.title')}</h2>
-        </header>
+        </header> */}
         <div className="IndexPage__tokenomics__metrics">
           <Container
             title={t('landing.tokenomics.price.title')}

src/components/index-page/Tokenomics/style.scss

@@ -4,8 +4,7 @@
 
 .IndexPage {
   &__tokenomics-wrapper {
-    padding: 96px 32px;
-    background-color: #111316;
+    padding: 0 32px;
   }
 
   &__tokenomics {
@@ -33,7 +32,6 @@
 
     &__metrics {
       display: grid;
-      margin-top: 72px;
       gap: 24px;
       grid-column: 2 / 12;
       grid-template-areas:
@@ -222,9 +220,9 @@
     }
   }
 
-  @media (max-width: 1024px) {
+  @media (max-width: 992px) {
     &__tokenomics-wrapper {
-      padding: 64px 16px;
+      padding: 32px 16px 0 16px;
     }
 
     &__tokenomics {

src/components/token-page/Hero/index.js

@@ -1,135 +1,12 @@
 import React from 'react';
-import cn from 'classnames';
 
-import useAxios from '../../../utils/useAxios';
+import Tokenomics from '../../../components/index-page/Tokenomics';
 
 import Tokens from '../../../assets/svg/token/joy-token-hero.svg';
-import { ReactComponent as JoyTokenIcon } from '../../../assets/svg/token/joy-token.svg';
-import { ReactComponent as InfoIcon } from '../../../assets/svg/info.svg';
 
 import './style.scss';
 
-const TokenStatsItem = ({
-  title,
-  value,
-  joyIcon = false,
-  disabled = false,
-  tooltip = '',
-  loading = false,
-  statusServerData = null,
-  denomination = 'JOY',
-  error,
-  t,
-}) => {
-  let newValue = value === 'JOY' ? 'JOY' : '';
-
-  if (Array.isArray(statusServerData) && statusServerData[0] && statusServerData[1] && !loading && !error) {
-    const amount = Math.floor(statusServerData[0][value[0]] * statusServerData[1][value[1]]);
-    const formattedAmount = new Intl.NumberFormat('en-US').format(amount);
-
-    newValue = formattedAmount + ` ${denomination}`;
-  }
-
-  if (!Array.isArray(statusServerData) && statusServerData && !loading && !error) {
-    let amount = statusServerData[value];
-
-    if (denomination === 'USD') {
-      amount = amount.toFixed(6);
-    }
-
-    if (denomination === 'JOY') {
-      amount = new Intl.NumberFormat('en-US').format(amount);
-    }
-
-    newValue = amount + ` ${denomination}`;
-  }
-
-  if (loading) {
-    newValue = t('token.hero.loading');
-  }
-
-  if (error) {
-    newValue = t('token.hero.error');
-  }
-
-  return (
-    <div
-      className={cn('TokenPage__tokenstats__item', {
-        'TokenPage__tokenstats__item--disabled': disabled,
-      })}
-    >
-      {loading && <div className="TokenPage__tokenstats__item__loading-bar"></div>}
-      <h3 className="TokenPage__tokenstats__item__title">{title}</h3>
-      <div
-        className={cn('TokenPage__tokenstats__item__value', {
-          'TokenPage__tokenstats__item__value--disabled': disabled,
-          'TokenPage__tokenstats__item__value--loading': loading,
-        })}
-      >
-        {joyIcon && <JoyTokenIcon className="TokenPage__tokenstats__item__value__joy-icon" />}
-        {newValue}
-      </div>
-      {tooltip && (
-        <div className="TokenPage__tokenstats__item__tooltip-wrapper">
-          <div className="TokenPage__tokenstats__item__tooltip">
-            <InfoIcon className="TokenPage__tokenstats__item__tooltip__icon" />
-            <div className="TokenPage__tokenstats__item__tooltip__modal">{tooltip}</div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const TokenStatsSection = ({ t, isSeparate }) => {
-  const [statusServerData, loading, error] = useAxios('https://status.joystream.org/status');
-  const [priceData, priceLoading, priceError] = useAxios('https://status.joystream.org/price');
-
-  return (
-    <div
-      className={cn('', {
-        'TokenPage__tokenstats-wrapper': !isSeparate,
-        'TokenPage__tokenstats-wrapper-separate': isSeparate,
-      })}
-    >
-      <div
-        className={cn('TokenPage__tokenstats', {
-          'TokenPage__tokenstats--separate': isSeparate,
-        })}
-      >
-        <TokenStatsItem title={t('token.hero.tokenStats.symbol.title')} value="JOY" joyIcon t={t} />
-        <TokenStatsItem
-          title={t('token.hero.tokenStats.supply.title')}
-          value="totalIssuance"
-          statusServerData={statusServerData}
-          loading={loading}
-          error={error}
-          t={t}
-        />
-        <TokenStatsItem
-          title={t('token.hero.tokenStats.price.title')}
-          value="price"
-          statusServerData={priceData}
-          loading={priceLoading}
-          denomination="USD"
-          error={priceError}
-          t={t}
-        />
-        <TokenStatsItem
-          title={t('token.hero.tokenStats.fdv.title')}
-          value={['totalIssuance', 'price']}
-          statusServerData={[statusServerData, priceData]}
-          loading={loading || priceLoading}
-          denomination="USD"
-          error={error || priceError}
-          t={t}
-        />
-      </div>
-    </div>
-  );
-};
-
-const TokenHero = ({ t }) => {
+const TokenHero = ({ t, tokenomicsData, priceData }) => {
   return (
     <div className="TokenPage__hero-background">
       <div className="TokenPage__hero-wrapper">
@@ -142,7 +19,7 @@ const TokenHero = ({ t }) => {
             <img className="TokenPage__hero__illustration__image" alt="" src={Tokens} />
           </div>
         </div>
-        <TokenStatsSection t={t} />
+        <Tokenomics t={t} tokenomicsData={tokenomicsData} priceData={priceData} />
       </div>
     </div>
   );

src/components/token-page/Hero/style.scss

@@ -236,7 +236,7 @@
 
   @media #{$screen-max-lg} {
     &__hero-wrapper {
-      background-position: top 18% right 20px;
+      background-position: top 12% right 20px;
     }
   }
 

src/pages/index.js

@@ -11,7 +11,7 @@ import Payouts from '../components/index-page/Payouts';
 import VideoNFTs from '../components/index-page/VideoNFTs';
 import CreatorTokens from '../components/index-page/CreatorTokens';
 import JoystreamDAO from '../components/index-page/JoystreamDAO';
-import AvailableActivities from '../components/index-page/AvailableActivities';
+// import AvailableActivities from '../components/index-page/AvailableActivities';
 import Ecosystem from '../components/index-page/Ecosystem';
 import Tokenomics from '../components/index-page/Tokenomics';
 import Video from '../components/index-page/Video';
@@ -49,8 +49,6 @@ const IndexPage = pageProps => {
 
       <Creators t={t} creators={data?.carouselData.creators} priceData={updatedPriceData} />
 
-      <Tokenomics t={t} tokenomicsData={data} priceData={updatedPriceData} />
-
       <Ecosystem t={t} />
 
       <VideoNFTs t={t} nftData={data?.carouselData.nfts} priceData={updatedPriceData} />
@@ -63,7 +61,7 @@ const IndexPage = pageProps => {
 
       <JoystreamDAO t={t} proposalsData={data?.carouselData.proposals} />
 
-      <AvailableActivities t={t} budgets={data?.budgets} loading={loading} priceData={updatedPriceData} />
+      {/* <AvailableActivities t={t} budgets={data?.budgets} loading={loading} priceData={updatedPriceData} /> */}
 
       <Dashboard {...pageProps} />
     </BaseLayout>

src/pages/token/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { graphql } from 'gatsby';
 import { useTranslation, useI18next, Trans } from 'gatsby-plugin-react-i18next';
 
+import useAxios from '../../utils/useAxios';
+
 import SiteMetadata from '../../components/SiteMetadata';
 import BaseLayout from '../../components/_layouts/Base';
 import Hero from '../../components/token-page/Hero';
@@ -24,6 +26,13 @@ const TokensPage = () => {
   const { t } = useTranslation();
   const { language } = useI18next();
 
+  const [data, loading, error] = useAxios('https://status.joystream.org/landing-page-data');
+
+  const updatedPriceData = {
+    price: data?.price ?? 0,
+    error: error,
+  };
+
   return (
     <BaseLayout className="TokensPage" t={t}>
       <SiteMetadata
@@ -32,7 +41,7 @@ const TokensPage = () => {
         description={t('token.siteMetadata.description')}
       />
 
-      <Hero t={t} />
+      <Hero t={t} tokenomicsData={data} priceData={updatedPriceData} />
 
       <Wallets t={t} />