finished some functionality, design - wallet can be connected.

packages/react-app/public/index.html

@@ -14,14 +14,16 @@
         theme: {
           extend: {
             colors: {
-              "site-black": "#1F1D2B",
+              "site-black": "#00243b",
               "dim-white": "#E2E2E2",
-              "site-pink": "#E8006F",
+              "site-blue": "#18a8d3",
               "site-dim": "rgba(255, 255, 255, 0.02)",
               "site-dim2": "rgba(255, 255, 255, 0.13)",
             },
             fontFamily: {
               poppins: ["Poppins", "sans-serif"],
+              teko: ["Teko", "sans-serif"],
+              roboto: ["Roboto", "sans-serif"]
             },
             boxShadow: {
               card: "0 8px 32px 0 rgba(0, 0, 0, 0.07)",

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;

packages/react-app/src/assets/index.js

@@ -1,5 +1,9 @@
 import chevronDown from "./chevron-down.svg";
 import ethereumLogo from "./ethereumLogo.png";
 import uniswapLogo from "./uniswapLogo.png";
+import fhtLogo from "./fhtLogo.png";
+import TechniKoinLogo from "./TechniKoinLogo.png";
+import eth from "./eth.png";
+import ethdiamondpurple from "./ethdiamondpurple.png";
 
-export { chevronDown, ethereumLogo, uniswapLogo };
+export { chevronDown, ethereumLogo, uniswapLogo, fhtLogo, TechniKoinLogo, eth, ethdiamondpurple};

packages/react-app/src/components/Exchange.js

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { Contract } from "@ethersproject/contracts";
+import { abis } from "@my-app/contracts";
+import { ERC20, useContractFunction, useEthers, useTokenAllowance, useTokenBalance } from "@usedapp/core";
+import { ethers } from "ethers";
+import { parseUnits } from "ethers/lib/utils";
+
+import { ROUTER_ADDRESS} from "../config";
+
+const Exchange = () => {
+    return (
+        <div>Exchange</div>
+    )
+}
+
+export default Exchange;

packages/react-app/src/components/Loader.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import styles from "../styles";
+import { ethereumLogo, eth, ethdiamondpurple } from "../assets";
+
+const Loader = ({ title }) => {
+return (
+    <div className={styles.loader}>
+      <img src={ethdiamondpurple} alt="Ethereum Logo" className={styles.loaderImg} />
+        <p className={styles.loaderText}>{title}</p>
+    </div>
+
+  );
+}
+
+export default Loader;

packages/react-app/src/components/WalletButton.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+import { shortenAddress, useEthers, useLookupAddress } from "@usedapp/core";
+
+import styles from "../styles";
+
+const WalletButton = () => {
+    const [accountAddress, setAccountAddress] = useState("");
+
+    const { ens } = useLookupAddress();
+    const { account, activateBrowserWallet, deactivate } = useEthers();
+
+    useEffect(() => {
+        if (ens) {
+            setAccountAddress(ens);
+        } else if (account) {
+            setAccountAddress(shortenAddress(account));
+        } else {
+            setAccountAddress("");
+        }
+    }, [account, ens, setAccountAddress]);
+
+    return (
+        <button
+            onClick={() => {
+                if (!account) {
+                    activateBrowserWallet();
+                } else {
+                    deactivate();
+                }
+            }}
+            className={styles.walletButton}
+        >
+            {accountAddress || "Connect Wallet"}
+        </button>
+    );
+};
+
+export default WalletButton;

packages/react-app/src/components/index.js

@@ -0,0 +1,3 @@
+export {default as Loader} from './Loader';
+export {default as Exchange} from './Exchange';
+export {default as WalletButton} from './WalletButton';

packages/react-app/src/index.css

@@ -1,4 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Teko:wght@100;200;300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -24,7 +26,7 @@ input[type="number"] {
   );
 }
 
-.pink_gradient {
+.green_gradient {
   position: absolute;
   top: 0%;
   left: 0%;
@@ -32,7 +34,7 @@ input[type="number"] {
   height: 123px;
   border-radius: 50%;
 
-  background: #fb37ff;
+  background: #a1f35f;
   filter: blur(200px);
 }
 
@@ -51,7 +53,7 @@ input[type="number"] {
 .gradient-border {
   background: linear-gradient(
     168.82deg,
-    #fb37ff 1.7%,
+    #88ce51 1.7%,
     rgba(155, 111, 238, 0) 27.12%,
     rgba(123, 127, 234, 0) 61.28%,
     #1bb2de 99.52%

packages/react-app/src/styles/index.js

@@ -6,8 +6,8 @@ const styles = {
   header: "flex flex-row justify-between items-center w-full sm:py-10 py-6",
   exchangeContainer:
     "flex-1 flex justify-start items-center flex-col w-full mt-10",
-  headTitle: "text-white font-poppins font-black text-5xl tracking-wide",
+  headTitle: "text-white font-roboto font-black text-6xl tracking-wide",
-  subTitle: "text-dim-white font-poppins font-medium mt-3 text-base",
+  subTitle: "text-dim-white font-teko font-medium text-4xl mt-3 text-base",
   exchangeBoxWrapper: "mt-10 w-full flex justify-center",
   exchangeBox:
     "relative md:max-w-[700px] md:min-w-[500px] min-w-full max-w-full gradient-border p-[2px] rounded-3xl",
@@ -33,13 +33,13 @@ const styles = {
 
   // WalletButton
   walletButton:
-    "bg-site-pink border-none outline-none px-6 py-2 font-poppins font-bold text-lg text-white rounded-3xl leading-[24px] hover:bg-pink-600 transition-all",
+    "bg-site-blue border-none outline-none px-6 py-2 font-poppins font-bold text-lg text-white rounded-3xl leading-[24px] hover:bg-green-600 transition-all",
 
   // loader
   loader: "flex justify-center items-center flex-col w-full min-h-full",
-  loaderImg: "w-56 h-56 object-contain",
+  loaderImg: "w-56 h-56 object-contain animate-pulse",
   loaderText:
-    "font-poppins font-normal text-dim-white text-lg text-center mt-10",
+    "font-roboto font-normal text-dim-white text-lg text-center mt-10",
 
   // balance
   balance: "w-full text-left mt-2 ml-2",