chore: bitcoin price query refactor

src/components/bitcoinInfo/BitcoinFees.ts

@@ -9,6 +9,7 @@ export const BitcoinFees = () => {
     const { setInfo } = useBitcoinInfo();
     const { loading, data } = useQuery(GET_BITCOIN_FEES, {
         onError: error => toast.error(getErrorContent(error)),
+        pollInterval: 60000,
     });
 
     useEffect(() => {

src/components/bitcoinInfo/BitcoinPrice.ts

@@ -7,14 +7,19 @@ import { getErrorContent } from '../../utils/error';
 
 export const BitcoinPrice = () => {
     const { setSettings } = useSettings();
-    const { loading, data } = useQuery(GET_BITCOIN_PRICE, {
+    const { loading, data, stopPolling } = useQuery(GET_BITCOIN_PRICE, {
         onError: error => toast.error(getErrorContent(error)),
+        pollInterval: 60000,
     });
 
     useEffect(() => {
         if (!loading && data && data.getBitcoinPrice) {
-            const { price, symbol } = data.getBitcoinPrice;
-            setSettings({ price, symbol });
+            try {
+                const prices = JSON.parse(data.getBitcoinPrice);
+                setSettings({ prices });
+            } catch (error) {
+                stopPolling();
+            }
         }
     }, [data, loading, setSettings]);
 

src/components/buttons/colorButton/ColorButton.tsx

@@ -31,12 +31,12 @@ interface BorderProps {
     borderColor?: string;
     withHover?: boolean;
     selected?: boolean;
-    withMargin?: boolean;
+    withMargin?: string;
 }
 
 const BorderButton = styled(GeneralButton)`
-    margin: ${({ withMargin }) => (withMargin ? '0 4px' : '0')}
-    ${({ selected }) => selected && `cursor: default`}
+    margin: ${({ withMargin }) => (withMargin ? withMargin : '0')};
+    ${({ selected }) => selected && `cursor: default`};
     border: none;
     background-color: ${colorButtonBackground};
     color: ${({ selected }) => (selected ? textColor : colorButtonColor)};
@@ -73,7 +73,7 @@ interface ColorButtonProps {
     arrow?: boolean;
     withHover?: boolean;
     onClick?: any;
-    withMargin?: boolean;
+    withMargin?: string;
 }
 
 const renderArrow = () => (

src/context/SettingsContext.tsx

@@ -1,51 +1,102 @@
 import React, { createContext, useState, useContext } from 'react';
 import merge from 'lodash.merge';
 
-interface ChangeProps {
-    price?: number;
-    symbol?: string;
+interface PriceProps {
+    last: number;
+    symbol: string;
+}
+interface CurrencyChangeProps {
     currency?: string;
+}
+
+interface ChangeProps {
+    prices?: { [key: string]: PriceProps };
     theme?: string;
 }
 
 interface SettingsProps {
+    prices: { [key: string]: PriceProps };
     price: number;
     symbol: string;
     currency: string;
     theme: string;
     setSettings: (newProps: ChangeProps) => void;
+    updateCurrency: (newProps: CurrencyChangeProps) => void;
 }
 
 export const SettingsContext = createContext<SettingsProps>({
+    prices: {},
     price: 0,
     symbol: '',
     currency: '',
     theme: '',
     setSettings: () => {},
+    updateCurrency: () => {},
 });
 
 const SettingsProvider = ({ children }: any) => {
     const savedTheme = localStorage.getItem('theme') || 'light';
     const savedCurrency = localStorage.getItem('currency') || 'sat';
 
-    const setSettings = ({ price, symbol, currency, theme }: ChangeProps) => {
+    const setSettings = ({ prices, theme }: ChangeProps) => {
+        let price = 0;
+        let symbol = '';
+
+        if (
+            prices &&
+            savedCurrency !== 'sat' &&
+            savedCurrency !== 'btc' &&
+            prices[savedCurrency]
+        ) {
+            price = prices[savedCurrency].last;
+            symbol = prices[savedCurrency].symbol;
+        }
+
+        updateSettings((prevState: any) => {
+            const newState = { ...prevState };
+            return merge(newState, {
+                prices,
+                ...(prices && { price, symbol }),
+                theme,
+            });
+        });
+    };
+
+    const updateCurrency = ({ currency }: CurrencyChangeProps) => {
+        const prices: { [key: string]: PriceProps } = settings.prices;
+        let price = 0;
+        let symbol = '';
+
+        if (
+            currency &&
+            settings &&
+            settings.prices &&
+            savedCurrency !== 'sat' &&
+            savedCurrency !== 'btc' &&
+            prices[currency]
+        ) {
+            price = prices[currency].last;
+            symbol = prices[currency].symbol;
+        }
+
         updateSettings((prevState: any) => {
             const newState = { ...prevState };
             return merge(newState, {
                 price,
                 symbol,
                 currency,
-                theme,
             });
         });
     };
 
     const settingsState = {
+        prices: { EUR: { last: 0, symbol: '€' } },
         price: 0,
         symbol: '',
         currency: savedCurrency,
         theme: savedTheme,
         setSettings,
+        updateCurrency,
     };
 
     const [settings, updateSettings] = useState(settingsState);

src/graphql/query.ts

@@ -168,11 +168,8 @@ export const GET_RESUME = gql`
 `;
 
 export const GET_BITCOIN_PRICE = gql`
-    query GetBitcoinPrice($currency: String) {
-        getBitcoinPrice(currency: $currency) {
-            price
-            symbol
-        }
+    query GetBitcoinPrice {
+        getBitcoinPrice
     }
 `;
 

src/helpers/Helpers.tsx

@@ -36,14 +36,14 @@ export const getValue = ({
     if (currency === 'btc') {
         const amountInBtc = value / 100000000;
         return `₿${amountInBtc}`;
-    } else if (currency === 'EUR') {
-        const amountInFiat = (value / 100000000) * price;
-        return `${symbol}${numeral(amountInFiat).format('0,0.00')}`;
-    } else {
+    } else if (currency === 'sat') {
         const breakAmount = breakNumber
             ? getValueString(value)
             : numeral(value).format('0,0');
         return `${breakAmount} sats`;
+    } else {
+        const amountInFiat = (value / 100000000) * price;
+        return `${symbol}${numeral(amountInFiat).format('0,0.00')}`;
     }
 };
 

src/sections/header/Header.tsx

@@ -48,7 +48,7 @@ export const Header = () => {
             <Wrapper>
                 <Link to="/" style={{ textDecoration: 'none' }}>
                     <SingleLine>
-                        <Cpu/>
+                        <Cpu />
                         <HeaderTitle>ThunderHub</HeaderTitle>
                     </SingleLine>
                 </Link>

src/sections/navigation/sideSettings/SideSettings.tsx

@@ -25,7 +25,7 @@ const IconRow = styled.div`
 `;
 
 export const SideSettings = () => {
-    const { theme, currency, setSettings } = useSettings();
+    const { theme, currency, updateCurrency, setSettings } = useSettings();
 
     return (
         <>
@@ -35,7 +35,7 @@ export const SideSettings = () => {
                     selected={currency === 'sat'}
                     onClick={() => {
                         localStorage.setItem('currency', 'sat');
-                        setSettings({ currency: 'sat' });
+                        updateCurrency({ currency: 'sat' });
                     }}
                 >
                     <Symbol>S</Symbol>
@@ -44,7 +44,7 @@ export const SideSettings = () => {
                     selected={currency === 'btc'}
                     onClick={() => {
                         localStorage.setItem('currency', 'btc');
-                        setSettings({ currency: 'btc' });
+                        updateCurrency({ currency: 'btc' });
                     }}
                 >
                     <Symbol>₿</Symbol>
@@ -53,11 +53,20 @@ export const SideSettings = () => {
                     selected={currency === 'EUR'}
                     onClick={() => {
                         localStorage.setItem('currency', 'EUR');
-                        setSettings({ currency: 'EUR' });
+                        updateCurrency({ currency: 'EUR' });
                     }}
                 >
                     <Symbol>€</Symbol>
                 </SelectedIcon>
+                <SelectedIcon
+                    selected={currency === 'USD'}
+                    onClick={() => {
+                        localStorage.setItem('currency', 'USD');
+                        updateCurrency({ currency: 'USD' });
+                    }}
+                >
+                    <Symbol>$</Symbol>
+                </SelectedIcon>
             </IconRow>
             <IconRow>
                 <SelectedIcon

src/views/settings/Account.tsx

@@ -91,6 +91,7 @@ export const AccountSettings = () => {
                                     selected={
                                         name.localeCompare(entry.name) === 0
                                     }
+                                    withMargin={'0 0 0 8px'}
                                     onClick={() => {
                                         localStorage.setItem(
                                             'account',

src/views/settings/Danger.tsx

@@ -10,9 +10,8 @@ import { getStorageSaved, deleteStorage } from '../../utils/storage';
 import { useAccount } from '../../context/AccountContext';
 import styled from 'styled-components';
 import { deleteAuth } from '../../utils/auth';
-import { textColor, colorButtonBorder } from '../../styles/Themes';
+import { textColor } from '../../styles/Themes';
 import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
-import { useSettings } from '../../context/SettingsContext';
 
 export const ButtonRow = styled.div`
     width: auto;
@@ -38,7 +37,6 @@ export const SettingsButton = styled(SimpleButton)`
 `;
 
 export const DangerView = () => {
-    const { theme } = useSettings();
     const { refreshAccount } = useAccount();
 
     return (
@@ -51,6 +49,7 @@ export const DangerView = () => {
                         {getStorageSaved().map((entry, index) => {
                             return (
                                 <ColorButton
+                                    withMargin={'0 0 0 8px'}
                                     color={'red'}
                                     onClick={() => {
                                         deleteAuth(entry.index);

src/views/settings/Interface.tsx

@@ -7,7 +7,7 @@ import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
 import { colorButtonBorder } from '../../styles/Themes';
 
 export const InterfaceSettings = () => {
-    const { setSettings, theme } = useSettings();
+    const { setSettings, theme, updateCurrency } = useSettings();
     const cTheme = localStorage.getItem('theme') || 'light';
     const cCurrency = localStorage.getItem('currency') || 'sat';
 
@@ -18,11 +18,13 @@ export const InterfaceSettings = () => {
         current: string,
     ) => (
         <ColorButton
+            withMargin={'0 0 0 8px'}
             color={colorButtonBorder[theme]}
             selected={current === value}
             onClick={() => {
                 localStorage.setItem(type, value);
-                setSettings({ [type]: value });
+                type === 'theme' && setSettings({ theme: value });
+                type === 'currency' && updateCurrency({ currency: value });
             }}
         >
             {title}
@@ -46,6 +48,12 @@ export const InterfaceSettings = () => {
                         {renderButton('Bitcoin', 'btc', 'currency', cCurrency)}
                         {renderButton('Satoshis', 'sat', 'currency', cCurrency)}
                         {renderButton('Euro', 'EUR', 'currency', cCurrency)}
+                        {renderButton(
+                            'US Dollar',
+                            'USD',
+                            'currency',
+                            cCurrency,
+                        )}
                     </ButtonRow>
                 </SettingsLine>
             </Card>