From d5552be2facae032abacd71ed90b93baf91eef4d Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 20 Apr 2026 02:12:01 +0000 Subject: [PATCH] Redesign swap interface with warm trust-forward aesthetic Replace the chain tab bar and per-chain address components with a unified asset selector sheet and consolidated receive address field. Add design tokens (cream/walnut palette, DM Sans typography, card/field/pill radii), extract Button/Card/AmountInput/AssetPill/AssetSheet primitives into src/ui/, move Solana wallet providers up to App.tsx so they're available regardless of selected chain, restyle Order.tsx status view to match new tokens, and delete Chain.tsx/Connect.tsx/PolygonAddress.tsx/SolAddress.tsx. https://claude.ai/code/session_01QuxfFxKtWjRBhqwgFF6Bvr --- public/index.html | 5 +- src/App.tsx | 47 ++++++-- src/Chain.tsx | 56 --------- src/Connect.tsx | 49 -------- src/Loading.tsx | 2 +- src/Order.tsx | 170 ++++++++++++++------------- src/PolygonAddress.tsx | 31 ----- src/ReceiveAddressField.tsx | 73 ++++++++++++ src/SolAddress.tsx | 35 ------ src/Swap.tsx | 221 ++++++++++++++---------------------- src/index.css | 23 ++++ src/ui/AmountInput.tsx | 31 +++++ src/ui/AssetPill.tsx | 39 +++++++ src/ui/AssetSheet.tsx | 95 ++++++++++++++++ src/ui/Button.tsx | 32 ++++++ src/ui/Card.tsx | 14 +++ tailwind.config.js | 25 +++- 17 files changed, 548 insertions(+), 400 deletions(-) delete mode 100644 src/Chain.tsx delete mode 100644 src/Connect.tsx delete mode 100644 src/PolygonAddress.tsx create mode 100644 src/ReceiveAddressField.tsx delete mode 100644 src/SolAddress.tsx create mode 100644 src/ui/AmountInput.tsx create mode 100644 src/ui/AssetPill.tsx create mode 100644 src/ui/AssetSheet.tsx create mode 100644 src/ui/Button.tsx create mode 100644 src/ui/Card.tsx diff --git a/public/index.html b/public/index.html index b464660..822486a 100644 --- a/public/index.html +++ b/public/index.html @@ -24,9 +24,12 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + + Static Exchange - +