Skip to content

Commit ace93de

Browse files
OmkarPhOmkarPh
committed
Merge remote-tracking branch 'origin/rupesh'
2 parents 88bc42a + bfd7fc1 commit ace93de

File tree

7 files changed

+218
-11
lines changed

7 files changed

+218
-11
lines changed

‎src/components/Borrow/Borrow.jsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
import { useState } from "react"
2+
13
const Borrow = () => {
4+
const [eligible, setEligible] = useState(false)
25
return (
36
<div className="flex flex-col gap-y-[30px] w-[100%] h-[100%] text-white p-[20px] px-[30px] text-inter">
47
<div className="flex flex-row items-center">
@@ -34,9 +37,7 @@ const Borrow = () => {
3437
<div className="font-inter text-[16px] font-medium">Interest Amount:</div>
3538
<div className="ml-auto text-right text-[#696c80] font-medium mr-[10px]">9999</div>
3639
<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"> */}
3840
<img className="w-[30px] h-[30px] rounded-full" src="./assets/usdc.svg" alt="usdcLogo"/>
39-
{/* </div> */}
4041
USDC
4142
</div>
4243

@@ -54,6 +55,10 @@ const Borrow = () => {
5455
</div>
5556
</div>
5657

58+
<div className="text-slate-300 text-center">
59+
Congratulations 🎉 you are eligible for borrowing
60+
</div>
61+
5762
<button
5863
type="submit"
5964
className="bg-blue py-[8px] px-[24px] rounded-lg text-white justify-center self-center font-inter font-medium"
@@ -65,7 +70,8 @@ const Borrow = () => {
6570
<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]">
6671
<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" />
6772
</svg>
68-
on conforming collateral amount will be deducted from your account</div>
73+
on conforming collateral amount will be deducted from your account
74+
</div>
6975
</div>
7076
)
7177
}

‎src/components/DashLeft/DashLeft.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const DashLeft = () => {
3434
}, []);
3535

3636
return (
37-
<div className="w-[100%] h-[100%] font-inter" style={{backgroundColor : '#12131A'}}>
37+
<div className="w-[100%] h-[100%] font-inter overflow-auto" style={{backgroundColor : '#12131A'}}>
3838
{/* PROFILE */}
3939
<Container className="text-white">
4040
<div className="flex p-5">

‎src/components/DashRight/DashRight.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const DashRight = () => {
66
const [state, setState] = useState('borrow')
77

88
return (
9-
<div className="bg-[#12131A] w-[100%] h-[100%]">
9+
<div className="bg-[#12131A] w-[100%] h-[100%] overflow-hidden">
1010
<div className="flex flex-row gap-x-[10px] w-[200px] self-center bg-[#1C1E29] p-[5px] m-auto mb-[50px] rounded-md cursor-pointer">
1111
<div className={`w-[100px] rounded-md text-center ${state == 'borrow' ? "bg-[#696c80] transition-colors duration-200 ease-in-out" : "text-white"}`}
1212
onClick={() => {setState('borrow')}}
@@ -19,14 +19,15 @@ const DashRight = () => {
1919
Lend
2020
</div>
2121
</div>
22-
<div className="bg-[#1C1E29] w-[100%] h-auto rounded-xl">
22+
<div className="bg-[#1C1E29] w-[100%] h-auto max-h-[calc(100vh-199px)] rounded-xl overflow-auto">
2323
{
2424
state == 'borrow' ?
2525
<Borrow/>
2626
:
2727
<Lend/>
2828
}
2929
</div>
30+
{/* <Lend/> */}
3031
</div>
3132
)
3233
}

‎src/components/Lend/Lend.jsx‎

Lines changed: 152 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,168 @@
1+
import { useState } from "react"
2+
3+
const TEMP = [
4+
{
5+
amount: '5000.00',
6+
address: '0x65e0D3DB067222AfE5FAD1Ff60ebF29bE4cF6207',
7+
repay: '10',
8+
collateralAmt: '5000'
9+
},
10+
{
11+
amount: '2300.00',
12+
address: '0x65e0D3DB067222AfE5FAD1Ff60ebF29bE4cF6207',
13+
repay: '10',
14+
collateralAmt: '5000'
15+
},
16+
{
17+
amount: '450.00',
18+
address: '0x65e0D3DB067222AfE5FAD1Ff60ebF29bE4cF6207',
19+
repay: '10',
20+
collateralAmt: '5000'
21+
},
22+
{
23+
amount: '450.00',
24+
address: '0x65e0D3DB067222AfE5FAD1Ff60ebF29bE4cF6207',
25+
repay: '10',
26+
collateralAmt: '5000'
27+
}
28+
]
129
const Lend = () => {
30+
const [selectedBorrower, setSelectedBorrower] = useState(null)
31+
232
return (
333
<div className="flex flex-col gap-y-[30px] w-[100%] h-[100%] text-white p-[20px] px-[30px] text-inter">
434

5-
<button
35+
{!selectedBorrower && <div className="flex flex-col gap-y-[20px]">
36+
{
37+
TEMP.map((data, index) => {
38+
return (
39+
<div className="flex flex-col gap-y-[20px] font-inter">
40+
<div className="flex flex-row gap-x-[20px]">
41+
<div className="">
42+
{index+1}.
43+
</div>
44+
45+
<div className="flex flex-col gap-y-[5px]">
46+
<div className="flex flex-row items-center">
47+
{data.amount}
48+
<img className="w-[20px] h-[20px] rounded-full ml-[5px]" src="./assets/usdc.svg" alt="usdcLogo"/>
49+
</div>
50+
<div className="text-gray-200 text-[10px] font-medium">{data.address}</div>
51+
<div className="text-[14px]">{data.repay} days</div>
52+
<div className="flex flex-row items-center text-[14px]">
53+
<div>Collateral amount: </div>
54+
&nbsp;{data.collateralAmt}
55+
<div className="flex justify-center w-[20px] h-[20px] rounded-full bg-white p-[4px] box-border ml-[5px]">
56+
<img src="./assets/matic.svg" alt="maticLogo"/>
57+
</div>
58+
</div>
59+
</div>
60+
61+
<button
62+
type="submit"
63+
className="bg-blue py-[8px] px-[24px] ml-auto rounded-lg text-white font-inter font-medium self-start"
64+
onClick={() => {setSelectedBorrower(data)}}
65+
>
66+
Lend
67+
</button>
68+
</div>
69+
{
70+
index <= TEMP.length &&
71+
<div className="h-[0.5px] self-center bg-gray-100 w-[100%] "></div>}
72+
</div>
73+
)
74+
})
75+
}
76+
</div>}
77+
78+
{
79+
selectedBorrower &&
80+
81+
<>
82+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 cursor-pointer"
83+
onClick={() => {setSelectedBorrower(null)}}
84+
>
85+
<path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
86+
</svg>
87+
88+
89+
<div className="flex flex-row items-center">
90+
<div className="font-inter text-[16px] font-medium">
91+
Loan amount:
92+
</div>
93+
94+
<div className="ml-auto bg-transparent text-right text-[#696c80] font-medium outline-none">{selectedBorrower.amount}</div>
95+
<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]">
96+
<img className="w-[30px] h-[30px] rounded-full" src="./assets/usdc.svg" alt="usdcLogo"/>
97+
USDC
98+
</div>
99+
</div>
100+
101+
<div className="flex flex-row items-center">
102+
<div className="font-inter text-[16px] font-medium">Expected repay duration:</div>
103+
<div className="ml-auto bg-transparent text-right text-[#696c80] font-medium mr-[10px] outline-none">{selectedBorrower.repay}</div>
104+
<div>days</div>
105+
</div>
106+
107+
<div className="flex flex-row items-center">
108+
109+
<div className="font-inter text-[16px] font-medium">Interest %:</div>
110+
<div className="ml-auto bg-transparent text-right text-[#696c80] font-medium mr-[10px] outline-none">13%</div>
111+
<div>APR</div>
112+
113+
</div>
114+
115+
<div className="flex flex-row items-center">
116+
117+
<div className="font-inter text-[16px] font-medium">Interest Amount:</div>
118+
<div className="ml-auto text-right text-[#696c80] font-medium mr-[10px]">9999</div>
119+
<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]">
120+
<img className="w-[30px] h-[30px] rounded-full" src="./assets/usdc.svg" alt="usdcLogo"/>
121+
USDC
122+
</div>
123+
124+
</div>
125+
126+
<div className="flex flex-row items-center">
127+
128+
<div className="font-inter text-[16px] font-medium">Required collateral:</div>
129+
<div className="ml-auto text-right text-[#696c80] font-medium mr-[10px]">9999</div>
130+
<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]">
131+
<div className="flex justify-center w-[30px] h-[30px] rounded-full bg-white p-[4px] box-border">
132+
<img src="./assets/matic.svg" alt="maticLogo"/>
133+
</div>
134+
MATIC
135+
</div>
136+
</div>
137+
138+
<button
139+
type="submit"
140+
className="bg-blue py-[8px] px-[24px] rounded-lg text-white justify-center self-center font-inter font-medium"
141+
>
142+
Confirm Borrow
143+
</button>
144+
145+
<div className="flex flex-row items-center gap-x-[5px] font-[300] text-gray-400 text-[12px] self-center mt-[-10px]">
146+
<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]">
147+
<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" />
148+
</svg>
149+
on conforming collateral amount will be deducted from your account
150+
</div>
151+
</>
152+
}
153+
154+
{/* <button
6155
type="submit"
7156
className="bg-blue py-[8px] px-[24px] rounded-lg text-white justify-center self-center font-inter font-medium"
8157
>
9-
Confirm Borrow
158+
Confirm Lend
10159
</button>
11160
12161
<div className="flex flex-row items-center gap-x-[5px] font-[300] text-gray-400 text-[12px] self-center mt-[-10px]">
13162
<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]">
14163
<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" />
15164
</svg>
16-
on conforming collateral amount will be deducted from your account</div>
165+
on conforming collateral amount will be deducted from your account</div> */}
17166
</div>
18167
)
19168
}

‎src/components/MyAccountRight/MyAccountRight.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 MyAccountRight = () => {
6+
const [state, setState] = useState('borrowings')
7+
8+
return (
9+
<div className="bg-[#12131A] w-[100%] h-[100%]">
10+
<div className="flex flex-row gap-x-[10px] w-[400px] self-center bg-[#1C1E29] p-[5px] m-auto mb-[50px] rounded-md cursor-pointer">
11+
<div className={`w-[200px] rounded-md text-center ${state == 'borrowings' ? "bg-[#696c80] transition-colors duration-200 ease-in-out" : "text-white"}`}
12+
onClick={() => {setState('borrowings')}}
13+
>
14+
My Borrowings
15+
</div>
16+
<div className={`w-[200px] rounded-md text-center ${state == 'lendings' ? "bg-[#696c80] transition-colors duration-200 ease-in-out" : "text-white"}`}
17+
onClick={() => {setState('lendings')}}
18+
>
19+
My Lendings
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 MyAccountRight

‎src/pages/dashboard.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ const Dashboard = () => {
1111
// }
1212

1313
return (
14-
<div className="flex flex-row h-[calc(100vh-55px)] bg-[#12131A]">
14+
<div className="flex flex-row h-[calc(100vh-55px)] bg-[#12131A] overflow-hidden box-borderr">
1515
<div className="w-[40%]">
1616
<DashLeft/>
1717
</div>
18-
<div className="w-[60%] box-border p-[30px] pr-[40px]">
18+
<div className="w-[60%] box-border p-[30px] pr-[40px] overflow-hidden">
1919
<DashRight>
2020

2121
</DashRight>

‎src/pages/myaccount.jsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import DashLeft from "../components/DashLeft/DashLeft"
2+
import MyAccountRight from "../components/MyAccountRight/MyAccountRight"
3+
4+
const MyAccount = () => {
5+
return (
6+
<div className="flex flex-row h-[calc(100vh-55px)] bg-[#12131A]">
7+
<div className="w-[40%]">
8+
<DashLeft/>
9+
</div>
10+
<div className="w-[60%] box-border p-[30px] pr-[40px]">
11+
<MyAccountRight/>
12+
</div>
13+
</div>
14+
)
15+
}
16+
17+
export default MyAccount

0 commit comments

Comments
 (0)