From 6f55967933cdb186f2ee461e17c7dd94a8336a55 Mon Sep 17 00:00:00 2001
From: Thammarong Glomjai <thammarong.g@siamintech.co.th>
Date: Fri, 15 Nov 2024 04:27:39 +0700
Subject: [PATCH] refector: fix code to complie ts rules

---
 src/components/Layout/Header/Header.tsx       |   7 +-
 .../elements/Container/Container.tsx          |   6 +-
 src/pages/Swap.tsx                            | 105 ++++++++----------
 src/pages/Transaction.tsx                     |  16 +--
 4 files changed, 59 insertions(+), 75 deletions(-)

diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
index 216b3ec..866069d 100644
--- a/src/components/Layout/Header/Header.tsx
+++ b/src/components/Layout/Header/Header.tsx
@@ -1,12 +1,9 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import Menu from './Menu'
 // import styles from "./Header.module.css";
 import { Logo } from './Logo'
 
 type Props = {
-  rightWidget: any
+  rightWidget: JSX.Element
   menuItems: { label: string; href: string; testId: string }[]
 }
 
@@ -14,7 +11,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-white/20 shadow ring-1 ring-black/5"
+        '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/elements/Container/Container.tsx b/src/components/elements/Container/Container.tsx
index 30607ac..550a3d1 100644
--- a/src/components/elements/Container/Container.tsx
+++ b/src/components/elements/Container/Container.tsx
@@ -4,8 +4,6 @@ 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("p-10", className)} {...other} />
-  );
+  const { className, ...other } = props
+  return <RadixContainer className={cn('p-10', className)} {...other} />
 }
diff --git a/src/pages/Swap.tsx b/src/pages/Swap.tsx
index b42272d..378ce07 100644
--- a/src/pages/Swap.tsx
+++ b/src/pages/Swap.tsx
@@ -1,62 +1,63 @@
-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";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+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;
+  label: string
+  icon: JSX.Element
 }
 
 interface CryptoData {
-  [key: string]: CryptoAsset;
+  [key: string]: CryptoAsset
 }
 
 const sourceData: CryptoData = {
   btc: {
-    label: "BTC",
+    label: 'BTC',
     icon: <img src={BitcoinLogo} alt="BTC" className="w-5 h-5" />,
   },
   ln_btc: {
-    label: "LN-BTC",
+    label: 'LN-BTC',
     icon: <img src={LNBitcoinLogo} alt="LN-BTC" className="w-6 h-6" />,
   },
-};
+}
 
 const targetData: CryptoData = {
   sui: {
-    label: "SUI",
+    label: 'SUI',
     icon: <img src={SuiLogo} alt="SUI" className="w-5 h-5" />,
   },
   sol: {
-    label: "SOL",
+    label: 'SOL',
     icon: <img src={SolLogo} alt="SOL" className="w-6 h-6" />,
   },
-};
+}
 
-type SourceCurrency = keyof typeof sourceData;
-type TargetCurrency = keyof typeof targetData;
+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");
+  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 balances: any = {
+    btc: '1.245',
+    ln_btc: '0.5',
+    sui: '1000',
+    sol: '25.5',
+  }
 
   const renderWalletInfo = () => {
-    if (!account) return null;
+    if (!account) return null
 
     return (
       <div className="mb-6">
@@ -70,8 +71,8 @@ export const Swap = () => {
           {account.address.slice(0, 6)}...{account.address.slice(-4)}
         </div>
       </div>
-    );
-  };
+    )
+  }
 
   const renderAmountInput = () => (
     <Box className="w-7/12">
@@ -81,10 +82,10 @@ export const Swap = () => {
         className="h-14 bg-transparent focus:ring-0 border-none text-lg"
       />
     </Box>
-  );
+  )
 
   const renderCurrencySelect = (
-    value: string,
+    value: any,
     onChange: (value: string) => void,
     data: CryptoData,
     options: { value: string; label: string }[]
@@ -94,16 +95,14 @@ export const Swap = () => {
         <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>
+            <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) => (
+          {options.map(option => (
             <Select.Item
               key={option.value}
               value={option.value}
@@ -118,7 +117,7 @@ export const Swap = () => {
         </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">
@@ -134,17 +133,17 @@ export const Swap = () => {
         </div>
       </div>
     </div>
-  );
+  )
 
   const sourceOptions = [
-    { value: "btc", label: "BTC" },
-    { value: "ln_btc", label: "LN-BTC" },
-  ];
+    { value: 'btc', label: 'BTC' },
+    { value: 'ln_btc', label: 'LN-BTC' },
+  ]
 
   const targetOptions = [
-    { value: "sui", label: "SUI" },
-    { value: "sol", label: "SOL" },
-  ];
+    { value: 'sui', label: 'SUI' },
+    { value: 'sol', label: 'SOL' },
+  ]
 
   return (
     <Container data-testid="swap-page" maxWidth="1" className="min-h-screen">
@@ -162,12 +161,7 @@ export const Swap = () => {
                   <div className="rounded-xl bg-black/20 p-4 backdrop-blur-md">
                     <Flex gap="3" justify="between">
                       {renderAmountInput()}
-                      {renderCurrencySelect(
-                        sourceValue,
-                        setSourceValue,
-                        sourceData,
-                        sourceOptions
-                      )}
+                      {renderCurrencySelect(sourceValue, setSourceValue, sourceData, sourceOptions)}
                     </Flex>
                   </div>
                 </div>
@@ -183,12 +177,7 @@ export const Swap = () => {
                   <div className="rounded-xl bg-black/20 p-4 backdrop-blur-md">
                     <Flex gap="3" justify="between">
                       {renderAmountInput()}
-                      {renderCurrencySelect(
-                        targetValue,
-                        setTargetValue,
-                        targetData,
-                        targetOptions
-                      )}
+                      {renderCurrencySelect(targetValue, setTargetValue, targetData, targetOptions)}
                     </Flex>
                   </div>
                 </div>
diff --git a/src/pages/Transaction.tsx b/src/pages/Transaction.tsx
index f273145..3208f3f 100644
--- a/src/pages/Transaction.tsx
+++ b/src/pages/Transaction.tsx
@@ -1,9 +1,9 @@
-import { Box, Text, Flex, Card, Avatar } from '@radix-ui/themes'
+import { Container } from '@radix-ui/themes'
 
-export const Transaction = () => (
-  <Box maxWidth="240px">
-    <Card>
-     
-    </Card>
-  </Box>
-)
+export const Transaction = () => {
+  return (
+    <Container data-testid="transaction-page" maxWidth="1" className="min-h-screen">
+      <div className="max-w-screen-xl mx-auto px-4"></div>
+    </Container>
+  )
+}