Skip to content

Commit 33d7d9d

Browse files
Rupesh-2003Rupesh-2003
committed
Merge branch 'master' into rupesh
2 parents 7706757 + aad770d commit 33d7d9d

File tree

4 files changed

+175
-6
lines changed

4 files changed

+175
-6
lines changed

‎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/DashLeft/DashLeft.jsx‎

Lines changed: 175 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +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+
111
const DashLeft = () => {
2-
return (
3-
<div className="bg-yellow-300 w-[100%] h-[100%]">
4-
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>
5172
</div>
6-
)
7-
}
173+
</Container>
174+
</div>
175+
);
176+
};
8177

9-
export default DashLeft
178+
export default DashLeft;

0 commit comments

Comments
 (0)