diff --git a/app/[locale]/enterprise/_components/CaseCard.tsx b/app/[locale]/enterprise/_components/CaseCard.tsx new file mode 100644 index 00000000000..1d2336f985e --- /dev/null +++ b/app/[locale]/enterprise/_components/CaseCard.tsx @@ -0,0 +1,27 @@ +import { Card } from "@/components/ui/card" + +import { cn } from "@/lib/utils/cn" + +import type { Case } from "../types" + +type CaseCardProps = { + caseStudy: Case + className?: string +} + +const CaseCard = ({ + caseStudy: { name, content }, + className, +}: CaseCardProps) => ( + +

{name}

+

{content}

+ +) + +export default CaseCard diff --git a/app/[locale]/enterprise/_components/CasesColumn.tsx b/app/[locale]/enterprise/_components/CasesColumn.tsx new file mode 100644 index 00000000000..2aa1c1a51c1 --- /dev/null +++ b/app/[locale]/enterprise/_components/CasesColumn.tsx @@ -0,0 +1,21 @@ +import { cn } from "@/lib/utils/cn" + +import type { Case } from "../types" + +import CaseCard from "./CaseCard" + +const CasesColumn = ({ + cases, + className, +}: { + cases: Case[] + className?: string +}) => ( +
+ {cases.map((caseStudy, index) => ( + + ))} +
+) + +export default CasesColumn diff --git a/app/[locale]/enterprise/_components/CasesSwiper.tsx b/app/[locale]/enterprise/_components/CasesSwiper.tsx new file mode 100644 index 00000000000..5100e3cf630 --- /dev/null +++ b/app/[locale]/enterprise/_components/CasesSwiper.tsx @@ -0,0 +1,34 @@ +"use client" + +import { Swiper, SwiperSlide } from "@/components/ui/swiper" + +import type { Case } from "../types" + +import CaseCard from "./CaseCard" + +import { useBreakpointValue } from "@/hooks/useBreakpointValue" + +const CasesSwiper = ({ cases }: { cases: Case[] }) => { + const slidesPerView = useBreakpointValue({ + base: 1.2, + sm: 2.2, + }) + + return ( + + {cases.map((caseStudy) => ( + + + + ))} + + ) +} + +export default CasesSwiper diff --git a/app/[locale]/enterprise/_components/FeatureCard.tsx b/app/[locale]/enterprise/_components/FeatureCard.tsx new file mode 100644 index 00000000000..07e29f1e855 --- /dev/null +++ b/app/[locale]/enterprise/_components/FeatureCard.tsx @@ -0,0 +1,59 @@ +import dynamic from "next/dynamic" + +import { Card } from "@/components/ui/card" +import { Skeleton } from "@/components/ui/skeleton" + +import { cn } from "@/lib/utils/cn" + +import type { Feature } from "../types" + +const FallbackIcon = () => + +const IconComponents = { + ExtraSecurity: dynamic( + () => import("@/components/icons/extra-security.svg"), + { loading: () => } + ), + FutureProofing: dynamic( + () => import("@/components/icons/future-proofing.svg"), + { loading: () => } + ), + BetterUX: dynamic(() => import("@/components/icons/better-ux.svg"), { + loading: () => , + }), + CheaperTransactions: dynamic( + () => import("@/components/icons/cheaper-transactions.svg"), + { loading: () => } + ), +} + +type IconComponent = keyof typeof IconComponents + +const FeatureCard = ({ + feature: { header, content, iconName }, + className, +}: { + feature: Feature + className?: string +}) => { + const Icon = IconComponents[iconName as IconComponent] + return ( + + +

{header}

+ {content.map((p, i) => ( +

+ {p} +

+ ))} + + ) +} + +export default FeatureCard diff --git a/app/[locale]/enterprise/_components/FeaturesSwiper.tsx b/app/[locale]/enterprise/_components/FeaturesSwiper.tsx new file mode 100644 index 00000000000..ac54278c05b --- /dev/null +++ b/app/[locale]/enterprise/_components/FeaturesSwiper.tsx @@ -0,0 +1,31 @@ +"use client" + +import { Swiper, SwiperSlide } from "@/components/ui/swiper" + +import type { Feature } from "../types" + +import FeatureCard from "./FeatureCard" + +import { useBreakpointValue } from "@/hooks/useBreakpointValue" + +const FeaturesSwiper = ({ features }: { features: Feature[] }) => { + const slidesPerView = useBreakpointValue({ + base: 1.1, + sm: 1.5, + }) + + return ( + + {features.map((feature) => ( + + + + ))} + + ) +} + +export default FeaturesSwiper diff --git a/app/[locale]/enterprise/constants.ts b/app/[locale]/enterprise/constants.ts new file mode 100644 index 00000000000..528ba6ce7a7 --- /dev/null +++ b/app/[locale]/enterprise/constants.ts @@ -0,0 +1,3 @@ +// TODO: Confirm +export const ENTERPRISE_MAILTO = + "mailto:enterprise@ethereum.org?subject=Enterprise%20inquiry" diff --git a/app/[locale]/enterprise/page.tsx b/app/[locale]/enterprise/page.tsx new file mode 100644 index 00000000000..86f67430b9e --- /dev/null +++ b/app/[locale]/enterprise/page.tsx @@ -0,0 +1,520 @@ +import dynamic from "next/dynamic" +import { getTranslations } from "next-intl/server" + +import type { Lang, StatsBoxMetric } from "@/lib/types" + +import ActivityStats from "@/components/ActivityStats" +import { HubHero } from "@/components/Hero" +import Checkmark from "@/components/icons/checkmark.svg" +import Adidas from "@/components/icons/enterprise/adidas.svg" +import Azure from "@/components/icons/enterprise/azure.svg" +import BancoSantander from "@/components/icons/enterprise/banco-santander.svg" +import BASF from "@/components/icons/enterprise/basf.svg" +import BlackRock from "@/components/icons/enterprise/blackrock.svg" +import BMW from "@/components/icons/enterprise/bmw.svg" +import CocaCola from "@/components/icons/enterprise/coca-cola.svg" +import EuropeanInvestmentBank from "@/components/icons/enterprise/european-investment-bank.svg" +import EY from "@/components/icons/enterprise/ey.svg" +import Fox from "@/components/icons/enterprise/fox.svg" +import FranklinTempleton from "@/components/icons/enterprise/franklin-templeton.svg" +import JPMorgan from "@/components/icons/enterprise/jpmorgan.svg" +import Lamborghini from "@/components/icons/enterprise/lamborghini.svg" +import LouisVuitton from "@/components/icons/enterprise/louis-vuitton.svg" +import Mastercard from "@/components/icons/enterprise/mastercard.svg" +import MediLedger from "@/components/icons/enterprise/mediledger.svg" +import Nike from "@/components/icons/enterprise/nike.svg" +import Opera from "@/components/icons/enterprise/opera.svg" +import PayPal from "@/components/icons/enterprise/paypal.svg" +import Samsung from "@/components/icons/enterprise/samsung.svg" +import SAP from "@/components/icons/enterprise/sap.svg" +import Siemens from "@/components/icons/enterprise/siemens.svg" +import Sony from "@/components/icons/enterprise/sony.svg" +import Sothebys from "@/components/icons/enterprise/sothebys.svg" +import Swarm from "@/components/icons/enterprise/swarm.svg" +import TMobile from "@/components/icons/enterprise/tmobile.svg" +import Verizon from "@/components/icons/enterprise/verizon.svg" +import Visa from "@/components/icons/enterprise/visa.svg" +import Walmart from "@/components/icons/enterprise/walmart.svg" +import WFP from "@/components/icons/enterprise/wfp.svg" +import MainArticle from "@/components/MainArticle" +import Translation from "@/components/Translation" +import { ButtonLink } from "@/components/ui/buttons/Button" +import { Card } from "@/components/ui/card" +import { Skeleton, SkeletonLines } from "@/components/ui/skeleton" + +import { cn } from "@/lib/utils/cn" +// import { dataLoader } from "@/lib/utils/data/dataLoader" +import { getMetadata } from "@/lib/utils/metadata" + +// import { BASE_TIME_UNIT } from "@/lib/constants" +import CasesColumn from "./_components/CasesColumn" +import FeatureCard from "./_components/FeatureCard" +import { ENTERPRISE_MAILTO } from "./constants" +import type { Case, EcosystemPlayer, Feature } from "./types" +import { parseActivity } from "./utils" + +import { fetchEthereumStablecoinsMcap } from "@/lib/api/fetchEthereumStablecoinsMcap" +import { fetchEthPrice } from "@/lib/api/fetchEthPrice" +import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie" +import { fetchTotalEthStaked } from "@/lib/api/fetchTotalEthStaked" +import EthGlyph from "@/public/images/assets/svgs/eth-diamond-rainbow.svg" +import heroImage from "@/public/images/heroes/enterprise-hero-white.png" + +const FeaturesSwiper = dynamic(() => import("./_components/FeaturesSwiper"), { + ssr: false, + loading: () => ( + + + + + + ), +}) + +const CasesSwiper = dynamic(() => import("./_components/CasesSwiper"), { + ssr: false, + loading: () => ( + + + + + ), +}) + +// TODO: Switch back to this for cache and mock-data dev fallback +// const loadData = dataLoader( +// [ +// ["growThePieData", fetchGrowThePie], +// ["ethereumStablecoins", fetchEthereumStablecoinsMcap], +// ["ethPrice", fetchEthPrice], +// ["totalEthStaked", fetchTotalEthStaked], +// ], +// BASE_TIME_UNIT * 1000 +// ) + +const Page = async ({ params }: { params: { locale: Lang } }) => { + const { locale } = params + + const t = await getTranslations({ locale, namespace: "page-enterprise" }) + + // const [{ txCount }, stablecoinMarketCap, ethPrice, totalEthStaked] = + // await loadData() + const { txCount, txCostsMedianUsd } = await fetchGrowThePie() + const stablecoinMarketCap = await fetchEthereumStablecoinsMcap() + const ethPrice = await fetchEthPrice() + const totalEthStaked = await fetchTotalEthStaked() + + const metrics = await parseActivity({ + txCount, + txCostsMedianUsd, + stablecoinMarketCap, + ethPrice, + totalEthStaked, + }) + + const signals: StatsBoxMetric[] = [ + { + label: "Years", + state: { value: "10" }, // TODO: Calculate to future-proof, avoid hard-coding + }, + { + label: "Upgrades", + state: { value: "15" }, // TODO: Calculate from upgrades list + }, + { + label: "Downtime", + state: { value: "0" }, + }, + ] + + const features: Feature[] = [ + { + header: t("page-enterprise-features-1-header"), + content: [t("page-enterprise-features-1-content-1")], + iconName: "ExtraSecurity", + }, + { + header: t("page-enterprise-features-2-header"), + content: [ + t("page-enterprise-features-2-content-1"), + t("page-enterprise-features-2-content-2"), + ], + iconName: "FutureProofing", + }, + { + header: t("page-enterprise-features-3-header"), + content: [ + t("page-enterprise-features-3-content-1"), + t("page-enterprise-features-3-content-2"), + ], + iconName: "BetterUX", + }, + { + header: t("page-enterprise-features-4-header"), + content: [ + t("page-enterprise-features-4-content-1"), + t("page-enterprise-features-4-content-2"), + ], + iconName: "CheaperTransactions", + }, + ] + + const cases: Case[] = [ + { + name: "Blackrock", + content: ( + + ), + }, + { + name: "MediLedger", + content: t("page-enterprise-cases-mediledger-content"), + }, + { + name: "European Investment Bank", + content: ( + + ), + }, + { + name: "T-Mobile & SK Telecom", + content: t("page-enterprise-cases-tmobile-content"), + }, + { + name: "UN World Food Programme", + content: ( + + ), + }, + { + name: "Visa", + content: ( + + ), + }, + ] + + const reasons = [ + { + header: t("page-enterprise-reason-1-header"), + content: t("page-enterprise-reason-1-content"), + }, + { + header: t("page-enterprise-reason-2-header"), + content: t("page-enterprise-reason-2-content"), + }, + { + header: t("page-enterprise-reason-3-header"), + content: t("page-enterprise-reason-3-content"), + }, + { + header: t("page-enterprise-reason-4-header"), + content: t("page-enterprise-reason-4-content"), + }, + ] + + const players: EcosystemPlayer[] = [ + { name: "Adidas", Logo: Adidas, className: "scale-105 origin-bottom" }, + { name: "Azure", Logo: Azure, className: "-translate-y-1" }, + { + name: "Banco Santander", + Logo: BancoSantander, + className: "-translate-y-1", + }, + { name: "BASF", Logo: BASF, className: "text-[28px]" }, + { name: "BlackRock", Logo: BlackRock, className: "text-[32px]" }, + { name: "BMW", Logo: BMW, className: "scale-105 origin-bottom" }, + { name: "Coca-Cola", Logo: CocaCola }, + { + name: "European Investment Bank", + Logo: EuropeanInvestmentBank, + className: "-translate-y-1.5", + }, + { + name: "Ernst & Young Global Limited", + Logo: EY, + className: "scale-105 origin-bottom -translate-y-1.5", + }, + { name: "Franklin Templeton Investments", Logo: FranklinTempleton }, + { name: "Fox", Logo: Fox, className: "text-[32px]" }, + { name: "JP Morgan", Logo: JPMorgan, className: "translate-y-1" }, + { + name: "Lamborghini", + Logo: Lamborghini, + className: "text-[32px] translate-y-0.5", + }, + { name: "Louis Vuitton", Logo: LouisVuitton }, + { name: "Mastercard", Logo: Mastercard }, + { name: "MediLedger", Logo: MediLedger }, + { name: "Nike", Logo: Nike, className: "translate-y-1.5" }, + { name: "Opera", Logo: Opera }, + { name: "PayPal", Logo: PayPal }, + { name: "Samsung", Logo: Samsung, className: "text-[28px]" }, + { name: "SAP", Logo: SAP }, + { name: "Siemens", Logo: Siemens, className: "text-[28px]" }, + { name: "Sony", Logo: Sony, className: "text-[28px]" }, + { name: "Sotheby's", Logo: Sothebys, className: "translate-y-0.5" }, + { name: "Swarm", Logo: Swarm, className: "-translate-y-1" }, + { name: "T-Mobile", Logo: TMobile }, + { + name: "Verizon", + Logo: Verizon, + className: "text-[32px] -translate-y-px", + }, + { name: "Visa", Logo: Visa }, + { name: "Walmart", Logo: Walmart }, + { name: "World Food Programme", Logo: WFP }, + ] + + return ( +
+ + + +
+
+

{t("page-enterprise-metrics-header")}

+

+ +

+
+ + +
+ +
+

{t("page-enterprise-features-header")}

+ +
+ +
+ +
+ {features.map((feature) => ( + + ))} +
+
+ +
+
+

+ {t("page-enterprise-ecosystem-header")} +

+

+ {t("page-enterprise-ecosystem-description")} +

+
+ + {/* A11y list of companies for screen readers */} +
+

{t("page-enterprise-ecosystem-companies")}

+
    + {players.map(({ name }) => ( +
  • {name}
    • + ))} +
+
+ +
+ {Array.from({ length: 3 }).map((_, row) => ( +
+ {Array.from({ length: 3 }).map((_, idx) => ( +
+ {players.map(({ name, Logo, className }) => ( +
+ +
+ ))} +
+ ))} +
+ ))} +
+ +
+
+ +
+
+ +
+ + + +
+ + {t("page-enterprise-ecosystem-cta")} + +
+ +
+
+

+ {t("page-enterprise-why-header")} +

+

+ {t("page-enterprise-why-description")} +

+
+ + + +
+ {reasons.map(({ header, content }) => ( +
+ +

{header}

+

{content}

+
+ ))} +
+
+ +
+
+ +

+ {t("page-enterprise-team-header")} +

+
+

+ {t("page-enterprise-team-description")} +

+ + {t("page-enterprise-hero-cta")} + +
+ +
+ ) +} + +export async function generateMetadata({ + params, +}: { + params: Promise<{ locale: string }> +}) { + const { locale } = await params + const t = await getTranslations({ locale, namespace: "page-enterprise" }) + return await getMetadata({ + locale, + slug: ["enterprise"], + title: t("page-enterprise-hero-title"), + description: t("page-enterprise-metadata-description"), + image: "/images/heroes/enterprise-hero-white.png", + }) +} + +Page.displayName = "EnterprisePage" + +export default Page diff --git a/app/[locale]/enterprise/types.ts b/app/[locale]/enterprise/types.ts new file mode 100644 index 00000000000..a089f5debaf --- /dev/null +++ b/app/[locale]/enterprise/types.ts @@ -0,0 +1,16 @@ +export type Case = { + name: string + content: string | React.ReactNode +} + +export type Feature = { + header: string + content: string[] + iconName: string +} + +export type EcosystemPlayer = { + name: string + Logo: React.FC> + className?: string +} diff --git a/app/[locale]/enterprise/utils.ts b/app/[locale]/enterprise/utils.ts new file mode 100644 index 00000000000..6575bd0fe5d --- /dev/null +++ b/app/[locale]/enterprise/utils.ts @@ -0,0 +1,105 @@ +import { getLocale, getTranslations } from "next-intl/server" + +import type { + AllEnterpriseActivityData, + Lang, + StatsBoxMetric, +} from "@/lib/types" + +import { + formatLargeNumber, + formatLargeUSD, + formatSmallUSD, +} from "@/lib/utils/numbers" +import { getLocaleForNumberFormat } from "@/lib/utils/translations" + +// Convert numerical value to formatted values +export const parseActivity = async ({ + txCount, + txCostsMedianUsd, + stablecoinMarketCap, + ethPrice, + totalEthStaked, +}: AllEnterpriseActivityData): Promise => { + const locale = (await getLocale()) as Lang + const t = await getTranslations({ locale, namespace: "page-enterprise" }) + + const localeForNumberFormat = getLocaleForNumberFormat(locale) + + const txCountFormatted = + "error" in txCount + ? { error: txCount.error } + : { + ...txCount, + value: formatLargeNumber(txCount.value, localeForNumberFormat), + } + + const medianTxCost = + "error" in txCostsMedianUsd + ? { error: txCostsMedianUsd.error } + : { + ...txCostsMedianUsd, + value: formatSmallUSD(txCostsMedianUsd.value, localeForNumberFormat), + } + + const stablecoinMarketCapFormatted = + "error" in stablecoinMarketCap + ? { error: stablecoinMarketCap.error } + : { + ...stablecoinMarketCap, + value: formatLargeUSD( + stablecoinMarketCap.value, + localeForNumberFormat + ), + } + + const hasEthStakerAndPriceData = + "value" in totalEthStaked && "value" in ethPrice + const totalStakedInUsd = hasEthStakerAndPriceData + ? totalEthStaked.value * ethPrice.value + : 0 + + const totalValueSecuringFormatted = !totalStakedInUsd + ? { + error: + "error" in totalEthStaked + ? totalEthStaked.error + : "error" in ethPrice + ? ethPrice.error + : "", + } + : { + ...totalEthStaked, + value: formatLargeUSD(totalStakedInUsd, localeForNumberFormat), + } + + const metrics: StatsBoxMetric[] = [ + { + label: t("page-enterprise-activity-tx-count"), + apiProvider: "growthepie", + apiUrl: "https://www.growthepie.xyz/fundamentals/transaction-count", + state: txCountFormatted, + }, + { + label: t("page-enterprise-activity-stablecoin-mktcap"), + apiProvider: "DefiLlama", + apiUrl: "https://defillama.com/chain/ethereum", + state: stablecoinMarketCapFormatted, + }, + { + label: t("page-enterprise-activity-value-protecting"), + apiProvider: "Dune Analytics", + apiUrl: "https://dune.com/hildobby/eth2-staking", + state: totalValueSecuringFormatted, + }, + + { + label: t("page-enterprise-activity-media-tx-cost"), + apiProvider: "growthepie", + apiUrl: "https://www.growthepie.xyz/fundamentals/transaction-costs", + state: medianTxCost, + }, + ] + + return metrics +} diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index 26dfd6cf9cd..6d727b71073 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -5,13 +5,16 @@ import { getTranslations, setRequestLocale } from "next-intl/server" import { FaDiscord, FaGithub } from "react-icons/fa6" import { FaXTwitter } from "react-icons/fa6" -import type { AllMetricData, CommunityBlog, ValuesPairing } from "@/lib/types" +import type { + AllHomepageActivityData, + CommunityBlog, + ValuesPairing, +} from "@/lib/types" import type { EventCardProps } from "@/lib/types" import type { Lang } from "@/lib/types" import { CodeExample } from "@/lib/interfaces" import ActivityStats from "@/components/ActivityStats" -import { getActivity } from "@/components/ActivityStats/getActivity" import BannerNotification from "@/components/Banners/BannerNotification" import { ChevronNext } from "@/components/Chevron" import HomeHero from "@/components/Hero/HomeHero" @@ -78,6 +81,7 @@ import { } from "@/lib/constants" import TenYearHomeBanner from "./10years/_components/TenYearHomeBanner" +import { getActivity } from "./utils" import SimpleDomainRegistryContent from "!!raw-loader!@/data/SimpleDomainRegistry.sol" import SimpleTokenContent from "!!raw-loader!@/data/SimpleToken.sol" @@ -410,7 +414,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => { ) .slice(0, 3) as EventCardProps[] // Show 3 events ending soonest - const metricResults: AllMetricData = { + const metricResults: AllHomepageActivityData = { ethPrice, totalEthStaked, totalValueLocked, diff --git a/src/components/ActivityStats/getActivity.tsx b/app/[locale]/utils.ts similarity index 96% rename from src/components/ActivityStats/getActivity.tsx rename to app/[locale]/utils.ts index 0fbe1026c20..bb5b608f49b 100644 --- a/src/components/ActivityStats/getActivity.tsx +++ b/app/[locale]/utils.ts @@ -5,7 +5,7 @@ import { getTranslations } from "next-intl/server" -import type { AllMetricData, Lang, StatsBoxMetric } from "@/lib/types" +import type { AllHomepageActivityData, Lang, StatsBoxMetric } from "@/lib/types" import { getLocaleForNumberFormat } from "@/lib/utils/translations" @@ -44,7 +44,7 @@ export const getActivity = async ( txCount, txCostsMedianUsd, ethPrice, - }: AllMetricData, + }: AllHomepageActivityData, locale: Lang ): Promise => { const t = await getTranslations("page-index") diff --git a/public/content/enterprise/index.md b/public/content/enterprise/use-cases/index.md similarity index 93% rename from public/content/enterprise/index.md rename to public/content/enterprise/use-cases/index.md index 605f69e2d96..3fc53665d0d 100644 --- a/public/content/enterprise/index.md +++ b/public/content/enterprise/use-cases/index.md @@ -1,70 +1,21 @@ --- -title: Enterprise on Ethereum Mainnet +title: Enterprise use cases on Ethereum Mainnet description: Guides, articles, and tools about enterprise applications on the public Ethereum blockchain lang: en --- -# Ethereum for enterprise {#ethereum-for-enterprise} +# Enterprise use cases on Ethereum Mainnet {#ethereum-for-enterprise} Ethereum can help many kinds of businesses, including large companies: - + - Increase trust and reduce the cost of coordination between business parties - Improve business network accountability and operational efficiency - Build new business models and value creation opportunities - Competitively future-proof their organization -In the early years, many enterprise blockchain applications were built on private permissioned Ethereum compatible blockchains or consortium chains. Today, thanks to technological advances which enable greater throughput, lower transaction cost, and privacy, most enterprise applications that use Ethereum technology are being built on the public Ethereum Mainnet or on [Layer 2](/layer-2) chains. - - -## Resources {#enterprise-resources} - -### Further reading {#further-reading} - -Non-technical resources for understanding how businesses can benefit from Ethereum - -- [Why Are Blockchains Useful For Business?](https://entethalliance.org/why-are-blockchains-useful-for-business/) - _Discusses the value of blockchains through the lens of predictability_ -- [Enterprise Ethereum Alliance 2023 Business Readiness Report](https://entethalliance.org/eea-ethereum-business-readiness-report-2023/) - _surveys the potential and capabilities of public Ethereum and the broader Ethereum ecosystem for businesses_ -- [_Ethereum for Business_ by Paul Brody](https://www.uapress.com/product/ethereum-for-business/) - _is a plain-English guide to the use cases that generate returns from asset management to payments to supply chains_ - -### Organizations {#organizations} - -Some collaborative efforts to make Ethereum enterprise friendly have been made by different organizations - -- [Enterprise Ethereum Alliance](https://entethalliance.org/) - The EEA helps organizations to adopt and use Ethereum technology in their daily business operations. Its goal is accelerating business Ethereum through professional and commercial support, advocacy and research, standards development and ecosystem trust services. -- [Global Blockchain Business Council](https://www.gbbc.io/) - The GBBC is an industry association for the blockchain technology ecosystem. Through engaging policymakers and regulators, curating events and in-depth discussions, and driving research, GBBC is dedicated to further adoption of blockchain to create more secure, equitable, and functional societies. - - -## Enterprise developer resources {#enterprise-developer-resources} - -### Scalability solutions {#scalability-solutions} - -Most new blockchain applications are being built on [Layer 2](/layer-2) chains. Layer 2 is a set of technologies or systems that run on top of Ethereum (Layer 1), inherit security properties from Layer 1, and provide greater transaction processing capacity (throughput), lower transaction fees (operating cost), and faster transaction confirmations than Layer 1. Layer 2 scaling solutions are secured by Layer 1, but they enable blockchain applications to handle many more users or actions or data than Layer 1 could accommodate. Many of them leverage recent advances in cryptography and zero-knowledge (ZK) proofs to maximize performance and security, and some offer an additional level of privacy. - -[L2 Beat](https://l2beat.com/scaling/summary) maintains an up to date list of Layer 2 networks and key metrics. - -### Products, services, and tools {#products-and-services} - -- [4EVERLAND](https://www.4everland.org/) - _provides APIs, RPC services and tools for hosting decentralized applications and enabling decentralized storage on Ethereum_ -- [Alchemy](https://www.alchemy.com/) - _provides API services and tools for building and monitoring applications on Ethereum_ -- [Baseline Project](https://www.baseline-protocol.org/) - _a set of tools and libraries that helps enterprises coordinate complex, multi-party business processes and workflows with privacy while keeping data in respective systems of record. The standard enables two or more state machines to achieve and maintain data consistency and workflow continuity by using a network as a common frame of reference._ -- [Blast](https://blastapi.io/) - _an API platform that provides RPC/WSS APIs for Ethereum Archive Mainnet and Testnets._ -- [Blockapps](https://blockapps.net/) - _implementation of the Enterprise Ethereum protocol, tooling and APIs that form the STRATO platform_ -- [Chainlens](https://www.chainlens.com/) - _SaaS and on-prem blockchain data and analytics platform from Web3 Labs_ -- [Chainstack](https://chainstack.com/) - _mainnet and testnet Ethereum infrastructure hosted in public & isolated customer clouds_ -- [ConsenSys](https://consensys.io/) - _provides a range of products and tools for building on Ethereum, as well as consulting and custom development services_ -- [Crossmint](http://crossmint.com/) _Enterprise-grade web3 development platform to deploy smart contracts, enable credit-card and cross chain payments, and use APIs to create, distribute, sell, store, and edit NFTs._ -- [Envision Blockchain](https://envisionblockchain.com/) - _provides enterprise focused consulting and development services specializing in Ethereum Mainnet_ -- [EY OpsChain](https://blockchain.ey.com/products/contract-manager) - _provides a procurement workflow by issuing RFQ’s, contracts, purchase orders, and invoices across your network of trusted business partners_ -- [Hyperledger Besu](https://www.hyperledger.org/use/besu) - _an enterprise focused open-source Ethereum client developed under the Apache 2.0 license and written in Java_ -- [Infura](https://infura.io/) - _scalable API access to the Ethereum and IPFS networks_ -- [Kaleido](https://kaleido.io/) - _an enterprise-focused development platform that offers simplified blockchain and digital asset applications_ -- [Moralis](http://moralis.io/) - _enterprise grade APIs and Nodes with a SOC2 type 2 certification_ -- [Nightfall](https://github.com/EYBlockchain/nightfall_3) - _an application for transferring ERC20, ERC721 and ERC1155 applications under Zero Knowledge, using an Optimistic Rollup, from Ernst & Young_ -- [NodeReal](https://nodereal.io/) - _provides scalable blockchain infrastructure and API services provider for the Web3 ecosystem_ -- [QuickNode](https://www.quicknode.com/) - _provides reliable and fast nodes with high-level APIs like NFT API, Token API, etc., while delivering a unified product suite and enterprise-grade solutions_ -- [Tenderly](https://tenderly.co) - _a Web3 development platform that provides debugging, observability, and infrastructure building blocks for developing, testing, monitoring, and operating smart contracts_ -- [Unibright](https://unibright.io/) - _a team of blockchain specialists, architects, developers and consultants with 20+ years of experience in business processes and integration_ -- [Zeeve](https://www.zeeve.io/) - _provides a range of products and tools for building on Ethereum, also infrastructure and APIs for Enterprise Web3 applications._ + +Get in touch + ## Enterprise applications built on Ethereum {#enterprise-applications-on-ethereum} @@ -77,15 +28,15 @@ Here are some of the enterprise applications that have been built on top of the - [hCaptcha](https://www.hcaptcha.com/) - _Bot prevention CAPTCHA system which pays web site operators for the work done by users to label data for machine learning. Now deployed by Cloudflare_ - [Opera MiniPay](https://www.opera.com/products/minipay) - _makes mobile payments more accessible and secure for people in Africa with a non-custodial wallet and leverages phone numbers for easy transactions_ - [Roxpay](https://www.roxpay.ch/) - _automates pay-per-use asset invoicing and payments_ -- [SAP Digital Currency Hub](https://community.sap.com/t5/technology-blogs-by-sap/cross-border-payments-made-easy-with-digital-money-experience-the-future/ba-p/13560384) - _cross border payments with stablecoins_ -- [Toku](https://www.toku.com/) - _payroll, token grant administration, tax compliance, local employment, benefits & distributed HR solutions_ +- [SAP Digital Currency Hub](https://community.sap.com/t5/technology-blogs-by-sap/cross-border-payments-made-easy-with-digital-money-experience-the-future/ba-p/13560384) - _cross border payments with stablecoins_ +- [Toku](https://www.toku.com/) - _payroll, token grant administration, tax compliance, local employment, benefits & distributed HR solutions_ - [Xerof](https://www.xerof.com/) - _facilitates fast and inexpensive international (cross-border) B2B payments_ ### Finance {#finance} - [ABN AMRO](https://tokeny.com/tokeny-fuels-abn-amro-bank-in-tokenizing-green-bonds-on-polygon/) - _with Tokeny, tokenized green bonds_ - [Anvil](https://anvil.xyz/) - _a system of Ethereum-based smart contracts that manages collateral and issues fully secured credit_ -- [Mata Capital](https://consensys.io/blockchain-use-cases/finance/mata-capital) - _real estate investment tokenization_ +- [Mata Capital](https://consensys.io/blockchain-use-cases/finance/mata-capital) - _real estate investment tokenization_ - [Obligate](https://www.obligate.com/) - _regulated and KYC'd onchain bonds and commercial paper_ - [Siemens](https://press.siemens.com/global/en/pressrelease/siemens-remains-pioneer-another-digital-bond-successfully-issued-blockchain) - _bond issuance_ - [Sila](https://silamoney.com/) - _banking and ACH payments infrastructure-as-a-service, using a stablecoin_ @@ -96,7 +47,7 @@ Here are some of the enterprise applications that have been built on top of the ### Asset tokenization {#tokenization} - [AgroToken](https://agrotoken.io/en/) - _tokenizing and trading agricultural commodities_ -- [Bitbond](https://www.bitbond.com/) - _improves the issuance, settlement and custody of financial assets with tokenization_ +- [Bitbond](https://www.bitbond.com/) - _improves the issuance, settlement and custody of financial assets with tokenization_ - [Blocksquare](https://blocksquare.io/) - _tokenization infrastructure for real estate_ - [Centrifuge](https://centrifuge.io/) - _tokenized receivables financing, debt, and assets_ - [Clearmatics](https://www.clearmatics.com) - _builds decentralised network platforms for the p2p exchange of tokenised value_ @@ -107,7 +58,7 @@ Here are some of the enterprise applications that have been built on top of the - [Rubey](https://www.rubey.be/) - _a platform that tokenizes high-end art to make it accessible to retail investors_ - [Swarm](https://swarm.com/) - _a platform focused on the digitization and trading of real-world assets in a regulatory compliant manner_ - [Thallo](https://www.thallo.io/) - _a platform to integrate digital carbon credits into business transactions_ -- [Tokenchampions](https://tokenchampions.com/) - _tokenizes European football players' image rights_ +- [Tokenchampions](https://tokenchampions.com/) - _tokenizes European football players' image rights_ ### Notarization of data {#notarization-of-data} @@ -142,7 +93,7 @@ Here are some of the enterprise applications that have been built on top of the ### Identity, credentials and certifications {#credentials} - [BCdiploma](https://www.bcdiploma.com/) - _digitizes and verifies diplomas, certificates, and micro-credentials_ -- [Bhutan National Digital Identity](https://www.bhutanndi.com/) - _a foundation for Bhutan’s digital economy, facilitating trusted interactions between individuals and organizations +- [Bhutan National Digital Identity](https://www.bhutanndi.com/) - \_a foundation for Bhutan’s digital economy, facilitating trusted interactions between individuals and organizations - [Hyland Credentials](https://www.hylandcredentials.com) - _digital diplomas and other education credentials, licenses, and certificates_ - [Palau Digital Residency Program](https://rns.id/) - _offers global citizens the ability to have a legal Palau government-issued ID_ - [QuarkID](https://quarkid.org/) _is a self-soverign identity protocol for managing essential personal documents such as birth and marriage certificates, academic credentials, and proof of income, developed by the government of Buenos Aires for use in Argentia and other South American countries_ @@ -156,6 +107,63 @@ Here are some of the enterprise applications that have been built on top of the - [Lamborghini](https://venturebeat.com/games/lamborghini-and-animocas-motorverse-tap-base-blockchain-for-in-game-assets/) - _creates in-game assets for Animoca’s Web3 racing game Motorverse_ - [Nike Swoosh](https://www.swoosh.nike/) - _an NFT platform_ - [Sothbebys Metaverse](https://metaverse.sothebys.com/) - _a digital art NFT marketplace by Sothebys_ -- [Soneium](https://soneium.org/) - _a Layer 2 by Sony to support Web3 games and NFTs +- [Soneium](https://soneium.org/) - \_a Layer 2 by Sony to support Web3 games and NFTs If you would like to add to this list, please see [instructions for contributing](/contributing/). + +## Enterprise developer resources {#enterprise-developer-resources} + +### Scalability solutions {#scalability-solutions} + +Most new blockchain applications are being built on [Layer 2](/layer-2) chains. Layer 2 is a set of technologies or systems that run on top of Ethereum (Layer 1), inherit security properties from Layer 1, and provide greater transaction processing capacity (throughput), lower transaction fees (operating cost), and faster transaction confirmations than Layer 1. Layer 2 scaling solutions are secured by Layer 1, but they enable blockchain applications to handle many more users or actions or data than Layer 1 could accommodate. Many of them leverage recent advances in cryptography and zero-knowledge (ZK) proofs to maximize performance and security, and some offer an additional level of privacy. + +[L2 Beat](https://l2beat.com/scaling/summary) maintains an up to date list of Layer 2 networks and key metrics. + +### Products, services, and tools {#products-and-services} + +- [4EVERLAND](https://www.4everland.org/) - _provides APIs, RPC services and tools for hosting decentralized applications and enabling decentralized storage on Ethereum_ +- [Alchemy](https://www.alchemy.com/) - _provides API services and tools for building and monitoring applications on Ethereum_ +- [Baseline Project](https://www.baseline-protocol.org/) - _a set of tools and libraries that helps enterprises coordinate complex, multi-party business processes and workflows with privacy while keeping data in respective systems of record. The standard enables two or more state machines to achieve and maintain data consistency and workflow continuity by using a network as a common frame of reference._ +- [Blast](https://blastapi.io/) - _an API platform that provides RPC/WSS APIs for Ethereum Archive Mainnet and Testnets._ +- [Blockapps](https://blockapps.net/) - _implementation of the Enterprise Ethereum protocol, tooling and APIs that form the STRATO platform_ +- [Chainlens](https://www.chainlens.com/) - _SaaS and on-prem blockchain data and analytics platform from Web3 Labs_ +- [Chainstack](https://chainstack.com/) - _mainnet and testnet Ethereum infrastructure hosted in public & isolated customer clouds_ +- [ConsenSys](https://consensys.io/) - _provides a range of products and tools for building on Ethereum, as well as consulting and custom development services_ +- [Crossmint](http://crossmint.com/) _Enterprise-grade web3 development platform to deploy smart contracts, enable credit-card and cross chain payments, and use APIs to create, distribute, sell, store, and edit NFTs._ +- [Envision Blockchain](https://envisionblockchain.com/) - _provides enterprise focused consulting and development services specializing in Ethereum Mainnet_ +- [EY OpsChain](https://blockchain.ey.com/products/contract-manager) - _provides a procurement workflow by issuing RFQ’s, contracts, purchase orders, and invoices across your network of trusted business partners_ +- [Hyperledger Besu](https://www.hyperledger.org/use/besu) - _an enterprise focused open-source Ethereum client developed under the Apache 2.0 license and written in Java_ +- [Infura](https://infura.io/) - _scalable API access to the Ethereum and IPFS networks_ +- [Kaleido](https://kaleido.io/) - _an enterprise-focused development platform that offers simplified blockchain and digital asset applications_ +- [Moralis](http://moralis.io/) - _enterprise grade APIs and Nodes with a SOC2 type 2 certification_ +- [Nightfall](https://github.com/EYBlockchain/nightfall_3) - _an application for transferring ERC20, ERC721 and ERC1155 applications under Zero Knowledge, using an Optimistic Rollup, from Ernst & Young_ +- [NodeReal](https://nodereal.io/) - _provides scalable blockchain infrastructure and API services provider for the Web3 ecosystem_ +- [QuickNode](https://www.quicknode.com/) - _provides reliable and fast nodes with high-level APIs like NFT API, Token API, etc., while delivering a unified product suite and enterprise-grade solutions_ +- [Tenderly](https://tenderly.co) - _a Web3 development platform that provides debugging, observability, and infrastructure building blocks for developing, testing, monitoring, and operating smart contracts_ +- [Unibright](https://unibright.io/) - _a team of blockchain specialists, architects, developers and consultants with 20+ years of experience in business processes and integration_ +- [Zeeve](https://www.zeeve.io/) - _provides a range of products and tools for building on Ethereum, also infrastructure and APIs for Enterprise Web3 applications._ + +## Resources {#enterprise-resources} + +### Further reading {#further-reading} + +Non-technical resources for understanding how businesses can benefit from Ethereum + +- [Why Are Blockchains Useful For Business?](https://entethalliance.org/why-are-blockchains-useful-for-business/) - _Discusses the value of blockchains through the lens of predictability_ +- [Enterprise Ethereum Alliance 2023 Business Readiness Report](https://entethalliance.org/eea-ethereum-business-readiness-report-2023/) - _surveys the potential and capabilities of public Ethereum and the broader Ethereum ecosystem for businesses_ +- [_Ethereum for Business_ by Paul Brody](https://www.uapress.com/product/ethereum-for-business/) - _is a plain-English guide to the use cases that generate returns from asset management to payments to supply chains_ + +### Organizations {#organizations} + +Some collaborative efforts to make Ethereum enterprise friendly have been made by different organizations + +- [Enterprise Ethereum Alliance](https://entethalliance.org/) - The EEA helps organizations to adopt and use Ethereum technology in their daily business operations. Its goal is accelerating business Ethereum through professional and commercial support, advocacy and research, standards development and ecosystem trust services. +- [Global Blockchain Business Council](https://www.gbbc.io/) - The GBBC is an industry association for the blockchain technology ecosystem. Through engaging policymakers and regulators, curating events and in-depth discussions, and driving research, GBBC is dedicated to further adoption of blockchain to create more secure, equitable, and functional societies. + + +
+ + Get in touch + +
+ diff --git a/public/images/assets/svgs/eth-diamond-rainbow.svg b/public/images/assets/svgs/eth-diamond-rainbow.svg index 5d3b14cd2c0..ee4df3f6815 100644 --- a/public/images/assets/svgs/eth-diamond-rainbow.svg +++ b/public/images/assets/svgs/eth-diamond-rainbow.svg @@ -1,8 +1,8 @@ - - - - - - - + + + + + + + diff --git a/public/images/heroes/enterprise-hero-transparent.png b/public/images/heroes/enterprise-hero-transparent.png new file mode 100644 index 00000000000..bb5c21d6bc2 Binary files /dev/null and b/public/images/heroes/enterprise-hero-transparent.png differ diff --git a/public/images/heroes/enterprise-hero-white.png b/public/images/heroes/enterprise-hero-white.png new file mode 100644 index 00000000000..a72ac0632b3 Binary files /dev/null and b/public/images/heroes/enterprise-hero-white.png differ diff --git a/src/components/ActivityStats/index.tsx b/src/components/ActivityStats/index.tsx index 405b1f62ed7..23b446e0a2c 100644 --- a/src/components/ActivityStats/index.tsx +++ b/src/components/ActivityStats/index.tsx @@ -1,11 +1,17 @@ +import { getLocale } from "next-intl/server" + import type { StatsBoxMetric } from "@/lib/types" +import { cn } from "@/lib/utils/cn" + import BigNumber from "../BigNumber" type ActivityStatsProps = { metrics: StatsBoxMetric[] + className?: string } -const ActivityStats = async ({ metrics }: ActivityStatsProps) => { +const ActivityStats = async ({ metrics, className }: ActivityStatsProps) => { + const locale = await getLocale() const gridBorderClasses = [ "border-b border-body-light xl:border-e xl:pe-8", "border-b border-body-light xl:ps-8", @@ -13,9 +19,10 @@ const ActivityStats = async ({ metrics }: ActivityStatsProps) => { "xl:ps-8", ] return ( -
+
{metrics.map(({ label, apiProvider, apiUrl, state }, idx) => ( { - const { t } = useTranslation("common") - const locale = useLocale() + const t = await getTranslations({ locale, namespace: "common" }) const lastUpdatedDisplay = lastUpdated && isValidDate(lastUpdated) ? new Intl.DateTimeFormat(locale, { @@ -37,6 +36,7 @@ const BigNumber = ({ : "" return (
{value ? ( <> -
{value}
+
+ {value} +
{children} {sourceName && sourceUrl && ( @@ -63,7 +65,10 @@ const BigNumber = ({ } > - + )}
diff --git a/src/components/CalloutSSR.tsx b/src/components/CalloutSSR.tsx index 7d31d3fe529..6ae0f328604 100644 --- a/src/components/CalloutSSR.tsx +++ b/src/components/CalloutSSR.tsx @@ -49,7 +49,8 @@ const CalloutSSR = ({ {title && (

diff --git a/src/components/Hero/HubHero/index.tsx b/src/components/Hero/HubHero/index.tsx index dd8188aac4b..47062caf339 100644 --- a/src/components/Hero/HubHero/index.tsx +++ b/src/components/Hero/HubHero/index.tsx @@ -6,14 +6,17 @@ import { Stack } from "@/components/ui/flex" import { cn } from "@/lib/utils/cn" -export type HubHeroProps = Omit - +export type HubHeroProps = Omit< + CommonHeroProps, + "breadcrumbs" | "blurDataURL" +> & { className?: string } const HubHero = ({ heroImg, title, header, description, buttons, + className, }: HubHeroProps) => { if (buttons && buttons.length > 2) { throw new Error( @@ -22,7 +25,7 @@ const HubHero = ({ } return ( -
+
{title ? ( -

+

{title}

) : null} diff --git a/src/components/MainArticle.tsx b/src/components/MainArticle.tsx index cbe807d47a8..508ae2dc8fc 100644 --- a/src/components/MainArticle.tsx +++ b/src/components/MainArticle.tsx @@ -8,7 +8,7 @@ const MainArticle = ({ }: React.HTMLAttributes) => (
) diff --git a/src/components/Resources/useResources.tsx b/src/components/Resources/useResources.tsx index 7d01afd6656..17ae565c83e 100644 --- a/src/components/Resources/useResources.tsx +++ b/src/components/Resources/useResources.tsx @@ -96,7 +96,11 @@ export const useResources = ({ txCostsMedianUsd }): DashboardSection[] => { { title: t("page-resources-network-layer2-title"), metric: ( - + Median transaction cost on Ethereum networks ), diff --git a/src/components/icons/better-ux.svg b/src/components/icons/better-ux.svg new file mode 100644 index 00000000000..e22b0536113 --- /dev/null +++ b/src/components/icons/better-ux.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/icons/cheaper-transactions.svg b/src/components/icons/cheaper-transactions.svg new file mode 100644 index 00000000000..e65543b03ce --- /dev/null +++ b/src/components/icons/cheaper-transactions.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/icons/checkmark.svg b/src/components/icons/checkmark.svg new file mode 100644 index 00000000000..d4def9c1a5b --- /dev/null +++ b/src/components/icons/checkmark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/icons/email.svg b/src/components/icons/email.svg new file mode 100644 index 00000000000..5ee5bfc3c19 --- /dev/null +++ b/src/components/icons/email.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/icons/enterprise/adidas.svg b/src/components/icons/enterprise/adidas.svg new file mode 100644 index 00000000000..e4edcf3e766 --- /dev/null +++ b/src/components/icons/enterprise/adidas.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/icons/enterprise/azure.svg b/src/components/icons/enterprise/azure.svg new file mode 100644 index 00000000000..d3ff4d16c96 --- /dev/null +++ b/src/components/icons/enterprise/azure.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/icons/enterprise/banco-santander.svg b/src/components/icons/enterprise/banco-santander.svg new file mode 100644 index 00000000000..f5a8be3effc --- /dev/null +++ b/src/components/icons/enterprise/banco-santander.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/icons/enterprise/basf.svg b/src/components/icons/enterprise/basf.svg new file mode 100644 index 00000000000..68386b23861 --- /dev/null +++ b/src/components/icons/enterprise/basf.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/components/icons/enterprise/blackrock.svg b/src/components/icons/enterprise/blackrock.svg new file mode 100644 index 00000000000..400b54ebd3d --- /dev/null +++ b/src/components/icons/enterprise/blackrock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icons/enterprise/bmw.svg b/src/components/icons/enterprise/bmw.svg new file mode 100644 index 00000000000..db6a8bc4883 --- /dev/null +++ b/src/components/icons/enterprise/bmw.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/icons/enterprise/coca-cola.svg b/src/components/icons/enterprise/coca-cola.svg new file mode 100644 index 00000000000..d29b0141c3e --- /dev/null +++ b/src/components/icons/enterprise/coca-cola.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/icons/enterprise/european-investment-bank.svg b/src/components/icons/enterprise/european-investment-bank.svg new file mode 100644 index 00000000000..b4ac9ecc8de --- /dev/null +++ b/src/components/icons/enterprise/european-investment-bank.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/icons/enterprise/ey.svg b/src/components/icons/enterprise/ey.svg new file mode 100644 index 00000000000..e2c71ff8481 --- /dev/null +++ b/src/components/icons/enterprise/ey.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/icons/enterprise/fox.svg b/src/components/icons/enterprise/fox.svg new file mode 100644 index 00000000000..3c38ff7eeec --- /dev/null +++ b/src/components/icons/enterprise/fox.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/icons/enterprise/franklin-templeton.svg b/src/components/icons/enterprise/franklin-templeton.svg new file mode 100644 index 00000000000..50bac2b31f5 --- /dev/null +++ b/src/components/icons/enterprise/franklin-templeton.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/icons/enterprise/jpmorgan.svg b/src/components/icons/enterprise/jpmorgan.svg new file mode 100644 index 00000000000..50fa00c7dc7 --- /dev/null +++ b/src/components/icons/enterprise/jpmorgan.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/icons/enterprise/lamborghini.svg b/src/components/icons/enterprise/lamborghini.svg new file mode 100644 index 00000000000..d268fbe7cd5 --- /dev/null +++ b/src/components/icons/enterprise/lamborghini.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/components/icons/enterprise/louis-vuitton.svg b/src/components/icons/enterprise/louis-vuitton.svg new file mode 100644 index 00000000000..6a6954f6330 --- /dev/null +++ b/src/components/icons/enterprise/louis-vuitton.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/icons/enterprise/mastercard.svg b/src/components/icons/enterprise/mastercard.svg new file mode 100644 index 00000000000..5401bc723de --- /dev/null +++ b/src/components/icons/enterprise/mastercard.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/icons/enterprise/mediledger.svg b/src/components/icons/enterprise/mediledger.svg new file mode 100644 index 00000000000..8ceb09389e2 --- /dev/null +++ b/src/components/icons/enterprise/mediledger.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/icons/enterprise/nike.svg b/src/components/icons/enterprise/nike.svg new file mode 100644 index 00000000000..672220b6ed0 --- /dev/null +++ b/src/components/icons/enterprise/nike.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/components/icons/enterprise/opera.svg b/src/components/icons/enterprise/opera.svg new file mode 100644 index 00000000000..15db3b3519a --- /dev/null +++ b/src/components/icons/enterprise/opera.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/icons/enterprise/paypal.svg b/src/components/icons/enterprise/paypal.svg new file mode 100644 index 00000000000..a40ee5c1582 --- /dev/null +++ b/src/components/icons/enterprise/paypal.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/icons/enterprise/samsung.svg b/src/components/icons/enterprise/samsung.svg new file mode 100644 index 00000000000..6e01d7a603f --- /dev/null +++ b/src/components/icons/enterprise/samsung.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icons/enterprise/sap.svg b/src/components/icons/enterprise/sap.svg new file mode 100644 index 00000000000..174afa8e953 --- /dev/null +++ b/src/components/icons/enterprise/sap.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/components/icons/enterprise/siemens.svg b/src/components/icons/enterprise/siemens.svg new file mode 100644 index 00000000000..df6c295c378 --- /dev/null +++ b/src/components/icons/enterprise/siemens.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/icons/enterprise/sony.svg b/src/components/icons/enterprise/sony.svg new file mode 100644 index 00000000000..fa6d0915b17 --- /dev/null +++ b/src/components/icons/enterprise/sony.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/icons/enterprise/sothebys.svg b/src/components/icons/enterprise/sothebys.svg new file mode 100644 index 00000000000..d38ae4512d6 --- /dev/null +++ b/src/components/icons/enterprise/sothebys.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/icons/enterprise/swarm.svg b/src/components/icons/enterprise/swarm.svg new file mode 100644 index 00000000000..381178b7eb5 --- /dev/null +++ b/src/components/icons/enterprise/swarm.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/icons/enterprise/tmobile.svg b/src/components/icons/enterprise/tmobile.svg new file mode 100644 index 00000000000..b7cf58e7cc7 --- /dev/null +++ b/src/components/icons/enterprise/tmobile.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/components/icons/enterprise/verizon.svg b/src/components/icons/enterprise/verizon.svg new file mode 100644 index 00000000000..1995ff0cd64 --- /dev/null +++ b/src/components/icons/enterprise/verizon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/icons/enterprise/visa.svg b/src/components/icons/enterprise/visa.svg new file mode 100644 index 00000000000..d4d9647ec6a --- /dev/null +++ b/src/components/icons/enterprise/visa.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/icons/enterprise/walmart.svg b/src/components/icons/enterprise/walmart.svg new file mode 100644 index 00000000000..f6ead273e92 --- /dev/null +++ b/src/components/icons/enterprise/walmart.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/components/icons/enterprise/wfp.svg b/src/components/icons/enterprise/wfp.svg new file mode 100644 index 00000000000..6f5d4fb42da --- /dev/null +++ b/src/components/icons/enterprise/wfp.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/icons/extra-security.svg b/src/components/icons/extra-security.svg new file mode 100644 index 00000000000..2795d3cf2ae --- /dev/null +++ b/src/components/icons/extra-security.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/icons/future-proofing.svg b/src/components/icons/future-proofing.svg new file mode 100644 index 00000000000..fa8e6540e75 --- /dev/null +++ b/src/components/icons/future-proofing.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ui/Link.tsx b/src/components/ui/Link.tsx index c7e1d087820..ba948f3fd73 100644 --- a/src/components/ui/Link.tsx +++ b/src/components/ui/Link.tsx @@ -1,10 +1,11 @@ "use client" - import { AnchorHTMLAttributes, ComponentProps, forwardRef } from "react" import NextLink from "next/link" import { RxExternalLink } from "react-icons/rx" import { VisuallyHidden } from "@radix-ui/react-visually-hidden" +import Email from "@/components/icons/email.svg" + import { cn } from "@/lib/utils/cn" import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo" import { getRelativePath } from "@/lib/utils/relativePath" @@ -64,6 +65,7 @@ export const BaseLink = forwardRef(function Link( const isDiscordInvite = url.isDiscordInvite(href) const isFile = url.isFile(href) const isExternal = url.isExternal(href) + const isMailto = url.isMailto(href) const isInternalFile = isFile && !isExternal const isHash = url.isHash(href) @@ -101,9 +103,14 @@ export const BaseLink = forwardRef(function Link( } {...commonProps} > + {!hideArrow && isMailto && ( + + )} {children} - (opens in a new tab) - {!hideArrow && ( + + {isMailto ? "opens email client" : "opens in a new tab"} + + {!hideArrow && !isMailto && ( GitHub repository.", "error-page-home-link": "Return to the home page", diff --git a/src/intl/en/page-enterprise.json b/src/intl/en/page-enterprise.json new file mode 100644 index 00000000000..2691fc390ba --- /dev/null +++ b/src/intl/en/page-enterprise.json @@ -0,0 +1,47 @@ +{ + "page-enterprise-activity-media-tx-cost": "Median transaction cost", + "page-enterprise-activity-stablecoin-mktcap": "Stablecoin market cap", + "page-enterprise-activity-total-secured": "Total capital secured", + "page-enterprise-activity-tx-count": "Daily transactions", + "page-enterprise-activity-value-protecting": "Value protecting Ethereum", + "page-enterprise-cases-blackrock-content": "Launched $2.9B+ tokenized U.S. Treasury fund on Ethereum and its ecosystem, delivering same-day liquidity to institutions.", + "page-enterprise-cases-eib-content": "Issued a €100M digital bond on public Ethereum. The project was conducted in cooperation with the Banque de France, Goldman Sachs, Santander and Société Générale.", + "page-enterprise-cases-mediledger-content": "Enables Pfizer and Genentech to verify drug authenticity and ensure pharma compliance.", + "page-enterprise-cases-tmobile-content": "Uses Ethereum to streamline roaming and device trust—shared ledgers simplify authentication and billing.", + "page-enterprise-cases-unwfp-content": "UN tracks aid for 100,000+ refugees using a private Ethereum fork, boosting audit capabilities.", + "page-enterprise-cases-visa-content": "Settled over $225 million in stablecoin transactions using USDC across Ethereum and other blockchains.", + "page-enterprise-ecosystem-cta": "See use cases", + "page-enterprise-ecosystem-description": "Programmable financial systems are here. Join the hundreds of enterprises already building on Ethereum today.", + "page-enterprise-ecosystem-header": "Embrace the innovation", + "page-enterprise-features-1-content-1": "Ethereum is secured by thousands of independent validators worldwide, providing resilient, open-access infrastructure for digital assets and enterprise applications.", + "page-enterprise-features-1-header": "Proven security and resilience", + "page-enterprise-features-2-content-1": "Ethereum offers great flexibility and powerful scaling options known as Layer 2s.", + "page-enterprise-features-2-content-2": "Enterprises can fully customize their Ethereum environment, enabling full compliance, a branded ecosystem and throughput levels as needed.", + "page-enterprise-features-2-header": "Scalable and customizable by design", + "page-enterprise-features-3-content-1": "Ethereum is home to the largest blockchain developer community.", + "page-enterprise-features-3-content-2": "Thousands of developers contribute monthly, offering an abundance of libraries, frameworks, and integrations. Build fast with mature tools like Solidity, Hardhat, Truffle, Infura, and Alchemy.", + "page-enterprise-features-3-header": "Global ecosystem", + "page-enterprise-features-4-content-1": "Deploy on Ethereum's public Mainnet for global transparency or use enterprise-grade privacy solutions for confidentiality and control.", + "page-enterprise-features-4-content-2": "Hybrid models enable private data management with public-chain integrity.", + "page-enterprise-features-4-header": "Public and private deployments", + "page-enterprise-features-header": "Enterprises and Ethereum: a perfect match", + "page-enterprise-hero-breadcrumb": "Enterprise", + "page-enterprise-hero-cta": "Get in touch", + "page-enterprise-hero-subtitle": "Resilient, secure, and battle-tested. Ethereum is trusted by leading global enterprises across a diverse set of use cases.", + "page-enterprise-hero-title": "Ethereum for enterprises", + "page-enterprise-metadata-description": "Resilient, secure, and battle-tested. The world's most trusted blockchain for digital assets, Ethereum is trusted by leading global enterprises across a diverse set of use cases.", + "page-enterprise-metrics-header": "The world's most trusted blockchain for digital assets", + "page-enterprise-metrics-subtext": "Ethereum is the leading platform for issuing, managing, and settling digital assets. From tokenized money and financial instruments to real-world assets and emerging markets, Ethereum provides a secure, neutral foundation for the digital economy.", + "page-enterprise-reason-1-content": "Ethereum's modular design mirrors the properties of the current global settlement and clearing system.", + "page-enterprise-reason-1-header": "Elegance", + "page-enterprise-reason-2-content": "A robust long-term protocol R&D roadmap and a vibrant ecosystem of talent ready to execute over the next 5-10 years.", + "page-enterprise-reason-2-header": "Future-proof", + "page-enterprise-reason-3-content": "Reduces counterparty risk with a reliable global state machine that enforces rules, cutting costs through disintermediation and boosting output via capital efficiency.", + "page-enterprise-reason-3-header": "Reduced risk", + "page-enterprise-reason-4-content": "The only programmable distributed ledger infrastructure that has never gone down, and has thrived through multiple existential threats.", + "page-enterprise-reason-4-header": "Battle-tested", + "page-enterprise-team-description": "We will answer your questions, help identify potential paths forward, provide technical support, and connect you with relevant industry leaders.", + "page-enterprise-team-header": "Ethereum Enterprise Team", + "page-enterprise-why-description": "Ethereum supports enterprise compliance with transparent, auditable infrastructure that aligns with GDPR and KYC while protecting sensitive data in private or consortium environments.", + "page-enterprise-why-header": "Why Ethereum" +} diff --git a/src/lib/api/fetchEthereumStablecoinsMcap.ts b/src/lib/api/fetchEthereumStablecoinsMcap.ts new file mode 100644 index 00000000000..2366397444f --- /dev/null +++ b/src/lib/api/fetchEthereumStablecoinsMcap.ts @@ -0,0 +1,38 @@ +import { MetricReturnData } from "../types" + +export type LlamaStablecoinchainsResponseItem = { + gecko_id: string | null + totalCirculatingUSD: Record + tokenSymbol: string | null + name: string +} + +export async function fetchEthereumStablecoinsMcap(): Promise { + const url = "https://stablecoins.llama.fi/stablecoinchains" + + try { + const response = await fetch(url) + if (!response.ok) { + console.log(response.status, response.statusText) + throw new Error("Failed to fetch llama.fi stablecoin mcap data") + } + const data: LlamaStablecoinchainsResponseItem[] = await response.json() + + const ethereumData = data.find(({ gecko_id }) => gecko_id === "ethereum") + if (!ethereumData) throw new Error("Ethereum stablecoin data not found") + + const value = Object.values(ethereumData.totalCirculatingUSD).reduce( + (acc, value) => acc + value, + 0 + ) + + return { value } + } catch (error) { + // Will not currently break build; passes back error key + console.error(error) + return { + error: + "Something went wrong with requesting the Ethereum stablecoins data.", + } + } +} diff --git a/src/lib/types.ts b/src/lib/types.ts index 4cd57b48f56..f86c3e08e9f 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -563,20 +563,35 @@ export type GrowThePieData = Record & { activeAddresses: Record } -export type MetricName = +export type HomepageActivityMetric = | "ethPrice" // Use with `totalEthStaked` to convert ETH to USD | "totalEthStaked" | "totalValueLocked" | GrowThePieMetricKey -export type AllMetricData = Record +export type AllHomepageActivityData = Record< + HomepageActivityMetric, + MetricReturnData +> + +export type EnterpriseActivityMetric = + | "txCount" + | "txCostsMedianUsd" + | "stablecoinMarketCap" + | "ethPrice" // Use with `totalEthStaked` to convert ETH to USD + | "totalEthStaked" + +export type AllEnterpriseActivityData = Record< + EnterpriseActivityMetric, + MetricReturnData +> export type StatsBoxMetric = { label: string description?: string state: StatsBoxState - apiUrl: string - apiProvider: string + apiUrl?: string + apiProvider?: string } export type SimulatorNavProps = { diff --git a/src/lib/utils/numbers.ts b/src/lib/utils/numbers.ts new file mode 100644 index 00000000000..3c325f99e15 --- /dev/null +++ b/src/lib/utils/numbers.ts @@ -0,0 +1,27 @@ +export const formatLargeUSD = (value: number, locale: string): string => { + return new Intl.NumberFormat(locale, { + style: "currency", + currency: "USD", + notation: "compact", + minimumSignificantDigits: 3, + maximumSignificantDigits: 4, + }).format(value) +} + +export const formatSmallUSD = (value: number, locale: string): string => { + return new Intl.NumberFormat(locale, { + style: "currency", + currency: "USD", + notation: "compact", + minimumSignificantDigits: 2, + maximumSignificantDigits: 2, + }).format(value) +} + +export const formatLargeNumber = (value: number, locale: string): string => { + return new Intl.NumberFormat(locale, { + notation: "compact", + minimumSignificantDigits: 3, + maximumSignificantDigits: 4, + }).format(value) +} diff --git a/src/lib/utils/url.ts b/src/lib/utils/url.ts index 8dd41cb9905..4868ace6f17 100644 --- a/src/lib/utils/url.ts +++ b/src/lib/utils/url.ts @@ -10,9 +10,11 @@ import { export const isDiscordInvite = (href: string): boolean => href.includes(DISCORD_PATH) && !href.includes("http") +export const isMailto = (href: string): boolean => href.includes("mailto:") + export const isExternal = (href: string): boolean => href.includes("http") || - href.includes("mailto:") || + isMailto(href) || href.includes("ipfs") || isDiscordInvite(href) diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css index 774b7adb24a..945ad776126 100644 --- a/src/styles/semantic-tokens.css +++ b/src/styles/semantic-tokens.css @@ -75,6 +75,13 @@ transparent 100% ); + --radial-b: radial-gradient( + 127.67% 82.36% at 50% -15%, + hsla(var(--purple-500), var(--radial-a-opacity-2)) 0%, + hsla(var(--blue-500), var(--radial-a-opacity-1)) 66%, + transparent 100% + ); + --linear-bug-bounty-title: linear-gradient( to left, #f7cbc0 0%, diff --git a/tailwind.config.ts b/tailwind.config.ts index 2ca828a230a..2ac03a608fc 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -230,6 +230,7 @@ const config = { "feedback-gradient": "var(--feedback-gradient)", "banner-grid-gradient": "var(--banner-grid-gradient)", "radial-a": "var(--radial-a)", + "radial-b": "var(--radial-b)", "linear-bug-bounty-title": "var(--linear-bug-bounty-title)", "gradient-staking": "var(--gradient-staking)", "card-gradient": "var(--card-gradient)", @@ -304,6 +305,7 @@ const config = { "accordion-up": "accordion-up 0.2s ease-out", "scroll-left": "scroll-left 30s linear infinite", "scroll-right": "scroll-right 30s linear infinite", + "scroll-left-240": "scroll-left 240s linear infinite", "spin-30": "spin 60s linear infinite", "counter-spin-30": "spin 60s linear infinite reverse", "spin-21": "spin 42s linear infinite",