Skip to content

Commit dd166a0

Browse files
minimalsmminimalsm
committed
2 parents 7899e06 + 29dfab1 commit dd166a0

File tree

21 files changed

+740
-926
lines changed

21 files changed

+740
-926
lines changed

‎.all-contributorsrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10422,6 +10422,16 @@
1042210422
"contributions": [
1042310423
"ideas"
1042410424
]
10425+
},
10426+
{
10427+
"login": "z0rats",
10428+
"name": "Alex",
10429+
"avatar_url": "https://avatars.githubusercontent.com/u/32142853?v=4",
10430+
"profile": "http://t.me/mevsinternet",
10431+
"contributions": [
10432+
"doc",
10433+
"bug"
10434+
]
1042510435
}
1042610436
],
1042710437
"contributorsPerLine": 7,

‎.storybook/i18next.ts

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import i18n, { Resource } from "i18next"
22
import { initReactI18next } from "gatsby-plugin-react-i18next"
3+
import fs from "fs"
34

45
export const baseLocales = {
56
en: { title: "English", left: "En" },
@@ -9,7 +10,13 @@ export const baseLocales = {
910
}
1011

1112
// Only i18n files named in this array are being exposed to Storybook. Add filenames as necessary.
12-
const ns = ["common", "page-about", "page-upgrades", "page-developers-index"]
13+
const ns = [
14+
"common",
15+
"glossary",
16+
"page-about",
17+
"page-upgrades",
18+
"page-developers-index",
19+
]
1320
const supportedLngs = Object.keys(baseLocales)
1421

1522
/**
@@ -19,11 +26,22 @@ const supportedLngs = Object.keys(baseLocales)
1926
const resources: Resource = ns.reduce((acc, n) => {
2027
supportedLngs.forEach((lng) => {
2128
if (!acc[lng]) acc[lng] = {}
22-
acc[lng] = {
23-
translation: {
24-
...acc[lng].translation,
25-
...require(`../src/intl/${lng}/${n}.json`),
26-
},
29+
try {
30+
acc[lng] = {
31+
translation: {
32+
...acc[lng].translation,
33+
34+
...require(`../src/intl/${lng}/${n}.json`),
35+
},
36+
}
37+
} catch {
38+
acc[lng] = {
39+
translation: {
40+
...acc[lng].translation,
41+
42+
...require(`../src/intl/en/${n}.json`),
43+
},
44+
}
2745
}
2846
})
2947
return acc

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1630,6 +1630,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
16301630
</tr>
16311631
<tr>
16321632
<td align="center" valign="top" width="14.28%"><a href="https://github.com/LadyDhaga"><img src="https://avatars.githubusercontent.com/u/106376368?v=4?s=100" width="100px;" alt="chinaman123"/><br /><sub><b>chinaman123</b></sub></a><br /><a href="#ideas-LadyDhaga" title="Ideas, Planning, & Feedback">🤔</a></td>
1633+
<td align="center" valign="top" width="14.28%"><a href="http://t.me/mevsinternet"><img src="https://avatars.githubusercontent.com/u/32142853?v=4?s=100" width="100px;" alt="Alex"/><br /><sub><b>Alex</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=z0rats" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Az0rats" title="Bug reports">🐛</a></td>
16331634
</tr>
16341635
</tbody>
16351636
</table>

‎src/components/Glossary/GlossaryDefinition/GlossaryDefinition.stories.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Meta, StoryFn } from "@storybook/react"
2+
import React from "react"
3+
import GlossaryDefinition from "."
4+
5+
export default {
6+
component: GlossaryDefinition,
7+
} as Meta<typeof GlossaryDefinition>
8+
9+
export const Basic: StoryFn<typeof GlossaryDefinition> = () => (
10+
<GlossaryDefinition term="51%-attack" />
11+
)

‎src/components/Glossary/GlossaryDefinition/index.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react"
2+
import { Box, Heading, Text } from "@chakra-ui/react"
3+
4+
import Translation from "../../Translation"
5+
6+
interface IProps {
7+
term: string
8+
size?: "md" | "sm"
9+
}
10+
11+
const GlossaryDefinition: React.FC<IProps> = ({ term, size = "md" }) => {
12+
const headingStyles =
13+
size === "sm"
14+
? { fontSize: "md", mt: 0, mb: 2 }
15+
: { fontSize: { base: "xl", md: "2xl" } }
16+
17+
const textStyles = size === "sm" ? { mb: 0 } : {}
18+
19+
return (
20+
<Box>
21+
<Heading as="h3" lineHeight={1.4} id={term} {...headingStyles}>
22+
<Translation id={`${term}-term`} />
23+
</Heading>
24+
<Text {...textStyles}>
25+
<Translation id={`${term}-definition`} />
26+
</Text>
27+
</Box>
28+
)
29+
}
30+
31+
export default GlossaryDefinition

‎src/components/Glossary/GlossaryTooltip/GlossaryTooltip.stories.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Meta, StoryFn } from "@storybook/react"
2+
import React from "react"
3+
import GlossaryTooltip from "."
4+
5+
export default {
6+
component: GlossaryTooltip,
7+
} as Meta<typeof GlossaryTooltip>
8+
9+
export const Basic: StoryFn<typeof GlossaryTooltip> = () => (
10+
<GlossaryTooltip termKey="big-endian">big-endian</GlossaryTooltip>
11+
)

‎src/components/Glossary/GlossaryTooltip/index.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { ReactNode } from "react"
2+
import { Text, useBreakpointValue } from "@chakra-ui/react"
3+
4+
import GlossaryDefinition from "../GlossaryDefinition"
5+
import Tooltip from "../../Tooltip"
6+
7+
interface IProps {
8+
children: ReactNode
9+
termKey: string
10+
}
11+
12+
const GlossaryTooltip: React.FC<IProps> = ({ children, termKey }) => {
13+
const isLargeScreen = useBreakpointValue({ base: false, lg: true })
14+
15+
return isLargeScreen ? (
16+
<Tooltip content={<GlossaryDefinition term={termKey} size="sm" />}>
17+
<Text
18+
as="u"
19+
textDecorationStyle="dotted"
20+
textUnderlineOffset="3px"
21+
_hover={{
22+
textDecorationColor: "primary.hover",
23+
color: "primary.hover",
24+
}}
25+
cursor="help"
26+
>
27+
{children}
28+
</Text>
29+
</Tooltip>
30+
) : (
31+
<Text as="span">{children}</Text>
32+
)
33+
}
34+
35+
export default GlossaryTooltip

‎src/components/Link.tsx

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ import {
1010
import { navigate as gatsbyNavigate } from "gatsby"
1111
import { Link as IntlLink } from "gatsby-plugin-react-i18next"
1212
import { NavigateOptions } from "@reach/router"
13-
14-
import { BsQuestionSquareFill } from "react-icons/bs"
1513
import { RxExternalLink } from "react-icons/rx"
1614

1715
import { Lang } from "../utils/languages"
@@ -71,7 +69,6 @@ export const BaseLink: React.FC<IProps> = ({
7169
if (isDiscordInvite) to = new URL(DISCORD_PATH, SITE_URL).href
7270
const isExternal = url.isExternal(to)
7371
const isHash = url.isHash(to)
74-
const isGlossary = url.isGlossary(to)
7572
const isStatic = url.isStatic(to)
7673
const isPdf = url.isPdf(to)
7774

@@ -162,24 +159,10 @@ export const BaseLink: React.FC<IProps> = ({
162159
language={language}
163160
partiallyActive={isPartiallyActive}
164161
activeStyle={activeStyle ? activeStyle : { color: theme.colors.primary }}
165-
whiteSpace={isGlossary ? "nowrap" : "normal"}
162+
whiteSpace={"normal"}
166163
{...commonProps}
167164
>
168-
<>
169-
{children}
170-
{isGlossary && (
171-
<Icon
172-
as={BsQuestionSquareFill}
173-
aria-label="See definition"
174-
fontSize="12px"
175-
margin="0 0.25rem 0 0.35rem"
176-
_hover={{
177-
transition: "transform 0.1s",
178-
transform: "scale(1.2)",
179-
}}
180-
/>
181-
)}
182-
</>
165+
{children}
183166
</ChakraLink>
184167
)
185168
}

‎src/components/Tooltip.tsx

Lines changed: 71 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { ReactNode, useState } from "react"
2-
import { Box, useColorModeValue } from "@chakra-ui/react"
2+
import { Box, useColorModeValue, useToken } from "@chakra-ui/react"
3+
import { motion, AnimatePresence } from "framer-motion"
34
import * as utils from "../utils/isMobile"
45

56
export interface IProps {
@@ -12,6 +13,7 @@ const Tooltip: React.FC<IProps> = ({ content, children }) => {
1213
const [isVisible, setIsVisible] = useState<boolean>(false)
1314
const isMobile = utils.isMobile()
1415
const shadow = useColorModeValue("tableBox.light", "tableBox.dark")
16+
const borderColor = useToken("colors", "primary.lowContrast")
1517

1618
return (
1719
<>
@@ -33,50 +35,82 @@ const Tooltip: React.FC<IProps> = ({ content, children }) => {
3335
display="inline-flex"
3436
userSelect="none"
3537
cursor="pointer"
36-
title="More info"
3738
onMouseEnter={!isMobile ? () => setIsVisible(true) : undefined}
3839
onMouseLeave={!isMobile ? () => setIsVisible(false) : undefined}
3940
onClick={isMobile ? () => setIsVisible(!isVisible) : undefined}
4041
>
4142
{children}
4243
{isVisible && (
43-
<Box
44-
textAlign="center"
45-
whiteSpace="normal"
46-
w={{ base: "140px", md: "200px" }}
47-
color="text"
48-
bg="background.base"
49-
boxShadow={shadow}
50-
position="absolute"
51-
zIndex="docked"
52-
py={4}
53-
px={2}
54-
textTransform="none"
55-
fontSize="sm"
56-
fontWeight="medium"
57-
cursor="default"
58-
borderRadius="base"
59-
bottom="125%"
60-
left="25%"
61-
transform="translateX(-50%)"
62-
>
44+
<AnimatePresence>
6345
<Box
64-
as="span"
46+
as={motion.div}
47+
whiteSpace="normal"
48+
w={{ base: "140px", md: "300px" }}
49+
color="text"
50+
bg="background.highlight"
51+
boxShadow={shadow}
6552
position="absolute"
66-
bottom={-2}
67-
left="calc(50% - 6px)"
68-
borderRightWidth={10}
69-
borderRightStyle="solid"
70-
borderRightColor="transparent"
71-
borderTopWidth={10}
72-
borderTopStyle="solid"
73-
borderTopColor="background.base"
74-
borderLeftWidth={10}
75-
borderLeftStyle="solid"
76-
borderLeftColor="transparent"
77-
/>
78-
{content}
79-
</Box>
53+
zIndex="docked"
54+
p={4}
55+
textTransform="none"
56+
fontSize="sm"
57+
fontWeight="medium"
58+
cursor="default"
59+
borderRadius="base"
60+
border={`1px solid ${borderColor}`}
61+
bottom="125%"
62+
left={{ base: "-70px", md: "-150px" }}
63+
marginLeft="50%"
64+
initial="exit"
65+
animate="enter"
66+
exit="exit"
67+
variants={{
68+
exit: {
69+
scale: 0.85,
70+
opacity: 0,
71+
transition: {
72+
opacity: { duration: 0.15, easings: "easeInOut" },
73+
scale: { duration: 0.2, easings: "easeInOut" },
74+
},
75+
},
76+
enter: {
77+
scale: 1,
78+
opacity: 1,
79+
transition: {
80+
opacity: { easings: "easeOut", duration: 0.5 },
81+
scale: { duration: 0.5, ease: [0.175, 0.885, 0.4, 1.1] },
82+
},
83+
},
84+
}}
85+
>
86+
{/* This box is used as an area to keep the tooltip open when transitioning from the children content into the tooltip box content */}
87+
<Box
88+
as="span"
89+
position="absolute"
90+
bg="transparent"
91+
bottom={-2}
92+
left={0}
93+
width="100%"
94+
height={5}
95+
/>
96+
<Box
97+
as="span"
98+
position="absolute"
99+
bottom={-2}
100+
left="calc(50% - 6px)"
101+
borderRightWidth={10}
102+
borderRightStyle="solid"
103+
borderRightColor="transparent"
104+
borderTopWidth={10}
105+
borderTopStyle="solid"
106+
borderTopColor="background.highlight"
107+
borderLeftWidth={10}
108+
borderLeftStyle="solid"
109+
borderLeftColor="transparent"
110+
/>
111+
{content}
112+
</Box>
113+
</AnimatePresence>
80114
)}
81115
</Box>
82116
</>

‎src/content/defi/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -317,7 +317,7 @@ You can think of DeFi in layers:
317317

318318
1. The blockchain – Ethereum contains the transaction history and state of accounts.
319319
2. The assets – [ETH](/eth/) and the other tokens (currencies).
320-
3. The protocols – [smart contracts](/glossary/#smart-contract) that provide the functionality, for example, a service that allows for decentralized lending of assets.
320+
3. The protocols – <GlossaryTooltip termKey="smart-contract">smart contracts</GlossaryTooltip> that provide the functionality, for example, a service that allows for decentralized lending of assets.
321321
4. [The applications](/dapps/) – the products we use to manage and access the protocols.
322322

323323
## Build DeFi {#build-defi}

0 commit comments

Comments
 (0)