feature/egld-price-calculator

package.json

@@ -17,28 +17,29 @@
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
-    "gatsby": "^3.0.4",
-    "gatsby-plugin-catch-links": "^3.0.0",
-    "gatsby-plugin-google-gtag": "^3.0.0",
-    "gatsby-plugin-image": "^1.0.1",
+    "axios": "^0.21.1",
+    "gatsby": "^3.1.1",
+    "gatsby-plugin-catch-links": "^3.1.0",
+    "gatsby-plugin-google-gtag": "^3.1.0",
+    "gatsby-plugin-image": "^1.1.1",
     "gatsby-plugin-robots-txt": "^1.5.5",
-    "gatsby-plugin-sharp": "^3.0.1",
-    "gatsby-plugin-sitemap": "^3.0.0",
-    "gatsby-remark-images": "^4.0.0",
-    "gatsby-source-filesystem": "^3.0.0",
+    "gatsby-plugin-sharp": "^3.1.1",
+    "gatsby-plugin-sitemap": "^3.1.0",
+    "gatsby-remark-images": "^4.1.0",
+    "gatsby-source-filesystem": "^3.1.0",
     "gatsby-theme-material-ui": "^1.0.13",
-    "gatsby-transformer-remark": "^3.0.0",
-    "gatsby-transformer-sharp": "^3.0.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "gatsby-transformer-remark": "^3.1.0",
+    "gatsby-transformer-sharp": "^3.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {
     "eslint": "^7.22.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.23.0",
     "eslint-plugin-react-hooks": "^4.2.0"
   },
   "repository": {

src/components/LoadingBar/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const LoadingBar = () => (
+  <div style={{
+    display: 'flex',
+    justifyContent: 'center',
+  }}
+  >
+    <CircularProgress />
+  </div>
+);
+
+export default LoadingBar;

src/markdown/blog/2021/03/23/egld-price-calculator.md

@@ -0,0 +1,21 @@
+---
+path: "/blog/2021/03/23/egld-price-calculator"
+title: "Elrond (EGLD) Price Calculator"
+author: "CodeDead"
+date: "2021-03-23"
+abstract: "We've added a new tool to our website. This time, a cryptocurrency price calculator, specifically made for Elrond (EGLD)..."
+categories: "JavaScript, News, Cryptocurrency"
+---
+## Information
+
+We've added a new tool to our website. This time, a cryptocurrency price calculator, specifically made for [Elrond (EGLD)](https://elrond.com).
+With this tool, you can retrieve the current simple price for the EGLD currency, using data retrieved from [CoinGecko](https://coingecko.com).
+
+## EGLD Price Calculator
+
+You can find the Elrond (EGLD) price calculator here:
+[EGLD Price Calculator](/software/egld-price-calculator)
+
+## Other
+
+Feel free to [contact us](/contact) if you have any questions or if you need help.

src/pages/privacy/index.jsx

@@ -75,9 +75,9 @@ const Privacy = () => {
             </ul>
 
             <Typography gutterBottom>
-              Take a look at google’s privacy policy to find out more. We don’t export this data to
-              any hard drives or sell it or anything. This information is quite useful for our
-              applications in the following sense:
+              <a href="https://policies.google.com/" rel="noopener noreferrer" target="_blank">Take a look at google’s privacy policy to find out more.</a>
+              We don’t export this data to any hard drives or sell it or anything. This information
+              is quite useful for our applications in the following sense:
             </Typography>
             <ul>
               <li>

src/pages/software/egld-price-calculator/index.jsx

@@ -0,0 +1,230 @@
+import React, { useContext, useEffect, useState } from 'react';
+import {
+  Card,
+  Container, FormControl, InputLabel, MenuItem, Select, TextField,
+} from '@material-ui/core';
+import axios from 'axios';
+import Grid from '@material-ui/core/Grid';
+import CardContent from '@material-ui/core/CardContent';
+import MuiAlert from '@material-ui/lab/Alert';
+import Snackbar from '@material-ui/core/Snackbar';
+import { setPageIndex } from '../../../reducers/MainReducer/Actions';
+import PageHeader from '../../../components/PageHeader';
+import Layout from '../../../components/Layout';
+import { MainContext } from '../../../contexts/MainContextProvider';
+import LoadingBar from '../../../components/LoadingBar';
+
+const EgldPriceCalculator = () => {
+  const [, dispatch] = useContext(MainContext);
+
+  const [pricePerEgld, setPricePerEgld] = useState(null);
+  const [currency, setCurrency] = useState('usd');
+  const [supportedCurrencies, setSupportedCurrencies] = useState(null);
+
+  const [egld, setEgld] = useState(1);
+  const [currencyAmount, setCurrencyAmount] = useState(0);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  /**
+   * Close the snackbar
+   */
+  const closeSnackbar = () => {
+    setError(null);
+  };
+
+  /**
+   * Get a list of supported currencies
+   * @param override True if the loading indicator should be ignored, otherwise false
+   */
+  const getSupportedCurrencies = (override) => {
+    if (loading && !override) return;
+
+    setLoading(true);
+    setError(null);
+    setSupportedCurrencies(null);
+
+    axios.get('https://api.coingecko.com/api/v3/simple/supported_vs_currencies')
+      .then((res) => {
+        setSupportedCurrencies(res.data);
+      })
+      .catch((err) => {
+        setError(err);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  /**
+   * Get the price for EGLD
+   * @param override True if the loading indicator should be ignored, otherwise false
+   * @param changeEgld Change the EGLD amount or not
+   * @param newCurrency The currency for which the price should be retrieved
+   */
+  const getEgldPrice = (override, changeEgld, newCurrency) => {
+    if (loading && !override) return;
+
+    setLoading(true);
+    setError(null);
+    setPricePerEgld(null);
+
+    axios.get(`https://api.coingecko.com/api/v3/simple/price?ids=elrond-erd-2&vs_currencies=${newCurrency}`)
+      .then((res) => {
+        const values = Object.values(res.data['elrond-erd-2']);
+        const ppegld = parseFloat(values[0]);
+
+        setPricePerEgld(ppegld);
+        if (changeEgld) {
+          setEgld((1 / ppegld) * currencyAmount);
+        } else {
+          setCurrencyAmount(egld * ppegld);
+        }
+      })
+      .catch((err) => {
+        setError(err);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  /**
+   * Change the EGLD amount
+   * @param e
+   */
+  const changeEgldAmount = (e) => {
+    if (e.target.value < 0) return;
+
+    setEgld(e.target.value);
+    setCurrencyAmount(e.target.value * pricePerEgld);
+  };
+
+  /**
+   * Change the amount of the selected currency
+   * @param e The event argument
+   */
+  const changeCurrencyAmount = (e) => {
+    if (e.target.value < 0) return;
+
+    setEgld((1 / pricePerEgld) * e.target.value);
+    setCurrencyAmount(e.target.value);
+  };
+
+  /**
+   * Change the currency
+   * @param e The event argument
+   */
+  const changeCurrency = (e) => {
+    if (!e.target.value) return;
+
+    setCurrency(e.target.value);
+    getEgldPrice(false, false, e.target.value);
+  };
+
+  useEffect(() => {
+    dispatch(setPageIndex(-1));
+    getSupportedCurrencies(false);
+    getEgldPrice(true, false, currency);
+  }, []);
+
+  return (
+    <Layout>
+      <PageHeader title="Elrond (EGLD) Price Calculator" subTitle="Simple Elrond (EGLD) price calculator" />
+      <Container maxWidth="md" style={{ marginTop: 10 }}>
+        <Card>
+          <CardContent>
+            {loading ? <LoadingBar /> : (
+              <Grid container spacing={2}>
+                <Grid item xs={12} md={12} lg={12}>
+                  <Grid container>
+                    <Grid item xs={12} md={10} lg={10}>
+                      <TextField
+                        variant="outlined"
+                        label="Amount"
+                        value={egld}
+                        type="number"
+                        fullWidth
+                        onChange={changeEgldAmount}
+                      />
+                    </Grid>
+                    <Grid item xs={12} md={2} lg={2}>
+                      <FormControl
+                        variant="outlined"
+                        fullWidth
+                      >
+                        <InputLabel>Currency</InputLabel>
+                        <Select
+                          value="egld"
+                          label="Currency"
+                          fullWidth
+                        >
+                          <MenuItem value="egld">
+                            <em>EGLD</em>
+                          </MenuItem>
+                        </Select>
+                      </FormControl>
+                    </Grid>
+                  </Grid>
+                </Grid>
+                <Grid item xs={12} md={12} lg={12}>
+                  <Grid container>
+                    <Grid item xs={12} md={10} lg={10}>
+                      <TextField
+                        variant="outlined"
+                        label="Amount"
+                        value={currencyAmount}
+                        type="number"
+                        fullWidth
+                        onChange={changeCurrencyAmount}
+                      />
+                    </Grid>
+                    <Grid item xs={12} md={2} lg={2}>
+                      <FormControl
+                        variant="outlined"
+                        fullWidth
+                      >
+                        <InputLabel>Currency</InputLabel>
+                        <Select
+                          value={currency}
+                          label="Currency"
+                          fullWidth
+                          onChange={changeCurrency}
+                        >
+                          <MenuItem value="">
+                            Select a currency
+                          </MenuItem>
+                          {supportedCurrencies && supportedCurrencies.length > 0
+                            ? supportedCurrencies.map((item) => (
+                              <MenuItem
+                                key={item}
+                                value={item}
+                              >
+                                {item.toUpperCase()}
+                              </MenuItem>
+                            )) : null}
+                        </Select>
+                      </FormControl>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Grid>
+            )}
+          </CardContent>
+        </Card>
+      </Container>
+      <Snackbar open={!!error} autoHideDuration={6000} onClose={closeSnackbar}>
+        {error
+          ? (
+            <MuiAlert elevation={6} variant="filled" severity="error" onClose={closeSnackbar}>
+              {error.message}
+            </MuiAlert>
+          )
+          : null}
+      </Snackbar>
+    </Layout>
+  );
+};
+
+export default EgldPriceCalculator;

src/pages/software/index.jsx

@@ -60,6 +60,11 @@ const Software = () => {
       childImageSharp {
         gatsbyImageData(layout: CONSTRAINED, height: 160)
       }
+    },
+    egld: file(relativePath: { eq: "Elrond/egld.png" }) {
+      childImageSharp {
+        gatsbyImageData(layout: CONSTRAINED, height: 160)
+      }
     }
   }`);
 
@@ -111,6 +116,12 @@ const Software = () => {
     description: 'AniView is a free and open source GIF image viewer. You can watch GIF images your way, thanks to all the options that are available in AniView.',
     tags: ['AniView', 'images', 'GIF', 'viewer'],
     image: imageData.aniview.childImageSharp.gatsbyImageData,
+  }, {
+    name: 'EGLD Price Calculator',
+    url: '/software/egld-price-calculator',
+    description: 'A simple and easy to use price calculator for Elrond (EGLD).',
+    tags: ['egld', 'elrond', 'currency', 'Crypto'],
+    image: imageData.egld.childImageSharp.gatsbyImageData,
   }];
 
   useEffect(() => {
@@ -312,6 +323,14 @@ const Software = () => {
                     image={applications.filter((item) => item.name === 'AniView')[0].image}
                   />
                 </Grid>
+                <Grid item xs={12} md={3} lg={4}>
+                  <Application
+                    name={applications.filter((item) => item.name === 'EGLD Price Calculator')[0].name}
+                    description={applications.filter((item) => item.name === 'EGLD Price Calculator')[0].description}
+                    url={applications.filter((item) => item.name === 'EGLD Price Calculator')[0].url}
+                    image={applications.filter((item) => item.name === 'EGLD Price Calculator')[0].image}
+                  />
+                </Grid>
               </Grid>
             </>
           )}