-
Notifications
You must be signed in to change notification settings - Fork 0
/
Header.js
124 lines (113 loc) · 4.23 KB
/
Header.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { ethers } from 'ethers';
import { Web3Button, Web3Modal, Web3NetworkSwitch } from '@web3modal/react'
import MyWalletButton from '../components/MyWalletButton';
const routes = {
'Home': '/',
'Credit Line': '/credit-line',
'Pay': '/pay',
}
const Header = ({creditWalletAddress}) => {
const [isNavExpanded, setIsNavExpanded] = useState(false);
const [smartContractWalletAddress, setSmartContractWalletAddress] = useState(null);
const location = useLocation();
useEffect(() => {
const getSmartContractWalletAddress = async () => {
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const address = await signer.getAddress();
const abi = [
{
"inputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"name": "wallets",
"outputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
}
];
const contract = new ethers.Contract("0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512", abi, signer);
const smartContractWalletAddress = await contract.wallets(address);
if(smartContractWalletAddress != 0x00)
setSmartContractWalletAddress(smartContractWalletAddress);
}
getSmartContractWalletAddress();
}, []);
const NavItem = ({ name, route }) => {
return (<li>
<Link
to={route}
className={
location.pathname === {route}
? 'block py-2 pr-4 pl-3 md:p-0'
: 'block py-2 pr-4 pl-3 text-gray-400 md:border-0 md:p-0'
}
onClick={() => {
setIsNavExpanded(false);
}}
>
{name}
</Link>
</li>);
};
return (
<header className={isNavExpanded ? 'menu-open' : ''}>
<nav className="border-gray-200 px-2 sm:px-4 py-2.5 primary-menu left-0 rigt-0 z-20 fixed w-full bg-white border-b">
<div className="container flex flex-wrap justify-between items-center mx-auto">
<Link
to="/"
className="flex items-center"
onClick={() => {
setIsNavExpanded(false);
}}
>
{/* <img src="https://chainway.xyz/img/favicon.jpg" alt="Boilerplate" width="30" height="60" className="mr-4" /> */}
<span className="self-center text-xl font-bold whitespace-nowrap">
Joey Finance
</span>
</Link>
<button
data-collapse-toggle="navbar-default"
type="button"
className="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden focus:outline-none"
aria-controls="navbar-default"
aria-expanded="false"
onClick={() => {
setIsNavExpanded(!isNavExpanded);
}}
>
<span className="sr-only">Open main menu</span>
<svg className="svg-trigger" viewBox="0 0 100 100">
<path d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20"></path>
<path d="m 30,50 h 40"></path>
<path d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20"></path>
</svg>
</button>
<div className="hidden w-full md:block md:w-auto" id="navbar-default">
<ul className="flex flex-col p-4 mt-4 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 items-center">
{Object.keys(routes).map((name) => (
<NavItem key={name} name={name} route={routes[name]} />
))}
<li><Web3Button className="bg-red-900" /></li>
<li><Web3NetworkSwitch /></li>
<li>{creditWalletAddress && <MyWalletButton address={creditWalletAddress} />}</li>
</ul>
</div>
</div>
</nav>
</header>
);
};
export default Header;