diff --git a/i18n/config.json b/i18n/config.json index 8564d5500b5..e4a014603cb 100644 --- a/i18n/config.json +++ b/i18n/config.json @@ -271,6 +271,14 @@ "langDir": "ltr", "dateFormat": "MM/DD/YYYY" }, + { + "code": "pcm", + "hrefLang": "pcm", + "name": "Nigerian Pidgin", + "localName": "Nigerian Pidgin", + "langDir": "ltr", + "dateFormat": "DD/MM/YYYY" + }, { "code": "ph", "hrefLang": "fil", @@ -392,9 +400,9 @@ "dateFormat": "MM/DD/YYYY" }, { - "code": "ur-in", - "hrefLang": "ur-in", - "name": "Urdu (India)", + "code": "ur", + "hrefLang": "ur", + "name": "Urdu", "localName": "اردو", "langDir": "rtl", "dateFormat": "MM/DD/YYYY" diff --git a/package.json b/package.json index 71dcff0cba7..18b40d71c40 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ethereum-org-website", - "version": "7.12.1", + "version": "7.12.2", "description": "Website of ethereum.org", "main": "index.js", "repository": "git@github.com:ethereum/ethereum-org-website.git", diff --git a/src/assets/wallets/enkrypt.png b/src/assets/wallets/enkrypt.png index 918ed68c764..8932222c698 100644 Binary files a/src/assets/wallets/enkrypt.png and b/src/assets/wallets/enkrypt.png differ diff --git a/src/components/EthExchanges/index.tsx b/src/components/EthExchanges/index.tsx new file mode 100644 index 00000000000..b3b02ca1af5 --- /dev/null +++ b/src/components/EthExchanges/index.tsx @@ -0,0 +1,187 @@ +import React from "react" +import { Box, Center, chakra, Flex, Heading, Text } from "@chakra-ui/react" + +import CardList from "../CardList" +import Link from "../Link" +import Emoji from "../Emoji" +import Translation from "../Translation" +import { StyledSelect as Select } from "../SharedStyledComponents" + +import { ChildOnlyProp } from "../../types" +import { useEthExchanges } from "./use-eth-exchanges" + +const ListContainer = (props: ChildOnlyProp) => ( + +) + +const ResultsContainer = (props: ChildOnlyProp) => ( + *": { + _first: { + mr: { base: 0, md: 6 }, + }, + }, + }} + {...props} + /> +) + +const EmptyStateContainer = (props: ChildOnlyProp) => ( +
+) + +const SuccessContainer = (props: ChildOnlyProp) => ( + +) + +const EmptyStateText = (props: ChildOnlyProp) => ( + +) + +const StyledSelect = chakra(Select, { + baseStyle: { + maxW: "container.sm", + }, +}) + +const NoResults = ({ children }) => ( + + + + {children}{" "} + website@ethereum.org. + + +) + +const NoResultsSingle = ({ children }) => ( +
+ + {children}{" "} + website@ethereum.org. + + +
+) + +// TODO move component into get-eth.js page? +const EthExchanges = () => { + const { + exchangesByCountry, + handleSelectChange, + hasSelectedCountry, + placeholderString, + t, + hasExchangeResults, + hasWalletResults, + filteredExchanges, + filteredWallets, + lastUpdated, + } = useEthExchanges() + + return ( + + + + + + + + + {!hasSelectedCountry && ( + + + + + + + )} + {/* No results */} + {hasSelectedCountry && !hasExchangeResults && !hasWalletResults && ( + + + + + + )} + {/* Has results */} + {(hasExchangeResults || hasWalletResults) && ( + <> + + + + + + {hasExchangeResults && ( + + + + + + + )} + {!hasExchangeResults && ( + + + + )} + + + + + + + {hasWalletResults && ( + + + {" "} + + + + . + + + + )} + {!hasWalletResults && ( + + + + )} + + + + {" "} + website@ethereum.org.{" "} + {" "} + {lastUpdated} + + + )} + + ) +} + +export default EthExchanges diff --git a/src/components/EthExchanges.tsx b/src/components/EthExchanges/use-eth-exchanges.ts similarity index 72% rename from src/components/EthExchanges.tsx rename to src/components/EthExchanges/use-eth-exchanges.ts index e7c257f8385..ff2898df3e9 100644 --- a/src/components/EthExchanges.tsx +++ b/src/components/EthExchanges/use-eth-exchanges.ts @@ -1,126 +1,12 @@ -import React, { useState } from "react" +import { useState } from "react" import { useStaticQuery, graphql } from "gatsby" import { IGatsbyImageData } from "gatsby-plugin-image" import { useI18next, useTranslation } from "gatsby-plugin-react-i18next" -import styled from "@emotion/styled" -import CardList from "./CardList" -import Link from "./Link" -import Emoji from "./OldEmoji" -import Translation from "./Translation" -import { StyledSelect as Select } from "./SharedStyledComponents" - -import { getLocaleTimestamp } from "../utils/time" -import { trackCustomEvent } from "../utils/matomo" -import { getImage, ImageDataLike } from "../utils/image" -import { Lang } from "../utils/languages" - -const Container = styled.div` - width: 100%; - display: flex; - flex-direction: column; - align-items: center; -` - -const ListContainer = styled.div` - margin-top: 4rem; - flex: 1 1 50%; - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - flex: 1 1 100%; - } -` - -const ResultsContainer = styled.div` - display: flex; - justify-content: center; - width: 100%; - max-width: 876px; - - ${ListContainer}:first-child { - margin-right: 1.5rem; - } - - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - flex-wrap: wrap; - ${ListContainer}:first-child { - margin-right: 0; - } - } -` - -const EmptyStateContainer = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 4rem; -` - -const EmptyStateContainerSingle = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 1.5rem; -` - -const SuccessContainer = styled.div` - display: flex; - flex-direction: column; - margin-top: 1rem; -` - -const EmptyStateText = styled.p` - margin: 2rem; - font-size: 1.25rem; - max-width: 450px; - text-align: center; -` - -const EmptyStateTextSingle = styled.p` - max-width: 450px; - margin-bottom: 4rem; -` - -const Intro = styled.p` - font-size: 1rem; - line-height: 140%; - margin-top: 0rem; - margin-bottom: 2rem; - max-width: 640px; - text-align: center; -` - -const Disclaimer = styled.p` - width: 100%; - max-width: 876px; - margin-top: 4rem; - margin-bottom: 0; -` - -const StyledSelect = styled(Select)` - max-width: 640px; -` - -const NoResults = ({ children }) => ( - - - - {children}{" "} - website@ethereum.org. - - -) - -const NoResultsSingle = ({ children }) => ( - - - {children}{" "} - website@ethereum.org. - - - -) +import { getLocaleTimestamp } from "../../utils/time" +import { trackCustomEvent } from "../../utils/matomo" +import { getImage, ImageDataLike } from "../../utils/image" +import { Lang } from "../../utils/languages" export const cardListImage = graphql` fragment cardListImage on File { @@ -211,8 +97,7 @@ interface State { selectedCountry?: ExchangeByCountry } -// TODO move component into get-eth.js page? -const EthExchanges = () => { +export const useEthExchanges = () => { const { language } = useI18next() const { t } = useTranslation() const [state, setState] = useState() @@ -706,94 +591,16 @@ const EthExchanges = () => { const hasExchangeResults = filteredExchanges.length > 0 const hasWalletResults = filteredWallets.length > 0 - return ( - -

- -

- - - - - {!hasSelectedCountry && ( - - - - - - - )} - {/* No results */} - {hasSelectedCountry && !hasExchangeResults && !hasWalletResults && ( - - - - - - )} - {/* Has results */} - {(hasExchangeResults || hasWalletResults) && ( - <> - - -

- -

- {hasExchangeResults && ( - -

- -

- - - )} - {!hasExchangeResults && ( - - - - )} - - -

- -

- - {hasWalletResults && ( - -

- {" "} - - - - . -

- - - )} - {!hasWalletResults && ( - - - - )} - - - - {" "} - website@ethereum.org.{" "} - {" "} - {lastUpdated} - - - )} - - ) + return { + t, + exchangesByCountry, + handleSelectChange, + placeholderString, + hasSelectedCountry, + hasExchangeResults, + hasWalletResults, + filteredExchanges, + filteredWallets, + lastUpdated, + } } - -export default EthExchanges diff --git a/src/components/Layer2/Layer2Onboard.tsx b/src/components/Layer2/Layer2Onboard.tsx index 8d661853b54..7cb438e955d 100644 --- a/src/components/Layer2/Layer2Onboard.tsx +++ b/src/components/Layer2/Layer2Onboard.tsx @@ -1,9 +1,19 @@ // Libraries import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image" import React, { useState } from "react" -import styled from "@emotion/styled" import { useTranslation } from "gatsby-plugin-react-i18next" -import { Stack, Text } from "@chakra-ui/react" +import { + Box, + chakra, + Flex, + Heading, + Img, + ListItem, + SimpleGrid, + Stack, + Text, + UnorderedList, +} from "@chakra-ui/react" // Components import ButtonLink from "../ButtonLink" @@ -20,153 +30,60 @@ import cexSupport from "../../data/layer-2/cex-layer-2-support.json" //Utils import { trackCustomEvent } from "../../utils/matomo" +import { ChildOnlyProp } from "../../types" // Styles -const Content = styled.div` - background: ${(props) => props.theme.colors.layer2Gradient}; - padding: 2.5rem; - border-radius: 2px; -` - -const Description = styled.div` - text-align: center; - max-width: 75ch; - margin: auto; -` - -const H3 = styled.h3` - margin-top: 0; -` - -const Flex50 = styled.div` - flex: 50%; - @media (max-width: ${({ theme }) => theme.breakpoints.m}) { - flex: 100%; - } -` - -const TwoColumnContent = styled.div` - display: flex; - justify-content: space-between; - gap: 2rem; - @media (max-width: ${({ theme }) => theme.breakpoints.l}) { - flex-direction: column; - align-items: flex-start; - margin-left: 0rem; - margin-right: 0rem; - } -` - -// https://react-select.com/styles#using-classnames -// Pass menuIsOpen to component to debug -const StyledSelect = styled(Select)` - max-width: none; - - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - .react-select__control { - padding: 14px 0; - } - } -` - -const SelectedContainer = styled.div` - background: rgba(255, 255, 255, 0.02); - margin-top: 0.5rem; - padding: 21px; -` - -const ButtonLinkMargin = styled(ButtonLink)` - margin-top: 2.5rem; -` - -const Grid = styled.div` - display: grid; - grid-template-columns: repeat(21, 1fr); - gap: 10px; - - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - grid-template-columns: repeat(11, 1fr); - margin: auto; - } -` - -const LeftDescription = styled.div` - grid-column: 1/11; - grid-row: 1; - - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - grid-column: 1/12; - grid-row: 1; - } -` - -const LeftSelect = styled.div` - grid-column: 1/11; - grid-row: 2; - - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - grid-column: 1/12; - grid-row: 2; - } -` - -const RightDescription = styled.div` - grid-column: 12/22; - grid-row: 1; - - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - grid-column: 1/12; - grid-row: 5; - } -` - -const RightSelect = styled.div` - grid-column: 12/22; - grid-row: 2; - - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - grid-column: 1/12; - grid-row: 6; - } -` - -const LeftSelected = styled.div` - grid-column: 1/11; - grid-row: 3/6; - - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - grid-column: 1/12; - grid-row: 3; - } -` - -const EthLogo = styled.div` - grid-column: 11; - grid-row: 4; - - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - grid-column: 1/12; - grid-row: 4; - } -` - -const Image = styled(GatsbyImage)` - width: 100%; - - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - margin-top: 1.5rem; - } -` - -const RightSelected = styled.div` - grid-column: 12/22; - grid-row: 3/6; - - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - grid-column: 1/12; - grid-row: 7; - } -` +const Flex50 = (props: ChildOnlyProp) => ( + +) + +const TwoColumnContent = (props: ChildOnlyProp) => ( + +) + +const ChakraSelect = chakra((props: { className?: string }) => ( +