Skip to content

Commit 30d3be6

Browse files
OmkarPhOmkarPh
committed
Merge branch 'master' into contracts/core
2 parents 3968f0e + 33d7d9d commit 30d3be6

File tree

12 files changed

+364
-0
lines changed

12 files changed

+364
-0
lines changed

‎public/assets/matic.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎public/assets/usdc.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/assets/matic.png‎

1.33 KB
Loading

‎src/assets/nft.jpeg‎

4.06 KB
Loading

‎src/assets/usdc.png‎

9.06 KB
Loading

‎src/components/Borrow/Borrow.jsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const Borrow = () => {
2+
return (
3+
<div className="flex flex-col gap-y-[30px] w-[100%] h-[100%] text-white p-[20px] px-[30px] text-inter">
4+
<div className="flex flex-row items-center">
5+
<div className="font-inter text-[16px] font-medium">
6+
Loan amount:
7+
</div>
8+
9+
<input className="ml-auto bg-transparent text-right text-[#696c80] font-medium outline-none" placeholder="0.00" />
10+
<div className="flex flex-row items-center gap-x-[10px] text-[14px] text-white w-auto h-[40px] p-[5px] px-[8px] rounded-[20px] font-medium pr-[15px] ml-[25px] bg-[#404557]">
11+
<img className="w-[30px] h-[30px] rounded-full" src="./assets/usdc.svg" alt="usdcLogo"/>
12+
USDC
13+
</div>
14+
</div>
15+
16+
<div className="flex flex-row items-center">
17+
18+
<div className="font-inter text-[16px] font-medium">Expected repay duration:</div>
19+
<input className="ml-auto bg-transparent text-right text-[#696c80] font-medium mr-[10px] outline-none" placeholder="0" />
20+
<div>days</div>
21+
22+
</div>
23+
24+
<div className="flex flex-row items-center">
25+
26+
<div className="font-inter text-[16px] font-medium">Interest %:</div>
27+
<div className="ml-auto bg-transparent text-right text-[#696c80] font-medium mr-[10px] outline-none">13%</div>
28+
<div>APR</div>
29+
30+
</div>
31+
32+
<div className="flex flex-row items-center">
33+
34+
<div className="font-inter text-[16px] font-medium">Interest Amount:</div>
35+
<div className="ml-auto text-right text-[#696c80] font-medium mr-[10px]">9999</div>
36+
<div className="flex flex-row items-center gap-x-[10px] text-[14px] text-white w-auto h-[40px] p-[5px] px-[8px] rounded-[20px] font-medium pr-[15px] ml-[10px] bg-[#404557]">
37+
{/* <div className="flex justify-center w-[30px] h-[30px] rounded-full bg-white p-[4px] box-border"> */}
38+
<img className="w-[30px] h-[30px] rounded-full" src="./assets/usdc.svg" alt="usdcLogo"/>
39+
{/* </div> */}
40+
USDC
41+
</div>
42+
43+
</div>
44+
45+
<div className="flex flex-row items-center">
46+
47+
<div className="font-inter text-[16px] font-medium">Required collateral:</div>
48+
<div className="ml-auto text-right text-[#696c80] font-medium mr-[10px]">9999</div>
49+
<div className="flex flex-row items-center gap-x-[10px] text-[14px] text-white w-auto h-[40px] p-[5px] px-[8px] rounded-[20px] font-medium pr-[15px] ml-[10px] bg-[#404557]">
50+
<div className="flex justify-center w-[30px] h-[30px] rounded-full bg-white p-[4px] box-border">
51+
<img src="./assets/matic.svg" alt="maticLogo"/>
52+
</div>
53+
MATIC
54+
</div>
55+
</div>
56+
57+
<button
58+
type="submit"
59+
className="bg-blue py-[8px] px-[24px] rounded-lg text-white justify-center self-center font-inter font-medium"
60+
>
61+
Confirm Borrow
62+
</button>
63+
64+
<div className="flex flex-row items-center gap-x-[5px] font-[300] text-gray-400 text-[12px] self-center mt-[-10px]">
65+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-[15px] h-[15px]">
66+
<path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
67+
</svg>
68+
on conforming collateral amount will be deducted from your account</div>
69+
</div>
70+
)
71+
}
72+
73+
export default Borrow

‎src/components/DashLeft/DashLeft.jsx‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import React from "react";
2+
import pfp from "../../assets/nft.jpeg";
3+
import matic from "../../assets/matic.png";
4+
import usdc from "../../assets/usdc.png";
5+
import Image from "next/image";
6+
import { useState } from "react";
7+
import { useEffect } from "react";
8+
import { Container } from "@mui/material";
9+
const https = require("https");
10+
11+
const DashLeft = () => {
12+
const [maticVal, setMaticVal] = useState({});
13+
const [usdVal, setUsdVal] = useState({});
14+
const dummyMatic = "3260.351432121505620812986766";
15+
var myHeaders = new Headers();
16+
myHeaders.append("X-CoinAPI-Key", "272E2537-42DC-4DE3-BB31-89072ACE051D");
17+
18+
var requestOptions = {
19+
method: "GET",
20+
headers: myHeaders,
21+
redirect: "follow",
22+
};
23+
24+
useEffect(() => {
25+
fetch("https://rest.coinapi.io/v1/exchangerate/BTC/MATIC/", requestOptions)
26+
.then((response) => response.text())
27+
.then((result) => setMaticVal(JSON.parse(result)))
28+
.catch((error) => console.log("error", error));
29+
30+
fetch("https://rest.coinapi.io/v1/exchangerate/BTC/USD/", requestOptions)
31+
.then((response) => response.text())
32+
.then((result) => setUsdVal(JSON.parse(result)))
33+
.catch((error) => console.log("error", error));
34+
}, []);
35+
36+
return (
37+
<div className="w-[100%] h-[100%] font-inter" style={{backgroundColor : '#12131A'}}>
38+
{/* PROFILE */}
39+
<Container className="text-white">
40+
<div className="flex p-5">
41+
<Image
42+
src={pfp}
43+
alt="image"
44+
width="50"
45+
height="50"
46+
style={{ borderRadius: "50px" }}
47+
/>
48+
<div className="text-3xl ml-3">Vansh</div>
49+
</div>
50+
<div>wallet address</div>
51+
</Container>
52+
53+
{/* CARDS */}
54+
<Container
55+
className="bg-slate-300 m-10 p-5"
56+
style={{
57+
maxWidth: "90%",
58+
backgroundColor: "#1b1e29",
59+
borderRadius: "20px",
60+
color: "#c7cad9",
61+
}}
62+
>
63+
<div>
64+
<div className="flex justify-between">
65+
<div className="flex">
66+
<Image
67+
src={matic}
68+
alt="matic"
69+
width="50"
70+
height="50"
71+
style={{ borderRadius: "50px" }}
72+
/>
73+
<span className="m-2">MATIC</span>
74+
</div>
75+
<div>
76+
<div style={{ color: "#696c80" }}>Price</div>
77+
<div>
78+
{maticVal.rate !== undefined
79+
? maticVal.rate
80+
: Math.round(dummyMatic).toFixed(2)}
81+
</div>
82+
</div>
83+
</div>
84+
<div className="m-2">code</div>
85+
</div>
86+
<hr style={{ background: "#C77DFF", height: "0.05px" }} />
87+
88+
<div>
89+
<div className="flex justify-between mt-3">
90+
<div className="flex">
91+
<Image
92+
src={usdc}
93+
alt="matic"
94+
width="50"
95+
height="50"
96+
style={{ borderRadius: "50px" }}
97+
/>
98+
<span className="m-2">MATIC</span>
99+
</div>
100+
<div>
101+
<div>Price</div>
102+
<div>
103+
{usdVal.rate !== undefined
104+
? usdVal.rate
105+
: Math.round(dummyMatic).toFixed(2)}
106+
</div>
107+
</div>
108+
</div>
109+
<div className="mt-2">code</div>
110+
</div>
111+
</Container>
112+
113+
{/* User's balance details */}
114+
<Container
115+
className="bg-slate-300 m-10 rounded-xl p-5 "
116+
style={{
117+
maxWidth: "90%",
118+
backgroundColor: "#1b1e29",
119+
borderRadius: "20px",
120+
color: "#c7cad9",
121+
}}
122+
>
123+
<div className="flex justify-between mb-5" style={{ color: "#696c80" }}>
124+
<div>My tokens</div>
125+
<div>Current Value</div>
126+
</div>
127+
<div>
128+
<div className="flex justify-between">
129+
<div className="flex">
130+
<Image
131+
src={matic}
132+
alt="matic"
133+
width="50"
134+
height="50"
135+
style={{ borderRadius: "50px" }}
136+
/>
137+
<span className="m-2">MATIC</span>
138+
</div>
139+
<div>
140+
<div></div>
141+
<div>
142+
{maticVal.rate !== undefined
143+
? maticVal.rate
144+
: Math.round(dummyMatic).toFixed(2)}
145+
</div>
146+
</div>
147+
</div>
148+
<div className="m-2">code</div>
149+
</div>
150+
<hr style={{ background: "#C77DFF", height: "0.05px" }} />
151+
<div>
152+
<div className="flex justify-between mt-3">
153+
<div className="flex">
154+
<Image
155+
src={usdc}
156+
alt="matic"
157+
width="50"
158+
height="50"
159+
style={{ borderRadius: "50px" }}
160+
/>
161+
<span className="m-2">MATIC</span>
162+
</div>
163+
<div>
164+
<div>
165+
{usdVal.rate !== undefined
166+
? usdVal.rate
167+
: Math.round(dummyMatic).toFixed(2)}
168+
</div>
169+
</div>
170+
</div>
171+
<div className="mt-2">code</div>
172+
</div>
173+
</Container>
174+
</div>
175+
);
176+
};
177+
178+
export default DashLeft;

‎src/components/DashRight/DashRight.jsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { useState } from "react"
2+
import Borrow from "../Borrow/Borrow"
3+
import Lend from "../Lend/Lend"
4+
5+
const DashRight = () => {
6+
const [state, setState] = useState('borrow')
7+
8+
return (
9+
<div className="bg-[#12131A] w-[100%] h-[100%]">
10+
<div className="flex flex-row gap-x-[10px] w-[200px] self-center bg-[#1C1E29] p-[5px] m-auto mb-[50px] rounded-md cursor-pointer">
11+
<div className={`w-[100px] rounded-md text-center ${state == 'borrow' ? "bg-[#696c80] transition-colors duration-200 ease-in-out" : "text-white"}`}
12+
onClick={() => {setState('borrow')}}
13+
>
14+
Borrow
15+
</div>
16+
<div className={`w-[100px] rounded-md text-center ${state == 'lend' ? "bg-[#696c80] transition-colors duration-200 ease-in-out" : "text-white"}`}
17+
onClick={() => {setState('lend')}}
18+
>
19+
Lend
20+
</div>
21+
</div>
22+
<div className="bg-[#1C1E29] w-[100%] h-auto rounded-xl">
23+
{
24+
state == 'borrow' ?
25+
<Borrow/>
26+
:
27+
<Lend/>
28+
}
29+
</div>
30+
</div>
31+
)
32+
}
33+
34+
export default DashRight

‎src/components/Lend/Lend.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const Lend = () => {
2+
return (
3+
<div className="flex flex-col gap-y-[30px] w-[100%] h-[100%] text-white p-[20px] px-[30px] text-inter">
4+
5+
<button
6+
type="submit"
7+
className="bg-blue py-[8px] px-[24px] rounded-lg text-white justify-center self-center font-inter font-medium"
8+
>
9+
Confirm Borrow
10+
</button>
11+
12+
<div className="flex flex-row items-center gap-x-[5px] font-[300] text-gray-400 text-[12px] self-center mt-[-10px]">
13+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-[15px] h-[15px]">
14+
<path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
15+
</svg>
16+
on conforming collateral amount will be deducted from your account</div>
17+
</div>
18+
)
19+
}
20+
21+
export default Lend

‎src/components/Navbar/Navbar.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { useRouter } from "next/router";
2+
3+
const Navbar = () => {
4+
5+
return (
6+
<div className="flex flex-row items-center w-[100%] h-[55px] px-[50px] box-border border-b-[1.2px] font-inter text-[24px] border-[#E1E1E1] text-black cursor-pointer">
7+
<div className="h-[30px] w-[30px] bg-yellow-200 mr-[15px]"></div>
8+
<span>DeFi</span>
9+
<div className="flex flex-row gap-x-[60px] ml-auto text-[14px] font-medium font-inter text-white">
10+
Connect
11+
</div>
12+
</div>
13+
);
14+
};
15+
16+
export default Navbar;

0 commit comments

Comments
 (0)