Skip to content
This repository has been archived by the owner on Dec 5, 2022. It is now read-only.

Change Crypto UI #269

Closed
wants to merge 3 commits into from
Closed

Change Crypto UI #269

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
979a40b
Change Crypto UI
Reza9472 Dec 11, 2021
4eb407a
Merge branch 'master' into crypto-app-fix
hargup Jan 14, 2022
a7fdafc
Update package.json
hargup Jan 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .yarn/cache/chart.js-npm-3.6.2-da412b00f1-0883adced8.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/faker-npm-5.5.3-541ce97798-684fd64c8d.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/react-chartjs-2-npm-4.0.0-b00d64a798-25998a4cc1.zip
View file
Open in desktop
Binary file not shown.
5 changes: 4 additions & 1 deletion apps/crypto/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@
"build": "felvin-cli build:app"
},
"dependencies": {
"@felvin-search/core": "^1.29.0"
"@felvin-search/core": "^1.29.0",
"chart.js": "^3.6.2",
"faker": "^5.5.3",
"react-chartjs-2": "^4.0.0"
},
"devDependencies": {
"@felvin-search/cli": "^1.29.0",
Expand Down
168 changes: 119 additions & 49 deletions apps/crypto/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,39 @@
import React, { useState } from "react";
import styled from "styled-components";
import { isTriggered } from "@felvin-search/core";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";
import faker from "faker";

ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);

export const options = {
responsive: true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although the chart is surely responsive, it's not doing much help for mobile users as can be seen below. What do you think?

image

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm, that's interesting. Thought it would keep the format for mobile. Gotta go through the chart.js to see if they have any options for this

plugins: {
title: {
display: true,
},
},
};

const labels = [];

//------------Styled Components-------------
// If you're unfamiliar with styled components
Expand Down Expand Up @@ -34,67 +67,102 @@ const Element = styled.div`
margin: 0 auto;
`;

var cryptos = [
{
value: "btc",
text: "BTC",
},
{
value: "eth",
text: "ETH",
},
];

//=========================================

// Your UI logic goes here.
// `data` prop is exactly what is returned by queryToData.
function Component({ data }) {
let values = data.data;
let names = [];
values.forEach((e) => {
names.push({ name: e.name });
});
const [name, setName] = useState(values[0].name);

const [name, setName] = useState("BTC");
const handleChange = (e) => {
setName(e.target.value);
console.log(e.target.value);
};

let priceArray = [];
let timestampArray = [];

for (let i = 0; i < values.values.length; i++) {
priceArray.push(values.values[i][1]);
let newTime = convertTimestamp(values.values[i][0]);
timestampArray.push(newTime);
}

// Convert timestampt to human readable
function convertTimestamp(timestamp) {
let date = new Date(timestamp);
return date.toLocaleString();
}

for (let i = 0; i < values.values.length; i++) {
labels.push(timestampArray[i]);
}

const crypto_data = {
labels,
datasets: [
{
label: "Price",
data: priceArray,
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
},
],
};

return (
<Container>
<select value={name} onChange={handleChange}>
{values.map((e) => (
<option key={e.name} name={e.name}>
{e.name}
</option>
))}
<option key={values.name} name={values.name}>
{values.name}
</option>
</select>

{values.map((e) => {
if (e.name === name) {
return (
<Head key={e.name}>
<Body>
<Element>
Name🪙 :<strong>{e.name}</strong>
</Element>
<Element>
Symbol:<strong>{e.symbol}</strong>
</Element>
</Body>
<Element>Price💰:{e.metrics.market_data.price_usd}USD</Element>
<Body>
<Element>
24Hr High📈 :{e.metrics.market_data.ohlcv_last_24_hour.high}
USD
</Element>
<Element>
24Hr Low📉 :{e.metrics.market_data.ohlcv_last_24_hour.low}
USD
</Element>
</Body>
<Body>
<Element>
24Hr Open :{e.metrics.market_data.ohlcv_last_24_hour.open}
USD
</Element>
<Element>
24Hr Close :{e.metrics.market_data.ohlcv_last_24_hour.close}
USD
</Element>
</Body>
</Head>
);
}
})}
<Head>
<Body>
<Element>
Name :<strong>{values.name}</strong>
</Element>
<img src="https://img.icons8.com/color/24/000000/bitcoin--v1.png" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice touch.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thought about adding another library that had the icons but seemed like overkill since messari doesn't have a lot of cryptos

<Element>
Symbol :<strong>{values.symbol}</strong>
{/* <img src="https://img.icons8.com/color/24/000000/bitcoin--v1.png" /> */}
</Element>
</Body>
<Body>
<Element>
Price :
<h1>
<strong>${values.values.at(-1)[1].toFixed(2)}</strong>
</h1>
</Element>
</Body>
<Body>
<Element>
<p>{convertTimestamp(values.values.at(-1)[0])}</p>
</Element>
</Body>
<Body>
<Element>
High :<strong>{values.values.at(-1)[2].toFixed(2)}</strong>
</Element>
<Element>
Low :<strong>{values.values.at(-1)[3].toFixed(2)}</strong>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a crypto trader myself but maybe we shouldn't use toFixed here, a lot of times bigger coins like bitcoin vary after 2 decimal places. What do you think?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked googles crypto and most were 2 decimals. but you are right some of them do. I'll check the ones messari has and change it. But still think It's cleaner to have the toFixed but maybe with more decimals

</Element>
</Body>
</Head>
<Line options={options} data={crypto_data} />
</Container>
);
}
Expand All @@ -119,8 +187,10 @@ const queryToData = async ({ query }) => {
return;
}

// fetchdata(coin);

const response = await fetch(
"https://data.messari.io/api/v1/assets?fields=id,name,symbol,metrics/market_data/price_usd,metrics/market_data/ohlcv_last_24_hour",
`https://data.messari.io/api/v1/assets/btc/metrics/price/time-series`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A user would only be able to bitcoin prices now.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I only implemented bitcoin for now to get the ok from you for the UI.

{
method: "GET",
redirect: "follow",
Expand Down
27 changes: 27 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1622,7 +1622,10 @@ __metadata:
"@felvin-search/core": ^1.29.0
"@types/react": ^17.0.0
"@types/styled-components": ^5.1.11
chart.js: ^3.6.2
faker: ^5.5.3
react: ^17.0.2
react-chartjs-2: ^4.0.0
react-dom: ^17.0.2
styled-components: ^5.3.0
peerDependencies:
Expand Down Expand Up @@ -5086,6 +5089,13 @@ __metadata:
languageName: node
linkType: hard

"chart.js@npm:^3.6.2":
version: 3.6.2
resolution: "chart.js@npm:3.6.2"
checksum: 0883adced890eb0ee77a8374e6f89412a82df694f25767a5b14a200735922adf6521366a1419a24025e53203ea00ed70ba1dfc86e2f030c9ef183c6909f9dbdd
languageName: node
linkType: hard

"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.4.2, chokidar@npm:^3.5.1":
version: 3.5.2
resolution: "chokidar@npm:3.5.2"
Expand Down Expand Up @@ -7136,6 +7146,13 @@ __metadata:
languageName: node
linkType: hard

"faker@npm:^5.5.3":
version: 5.5.3
resolution: "faker@npm:5.5.3"
checksum: 684fd64c8d3897e54248f95b4f6319f75d97691b8500cd13adf4af2c28f9204f766c1d1aaa6b41338f0beaaa87256c3132f8708a1a8f189d122b92f6b98081c3
languageName: node
linkType: hard

"fast-deep-equal@npm:^3.1.1":
version: 3.1.3
resolution: "fast-deep-equal@npm:3.1.3"
Expand Down Expand Up @@ -12912,6 +12929,16 @@ __metadata:
languageName: node
linkType: hard

"react-chartjs-2@npm:^4.0.0":
version: 4.0.0
resolution: "react-chartjs-2@npm:4.0.0"
peerDependencies:
chart.js: ^3.5.0
react: ^16.8.0 || ^17.0.0
checksum: 25998a4cc14910641c1184245c6672211d436877a456c70fa16bf67e2b470e7899cef578618fd8842a7d25103a973f25c7f7ec01200fdcbe1b04913fabb87650
languageName: node
linkType: hard

"react-color@npm:^2.19.3":
version: 2.19.3
resolution: "react-color@npm:2.19.3"
Expand Down