From 9b238b60dfdd7cc0cf1223f2f91320d0f99f3a6a Mon Sep 17 00:00:00 2001
From: Thammarong Glomjai <thammarong.g@siamintech.co.th>
Date: Fri, 15 Nov 2024 04:07:37 +0700
Subject: [PATCH] refector: update ui code

---
 src/assets/bitcoin-btc-logo.svg               |  15 ++
 src/assets/icon_lightning.svg                 |  16 ++
 src/assets/solana-sol-logo.svg                |  28 +++
 src/assets/sui-sui-logo.svg                   |  15 ++
 src/components/Layout/Header/Header.tsx       |   2 +-
 src/components/WalletStatus.tsx               |   1 -
 .../elements/Container/Container.tsx          |   6 +-
 src/main.tsx                                  |   1 -
 src/pages/Swap.tsx                            | 201 +++++++++++++++++-
 src/pages/Transaction.tsx                     |  17 +-
 10 files changed, 277 insertions(+), 25 deletions(-)
 create mode 100644 src/assets/bitcoin-btc-logo.svg
 create mode 100644 src/assets/icon_lightning.svg
 create mode 100644 src/assets/solana-sol-logo.svg
 create mode 100644 src/assets/sui-sui-logo.svg

diff --git a/src/assets/bitcoin-btc-logo.svg b/src/assets/bitcoin-btc-logo.svg
new file mode 100644
index 0000000..2b75c99
--- /dev/null
+++ b/src/assets/bitcoin-btc-logo.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW 2019 (64-Bit) -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 4091.27 4091.73"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1421344023328">
+   <path fill="#F7931A" fill-rule="nonzero" d="M4030.06 2540.77c-273.24,1096.01 -1383.32,1763.02 -2479.46,1489.71 -1095.68,-273.24 -1762.69,-1383.39 -1489.33,-2479.31 273.12,-1096.13 1383.2,-1763.19 2479,-1489.95 1096.06,273.24 1763.03,1383.51 1489.76,2479.57l0.02 -0.02z"/>
+   <path fill="white" fill-rule="nonzero" d="M2947.77 1754.38c40.72,-272.26 -166.56,-418.61 -450,-516.24l91.95 -368.8 -224.5 -55.94 -89.51 359.09c-59.02,-14.72 -119.63,-28.59 -179.87,-42.34l90.16 -361.46 -224.36 -55.94 -92 368.68c-48.84,-11.12 -96.81,-22.11 -143.35,-33.69l0.26 -1.16 -309.59 -77.31 -59.72 239.78c0,0 166.56,38.18 163.05,40.53 90.91,22.69 107.35,82.87 104.62,130.57l-104.74 420.15c6.26,1.59 14.38,3.89 23.34,7.49 -7.49,-1.86 -15.46,-3.89 -23.73,-5.87l-146.81 588.57c-11.11,27.62 -39.31,69.07 -102.87,53.33 2.25,3.26 -163.17,-40.72 -163.17,-40.72l-111.46 256.98 292.15 72.83c54.35,13.63 107.61,27.89 160.06,41.3l-92.9 373.03 224.24 55.94 92 -369.07c61.26,16.63 120.71,31.97 178.91,46.43l-91.69 367.33 224.51 55.94 92.89 -372.33c382.82,72.45 670.67,43.24 791.83,-303.02 97.63,-278.78 -4.86,-439.58 -206.26,-544.44 146.69,-33.83 257.18,-130.31 286.64,-329.61l-0.07 -0.05zm-512.93 719.26c-69.38,278.78 -538.76,128.08 -690.94,90.29l123.28 -494.2c152.17,37.99 640.17,113.17 567.67,403.91zm69.43 -723.3c-63.29,253.58 -453.96,124.75 -580.69,93.16l111.77 -448.21c126.73,31.59 534.85,90.55 468.94,355.05l-0.02 0z"/>
+  </g>
+ </g>
+</svg>
diff --git a/src/assets/icon_lightning.svg b/src/assets/icon_lightning.svg
new file mode 100644
index 0000000..7809da9
--- /dev/null
+++ b/src/assets/icon_lightning.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="300px" height="240px" viewBox="0 0 300 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 31</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-31">
+            <g id="img_blockchain_btc">
+                <circle id="椭圆形" fill="#F89E2E" transform="translate(120.000000, 120.000000) rotate(-360.000000) translate(-120.000000, -120.000000) " cx="120" cy="120" r="120"></circle>
+                <path d="M109.620637,35.2651787 L109.619993,59.5591787 L120.030993,59.5591787 L120.031351,35.2651787 L135.912191,35.2651787 L135.912336,60.1017264 C155.407267,63.0398048 171.12652,77.4030178 170.968719,90.178451 C170.85086,99.7202804 166.945804,106.708081 159.253551,111.141854 C173.069845,115.37739 179.977993,125.359272 179.977993,141.0875 C179.977993,164.578909 161.208972,175.33803 135.912796,175.429659 L135.912191,200.265179 L120.031351,200.265179 L120.030993,175.430179 L109.619993,175.430179 L109.620637,200.265179 L93.7397962,200.265179 L93.7389929,175.430179 L64.9779929,175.43025 L69.9187669,155.596552 L78.0652232,155.596552 C81.9609805,155.596552 84.6478905,151.591867 84.6478905,147.700924 L84.6478905,84.8414566 C84.6478905,79.9130829 80.8288583,76.039153 76.836016,76.039153 L64.9779929,76.039153 L64.9779929,59.560066 L93.7389929,59.5591787 L93.7397962,35.2651787 L109.620637,35.2651787 Z M109.620637,123.736502 L109.620637,156.790806 C136.626546,157.310861 150.129501,151.80181 150.129501,140.263654 C150.129501,128.725498 136.626546,123.216448 109.620637,123.736502 Z M109.620637,77.1697387 L109.620637,107.602935 C131.926211,107.602935 143.078998,102.530736 143.078998,92.386337 C143.078998,82.2419381 131.926211,77.1697387 109.620637,77.1697387 Z" id="形状结合" fill="#FFFFFF" transform="translate(122.477993, 117.765179) rotate(-345.000000) translate(-122.477993, -117.765179) "></path>
+            </g>
+            <g id="编组-4" transform="translate(180.000000, 120.000000)">
+                <circle id="椭圆形" fill="#8716FF" cx="60" cy="60" r="60"></circle>
+                <path d="M73.3333333,20 L63.8093333,53.333 L86.6666667,53.3333333 L46.6666667,100 L56.1903333,66.666 L33.3333333,66.6666667 L73.3333333,20 Z" id="Lighning" fill="#FFFFFF" transform="translate(60.000000, 60.000000) rotate(-345.000000) translate(-60.000000, -60.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/solana-sol-logo.svg b/src/assets/solana-sol-logo.svg
new file mode 100644
index 0000000..bd349af
--- /dev/null
+++ b/src/assets/solana-sol-logo.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 397.7 311.7" style="enable-background:new 0 0 397.7 311.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_2_);}
+	.st2{fill:url(#SVGID_3_);}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="360.8791" y1="351.4553" x2="141.213" y2="-69.2936" gradientTransform="matrix(1 0 0 -1 0 314)">
+	<stop  offset="0" style="stop-color:#00FFA3"/>
+	<stop  offset="1" style="stop-color:#DC1FFF"/>
+</linearGradient>
+<path class="st0" d="M64.6,237.9c2.4-2.4,5.7-3.8,9.2-3.8h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5
+	c-5.8,0-8.7-7-4.6-11.1L64.6,237.9z"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="264.8291" y1="401.6014" x2="45.163" y2="-19.1475" gradientTransform="matrix(1 0 0 -1 0 314)">
+	<stop  offset="0" style="stop-color:#00FFA3"/>
+	<stop  offset="1" style="stop-color:#DC1FFF"/>
+</linearGradient>
+<path class="st1" d="M64.6,3.8C67.1,1.4,70.4,0,73.8,0h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5
+	c-5.8,0-8.7-7-4.6-11.1L64.6,3.8z"/>
+<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="312.5484" y1="376.688" x2="92.8822" y2="-44.061" gradientTransform="matrix(1 0 0 -1 0 314)">
+	<stop  offset="0" style="stop-color:#00FFA3"/>
+	<stop  offset="1" style="stop-color:#DC1FFF"/>
+</linearGradient>
+<path class="st2" d="M333.1,120.1c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8,0-8.7,7-4.6,11.1l62.7,62.7c2.4,2.4,5.7,3.8,9.2,3.8h317.4
+	c5.8,0,8.7-7,4.6-11.1L333.1,120.1z"/>
+</svg>
diff --git a/src/assets/sui-sui-logo.svg b/src/assets/sui-sui-logo.svg
new file mode 100644
index 0000000..d0e0833
--- /dev/null
+++ b/src/assets/sui-sui-logo.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 300 383.5" style="enable-background:new 0 0 300 383.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#4DA2FF;}
+</style>
+<path class="st0" d="M240.1,159.9c15.6,19.6,25,44.5,25,71.5s-9.6,52.6-25.7,72.4l-1.4,1.7l-0.4-2.2c-0.3-1.8-0.7-3.7-1.1-5.6
+	c-8-35.3-34.2-65.6-77.4-90.2c-29.1-16.5-45.8-36.4-50.2-59c-2.8-14.6-0.7-29.3,3.3-41.9c4.1-12.6,10.1-23.1,15.2-29.4l16.8-20.5
+	c2.9-3.6,8.5-3.6,11.4,0L240.1,159.9L240.1,159.9z M266.6,139.4L154.2,2c-2.1-2.6-6.2-2.6-8.3,0L33.4,139.4l-0.4,0.5
+	C12.4,165.6,0,198.2,0,233.7c0,82.7,67.2,149.8,150,149.8c82.8,0,150-67.1,150-149.8c0-35.5-12.4-68.1-33.1-93.8L266.6,139.4
+	L266.6,139.4z M60.3,159.5l10-12.3l0.3,2.3c0.2,1.8,0.5,3.6,0.9,5.4c6.5,34.1,29.8,62.6,68.6,84.6c33.8,19.2,53.4,41.3,59.1,65.6
+	c2.4,10.1,2.8,20.1,1.8,28.8l-0.1,0.5l-0.5,0.2c-15.2,7.4-32.4,11.6-50.5,11.6c-63.5,0-115-51.4-115-114.8
+	C34.9,204.2,44.4,179.1,60.3,159.5L60.3,159.5z"/>
+</svg>
diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
index fcd5edb..216b3ec 100644
--- a/src/components/Layout/Header/Header.tsx
+++ b/src/components/Layout/Header/Header.tsx
@@ -14,7 +14,7 @@ export const Header = ({ rightWidget, menuItems }: Props) => {
   return (
     <header
       className={
-        'sticky top-0 left-0 z-1003 w-full h-[var(--layout-header-height)] bg-[var(--color-background)]'
+        "sticky top-0 left-0 z-1003 w-full h-[var(--layout-header-height)] bg-white/20 shadow ring-1 ring-black/5"
       }
     >
       <nav className="flex w-full items-center justify-between gap-3 pb-3 pl-4 pr-4 pt-3">
diff --git a/src/components/WalletStatus.tsx b/src/components/WalletStatus.tsx
index 0b33a11..9546dab 100644
--- a/src/components/WalletStatus.tsx
+++ b/src/components/WalletStatus.tsx
@@ -8,7 +8,6 @@ export const WalletStatus = () => {
   return (
     <>
       <Heading mb="2">Wallet Status</Heading>
-
       {account ? (
         <Flex direction="column">
           <Text>Wallet connected</Text>
diff --git a/src/components/elements/Container/Container.tsx b/src/components/elements/Container/Container.tsx
index 6455c12..30607ac 100644
--- a/src/components/elements/Container/Container.tsx
+++ b/src/components/elements/Container/Container.tsx
@@ -4,6 +4,8 @@ import { Container as RadixContainer } from '@radix-ui/themes'
 import type { ContainerProps } from '@radix-ui/themes/dist/esm/components/container'
 
 export function Container(props: ContainerProps) {
-  const { className, ...other } = props
-  return <RadixContainer className={cn('w-11/12 pt-10', className)} {...other} />
+  const { className, ...other } = props;
+  return (
+    <RadixContainer className={cn("p-10", className)} {...other} />
+  );
 }
diff --git a/src/main.tsx b/src/main.tsx
index 3e0eec8..2b5e410 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -20,7 +20,6 @@ createRoot(document.getElementById('root')!).render(
       grayColor="gray"
       panelBackground="solid"
       scaling="100%"
-      radius="full"
     >
       <QueryClientProvider client={queryClient}>
         <SuiClientProvider networks={networkConfig} defaultNetwork="devnet">
diff --git a/src/pages/Swap.tsx b/src/pages/Swap.tsx
index 16f6767..b42272d 100644
--- a/src/pages/Swap.tsx
+++ b/src/pages/Swap.tsx
@@ -1,10 +1,203 @@
-import { WalletStatus } from '../components/WalletStatus'
-import { Container } from '../components/elements/Container'
+import { useCurrentAccount, ConnectButton } from "@mysten/dapp-kit";
+import { Box, Card, TextField, Flex, Select } from "@radix-ui/themes";
+import { Container } from "../components/elements/Container";
+import { useState } from "react";
+import BitcoinLogo from "./../assets/bitcoin-btc-logo.svg";
+import LNBitcoinLogo from "./../assets/icon_lightning.svg";
+import SuiLogo from "./../assets/sui-sui-logo.svg";
+import SolLogo from "./../assets/solana-sol-logo.svg";
+import { UpdateIcon } from "@radix-ui/react-icons";
+
+interface CryptoAsset {
+  label: string;
+  icon: JSX.Element;
+}
+
+interface CryptoData {
+  [key: string]: CryptoAsset;
+}
+
+const sourceData: CryptoData = {
+  btc: {
+    label: "BTC",
+    icon: <img src={BitcoinLogo} alt="BTC" className="w-5 h-5" />,
+  },
+  ln_btc: {
+    label: "LN-BTC",
+    icon: <img src={LNBitcoinLogo} alt="LN-BTC" className="w-6 h-6" />,
+  },
+};
+
+const targetData: CryptoData = {
+  sui: {
+    label: "SUI",
+    icon: <img src={SuiLogo} alt="SUI" className="w-5 h-5" />,
+  },
+  sol: {
+    label: "SOL",
+    icon: <img src={SolLogo} alt="SOL" className="w-6 h-6" />,
+  },
+};
+
+type SourceCurrency = keyof typeof sourceData;
+type TargetCurrency = keyof typeof targetData;
 
 export const Swap = () => {
+  const account = useCurrentAccount();
+  const [targetValue, setTargetValue] = useState<TargetCurrency>("sui");
+  const [sourceValue, setSourceValue] = useState<SourceCurrency>("btc");
+
+  // Mock balances - replace with actual balance fetching logic
+  const balances = {
+    btc: "1.245",
+    ln_btc: "0.5",
+    sui: "1000",
+    sol: "25.5",
+  };
+
+  const renderWalletInfo = () => {
+    if (!account) return null;
+
+    return (
+      <div className="mb-6">
+        <div className="flex items-center justify-between mb-1">
+          <span className="text-sm text-gray-400">Connected Wallet</span>
+          <span className="text-sm text-gray-400">
+            Balance: {balances[sourceValue]} {sourceData[sourceValue].label}
+          </span>
+        </div>
+        <div className="text-sm text-gray-500 font-medium">
+          {account.address.slice(0, 6)}...{account.address.slice(-4)}
+        </div>
+      </div>
+    );
+  };
+
+  const renderAmountInput = () => (
+    <Box className="w-7/12">
+      <TextField.Root
+        placeholder="0.00"
+        size="3"
+        className="h-14 bg-transparent focus:ring-0 border-none text-lg"
+      />
+    </Box>
+  );
+
+  const renderCurrencySelect = (
+    value: string,
+    onChange: (value: string) => void,
+    data: CryptoData,
+    options: { value: string; label: string }[]
+  ) => (
+    <Box className="w-5/12">
+      <Select.Root value={value} onValueChange={onChange} size="3">
+        <Select.Trigger className="w-full h-14 bg-white/5 border-none focus:ring-0 hover:bg-white/10 transition-colors">
+          <Flex align="center" gap="2" className="px-3">
+            {data[value].icon}
+            <span className="font-medium text-lg min-w-[80px]">
+              {data[value].label}
+            </span>
+          </Flex>
+        </Select.Trigger>
+        <Select.Content
+          position="popper"
+          className="bg-slate-800/90 backdrop-blur-md min-w-[140px]"
+        >
+          {options.map((option) => (
+            <Select.Item
+              key={option.value}
+              value={option.value}
+              className="text-gray-100 hover:bg-white/10 transition-colors focus:bg-white/10"
+            >
+              <Flex align="center" gap="2" className="px-2">
+                {data[option.value].icon}
+                <span className="font-medium">{option.label}</span>
+              </Flex>
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
+    </Box>
+  );
+
+  const renderWalletBackdrop = () => (
+    <div className="absolute inset-0 bg-black/20 backdrop-blur-md rounded-xl flex items-center justify-center">
+      <div className="bg-slate-800/90 backdrop-blur-md rounded-xl p-8 shadow-lg max-w-sm w-full mx-4">
+        <div className="text-center mb-6">
+          <h3 className="text-xl font-semibold text-white">Connect Wallet</h3>
+          <p className="text-sm text-gray-400 mt-2">
+            Please connect your wallet to access the swap feature
+          </p>
+        </div>
+        <div className="flex justify-center">
+          <ConnectButton className="bg-white/10 text-white px-6 py-3 rounded-lg hover:bg-white/20 transition-colors font-medium" />
+        </div>
+      </div>
+    </div>
+  );
+
+  const sourceOptions = [
+    { value: "btc", label: "BTC" },
+    { value: "ln_btc", label: "LN-BTC" },
+  ];
+
+  const targetOptions = [
+    { value: "sui", label: "SUI" },
+    { value: "sol", label: "SOL" },
+  ];
+
   return (
-    <Container data-testid="swap-page">
-      <WalletStatus />
+    <Container data-testid="swap-page" maxWidth="1" className="min-h-screen">
+      <div className="max-w-screen-xl mx-auto px-4">
+        <div className="py-8" />
+
+        <div className="flex justify-center">
+          <Box className="w-full max-w-[520px] relative">
+            <Card className="bg-slate-800/90 backdrop-blur-md text-white rounded-xl p-6">
+              <div className="space-y-6">
+                {renderWalletInfo()}
+
+                <div>
+                  <p className="text-gray-400 mb-2">You pay</p>
+                  <div className="rounded-xl bg-black/20 p-4 backdrop-blur-md">
+                    <Flex gap="3" justify="between">
+                      {renderAmountInput()}
+                      {renderCurrencySelect(
+                        sourceValue,
+                        setSourceValue,
+                        sourceData,
+                        sourceOptions
+                      )}
+                    </Flex>
+                  </div>
+                </div>
+
+                <div className="flex justify-center">
+                  <div className="bg-white/5 hover:bg-white/10 p-3 rounded-xl cursor-pointer transition-colors">
+                    <UpdateIcon className="w-6 h-6 text-white rotate-180" />
+                  </div>
+                </div>
+
+                <div>
+                  <p className="text-gray-400 mb-2">You receive</p>
+                  <div className="rounded-xl bg-black/20 p-4 backdrop-blur-md">
+                    <Flex gap="3" justify="between">
+                      {renderAmountInput()}
+                      {renderCurrencySelect(
+                        targetValue,
+                        setTargetValue,
+                        targetData,
+                        targetOptions
+                      )}
+                    </Flex>
+                  </div>
+                </div>
+              </div>
+            </Card>
+            {!account && renderWalletBackdrop()}
+          </Box>
+        </div>
+      </div>
     </Container>
   )
 }
diff --git a/src/pages/Transaction.tsx b/src/pages/Transaction.tsx
index 0d93332..f273145 100644
--- a/src/pages/Transaction.tsx
+++ b/src/pages/Transaction.tsx
@@ -3,22 +3,7 @@ import { Box, Text, Flex, Card, Avatar } from '@radix-ui/themes'
 export const Transaction = () => (
   <Box maxWidth="240px">
     <Card>
-      <Flex gap="3" align="center">
-        <Avatar
-          size="3"
-          src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
-          radius="full"
-          fallback="T"
-        />
-        <Box>
-          <Text as="div" size="2" weight="bold">
-            Teodros Girmay
-          </Text>
-          <Text as="div" size="2" color="gray">
-            Engineering
-          </Text>
-        </Box>
-      </Flex>
+     
     </Card>
   </Box>
 )