update dependencies

package.json

@@ -5,18 +5,18 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.12",
-    "@mui/lab": "^5.0.0-alpha.147",
-    "@mui/material": "^5.14.12",
-    "@mui/system": "^5.14.12",
+    "@mui/icons-material": "^5.14.13",
+    "@mui/lab": "^5.0.0-alpha.148",
+    "@mui/material": "^5.14.13",
+    "@mui/system": "^5.14.13",
     "i18next": "^23.5.1",
     "i18next-browser-languagedetector": "^7.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^13.2.2",
-    "react-number-format": "^4.9.4",
+    "react-i18next": "^13.3.0",
+    "react-number-format": "^5.3.1",
     "react-query": "^3.39.3",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.17.0",
     "react-scripts": "^5.0.1",
     "zustand": "^4.4.3"
   },

src/App.jsx

@@ -4,7 +4,8 @@ import {QueryClient, QueryClientProvider} from 'react-query';
 import {ReactQueryDevtools} from "react-query/devtools";
 import {useTranslation} from "react-i18next";
 
-import {CssBaseline, Container, Box, Paper, Typography} from '@mui/material';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import {CssBaseline, Container, Box, Paper, Typography, IconButton, Tooltip} from '@mui/material';
 import {ThemeProvider, createTheme} from '@mui/material/styles';
 
 import "./translation/i18n";
@@ -26,6 +27,10 @@ const queryClient = new QueryClient({
   },
 });
 
+const openInNewTab = (url) => {
+  window.open(url, "_blank", "noreferrer");
+};
+
 export default function App() {
   const [isDarkTheme, setIsDarkTheme] = useLocalStorage("isDarkTheme", false);
 
@@ -62,6 +67,13 @@ const FooterComponent = () => {
             <Typography variant="body1" color="inherit">{t("footer.line2")}</Typography>
           </Box>
         </Paper>
+        <Box textAlign="center">
+          <Tooltip title="GitHub">
+            <IconButton color="inherit" aria-label="Theme" role="link" onClick={() => openInNewTab("https://github.com/DocBrown101/Bitcoin-Satoshi-Converter")}>
+              <GitHubIcon />
+            </IconButton>
+          </Tooltip>
+        </Box>
       </Container>
     </footer>
   );

src/components/Converter.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import NumberFormat from "react-number-format";
-import {useTranslation} from "react-i18next";
+import {NumericFormat} from 'react-number-format';
+import {useTranslation} from 'react-i18next';
 
 import {Box, Grid, Paper, Typography, IconButton} from '@mui/material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import BackspaceOutlinedIcon from '@mui/icons-material/BackspaceOutlined';
 
-import ConverterStore from "../stores/ConverterStore";
+import ConverterStore from '../stores/ConverterStore';
 import InputElement from './InputElement';
 
 export default function Converter() {
@@ -33,7 +33,7 @@ export default function Converter() {
             <Typography color="secondary" variant="h6">
               {oneFiatSats > 0 ?
                 <Box fontFamily="Monospace" fontWeight="fontWeightBold" fontSize="inherit" mb={2}>
-                  <NumberFormat value={oneFiatSats}
+                  <NumericFormat value={oneFiatSats}
                     displayType={'text'}
                     decimalScale={0}
                     fixedDecimalScale={true}

src/components/FiatPriceResult.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {NavLink} from 'react-router-dom';
-import NumberFormat from 'react-number-format';
+import {NumericFormat} from 'react-number-format';
 import {useTranslation} from "react-i18next";
 
 import {Box, Grid, Button, Typography, Tooltip} from '@mui/material';
@@ -99,7 +99,7 @@ const PriceComponent = (props) => {
   return (
     <Typography color="secondary" variant="h6">
       <Box fontFamily="Monospace" fontWeight="fontWeightBold" fontSize="inherit">
-        <NumberFormat value={props.eur}
+        <NumericFormat value={props.eur}
           displayType={'text'}
           decimalScale={2}
           fixedDecimalScale={true}
@@ -108,7 +108,7 @@ const PriceComponent = (props) => {
           decimalSeparator={','} />
       </Box >
       <Box fontFamily="Monospace" fontWeight="fontWeightBold">
-        <NumberFormat value={props.usd}
+        <NumericFormat value={props.usd}
           displayType={'text'}
           decimalScale={2}
           fixedDecimalScale={true}