integrate backend

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

env.example

@@ -0,0 +1,3 @@
+REACT_APP_BACKEND_ENDPOINT = 
+REACT_APP_COOKIE_EXPIRATION_DAY = 
+REACT_APP_DENOM_DECIMAL = 

package.json

@@ -6,10 +6,12 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^1.2.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
+    "react-use-clipboard": "^1.0.9",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -8,16 +8,15 @@ import RecoverAccount from './component/RecoverAccount';
 
 function App() {
 
-	const [isLogged, setIsLogged] = useState(false);
 
 	return (
 		<Router>
 			<Switch>
 				<Route path="/" exact>
-					<Home isLogged={isLogged} setIsLogged={setIsLogged} />
+					<Home />
 				</Route>
 				<Route path="/setup-passphrase-new-account">
-					<SetupPassPhraseNewAccount isLogged={isLogged} setIsLogged={setIsLogged} />
+					<SetupPassPhraseNewAccount />
 				</Route>
 				<Route path="/recover-account">
 					<RecoverAccount />

src/component/Header.js

@@ -1,21 +1,35 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import { Link } from 'react-router-dom';
+import useClipboard from 'react-use-clipboard';
+import useCookie from '../useCookie';
 
 function classNames(...classes) {
     return classes.filter(Boolean).join(' ')
 }
 
-export default function Header({isLogged, setIsLogged}) {
+export default function Header() {
 
-    const [account, setAccount] = useState('39d01814113b4c7d3bcd05549fa6b8845316b39407525cbf45b052e47455c557');
+    const [account, setAccount] = useCookie('address', '');
     const [showAccount, isShowAccount] = useState(false);
+    const [isLogged, updateIsLogged] = useCookie('isLogged', 0);
+    const history = useHistory();
+    const [isCopied, setIsCopied] = useClipboard(account, {
+		successDuration: 200,
+	});
+
+    const handleLogout = () => {
+        updateIsLogged(0, 0);
+        setAccount('', 0);
+        window.location.reload();
+    }
 
     return (
         <div className='header absolute w-full'>
             <div className='absolute z-20 w-full h-7 flex flex-row justify-between items-center mt-3 px-2'>
                 <img src='./assets/logo.png' className='logo w-auto h-full' />
                 {
-                    isLogged ?
+                    isLogged == 1 ?
                         <div
                             className='user-account flex items-center w-max p-2 rounded-full bg-[#122633] cursor-pointer'
                             onClick={() => isShowAccount((p) => p ? false : true)}
@@ -41,15 +55,13 @@ export default function Header({isLogged, setIsLogged}) {
                     <div className='account-wrapper overflow-hidden max-w-full text-[#999999] text-ellipsis font-bold'>
                         {account}
                     </div>
-                    <img src="./assets/copyIconGreen.svg" alt='Copy Icon' className='h-[18px]' />
+                    <img src={isCopied ? "./assets/copiedIconGreen.svg" : "./assets/copyIconGreen.svg"} alt='Copy Icon' className='h-[18px] cursor-pointer' onClick={setIsCopied}/>
+
                 </div>
                 <div className='flex w-full bottom-10 absolute'>
-                    <button 
+                    <button
                         className='text-[#727279] font-bold m-auto'
-                        onClick={() => {
-                            setIsLogged(false);
-                            isShowAccount(false);
-                        }}
+                        onClick={handleLogout}
                     >
                         Log out
                     </button>

src/component/Home.js

@@ -1,16 +1,37 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Header from './Header';
+import useCookie from '../useCookie';
+import axios from 'axios';
 
-export default function Home({isLogged, setIsLogged}) {
+export default function Home() {
 
-    const [balance, setBalance] = useState(12555);
+    const [balance, setBalance] = useState(0);
+    const [isLogged, updateIsLogged] = useCookie('isLogged', 0);
+    const [account, setAccount] = useCookie('address', '');
+    const backend_endpoint = process.env.REACT_APP_BACKEND_ENDPOINT;
+    const denomDecimal = Number(process.env.REACT_APP_DENOM_DECIMAL);
+
+    const getBalance = async (_account) => {
+        try {
+            const response = await axios.get(`${backend_endpoint}/get-balance/${_account}`, (res, err) => {
+                return res.data;
+            });
+            if (response.data.type == "success") setBalance(Number(response.data.data) / (10 ** denomDecimal));
+        } catch (err) {
+            console.log(err);
+        }
+    }
+
+    useState(() => {
+        if (account) getBalance(account);
+    }, [account]);
 
     return (
         <div className='home bg-[#0B161E] min-h-screen'>
-            <Header isLogged={isLogged} setIsLogged={setIsLogged}/>
+            <Header />
             {
-                isLogged ?
+                isLogged == 1 ?
                     <div className='content flex flex-col text-center justify-center w-full pt-32 '>
                         <p className='font-bold m-3 text-6xl text-[#A1A1A8]'>
                             {balance} CORE