all done

package.json

@@ -15,7 +15,7 @@
     "millify": "^4.0.0",
     "moment": "^2.29.1",
     "react": "^17.0.2",
-    "react-chartjs-2": "^4.0.0",
+    "react-chartjs-2": "^3.0.4",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",

src/components/CryptoDetails.jsx

@@ -1,11 +1,104 @@
-import React from 'react';
+import React, { useState } from 'react';
+import HTMLReactParser from 'html-react-parser';
+import { useParams } from 'react-router-dom';
+import millify from 'millify';
+import { Col, Row, Typography, Select } from 'antd';
+import { MoneyCollectOutlined, DollarCircleOutlined, FundOutlined, ExclamationCircleOutlined, StopOutlined, TrophyOutlined, CheckOutlined, NumberOutlined, ThunderboltOutlined } from '@ant-design/icons';
+import { useGetCryptoDetailsQuery, useGetCryptoHistoryQuery} from '../services/cryptoApi';
+import Loader from './Loader';
+import LineChart from './LineChart';
+
+const { Title, Text } = Typography;
+const { Option } = Select;
 
 const CryptoDetails = () => {
+    const { coinId } = useParams();
+    const [timeperiod, setTimeperiod] = useState('7d');
+    const { data, isFetching } = useGetCryptoDetailsQuery(coinId);
+    const { data: coinHistory } = useGetCryptoHistoryQuery({ coinId, timeperiod });
+    const cryptoDetails = data?.data?.coin;
+
+    if (isFetching) return <Loader />;
+
+    const time = ['3h', '24h', '7d', '30d', '1y', '3m', '3y', '5y'];
+
+    const stats = [
+        { title: 'Price to USD', value: `$ ${cryptoDetails.price && millify(cryptoDetails.price)}`, icon: <DollarCircleOutlined /> },
+        { title: 'Rank', value: cryptoDetails.rank, icon: <NumberOutlined /> },
+        { title: '24h Volume', value: `$ ${cryptoDetails.volume && millify(cryptoDetails.volume)}`, icon: <ThunderboltOutlined /> },
+        { title: 'Market Cap', value: `$ ${cryptoDetails.marketCap && millify(cryptoDetails.marketCap)}`, icon: <DollarCircleOutlined /> },
+        { title: 'All-time-high(daily avg.)', value: `$ ${millify(cryptoDetails.allTimeHigh.price)}`, icon: <TrophyOutlined /> },
+    ];
+
+    const genericStats = [
+        { title: 'Number Of Markets', value: cryptoDetails.numberOfMarkets, icon: <FundOutlined /> },
+        { title: 'Number Of Exchanges', value: cryptoDetails.numberOfExchanges, icon: <MoneyCollectOutlined /> },
+        { title: 'Aprroved Supply', value: cryptoDetails.approvedSupply ? <CheckOutlined /> : <StopOutlined />, icon: <ExclamationCircleOutlined /> },
+        { title: 'Total Supply', value: `$ ${millify(cryptoDetails.totalSupply)}`, icon: <ExclamationCircleOutlined /> },
+        { title: 'Circulating Supply', value: `$ ${millify(cryptoDetails.circulatingSupply)}`, icon: <ExclamationCircleOutlined /> },
+    ];
+
     return (
-        <div>
-            CryptoDetails
-        </div>
-    )
-}
+        <Col className="coin-detail-container">
+            <Col className="coin-heading-container">
+                <Title level={2} className="coin-name">
+                    {data?.data?.coin.name} ({data?.data?.coin.slug}) Price
+                </Title>
+                <p>{cryptoDetails.name} live price in US Dollar (USD). View value statistics, market cap and supply.</p>
+            </Col>
+            <Select defaultValue="7d" className="select-timeperiod" placeholder="Select Timeperiod" onChange={(value) => setTimeperiod(value)}>
+                {time.map((date) => <Option key={date}>{date}</Option>)}
+            </Select>
+            <LineChart coinHistory={coinHistory} currentPrice={millify(cryptoDetails.price)} coinName={cryptoDetails.name} />
+            <Col className="stats-container">
+                <Col className="coin-value-statistics">
+                    <Col className="coin-value-statistics-heading">
+                        <Title level={3} className="coin-details-heading">{cryptoDetails.name} Value Statistics</Title>
+                        <p>An overview showing the statistics of {cryptoDetails.name}, such as the base and quote currency, the rank, and trading volume.</p>
+                    </Col>
+                    {stats.map(({ icon, title, value }) => (
+                        <Col className="coin-stats">
+                            <Col className="coin-stats-name">
+                                <Text>{icon}</Text>
+                                <Text>{title}</Text>
+                            </Col>
+                            <Text className="stats">{value}</Text>
+                        </Col>
+                    ))}
+                </Col>
+                <Col className="other-stats-info">
+                    <Col className="coin-value-statistics-heading">
+                        <Title level={3} className="coin-details-heading">Other Stats Info</Title>
+                        <p>An overview showing the statistics of {cryptoDetails.name}, such as the base and quote currency, the rank, and trading volume.</p>
+                    </Col>
+                    {genericStats.map(({ icon, title, value }) => (
+                        <Col className="coin-stats">
+                            <Col className="coin-stats-name">
+                                <Text>{icon}</Text>
+                                <Text>{title}</Text>
+                            </Col>
+                            <Text className="stats">{value}</Text>
+                        </Col>
+                    ))}
+                </Col>
+            </Col>
+            <Col className="coin-desc-link">
+                <Row className="coin-desc">
+                    <Title level={3} className="coin-details-heading">What is {cryptoDetails.name}?</Title>
+                    {HTMLReactParser(cryptoDetails.description)}
+                </Row>
+                <Col className="coin-links">
+                    <Title level={3} className="coin-details-heading">{cryptoDetails.name} Links</Title>
+                    {cryptoDetails.links?.map((link) => (
+                        <Row className="coin-link" key={link.name}>
+                            <Title level={5} className="link-name">{link.type}</Title>
+                            <a href={link.url} target="_blank" rel="noreferrer">{link.name}</a>
+                        </Row>
+                    ))}
+                </Col>
+            </Col>
+        </Col>
+    );
+};
 
-export default CryptoDetails;
+export default CryptoDetails;

src/components/Cryptocurrencies.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import millify from "millify";
 import { Link } from "react-router-dom";
-import { Card, Row, Col, Input } from "antd";
+import { Card, Row, Col} from "antd";
 
 import { useGetCryptosQuery } from '../services/cryptoApi';
+import Loader from './Loader';
 
 const Cryptocurrencies = ({ simplified }) => {
     const count = simplified ? 10 : 100;
@@ -19,7 +20,7 @@ const Cryptocurrencies = ({ simplified }) => {
 
     }, [cryptosList, searchTerm])
 
-    if (isFetching) return "Loading ... ";
+    if (isFetching) return <Loader/>;
 
     return (
         <>
@@ -32,7 +33,8 @@ const Cryptocurrencies = ({ simplified }) => {
                 {cryptos?.map((currency) => (
                     <Col xs={24} sm={12} lg={6} className="crypto-card" key={currency.id}>
                         <Link to={`/crypto/${currency.id}`}>
-                            <Card title={`${currency.rank}. ${currency.name}`} extra={<img className="crypto-image" src={currency.iconUrl} />} hoverable >
+                            <Card title={`${currency.rank}. ${currency.name}`} 
+                            extra={<img className="crypto-image" src={currency.iconUrl} alt="..."/>} hoverable >
                                 <p>Price: {millify(currency.price)}</p>
                                 <p>Price: {millify(currency.marketCap)}</p>
                                 <p>Price: {millify(currency.change)}%</p>

src/components/Exchanges.jsx

@@ -1,10 +1,54 @@
 import React from 'react';
+import millify from 'millify';
+import { Collapse, Row, Col, Typography, Avatar } from 'antd';
+import HTMLReactParser from 'html-react-parser';
+import { useGetExchangesQuery } from '../services/cryptoApi';
+import Loader from './Loader';
+
+const { Text } = Typography;
+const { Panel } = Collapse;
 
 const Exchanges = () => {
+    const { data, isFetching } = useGetExchangesQuery();
+
+    const exchangesList = data?.data?.exchanges;
+
+    if (isFetching) return <Loader />;
     return (
-        <div>
-            Exchanges
-        </div>
+        <>
+      <Row>
+        <Col span={6}>Exchanges</Col>
+        <Col span={6}>24h Trade Volume</Col>
+        <Col span={6}>Markets</Col>
+        <Col span={6}>Change</Col>
+      </Row>
+      <Row>
+        {exchangesList.map((exchange) => (
+          <Col span={24}>
+            <Collapse>
+              <Panel
+                key={exchange.id}
+                showArrow={false}
+                header={(
+                  <Row key={exchange.id}>
+                    <Col span={6}>
+                      <Text><strong>{exchange.rank}.</strong></Text>
+                      <Avatar className="exchange-image" src={exchange.iconUrl} />
+                      <Text><strong>{exchange.name}</strong></Text>
+                    </Col>
+                    <Col span={6}>${millify(exchange.volume)}</Col>
+                    <Col span={6}>{millify(exchange.numberOfMarkets)}</Col>
+                    <Col span={6}>{millify(exchange.marketShare)}%</Col>
+                  </Row>
+                  )}
+              >
+                {HTMLReactParser(exchange.description || '')}
+              </Panel>
+            </Collapse>
+          </Col>
+        ))}
+      </Row>
+    </>
     )
 }
 

src/components/Homepage.jsx

@@ -5,15 +5,15 @@ import { Link } from "react-router-dom";
 
 import { useGetCryptosQuery } from '../services/cryptoApi';
 import { Cryptocurrencies, News } from "../components";
-
+import Loader from './Loader';
 const { Title } = Typography;
 
 const Homepage = () => {
 
     const { data, isFetching } = useGetCryptosQuery(10);
     const globalStats = data?.data?.stats;
 
-    if (isFetching) return "Loading ... ";
+    if (isFetching) return <Loader/>;
 
     return (
         <>

src/components/LineChart.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { Line } from 'react-chartjs-2';
+
+import { Col, Row, Typography } from 'antd';
+
+const { Title } = Typography;
+
+const LineChart = ({ coinHistory, currentPrice, coinName }) => {
+  const coinPrice = [];
+  const coinTimestamp = [];
+
+  for (let i = 0; i < coinHistory?.data?.history?.length; i += 1) {
+    coinPrice.push(coinHistory?.data?.history[i].price);
+  }
+
+  for (let i = 0; i < coinHistory?.data?.history?.length; i += 1) {
+    coinTimestamp.push(new Date(coinHistory?.data?.history[i].timestamp).toLocaleDateString());
+  }
+
+  const data = {
+    labels: coinTimestamp,
+    datasets: [
+      {
+        label: 'Price In USD',
+        data: coinPrice,
+        fill: false,
+        backgroundColor: '#0071bd',
+        borderColor: '#0071bd',
+      },
+    ],
+  };
+
+  const options = {
+    scales: {
+      yAxes: [
+        {
+          ticks: {
+            beginAtZero: true,
+          },
+        },
+      ],
+    },
+  };
+
+  return (
+    <>
+      <Row className="chart-header">
+        <Title level={2} className="chart-title">{coinName} Price Chart </Title>
+        <Col className="price-container">
+          <Title level={5} className="price-change">Change: {coinHistory?.data?.change}%</Title>
+          <Title level={5} className="current-price">Current {coinName} Price: $ {currentPrice}</Title>
+        </Col>
+      </Row>
+      <Line data={data} options={options} />
+    </>
+  );
+};
+
+export default LineChart;

src/components/Loader.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Spin } from 'antd';
+
+const Loader = () => (
+  <div className="loader">
+    <Spin />
+  </div>
+);
+
+export default Loader;

src/components/Navbar.jsx

@@ -1,33 +1,73 @@
-import React from 'react'
+import React, {useState, useEffect} from 'react'
+
 import { Button, Menu, Typography, Avatar } from "antd";
 import { Link } from "react-router-dom"
 import { HomeOutlined, MoneyCollectOutlined, BulbOutlined, FundOutlined, MenuOutlined } from "@ant-design/icons";
 import icon from "../images/cryptocurrency.png"
 
+
 const Navbar = () => {
+    const [activeMenu, setActiveMenu] = useState(true);
+    const [screenSize, setScreenSize] = useState(undefined);
+
+    useEffect(() => {
+        const handleResize = () => setScreenSize(window.innerWidth)
+        window.addEventListener('resize' , handleResize);
+        handleResize();
+        return () => window.removeEventListener('resize', handleResize)
+    }, [])
+    useEffect(() => {
+        if(screenSize <= 768){
+            setActiveMenu(false)
+        } else {
+            setActiveMenu(true)
+        }
+    }, [screenSize])
+    const handleClick = () => {
+        if(screenSize <= 768){
+            setActiveMenu(!activeMenu)
+        } else{
+            setActiveMenu(activeMenu)
+        }
+    }
     return (
         <div className="nav-container">
             <div className="logo-container">
                 <Avatar src={icon} size="large" />
                 <Typography.Title level={2} className="logo">
                     <Link to="/">Cryptoverse</Link>
                 </Typography.Title>
-                {/* <Button className="menu-control-container"></Button> */}
+                <Button className="menu-control-container" onClick={
+                    () => setActiveMenu(!activeMenu)
+                }>
+                    <MenuOutlined></MenuOutlined>
+                </Button>
             </div>
-            <Menu theme="dark">
+            {activeMenu && (
+                <Menu theme="dark">
                 <Menu.Item icon={<HomeOutlined />}>
-                    <Link to="/">Home</Link>
+                    <Link to="/" onClick={
+                    () => handleClick()
+                }>Home</Link>
                 </Menu.Item>
                 <Menu.Item icon={<FundOutlined />}>
-                    <Link to="/cryptocurrencies">Cryptocurrencies</Link>
+                    <Link to="/cryptocurrencies" onClick={
+                    () => handleClick()
+                }>Cryptocurrencies</Link>
                 </Menu.Item>
                 <Menu.Item icon={<MoneyCollectOutlined />}>
-                    <Link to="/exchanges">Exchanges</Link>
+                    <Link to="/exchanges" onClick={
+                    () => handleClick()
+                }>Exchanges</Link>
                 </Menu.Item>
-                <Menu.Item icon={<BulbOutlined />}>
+                <Menu.Item icon={<BulbOutlined />} onClick={
+                    () => handleClick()
+                }>
                     <Link to="/news">News</Link>
                 </Menu.Item>
             </Menu>
+            )
+            }
         </div>
     )
 }