Implement changenow section

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

@@ -0,0 +1,50 @@
+import React, { useEffect } from 'react';
+
+import { ReactComponent as LockIcon } from '../../../assets/svg/token/lock.svg';
+import { ReactComponent as InvisibilityIcon } from '../../../assets/svg/token/invisibility.svg';
+import { ReactComponent as ClockIcon } from '../../../assets/svg/token/clock.svg';
+import { ReactComponent as TokenIcon } from '../../../assets/svg/token/token.svg';
+
+import './style.scss';
+
+const Benefit = ({ icon, text }) => {
+  return (
+    <div className="TokenPage__instant-swap__main__benefits__item">
+      <div className="TokenPage__instant-swap__main__benefits__item__icon-wrapper">{icon}</div>
+      <p className="TokenPage__instant-swap__main__benefits__item__text">{text}</p>
+    </div>
+  );
+};
+
+const InstantSwap = ({ t }) => {
+  return (
+    <section className="TokenPage__instant-swap-wrapper" id="instantSwap">
+      <div className="TokenPage__instant-swap">
+        <header className="TokenPage__instant-swap__header">
+          <span className="TokenPage__instant-swap__header__section-title">{t('token.instantSwap.sectionTitle')}</span>
+          <h2 className="TokenPage__instant-swap__header__title">{t('token.instantSwap.title')}</h2>
+          <p className="TokenPage__instant-swap__header__subtitle">{t('token.instantSwap.subtitle')}</p>
+        </header>
+
+        <div className="TokenPage__instant-swap__main">
+          <div className="TokenPage__instant-swap__main__benefits">
+            <Benefit icon={<LockIcon />} text={t('token.instantSwap.benefits.noSignUp')} />
+            <Benefit icon={<InvisibilityIcon />} text={t('token.instantSwap.benefits.noKYC')} />
+            <Benefit icon={<ClockIcon />} text={t('token.instantSwap.benefits.onlyFewMinutes')} />
+            <Benefit icon={<TokenIcon />} text={t('token.instantSwap.benefits.nineHundredPlusCryptoSupported')} />
+          </div>
+          <div className="TokenPage__instant-swap__main__widget">
+            <iframe
+              title="changenow-widget"
+              id="iframe-widget"
+              src="https://changenow.io/embeds/exchange-widget/v2/widget.html?FAQ=true&amount=1&amountFiat&backgroundColor=272D33&darkMode=true&from=eth&horizontal=false&isFiat=false&lang=en-US&link_id=836b188968aaa8&locales=false&logo=true&primaryColor=4038FF&to=joy&toTheMoon=false"
+              style={{ height: '356px', width: '100%', border: 'none' }}
+            ></iframe>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default InstantSwap;

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

@@ -0,0 +1,147 @@
+@import '../../../styles/_main.scss';
+@import '../../../pages/style.scss';
+
+.TokenPage {
+  &__instant-swap-wrapper {
+    padding: 96px 0;
+    background-color: #000;
+  }
+
+  &__instant-swap {
+    @extend %container;
+
+    &__header {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      max-width: 816px;
+      margin: 0 auto;
+
+      &__section-title {
+        @include section-title;
+
+        margin: 0 auto;
+        color: $c_blue-ribbon;
+      }
+
+      &__title {
+        @include h3;
+
+        margin-top: 4px;
+        color: #f4f6f8;
+        text-align: center;
+      }
+
+      &__subtitle {
+        @include base-1;
+
+        margin-top: 16px;
+        color: #b5c1c9;
+        text-align: center;
+      }
+    }
+
+    &__main {
+      display: grid;
+      height: 528px;
+      margin-top: 96px;
+      gap: 24px;
+      grid-template-columns: 1fr 1fr;
+
+      &__benefits {
+        display: grid;
+        gap: 24px;
+        grid-template-rows: repeat(4, 1fr);
+
+        &__item {
+          display: flex;
+          align-items: center;
+          padding: 32px 24px;
+          background-color: #111316;
+          border-radius: 8px;
+
+          &__icon-wrapper {
+            display: grid;
+            width: 48px;
+            height: 48px;
+            background-color: #1f252e;
+            border-radius: 999px;
+            place-items: center;
+          }
+
+          &__text {
+            @include h6;
+
+            margin-left: 24px;
+            color: #fff;
+          }
+        }
+      }
+
+      &__widget {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+      }
+    }
+  }
+
+  @media #{$screen-max-md} {
+    &__instant-swap {
+      &__main {
+        display: flex;
+        flex-direction: column;
+        height: auto;
+        max-width: 585px;
+        margin: 96px auto 0;
+      }
+    }
+  }
+
+  @media #{$screen-max-sm} {
+    &__instant-swap-wrapper {
+      padding: 80px 0;
+    }
+
+    &__instant-swap {
+      &__header {
+        &__title {
+          @include h4;
+        }
+
+        &__subtitle {
+          @include base-3;
+        }
+      }
+
+      &__main {
+        margin-top: 48px;
+        gap: 12px;
+
+        &__benefits {
+          gap: 12px;
+
+          &__item {
+            padding: 24px 16px;
+
+            &__icon-wrapper {
+              width: 32px;
+              height: 32px;
+
+              & > svg {
+                transform: scale(.8);
+              }
+            }
+
+            &__text {
+              @include h7;
+
+              margin-left: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/html.js

@@ -14,6 +14,11 @@ export default function HTML(props) {
           href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@600;700&display=swap"
           rel="stylesheet"
         />
+        <script
+          defer
+          type="text/javascript"
+          src="https://changenow.io/embeds/exchange-widget/v2/stepper-connector.js"
+        ></script>
         {props.headComponents}
       </head>
       <body {...props.bodyAttributes}>

src/locales/en/token.json

@@ -59,6 +59,17 @@
       "featured": "FEATURED",
       "visit": "Visit"
     },
+    "instantSwap": {
+      "sectionTitle": "INSTANT SWAP",
+      "title": "Instantly buy or sell JOY",
+      "subtitle": "Buy or sell JOY tokens effortlessly using the ChangeNOW extension.",
+      "benefits": {
+        "noSignUp": "No sign up",
+        "noKYC": "No KYC",
+        "onlyFewMinutes": "Only 2-3 minutes",
+        "nineHundredPlusCryptoSupported": "900+ cryptos supported"
+      }
+    },
     "exchanges": {
       "sectionTitle": "EXCHANGES",
       "title": "Where can you buy and sell JOY?",

src/locales/es/token.json

@@ -59,6 +59,17 @@
       "featured": "FEATURED",
       "visit": "Visit"
     },
+    "instantSwap": {
+      "sectionTitle": "INSTANT SWAP",
+      "title": "Instantly buy or sell JOY",
+      "subtitle": "Buy or sell JOY tokens effortlessly using the ChangeNOW extension.",
+      "benefits": {
+        "noSignUp": "No sign up",
+        "noKYC": "No KYC",
+        "onlyFewMinutes": "Only 2-3 minutes",
+        "nineHundredPlusCryptoSupported": "900+ cryptos supported"
+      }
+    },
     "exchanges": {
       "sectionTitle": "EXCHANGES",
       "title": "Where can you buy and sell JOY?",

src/locales/fr/token.json

@@ -59,6 +59,17 @@
       "featured": "FEATURED",
       "visit": "Visit"
     },
+    "instantSwap": {
+      "sectionTitle": "INSTANT SWAP",
+      "title": "Instantly buy or sell JOY",
+      "subtitle": "Buy or sell JOY tokens effortlessly using the ChangeNOW extension.",
+      "benefits": {
+        "noSignUp": "No sign up",
+        "noKYC": "No KYC",
+        "onlyFewMinutes": "Only 2-3 minutes",
+        "nineHundredPlusCryptoSupported": "900+ cryptos supported"
+      }
+    },
     "exchanges": {
       "sectionTitle": "EXCHANGES",
       "title": "Where can you buy and sell JOY?",

src/locales/ru/token.json

@@ -59,6 +59,17 @@
       "featured": "FEATURED",
       "visit": "Visit"
     },
+    "instantSwap": {
+      "sectionTitle": "INSTANT SWAP",
+      "title": "Instantly buy or sell JOY",
+      "subtitle": "Buy or sell JOY tokens effortlessly using the ChangeNOW extension.",
+      "benefits": {
+        "noSignUp": "No sign up",
+        "noKYC": "No KYC",
+        "onlyFewMinutes": "Only 2-3 minutes",
+        "nineHundredPlusCryptoSupported": "900+ cryptos supported"
+      }
+    },
     "exchanges": {
       "sectionTitle": "EXCHANGES",
       "title": "Where can you buy and sell JOY?",

src/locales/zh/token.json

@@ -59,6 +59,17 @@
       "featured": "FEATURED",
       "visit": "Visit"
     },
+    "instantSwap": {
+      "sectionTitle": "INSTANT SWAP",
+      "title": "Instantly buy or sell JOY",
+      "subtitle": "Buy or sell JOY tokens effortlessly using the ChangeNOW extension.",
+      "benefits": {
+        "noSignUp": "No sign up",
+        "noKYC": "No KYC",
+        "onlyFewMinutes": "Only 2-3 minutes",
+        "nineHundredPlusCryptoSupported": "900+ cryptos supported"
+      }
+    },
     "exchanges": {
       "sectionTitle": "EXCHANGES",
       "title": "Where can you buy and sell JOY?",

src/pages/token/index.js

@@ -13,6 +13,7 @@ import Exchanges from '../../components/token-page/Exchanges';
 import Earn from '../../components/token-page/Earn';
 import Utility from '../../components/token-page/Utility';
 import Supply from '../../components/token-page/Supply';
+import InstantSwap from '../../components/token-page/InstantSwap';
 import TokenInformation from '../../components/token-page/TokenInformation';
 
 import ArrowLink from '../../components/ArrowLink';
@@ -49,6 +50,8 @@ const TokensPage = () => {
 
       <Exchanges t={t} />
 
+      <InstantSwap t={t} />
+
       <Earn t={t} />
 
       <Utility t={t} />