feat: redesign UI with modern swap interface

- Completely redesign Swap component with modern card-based layout
- Add gradient backgrounds and smooth animations
- Implement responsive design for mobile and desktop
- Create beautiful wallet connection interface
- Add enhanced wallet selection modal with improved styling
- Remove outdated components (ApiKeyInput, CreatePools, Deposit)
- Simplify app header with clean InSwap integration description

UI Improvements:
- Modern gradient card design for token input/output
- Intuitive swap interface with visual arrow indicator
- Real-time balance display with pending transaction info
- Smooth hover effects and loading animations
- Professional wallet connection flow
- Mobile-responsive layout (max-width: 480px)
- Enhanced button states and user feedback

UX Enhancements:
- Clear visual hierarchy and spacing
- User-friendly error messages
- Loading states with progress indicators
- Accessible color scheme and typography
- Simplified navigation and reduced cognitive load

Author: sloth

brc20-swap-demo/src/App.tsx

@@ -1,42 +1,53 @@
-import React from 'react';
-import './styles/App.css';
-import {Card, Tabs} from "antd";
-import {Swap} from "./components/Swap";
-import {ApiKeyInput} from "./components/ApiKeyInput";
-import {Deposit} from "./components/Deposit";
+import React from "react";
+import "./styles/App.css";
+import { Card, Tabs } from "antd";
+import { Swap } from "./components/Swap";
 
 function App() {
-    return (
-        <div className="app">
-            <div className="main-container">
-                <ApiKeyInput/>
-                <Card size={'small'} className={'mt-16'}>
-                    <ol>
-                        <li>Input your Api Key and refresh page</li>
-                        <li>Connect UniSat wallet.</li>
-                        <li>Click 'Deposit' tab, click 'Mint sats' to mint some sats.(<a
-                            href="https://fractal-testnet.unisat.io/explorer/faucet">get tFB</a>)
-                        </li>
-                        <li>Choose 'sats' and click 'inscribe transfer' to create transfer-inscription</li>
-                        <li>Choose one transfer-inscription to deposit(it may need some confirmations).</li>
-                        <li>Click 'swap' tab, input your pay sats then click swap</li>
-                    </ol>
-                </Card>
-                <Card bordered={false} size={"small"} style={{marginTop: 16, paddingTop: 0}}>
-
-                    <Tabs
-                        defaultActiveKey="1"
-                        tabPosition="top"
-                        items={[
-                            {key: "1", label: "Swap", children: <Swap/>},
-                            {key: "2", label: "Deposit", children: <Deposit/>},
-                            // {key: "3", label: "Pools", children: <CreatePools/>},
-                        ]}
-                    />
-                </Card>
-            </div>
-        </div>
-    );
+  return (
+    <div className="app">
+      <div className="main-container">
+        <Card size={"small"} className={"mt-16"}>
+          <div style={{ textAlign: "center", padding: "8px 0" }}>
+            <h3 style={{ margin: "0 0 8px 0", color: "#1890ff" }}>
+              InSwap Demo
+            </h3>
+            <p style={{ margin: "0 0 8px 0", color: "#666" }}>
+              This demo shows how to integrate with{" "}
+              <a
+                href="https://inswap.cc/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                InSwap
+              </a>
+            </p>
+            <p style={{ margin: 0, fontSize: "14px", color: "#999" }}>
+              API Documentation:{" "}
+              <a
+                href="https://github.com/unisat-wallet/unisat-dev-docs/blob/master/open-api/auto-generated/docs/brc20-swap.md"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                BRC20 Swap API
+              </a>
+            </p>
+          </div>
+        </Card>
+        <Card
+          bordered={false}
+          size={"small"}
+          style={{ marginTop: 16, paddingTop: 0 }}
+        >
+          <Tabs
+            defaultActiveKey="1"
+            tabPosition="top"
+            items={[{ key: "1", label: "Swap", children: <Swap /> }]}
+          />
+        </Card>
+      </div>
+    </div>
+  );
 }
 
 export default App;