feat: clarify BREAD/xDAI on the deposit & withdraw flows

Now that the UI shows USD, add a short explainer (with a docs link) to
the fund and withdraw modals so users understand what BREAD/xDAI are and
where they live:
- New reusable BreadInfoNote (links docs.bread.coop/bread-token).
- Fund modal: note that funding uses xDAI on Gnosis, auto-converted to
  BREAD (worth $1 each, 1:1 with USD); balance shown in USD.
- Withdraw modal: note that you're withdrawing BREAD (1:1 with USD) on
  Gnosis; amounts show in USD but you receive BREAD.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: 2 people

src/components/bread-info-note.tsx

@@ -0,0 +1,32 @@
+import { Body } from "@breadcoop/ui";
+import { InfoIcon } from "@phosphor-icons/react";
+import { ReactNode } from "react";
+import { LINKS } from "@/constants/links";
+
+/**
+ * Informational note explaining that amounts are BREAD (a USD-pegged token on
+ * Gnosis), shown on the deposit/withdraw flows to reduce confusion now that the
+ * UI displays USD. Links the BREAD token docs for the technical details.
+ */
+const BreadInfoNote = ({ children }: { children: ReactNode }) => (
+  <div className="flex items-start gap-2 bg-paper-1 p-3">
+    <InfoIcon
+      size={20}
+      weight="fill"
+      className="mt-0.5 shrink-0 text-primary-blue"
+    />
+    <Body className="text-xs text-surface-grey-2">
+      {children}{" "}
+      <a
+        href={LINKS.docsBreadToken}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="font-bold text-primary-blue underline"
+      >
+        Learn more about BREAD &amp; xDAI
+      </a>
+    </Body>
+  </div>
+);
+
+export default BreadInfoNote;

src/components/modal/modals/fund-wallet/fund-wallet.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import { useWatchFundedXdai } from "@/hooks/use-watch-funded-xdai";
 import { Body, useConnectedUser } from "@breadcoop/ui";
 import Alert from "@/components/alert";
+import BreadInfoNote from "@/components/bread-info-note";
 import { PeerIntentFulfilledResult } from "@zkp2p/sdk";
 
 const FundWallet = ({ modalState }: { modalState: FundWalletModalState }) => {
@@ -41,6 +42,11 @@ const FundWallet = ({ modalState }: { modalState: FundWalletModalState }) => {
       <Body className="-mt-4">
         Send xDAI to your wallet and automatically get BREAD
       </Body>
+      <BreadInfoNote>
+        You fund with <strong>xDAI</strong> on the Gnosis network, which is
+        automatically converted to <strong>BREAD</strong> — worth $1 each (1:1
+        with USD). Your balance is shown in USD.
+      </BreadInfoNote>
       <div className={result ? "" : ""}>
         {result && (
           <div>

src/components/modal/modals/withdraw-bread.tsx

@@ -17,6 +17,7 @@ import { useAccount, useReadContract } from "wagmi";
 import { Address, erc20Abi, isAddress } from "viem";
 import LocalButton from "@/components/button";
 import Loading from "@/app/loading";
+import BreadInfoNote from "@/components/bread-info-note";
 import { cn } from "@/lib/utils";
 import { BREAD_TOKEN_ADDRESS } from "@/lib/constants";
 import { getDefaultChainId } from "@/utils/chain";
@@ -192,6 +193,11 @@ const WithdrawBreadModal = () => {
         </>
       ) : (
         <form className="*:mb-6" onSubmit={withdraw}>
+          <BreadInfoNote>
+            You&apos;re withdrawing <strong>BREAD</strong> — worth $1 each (1:1
+            with USD) — from the Gnosis network. Amounts are shown in USD, but
+            you receive BREAD in your wallet.
+          </BreadInfoNote>
           <div>
             <Label htmlFor="address">Recipient Address</Label>
             <div className="relative">