Skip to content

Commit 82945c9

Browse files
OmkarPhOmkarPh
authored
Merge pull request #2 from code-squads/rupeshDev
Added my borrowing and lendings, and other changes
2 parents d799fe2 + 9e146ae commit 82945c9

File tree

7 files changed

+508
-37
lines changed

7 files changed

+508
-37
lines changed

‎src/components/Borrow/Borrow.jsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ import { useState } from "react"
22

33
const Borrow = () => {
44
const [eligible, setEligible] = useState(false)
5+
6+
const onConfirmBorrowClickHandler = () => {
7+
8+
}
9+
510
return (
611
<div className="flex flex-col gap-y-[30px] w-[100%] h-[100%] text-white p-[20px] px-[30px] text-inter">
712
<div className="flex flex-row items-center">
@@ -55,13 +60,14 @@ const Borrow = () => {
5560
</div>
5661
</div>
5762

58-
<div className="text-slate-300 text-center">
63+
{eligible && <div className="text-slate-300 text-center">
5964
Congratulations 🎉 you are eligible for borrowing
60-
</div>
65+
</div>}
6166

6267
<button
6368
type="submit"
64-
className="bg-blue py-[8px] px-[24px] rounded-lg text-white justify-center self-center font-inter font-medium"
69+
disabled={!eligible}
70+
className={`bg-blue py-[8px] px-[24px] rounded-lg text-white justify-center self-center font-inter font-medium ${!eligible && "opacity-50 cursor-not-allowed"}`}
6571
>
6672
Confirm Borrow
6773
</button>

‎src/components/DashLeft/DashLeft.jsx‎

Lines changed: 96 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -80,25 +80,31 @@ const DashLeft = () => {
8080

8181
{/* CARDS */}
8282
<Container
83-
className="bg-slate-300 m-10 p-5"
83+
className="bg-slate-300 m-10 p-5 rounded-xl"
8484
style={{
8585
maxWidth: "90%",
8686
backgroundColor: "#1b1e29",
87-
borderRadius: "20px",
87+
// borderRadius: "20px",
8888
color: "#c7cad9",
8989
}}
9090
>
9191
<div>
9292
<div className="flex justify-between">
93-
<div className="flex">
94-
<Image
93+
<div className="flex items-center">
94+
{/* <Image
9595
src={matic}
9696
alt="matic"
9797
width="50"
9898
height="50"
9999
style={{ borderRadius: "50px" }}
100-
/>
101-
<span className="m-2">MATIC</span>
100+
/> */}
101+
<div className="flex flex-row items-center gap-x-[10px] text-[14px] text-white w-auto h-[50px] p-[5px] px-[8px] rounded-[20px] font-medium pr-[15px] ml-[10px] bg-[#404557]">
102+
<div className="flex justify-center w-[40px] h-[40px] rounded-full bg-white p-[4px] box-border">
103+
<img src="./assets/matic.svg" alt="maticLogo"/>
104+
</div>
105+
MATIC
106+
</div>
107+
{/* <span className="m-2">MATIC</span> */}
102108
</div>
103109
<div>
104110
<div style={{ color: "#696c80" }}>Price</div>
@@ -107,21 +113,25 @@ const DashLeft = () => {
107113
</div>
108114
</div>
109115
</div>
110-
<div className="m-2 h-1"></div>
116+
<div className="m-2 text-[#4489ff] text-[12px] overflow-ellipsis overflow-hidden"></div>
111117
</div>
112118
<hr style={{ background: "#C77DFF", height: "0.05px" }} />
113119

114120
<div>
115121
<div className="flex justify-between mt-3">
116122
<div className="flex">
117-
<Image
123+
{/* <Image
118124
src={usdc}
119125
alt="matic"
120126
width="50"
121127
height="50"
122128
style={{ borderRadius: "50px" }}
123-
/>
124-
<span className="m-2">USDT</span>
129+
/> */}
130+
<div className="flex flex-row items-center gap-x-[10px] text-[14px] text-white w-auto h-[50px] p-[5px] px-[8px] rounded-[20px] font-medium pr-[15px] ml-[10px] bg-[#404557]">
131+
<img className="w-[40px] h-[40px] rounded-full" src="./assets/usdc.svg" alt="usdcLogo"/>
132+
USDT
133+
</div>
134+
{/* <span className="m-2">MATIC</span> */}
125135
</div>
126136
<div>
127137
<div>Price</div>
@@ -130,14 +140,85 @@ const DashLeft = () => {
130140
</div>
131141
</div>
132142
</div>
133-
<div className="mt-2">
134-
0x466DD1e48570FAA2E7f69B75139813e4F8EF75c2
143+
<div className="m-2 text-[#4489ff] text-[12px] overflow-ellipsis overflow-hidden">0x0d500B1d8E8eF31E21C99d1Db9A6444d3ADf1270</div>
144+
</div>
145+
</Container>
146+
147+
<Container
148+
className="bg-slate-300 m-10 p-5 rounded-xl"
149+
style={{
150+
maxWidth: "90%",
151+
backgroundColor: "#1b1e29",
152+
// borderRadius: "20px",
153+
color: "#c7cad9",
154+
}}
155+
>
156+
<div>
157+
<div className="flex justify-between mb-5" style={{ color: "#696c80" }}>
158+
<div className="pl-[28px]">My tokens</div>
159+
<div>Current Value</div>
160+
</div>
161+
<div className="flex justify-between mb-4">
162+
<div className="flex items-center">
163+
{/* <Image
164+
src={matic}
165+
alt="matic"
166+
width="50"
167+
height="50"
168+
style={{ borderRadius: "50px" }}
169+
/> */}
170+
<div className="flex flex-row items-center gap-x-[10px] text-[14px] text-white w-auto h-[50px] p-[5px] px-[8px] rounded-[20px] font-medium pr-[15px] ml-[10px] bg-[#404557]">
171+
<div className="flex justify-center w-[40px] h-[40px] rounded-full bg-white p-[4px] box-border">
172+
<img src="./assets/matic.svg" alt="maticLogo"/>
173+
</div>
174+
MATIC
175+
</div>
176+
{/* <span className="m-2">MATIC</span> */}
177+
</div>
178+
<div>
179+
<div style={{ color: "#696c80" }}>Price</div>
180+
<div>
181+
{maticVal.rate !== undefined
182+
? maticVal.rate
183+
: Math.round(dummyMatic).toFixed(2)}
184+
</div>
185+
</div>
186+
</div>
187+
{/* <div className="m-2 text-[#4489ff] text-[12px] overflow-ellipsis overflow-hidden">0x0d500B1d8E8eF31E21C99d1Db9A6444d3ADf1270</div> */}
188+
</div>
189+
<hr style={{ background: "#C77DFF", height: "0.05px" }} />
190+
191+
<div>
192+
<div className="flex justify-between mt-3 mb-2">
193+
<div className="flex">
194+
{/* <Image
195+
src={usdc}
196+
alt="matic"
197+
width="50"
198+
height="50"
199+
style={{ borderRadius: "50px" }}
200+
/> */}
201+
<div className="flex flex-row items-center gap-x-[10px] text-[14px] text-white w-auto h-[50px] p-[5px] px-[8px] rounded-[20px] font-medium pr-[15px] ml-[10px] bg-[#404557]">
202+
<img className="w-[40px] h-[40px] rounded-full" src="./assets/usdc.svg" alt="usdcLogo"/>
203+
USDC
204+
</div>
205+
{/* <span className="m-2">MATIC</span> */}
206+
</div>
207+
<div>
208+
<div>Price</div>
209+
<div>
210+
{usdVal.rate !== undefined
211+
? usdVal.rate
212+
: Math.round(dummyMatic).toFixed(2)}
213+
</div>
214+
</div>
135215
</div>
216+
{/* <div className="m-2 text-[#4489ff] text-[12px] overflow-ellipsis overflow-hidden">0x0d500B1d8E8eF31E21C99d1Db9A6444d3ADf1270</div> */}
136217
</div>
137218
</Container>
138219

139220
{/* User's balance details */}
140-
<Container
221+
{/* <Container
141222
className="bg-slate-300 m-10 rounded-xl p-5 "
142223
style={{
143224
maxWidth: "90%",
@@ -169,7 +250,7 @@ const DashLeft = () => {
169250
</div>
170251
</div>
171252
</div>
172-
<div className="m-2 h-1"></div>
253+
<div className="m-2 text-[#4489ff] text-[12px] overflow-ellipsis overflow-hidden">0x0d500B1d8E8eF31E21C99d1Db9A6444d3ADf1270</div>
173254
</div>
174255
<hr style={{ background: "#C77DFF", height: "0.05px" }} />
175256
<div>
@@ -192,7 +273,7 @@ const DashLeft = () => {
192273
</div>
193274
<div className="mt-2"></div>
194275
</div>
195-
</Container>
276+
</Container> */}
196277
</div>
197278
);
198279
};

‎src/components/Lend/Lend.jsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,6 @@ const TEMP = [
1313
repay: '10',
1414
collateralAmt: '5000'
1515
},
16-
{
17-
amount: '450.00',
18-
address: '0x65e0D3DB067222AfE5FAD1Ff60ebF29bE4cF6207',
19-
repay: '10',
20-
collateralAmt: '5000'
21-
},
2216
{
2317
amount: '450.00',
2418
address: '0x65e0D3DB067222AfE5FAD1Ff60ebF29bE4cF6207',
@@ -29,10 +23,18 @@ const TEMP = [
2923
const Lend = () => {
3024
const [selectedBorrower, setSelectedBorrower] = useState(null)
3125

26+
const onConfirmLendClickHandler = () => {
27+
28+
}
29+
3230
return (
3331
<div className="flex flex-col gap-y-[30px] w-[100%] h-[100%] text-white p-[20px] px-[30px] text-inter">
3432

3533
{!selectedBorrower && <div className="flex flex-col gap-y-[20px]">
34+
35+
<div className=" font-inter text-[18px] font-medium border-b-[1px] pb-[10px] border-gray-400">
36+
Borrowers List
37+
</div>
3638
{
3739
TEMP.map((data, index) => {
3840
return (
@@ -67,7 +69,7 @@ const Lend = () => {
6769
</button>
6870
</div>
6971
{
70-
index <= TEMP.length &&
72+
index < TEMP.length-1 &&
7173
<div className="h-[0.5px] self-center bg-gray-100 w-[100%] "></div>}
7274
</div>
7375
)
@@ -139,14 +141,14 @@ const Lend = () => {
139141
type="submit"
140142
className="bg-blue py-[8px] px-[24px] rounded-lg text-white justify-center self-center font-inter font-medium"
141143
>
142-
Confirm Borrow
144+
Confirm Lend
143145
</button>
144146

145147
<div className="flex flex-row items-center gap-x-[5px] font-[300] text-gray-400 text-[12px] self-center mt-[-10px]">
146148
<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]">
147149
<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" />
148150
</svg>
149-
on conforming collateral amount will be deducted from your account
151+
on conforming, amount will be deducted from your account
150152
</div>
151153
</>
152154
}

‎src/components/MyAccountRight/MyAccountRight.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
import { useState } from "react"
2-
import Borrow from "../Borrow/Borrow"
3-
import Lend from "../Lend/Lend"
2+
import Borrow from "../MyBorrowings/Borrow"
3+
import Lend from "../MyLendings/Lend"
44

55
const MyAccountRight = () => {
6-
const [state, setState] = useState('borrowings')
6+
const [state, setState] = useState('myBorrowings')
77

88
return (
99
<div className="bg-[#12131A] w-[100%] h-[100%]">
1010
<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')}}
11+
<div className={`w-[200px] rounded-md text-center ${state == 'myBorrowings' ? "bg-[#696c80] transition-colors duration-200 ease-in-out" : "text-white"}`}
12+
onClick={() => {setState('myBorrowings')}}
1313
>
1414
My Borrowings
1515
</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')}}
16+
<div className={`w-[200px] rounded-md text-center ${state == 'myLendings' ? "bg-[#696c80] transition-colors duration-200 ease-in-out" : "text-white"}`}
17+
onClick={() => {setState('myLendings')}}
1818
>
1919
My Lendings
2020
</div>
2121
</div>
2222
<div className="bg-[#1C1E29] w-[100%] h-auto rounded-xl">
2323
{
24-
state == 'borrow' ?
24+
state == 'myBorrowings' ?
2525
<Borrow/>
2626
:
2727
<Lend/>

0 commit comments

Comments
 (0)