refactor: migrate usage of InfoBanner to ui/alert

app/[locale]/developers/learning-tools/_components/learning-tools.tsx

@@ -7,10 +7,10 @@ import { LearningTool } from "@/lib/types"
 
 import CalloutBanner from "@/components/CalloutBanner"
 import FeedbackCard from "@/components/FeedbackCard"
-import InfoBanner from "@/components/InfoBanner"
 import LearningToolsCardGrid from "@/components/LearningToolsCardGrid"
 import MainArticle from "@/components/MainArticle"
 import Translation from "@/components/Translation"
+import { Alert, AlertEmoji } from "@/components/ui/alert"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 
 import { cn } from "@/lib/utils/cn"
@@ -414,9 +414,10 @@ const LearningToolsPage = () => {
             <Translation id="page-developers-learning-tools:page-learning-tools-sandbox-desc" />
           </p>
           <LearningToolsCardGrid products={randomizedSandboxes} />
-          <InfoBanner emoji=":point_up:" shouldCenter>
+          <Alert variant="update" className="mx-auto max-w-[55rem]">
+            <AlertEmoji text=":point_up:" />
             <Translation id="page-developers-learning-tools:page-learning-tools-remix-description-2" />
-          </InfoBanner>
+          </Alert>
         </StackContainer>
         <StackContainer>
           <SubtitleTwo>

app/[locale]/eth/_components/eth.tsx

@@ -14,11 +14,16 @@ import FeedbackCard from "@/components/FeedbackCard"
 import FileContributors from "@/components/FileContributors"
 import HorizontalCard from "@/components/HorizontalCard"
 import { Image } from "@/components/Image"
-import InfoBanner from "@/components/InfoBanner"
 import ListenToPlayer from "@/components/ListenToPlayer"
 import MainArticle from "@/components/MainArticle"
 import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
 import Translation from "@/components/Translation"
+import {
+  Alert,
+  AlertContent,
+  AlertDescription,
+  AlertEmoji,
+} from "@/components/ui/alert"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Divider } from "@/components/ui/divider"
 import { Flex, VStack } from "@/components/ui/flex"
@@ -311,14 +316,19 @@ const EthPage = ({
               />
             ))}
           </CardContainer>
-          <InfoBanner emoji=":wave:" shouldCenter>
-            <b>{t("page-eth-buy-some")}</b>{" "}
-            <Translation id="page-eth:page-eth-buy-some-desc" />{" "}
-            <InlineLink href="/what-is-ethereum/">
-              {t("page-eth-more-on-ethereum-link")}
-            </InlineLink>
-            {t("page-eth-period")}
-          </InfoBanner>
+          <Alert variant="update" className="mx-auto max-w-[55rem]">
+            <AlertEmoji text=":wave:" />
+            <AlertContent>
+              <AlertDescription>
+                <b>{t("page-eth-buy-some")}</b>{" "}
+                <Translation id="page-eth:page-eth-buy-some-desc" />{" "}
+                <InlineLink href="/what-is-ethereum/">
+                  {t("page-eth-more-on-ethereum-link")}
+                </InlineLink>
+                {t("page-eth-period")}
+              </AlertDescription>
+            </AlertContent>
+          </Alert>
         </Content>
       </GrayContainer>
       <Content>
@@ -361,9 +371,11 @@ const EthPage = ({
               description={t("page-eth-whats-defi-description")}
               image={defi}
             />
-            <InfoBanner isWarning>
-              <Translation id="page-eth:page-eth-weth" />
-            </InfoBanner>
+            <Alert variant="warning">
+              <div>
+                <Translation id="page-eth:page-eth-weth" />
+              </div>
+            </Alert>
           </div>
           <TextDivider />
           <div>

app/[locale]/gas/_components/gas.tsx

@@ -13,11 +13,11 @@ import FileContributors from "@/components/FileContributors"
 import GhostCard from "@/components/GhostCard"
 import HorizontalCard from "@/components/HorizontalCard"
 import { Image } from "@/components/Image"
-import InfoBanner from "@/components/InfoBanner"
 import MainArticle from "@/components/MainArticle"
 import PageHero from "@/components/PageHero"
 import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
 import Translation from "@/components/Translation"
+import { Alert, AlertContent, AlertTitle } from "@/components/ui/alert"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Divider } from "@/components/ui/divider"
 import { Flex, FlexProps } from "@/components/ui/flex"
@@ -143,13 +143,18 @@ const GasPage = ({
       <Content className="mb-16 mt-16 lg:mb-32">
         <Flex className="w-full flex-col items-center lg:flex-row lg:items-start">
           <div className="me-auto w-full flex-[60%] lg:me-2">
-            <InfoBanner className="mb-8" title={t("page-gas-summary-title")}>
-              <UnorderedList>
-                <ListItem>{t("page-gas-summary-item-1")}</ListItem>
-                <ListItem>{t("page-gas-summary-item-2")}</ListItem>
-                <ListItem>{t("page-gas-summary-item-3")}</ListItem>
-              </UnorderedList>
-            </InfoBanner>
+            <Alert variant="update" className="mb-8">
+              <AlertContent>
+                <AlertTitle className="mb-6">
+                  {t("page-gas-summary-title")}
+                </AlertTitle>
+                <UnorderedList className="mb-0">
+                  <ListItem>{t("page-gas-summary-item-1")}</ListItem>
+                  <ListItem>{t("page-gas-summary-item-2")}</ListItem>
+                  <ListItem>{t("page-gas-summary-item-3")}</ListItem>
+                </UnorderedList>
+              </AlertContent>
+            </Alert>
             <H2 className="mt-0" id="what-is-gas">
               {t("page-gas-what-are-gas-fees-header")}
             </H2>

app/[locale]/roadmap/vision/_components/vision.tsx

@@ -9,12 +9,12 @@ import Card from "@/components/Card"
 import Emoji from "@/components/Emoji"
 import FeedbackCard from "@/components/FeedbackCard"
 import FileContributors from "@/components/FileContributors"
-import InfoBanner from "@/components/InfoBanner"
 import MainArticle from "@/components/MainArticle"
 import PageHero, {
   type ContentType as PageHeroContent,
 } from "@/components/PageHero"
 import Trilemma from "@/components/Trilemma"
+import { Alert } from "@/components/ui/alert"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Divider } from "@/components/ui/divider"
 import { Flex, type FlexProps, VStack } from "@/components/ui/flex"
@@ -238,12 +238,14 @@ const VisionPage = ({
               </InlineLink>
             </Text>
             <Text>{t("page-roadmap-vision-sustainability-desc-3")}</Text>
-            <InfoBanner>
-              <Text>{t("page-roadmap-vision-sustainability-desc-8")}</Text>
-              <ButtonLink href="/roadmap/merge/">
-                {t("page-upgrades-index:page-upgrades-merge-btn")}
-              </ButtonLink>
-            </InfoBanner>
+            <Alert variant="update">
+              <div>
+                <Text>{t("page-roadmap-vision-sustainability-desc-8")}</Text>
+                <ButtonLink href="/roadmap/merge/">
+                  {t("page-upgrades-index:page-upgrades-merge-btn")}
+                </ButtonLink>
+              </div>
+            </Alert>
           </CentralContent>
           <FileContributors
             className="my-10 border-t"

app/[locale]/staking/deposit-contract/_components/deposit-contract.tsx

@@ -11,10 +11,15 @@ import CopyToClipboard from "@/components/CopyToClipboard"
 import Emoji from "@/components/Emoji"
 import FeedbackCard from "@/components/FeedbackCard"
 import { Image } from "@/components/Image"
-import InfoBanner from "@/components/InfoBanner"
 import MainArticle from "@/components/MainArticle"
 import Tooltip from "@/components/Tooltip"
 import Translation from "@/components/Translation"
+import {
+  Alert,
+  AlertContent,
+  AlertDescription,
+  AlertEmoji,
+} from "@/components/ui/alert"
 import {
   Button,
   ButtonLink,
@@ -480,17 +485,20 @@ const DepositContractPage = ({ locale }: { locale: Lang }) => {
                     </ButtonRow>
                   </>
                 )}
-                <InfoBanner isWarning emoji=":warning:">
-                  <div>
-                    {t("page-staking-deposit-contract-warning-2")}{" "}
-                    <InlineLink
-                      className="text-primary"
-                      href="https://launchpad.ethereum.org"
-                    >
-                      {t("page-staking-deposit-contract-launchpad-2")}
-                    </InlineLink>
-                  </div>
-                </InfoBanner>
+                <Alert variant="warning">
+                  <AlertEmoji text=":warning:" />
+                  <AlertContent>
+                    <AlertDescription>
+                      {t("page-staking-deposit-contract-warning-2")}{" "}
+                      <InlineLink
+                        className="text-primary"
+                        href="https://launchpad.ethereum.org"
+                      >
+                        {t("page-staking-deposit-contract-launchpad-2")}
+                      </InlineLink>
+                    </AlertDescription>
+                  </AlertContent>
+                </Alert>
               </div>
             </AddressCard>
           </RightColumn>

public/content/ai-agents/index.md

@@ -61,10 +61,13 @@ Agents like Luna or AIXBT control their own onchain wallet ([AIXBT's wallet](htt
 
 During Luna's X social campaign #LunaMuralChallenge, Luna selected and rewarded the winners via her Base wallet — marking <strong>the first instance of an AI hiring humans for crypto reward</strong>.
 
-<InfoBanner isWarning emoji="💡">
+<Alert variant="warning">
+<AlertEmoji text="💡"/>
+<AlertContent>
 <p className="mt-0"><strong>Good to know</strong></p>
 <p className="mt-2">AI agents and related tools are still in early development and very experimental—use with caution.</p>
-</InfoBanner>
+</AlertContent>
+</Alert>
 
 ## Control your wallet using chat commands {#control-your-wallet-using-chat-commands}
 

public/content/bridges/index.md

@@ -59,9 +59,14 @@ If you have ETH on Ethereum Mainnet and you want to explore an alt L1 to try out
 
 Let’s say you want to own native Bitcoin (BTC), but you only have funds on Ethereum Mainnet. To gain exposure to BTC on Ethereum, you can buy Wrapped Bitcoin (WBTC). However, WBTC is an [ERC-20](/glossary/#erc-20) token native to the Ethereum network, which means it’s an Ethereum version of Bitcoin and not the original asset on the Bitcoin blockchain. To own native BTC, you would have to bridge your assets from Ethereum to Bitcoin using a bridge. This will bridge your WBTC and convert it into native BTC. Alternatively, you might own BTC and want to use it in Ethereum [DeFi](/glossary/#defi) protocols. This would require bridging the other way, from BTC to WBTC which can then be used as an asset on Ethereum.
 
-<InfoBanner shouldCenter emoji=":bulb:">
+<Alert variant="update">
+<AlertEmoji text=":bulb:"/>
+<AlertContent>
+<AlertDescription>
   You can also do all of the above using a [centralized exchange](/get-eth). However, unless your funds are already on an exchange, it would involve multiple steps, and you’d likely be better off using a bridge.
-</InfoBanner>
+</AlertDescription>
+</AlertContent>
+</Alert>
 
 <Divider />
 

public/content/contributing/translation-program/how-to-translate/index.md

@@ -76,9 +76,12 @@ Want to learn more? Feel free to check out the [documentation on using the Crowd
 
 Once you've completed the translation (i.e. all files for a content bucket display 100%), our professional translation service will review (and potentially edit) the content. Once the review is complete (i.e. review progress is 100%), we will add it to the website.
 
-<InfoBanner shouldCenter emoji=":warning:">
+<Alert variant="update">
+<AlertEmoji text=":warning:"/>
+<AlertContent>
   Please do not use machine translation to translate the project. All the translations will be reviewed before being added to the website. If your suggested translations are found to be machine translated, they will be dismissed and contributors who use machine translation often will be removed from the project.
-</InfoBanner>
+</AlertContent>
+</Alert>
 
 ### Get in touch {#get-in-touch}
 

public/content/defi/index.md

@@ -64,12 +64,15 @@ Ethereum builds on this. Like Bitcoin, the rules can't change on you and everyon
 
 This sounds odd... "why would I want to program my money"? However, this is more just a default feature of tokens on Ethereum. Anyone can program logic into payments. So you can get the control and security of Bitcoin mixed with the services provided by financial institutions. This lets you do things with cryptocurrencies that you can't do with Bitcoin like lending and borrowing, scheduling payments, investing in index funds and more.
 
-<InfoBanner shouldSpaceBetween emoji=":eyes:">
+<Alert variant="update">
+<AlertEmoji text=":eyes:"/>
+<AlertContent className="flex-row justify-between items-center">
   <div>Explore our suggestions for DeFi applications to try out if you're new to Ethereum.</div>
   <ButtonLink href="/apps/categories/defi">
     Explore DeFi apps
   </ButtonLink>
-</InfoBanner>
+</AlertContent>
+</Alert>
 
 ## What can you do with DeFi? {#defi-use-cases}
 

public/content/developers/docs/consensus-mechanisms/pow/index.md

@@ -6,9 +6,14 @@ lang: en
 
 The Ethereum network began by using a consensus mechanism that involved **[Proof-of-work (PoW)](/developers/docs/consensus-mechanisms/pow)**. This allowed the nodes of the Ethereum network to agree on the state of all information recorded on the Ethereum blockchain and prevented certain kinds of economic attacks. However, Ethereum switched off proof-of-work in 2022 and started using [proof-of-stake](/developers/docs/consensus-mechanisms/pos) instead.
 
-<InfoBanner emoji=":wave:">
+<Alert variant="update">
+<AlertEmoji text=":wave:"/>
+<AlertContent>
+<AlertDescription>
     Proof-of-work has now been deprecated. Ethereum no longer uses proof-of-work as part of its consensus mechanism. Instead, it uses proof-of-stake. Read more on [proof-of-stake](/developers/docs/consensus-mechanisms/pos/) and [staking](/staking/).
-</InfoBanner>
+</AlertDescription>
+</AlertContent>
+</Alert>
 
 ## Prerequisites {#prerequisites}
 

public/content/developers/docs/consensus-mechanisms/pow/mining/index.md

@@ -4,9 +4,14 @@ description: An explanation of how mining worked on Ethereum.
 lang: en
 ---
 
-<InfoBanner emoji=":wave:">
+<Alert variant="update">
+<AlertEmoji text=":wave:"/>
+<AlertContent>
+<AlertDescription>
 Proof-of-work is no longer underlying Ethereum's consensus mechanism, meaning mining has been switched off. Instead, Ethereum is secured by validators who stake ETH. You can start staking your ETH today. Read more on <a href='/roadmap/merge/'>The Merge</a>, <a href='/developers/docs/consensus-mechanisms/pos/'>proof-of-stake</a>, and <a href='/staking/'>staking</a>. This page is for historical interest only.
-</InfoBanner>
+</AlertDescription>
+</AlertContent>
+</Alert>
 
 ## Prerequisites {#prerequisites}
 

public/content/developers/docs/consensus-mechanisms/pow/mining/mining-algorithms/ethash/index.md

@@ -4,9 +4,14 @@ description: A detailed look at the Ethash algorithm.
 lang: en
 ---
 
-<InfoBanner emoji=":wave:">
+<Alert variant="update">
+<AlertEmoji text=":wave:"/>
+<AlertContent>
+<AlertDescription>
    Ethash was Ethereum's proof-of-work mining algorithm. Proof-of-work has now been **switched off entirely** and Ethereum is now secured using [proof-of-stake](/developers/docs/consensus-mechanisms/pos/) instead. Read more on [The Merge](/roadmap/merge/), [proof-of-stake](/developers/docs/consensus-mechanisms/pos/) and [staking](/staking/). This page is for historical interest!  
-</InfoBanner>
+</AlertDescription>
+</AlertContent>
+</Alert>
 
 Ethash is a modified version of the [Dagger-Hashimoto](/developers/docs/consensus-mechanisms/pow/mining/mining-algorithms/dagger-hashimoto) algorithm. Ethash proof-of-work is [memory hard](https://wikipedia.org/wiki/Memory-hard_function), which was thought to make the algorithm ASIC resistant. Ethash ASICs were eventually developed but GPU mining was still a viable option until proof-of-work was switched off. Ethash is still used to mine other coins on other non-Ethereum proof-of-work networks.
 

public/content/developers/docs/consensus-mechanisms/pow/mining/mining-algorithms/index.md

@@ -4,9 +4,14 @@ description: A detailed look at the algorithms used for Ethereum mining.
 lang: en
 ---
 
-<InfoBanner emoji=":wave:">
+<Alert variant="update">
+<AlertEmoji text=":wave:"/>
+<AlertContent>
+<AlertDescription>
 Proof-of-work is no longer underlying Ethereum's consensus mechanism, meaning mining has been switched off. Instead, Ethereum is secured by validators who stake ETH. You can start staking your ETH today. Read more on <a href='/roadmap/merge/'>The Merge</a>, <a href='/developers/docs/consensus-mechanisms/pos/'>proof-of-stake</a>, and <a href='/staking/'>staking</a>. This page is for historical interest only.
-</InfoBanner>
+</AlertDescription>
+</AlertContent>
+</Alert>
 
 Ethereum mining used an algorithm known as Ethash. The fundamental idea of the algorithm is that a miner tries to find a nonce input using brute force computation so that the resulting hash is smaller than a threshold determined by the calculated difficulty. This difficulty level can be dynamically adjusted, allowing block production to happen at a regular interval.
 

public/content/developers/tutorials/hello-world-smart-contract/index.md

@@ -233,9 +233,13 @@ PRIVATE_KEY = "your-metamask-private-key"
 
 To actually connect these to our code, we’ll reference these variables in our `hardhat.config.js` file on step 13.
 
-<InfoBanner isWarning>
+<Alert variant="warning">
+<AlertContent>
+<AlertDescription>
 Don't commit <code>.env</code>! Please make sure never to share or expose your <code>.env</code> file with anyone, as you are compromising your secrets in doing so. If you are using version control, add your <code>.env</code> to a <a href="https://git-scm.com/docs/gitignore">gitignore</a> file.
-</InfoBanner>
+</AlertDescription>
+</AlertContent>
+</Alert>
 
 ## Step 12: Install Ethers.js {#step-12-install-ethersjs}
 

public/content/developers/tutorials/sending-transactions-using-web3-and-alchemy/index.md

@@ -115,9 +115,13 @@ API_URL = "your-api-url"
 PRIVATE_KEY = "your-private-key"
 ```
 
-<InfoBanner isWarning>
+<Alert variant="warning">
+<AlertContent>
+<AlertDescription>
 Don't commit <code>.env</code>! Please make sure never to share or expose your <code>.env</code> file with anyone, as you are compromising your secrets in doing so. If you are using version control, add your <code>.env</code> to a <a href="https://git-scm.com/docs/gitignore">gitignore</a> file.
-</InfoBanner>
+</AlertDescription>
+</AlertContent>
+</Alert>
 
 ### 7\. Create `sendTx.js` file {#create-sendtx-js}
 

public/content/energy-consumption/index.md

@@ -61,9 +61,14 @@ While Ethereum's energy consumption is very low, there is also a substantial, gr
 
 Web3 native public goods funding platforms such as [Gitcoin](https://gitcoin.co) run climate rounds to stimulate environmentally conscious building on Ethereum's application layer. Through the development of these initiatives (and others, e.g. [DeSci](/desci/)), Ethereum is becoming an environmentally and socially net-positive technology.
 
-<InfoBanner emoji=":evergreen_tree:">
+<Alert variant="update">
+<AlertEmoji text=":evergreen_tree:" />
+<AlertContent>
+<AlertDescription>
   If you think this page can be made more accurate, please raise an issue or PR. The stats on this page are estimates based on publicly available data - they do not represent an official statement or promise from the ethereum.org team, or the Ethereum Foundation.
-</InfoBanner>
+</AlertDescription>
+</AlertContent>
+</Alert>
 
 ## Further reading {#further-reading}