From a6c433719e532d8a4a32f84ff399841cdbe70b3d Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Mon, 16 May 2022 11:01:17 -0700
Subject: [PATCH] Convert Icons to ts, add Bitcoin Icons

---
 frontend/src/components/BookPage.js              |  6 +-----
 frontend/src/components/BottomBar.js             | 16 +++++++++++++---
 frontend/src/components/Dialogs/InfoDialog.tsx   |  2 +-
 .../components/FlagWithProps/FlagWithProps.tsx   |  3 +--
 .../{icons/AmbossIcon.js => Icons/Amboss.tsx}    |  2 +-
 frontend/src/components/Icons/Bitcoin.tsx        | 10 ++++++++++
 frontend/src/components/Icons/BitcoinSign.tsx    | 10 ++++++++++
 .../{icons/BuySatsIcon.js => Icons/BuySats.tsx}  |  0
 .../BuySatsChecked.tsx}                          |  0
 .../{icons/EarthIcon.js => Icons/Earth.tsx}      |  0
 .../{icons/GoldIcon.js => Icons/Gold.tsx}        |  0
 .../{icons/NewTabIcon.js => Icons/NewTab.tsx}    |  0
 .../RoboSatsIcon.js => Icons/RoboSats.tsx}       |  0
 .../RoboSatsNoText.tsx}                          |  0
 .../RoboSatsText.tsx}                            |  0
 .../SellSatsIcon.js => Icons/SellSats.tsx}       |  0
 .../SellSatsChecked.tsx}                         |  0
 .../SendReceiveIcon.js => Icons/SendReceive.tsx} |  0
 frontend/src/components/Icons/index.ts           | 14 ++++++++++++++
 frontend/src/components/MakerPage.js             |  5 +----
 frontend/src/components/OrderPage.js             |  2 +-
 frontend/src/components/TradeBox.js              |  2 +-
 frontend/src/components/UserGenPage.js           |  2 +-
 23 files changed, 55 insertions(+), 19 deletions(-)
 rename frontend/src/components/{icons/AmbossIcon.js => Icons/Amboss.tsx} (84%)
 create mode 100644 frontend/src/components/Icons/Bitcoin.tsx
 create mode 100644 frontend/src/components/Icons/BitcoinSign.tsx
 rename frontend/src/components/{icons/BuySatsIcon.js => Icons/BuySats.tsx} (100%)
 rename frontend/src/components/{icons/BuySatsCheckedIcon.js => Icons/BuySatsChecked.tsx} (100%)
 rename frontend/src/components/{icons/EarthIcon.js => Icons/Earth.tsx} (100%)
 rename frontend/src/components/{icons/GoldIcon.js => Icons/Gold.tsx} (100%)
 rename frontend/src/components/{icons/NewTabIcon.js => Icons/NewTab.tsx} (100%)
 rename frontend/src/components/{icons/RoboSatsIcon.js => Icons/RoboSats.tsx} (100%)
 rename frontend/src/components/{icons/RoboSatsNoTextIcon.js => Icons/RoboSatsNoText.tsx} (100%)
 rename frontend/src/components/{icons/RoboSatsTextIcon.js => Icons/RoboSatsText.tsx} (100%)
 rename frontend/src/components/{icons/SellSatsIcon.js => Icons/SellSats.tsx} (100%)
 rename frontend/src/components/{icons/SellSatsCheckedIcon.js => Icons/SellSatsChecked.tsx} (100%)
 rename frontend/src/components/{icons/SendReceiveIcon.js => Icons/SendReceive.tsx} (100%)
 create mode 100644 frontend/src/components/Icons/index.ts

diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
index 4331abbe..90e0c4f6 100644
--- a/frontend/src/components/BookPage.js
+++ b/frontend/src/components/BookPage.js
@@ -13,11 +13,7 @@ import PaymentText from './PaymentText'
 
 // Icons
 import RefreshIcon from '@mui/icons-material/Refresh';
-import SendReceiveIcon from "./icons/SendReceiveIcon";
-import BuySatsIcon from "./icons/BuySatsIcon";
-import BuySatsCheckedIcon from "./icons/BuySatsCheckedIcon";
-import SellSatsIcon from "./icons/SellSatsIcon";
-import SellSatsCheckedIcon from "./icons/SellSatsCheckedIcon";
+import { SendReceiveIcon, BuySatsCheckedIcon, BuySatsIcon, SellSatsCheckedIcon, SellSatsIcon} from "./Icons";
 
 class BookPage extends Component {
   constructor(props) {
diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index 2a5a02fb..d715e327 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -25,8 +25,8 @@ import WebIcon from '@mui/icons-material/Web';
 import BookIcon from '@mui/icons-material/Book';
 import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
 import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
-import AmbossIcon from "./icons/AmbossIcon";
 import FavoriteIcon from '@mui/icons-material/Favorite';
+import { AmbossIcon , BitcoinSignIcon} from "./Icons";
 
 import { CommunityDialog } from './Dialogs';
 
@@ -148,13 +148,23 @@ class BottomBar extends Component {
                 <Divider/>
                 <ListItem>
                     <ListItemIcon><EqualizerIcon/></ListItemIcon>
-                    <ListItemText primary={pn(this.state.last_day_volume)+" BTC"} secondary={t("24h contracted volume")}/>
+                    <ListItemText secondary={t("24h contracted volume")}>
+                        <div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>
+                            {pn(this.state.last_day_volume)}
+                            <BitcoinSignIcon sx={{width:14,height:14}} color={"text.secondary"}/>
+                        </div>
+                    </ListItemText>
                 </ListItem>
 
                 <Divider/>
                 <ListItem>
                     <ListItemIcon><EqualizerIcon/></ListItemIcon>
-                    <ListItemText primary={pn(this.state.lifetime_volume)+" BTC"} secondary={t("Lifetime contracted volume")}/>
+                    <ListItemText secondary={t("Lifetime contracted volume")}>
+                        <div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>
+                            {pn(this.state.lifetime_volume)}
+                            <BitcoinSignIcon sx={{width:14,height:14}} color={"text.secondary"}/>
+                        </div>
+                    </ListItemText>
                 </ListItem>
 
                 <Divider/>
diff --git a/frontend/src/components/Dialogs/InfoDialog.tsx b/frontend/src/components/Dialogs/InfoDialog.tsx
index d1c90831..fa6195b5 100644
--- a/frontend/src/components/Dialogs/InfoDialog.tsx
+++ b/frontend/src/components/Dialogs/InfoDialog.tsx
@@ -45,7 +45,7 @@ const InfoDialog = ({
               </p>
             </Typography>
           </Grid>
-          <Grid item xs={4} align="center">
+          <Grid item xs={4}>
             <Image className='newAvatar'
               disableError={true}
               cover={true}
diff --git a/frontend/src/components/FlagWithProps/FlagWithProps.tsx b/frontend/src/components/FlagWithProps/FlagWithProps.tsx
index 5f65b49a..4043b5f7 100644
--- a/frontend/src/components/FlagWithProps/FlagWithProps.tsx
+++ b/frontend/src/components/FlagWithProps/FlagWithProps.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import Flags from 'country-flag-icons/react/3x2'
 import SwapCallsIcon from '@mui/icons-material/SwapCalls';
-import GoldIcon from '../icons/GoldIcon';
-import EarthIcon from '../icons/EarthIcon'
+import { GoldIcon, EarthIcon } from "../Icons";
 
 type Props = {
   code: string;
diff --git a/frontend/src/components/icons/AmbossIcon.js b/frontend/src/components/Icons/Amboss.tsx
similarity index 84%
rename from frontend/src/components/icons/AmbossIcon.js
rename to frontend/src/components/Icons/Amboss.tsx
index 1e8fbf68..5a11a2c4 100644
--- a/frontend/src/components/icons/AmbossIcon.js
+++ b/frontend/src/components/Icons/Amboss.tsx
@@ -10,7 +10,7 @@ export default function AmbossIcon(props) {
               <stop  offset="0" style={{stopColor:'#925bc9'}}/>
               <stop  offset="1" style={{stopColor:'#ff59ac'}}/>
             </linearGradient>
-            <path class="amboss" d="M55.3,84.9V61.3h-15v23.6H0V0h95.7v84.9H55.3z M55.3,28.1h-15v17.1h15V28.1z"/>
+            <path className={"amboss"} d="M55.3,84.9V61.3h-15v23.6H0V0h95.7v84.9H55.3z M55.3,28.1h-15v17.1h15V28.1z"/>
           </g>
         </g>
       </SvgIcon>
diff --git a/frontend/src/components/Icons/Bitcoin.tsx b/frontend/src/components/Icons/Bitcoin.tsx
new file mode 100644
index 00000000..aeee5741
--- /dev/null
+++ b/frontend/src/components/Icons/Bitcoin.tsx
@@ -0,0 +1,10 @@
+import React, { Component } from "react";
+import { SvgIcon } from "@mui/material"
+
+export default function BitcoinIcon(props) {
+  return (
+    <SvgIcon sx={props.sx} color={props.color} viewBox="0 0 512 512">
+      <path d="M48 32C48 14.33 62.33 0 80 0C97.67 0 112 14.33 112 32V64H144V32C144 14.33 158.3 0 176 0C193.7 0 208 14.33 208 32V64C208 65.54 207.9 67.06 207.7 68.54C254.1 82.21 288 125.1 288 176C288 200.2 280.3 222.6 267.3 240.9C298.9 260.7 320 295.9 320 336C320 397.9 269.9 448 208 448V480C208 497.7 193.7 512 176 512C158.3 512 144 497.7 144 480V448H112V480C112 497.7 97.67 512 80 512C62.33 512 48 497.7 48 480V448H41.74C18.69 448 0 429.3 0 406.3V101.6C0 80.82 16.82 64 37.57 64H48V32zM176 224C202.5 224 224 202.5 224 176C224 149.5 202.5 128 176 128H64V224H176zM64 288V384H208C234.5 384 256 362.5 256 336C256 309.5 234.5 288 208 288H64z"/>
+    </SvgIcon>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Icons/BitcoinSign.tsx b/frontend/src/components/Icons/BitcoinSign.tsx
new file mode 100644
index 00000000..6c8f764e
--- /dev/null
+++ b/frontend/src/components/Icons/BitcoinSign.tsx
@@ -0,0 +1,10 @@
+import React, { Component } from "react";
+import { SvgIcon } from "@mui/material"
+
+export default function BitcoinSignIcon(props) {
+  return (
+    <SvgIcon sx={props.sx} color={props.color} viewBox="0 0 320 512">
+      <path d="M48 32C48 14.33 62.33 0 80 0C97.67 0 112 14.33 112 32V64H144V32C144 14.33 158.3 0 176 0C193.7 0 208 14.33 208 32V64C208 65.54 207.9 67.06 207.7 68.54C254.1 82.21 288 125.1 288 176C288 200.2 280.3 222.6 267.3 240.9C298.9 260.7 320 295.9 320 336C320 397.9 269.9 448 208 448V480C208 497.7 193.7 512 176 512C158.3 512 144 497.7 144 480V448H112V480C112 497.7 97.67 512 80 512C62.33 512 48 497.7 48 480V448H41.74C18.69 448 0 429.3 0 406.3V101.6C0 80.82 16.82 64 37.57 64H48V32zM176 224C202.5 224 224 202.5 224 176C224 149.5 202.5 128 176 128H64V224H176zM64 288V384H208C234.5 384 256 362.5 256 336C256 309.5 234.5 288 208 288H64z"/>
+    </SvgIcon>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/icons/BuySatsIcon.js b/frontend/src/components/Icons/BuySats.tsx
similarity index 100%
rename from frontend/src/components/icons/BuySatsIcon.js
rename to frontend/src/components/Icons/BuySats.tsx
diff --git a/frontend/src/components/icons/BuySatsCheckedIcon.js b/frontend/src/components/Icons/BuySatsChecked.tsx
similarity index 100%
rename from frontend/src/components/icons/BuySatsCheckedIcon.js
rename to frontend/src/components/Icons/BuySatsChecked.tsx
diff --git a/frontend/src/components/icons/EarthIcon.js b/frontend/src/components/Icons/Earth.tsx
similarity index 100%
rename from frontend/src/components/icons/EarthIcon.js
rename to frontend/src/components/Icons/Earth.tsx
diff --git a/frontend/src/components/icons/GoldIcon.js b/frontend/src/components/Icons/Gold.tsx
similarity index 100%
rename from frontend/src/components/icons/GoldIcon.js
rename to frontend/src/components/Icons/Gold.tsx
diff --git a/frontend/src/components/icons/NewTabIcon.js b/frontend/src/components/Icons/NewTab.tsx
similarity index 100%
rename from frontend/src/components/icons/NewTabIcon.js
rename to frontend/src/components/Icons/NewTab.tsx
diff --git a/frontend/src/components/icons/RoboSatsIcon.js b/frontend/src/components/Icons/RoboSats.tsx
similarity index 100%
rename from frontend/src/components/icons/RoboSatsIcon.js
rename to frontend/src/components/Icons/RoboSats.tsx
diff --git a/frontend/src/components/icons/RoboSatsNoTextIcon.js b/frontend/src/components/Icons/RoboSatsNoText.tsx
similarity index 100%
rename from frontend/src/components/icons/RoboSatsNoTextIcon.js
rename to frontend/src/components/Icons/RoboSatsNoText.tsx
diff --git a/frontend/src/components/icons/RoboSatsTextIcon.js b/frontend/src/components/Icons/RoboSatsText.tsx
similarity index 100%
rename from frontend/src/components/icons/RoboSatsTextIcon.js
rename to frontend/src/components/Icons/RoboSatsText.tsx
diff --git a/frontend/src/components/icons/SellSatsIcon.js b/frontend/src/components/Icons/SellSats.tsx
similarity index 100%
rename from frontend/src/components/icons/SellSatsIcon.js
rename to frontend/src/components/Icons/SellSats.tsx
diff --git a/frontend/src/components/icons/SellSatsCheckedIcon.js b/frontend/src/components/Icons/SellSatsChecked.tsx
similarity index 100%
rename from frontend/src/components/icons/SellSatsCheckedIcon.js
rename to frontend/src/components/Icons/SellSatsChecked.tsx
diff --git a/frontend/src/components/icons/SendReceiveIcon.js b/frontend/src/components/Icons/SendReceive.tsx
similarity index 100%
rename from frontend/src/components/icons/SendReceiveIcon.js
rename to frontend/src/components/Icons/SendReceive.tsx
diff --git a/frontend/src/components/Icons/index.ts b/frontend/src/components/Icons/index.ts
new file mode 100644
index 00000000..e63c964e
--- /dev/null
+++ b/frontend/src/components/Icons/index.ts
@@ -0,0 +1,14 @@
+export { default as AmbossIcon } from "./Amboss";
+export { default as BitcoinIcon } from "./Bitcoin";
+export { default as BitcoinSignIcon } from "./BitcoinSign";
+export { default as BuySatsIcon } from "./BuySats";
+export { default as BuySatsCheckedIcon } from "./BuySatsChecked";
+export { default as EarthIcon } from "./Earth";
+export { default as GoldIcon } from "./Gold";
+export { default as NewTabIcon } from "./NewTab";
+export { default as RoboSatsIcon } from "./RoboSats";
+export { default as RoboSatsNoTextIcon } from "./RoboSatsNoText";
+export { default as RoboSatsTextIcon } from "./RoboSatsText";
+export { default as SellSatsCheckedIcon } from "./SellSatsChecked";
+export { default as SellSatsIcon } from "./SellSats";
+export { default as SendReceiveIcon } from "./SendReceive";
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index fafdda4f..b441a2cc 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -15,10 +15,7 @@ import currencyDict from '../../static/assets/currencies.json';
 import LockIcon from '@mui/icons-material/Lock';
 import HourglassTopIcon from '@mui/icons-material/HourglassTop';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import BuySatsIcon from "./icons/BuySatsIcon";
-import BuySatsCheckedIcon from "./icons/BuySatsCheckedIcon";
-import SellSatsIcon from "./icons/SellSatsIcon";
-import SellSatsCheckedIcon from "./icons/SellSatsCheckedIcon";
+import { BuySatsCheckedIcon, BuySatsIcon, SellSatsCheckedIcon, SellSatsIcon} from "./Icons";
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index 35caf185..0498ed81 100644
--- a/frontend/src/components/OrderPage.js
+++ b/frontend/src/components/OrderPage.js
@@ -18,8 +18,8 @@ import NumbersIcon from '@mui/icons-material/Numbers';
 import PriceChangeIcon from '@mui/icons-material/PriceChange';
 import PaymentsIcon from '@mui/icons-material/Payments';
 import ArticleIcon from '@mui/icons-material/Article';
-import SendReceiveIcon from "./icons/SendReceiveIcon";
 import HourglassTopIcon from '@mui/icons-material/HourglassTop';
+import { SendReceiveIcon } from "./Icons";
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
diff --git a/frontend/src/components/TradeBox.js b/frontend/src/components/TradeBox.js
index defee69a..2e09081d 100644
--- a/frontend/src/components/TradeBox.js
+++ b/frontend/src/components/TradeBox.js
@@ -19,7 +19,7 @@ import ContentCopy from "@mui/icons-material/ContentCopy";
 import PauseCircleIcon from '@mui/icons-material/PauseCircle';
 import PlayCircleIcon from '@mui/icons-material/PlayCircle';
 import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
-import NewTabIcon from "./icons/NewTabIcon";
+import { NewTabIcon } from "./Icons";
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index ea8a5c66..4acfdd0b 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -8,8 +8,8 @@ import { InfoDialog } from './Dialogs'
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import CasinoIcon from '@mui/icons-material/Casino';
 import ContentCopy from "@mui/icons-material/ContentCopy";
-import RoboSatsNoTextIcon from "./icons/RoboSatsNoTextIcon"
 import BoltIcon from '@mui/icons-material/Bolt';
+import { RoboSatsNoTextIcon } from "./Icons";
 
 import { getCookie, writeCookie } from "../utils/cookies";