finished some functionality, design - wallet can be connected.

packages/react-app/src/App.js

@@ -1,7 +1,45 @@
 import React from "react"
+import { useEthers } from "@usedapp/core";
+
+import styles from './styles';
+import { fhtLogo, TechniKoinLogo }  from './assets';
+import { Exchange, Loader, WalletButton } from "./components";
+
 
 const App = () => {
-  return <p>Hello, Web3!</p>
+    const { account } = useEthers();
+    const poolsLoading = false;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.innerContainer}>
+        <header className={styles.header}>
+            <img src={fhtLogo} alt="FHT Logo" className="w-16 h-16 object-contain"/>
+            {/*<img src={TechniKoinLogo} alt="TechniKoinLogo" className="w-60 h-16 object-contain" />*/}
+            <WalletButton />
+        </header>
+
+        <div className={styles.exchangeContainer}>
+            <h1 className={styles.headTitle}>TechniSwap</h1>
+            <p className={styles.subTitle}>Exchange your ETH to FHT</p>
+
+            <div className={styles.exchangeBoxWrapper}>
+                <div className={styles.exchangeBox}>
+                    <div className="green_gradient" />
+                    <div className={styles.exchange}>
+                        {account ? (
+                            poolsLoading ? (
+                                <Loader title="Loading pools, please wait!" />
+                            ) : <Exchange />
+                        ) : <Loader title="Please connect your wallet!"/>}
+                    </div>
+                    <div className="blue_gradient" />
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default App;