",
5 | "private": true,
6 | "dependencies": {
7 | "@testing-library/jest-dom": "^4.2.4",
8 | "@testing-library/react": "^9.5.0",
9 | "@testing-library/user-event": "^7.2.1",
10 | "@types/d3": "^5.7.2",
11 | "@types/jest": "^24.9.1",
12 | "@types/node": "^12.12.32",
13 | "@types/numeral": "0.0.26",
14 | "@types/react": "^16.9.26",
15 | "@types/react-dom": "^16.9.5",
16 | "@types/react-faux-dom": "^4.1.3",
17 | "@types/react-modal": "^3.10.5",
18 | "@types/react-tabs": "^2.3.1",
19 | "@types/recharts": "^1.8.9",
20 | "axios": "^0.19.2",
21 | "chart.js": "^2.9.3",
22 | "chartjs-plugin-datalabels": "^0.7.0",
23 | "moment": "^2.24.0",
24 | "node-sass": "^4.13.1",
25 | "numeral": "^2.0.6",
26 | "react": "^16.13.1",
27 | "react-chartjs-2": "^2.9.0",
28 | "react-dom": "^16.13.1",
29 | "react-ga": "^2.7.0",
30 | "react-github-btn": "^1.1.1",
31 | "react-modal": "^3.11.2",
32 | "react-scripts": "3.4.1",
33 | "react-simple-dropdown": "^3.2.3",
34 | "react-tabs": "^3.1.0",
35 | "recharts": "^1.8.5",
36 | "spectre.css": "^0.5.8",
37 | "typescript": "^3.7.5"
38 | },
39 | "scripts": {
40 | "start": "react-scripts start",
41 | "build": "react-scripts build",
42 | "test": "react-scripts test",
43 | "eject": "react-scripts eject",
44 | "start-app": "node build/build.js"
45 | },
46 | "eslintConfig": {
47 | "extends": "react-app"
48 | },
49 | "browserslist": {
50 | "production": [
51 | ">0.2%",
52 | "not dead",
53 | "not op_mini all"
54 | ],
55 | "development": [
56 | "last 1 chrome version",
57 | "last 1 firefox version",
58 | "last 1 safari version"
59 | ]
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JBooker10/react-crypto-dashboard/99838c28bdb0c495faca84e5bed0859e50898065/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | Crypto Dashboard
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JBooker10/react-crypto-dashboard/99838c28bdb0c495faca84e5bed0859e50898065/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JBooker10/react-crypto-dashboard/99838c28bdb0c495faca84e5bed0859e50898065/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "Crypto Dashboard",
3 | "name": "RealTime Crypto Dashboard",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.scss:
--------------------------------------------------------------------------------
1 | @import "./styles/colors.scss";
2 |
3 | .App {
4 | display: flex;
5 | height: auto;
6 | }
7 |
8 | body {
9 | // overflow: hidden;
10 | background: $NavyLight;
11 | font-size: 60%;
12 | font-size: 0.7em;
13 | }
14 |
15 | @media only screen and (max-width: 900px) {
16 | .container {
17 | width: 100vw;
18 | margin: 8em 2em 2em 2em;
19 | }
20 |
21 | h1 {
22 | font-size: 2em;
23 | }
24 |
25 | body {
26 | font-size: 70%;
27 | }
28 | }
29 |
30 | @media only screen and (max-width: 1440px) {
31 | .container {
32 | margin: 7em 2em 2em 2em;
33 | }
34 |
35 | h1 {
36 | font-size: 3em;
37 | }
38 |
39 | body {
40 | font-size: 60%;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/App.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | const { getByText } = render();
7 | const linkElement = getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import SideNavbar from "./components/Navbar/SideNavbar";
3 | import Dashboard from "./components/Dashboard";
4 | import CryptoCurrencyState from "./context/cryptocurrency/CryptoCurrencyState";
5 | import PriceStreamingState from "./context/pricing/pricingState";
6 | import "./App.scss";
7 |
8 | function App() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
12 |
13 |
{name}
14 |
{analysis && analysis.score.toFixed(4)}
15 |
16 | sentiment:{" "}
17 |
24 | {analysis && analysis.sentiment}
25 |
26 |
27 | {analysis.sentiment !== "bearish" ? (
28 |
29 | ) : (
30 |
31 | )}
32 |
33 |
34 |
42 |
43 |
44 |
45 |
51 |
52 |
46 |
47 |
48 | CryptoCompare Index:{symbol}{" "}
49 | ${hoverData.open}
50 |
51 | {moment.unix(hoverData.time).format("MM/DD/YYYY hh:mm a")}
52 |
53 |
59 |
60 |
61 |
65 |
69 |
70 |
71 |
72 |
82 |
83 |
92 |
99 | moment.unix(label as any).format("MM/DD/YYYY hh:mm a")
100 | }
101 | contentStyle={chartToolTipStyle}
102 | />
103 |
104 |
106 |
107 | Volume: {symbol}{" "}
108 |
109 | {numeral(hoverData.volumeto).format("0.0a")}
110 |
111 |
112 |
113 | numeral(tick).format("0.00a")}
116 | tickLine={false}
117 | axisLine={false}
118 | tickCount={1}
119 | stroke={White}
120 | />
121 |
122 |
128 | moment.unix(label as any).format("MM/DD/YYYY hh:mm a")
129 | }
130 | />
131 |
132 |
133 |
134 |
135 | );
136 | }
137 |
--------------------------------------------------------------------------------
/src/components/CryptoData/CryptoTimeSeriesActions.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface CryptoTimeSeriesActionProps {
4 | getDailyOHLCV: Function;
5 | symbol: string;
6 | }
7 |
8 | export default function CryptoTimeSeriesActions({
9 | getDailyOHLCV,
10 | symbol
11 | }: CryptoTimeSeriesActionProps) {
12 | return (
13 |
14 |
15 |
18 |
21 |
24 |
25 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
15 |
16 |
Analysis Unavaliable
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/CryptoData/News.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import moment from "moment";
3 |
4 | export default function News({ news }: any) {
5 | function truncate(input: string, length: number) {
6 | if (input.length > length) return input.substring(0, length) + "...";
7 | else return input;
8 | }
9 |
10 | return (
11 |
20 | {news.map((n: any) => (
21 |
22 |
23 |
{n.title}
24 |
25 | {truncate(n.body, 220)}
26 |
27 |
28 | {n.categories.split("|").map((c: string) => (
29 |
30 | {c}
31 |
32 | ))}
33 |
34 |
35 |
36 |
37 |
38 | {moment.unix(n.published_on).format("MM/DD/YYYY hh:mm a")}
39 |
40 |
41 |
42 |
43 | source:{" "}
44 |
45 | {n.source}{" "}
46 |
47 |
48 |
49 |
50 |
51 | ))}
52 |
127 | {queue.data.length ? (
128 |
{
132 | return queue.data[0].ID;
133 | }}
134 | />
135 | ) : (
136 |
137 |
138 |
139 | )}
140 | Timeline
73 |
74 |
75 | );
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/CryptoHeader/Asset.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Asset } from "./../type";
3 | import {
4 | Ethereum,
5 | Bitcoin,
6 | Ripple,
7 | Monero,
8 | Litecoin,
9 | BasicAttentionToken,
10 | Nem,
11 | Stellar,
12 | Dash
13 | } from "../Icons";
14 |
15 | export default function CryptoAsset({ symbol, name }: Asset) {
16 | const getAssetIcon = (symbol: string) => {
17 | switch (symbol) {
18 | case "ETC":
19 | case "ETH":
20 | return ;
21 | case "BTC":
22 | return ;
23 | case "XRP":
24 | return ;
25 | case "XMR":
26 | return ;
27 | case "LTC":
28 | return ;
29 | case "BAT":
30 | return ;
31 | case "XEM":
32 | return ;
33 | case "XLM":
34 | return ;
35 | case "DASH":
36 | return ;
37 | default:
38 | return;
39 | }
40 | };
41 |
42 | return (
43 | <>
44 | {getAssetIcon(symbol)}
45 |
46 | {name} {symbol}
47 |
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/CryptoHeader/CryptoHeader.scss:
--------------------------------------------------------------------------------
1 | @import "./../../styles/colors.scss";
2 |
3 | .crypto-header {
4 | padding: 2em 0;
5 | display: flex;
6 | justify-content: space-between;
7 |
8 | .crypto-head {
9 | display: flex;
10 | align-items: center;
11 | h1 {
12 | font-weight: 200;
13 | }
14 | }
15 |
16 | .crypto-price {
17 | display: flex;
18 | align-items: center;
19 |
20 | strong {
21 | margin-left: 0.5em;
22 | width: 100%;
23 | margin-bottom: 3em;
24 | }
25 |
26 | h1 {
27 | padding: 0;
28 | }
29 | }
30 |
31 | h1 {
32 | color: $White;
33 | }
34 |
35 | span.symbol {
36 | color: $Light;
37 | }
38 |
39 | .crypto-type {
40 | height: 7em;
41 | width: 7em;
42 | border-radius: 0.25em;
43 | margin-right: 2em;
44 | background: $NavyDark;
45 | display: flex;
46 | justify-content: center;
47 | align-items: center;
48 | }
49 |
50 | .crypto-icon {
51 | fill: $Primary;
52 | height: 60%;
53 | }
54 |
55 | .bitcoin-icon {
56 | height: 70%;
57 |
58 | fill: transparent;
59 | // background: red;
60 | }
61 | }
62 |
63 | -webkit-keyframes neon3 {
64 | from {
65 | text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff,
66 | 0 0 70px #fff, 0 0 120px #fff, 0 0 140px #fff;
67 | }
68 | to {
69 | text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff,
70 | 0 0 35px #fff, 0 0 70px #fff, 0 0;
71 | }
72 | }
73 |
74 | @-moz-keyframes neon3 {
75 | from {
76 | text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff,
77 | 0 0 70px #fff, 0 0 140px #fff;
78 | }
79 | to {
80 | text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff,
81 | 0 0 35px #fff, 0 0;
82 | }
83 | }
84 |
85 | @keyframes neon3 {
86 | from {
87 | text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff,
88 | 0 0 70px #fff, 0 0 140px #fff;
89 | }
90 | to {
91 | text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff,
92 | 0 0 35px #fff, 0 0;
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/CryptoHeader/CryptoHeader.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Asset from "./Asset";
3 | import CryptoPrice from "./CryptoPrice";
4 | import "./CryptoHeader.scss";
5 |
6 | interface CyryptoHeaderProps {
7 | name: string;
8 | symbol: string;
9 | price: number;
10 | changePercent?: number;
11 | priceUsd: number;
12 | }
13 |
14 | export default function CryptoHeader({
15 | name,
16 | symbol,
17 | price,
18 | changePercent,
19 | priceUsd
20 | }: CyryptoHeaderProps) {
21 | return (
22 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/CryptoHeader/CryptoPrice.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function CryptoPrice({ price, priceUsd, changePercent }: any) {
4 | const isPositive = Math.sign(changePercent);
5 | return (
6 |
7 |
8 | $
9 | {price ? parseFloat(price).toFixed(2) : parseFloat(priceUsd).toFixed(2)}
10 |
11 |
12 | {isPositive === 1 ? "+" : ""}
13 | {changePercent}
14 |
15 |
16 |
25 |
26 |
UnAuthorized
27 |
28 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
47 |
48 |
49 |
50 |
59 |
60 |
7 |
{name}
8 |
9 |
10 | {value}{" "}
11 | {percentage}
12 |
13 |
14 |
33 |
34 |
37 |
40 |
41 |
42 |
47 |
51 |
52 |
53 |
16 | {search.map((c: any) => (
17 |
handleOnClick(c.symbol, c.id)}
20 | className="search-item"
21 | >
22 |
{c.name}
23 | {c.symbol}
24 |
25 | ))}
26 |
Login
46 | Profile
47 | Settings
48 |
49 |
50 |
51 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/Navbar/SearchBar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useContext } from "react";
2 | import cryptoCurrencyCTX from "./../../context/cryptocurrency/cryptoCurrencyContext";
3 |
4 | import FilteredSearch from "./FilteredSearch";
5 |
6 | export default function SearchBar() {
7 | const cryptoCTX = useContext(cryptoCurrencyCTX);
8 | const { getTopAssets, assets, loading } = cryptoCTX;
9 | const [find, setFind] = useState([]);
10 |
11 | // eslint-disable-next-line
12 | useEffect(() => getTopAssets(), [loading]);
13 | // eslint-disable-next-line
14 | useEffect(() => {}, [find.length <= 0]);
15 |
16 | const handleOnChange = (e: any) => {
17 | let filteredAssets = assets.filter((asset: any) =>
18 | asset.name.toLowerCase().match(new RegExp(e.target.value, "gi"))
19 | );
20 | if (e.target.value) {
21 | setFind(filteredAssets);
22 | return;
23 | }
24 | setFind([]);
25 | };
26 |
27 | return (
28 | <>
29 |
30 | 0
34 | ? { color: "white", transform: "scale(1.02)", animation: "500ms" }
35 | : {}
36 | }
37 | >
38 |
45 |
46 | {find.length > 0 && }
47 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/Navbar/SideNavbar.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PieChartIcon from "./../Icons/PieChartIcon";
3 | import JBIcon from "./../Icons/JBIcon";
4 | import "./Navbar.scss";
5 |
6 | export default function SideNavbar() {
7 | return (
8 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/type.ts:
--------------------------------------------------------------------------------
1 | export interface SVGIconProps {
2 | className?: string;
3 | style?: React.CSSProperties;
4 | }
5 |
6 | export interface Asset {
7 | symbol: string;
8 | name: string;
9 | }
10 |
11 | export type Sentiment = "bullish" | "bearish";
12 |
13 | export interface TradingSignals {
14 | id: number;
15 | partner_symbol: string;
16 | symbol: string;
17 | time: number;
18 | largetxsVar: Signal;
19 | addressesNetGrowth: Signal;
20 | concentrationVar: Signal;
21 | inOutVar: Signal;
22 | }
23 |
24 | export interface Signal {
25 | category: string;
26 | score: number;
27 | score_threshold_bearish: number;
28 | score_threshold_bullish: number;
29 | sentiment: Sentiment;
30 | value: number;
31 | }
32 |
--------------------------------------------------------------------------------
/src/config.ts:
--------------------------------------------------------------------------------
1 | const CRYPTO_COMPARE_URI = "https://min-api.cryptocompare.com/data/";
2 | const COIN_CAP_WS_URI = "wss://ws.coincap.io/";
3 | const COIN_CAP_URI = "https://api.coincap.io/v2/";
4 | const CRYPTO_COMPARE_API_KEY =
5 | "0ffd426e05f6800fd35e540bcc7d3199a05b7993d7acb6e45144c11adfde6393";
6 |
7 | export {
8 | CRYPTO_COMPARE_URI,
9 | COIN_CAP_URI,
10 | COIN_CAP_WS_URI,
11 | CRYPTO_COMPARE_API_KEY,
12 | };
13 |
--------------------------------------------------------------------------------
/src/context/cryptocurrency/CryptoCurrencyState.tsx:
--------------------------------------------------------------------------------
1 | import React, { useReducer } from "react";
2 | import axios from "axios";
3 |
4 | import { cryptoCurrencyReducer } from "./cryptoCurrencyReducer";
5 | import CryptoCurrencyContext from "./cryptoCurrencyContext";
6 |
7 | import {
8 | GET_DAILY_OHLCV,
9 | GET_ASSET,
10 | GET_TOP_ASSETS,
11 | GET_STATISTICS,
12 | GET_TRADING_SIGNALS,
13 | GET_NEWS,
14 | SEARCH_ASSET,
15 | STREAM_TICKER,
16 | } from "../types";
17 | import { COIN_CAP_URI, CRYPTO_COMPARE_URI } from "./../../config";
18 |
19 | export default function CryptoCurrencyState(props: any): JSX.Element {
20 | const initialState: any = {
21 | dailyOHLCV: [],
22 | asset: {},
23 | assets: [],
24 | stats: {},
25 | loading: true,
26 | quote: {},
27 | news: [],
28 | tradingSignals: {},
29 | searchAsset: {
30 | symbol: "BTC",
31 | name: "bitcoin",
32 | },
33 | };
34 |
35 | const [state, dispatch] = useReducer(cryptoCurrencyReducer, initialState);
36 |
37 | const getDailyOHLCV = (
38 | period: string,
39 | symbol: string,
40 | history = "histoday"
41 | ) => {
42 | axios
43 | .get(
44 | `${CRYPTO_COMPARE_URI}v2/${history}?fsym=${symbol}&tsym=USD&limit=${period}`
45 | )
46 | .then((res) => {
47 | dispatch({
48 | type: GET_DAILY_OHLCV,
49 | payload: res.data.Data.Data,
50 | });
51 | })
52 | .catch((err) => console.error(err));
53 | };
54 |
55 | const getAsset = (symbol: string) => {
56 | axios(`${COIN_CAP_URI}assets/${symbol}`)
57 | .then((res) => {
58 | dispatch({
59 | type: GET_ASSET,
60 | payload: res.data.data,
61 | });
62 | })
63 | .catch((err) => console.error(err));
64 | };
65 |
66 | const getStats = (symbol: string) => {
67 | axios
68 | .get(`${CRYPTO_COMPARE_URI}pricemultifull?fsyms=${symbol}&tsyms=USD`)
69 | .then((res) => {
70 | dispatch({
71 | type: GET_STATISTICS,
72 | payload: res.data.RAW[symbol.toUpperCase()].USD,
73 | });
74 | })
75 | .catch((err) => console.error(err));
76 | };
77 |
78 | const getTopAssets = (): void => {
79 | axios(`${COIN_CAP_URI}assets`)
80 | .then((res) => {
81 | dispatch({
82 | type: GET_TOP_ASSETS,
83 | payload: res.data.data,
84 | });
85 | })
86 | .catch((err) => console.error(err));
87 | };
88 |
89 | const getTradingSignals = (symbol: string) => {
90 | axios(
91 | `${CRYPTO_COMPARE_URI}tradingsignals/intotheblock/latest?fsym=${symbol}`
92 | )
93 | .then((res) => {
94 | dispatch({
95 | type: GET_TRADING_SIGNALS,
96 | payload: res.data.Data,
97 | });
98 | })
99 | .catch((err) => console.error(err));
100 | };
101 |
102 | const streamQuote = (symbol: string) => {
103 | var ccStreamer = new WebSocket("wss://streamer.cryptocompare.com/v2");
104 |
105 | ccStreamer.onopen = function onStreamOpen() {
106 | var subRequest = {
107 | action: "SubAdd",
108 | subs: [`0~Coinbase~${symbol}~USD`],
109 | };
110 | ccStreamer.send(JSON.stringify(subRequest));
111 | };
112 |
113 | ccStreamer.onmessage = function onStreamMessage(message) {
114 | const data = JSON.stringify(message.data);
115 | dispatch({
116 | type: STREAM_TICKER,
117 | payload: data,
118 | });
119 | console.error("Received from Cryptocompare: " + data);
120 | };
121 | };
122 |
123 | const searchNewAsset = (symbol: string, name: string) => {
124 | dispatch({
125 | type: SEARCH_ASSET,
126 | payload: {
127 | symbol,
128 | name,
129 | },
130 | });
131 | };
132 |
133 | const getNews = () => {
134 | axios(`${CRYPTO_COMPARE_URI}v2/news/?lang=EN`)
135 | .then((res) => {
136 | dispatch({
137 | type: GET_NEWS,
138 | payload: res.data.Data,
139 | });
140 | })
141 | .catch((err) => console.error(err));
142 | };
143 |
144 | const {
145 | searchAsset,
146 | asset,
147 | assets,
148 | dailyOHLCV,
149 | news,
150 | loading,
151 | stats,
152 | pricesWs,
153 | tradingSignals,
154 | quote,
155 | } = state;
156 |
157 | return (
158 |
181 | {props.children}
182 |
183 | );
184 | }
185 |
--------------------------------------------------------------------------------
/src/context/cryptocurrency/cryptoCurrencyContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 |
3 | const defaultValue = {} as any;
4 | const cryptoCurrencyContext = createContext(defaultValue);
5 | export default cryptoCurrencyContext;
6 |
--------------------------------------------------------------------------------
/src/context/cryptocurrency/cryptoCurrencyReducer.ts:
--------------------------------------------------------------------------------
1 | import {
2 | GET_DAILY_OHLCV,
3 | GET_ASSET,
4 | GET_STATISTICS,
5 | GET_TOP_ASSETS,
6 | GET_NEWS,
7 | SEARCH_ASSET,
8 | GET_TRADING_SIGNALS,
9 | STREAM_TICKER
10 | } from "../types";
11 |
12 | export function cryptoCurrencyReducer(state: any, action: any) {
13 | switch (action.type) {
14 | case GET_DAILY_OHLCV:
15 | return {
16 | ...state,
17 | dailyOHLCV: action.payload,
18 | loading: false
19 | };
20 | case GET_ASSET:
21 | return {
22 | ...state,
23 | asset: action.payload,
24 | loading: false
25 | };
26 | case GET_STATISTICS:
27 | return {
28 | ...state,
29 | stats: action.payload,
30 | loading: false
31 | };
32 | case GET_TOP_ASSETS:
33 | return {
34 | ...state,
35 | assets: action.payload,
36 | loading: false
37 | };
38 | case GET_TRADING_SIGNALS:
39 | return {
40 | ...state,
41 | tradingSignals: action.payload,
42 | loading: false
43 | };
44 | case GET_NEWS:
45 | return {
46 | ...state,
47 | news: action.payload,
48 | loading: false
49 | };
50 | case SEARCH_ASSET:
51 | return {
52 | ...state,
53 | searchAsset: action.payload,
54 | loading: false
55 | };
56 | case STREAM_TICKER:
57 | return {
58 | ...state,
59 | quote: action.payload,
60 | loading: false
61 | };
62 | default:
63 | throw new Error();
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/context/pricing/pricingContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 |
3 | interface PriceStreaming {
4 | price: number;
5 | prices: any;
6 | topPrices: any;
7 | quote: any;
8 | priceWebSocket: WebSocket;
9 | pricesWebSocket: WebSocket;
10 | topPriceWebSocket: WebSocket;
11 | }
12 |
13 | const defaultValue = {} as any;
14 | const pricingContext = createContext(defaultValue);
15 | export default pricingContext;
16 |
--------------------------------------------------------------------------------
/src/context/pricing/pricingReducer.ts:
--------------------------------------------------------------------------------
1 | import {
2 | STREAM_PRICE,
3 | STREAM_TOP_PRICES,
4 | STREAM_PRICES,
5 | STREAM_TICKER,
6 | } from "./../types";
7 |
8 | export function pricingReducer(state: any, action: any) {
9 | switch (action.type) {
10 | case STREAM_PRICE:
11 | return {
12 | ...state,
13 | price: action.payload,
14 | loading: false,
15 | };
16 | case STREAM_PRICES:
17 | return {
18 | ...state,
19 | prices: action.payload,
20 | loading: false,
21 | };
22 | case STREAM_TOP_PRICES:
23 | return {
24 | ...state,
25 | topPrices: action.payload,
26 | loading: false,
27 | };
28 | case STREAM_TICKER:
29 | return {
30 | ...state,
31 | quote: action.payload,
32 | loading: false,
33 | };
34 | default:
35 | throw new Error();
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/context/pricing/pricingState.tsx:
--------------------------------------------------------------------------------
1 | import React, { useReducer } from "react";
2 | import { pricingReducer } from "./pricingReducer";
3 | import PricingContext from "./pricingContext";
4 |
5 | import { COIN_CAP_WS_URI, CRYPTO_COMPARE_API_KEY } from "./../../config";
6 | import {
7 | STREAM_PRICE,
8 | STREAM_PRICES,
9 | STREAM_TOP_PRICES,
10 | STREAM_TICKER,
11 | } from "../types";
12 |
13 | export default function PriceStreamingState(props: any) {
14 | const initialState: any = {
15 | price: null,
16 | prices: {},
17 | topPrices: {},
18 | quote: {},
19 | priceWebSocket: null,
20 | pricesWebSocket: null,
21 | topPriceWebSocket: null,
22 | };
23 |
24 | const [state, dispatch] = useReducer(pricingReducer, initialState);
25 |
26 | const streamPrice = (symbol: string) => {
27 | state.priceWebSocket = new WebSocket(
28 | `${COIN_CAP_WS_URI}prices?assets=${symbol}`
29 | );
30 | state.priceWebSocket.onmessage = (msg: any) => {
31 | const data = JSON.parse(msg.data);
32 | dispatch({
33 | type: STREAM_PRICE,
34 | payload: data[symbol],
35 | });
36 | };
37 | state.priceWebSocket.onerror = (err: Error) => console.warn(err);
38 | };
39 |
40 | const streamPrices = () => {
41 | state.pricesWebSocket = new WebSocket(
42 | `${COIN_CAP_WS_URI}prices?assets=ALL`
43 | );
44 | state.pricesWebSocket.onmessage = (msg: any) => {
45 | const data = JSON.parse(msg.data);
46 | dispatch({
47 | type: STREAM_PRICES,
48 | payload: data,
49 | });
50 | };
51 | state.pricesWebSocket.onerror = (err: Error) => console.warn(err);
52 | };
53 |
54 | const streamTopPrices = (...symbols: string[]) => {
55 | state.topPriceWebSocket = new WebSocket(
56 | `${COIN_CAP_WS_URI}prices?assets=${symbols.join()}`
57 | );
58 | state.topPriceWebSocket.onmessage = (msg: any) => {
59 | const data = JSON.parse(msg.data);
60 | dispatch({
61 | type: STREAM_TOP_PRICES,
62 | payload: data,
63 | });
64 | };
65 | state.topPriceWebSocket.onerror = (err: Error) => console.warn(err);
66 | };
67 |
68 | const streamQuote = (symbol: string) => {
69 | var ccStreamer = new WebSocket(
70 | `wss://streamer.cryptocompare.com/v2?apiKey=${CRYPTO_COMPARE_API_KEY}`
71 | );
72 |
73 | ccStreamer.onopen = function onStreamOpen() {
74 | var subRequest = {
75 | action: "SubAdd",
76 | subs: [`0~Coinbase~${symbol}~USD`],
77 | };
78 | ccStreamer.send(JSON.stringify(subRequest));
79 | };
80 |
81 | ccStreamer.onmessage = function onStreamMessage(message) {
82 | const data = JSON.parse(message.data);
83 | dispatch({
84 | type: STREAM_TICKER,
85 | payload: data,
86 | });
87 | console.error("Received from Cryptocompare: " + data);
88 | };
89 | };
90 |
91 | const { price, prices, topPrices, quote } = state;
92 |
93 | return (
94 |
107 | {props.children}
108 |
109 | );
110 | }
111 |
--------------------------------------------------------------------------------
/src/context/types.ts:
--------------------------------------------------------------------------------
1 | export const GET_WS_PRICE = Symbol("Get realtime Price");
2 | export const CLOSE_WS_PRICE = Symbol("Close realtime price socket");
3 | export const GET_DAILY_OHLCV = Symbol("Gets Open, High, Low, Close and Volume");
4 | export const GET_ASSET = Symbol("Gets a cryptocurrency asset");
5 | export const GET_STATISTICS = Symbol("Get crypto statistics");
6 | export const GET_TOP_ASSETS = Symbol("Get crypto assets");
7 | export const SEARCH_ASSET = Symbol("Search cryptocurrency asset");
8 | export const GET_TRADING_SIGNALS = Symbol("Get crypto trading signals");
9 | export const GET_NEWS = Symbol("Get crypto news");
10 | export const STREAM_TICKER = Symbol("Stream crypto ticker");
11 |
12 | // Pricing
13 | export const STREAM_PRICES = Symbol("Stream crypto prices");
14 | export const STREAM_TOP_PRICES = Symbol("Stream top crypto prices");
15 | export const STREAM_PRICE = Symbol("Stream crypto price");
16 |
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | @import "./../node_modules/spectre.css/dist/spectre.css";
2 | @import "./../node_modules/spectre.css/dist/spectre-icons.css";
3 |
4 | @font-face {
5 | font-family: "FontAwesome";
6 | src: url("./assets/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
7 | url("./assets/fonts/fontawesome-webfont.woff2") format("woff2"),
8 | url("./assets/fonts/fontawesome-webfont.woff") format("woff"),
9 | url("./assets/fonts/fontawesome-webfont.ttf") format("truetype");
10 | font-weight: normal;
11 | font-style: normal;
12 | }
13 |
14 | .fa {
15 | display: inline-block;
16 | font: normal normal normal 14px/1 FontAwesome;
17 | font-size: inherit;
18 | text-rendering: auto;
19 | -webkit-font-smoothing: antialiased;
20 | -moz-osx-font-smoothing: grayscale;
21 | }
22 |
23 | .fa-github:before {
24 | content: "\f09b";
25 | }
26 |
27 | .fa-github-square:before {
28 | content: "\f113";
29 | }
30 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.scss";
4 | import App from "./App";
5 | import * as serviceWorker from "./serviceWorker";
6 | import ReactGA from "react-ga";
7 | import Modal from "react-modal";
8 |
9 | Modal.setAppElement("#root");
10 |
11 | ReactGA.initialize("UA-162672611-1");
12 |
13 | ReactDOM.render(
14 |
15 |
16 | ,
17 | document.getElementById("root")
18 | );
19 |
20 | // If you want your app to work offline and load faster, you can change
21 | // unregister() to register() below. Note this comes with some pitfalls.
22 | // Learn more about service workers: https://bit.ly/CRA-PWA
23 | serviceWorker.unregister();
24 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/serviceWorker.ts:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | type Config = {
24 | onSuccess?: (registration: ServiceWorkerRegistration) => void;
25 | onUpdate?: (registration: ServiceWorkerRegistration) => void;
26 | };
27 |
28 | export function register(config?: Config) {
29 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
30 | // The URL constructor is available in all browsers that support SW.
31 | const publicUrl = new URL(
32 | process.env.PUBLIC_URL,
33 | window.location.href
34 | );
35 | if (publicUrl.origin !== window.location.origin) {
36 | // Our service worker won't work if PUBLIC_URL is on a different origin
37 | // from what our page is served on. This might happen if a CDN is used to
38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
39 | return;
40 | }
41 |
42 | window.addEventListener('load', () => {
43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
44 |
45 | if (isLocalhost) {
46 | // This is running on localhost. Let's check if a service worker still exists or not.
47 | checkValidServiceWorker(swUrl, config);
48 |
49 | // Add some additional logging to localhost, pointing developers to the
50 | // service worker/PWA documentation.
51 | navigator.serviceWorker.ready.then(() => {
52 | console.log(
53 | 'This web app is being served cache-first by a service ' +
54 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
55 | );
56 | });
57 | } else {
58 | // Is not localhost. Just register service worker
59 | registerValidSW(swUrl, config);
60 | }
61 | });
62 | }
63 | }
64 |
65 | function registerValidSW(swUrl: string, config?: Config) {
66 | navigator.serviceWorker
67 | .register(swUrl)
68 | .then(registration => {
69 | registration.onupdatefound = () => {
70 | const installingWorker = registration.installing;
71 | if (installingWorker == null) {
72 | return;
73 | }
74 | installingWorker.onstatechange = () => {
75 | if (installingWorker.state === 'installed') {
76 | if (navigator.serviceWorker.controller) {
77 | // At this point, the updated precached content has been fetched,
78 | // but the previous service worker will still serve the older
79 | // content until all client tabs are closed.
80 | console.log(
81 | 'New content is available and will be used when all ' +
82 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
83 | );
84 |
85 | // Execute callback
86 | if (config && config.onUpdate) {
87 | config.onUpdate(registration);
88 | }
89 | } else {
90 | // At this point, everything has been precached.
91 | // It's the perfect time to display a
92 | // "Content is cached for offline use." message.
93 | console.log('Content is cached for offline use.');
94 |
95 | // Execute callback
96 | if (config && config.onSuccess) {
97 | config.onSuccess(registration);
98 | }
99 | }
100 | }
101 | };
102 | };
103 | })
104 | .catch(error => {
105 | console.error('Error during service worker registration:', error);
106 | });
107 | }
108 |
109 | function checkValidServiceWorker(swUrl: string, config?: Config) {
110 | // Check if the service worker can be found. If it can't reload the page.
111 | fetch(swUrl, {
112 | headers: { 'Service-Worker': 'script' }
113 | })
114 | .then(response => {
115 | // Ensure service worker exists, and that we really are getting a JS file.
116 | const contentType = response.headers.get('content-type');
117 | if (
118 | response.status === 404 ||
119 | (contentType != null && contentType.indexOf('javascript') === -1)
120 | ) {
121 | // No service worker found. Probably a different app. Reload the page.
122 | navigator.serviceWorker.ready.then(registration => {
123 | registration.unregister().then(() => {
124 | window.location.reload();
125 | });
126 | });
127 | } else {
128 | // Service worker found. Proceed as normal.
129 | registerValidSW(swUrl, config);
130 | }
131 | })
132 | .catch(() => {
133 | console.log(
134 | 'No internet connection found. App is running in offline mode.'
135 | );
136 | });
137 | }
138 |
139 | export function unregister() {
140 | if ('serviceWorker' in navigator) {
141 | navigator.serviceWorker.ready
142 | .then(registration => {
143 | registration.unregister();
144 | })
145 | .catch(error => {
146 | console.error(error.message);
147 | });
148 | }
149 | }
150 |
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/src/styles/colors.scss:
--------------------------------------------------------------------------------
1 | // Background
2 | $Navy: #1f232b;
3 | $NavyDark: #1c2128;
4 | $NavyLight: #20242d;
5 | $Light: rgba(56, 62, 70, 0.4);
6 | $Lighter: rgb(64, 71, 80);
7 |
8 | // Buttons and Links
9 | $Primary: #1f90ff;
10 | $PrimaryGradient: linear-gradient(
11 | 90deg,
12 | rgba(47, 132, 252, 1) 0%,
13 | rgba(77, 189, 245, 1) 100%
14 | );
15 | $Secondary: #3e485b;
16 |
17 | // Text
18 | $Grey: rgba(255, 255, 255, 0.7);
19 | $White: #ffffff;
20 |
21 | // Highs and Lows
22 | $Green: #72e8a1;
23 | $Red: #e97373;
24 |
--------------------------------------------------------------------------------
/src/styles/colors.ts:
--------------------------------------------------------------------------------
1 | export const Primary: string = "#1f90ff";
2 | export const Light: string = "rgba(56, 62, 70, 0.3)";
3 | export const Lighter: string = "rgb(64, 71, 80)";
4 | export const White: string = "#fff";
5 | export const Navy: string = "#1b1f26";
6 |
--------------------------------------------------------------------------------
/src/styles/index.ts:
--------------------------------------------------------------------------------
1 | import { Light } from "./colors";
2 |
3 | const chartWidth =
4 | window.innerWidth >= 900 ? window.innerWidth / 1.68 : window.innerWidth - 20;
5 |
6 | const chartToolTipStyle = {
7 | background: "rgba(24, 27, 33, .95)",
8 | border: `1px solid ${Light}`,
9 | borderRadius: "3px"
10 | };
11 |
12 | export { chartWidth, chartToolTipStyle };
13 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "noEmit": true,
20 | "jsx": "react"
21 | },
22 | "include": [
23 | "src"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------