Yaz Khoury
🖋
Start exploring Ethereum today
+{t("page-what-is-ethereum-start-business-desc-1")}
{t("page-what-is-ethereum-start-business-desc-2")}
-
- {t("page-what-is-ethereum-start-business-desc-3")}
-
{t("page-what-is-ethereum-start-business-desc-3")}
+
{t.rich("page-what-is-ethereum-start-business-example", {
a: (chunks) => (
diff --git a/docs/applying-storybook.md b/docs/applying-storybook.md
index fc47cbf8867..1f98b0c16ad 100644
--- a/docs/applying-storybook.md
+++ b/docs/applying-storybook.md
@@ -52,11 +52,11 @@ type Story = StoryObj {hub.description} {hub.cta} No data available {data.name}
+ {showPercentage ? `${percentage}%` : data.value}
+ 🖼 Link to asset:
setURL(event.target.value)}
/>
🤔 Name:
setName(event.target.value)}
/>
✍️ Description:
setDescription(event.target.value)}
/>
@@ -439,7 +439,7 @@ function addWalletListener() {
Let's quickly break down what's happening here:
-- First, our function checks if `window.ethereum` is enabled \(i.e. MetaMask is installed\).
+- First, our function checks if `window.ethereum` is enabled \(i.e., MetaMask is installed\).
- If it's not, we simply set our `status` state variable to a JSX string that prompts the user to install MetaMask.
- If it is enabled, we set up the listener `window.ethereum.on("accountsChanged")` on line 3 that listens for state changes in the MetaMask wallet, which include when the user connects an additional account to the dapp, switches accounts, or disconnects an account. If there is at least one account connected, the `walletAddress` state variable is updated as the first account in the `accounts` array returned by the listener. Otherwise, `walletAddress` is set as an empty string.
diff --git a/public/content/developers/tutorials/optimism-std-bridge-annotated-code/index.md b/public/content/developers/tutorials/optimism-std-bridge-annotated-code/index.md
index 060dc5804dd..8e92c065414 100644
--- a/public/content/developers/tutorials/optimism-std-bridge-annotated-code/index.md
+++ b/public/content/developers/tutorials/optimism-std-bridge-annotated-code/index.md
@@ -769,7 +769,7 @@ These two functions are wrappers around `_initiateERC20Deposit`, the function th
```solidity
/**
* @dev Performs the logic for deposits by informing the L2 Deposited Token
- * contract of the deposit and calling a handler to lock the L1 funds. (e.g. transferFrom)
+ * contract of the deposit and calling a handler to lock the L1 funds. (e.g., transferFrom)
*
* @param _l1Token Address of the L1 ERC20 we are depositing
* @param _l2Token Address of the L1 respective L2 ERC20
diff --git a/public/content/developers/tutorials/token-integration-checklist/index.md b/public/content/developers/tutorials/token-integration-checklist/index.md
index 58821da9f09..92088341817 100644
--- a/public/content/developers/tutorials/token-integration-checklist/index.md
+++ b/public/content/developers/tutorials/token-integration-checklist/index.md
@@ -59,7 +59,7 @@ Finally, there are certain characteristics that are difficult to identify automa
- **The contract avoids unneeded complexity.** The token should be a simple contract; a token with complex code requires a higher standard of review. Use Slither’s [human-summary printer](https://github.com/crytic/slither/wiki/Printer-documentation#human-summary) to identify complex code.
- **The contract uses SafeMath.** Contracts that do not use SafeMath require a higher standard of review. Inspect the contract by hand for SafeMath usage.
- **The contract has only a few non–token-related functions.** Non–token-related functions increase the likelihood of an issue in the contract. Use Slither’s [contract-summary printer](https://github.com/crytic/slither/wiki/Printer-documentation#contract-summary) to broadly review the code used in the contract.
-- **The token only has one address.** Tokens with multiple entry points for balance updates can break internal bookkeeping based on the address (e.g. `balances[token_address][msg.sender]` might not reflect the actual balance).
+- **The token only has one address.** Tokens with multiple entry points for balance updates can break internal bookkeeping based on the address (e.g., `balances[token_address][msg.sender]` might not reflect the actual balance).
## Owner privileges {#owner-privileges}
diff --git a/public/content/developers/tutorials/yellow-paper-evm/index.md b/public/content/developers/tutorials/yellow-paper-evm/index.md
index 31370595026..64df6c93308 100644
--- a/public/content/developers/tutorials/yellow-paper-evm/index.md
+++ b/public/content/developers/tutorials/yellow-paper-evm/index.md
@@ -34,7 +34,7 @@ This section gives the basics of the EVM and how it compares with other computat
A [stack machine](https://en.wikipedia.org/wiki/Stack_machine) is a computer that stores intermediate data not in registers, but in a [**stack**](🖼 Link to asset:
setURL(event.target.value)}
/>
🤔 Name:
setName(event.target.value)}
/>
✍️ Description:
setDescription(event.target.value)}
/>
diff --git a/public/content/translations/es/developers/tutorials/optimism-std-bridge-annotated-code/index.md b/public/content/translations/es/developers/tutorials/optimism-std-bridge-annotated-code/index.md
index 1ac98ad7779..6881d254219 100644
--- a/public/content/translations/es/developers/tutorials/optimism-std-bridge-annotated-code/index.md
+++ b/public/content/translations/es/developers/tutorials/optimism-std-bridge-annotated-code/index.md
@@ -725,7 +725,7 @@ Estas dos funciones son wrappers alrededor de `_initiateERC20Deposit`, la funci
```solidity
/**
* @dev Performs the logic for deposits by informing the L2 Deposited Token
- * contract of the deposit and calling a handler to lock the L1 funds. (e.g. transferFrom)
+ * contract of the deposit and calling a handler to lock the L1 funds. (e.g., transferFrom)
*
* @param _l1Token Address of the L1 ERC20 we are depositing
* @param _l2Token Address of the L1 respective L2 ERC20
diff --git a/public/content/translations/es/roadmap/merge/index.md b/public/content/translations/es/roadmap/merge/index.md
index f1d7499bc29..3b91bfc25a2 100644
--- a/public/content/translations/es/roadmap/merge/index.md
+++ b/public/content/translations/es/roadmap/merge/index.md
@@ -122,7 +122,7 @@ La Fusión coloca a Ethereum en una nueva fase de actualizaciones escalables que
🖼 Link to asset:
setURL(event.target.value)}
/>
🤔 Name:
setName(event.target.value)}
/>
✍️ Description:
setDescription(event.target.value)}
/>
diff --git a/public/content/translations/fr/developers/tutorials/optimism-std-bridge-annotated-code/index.md b/public/content/translations/fr/developers/tutorials/optimism-std-bridge-annotated-code/index.md
index ac53b339684..62c03df2159 100644
--- a/public/content/translations/fr/developers/tutorials/optimism-std-bridge-annotated-code/index.md
+++ b/public/content/translations/fr/developers/tutorials/optimism-std-bridge-annotated-code/index.md
@@ -725,7 +725,7 @@ Ces deux fonctions sont enveloppées autour de `_initiateERC20Deposit`, la fonct
```solidity
/**
* @dev Performs the logic for deposits by informing the L2 Deposited Token
- * contract of the deposit and calling a handler to lock the L1 funds. (e.g. transferFrom)
+ * contract of the deposit and calling a handler to lock the L1 funds. (e.g., transferFrom)
*
* @param _l1Token Address of the L1 ERC20 we are depositing
* @param _l2Token Address of the L1 respective L2 ERC20
diff --git a/public/content/translations/fr/roadmap/merge/index.md b/public/content/translations/fr/roadmap/merge/index.md
index 68bcf610482..48d1a7a4d64 100644
--- a/public/content/translations/fr/roadmap/merge/index.md
+++ b/public/content/translations/fr/roadmap/merge/index.md
@@ -122,7 +122,7 @@ La Fusion permet également de préparer le terrain pour d'autres améliorations
🖼 Link to asset:
setURL(event.target.value)}
/>
🤔 Name:
setName(event.target.value)}
/>
✍️ Description:
setDescription(event.target.value)}
/>
@@ -446,7 +446,7 @@ function addWalletListener() {
Let's quickly break down what's happening here:
-- First, our function checks if `window.ethereum` is enabled \(i.e. MetaMask is installed\).
+- First, our function checks if `window.ethereum` is enabled \(i.e., MetaMask is installed\).
- If it's not, we simply set our `status` state variable to a JSX string that prompts the user to install MetaMask.
- If it is enabled, we set up the listener `window.ethereum.on("accountsChanged")` on line 3 that listens for state changes in the MetaMask wallet, which include when the user connects an additional account to the dApp, switches accounts, or disconnects an account. If there is at least one account connected, the `walletAddress` state variable is updated as the first account in the `accounts` array returned by the listener. Otherwise, `walletAddress` is set as an empty string.
diff --git a/public/content/translations/id/developers/tutorials/optimism-std-bridge-annotated-code/index.md b/public/content/translations/id/developers/tutorials/optimism-std-bridge-annotated-code/index.md
index cc8273d1925..65682b2b897 100644
--- a/public/content/translations/id/developers/tutorials/optimism-std-bridge-annotated-code/index.md
+++ b/public/content/translations/id/developers/tutorials/optimism-std-bridge-annotated-code/index.md
@@ -725,7 +725,7 @@ These two functions are wrappers around `_initiateERC20Deposit`, the function th
```solidity
/**
* @dev Performs the logic for deposits by informing the L2 Deposited Token
- * contract of the deposit and calling a handler to lock the L1 funds. (e.g. transferFrom)
+ * contract of the deposit and calling a handler to lock the L1 funds. (e.g., transferFrom)
*
* @param _l1Token Address of the L1 ERC20 we are depositing
* @param _l2Token Address of the L1 respective L2 ERC20
diff --git a/public/content/translations/id/roadmap/merge/index.md b/public/content/translations/id/roadmap/merge/index.md
index 2c9034f72dc..9b82558cac2 100644
--- a/public/content/translations/id/roadmap/merge/index.md
+++ b/public/content/translations/id/roadmap/merge/index.md
@@ -122,7 +122,7 @@ Penggabungan juga membuka jalan untuk peningkatan skalabilitas lebih lanjut yang
🖼 Link to asset:
setURL(event.target.value)}
/>
🤔 Name:
setName(event.target.value)}
/>
✍️ Description:
setDescription(event.target.value)}
/>
diff --git a/public/content/translations/it/developers/tutorials/optimism-std-bridge-annotated-code/index.md b/public/content/translations/it/developers/tutorials/optimism-std-bridge-annotated-code/index.md
index 2633b9a5da7..623a368b33e 100644
--- a/public/content/translations/it/developers/tutorials/optimism-std-bridge-annotated-code/index.md
+++ b/public/content/translations/it/developers/tutorials/optimism-std-bridge-annotated-code/index.md
@@ -725,7 +725,7 @@ Queste due funzioni sono wrapper intorno a `_initiateERC20Deposit`, la funzione
```solidity
/**
* @dev Performs the logic for deposits by informing the L2 Deposited Token
- * contract of the deposit and calling a handler to lock the L1 funds. (e.g. transferFrom)
+ * contract of the deposit and calling a handler to lock the L1 funds. (e.g., transferFrom)
*
* @param _l1Token Address of the L1 ERC20 we are depositing
* @param _l2Token Address of the L1 respective L2 ERC20
diff --git a/public/content/translations/it/roadmap/merge/index.md b/public/content/translations/it/roadmap/merge/index.md
index c3c8b741c04..06cded798a0 100644
--- a/public/content/translations/it/roadmap/merge/index.md
+++ b/public/content/translations/it/roadmap/merge/index.md
@@ -122,7 +122,7 @@ La Fusione ha inoltre gettato le basi per ulteriori aggiornamenti di scalabilit
🖼 Link to asset:
setURL(event.target.value)}
/>
🤔 Name:
setName(event.target.value)}
/>
✍️ Description:
setDescription(event.target.value)}
/>
diff --git a/public/content/translations/ja/developers/tutorials/optimism-std-bridge-annotated-code/index.md b/public/content/translations/ja/developers/tutorials/optimism-std-bridge-annotated-code/index.md
index 061558e6078..d1b9c3ffae4 100644
--- a/public/content/translations/ja/developers/tutorials/optimism-std-bridge-annotated-code/index.md
+++ b/public/content/translations/ja/developers/tutorials/optimism-std-bridge-annotated-code/index.md
@@ -725,7 +725,7 @@ contract L1StandardBridge is IL1StandardBridge, CrossDomainEnabled {
```solidity
/**
* @dev Performs the logic for deposits by informing the L2 Deposited Token
- * contract of the deposit and calling a handler to lock the L1 funds. (e.g. transferFrom)
+ * contract of the deposit and calling a handler to lock the L1 funds. (e.g., transferFrom)
*
* @param _l1Token Address of the L1 ERC20 we are depositing
* @param _l2Token Address of the L1 respective L2 ERC20
diff --git a/public/content/translations/ja/roadmap/merge/index.md b/public/content/translations/ja/roadmap/merge/index.md
index 04b089ba24f..9bed7f65de0 100644
--- a/public/content/translations/ja/roadmap/merge/index.md
+++ b/public/content/translations/ja/roadmap/merge/index.md
@@ -122,7 +122,7 @@ id="developers">
🖼 Link to asset:
setURL(event.target.value)}
/>
🤔 Name:
setName(event.target.value)}
/>
✍️ Description:
setDescription(event.target.value)}
/>
diff --git a/public/content/translations/pt-br/developers/tutorials/optimism-std-bridge-annotated-code/index.md b/public/content/translations/pt-br/developers/tutorials/optimism-std-bridge-annotated-code/index.md
index 7697cff63b4..563bb7c50e7 100644
--- a/public/content/translations/pt-br/developers/tutorials/optimism-std-bridge-annotated-code/index.md
+++ b/public/content/translations/pt-br/developers/tutorials/optimism-std-bridge-annotated-code/index.md
@@ -725,7 +725,7 @@ Estas duas funções são wrappers em volta do `_initiateERC20Deposit`, a funç
```solidity
/**
* @dev Performs the logic for deposits by informing the L2 Deposited Token
- * contract of the deposit and calling a handler to lock the L1 funds. (e.g. transferFrom)
+ * contract of the deposit and calling a handler to lock the L1 funds. (e.g., transferFrom)
*
* @param _l1Token Address of the L1 ERC20 we are depositing
* @param _l2Token Address of the L1 respective L2 ERC20
diff --git a/public/content/translations/pt-br/roadmap/merge/index.md b/public/content/translations/pt-br/roadmap/merge/index.md
index 3b46871c818..ac9880b77b8 100644
--- a/public/content/translations/pt-br/roadmap/merge/index.md
+++ b/public/content/translations/pt-br/roadmap/merge/index.md
@@ -122,7 +122,7 @@ The Merge também preparou o terreno para futuras atualizações de escalabilida
🖼 Link to asset:
setURL(event.target.value)}
/>
🤔 Name:
setName(event.target.value)}
/>
✍️ Description:
setDescription(event.target.value)}
/>
@@ -448,7 +448,7 @@ function addWalletListener() {
Let's quickly break down what's happening here:
-- First, our function checks if `window.ethereum` is enabled \(i.e. MetaMask is installed\).
+- First, our function checks if `window.ethereum` is enabled \(i.e., MetaMask is installed\).
- If it's not, we simply set our `status` state variable to a JSX string that prompts the user to install MetaMask.
- If it is enabled, we set up the listener `window.ethereum.on("accountsChanged")` on line 3 that listens for state changes in the MetaMask wallet, which include when the user connects an additional account to the dApp, switches accounts, or disconnects an account. If there is at least one account connected, the `walletAddress` state variable is updated as the first account in the `accounts` array returned by the listener. Otherwise, `walletAddress` is set as an empty string.
diff --git a/public/content/translations/ro/developers/tutorials/optimism-std-bridge-annotated-code/index.md b/public/content/translations/ro/developers/tutorials/optimism-std-bridge-annotated-code/index.md
index 3546d2bb4a3..4ffc427fc42 100644
--- a/public/content/translations/ro/developers/tutorials/optimism-std-bridge-annotated-code/index.md
+++ b/public/content/translations/ro/developers/tutorials/optimism-std-bridge-annotated-code/index.md
@@ -725,7 +725,7 @@ These two functions are wrappers around `_initiateERC20Deposit`, the function th
```solidity
/**
* @dev Performs the logic for deposits by informing the L2 Deposited Token
- * contract of the deposit and calling a handler to lock the L1 funds. (e.g. transferFrom)
+ * contract of the deposit and calling a handler to lock the L1 funds. (e.g., transferFrom)
*
* @param _l1Token Address of the L1 ERC20 we are depositing
* @param _l2Token Address of the L1 respective L2 ERC20
diff --git a/public/content/translations/ro/roadmap/merge/index.md b/public/content/translations/ro/roadmap/merge/index.md
index fc595ad299f..94ae58d91c9 100644
--- a/public/content/translations/ro/roadmap/merge/index.md
+++ b/public/content/translations/ro/roadmap/merge/index.md
@@ -115,7 +115,7 @@ De asemenea, Fuziunea a creat posibilitatea pentru și mai multe modernizări de
🖼 Link to asset:
setURL(event.target.value)}
/>
🤔 Name:
setName(event.target.value)}
/>
✍️ Description:
setDescription(event.target.value)}
/>
diff --git a/public/content/translations/tr/developers/tutorials/optimism-std-bridge-annotated-code/index.md b/public/content/translations/tr/developers/tutorials/optimism-std-bridge-annotated-code/index.md
index f6bcc4111b5..9fb38aa2b01 100644
--- a/public/content/translations/tr/developers/tutorials/optimism-std-bridge-annotated-code/index.md
+++ b/public/content/translations/tr/developers/tutorials/optimism-std-bridge-annotated-code/index.md
@@ -725,7 +725,7 @@ Bu iki fonksiyon, gerçek ERC-20 yatırma işlemini yöneten fonksiyon olan `_in
```solidity
/**
* @dev Performs the logic for deposits by informing the L2 Deposited Token
- * contract of the deposit and calling a handler to lock the L1 funds. (e.g. transferFrom)
+ * contract of the deposit and calling a handler to lock the L1 funds. (e.g., transferFrom)
*
* @param _l1Token Address of the L1 ERC20 we are depositing
* @param _l2Token Address of the L1 respective L2 ERC20
diff --git a/public/content/translations/tr/roadmap/merge/index.md b/public/content/translations/tr/roadmap/merge/index.md
index 05b67d363e1..e69b0e26514 100644
--- a/public/content/translations/tr/roadmap/merge/index.md
+++ b/public/content/translations/tr/roadmap/merge/index.md
@@ -122,7 +122,7 @@ Birleşim aynı zamanda, iş ispatı altında mümkün olmayan daha fazla ölçe
🖼 Link to asset:
setURL(event.target.value)}
/>
🤔 Name:
setName(event.target.value)}
/>
✍️ Description:
setDescription(event.target.value)}
/>
diff --git a/public/content/translations/zh/developers/tutorials/optimism-std-bridge-annotated-code/index.md b/public/content/translations/zh/developers/tutorials/optimism-std-bridge-annotated-code/index.md
index be1a3248231..c5185d455c7 100644
--- a/public/content/translations/zh/developers/tutorials/optimism-std-bridge-annotated-code/index.md
+++ b/public/content/translations/zh/developers/tutorials/optimism-std-bridge-annotated-code/index.md
@@ -725,7 +725,7 @@ contract L1StandardBridge is IL1StandardBridge, CrossDomainEnabled {
```solidity
/**
* @dev Performs the logic for deposits by informing the L2 Deposited Token
- * contract of the deposit and calling a handler to lock the L1 funds. (e.g. transferFrom)
+ * contract of the deposit and calling a handler to lock the L1 funds. (e.g., transferFrom)
*
* @param _l1Token Address of the L1 ERC20 we are depositing
* @param _l2Token Address of the L1 respective L2 ERC20
diff --git a/public/content/translations/zh/roadmap/merge/index.md b/public/content/translations/zh/roadmap/merge/index.md
index b7dc09a114f..95924cb71e1 100644
--- a/public/content/translations/zh/roadmap/merge/index.md
+++ b/public/content/translations/zh/roadmap/merge/index.md
@@ -122,7 +122,7 @@ id="developers">
{
+ const t = await getTranslations({
+ namespace: "page-community",
+ })
+ return (
+
)
}
diff --git a/src/components/MdComponents/index.tsx b/src/components/MdComponents/index.tsx
index f59fd908f34..bfb7dbf4586 100644
--- a/src/components/MdComponents/index.tsx
+++ b/src/components/MdComponents/index.tsx
@@ -17,6 +17,7 @@ import MarkdownImage from "@/components/Image/MarkdownImage"
import IssuesList from "@/components/IssuesList"
import LocaleDateTime from "@/components/LocaleDateTime"
import MainArticle from "@/components/MainArticle"
+import { PieChart } from "@/components/PieChart"
import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
import TooltipLink from "@/components/TooltipLink"
import { ButtonLink } from "@/components/ui/buttons/Button"
@@ -177,6 +178,7 @@ export const reactComponents = {
FeaturedText,
GlossaryTooltip,
Page,
+ PieChart,
QuizWidget: StandaloneQuizWidget,
IssuesList,
Tag,
diff --git a/src/components/PieChart/index.tsx b/src/components/PieChart/index.tsx
new file mode 100644
index 00000000000..7b993bddd6c
--- /dev/null
+++ b/src/components/PieChart/index.tsx
@@ -0,0 +1,255 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+ Cell,
+ Legend,
+ Pie,
+ PieChart as RechartsPieChart,
+ ResponsiveContainer,
+ type TooltipProps,
+} from "recharts"
+import type { Formatter } from "recharts/types/component/DefaultLegendContent"
+
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card"
+import {
+ ChartConfig,
+ ChartContainer,
+ ChartTooltip,
+} from "@/components/ui/chart"
+
+type PieChartDataPoint = { name: string; value: number }
+
+/**
+ * PieChartProps defines the properties for the PieChart component.
+ *
+ * @property {PieChartDataPoint[]} data - The data to be displayed in the chart. Each object should have a `name` and `value` property.
+ * @property {string} [title] - The title of the chart.
+ * @property {string} [description] - The description of the chart.
+ * @property {string} [footerText] - The footer text of the chart.
+ * @property {string} [footerSubText] - The footer subtext of the chart.
+ * @property {boolean} [showPercentage=true] - Whether to show percentage values in legend and tooltips.
+ * @property {number} [minSlicePercentage=1] - Minimum percentage to show individual slices (smaller values grouped as "Other").
+ */
+type PieChartProps = {
+ data: PieChartDataPoint[]
+ title?: string
+ description?: string
+ footerText?: string
+ footerSubText?: string
+ showPercentage?: boolean
+ minSlicePercentage?: number
+}
+
+const defaultChartConfig = {
+ value: {
+ label: "Value",
+ color: "hsl(var(--accent-a))",
+ },
+} satisfies ChartConfig
+
+const COLORS = [
+ "hsla(var(--accent-a))",
+ "hsla(var(--accent-b))",
+ "hsla(var(--accent-c))",
+ "hsla(var(--accent-a-hover))",
+ "hsla(var(--accent-b-hover))",
+ "hsla(var(--accent-c-hover))",
+]
+
+const generateColor = (index: number): string => {
+ if (index < COLORS.length) {
+ return COLORS[index]
+ }
+ const hue = (index * 137.508) % 360
+ const saturation = 70 + (index % 2) * 15
+ const lightness = 50 + (index % 3) * 8
+ return `hsl(${hue}, ${saturation}%, ${lightness}%)`
+}
+
+// Utility function to validate and process data
+const processData = (
+ data: PieChartDataPoint[],
+ minSlicePercentage: number = 1
+): PieChartDataPoint[] => {
+ const nonZeroData = data.filter((item) => item.value > 0)
+
+ const total = nonZeroData.reduce((sum, item) => sum + item.value, 0)
+
+ if (total === 0) return []
+
+ const mainItems = nonZeroData.filter(
+ (item) => (item.value / total) * 100 >= minSlicePercentage
+ )
+ const smallItems = nonZeroData.filter(
+ (item) => (item.value / total) * 100 < minSlicePercentage
+ )
+
+ // Group small items into "Other" if there are any
+ const processedData = [...mainItems]
+ if (smallItems.length > 0) {
+ const otherValue = smallItems.reduce((sum, item) => sum + item.value, 0)
+ processedData.push({ name: "Other", value: otherValue })
+ }
+
+ return processedData
+}
+
+export function PieChart({
+ data,
+ title,
+ description,
+ footerText,
+ footerSubText,
+ showPercentage = true,
+ minSlicePercentage = 0,
+}: PieChartProps) {
+ const processedData = processData(data, minSlicePercentage)
+
+ if (processedData.length === 0) {
+ return (
+
+ {communityHubs.map((hub) => (
+
+ )
+}
+
+export default CommunityHubsList
diff --git a/src/components/History/NetworkUpgradeSummary.tsx b/src/components/History/NetworkUpgradeSummary.tsx
index 16831fb8fe9..7301274af2a 100644
--- a/src/components/History/NetworkUpgradeSummary.tsx
+++ b/src/components/History/NetworkUpgradeSummary.tsx
@@ -9,7 +9,8 @@ import { Flex, Stack } from "@/components/ui/flex"
import { getLocaleForNumberFormat } from "@/lib/utils/translations"
-import NetworkUpgradeSummaryData from "../../data/NetworkUpgradeSummaryData"
+import networkUpgradeSummaryData from "@/data/networkUpgradeSummaryData"
+
import Emoji from "../Emoji"
import InlineLink from "../ui/Link"
@@ -32,7 +33,7 @@ const NetworkUpgradeSummary = ({ name }: NetworkUpgradeSummaryProps) => {
blockNumber,
epochNumber,
slotNumber,
- } = NetworkUpgradeSummaryData[name]
+ } = networkUpgradeSummaryData[name]
// TODO fix dateTimeAsString
// calculate date format only on the client side to avoid hydration issues
diff --git a/src/components/Homepage/CodeExamples.tsx b/src/components/Homepage/CodeExamples.tsx
index bd932ce8651..ca5a1d8aa95 100644
--- a/src/components/Homepage/CodeExamples.tsx
+++ b/src/components/Homepage/CodeExamples.tsx
@@ -147,26 +147,24 @@ const CodeExamples = ({ title, codeExamples }: CodeExamplesProps) => {
))}
- {isModalOpen && (
-
+
+ ))}
+
+
+
+
+
+ {t("page-community-community-hub-list-h3")}
+
+ {hub.location}
+
+
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ {footerText && (
+
+
+ {footerText}
+ )}
+ {footerSubText && (
+
+ {footerSubText}
+
+ )}
+