46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
import React from "react"
|
|
import { useEthers } from "@usedapp/core";
|
|
|
|
import { usePools } from "./hooks";
|
|
import styles from './styles';
|
|
import { fhtLogo } from './assets';
|
|
import { Exchange, Loader, WalletButton } from "./components";
|
|
|
|
|
|
const App = () => {
|
|
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; |