+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ function renderWalletChooser() {
+ return (
+ Arc Transfer
+Send or bridge USDC across chains
+ +
+
+ );
+ }
+
+ function renderReviewScreen() {
+ if (!sourceChain || !destinationChain || !review) {
+ return null;
+ }
+
+ const sourceMeta = getChainMeta(sourceChain.name);
+ const destinationMeta = getChainMeta(destinationChain.name);
+
+ return (
+ Arc Transfer
+Select a wallet
+
+ {evmWallets.length > 0 ? (
+ evmWallets.map((evmWallet) => (
+
+ ))
+ ) : (
+
+ No EVM wallet detected.
+ )} + + {hasSolanaWallet() ? ( + + ) : ( +No Solana wallet detected.
+ )} +
+
+
+ );
+ }
+
+ function renderSubmittingScreen() {
+ if (!sourceChain || !destinationChain || !review) {
+ return null;
+ }
+
+ return (
+ Review Transfer
+ +
+
+
+
+ 
+ {sourceMeta.displayName}
+
+ →
+
+ 
+ {destinationMeta.displayName}
+
+ -
+
- You receive +
- {formatDisplayAmount(review.destinationAmount)} USDC +
- Estimated fee +
- {formatFee(review)} +
- Total from source +
- {formatDisplayAmount(review.totalSourceAmount)} USDC +
- Recipient +
- {shortAddress(form.recipient, 6, 4)} +
- Method +
- + {getTransferMethodLabel( + review.method, + Boolean(review.useForwarder), + )} + +
+
+
+ );
+ }
+
+ function renderSuccessScreen() {
+ if (!sourceChain || !destinationChain || !result) {
+ return null;
+ }
+
+ return (
+ + {review.method === "send" ? "Sending" : "Bridging"}{" "} + {formatDisplayAmount(review.destinationAmount)} USDC +
++ {sourceChain.name} + → + {destinationChain.name} +
+{statusMessage}
+
+
+
+ );
+ }
+
+ function renderTransferForm() {
+ return (
+ Transfer Complete
++ {result.method === "send" + ? `${formatDisplayAmount(result.amount)} USDC sent on ${sourceChain.name}` + : `${formatDisplayAmount(result.amount)} USDC from ${sourceChain.name} to ${destinationChain.name}`} +
+
+ {result.steps
+ .filter((step) => step.explorerUrl)
+ .map((step) => (
+
+ ✓
+ {step.name} View →
+
+ ))}
+
+
+
+
+ );
+ }
+
+ let content: ReactNode = renderTransferForm();
+
+ if (screen === "connect") {
+ content = renderConnectScreen();
+ } else if (screen === "wallets") {
+ content = renderWalletChooser();
+ } else if (screen === "review") {
+ content = renderReviewScreen() ?? renderTransferForm();
+ } else if (screen === "submitting") {
+ content = renderSubmittingScreen() ?? renderTransferForm();
+ } else if (screen === "success") {
+ content = renderSuccessScreen() ?? renderTransferForm();
+ }
+
+ return (
+
+
+
+ Arc Transfer
+ {wallet ? ( +
+ {shortAddress(wallet.address)}
+
+
+ ) : null}
+
+
+
+
+
+
+
+ {selectedMethodLabel ? (
+
+ From
+ {
+ setBalance(null);
+ setBalanceUnavailable(false);
+ setForm((currentForm) => ({
+ ...currentForm,
+ fromChain: nextFromChain,
+ }));
+ }}
+ />
+
+
+
+
+ To
+ {
+ setForm((currentForm) => ({
+ ...currentForm,
+ toChain: nextToChain,
+ }));
+ }}
+ />
+
+ Method: {selectedMethodLabel}
+ ) : null}
+
+
+ {error}
: null} +
+
+
+ {isOpen ? (
+
+ );
+}
+
+function formatUsdcBalance(value: unknown): string {
+ const bigintValue =
+ typeof value === "bigint"
+ ? value
+ : BigInt(typeof value === "string" ? value : String(value));
+ const whole = bigintValue / 1_000_000n;
+ const decimals = (bigintValue % 1_000_000n).toString().padStart(6, "0");
+ const trimmedDecimals = decimals.replace(/0+$/, "");
+
+ return trimmedDecimals
+ ? `${whole.toString()}.${trimmedDecimals}`
+ : whole.toString();
+}
+
+function formatDisplayAmount(value: string): string {
+ const amount = Number.parseFloat(value);
+ return Number.isFinite(amount) ? amount.toFixed(2).replace(/\.00$/, "") : "0";
+}
+
+function formatFee(review: TransferEstimate): string {
+ return review.feeAmount === "0"
+ ? "No fee"
+ : `${review.feeAmount} ${review.feeToken}`;
+}
+
+function getTransferMethodLabel(
+ method: TransferEstimate["method"] | null,
+ useForwarder: boolean,
+): string | null {
+ if (!method) {
+ return null;
+ }
+
+ if (method === "send") {
+ return "Send";
+ }
+
+ return useForwarder ? "CCTP + Forwarder" : "CCTP Direct Mint";
+}
+
+function shortAddress(value: string, head = 4, tail = 4): string {
+ if (value.length <= head + tail + 3) {
+ return value;
+ }
+
+ return `${value.slice(0, head)}...${value.slice(-tail)}`;
+}
+
+export default TransferWidget;
diff --git a/app-kit-transfer-widget/src/components/TransferWidget/chains.ts b/app-kit-transfer-widget/src/components/TransferWidget/chains.ts
new file mode 100644
index 0000000..c597ca8
--- /dev/null
+++ b/app-kit-transfer-widget/src/components/TransferWidget/chains.ts
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2026, Circle Internet Group, Inc. All rights reserved.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// widget/chains.ts - Testnet chain metadata for the embedded transfer widget.
+// App Kit owns chain availability; this file only decorates SDK chains for the UI.
+
+import { CHAIN_ICONS, PLACEHOLDER_ICON } from "./icons";
+
+export type ChainMeta = {
+ name: string;
+ displayName: string;
+ icon: string;
+};
+
+const DISPLAY_NAME_OVERRIDES: Record
+ setSearch(event.target.value)}
+ placeholder="Search chains..."
+ autoFocus
+ />
+
+ ) : null}
+
+ {filteredChains.length === 0 ? (
+
+ No chains found
+ ) : null}
+ {filteredChains.map((chain) => {
+ const meta = getChainMeta(chain.name);
+ const isSelected = chain.chain === value;
+
+ return (
+
+ );
+ })}
+