+
(
-
- supports_withdrawals: Array
- url: string
-}
-
-interface Layer2 {
- name: string
- bridgeWallets: Array
- bridge: string
-}
-
-interface Option {
- value: string
- label: string
-}
-
-interface Layer2Option extends Option {
- l2: Layer2
-}
-
-interface ExchangeOption extends Option {
- cex: Exchange
-}
-
-interface CexOnboardOption extends Option {
- cexOnboard: CexOnboard
-}
-
-export type Layer2OnboardProps = {
- layer2DataCombined: Array
- ethIcon: StaticImageData
- ethIconAlt: string
-}
-
-const Layer2Onboard = ({
- layer2DataCombined,
- ethIcon,
- ethIconAlt,
-}: Layer2OnboardProps) => {
- const { t } = useTranslation("page-layer-2")
-
- const [selectedCexOnboard, setSelectedCexOnboard] = useState<
- CexOnboard | undefined
- >(undefined)
- const [selectedExchange, setSelectedExchange] = useState<
- Exchange | undefined
- >(undefined)
- const [selectedL2, setSelectedL2] = useState(undefined)
-
- const layer2Options: Array = layer2DataCombined.map((l2) => {
- return {
- label: l2.name,
- value: l2.name,
- l2,
- }
- })
-
- const cexSupportOptions: Array = cexSupport.map(
- (cex: Exchange) => {
- return {
- label: cex.name,
- value: cex.name,
- cex,
- }
- }
- )
-
- const cexOnboardOptions: Array = cexOnboardData.map(
- (cexOnboard: CexOnboard) => {
- return {
- label: cexOnboard.name,
- value: cexOnboard.name,
- cexOnboard: cexOnboard,
- }
- }
- )
-
- const gridContentPlacementStyles = {
- gridContainer: {
- columns: { base: 1, md: 2 },
- templateRows: {
- base: "repeat(3, min-content)",
- md: "repeat(2, min-content)",
- },
- columnGap: "70px",
- rowGap: "10px",
- },
- selectedL2: {
- gridRow: { base: 2, md: "2/-1" },
- gridColumn: { md: "1/2" },
- },
- rightSideSelected: {
- gridRow: { md: "2/-1" },
- gridColumn: { md: "2/-1" },
- },
- logo: {
- gridColumn: { md: "1 / 3" },
- gridRow: { base: selectedL2 ? 3 : 2, md: 2 },
- placeSelf: "center",
- },
- } as const
-
- const handleLayer2SelectChange: SelectOnChange = (
- selectedOption
- ) => {
- if (!selectedOption) return
-
- trackCustomEvent({
- eventCategory: `Selected layer 2 to bridge to`,
- eventAction: `Clicked`,
- eventName: `${selectedOption.l2.name} bridge selected`,
- eventValue: `${selectedOption.l2.name}`,
- })
- setSelectedL2(selectedOption.l2)
- }
-
- const handleExchangeOnboard: SelectOnChange<
- ExchangeOption | CexOnboardOption
- > = (selectedOption) => {
- if (!selectedOption) return
-
- if ("cex" in selectedOption) {
- trackCustomEvent({
- eventCategory: `Selected cex to onboard`,
- eventAction: `Clicked`,
- eventName: `${selectedOption.label} selected`,
- eventValue: `${selectedOption.label}`,
- })
-
- setSelectedExchange(selectedOption.cex)
- setSelectedCexOnboard(undefined)
- } else {
- trackCustomEvent({
- eventCategory: `Selected cexOnboard to onboard`,
- eventAction: `Clicked`,
- eventName: `${selectedOption.label} selected`,
- eventValue: `${selectedOption.label}`,
- })
- setSelectedCexOnboard(selectedOption.cexOnboard)
- setSelectedExchange(undefined)
- }
- }
-
- return (
-
-
-
- {t("layer-2-onboard-title")}
-
- {t("layer-2-onboard-1")}
-
-
-
- {/* LeftDescription */}
-
- {t("layer-2-onboard-wallet-title")}
- {t("layer-2-onboard-wallet-1")}
-
-
- {t("layer-2-more-on-bridges")}
-
-
-
- {/* LeftSelected */}
-
-
-
-
- {/* RightDescription */}
-
- {t("layer-2-onboard-exchange-title")}
- {t("layer-2-onboard-exchange-1")}
-
- {t("layer-2-onboard-exchange-2")}{" "}
-
- {t("layer-2-onboard-find-a-wallet")}
-
-
-
- {/* RightSelect */}
-
-
-
- {/* LeftSelected extra */}
- {selectedL2 && (
-
-
-
- {`${t("layer-2-onboard-wallet-selected-1")} ${
- selectedL2.name
- } ${t("layer-2-onboard-wallet-selected-2")}`}
-
- {selectedL2.bridgeWallets.join(", ")}
-
- {`${selectedL2.name} ${t("layer-2-bridge")}`}
-
-
-
- )}
- {/* RightSelect exchange */}
- {selectedExchange && (
-
-
-
-
- {t("layer-2-deposits")}
-
- {selectedExchange.supports_deposits.map((l2) => (
- {l2}
- ))}
-
-
-
- {t("layer-2-withdrawals")}
-
- {selectedExchange.supports_withdrawals.map((l2) => (
- {l2}
- ))}
-
-
-
-
- {`${t("layer-2-go-to")} ${selectedExchange.name}`}
-
-
-
- )}
- {/* RightSelect Cex */}
- {selectedCexOnboard && (
-
-
- Supported exchanges
- {selectedCexOnboard.cex_support.join(", ")}
- Supported layer 2s
- {selectedCexOnboard.network_support.join(", ")}
-
- {`${t("layer-2-go-to")} ${selectedCexOnboard.name}`}
-
-
-
- )}
- {/* EthLogo */}
-
-
-
-
+
+ Network maturity: {maturityDescription[maturity].label}
+
+
+ {maturityDescription[maturity].description}
+
+
+ }
+ >
+
+ {maturity.toUpperCase()}
+
+
+ )
+}
+
+export default NetworkMaturityTooltip
diff --git a/src/components/Layer2NetworksTable/NetworkUsageChart.tsx b/src/components/Layer2NetworksTable/NetworkUsageChart.tsx
new file mode 100644
index 00000000000..3f7010cbc93
--- /dev/null
+++ b/src/components/Layer2NetworksTable/NetworkUsageChart.tsx
@@ -0,0 +1,157 @@
+import { Bar, BarChart, LabelList, YAxis } from "recharts"
+
+import { ChartConfig, ChartContainer, ChartLegend } from "@/components/ui/chart"
+
+const CustomLegend = ({ payload, chartConfig }) => {
+ return (
+
+ {payload.map((entry, index) => (
+
+
+
{chartConfig[entry.value].label}
+
+ ))}
+
+ )
+}
+
+const NetworkUsageChart = ({ usageData }) => {
+ const chartData = (() => {
+ // Calculate the sum of all values to normalize the data
+ const total = Object.values(usageData).reduce(
+ (sum: number, value: unknown) => sum + (value as number),
+ 0
+ )
+
+ const formatValue = (value: number) => {
+ const percentage = (value / total) * 100
+ return percentage < 1
+ ? Number(percentage.toFixed(1))
+ : Math.round(percentage)
+ }
+
+ return [
+ {
+ nft: formatValue(usageData.nft),
+ defi: formatValue(usageData.defi),
+ social: formatValue(usageData.social),
+ token_transfers: formatValue(usageData.token_transfers),
+ unlabeled: formatValue(usageData.unlabeled),
+ },
+ ]
+ })()
+
+ const chartConfig = {
+ nft: {
+ label: "NFT",
+ color: "#0872FC",
+ },
+ defi: {
+ label: "DeFi",
+ color: "#C32E8A",
+ },
+ social: {
+ label: "Social",
+ color: "#1B9A92",
+ },
+ token_transfers: {
+ label: "Token Transfers",
+ color: "#8E30FF",
+ },
+ unlabeled: {
+ label: "Unlabeled",
+ color: "hsl(var(--body))",
+ },
+ } satisfies ChartConfig
+
+ return (
+
+
+ dataMax + 15]}
+ axisLine={false}
+ tickLine={false}
+ fontSize={12}
+ tickFormatter={(value) => `${value}%`}
+ hide
+ />
+
+ `${value}%`}
+ />
+
+
+ `${value}%`}
+ />
+
+
+ `${value}%`}
+ />
+
+
+ `${value}%`}
+ />
+
+
+ `${value}%`}
+ />
+
+
+
+ )
+}
+
+export default NetworkUsageChart
diff --git a/src/components/Layer2NetworksTable/NetworksNoResults.tsx b/src/components/Layer2NetworksTable/NetworksNoResults.tsx
new file mode 100644
index 00000000000..799d8493659
--- /dev/null
+++ b/src/components/Layer2NetworksTable/NetworksNoResults.tsx
@@ -0,0 +1,43 @@
+import { useTranslation } from "next-i18next"
+
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
+import { Button } from "../ui/buttons/Button"
+
+const FindWalletsNoResults = ({ resetFilters }) => {
+ const { t } = useTranslation("page-wallets-find-wallet")
+
+ // Track empty state
+ trackCustomEvent({
+ eventCategory: "Wallet_empty_state",
+ eventAction: "reset",
+ eventName: "triggered",
+ })
+
+ const handleClick = () => {
+ resetFilters()
+ trackCustomEvent({
+ eventCategory: "Wallet_empty_state",
+ eventAction: "reset",
+ eventName: "reset_button_clicked",
+ })
+ }
+
+ return (
+
+
+
+ {t("page-find-wallet-empty-results-title")}
+
+
+ There are no networks matching your criteria, try adding some filters
+
+
+ {t("page-find-wallet-reset-filters")}
+
+
+
+ )
+}
+
+export default FindWalletsNoResults
diff --git a/src/components/Layer2NetworksTable/NetworksSubComponent.tsx b/src/components/Layer2NetworksTable/NetworksSubComponent.tsx
new file mode 100644
index 00000000000..ca8d484c91a
--- /dev/null
+++ b/src/components/Layer2NetworksTable/NetworksSubComponent.tsx
@@ -0,0 +1,286 @@
+import { MdInfoOutline } from "react-icons/md"
+
+import { ButtonLink } from "@/components/Buttons"
+import NetworkUsageChart from "@/components/Layer2NetworksTable/NetworkUsageChart"
+import InlineLink from "@/components/Link"
+import Tooltip from "@/components/Tooltip"
+
+const formatNumber = (num: number): string => {
+ if (num >= 1e9) {
+ return (num / 1e9).toFixed(2) + "B"
+ }
+ if (num >= 1e6) {
+ return (num / 1e6).toFixed(2) + "M"
+ }
+ if (num >= 1e3) {
+ return (num / 1e3).toFixed(0) + "K"
+ }
+ return num.toString()
+}
+
+const NetworkSubComponent = ({ network }) => {
+ return (
+
+
+
+
+
+
+
+ Age{" "}
+
+ Age
+ Shows how long the networks has been operational.
+
+ Data from{" "}
+
+ Growthepie
+
+ .
+
+
+ }
+ customMatomoEvent={{
+ eventCategory: "l2_networks",
+ eventAction: "tooltip",
+ eventName: "age",
+ }}
+ >
+
+
+
+
+ {(() => {
+ const launch = new Date(network.launchDate)
+ const today = new Date()
+ const yearDiff = today.getFullYear() - launch.getFullYear()
+ const monthDiff = today.getMonth() - launch.getMonth()
+
+ const totalMonths = yearDiff * 12 + monthDiff
+ const years = Math.floor(totalMonths / 12)
+ const months = totalMonths % 12
+
+ return `${years ? years + " year" + (years > 1 ? "s" : "") : ""} ${months ? months + " month" + (months > 1 ? "s" : "") : ""}`.trim()
+ })()}
+
+
+
+
+
+
+ Wallet support{" "}
+
+ Wallet support
+
+ Indicates how many wallet apps support using the
+ network.
+
+
+ }
+ customMatomoEvent={{
+ eventCategory: "l2_networks",
+ eventAction: "tooltip",
+ eventName: "wallet_support",
+ }}
+ >
+
+
+
+
+
+
+ {network.walletsSupportedCount}
+
+
+
+
+
+
+
+
+ Active addresses{" "}
+
+
+ Active addresses (weekly)
+
+
+ Number of active addresses on the network in the past
+ 7 days.
+
+
+ Data from{" "}
+
+ Growthepie
+
+ .
+
+
+ }
+ customMatomoEvent={{
+ eventCategory: "l2_networks",
+ eventAction: "tooltip",
+ eventName: "active_addresses",
+ }}
+ >
+
+
+
+
+
{formatNumber(network.activeAddresses)}
+
+
+
+
+ Fee token{" "}
+
+ Fee token
+
+ The token that is used to pay for transactions and
+ using the network.
+
+
+ }
+ customMatomoEvent={{
+ eventCategory: "l2_networks",
+ eventAction: "tooltip",
+ eventName: "fee_token",
+ }}
+ >
+
+
+
+
+
{network.feeToken.join(", ")}
+
+