Skip to content

Commit abd9f15

Browse files
Vansh-BaghelVansh-Baghel
committed
Merge branch 'master' of https://github.com/code-squads/defi 
2 parents 01afeaa + 82945c9 commit abd9f15

File tree

12 files changed

+606
-62
lines changed

12 files changed

+606
-62
lines changed

‎src/apis/balances.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { hasWindow } from "../util/next-utils";
2+
import { web3 } from "./Contract";
3+
import TokenABI from '../contracts/UsdtABI.json';
4+
5+
const UsdtContract = new web3.eth.Contract(TokenABI, '0X466DD1E48570FAA2E7F69B75139813E4F8EF75C2');
6+
export const getUsdtBalance = async (address) => {
7+
const balance = await UsdtContract.methods.balanceOf(address).call();
8+
return balance ? balance / 1000000 : 0.00;
9+
}
10+
11+
export const getMaticBalance = async (address) => {
12+
const balance = await web3.eth.getBalance(address);
13+
return balance ? balance / 1000000000000000000 : 0.00;
14+
}
15+
16+
if(hasWindow()){
17+
window.getUsdtBalance = getUsdtBalance;
18+
window.getMaticBalance = getMaticBalance;
19+
}

‎src/apis/factory.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,16 @@ export function CallerFn(method, debug, ...params){
1010
}
1111
resolve(res);
1212
}).catch((err) => {
13-
console.log(`Some error calling ${method} with params \n`, params, err);
13+
if(debug)
14+
console.log(`Some error calling ${method} with params \n`, params, err);
1415
reject(new Error(`Couldn't fetch results for ${method}`));
1516
});
1617
});
1718
}
1819

1920
export function SenderFn(method, senderAddress, debug, ...params){
2021
return new Promise((resolve, reject) => {
21-
const tx = Contract.methods.addPost(...params);
22+
const tx = Contract.methods[method](...params);
2223
if(debug)
2324
console.log("Prepared transaction: ", tx);
2425

‎src/apis/user.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { CallerFn, SenderFn } from "./factory";
44
export const getProfile = (address) => {
55
if(!address)
66
console.log("Address invalid");
7-
return CallerFn('getUser', true, address);
7+
return CallerFn('getUser', false, address);
88
}
99

1010
export const createProfile = (address, name) => {

‎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: 140 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,21 @@ import Image from "next/image";
66
import { useState } from "react";
77
import { useEffect } from "react";
88
import { Container } from "@mui/material";
9+
import { useMetamaskAuth } from "../../auth/authConfig";
10+
import Loader from "../Loader/Loader";
11+
import { getUsdtBalance, getMaticBalance } from "../../apis/balances";
912
const https = require("https");
1013

14+
15+
const randPriceFluctuations = range => Number((Math.random() * (range*2 + 1)-range).toFixed(2));
16+
1117
const DashLeft = () => {
12-
const [maticVal, setMaticVal] = useState({});
13-
const [usdVal, setUsdVal] = useState({});
18+
const [maticVal, setMaticVal] = useState({ rate: 1500 + randPriceFluctuations(3)});
19+
const [usdVal, setUsdVal] = useState({ rate: 1 + Number((randPriceFluctuations(1)/100).toFixed(2)) });
20+
const [maticBalance, setMaticBalance] = useState(0);
21+
const [usdtBalance, setUsdtBalance] = useState(0);
22+
const { profile, isLoggedIn, isProcessingLogin } = useMetamaskAuth();
23+
1424
const dummyMatic = "3260.351432121505620812986766";
1525
var myHeaders = new Headers();
1626
myHeaders.append("X-CoinAPI-Key", "272E2537-42DC-4DE3-BB31-89072ACE051D");
@@ -22,17 +32,31 @@ const DashLeft = () => {
2232
};
2333

2434
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));
35+
// fetch("https://rest.coinapi.io/v1/exchangerate/ETH/USD/", requestOptions)
36+
// .then((response) => response.text())
37+
// .then((result) => setMaticVal(JSON.parse(result)))
38+
// .catch((error) => console.log("error", error))
39+
40+
// fetch("https://rest.coinapi.io/v1/exchangerate/USDT/USD/", requestOptions)
41+
// .then((response) => response.text())
42+
// .then((result) => setUsdVal(JSON.parse(result)))
43+
// .catch((error) => console.log("error", error))
3444
}, []);
3545

46+
console.log(maticVal);
47+
console.log(usdVal);
48+
49+
useEffect(() => {
50+
if(!profile) return;
51+
getMaticBalance(profile.address)
52+
.then(setMaticBalance);
53+
getUsdtBalance(profile.address)
54+
.then(setUsdtBalance);
55+
}, [profile]);
56+
57+
if(!isLoggedIn || isProcessingLogin || !profile)
58+
return <Loader size="80px" />
59+
3660
return (
3761
<div className="w-[100%] h-[100%] font-inter overflow-auto" style={{backgroundColor : '#12131A'}}>
3862
{/* PROFILE */}
@@ -45,32 +69,111 @@ const DashLeft = () => {
4569
height="50"
4670
style={{ borderRadius: "50px" }}
4771
/>
48-
<div className="text-3xl ml-3">Vansh</div>
72+
<div className="text-3xl ml-3">
73+
{ profile.name }
74+
</div>
75+
</div>
76+
<div>
77+
{ profile.address }
4978
</div>
50-
<div>wallet address</div>
5179
</Container>
5280

5381
{/* CARDS */}
5482
<Container
55-
className="bg-slate-300 m-10 p-5"
83+
className="bg-slate-300 m-10 p-5 rounded-xl"
5684
style={{
5785
maxWidth: "90%",
5886
backgroundColor: "#1b1e29",
59-
borderRadius: "20px",
87+
// borderRadius: "20px",
6088
color: "#c7cad9",
6189
}}
6290
>
6391
<div>
6492
<div className="flex justify-between">
93+
<div className="flex items-center">
94+
{/* <Image
95+
src={matic}
96+
alt="matic"
97+
width="50"
98+
height="50"
99+
style={{ borderRadius: "50px" }}
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> */}
108+
</div>
109+
<div>
110+
<div style={{ color: "#696c80" }}>Price</div>
111+
<div>
112+
{ maticVal.rate.toFixed(2) }
113+
</div>
114+
</div>
115+
</div>
116+
<div className="m-2 text-[#4489ff] text-[12px] overflow-ellipsis overflow-hidden"></div>
117+
</div>
118+
<hr style={{ background: "#C77DFF", height: "0.05px" }} />
119+
120+
<div>
121+
<div className="flex justify-between mt-3">
65122
<div className="flex">
66-
<Image
123+
{/* <Image
124+
src={usdc}
125+
alt="matic"
126+
width="50"
127+
height="50"
128+
style={{ borderRadius: "50px" }}
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> */}
135+
</div>
136+
<div>
137+
<div>Price</div>
138+
<div>
139+
{ usdVal.rate.toFixed(2) }
140+
</div>
141+
</div>
142+
</div>
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
67164
src={matic}
68165
alt="matic"
69166
width="50"
70167
height="50"
71168
style={{ borderRadius: "50px" }}
72-
/>
73-
<span className="m-2">MATIC</span>
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> */}
74177
</div>
75178
<div>
76179
<div style={{ color: "#696c80" }}>Price</div>
@@ -81,21 +184,25 @@ const DashLeft = () => {
81184
</div>
82185
</div>
83186
</div>
84-
<div className="m-2">code</div>
187+
{/* <div className="m-2 text-[#4489ff] text-[12px] overflow-ellipsis overflow-hidden">0x0d500B1d8E8eF31E21C99d1Db9A6444d3ADf1270</div> */}
85188
</div>
86189
<hr style={{ background: "#C77DFF", height: "0.05px" }} />
87190

88191
<div>
89-
<div className="flex justify-between mt-3">
192+
<div className="flex justify-between mt-3 mb-2">
90193
<div className="flex">
91-
<Image
194+
{/* <Image
92195
src={usdc}
93196
alt="matic"
94197
width="50"
95198
height="50"
96199
style={{ borderRadius: "50px" }}
97-
/>
98-
<span className="m-2">MATIC</span>
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> */}
99206
</div>
100207
<div>
101208
<div>Price</div>
@@ -106,12 +213,12 @@ const DashLeft = () => {
106213
</div>
107214
</div>
108215
</div>
109-
<div className="mt-2">code</div>
216+
{/* <div className="m-2 text-[#4489ff] text-[12px] overflow-ellipsis overflow-hidden">0x0d500B1d8E8eF31E21C99d1Db9A6444d3ADf1270</div> */}
110217
</div>
111218
</Container>
112219

113220
{/* User's balance details */}
114-
<Container
221+
{/* <Container
115222
className="bg-slate-300 m-10 rounded-xl p-5 "
116223
style={{
117224
maxWidth: "90%",
@@ -138,14 +245,12 @@ const DashLeft = () => {
138245
</div>
139246
<div>
140247
<div></div>
141-
<div>
142-
{maticVal.rate !== undefined
143-
? maticVal.rate
144-
: Math.round(dummyMatic).toFixed(2)}
248+
<div className="mt-1">
249+
{ maticBalance.toFixed(4) } (${ (maticVal.rate * maticBalance).toFixed(2) })
145250
</div>
146251
</div>
147252
</div>
148-
<div className="m-2">code</div>
253+
<div className="m-2 text-[#4489ff] text-[12px] overflow-ellipsis overflow-hidden">0x0d500B1d8E8eF31E21C99d1Db9A6444d3ADf1270</div>
149254
</div>
150255
<hr style={{ background: "#C77DFF", height: "0.05px" }} />
151256
<div>
@@ -158,19 +263,17 @@ const DashLeft = () => {
158263
height="50"
159264
style={{ borderRadius: "50px" }}
160265
/>
161-
<span className="m-2">MATIC</span>
266+
<span className="m-2">USDT</span>
162267
</div>
163268
<div>
164-
<div>
165-
{usdVal.rate !== undefined
166-
? usdVal.rate
167-
: Math.round(dummyMatic).toFixed(2)}
269+
<div className="mt-2">
270+
{ usdtBalance.toFixed(2) } (${ (usdVal.rate * usdtBalance).toFixed(2) })
168271
</div>
169272
</div>
170273
</div>
171-
<div className="mt-2">code</div>
274+
<div className="mt-2"></div>
172275
</div>
173-
</Container>
276+
</Container> */}
174277
</div>
175278
);
176279
};

0 commit comments

Comments
 (0)