From 393653d99eaa37b41ef09af75bf020c1d3e2138a Mon Sep 17 00:00:00 2001 From: Edvin Dzidic Date: Fri, 22 Mar 2024 22:44:13 +0100 Subject: [PATCH 1/2] Initial work on desktop changenow section --- src/assets/svg/token/clock.svg | 3 + src/assets/svg/token/invisibility.svg | 5 ++ src/assets/svg/token/lock.svg | 3 + src/assets/svg/token/token.svg | 3 + .../token-page/InstantSwap/index.js | 48 +++++++++++ .../token-page/InstantSwap/style.scss | 82 +++++++++++++++++++ src/html.js | 5 ++ src/locales/en/token.json | 5 ++ src/locales/es/token.json | 5 ++ src/locales/fr/token.json | 5 ++ src/locales/ru/token.json | 5 ++ src/locales/zh/token.json | 5 ++ src/pages/token/index.js | 3 + 13 files changed, 177 insertions(+) create mode 100644 src/assets/svg/token/clock.svg create mode 100644 src/assets/svg/token/invisibility.svg create mode 100644 src/assets/svg/token/lock.svg create mode 100644 src/assets/svg/token/token.svg create mode 100644 src/components/token-page/InstantSwap/index.js create mode 100644 src/components/token-page/InstantSwap/style.scss diff --git a/src/assets/svg/token/clock.svg b/src/assets/svg/token/clock.svg new file mode 100644 index 000000000..59136b66c --- /dev/null +++ b/src/assets/svg/token/clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/token/invisibility.svg b/src/assets/svg/token/invisibility.svg new file mode 100644 index 000000000..aa6d79377 --- /dev/null +++ b/src/assets/svg/token/invisibility.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/token/lock.svg b/src/assets/svg/token/lock.svg new file mode 100644 index 000000000..e17edcc1d --- /dev/null +++ b/src/assets/svg/token/lock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/token/token.svg b/src/assets/svg/token/token.svg new file mode 100644 index 000000000..fcca85b11 --- /dev/null +++ b/src/assets/svg/token/token.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/token-page/InstantSwap/index.js b/src/components/token-page/InstantSwap/index.js new file mode 100644 index 000000000..26e43d1f6 --- /dev/null +++ b/src/components/token-page/InstantSwap/index.js @@ -0,0 +1,48 @@ +import React 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 ( +
+
{icon}
+

{text}

+
+ ); +}; + +const InstantSwap = ({ t }) => { + return ( +
+
+
+ {t('token.instantSwap.sectionTitle')} +

{t('token.instantSwap.title')}

+

{t('token.instantSwap.subtitle')}

+
+ +
+
+ } text="No sign up" /> + } text="No KYC" /> + } text="Only 2-3 minutes" /> + } text="900+ cryptos supported" /> +
+ +
+
+
+ ); +}; + +export default InstantSwap; diff --git a/src/components/token-page/InstantSwap/style.scss b/src/components/token-page/InstantSwap/style.scss new file mode 100644 index 000000000..2a51ee51e --- /dev/null +++ b/src/components/token-page/InstantSwap/style.scss @@ -0,0 +1,82 @@ +@import '../../../styles/_main.scss'; +@import '../../../pages/style.scss'; + +.TokenPage { + &__instant-swap-wrapper { + padding: 96px 0; + background-color: #000; + } + + &__instant-swap { + @extend %largeContainer; + + &__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 1.2fr; + + &__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; + } + } + } + } + } +} diff --git a/src/html.js b/src/html.js index 566201e82..d55dbbb9a 100644 --- a/src/html.js +++ b/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" /> + {props.headComponents} diff --git a/src/locales/en/token.json b/src/locales/en/token.json index 73281582f..56879e807 100644 --- a/src/locales/en/token.json +++ b/src/locales/en/token.json @@ -59,6 +59,11 @@ "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." + }, "exchanges": { "sectionTitle": "EXCHANGES", "title": "Where can you buy and sell JOY?", diff --git a/src/locales/es/token.json b/src/locales/es/token.json index 73281582f..56879e807 100644 --- a/src/locales/es/token.json +++ b/src/locales/es/token.json @@ -59,6 +59,11 @@ "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." + }, "exchanges": { "sectionTitle": "EXCHANGES", "title": "Where can you buy and sell JOY?", diff --git a/src/locales/fr/token.json b/src/locales/fr/token.json index 73281582f..56879e807 100644 --- a/src/locales/fr/token.json +++ b/src/locales/fr/token.json @@ -59,6 +59,11 @@ "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." + }, "exchanges": { "sectionTitle": "EXCHANGES", "title": "Where can you buy and sell JOY?", diff --git a/src/locales/ru/token.json b/src/locales/ru/token.json index 73281582f..56879e807 100644 --- a/src/locales/ru/token.json +++ b/src/locales/ru/token.json @@ -59,6 +59,11 @@ "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." + }, "exchanges": { "sectionTitle": "EXCHANGES", "title": "Where can you buy and sell JOY?", diff --git a/src/locales/zh/token.json b/src/locales/zh/token.json index 73281582f..56879e807 100644 --- a/src/locales/zh/token.json +++ b/src/locales/zh/token.json @@ -59,6 +59,11 @@ "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." + }, "exchanges": { "sectionTitle": "EXCHANGES", "title": "Where can you buy and sell JOY?", diff --git a/src/pages/token/index.js b/src/pages/token/index.js index fb179f69e..a33480556 100644 --- a/src/pages/token/index.js +++ b/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 = () => { + + From 9ccc4c33de2158a7d5ded026637527f2bbed6a3b Mon Sep 17 00:00:00 2001 From: Edvin Dzidic Date: Sat, 23 Mar 2024 17:09:50 +0100 Subject: [PATCH 2/2] Finish implementing changenow section, add text to translation locale files --- .../token-page/InstantSwap/index.js | 24 ++++--- .../token-page/InstantSwap/style.scss | 69 ++++++++++++++++++- src/locales/en/token.json | 8 ++- src/locales/es/token.json | 8 ++- src/locales/fr/token.json | 8 ++- src/locales/ru/token.json | 8 ++- src/locales/zh/token.json | 8 ++- 7 files changed, 115 insertions(+), 18 deletions(-) diff --git a/src/components/token-page/InstantSwap/index.js b/src/components/token-page/InstantSwap/index.js index 26e43d1f6..ffc35b68f 100644 --- a/src/components/token-page/InstantSwap/index.js +++ b/src/components/token-page/InstantSwap/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +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'; @@ -28,17 +28,19 @@ const InstantSwap = ({ t }) => {
- } text="No sign up" /> - } text="No KYC" /> - } text="Only 2-3 minutes" /> - } text="900+ cryptos supported" /> + } text={t('token.instantSwap.benefits.noSignUp')} /> + } text={t('token.instantSwap.benefits.noKYC')} /> + } text={t('token.instantSwap.benefits.onlyFewMinutes')} /> + } text={t('token.instantSwap.benefits.nineHundredPlusCryptoSupported')} /> +
+
+
-
diff --git a/src/components/token-page/InstantSwap/style.scss b/src/components/token-page/InstantSwap/style.scss index 2a51ee51e..b8bd05f20 100644 --- a/src/components/token-page/InstantSwap/style.scss +++ b/src/components/token-page/InstantSwap/style.scss @@ -8,7 +8,7 @@ } &__instant-swap { - @extend %largeContainer; + @extend %container; &__header { display: flex; @@ -46,7 +46,7 @@ height: 528px; margin-top: 96px; gap: 24px; - grid-template-columns: 1fr 1.2fr; + grid-template-columns: 1fr 1fr; &__benefits { display: grid; @@ -77,6 +77,71 @@ } } } + + &__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; + } + } + } + } } } } diff --git a/src/locales/en/token.json b/src/locales/en/token.json index 56879e807..2719e0f8a 100644 --- a/src/locales/en/token.json +++ b/src/locales/en/token.json @@ -62,7 +62,13 @@ "instantSwap": { "sectionTitle": "INSTANT SWAP", "title": "Instantly buy or sell JOY", - "subtitle": "Buy or sell JOY tokens effortlessly using the ChangeNOW extension." + "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", diff --git a/src/locales/es/token.json b/src/locales/es/token.json index 56879e807..2719e0f8a 100644 --- a/src/locales/es/token.json +++ b/src/locales/es/token.json @@ -62,7 +62,13 @@ "instantSwap": { "sectionTitle": "INSTANT SWAP", "title": "Instantly buy or sell JOY", - "subtitle": "Buy or sell JOY tokens effortlessly using the ChangeNOW extension." + "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", diff --git a/src/locales/fr/token.json b/src/locales/fr/token.json index 56879e807..2719e0f8a 100644 --- a/src/locales/fr/token.json +++ b/src/locales/fr/token.json @@ -62,7 +62,13 @@ "instantSwap": { "sectionTitle": "INSTANT SWAP", "title": "Instantly buy or sell JOY", - "subtitle": "Buy or sell JOY tokens effortlessly using the ChangeNOW extension." + "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", diff --git a/src/locales/ru/token.json b/src/locales/ru/token.json index 56879e807..2719e0f8a 100644 --- a/src/locales/ru/token.json +++ b/src/locales/ru/token.json @@ -62,7 +62,13 @@ "instantSwap": { "sectionTitle": "INSTANT SWAP", "title": "Instantly buy or sell JOY", - "subtitle": "Buy or sell JOY tokens effortlessly using the ChangeNOW extension." + "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", diff --git a/src/locales/zh/token.json b/src/locales/zh/token.json index 56879e807..2719e0f8a 100644 --- a/src/locales/zh/token.json +++ b/src/locales/zh/token.json @@ -62,7 +62,13 @@ "instantSwap": { "sectionTitle": "INSTANT SWAP", "title": "Instantly buy or sell JOY", - "subtitle": "Buy or sell JOY tokens effortlessly using the ChangeNOW extension." + "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",