Convert Icons to ts, add Bitcoin Icons

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) {

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/>

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}

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;

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>

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>
+  );
+}

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>
+  );
+}

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";

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";

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";

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";

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";