+ className?: string
+}
+
+// Styles
const Content = styled.div`
margin-bottom: 1.45rem;
@@ -22,7 +27,7 @@ const Content = styled.div`
position: absolute;
top: -2px; /* adjusts circle + number up and down */
left: -3rem;
- width: ${({ size }) => (size ? size : "35px")};
+ width: 35px;
aspect-ratio: 1;
height: 2rem;
padding-top: 7px; /* adjusts number up and down */
@@ -33,9 +38,9 @@ const Content = styled.div`
}
`
-// listData should be a list of strings, or HTML components
+// `listData` should be a list of strings, or HTML components
// ex: [string
] or ['string']
-const OrderedList = ({ listData, className }) => {
+const OrderedList: React.FC = ({ listData, className }) => {
return (
diff --git a/src/components/Pill.js b/src/components/Pill.tsx
similarity index 84%
rename from src/components/Pill.js
rename to src/components/Pill.tsx
index ba41d61cf51..f37509305a9 100644
--- a/src/components/Pill.js
+++ b/src/components/Pill.tsx
@@ -27,8 +27,18 @@ const Secondary = styled.div`
font-size: 0.75rem;
border-radius: 0.25rem;
`
+export interface IProps {
+ className?: string
+ isSecondary?: boolean
+ color: string
+}
-const Pill = ({ children, className, isSecondary, color }) => {
+const Pill: React.FC = ({
+ children,
+ className,
+ isSecondary,
+ color,
+}) => {
return isSecondary ? (
{children}
) : (
diff --git a/src/components/Staking/StakingCommunityCallout.js b/src/components/Staking/StakingCommunityCallout.tsx
similarity index 96%
rename from src/components/Staking/StakingCommunityCallout.js
rename to src/components/Staking/StakingCommunityCallout.tsx
index e02c000000f..31b04db92b2 100644
--- a/src/components/Staking/StakingCommunityCallout.js
+++ b/src/components/Staking/StakingCommunityCallout.tsx
@@ -29,7 +29,11 @@ const StyledButtonLink = styled(ButtonLink)`
}
`
-const StakingCommunityCallout = (props) => {
+export interface IProps {
+ id?: string
+}
+
+const StakingCommunityCallout: React.FC = (props) => {
const intl = useIntl()
const { image } = useStaticQuery(graphql`
{
diff --git a/src/components/Staking/StakingComparison.js b/src/components/Staking/StakingComparison.tsx
similarity index 85%
rename from src/components/Staking/StakingComparison.js
rename to src/components/Staking/StakingComparison.tsx
index f02dbb7fbb9..011475e4b9c 100644
--- a/src/components/Staking/StakingComparison.js
+++ b/src/components/Staking/StakingComparison.tsx
@@ -4,7 +4,8 @@ import styled, { ThemeContext } from "styled-components"
import Link from "../Link"
import Translation from "../Translation"
-import { trackCustomEvent } from "../../utils/matomo"
+import { EventOptions, trackCustomEvent } from "../../utils/matomo"
+import { TranslationKey } from "../../utils/translations"
import SoloGlyph from "../../assets/staking/staking-glyph-cpu.svg"
import SaasGlyph from "../../assets/staking/staking-glyph-cloud.svg"
@@ -64,11 +65,27 @@ const StyledPoolGlyph = styled(PoolGlyph)`
}
`
-const StakingComparison = ({ page, className }) => {
+interface DataType {
+ title: TranslationKey
+ linkText: TranslationKey
+ to: string
+ matomo: EventOptions
+ color: any
+ glyph: any
+}
+
+type StakingTypePage = "solo" | "saas" | "pools"
+
+export interface IProps {
+ page: StakingTypePage
+ className?: string
+}
+
+const StakingComparison: React.FC = ({ page, className }) => {
const themeContext = useContext(ThemeContext)
const { stakingGold, stakingGreen, stakingBlue } = themeContext.colors
- const solo = {
+ const solo: DataType = {
title: "page-staking-dropdown-solo",
linkText: "page-staking-learn-more-solo",
to: "/staking/solo/",
@@ -80,7 +97,7 @@ const StakingComparison = ({ page, className }) => {
color: stakingGold,
glyph: ,
}
- const saas = {
+ const saas: DataType = {
title: "page-staking-saas-with-abbrev",
linkText: "page-staking-learn-more-saas",
to: "/staking/saas/",
@@ -92,7 +109,7 @@ const StakingComparison = ({ page, className }) => {
color: stakingGreen,
glyph: ,
}
- const pools = {
+ const pools: DataType = {
title: "page-staking-dropdown-pools",
linkText: "page-staking-learn-more-pools",
to: "/staking/pools/",
@@ -104,7 +121,11 @@ const StakingComparison = ({ page, className }) => {
color: stakingBlue,
glyph: ,
}
- const data = {
+ const data: {
+ [key in StakingTypePage]: (DataType & {
+ content: TranslationKey
+ })[]
+ } = {
solo: [
{
...saas,
@@ -136,6 +157,7 @@ const StakingComparison = ({ page, className }) => {
},
],
}
+
const selectedData = data[page]
return (
diff --git a/src/components/Staking/StakingConsiderations.js b/src/components/Staking/StakingConsiderations.tsx
similarity index 96%
rename from src/components/Staking/StakingConsiderations.js
rename to src/components/Staking/StakingConsiderations.tsx
index df0e6be6ab3..7a9e93c97ee 100644
--- a/src/components/Staking/StakingConsiderations.js
+++ b/src/components/Staking/StakingConsiderations.tsx
@@ -17,7 +17,8 @@ import LiquidityToken from "../../assets/staking/liquidity-token.svg"
// Component imports
import ButtonDropdown from "../ButtonDropdown"
import Translation from "../Translation"
-import { trackCustomEvent } from "../../utils/matomo"
+import { EventOptions, trackCustomEvent } from "../../utils/matomo"
+import { TranslationKey } from "../../utils/translations"
const Container = styled.div`
display: flex;
@@ -41,7 +42,7 @@ const List = styled.div`
// TODO: Make mobile responsive
-const ListItem = styled.li`
+const ListItem = styled.li<{ active: boolean }>`
padding: 0.125rem 0.5rem;
cursor: pointer;
box-sizing: border-box;
@@ -116,7 +117,17 @@ const Indicator = styled.div`
}
`
-const data = {
+type DataType = {
+ title: TranslationKey
+ description: TranslationKey
+ valid: TranslationKey
+ caution: TranslationKey | ""
+ warning: TranslationKey
+ Svg: any
+ matomo: EventOptions
+}
+
+const data: { [key in "solo" | "saas" | "pools"]: DataType[] } = {
solo: [
{
title: "page-staking-considerations-solo-1-title",
@@ -437,7 +448,11 @@ const data = {
],
}
-const StakingConsiderations = ({ page }) => {
+export interface IProps {
+ page: "solo" | "saas" | "pools"
+}
+
+const StakingConsiderations: React.FC = ({ page }) => {
const [activeIndex, setActiveIndex] = useState(0)
const pageData = data[page]
@@ -453,7 +468,7 @@ const StakingConsiderations = ({ page }) => {
})),
}
- const handleSelection = (idx) => {
+ const handleSelection = (idx: number): void => {
setActiveIndex(idx)
}
diff --git a/src/components/Staking/StakingGuides.js b/src/components/Staking/StakingGuides.tsx
similarity index 91%
rename from src/components/Staking/StakingGuides.js
rename to src/components/Staking/StakingGuides.tsx
index 0eef51d7e8a..782214bcb80 100644
--- a/src/components/Staking/StakingGuides.js
+++ b/src/components/Staking/StakingGuides.tsx
@@ -11,7 +11,9 @@ const StyledCardList = styled(CardList)`
gap: 1rem;
`
-const StakingGuides = () => {
+export interface IProps {}
+
+const StakingGuides: React.FC = () => {
const guides = [
{
title: "CoinCashew's Ethereum 2.0 Guide",
diff --git a/src/components/Staking/StakingHierarchy.js b/src/components/Staking/StakingHierarchy.tsx
similarity index 95%
rename from src/components/Staking/StakingHierarchy.js
rename to src/components/Staking/StakingHierarchy.tsx
index 40866f86246..346218fb9fc 100644
--- a/src/components/Staking/StakingHierarchy.js
+++ b/src/components/Staking/StakingHierarchy.tsx
@@ -50,16 +50,18 @@ const Container = styled.div`
}
`
-const Section = styled.div`
+const Section = styled.div<{
+ number: number
+}>`
--color: ${({ number, theme }) => {
switch (number) {
- case "1":
+ case 1:
return theme.colors.stakingGold
- case "2":
+ case 2:
return theme.colors.stakingGreen
- case "3":
+ case 3:
return theme.colors.stakingBlue
- case "4":
+ case 4:
return theme.colors.stakingRed
default:
return "#000000"
@@ -67,13 +69,13 @@ const Section = styled.div`
}};
--next-color: ${({ number, theme }) => {
switch (number) {
- case "1":
+ case 1:
return theme.colors.stakingGreen
- case "2":
+ case 2:
return theme.colors.stakingBlue
- case "3":
+ case 3:
return theme.colors.stakingRed
- case "4":
+ case 4:
return "#00000000"
default:
return "#000000"
@@ -81,13 +83,13 @@ const Section = styled.div`
}};
--fill-color: ${({ number, theme }) => {
switch (number) {
- case "1":
+ case 1:
return theme.colors.stakingGoldFill
- case "2":
+ case 2:
return theme.colors.stakingGreenFill
- case "3":
+ case 3:
return theme.colors.stakingBlueFill
- case "4":
+ case 4:
return theme.colors.stakingRedFill
default:
return "#000000"
@@ -220,7 +222,9 @@ const Ether = styled(FlexCentered)`
margin: 0 auto;
`
-const StyledEtherSvg = styled(EtherSvg)`
+const StyledEtherSvg = styled(EtherSvg)<{
+ size: string
+}>`
--size: ${({ size }) => size};
width: var(--size);
height: var(--size);
@@ -247,11 +251,12 @@ const Line = styled.aside`
display: none;
}
`
+export interface IProps {}
-const StakingHierarchy = () => {
+const StakingHierarchy: React.FC = () => {
return (
-
+
@@ -302,7 +307,7 @@ const StakingHierarchy = () => {
-
+
@@ -350,7 +355,7 @@ const StakingHierarchy = () => {
-
+
@@ -406,7 +411,7 @@ const StakingHierarchy = () => {
-
+
diff --git a/src/components/Staking/StakingHomeTableOfContents.js b/src/components/Staking/StakingHomeTableOfContents.tsx
similarity index 71%
rename from src/components/Staking/StakingHomeTableOfContents.js
rename to src/components/Staking/StakingHomeTableOfContents.tsx
index a25cb16750e..61b321c7a99 100644
--- a/src/components/Staking/StakingHomeTableOfContents.js
+++ b/src/components/Staking/StakingHomeTableOfContents.tsx
@@ -10,7 +10,18 @@ const StyledTableOfContentsLink = styled(Link)`
margin-bottom: 0.5rem !important;
`
-const TableOfContentsLink = ({ item: { id, title } }) => {
+interface Item {
+ id: string
+ title: string
+}
+
+interface ITableOfContentsLinkProps {
+ item: Item
+}
+
+const TableOfContentsLink: React.FC = ({
+ item: { id, title },
+}) => {
const url = `#${id}`
let isActive = false
if (typeof window !== `undefined`) {
@@ -56,22 +67,23 @@ const ListItem = styled.li`
margin: 0;
`
-const ItemsList = ({ items }) =>
- items.map((item, index) => (
-
-
-
- ))
+export interface IProps {
+ items: Array-
+}
-const StakingHomeTableOfContents = ({ items, className }) => {
+const StakingHomeTableOfContents: React.FC = ({ items }) => {
if (!items) return null
return (
-
+
+
+
)
}
@@ -265,7 +273,7 @@ const TranslatorAcknowledgements = ({ data, location }) => {
export default TranslatorAcknowledgements
export const query = graphql`
- query {
+ query TranslatorAcknowledgementsPage {
dogeComputer: file(relativePath: { eq: "doge-computer.png" }) {
childImageSharp {
gatsbyImageData(
diff --git a/src/pages/contributing/translation-program/contributors.js b/src/pages/contributing/translation-program/contributors.tsx
similarity index 72%
rename from src/pages/contributing/translation-program/contributors.js
rename to src/pages/contributing/translation-program/contributors.tsx
index e310271a28d..665024262cd 100644
--- a/src/pages/contributing/translation-program/contributors.js
+++ b/src/pages/contributing/translation-program/contributors.tsx
@@ -2,7 +2,8 @@
import React from "react"
import styled from "styled-components"
import { useIntl } from "gatsby-plugin-intl"
-import { graphql } from "gatsby"
+import { graphql, PageProps } from "gatsby"
+import type { Context } from "../../../types"
// Components
import Breadcrumbs from "../../../components/Breadcrumbs"
@@ -17,6 +18,7 @@ import {
// Utils
import { translateMessageId } from "../../../utils/translations"
+import FeedbackCard from "../../../components/FeedbackCard"
// Styles
const HorizontalUl = styled.ul`
@@ -40,22 +42,45 @@ const HorizontalUl = styled.ul`
}
`
-const Contributors = ({ data, location }) => {
+const Contributors = ({
+ data,
+ location,
+}: PageProps) => {
const intl = useIntl()
// TODO: Remove specific user checks once Acolad has updated their usernames
- const translatorData = data.allTimeData.data.filter(
- (item) =>
- item.user.username !== "ethdotorg" &&
- !item.user.username.includes("LQS_") &&
- !item.user.username.includes("REMOVED_USER") &&
- !item.user.username.includes("Aco_") &&
- !item.user.fullName.includes("Aco_") &&
- !item.user.username.includes("Acc_") &&
- !item.user.fullName.includes("Acc_") &&
- item.user.username !== "Finnish_Sandberg" &&
- item.user.username !== "Norwegian_Sandberg" &&
- item.user.username !== "Swedish_Sandberg"
- )
+ const translatorData =
+ data.allTimeData?.data?.flatMap(
+ // use flatMap to get cleaner object types withouts nulls
+ (item) => {
+ const user = item?.user
+ if (!user) return []
+
+ const userName = user.username
+ if (!userName) return []
+
+ const fullName = user.fullName ?? ""
+
+ return userName !== "ethdotorg" &&
+ !userName.includes("LQS_") &&
+ !userName.includes("REMOVED_USER") &&
+ !userName.includes("Aco_") &&
+ !fullName.includes("Aco_") &&
+ !userName.includes("Acc_") &&
+ !fullName.includes("Acc_") &&
+ userName !== "Finnish_Sandberg" &&
+ userName !== "Norwegian_Sandberg" &&
+ userName !== "Swedish_Sandberg"
+ ? [
+ {
+ user: {
+ username: userName,
+ fullName: fullName,
+ },
+ },
+ ]
+ : []
+ }
+ ) ?? []
return (
@@ -118,6 +143,9 @@ const Contributors = ({ data, location }) => {
.
+
+
+
)
}
@@ -125,7 +153,7 @@ const Contributors = ({ data, location }) => {
export default Contributors
export const query = graphql`
- query {
+ query ContributorsPage {
allTimeData: alltimeJson {
data {
user {
diff --git a/src/pages/developers/index.js b/src/pages/developers/index.js
index 24218d9ee25..0de74485366 100644
--- a/src/pages/developers/index.js
+++ b/src/pages/developers/index.js
@@ -18,6 +18,7 @@ import {
Page,
GrayContainer,
} from "../../components/SharedStyledComponents"
+import FeedbackCard from "../../components/FeedbackCard"
const HeroContainer = styled.div`
display: flex;
@@ -539,6 +540,7 @@ const DevelopersPage = ({ data }) => {
+
)
}
diff --git a/src/pages/developers/learning-tools.js b/src/pages/developers/learning-tools.js
index a44a64c374c..3ebb330a7b4 100644
--- a/src/pages/developers/learning-tools.js
+++ b/src/pages/developers/learning-tools.js
@@ -17,6 +17,7 @@ import {
CardGrid,
Page,
} from "../../components/SharedStyledComponents"
+import FeedbackCard from "../../components/FeedbackCard"
const StyledPage = styled(Page)`
margin-top: 4rem;
@@ -314,6 +315,9 @@ const LearningToolsPage = ({ data }) => {
+
+
+
)
}
diff --git a/src/pages/developers/local-environment.js b/src/pages/developers/local-environment.js
index 7bc383936b7..9b0b6067484 100644
--- a/src/pages/developers/local-environment.js
+++ b/src/pages/developers/local-environment.js
@@ -22,6 +22,7 @@ import {
Page,
// InfoBanner,
} from "../../components/SharedStyledComponents"
+import FeedbackCard from "../../components/FeedbackCard"
const StyledPage = styled(Page)`
margin-top: 4rem;
@@ -455,6 +456,9 @@ const ChooseStackPage = ({ data }) => {
))}
+
+
+
{/*
Create your own stack
diff --git a/src/pages/developers/tutorials.js b/src/pages/developers/tutorials.js
index d3c5b0e6432..a56e40f2d91 100644
--- a/src/pages/developers/tutorials.js
+++ b/src/pages/developers/tutorials.js
@@ -23,6 +23,7 @@ import {
import { getLocaleTimestamp, INVALID_DATETIME } from "../../utils/time"
import foreignTutorials from "../../data/externalTutorials.json"
+import FeedbackCard from "../../components/FeedbackCard"
const SubSlogan = styled.p`
font-size: 1.25rem;
@@ -472,6 +473,7 @@ const TutorialsPage = ({ data, pageContext }) => {
)
})}
+
)
}
diff --git a/src/pages/get-eth.js b/src/pages/get-eth.js
index 2b2c3a213c7..4ff7320cb58 100644
--- a/src/pages/get-eth.js
+++ b/src/pages/get-eth.js
@@ -23,6 +23,7 @@ import {
StyledCard,
TwoColumnContent,
} from "../components/SharedStyledComponents"
+import FeedbackCard from "../components/FeedbackCard"
const Subtitle = styled.div`
font-size: 1.25rem;
@@ -425,6 +426,7 @@ const GetETHPage = ({ data }) => {
+
)
}
diff --git a/src/pages/layer-2.js b/src/pages/layer-2.js
index ff38c6dfefd..b58f82b81de 100644
--- a/src/pages/layer-2.js
+++ b/src/pages/layer-2.js
@@ -774,6 +774,7 @@ const Layer2Page = ({ data }) => {
diff --git a/src/pages/run-a-node.js b/src/pages/run-a-node.js
index 428b444ff69..7f402848a89 100644
--- a/src/pages/run-a-node.js
+++ b/src/pages/run-a-node.js
@@ -416,12 +416,6 @@ const Leslie = styled(GatsbyImage)`
}
`
-const StyledFeedbackCard = styled(FeedbackCard)`
- width: 100%;
- max-width: 700px;
- margin: 0 2rem;
-`
-
const StrongParagraph = styled.p`
font-size: 150%;
font-weight: 600;
@@ -1018,9 +1012,9 @@ const RunANodePage = ({ data }) => {
-
+
+
+
)
}
diff --git a/src/pages/stablecoins.js b/src/pages/stablecoins.js
index 43a535e74e0..3e360987e70 100644
--- a/src/pages/stablecoins.js
+++ b/src/pages/stablecoins.js
@@ -27,6 +27,8 @@ import {
Page,
GradientContainer,
} from "../components/SharedStyledComponents"
+import FeedbackCard from "../components/FeedbackCard"
+
import { translateMessageId } from "../utils/translations"
import { getData } from "../utils/cache"
@@ -828,6 +830,9 @@ const StablecoinsPage = ({ data }) => {
+
+
+
)
}
diff --git a/src/pages/staking/deposit-contract.js b/src/pages/staking/deposit-contract.tsx
similarity index 56%
rename from src/pages/staking/deposit-contract.js
rename to src/pages/staking/deposit-contract.tsx
index 25b4e322697..eb3949872f2 100644
--- a/src/pages/staking/deposit-contract.js
+++ b/src/pages/staking/deposit-contract.tsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react"
import styled from "styled-components"
-import { graphql } from "gatsby"
+import { graphql, PageProps } from "gatsby"
import makeBlockie from "ethereum-blockies-base64"
import { getImage } from "gatsby-plugin-image"
import { useIntl } from "gatsby-plugin-intl"
@@ -22,10 +22,15 @@ import {
FakeLink,
} from "../../components/SharedStyledComponents"
import { DEPOSIT_CONTRACT_ADDRESS } from "../../data/addresses"
-import { translateMessageId } from "../../utils/translations"
+import { translateMessageId, TranslationKey } from "../../utils/translations"
+import type { Context } from "../../types"
+import FeedbackCard from "../../components/FeedbackCard"
const Page = styled.div`
width: 100%;
+`
+
+const Flex = styled.div`
display: flex;
border-bottom: 1px solid ${(props) => props.theme.colors.border};
@media (max-width: ${(props) => props.theme.breakpoints.l}) {
@@ -188,14 +193,25 @@ const StyledFakeLink = styled(FakeLink)`
margin-right: 0.5rem;
`
-const CHUNKED_ADDRESS = DEPOSIT_CONTRACT_ADDRESS.match(/.{1,3}/g).join(" ")
+const CHUNKED_ADDRESS = DEPOSIT_CONTRACT_ADDRESS.match(/.{1,3}/g)?.join(" ")
const blockieSrc = makeBlockie(DEPOSIT_CONTRACT_ADDRESS)
-const DepositContractPage = ({ data, location }) => {
+const DepositContractPage = ({
+ data,
+ location,
+}: PageProps) => {
const intl = useIntl()
- const [state, setState] = useState({
+ const [state, setState] = useState<{
+ browserHasTextToSpeechSupport: boolean
+ textToSpeechRequest: SpeechSynthesisUtterance | undefined
+ isSpeechActive: boolean
+ showAddress: boolean
+ userHasUsedLaunchpad: boolean
+ userUnderstandsStaking: boolean
+ userWillCheckOtherSources: boolean
+ }>({
browserHasTextToSpeechSupport: false,
textToSpeechRequest: undefined,
isSpeechActive: false,
@@ -256,7 +272,9 @@ const DepositContractPage = ({ data, location }) => {
if (state.isSpeechActive) {
window.speechSynthesis.cancel()
} else {
- window.speechSynthesis.speak(state.textToSpeechRequest)
+ window.speechSynthesis.speak(
+ state.textToSpeechRequest as SpeechSynthesisUtterance
+ )
}
}
@@ -296,171 +314,174 @@ const DepositContractPage = ({ data, location }) => {
: ":speaker:"
return (
-
-
-
-
- <Translation id="page-staking-deposit-contract-title" />
-
-
-
-
-
-
-
-
- {" "}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {!state.showAddress && (
- <>
-
-
-
-
-
-
- setState({
- ...state,
- userHasUsedLaunchpad: !state.userHasUsedLaunchpad,
- })
- }
- >
-
-
-
- setState({
- ...state,
- userUnderstandsStaking: !state.userUnderstandsStaking,
- })
- }
- >
-
-
-
- setState({
- ...state,
- userWillCheckOtherSources:
- !state.userWillCheckOtherSources,
- })
- }
- >
-
-
-
- setState({ ...state, showAddress: !state.showAddress })
- }
- >
- {" "}
-
-
-
- )}
- {state.showAddress && (
- <>
-
-
+
+
+
+
+
+ <Translation id="page-staking-deposit-contract-title" />
+
+
+
+
+
+
+
+
+ {" "}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!state.showAddress && (
+ <>
+
-
+
-
-
-
-
-
-
- {state.browserHasTextToSpeechSupport && (
-
-
-
- {" "}
-
-
- )}
-
+
+ setState({
+ ...state,
+ userHasUsedLaunchpad: !state.userHasUsedLaunchpad,
+ })
+ }
+ >
+
+
+
+ setState({
+ ...state,
+ userUnderstandsStaking: !state.userUnderstandsStaking,
+ })
+ }
+ >
+
+
+
+ setState({
+ ...state,
+ userWillCheckOtherSources:
+ !state.userWillCheckOtherSources,
+ })
+ }
+ >
+
+
+
+ setState({ ...state, showAddress: !state.showAddress })
+ }
+ >
+ {" "}
+
+
+
+ )}
+ {state.showAddress && (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ {state.browserHasTextToSpeechSupport && (
+
+
+
+ {" "}
+
+
)}
- >
- {CHUNKED_ADDRESS}
-
-
-
- {(isCopied) => (
-
- {!isCopied ? (
-
- {" "}
-
-
- ) : (
-
- {" "}
-
-
- )}
-
+
-
-
+ {CHUNKED_ADDRESS}
+
+
+
+ {(isCopied) => (
+
+ {!isCopied ? (
+
+ {" "}
+
+
+ ) : (
+
+ {" "}
+
+
+ )}
+
+ )}
+
+
+
+
+
+
+ )}
+
+
+
{" "}
+
+
-
-
- )}
-
-
- {" "}
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
- )
-}
-
-export default FindWalletPage
-
-export const query = graphql`
- {
- hero: file(relativePath: { eq: "wallets/find-wallet-hero.png" }) {
- childImageSharp {
- gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
- }
- }
- dapps: file(relativePath: { eq: "doge-computer.png" }) {
- childImageSharp {
- gatsbyImageData(
- width: 600
- layout: CONSTRAINED
- placeholder: BLURRED
- quality: 100
- )
- }
- }
- }
-`
diff --git a/src/pages/wallets/find-wallet.tsx b/src/pages/wallets/find-wallet.tsx
new file mode 100644
index 00000000000..f2ad56ef039
--- /dev/null
+++ b/src/pages/wallets/find-wallet.tsx
@@ -0,0 +1,724 @@
+// Libraries
+import React, { useState } from "react"
+import { graphql } from "gatsby"
+import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import { useIntl } from "gatsby-plugin-intl"
+import styled from "styled-components"
+import { shuffle } from "lodash"
+
+// Components
+import Breadcrumbs from "../../components/Breadcrumbs"
+import Icon from "../../components/Icon"
+import Link from "../../components/Link"
+import PageMetadata from "../../components/PageMetadata"
+import { Content, Page } from "../../components/SharedStyledComponents"
+import Translation from "../../components/Translation"
+import WalletFilterSidebar from "../../components/FindWallet/WalletFilterSidebar"
+import WalletPersonasSidebar from "../../components/FindWallet/WalletPersonasSidebar"
+import WalletTable from "../../components/FindWallet/WalletTable"
+
+// Data
+import walletData from "../../data/wallets/wallet-data"
+
+// Icons
+import FilterBurger from "../../assets/wallets/filter_burger.svg"
+
+// Utils
+import { translateMessageId } from "../../utils/translations"
+import { trackCustomEvent } from "../../utils/matomo"
+
+// Styles
+const HeroContainer = styled.div`
+ position: relative;
+ width: 100%;
+ display: flex;
+ padding: 3rem;
+ background: ${(props) => props.theme.colors.layer2Gradient};
+ margin-bottom: 44px;
+
+ @media (max-width: ${(props) => props.theme.breakpoints.s}) {
+ flex-direction: column-reverse;
+ }
+`
+
+const HeroContent = styled.div`
+ width: 50%;
+ @media (max-width: ${(props) => props.theme.breakpoints.s}) {
+ margin-top: 2rem;
+ width: 100%;
+ }
+`
+
+const Subtitle = styled.div`
+ font-size: 1.25rem;
+ line-height: 140%;
+ color: ${(props) => props.theme.colors.text200};
+ &:last-of-type {
+ margin-bottom: 2rem;
+ }
+`
+
+const HeroImage = styled(GatsbyImage)`
+ width: 50%;
+
+ @media (max-width: ${(props) => props.theme.breakpoints.s}) {
+ width: 100%;
+ }
+`
+
+const TableContent = styled(Content)`
+ display: flex;
+ gap: 24px;
+ height: 90vh;
+ overflow: hidden;
+ position: sticky;
+ top: 76px;
+ margin-bottom: 150px;
+ border-bottom: 1px solid ${(props) => props.theme.colors.secondary};
+ padding-bottom: 0;
+
+ @media (max-width: ${(props) => props.theme.breakpoints.l}) {
+ padding: 1rem 0 0;
+ margin-bottom: 120px;
+ }
+ @media (max-width: ${(props) => props.theme.breakpoints.m}) {
+ padding: 1rem 0 0;
+ margin-bottom: 230px;
+ }
+`
+
+const MobileFilterToggleContainer = styled.div`
+ position: sticky;
+ top: 76px;
+ background: ${(props) => props.theme.colors.background};
+ width: 100%;
+ z-index: 1;
+ padding: 5px 0;
+`
+
+const MobileFilterToggle = styled.div<{ showMobileSidebar: boolean }>`
+ display: none;
+ @media (max-width: ${(props) => props.theme.breakpoints.l}) {
+ display: flex;
+ gap: 1rem;
+ justify-content: space-between;
+ align-items: center;
+ border: 1px solid ${(props) => props.theme.colors.primary};
+ border-left: none;
+ border-radius: 0px 4px 4px 0px;
+ padding: 6px 20px 10px 20px;
+ margin: auto;
+ margin-left: 0;
+ z-index: 1;
+ width: 100%;
+ max-width: ${(props) => (props.showMobileSidebar ? "330px" : "150px")};
+ background: ${(props) =>
+ props.showMobileSidebar
+ ? props.theme.colors.background
+ : props.theme.colors.background};
+ }
+
+ p {
+ margin: 0;
+ }
+
+ svg {
+ width: 32px;
+ height: 32px;
+ line {
+ stroke: ${(props) => props.theme.colors.primary};
+ }
+ circle {
+ stroke: ${(props) => props.theme.colors.primary};
+ }
+ }
+`
+
+const StyledIcon = styled(Icon)`
+ fill: ${(props) => props.theme.colors.primary};
+ width: 24;
+ height: 24;
+`
+
+const SecondaryText = styled.p`
+ font-size: 14px;
+ line-height: 14px;
+ color: ${(props) => props.theme.colors.text200};
+`
+
+const FilterSidebar = styled.div<{ showMobileSidebar: boolean }>`
+ max-width: 330px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 0.55rem;
+ overflow-y: scroll;
+ background: ${(props) => props.theme.colors.background};
+ transition: 0.5s all;
+ z-index: 20;
+ border-radius: 0px 8px 0px 0px;
+ scrollbar-width: thin;
+ scrollbar-color: ${(props) => props.theme.colors.lightBorder}
+ ${(props) => props.theme.colors.background};
+ ::-webkit-scrollbar {
+ width: 8px;
+ }
+ ::-webkit-scrollbar-track {
+ background: ${(props) => props.theme.colors.background};
+ }
+ ::-webkit-scrollbar-thumb {
+ background-color: ${(props) => props.theme.colors.lightBorder};
+ border-radius: 4px;
+ border: 2px solid ${(props) => props.theme.colors.background};
+ }
+
+ @media (max-width: ${(props) => props.theme.breakpoints.l}) {
+ width: ${(props) => (props.showMobileSidebar ? "350px" : "350px")};
+ left: ${(props) => (props.showMobileSidebar ? "0" : "-400px")};
+ height: ${(props) => (props.showMobileSidebar ? "100%" : "100%")};
+ display: ${(props) => (props.showMobileSidebar ? "flex" : "none")};
+ position: ${(props) => (props.showMobileSidebar ? "absolute" : "relative")};
+ box-shadow: ${(props) =>
+ props.showMobileSidebar ? "0 800px 0 800px rgb(0 0 0 / 65%)" : "none"};
+ }
+ @media (max-width: ${(props) => props.theme.breakpoints.s}) {
+ width: ${(props) => (props.showMobileSidebar ? "90%" : "90%")};
+ height: ${(props) => (props.showMobileSidebar ? "100%" : "100%")};
+ display: ${(props) => (props.showMobileSidebar ? "flex" : "none")};
+ }
+`
+
+const FilterTabs = styled.div`
+ display: flex;
+ border-bottom: 1px solid ${(props) => props.theme.colors.primary};
+ cursor: pointer;
+ position: sticky;
+ top: 0;
+ background: ${(props) => props.theme.colors.background};
+ z-index: 1;
+
+ p {
+ margin: 0;
+ letter-spacing: 0.02rem;
+ font-size: 0.9rem;
+ width: 100%;
+ }
+`
+
+const FilterTab = styled.div<{
+ active: boolean
+}>`
+ width: 50%;
+ text-align: center;
+ background: ${(props) =>
+ props.active === true ? props.theme.colors.primary : "none"};
+ border-radius: 8px 0px 0px 0px;
+ padding: 0.9rem 0.4rem;
+ display: flex;
+ justify-items: center;
+ align-items: center;
+
+ color: ${(props) =>
+ props.active === true
+ ? props.theme.colors.background
+ : props.theme.colors.text};
+
+ :last-child {
+ border-radius: 0px 8px 0px 0px;
+ }
+
+ :hover {
+ background: ${(props) =>
+ props.active === true
+ ? props.theme.colors.primary
+ : props.theme.colors.selectHover};
+ }
+`
+
+const WalletContent = styled.div<{ showMobileSidebar: boolean }>`
+ width: 100%;
+ overflow-y: scroll;
+ scrollbar-width: thin;
+ scrollbar-color: ${(props) => props.theme.colors.lightBorder}
+ ${(props) => props.theme.colors.background};
+ ::-webkit-scrollbar {
+ width: 8px;
+ }
+ ::-webkit-scrollbar-track {
+ background: ${(props) => props.theme.colors.background};
+ }
+ ::-webkit-scrollbar-thumb {
+ background-color: ${(props) => props.theme.colors.lightBorder};
+ border-radius: 4px;
+ border: 2px solid ${(props) => props.theme.colors.background};
+ }
+ table {
+ margin: 0;
+ }
+
+ @media (max-width: ${(props) => props.theme.breakpoints.l}) {
+ width: 100%;
+ }
+
+ @media (max-width: ${(props) => props.theme.breakpoints.s}) {
+ width: 100%;
+ display: ${(props) => (props.showMobileSidebar ? "none" : "")};
+ }
+`
+
+const Note = styled.div`
+ text-align: center;
+ padding: 20px;
+
+ p {
+ font-size: 14px;
+ line-height: 23px;
+ margin: 0;
+ padding-top: 0.2rem;
+ }
+`
+
+const ResetContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ padding: 2px 4px;
+ border-radius: 4px;
+ width: 100%;
+ margin: 0 auto;
+ gap: 0.25rem;
+ font-size: 0.75rem;
+ cursor: pointer;
+ :hover {
+ p {
+ color: ${(props) => props.theme.colors.selectHover};
+ }
+ svg {
+ fill: ${(props) => props.theme.colors.selectHover};
+ }
+ }
+
+ p {
+ margin: 0;
+ color: ${(props) => props.theme.colors.primary};
+ }
+ svg {
+ fill: ${(props) => props.theme.colors.primary};
+ }
+`
+
+const ResetIcon = styled(Icon)`
+ fill: ${(props) => props.theme.colors.primary};
+`
+
+const filterDefault = {
+ android: false,
+ ios: false,
+ linux: false,
+ windows: false,
+ macOS: false,
+ firefox: false,
+ chromium: false,
+ hardware: false,
+ open_source: false,
+ non_custodial: false,
+ hardware_support: false,
+ walletconnect: false,
+ rpc_importing: false,
+ nft_support: false,
+ connect_to_dapps: false,
+ staking: false,
+ swaps: false,
+ layer_2: false,
+ gas_fee_customization: false,
+ ens_support: false,
+ erc_20_support: false,
+ buy_crypto: false,
+ withdraw_crypto: false,
+ multisig: false,
+ social_recovery: false,
+ eip_1559_support: false,
+}
+
+const randomizedWalletData = shuffle(walletData)
+
+const FindWalletPage = ({ data, location }) => {
+ const intl = useIntl()
+
+ const [showFeatureFilters, setShowFeatureFilters] = useState(false)
+ const [showMobileSidebar, setShowMobileSidebar] = useState(false)
+ const [filters, setFilters] = useState(filterDefault)
+ const [selectedPersona, setSelectedPersona] = useState(NaN)
+
+ const updateFilterOption = (key) => {
+ const updatedFilters = { ...filters }
+ updatedFilters[key] = !updatedFilters[key]
+ setFilters(updatedFilters)
+ setSelectedPersona(NaN)
+ }
+
+ const updateFilterOptions = (keys, value) => {
+ const updatedFilters = { ...filters }
+ for (let key of keys) {
+ updatedFilters[key] = value
+ }
+ setFilters(updatedFilters)
+ setSelectedPersona(NaN)
+ }
+
+ const resetFilters = () => {
+ setSelectedPersona(NaN)
+ setFilters(filterDefault)
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setShowMobileSidebar(!showMobileSidebar)
+ trackCustomEvent({
+ eventCategory: "MobileFilterToggle",
+ eventAction: `Tap MobileFilterToggle`,
+ eventName: `show mobile filters ${!showMobileSidebar}`,
+ })
+ }}
+ >
+
+
FILTERS
+
+ {Object.values(filters).reduce((acc, filter) => {
+ if (filter) {
+ acc += 1
+ }
+ return acc
+ }, 0)}{" "}
+ active
+
+
Profile Filters
+
+ {
+ setShowFeatureFilters(true)
+ trackCustomEvent({
+ eventCategory: "WalletFilterSidebar",
+ eventAction: `WalletFilterSidebar tab clicked`,
+ eventName: `show feature filters`,
+ })
+ }}
+ >
+
+ Feature Filters (
+ {Object.values(filters).reduce((acc, filter) => {
+ if (filter) {
+ acc += 1
+ }
+ return acc
+ }, 0)}
+ )
+
+
+
+
+
+
+ {"Reset filters".toUpperCase()}
+
+
+
+ {showFeatureFilters ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+ Wallets listed on this page are not official endorsements, and are
+ provided for informational purposes only.{" "}
+
+
+
+
+ Their descriptions have been provided by the wallet projects
+ themselves.{" "}
+
+
+
+
+ We add products to this page based on criteria in our{" "}
+ listing policy. If
+ you'd like us to add a wallet,{" "}
+
+ raise an issue in GitHub
+
+ .
+
+
+
+
+ )
+}
+
+export default FindWalletPage
+
+export const query = graphql`
+ {
+ hero: file(relativePath: { eq: "wallets/find-wallet-hero.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ airgap: file(relativePath: { eq: "wallets/airgap.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ argent: file(relativePath: { eq: "wallets/argent.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ brave: file(relativePath: { eq: "wallets/brave.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ coin98: file(relativePath: { eq: "wallets/coin98.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ coinbase: file(relativePath: { eq: "wallets/coinbase.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ frame: file(relativePath: { eq: "wallets/frame.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ keystone: file(relativePath: { eq: "wallets/keystone.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ loopring: file(relativePath: { eq: "wallets/loopring.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ metamask: file(relativePath: { eq: "wallets/metamask.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ numio: file(relativePath: { eq: "wallets/numio.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ portis: file(relativePath: { eq: "wallets/portis.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ tallyho: file(relativePath: { eq: "wallets/tallyho.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ gnosis: file(relativePath: { eq: "wallets/gnosis.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ coinwallet: file(relativePath: { eq: "wallets/coinwallet.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ ambire: file(relativePath: { eq: "wallets/ambire.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ zengo: file(relativePath: { eq: "wallets/zengo.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ linen: file(relativePath: { eq: "wallets/linen.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ imtoken: file(relativePath: { eq: "wallets/imtoken.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ foxwallet: file(relativePath: { eq: "wallets/foxwallet.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ mycrypto: file(relativePath: { eq: "wallets/mycrypto.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ pillar: file(relativePath: { eq: "wallets/pillar.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ mew: file(relativePath: { eq: "wallets/mew.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ unstoppable: file(relativePath: { eq: "wallets/unstoppable.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ myetherwallet: file(relativePath: { eq: "wallets/myetherwallet.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ alpha: file(relativePath: { eq: "wallets/alpha.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ opera: file(relativePath: { eq: "wallets/opera.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ guarda: file(relativePath: { eq: "wallets/guarda.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ web3auth: file(relativePath: { eq: "wallets/web3auth.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ bridge: file(relativePath: { eq: "wallets/bridge.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ torus: file(relativePath: { eq: "wallets/torus.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ tokenpocket: file(relativePath: { eq: "wallets/tokenpocket.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ oneinch: file(relativePath: { eq: "wallets/1inch.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ rainbow: file(relativePath: { eq: "wallets/rainbow.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ status: file(relativePath: { eq: "wallets/status.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ aktionariat: file(relativePath: { eq: "wallets/aktionariat.png" }) {
+ childImageSharp {
+ gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, quality: 100)
+ }
+ }
+ }
+`
diff --git a/src/templates/docs.tsx b/src/templates/docs.tsx
index 565867e31f8..2be05dfda7e 100644
--- a/src/templates/docs.tsx
+++ b/src/templates/docs.tsx
@@ -228,7 +228,7 @@ const DocsPage = ({
↑
-
+
{mdx.frontmatter.sidebar && tocItems && (
diff --git a/src/templates/static.tsx b/src/templates/static.tsx
index ae5c9edbd7e..3fadfe739c6 100644
--- a/src/templates/static.tsx
+++ b/src/templates/static.tsx
@@ -199,7 +199,7 @@ const StaticPage = ({
{mdx.body}
-
+
{mdx.frontmatter.sidebar && tocItems && (
{showMergeBanner && }
@@ -190,6 +190,7 @@ const TutorialPage = ({
relativePath={relativePath}
editPath={absoluteEditPath}
/>
+
{mdx.frontmatter.sidebar && tocItems && (
{mdx.body}
+
diff --git a/src/templates/use-cases.tsx b/src/templates/use-cases.tsx
index 89aebf71f38..26d36085be0 100644
--- a/src/templates/use-cases.tsx
+++ b/src/templates/use-cases.tsx
@@ -1,4 +1,5 @@
import React from "react"
+import { useIntl } from "gatsby-plugin-intl"
import { graphql, PageProps } from "gatsby"
import { MDXProvider } from "@mdx-js/react"
import { MDXRenderer } from "gatsby-plugin-mdx"
@@ -37,8 +38,9 @@ import {
import Emoji from "../components/Emoji"
import YouTube from "../components/YouTube"
import PreMergeBanner from "../components/PreMergeBanner"
+import FeedbackCard from "../components/FeedbackCard"
-import { isLangRightToLeft } from "../utils/translations"
+import { isLangRightToLeft, translateMessageId } from "../utils/translations"
import { getSummaryPoints } from "../utils/getSummaryPoints"
import { Lang } from "../utils/languages"
import { Context } from "../types"
@@ -300,6 +302,7 @@ const UseCasePage = ({
data: { siteData, pageData: mdx },
pageContext,
}: PageProps) => {
+ const intl = useIntl()
if (!siteData || !mdx?.frontmatter) {
throw new Error(
"UseCases page template query does not return expected values"
@@ -419,6 +422,7 @@ const UseCasePage = ({
{mdx.body}
+
diff --git a/src/theme.ts b/src/theme.ts
index 0c41883eff2..053aeb983cb 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -250,6 +250,8 @@ const lightColors = {
stakingRedFill: "#f8fbf9",
layer2Gradient:
"linear-gradient(85.12deg, rgba(185, 185, 241, 0.2) 0%, rgba(84, 132, 234, 0.2) 56.29%, rgba(58, 142, 137, 0.2) 99.99%)",
+ feedbackGradient:
+ "linear-gradient(102.7deg, rgba(185, 185, 241, 0.2) 0%, rgba(84, 132, 234, 0.2) 51.56%, rgba(58, 142, 137, 0.2) 100%)",
}
// TODO replace random variables w/ baseColor variables
@@ -352,6 +354,8 @@ const darkColors = {
stakingRedFill: "#313432",
layer2Gradient:
"linear-gradient(83.46deg, rgba(127, 127, 213, 0.2) 7.03%, rgba(138, 168, 231, 0.2) 52.42%, rgba(145, 234, 228, 0.2) 98.77%), #1E1E1E",
+ feedbackGradient:
+ "linear-gradient(83.46deg, #2C2C32 7.03%, #44404D 52.42%, #303038 98.77%)",
}
const lightThemeColors = Object.assign({}, baseColors, lightColors)
diff --git a/src/types.ts b/src/types.ts
index fa512ff0dbf..26ab1faa98e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -16,7 +16,9 @@ export type Context = {
relativePath: string
intl: Intl
language: Lang
+ ignoreTranslationBanner?: boolean
isOutdated: boolean
+ isLegal?: boolean
isContentEnglish?: boolean
}
diff --git a/src/utils/translations.ts b/src/utils/translations.ts
index 76c063cdfdf..2296b8811f2 100644
--- a/src/utils/translations.ts
+++ b/src/utils/translations.ts
@@ -55,7 +55,7 @@ export const translateMessageId = (
// Overwrites the default Persian numbering of the Farsi language to use Hindu-Arabic numerals (0-9)
// Context: https://github.com/ethereum/ethereum-org-website/pull/5490#pullrequestreview-892596553
-export const getLocaleForNumberFormat = (locale: Lang) => {
+export const getLocaleForNumberFormat = (locale: Lang): Lang => {
if (locale === "fa") {
return "en"
}
diff --git a/yarn.lock b/yarn.lock
index f1e199cf220..b921bc36999 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5184,6 +5184,16 @@ browserslist@^4.18.1, browserslist@^4.20.2:
node-releases "^2.0.3"
picocolors "^1.0.0"
+browserslist@^4.21.0:
+ version "4.21.0"
+ resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.0.tgz#7ab19572361a140ecd1e023e2c1ed95edda0cefe"
+ integrity sha512-UQxE0DIhRB5z/zDz9iA03BOfxaN2+GQdBYH/2WrSIWEUrnpzTPJbhqt+umq6r3acaPRTW1FNTkrcp0PXgtFkvA==
+ dependencies:
+ caniuse-lite "^1.0.30001358"
+ electron-to-chromium "^1.4.164"
+ node-releases "^2.0.5"
+ update-browserslist-db "^1.0.0"
+
browserslist@^4.6.6:
version "4.20.2"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88"
@@ -5402,20 +5412,10 @@ caniuse-api@^3.0.0:
lodash.memoize "^4.1.2"
lodash.uniq "^4.5.0"
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001272, caniuse-lite@^1.0.30001286:
- version "1.0.30001286"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001286.tgz#3e9debad420419618cfdf52dc9b6572b28a8fff6"
- integrity sha512-zaEMRH6xg8ESMi2eQ3R4eZ5qw/hJiVsO/HlLwniIwErij0JDr9P+8V4dtx1l+kLq6j3yy8l8W4fst1lBnat5wQ==
-
-caniuse-lite@^1.0.30001317:
- version "1.0.30001323"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001323.tgz#a451ff80dec7033016843f532efda18f02eec011"
- integrity sha512-e4BF2RlCVELKx8+RmklSEIVub1TWrmdhvA5kEUueummz1XyySW0DVk+3x9HyhU9MuWTa2BhqLgEuEmUwASAdCA==
-
-caniuse-lite@^1.0.30001332:
- version "1.0.30001341"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001341.tgz#59590c8ffa8b5939cf4161f00827b8873ad72498"
- integrity sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001272, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001317, caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001358:
+ version "1.0.30001358"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001358.tgz#473d35dabf5e448b463095cab7924e96ccfb8c00"
+ integrity sha512-hvp8PSRymk85R20bsDra7ZTCpSVGN/PAz9pSAjPSjKC+rNmnUk5vCRgJwiTT/O4feQ/yu/drvZYpKxxhbFuChw==
capital-case@^1.0.4:
version "1.0.4"
@@ -6948,6 +6948,11 @@ electron-to-chromium@^1.4.118:
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz#186180a45617283f1c012284458510cd99d6787f"
integrity sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==
+electron-to-chromium@^1.4.164:
+ version "1.4.166"
+ resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.166.tgz#83cd596e59c1a192425b99e6ecc64d9ffff50aff"
+ integrity sha512-ZPLdq3kcATkD6dwne5M4SgJBHw21t90BqTGzf3AceJwj3cE/ICv6jyDwHYyJoF4JNuXM3pzRxlaRmpO7pdwmcg==
+
electron-to-chromium@^1.4.17:
version "1.4.19"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.19.tgz#b02bfdc6a5f1c683849a462cd54258288c087433"
@@ -11955,6 +11960,11 @@ node-releases@^2.0.3:
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.4.tgz#f38252370c43854dc48aa431c766c6c398f40476"
integrity sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==
+node-releases@^2.0.5:
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.5.tgz#280ed5bc3eba0d96ce44897d8aee478bfb3d9666"
+ integrity sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==
+
normalize-path@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -16097,6 +16107,14 @@ upath@^1.1.1:
resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+update-browserslist-db@^1.0.0:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.3.tgz#6c47cb996f34afb363e924748e2f6e4d983c6fc1"
+ integrity sha512-ufSazemeh9Gty0qiWtoRpJ9F5Q5W3xdIPm1UZQqYQv/q0Nyb9EMHUB2lu+O9x1re9WsorpMAUu4Y6Lxcs5n+XQ==
+ dependencies:
+ escalade "^3.1.1"
+ picocolors "^1.0.0"
+
update-notifier@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-5.1.0.tgz#4ab0d7c7f36a231dd7316cf7729313f0214d9ad9"
