Multi fiat currency selection

Author: Jasonvdb

src/components/input-group/index.tsx

@@ -79,7 +79,8 @@ export default ({
 				<span className={'custom-input-label'}>{label}</span>
 				{showFiatFromSatsValue ? (
 					<span className={'custom-input-fiat-conversion'}>
-						${fiat.fiatWhole}
+						{fiat.fiatSymbol}
+						{fiat.fiatWhole}
 						<span className={'decimal'}>
 							{fiat.fiatDecimal}
 							{fiat.fiatDecimalValue}

src/components/value-group/index.tsx

@@ -33,7 +33,8 @@ export default ({
 				{showFiat ? (
 					<span className={'value-group-convert'}>
 						{' '}
-						${displayValues.fiatWhole}
+						{displayValues.fiatSymbol}
+						{displayValues.fiatWhole}
 						<span className={'decimal'}>
 							{displayValues.fiatDecimal}
 							{displayValues.fiatDecimalValue}

src/hooks/displayValues.ts

@@ -6,7 +6,11 @@ import {
 	TBitcoinUnit
 } from '../utils/exchange-rates';
 import { useAppSelector } from '../store/hooks';
-import { selectExchangeRates, selectExchangeRateState } from '../store/public-store';
+import {
+	selectCurrency,
+	selectExchangeRates,
+	selectExchangeRateState
+} from '../store/public-store';
 
 export default function useDisplayValues(sats: number): IDisplayValues {
 	const exchangeRates = useAppSelector(selectExchangeRates);
@@ -15,7 +19,7 @@ export default function useDisplayValues(sats: number): IDisplayValues {
 
 	// TODO allow these to be set
 	const bitcoinUnit: TBitcoinUnit = 'satoshi';
-	const selectedCurrency = 'USD';
+	const selectedCurrency = useAppSelector(selectCurrency);
 
 	useEffect((): void => {
 		// Exchange rates haven't loaded yet

src/pages/public/claim/index.tsx

@@ -144,7 +144,8 @@ function ClaimPage(): JSX.Element {
 						<div className={'claim-channel-title-container'}>
 							<span className={'claim-channel-title'}>Inbound capacity</span>
 							<span className={'channel-claim-fiat-conversion'}>
-								${inboundDisplay.fiatWhole}
+								{inboundDisplay.fiatSymbol}
+								{inboundDisplay.fiatWhole}
 								<span className={'decimal'}>
 									{inboundDisplay.fiatDecimal}
 									{inboundDisplay.fiatDecimalValue}
@@ -160,7 +161,8 @@ function ClaimPage(): JSX.Element {
 						<div className={'claim-channel-title-container'}>
 							<span className={'claim-channel-title'}>My balance</span>
 							<span className={'channel-claim-fiat-conversion'}>
-								${myBalanceDisplay.fiatWhole}
+								{myBalanceDisplay.fiatSymbol}
+								{myBalanceDisplay.fiatWhole}
 								<span className={'decimal'}>
 									{myBalanceDisplay.fiatDecimal}
 									{myBalanceDisplay.fiatDecimalValue}

src/pages/public/index.tsx

@@ -8,6 +8,7 @@ import PaymentPage from './payment';
 import ClaimPage from './claim';
 import TermsPage from './terms';
 import MenuPage from './menu';
+import SettingsPage from './settings';
 import ErrorPage from './error';
 import FullWebpageContainer from '../../components/full-webpage-container';
 import { useAppSelector } from '../../store/hooks';
@@ -41,6 +42,9 @@ export const Widget = (): JSX.Element => {
 		case 'terms': {
 			return <TermsPage />;
 		}
+		case 'settings': {
+			return <SettingsPage />;
+		}
 		case 'geoblocked': {
 			return <ErrorPage type={'geoblocked'} />;
 		}

src/pages/public/menu/index.tsx

@@ -44,6 +44,7 @@ function MenuPage(): JSX.Element {
 	const options: TMenuItem[] = [
 		{ title: 'New channel', page: 'configure' },
 		{ title: 'My orders', page: 'orders' },
+		{ title: 'Settings', page: 'settings' },
 		{ title: 'Support', href: supportHref() } // TODO
 	];
 

src/pages/public/settings/index.scss

@@ -0,0 +1,49 @@
+.settings-container {
+  .settings-heading {
+    color: #FF6600;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 22px;
+  }
+
+  .settings-subheading {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 21px;
+    line-height: 24px;
+    color: #FFFFFF;
+  }
+
+  .currency-box {
+    cursor: pointer;
+    background: rgba(255, 174, 0, 0.08);
+    box-sizing: border-box;
+    border-radius: 8px;
+    padding: 10px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+
+    .currency-name {
+      font-style: normal;
+      font-weight: 600;
+      font-size: 15px;
+      letter-spacing: -0.4px;
+      color: #FFFFFF;
+    }
+
+    .currency-symbol {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 34px;
+      text-align: center;
+      color: #FFFFFF;
+    }
+  }
+
+  .currency-box-active {
+    border: 1px solid #FFAE00;
+  }
+}

src/pages/public/settings/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
+import FormCard from '../../../components/form-card';
+import './index.scss';
+import { fiatDetails, supportedFiatTickers, TFiatCurrency } from '../../../utils/exchange-rates';
+import { refreshExchangeRates, selectCurrency, setCurrency } from '../../../store/public-store';
+
+function SettingsPage(): JSX.Element {
+	const dispatch = useAppDispatch();
+	const selected = useAppSelector(selectCurrency);
+
+	const onSelect = (currency: TFiatCurrency): void => {
+		dispatch(setCurrency(currency));
+		dispatch(refreshExchangeRates());
+	};
+
+	return (
+		<FormCard title={'Settings'} backPage={'configure'}>
+			<div className={'settings-container'}>
+				<h5 className={'settings-heading'}>Currency</h5>
+
+				<p className={'settings-subheading'}>Select your preferred currency</p>
+
+				{supportedFiatTickers.map((c) => {
+					const active = selected === c;
+					const name = fiatDetails[c] ? `(${fiatDetails[c].name})` : '';
+					const symbol = fiatDetails[c] ? fiatDetails[c].symbol : '';
+
+					return (
+						<div
+							key={c}
+							className={`currency-box ${active ? 'currency-box-active' : ''}`}
+							onClick={() => onSelect(c)}
+						>
+							<span className={'currency-name'}>
+								{c} {name}
+							</span>
+							<span className={'currency-symbol'}>{symbol}</span>
+						</div>
+					);
+				})}
+			</div>
+		</FormCard>
+	);
+}
+
+export default SettingsPage;

src/store/public-store.ts

@@ -6,6 +6,7 @@ import bt, {
 	IGetInfoResponse,
 	IGetOrderResponse
 } from '@synonymdev/blocktank-client';
+import { TFiatCurrency } from '../utils/exchange-rates';
 
 export type RequestState = 'idle' | 'loading' | 'error';
 
@@ -16,16 +17,23 @@ export type TPublicPage =
 	| 'claim'
 	| 'order'
 	| 'orders'
+	| 'settings'
 	| 'terms'
 	| 'geoblocked';
+
 export type TNavigationState = {
 	page: TPublicPage;
 	orderId?: string;
 	showMenu?: boolean;
 };
 
+export type TSettingsState = {
+	currency: TFiatCurrency;
+};
+
 export type TState = {
 	navigation: TNavigationState;
+	settings: TSettingsState;
 	info: {
 		state: RequestState;
 		value: IGetInfoResponse;
@@ -45,6 +53,9 @@ export const initialState: TState = {
 		page: 'configure',
 		showMenu: false
 	},
+	settings: {
+		currency: 'USD'
+	},
 	info: {
 		state: 'idle',
 		value: {
@@ -97,9 +108,12 @@ export const publicStore = createSlice({
 		setShowMenu: (state, action: PayloadAction<boolean>) => {
 			state.navigation.showMenu = action.payload;
 		},
+		setCurrency: (state, action: PayloadAction<TFiatCurrency>) => {
+			state.settings.currency = action.payload;
+		},
 		setOrderId: (state, action: PayloadAction<string>) => {
 			state.navigation.orderId = action.payload;
-		},
+		}
 	},
 	extraReducers: (builder) => {
 		builder
@@ -157,13 +171,14 @@ export const publicStore = createSlice({
 	}
 });
 
-export const { navigate, setShowMenu, setOrderId } = publicStore.actions;
+export const { navigate, setShowMenu, setCurrency, setOrderId } = publicStore.actions;
 
 // The function below is called a selector and allows us to select a value from
 // the state. Selectors can also be defined inline where they're used instead of
 // in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
 export const selectCurrentPage = (state: RootState): TPublicPage => state.bt.navigation.page;
 export const selectShowMenu = (state: RootState): boolean => !!state.bt.navigation.showMenu;
+export const selectCurrency = (state: RootState): TFiatCurrency => state.bt.settings.currency;
 export const selectCurrentOrderId = (state: RootState): string => state.bt.navigation.orderId ?? '';
 
 export const selectInfo = (state: RootState): IGetInfoResponse => state.bt.info.value;

src/utils/exchange-rates.ts

@@ -1,6 +1,13 @@
 import bitcoinUnits from 'bitcoin-units';
 
-export const supportedExchangeTickers = ['USD', 'EUR', 'JPY', 'GBP'];
+export type TFiatCurrency = 'USD' | 'EUR' | 'JPY' | 'GBP';
+export const supportedFiatTickers: TFiatCurrency[] = ['USD', 'EUR', 'JPY', 'GBP'];
+export const fiatDetails: { [key: string]: { symbol: string; name: string } } = {
+	USD: { name: 'United States Dollar', symbol: '$' },
+	EUR: { name: 'Euro', symbol: '€' },
+	JPY: { name: 'Japanese Yen', symbol: '¥' },
+	GBP: { name: 'Great British Pound', symbol: '£' }
+};
 
 export type TBitcoinUnit = 'satoshi' | 'BTC' | 'mBTC' | 'μBTC';
 
@@ -10,7 +17,7 @@ export type IDisplayValues = {
 	fiatDecimal: string; // Decimal point "." or ","
 	fiatDecimalValue: string; // Value after decimal point
 	fiatSymbol: string; // $,€,£
-	fiatTicker: string; // USD, EUR
+	fiatTicker: TFiatCurrency; // USD, EUR
 	bitcoinFormatted: string;
 	bitcoinSymbol: string; // ₿, m₿, μ₿, ⚡,
 	bitcoinTicker: string; // BTC, mBTC, μBTC, Sats
@@ -26,7 +33,7 @@ export const defaultDisplayValues: IDisplayValues = {
 	fiatDecimal: '',
 	fiatDecimalValue: '',
 	fiatSymbol: '',
-	fiatTicker: '',
+	fiatTicker: 'USD',
 	bitcoinFormatted: '-',
 	bitcoinSymbol: '',
 	bitcoinTicker: '',
@@ -49,7 +56,7 @@ export const getDisplayValues = ({
 }: {
 	satoshis: number;
 	exchangeRate?: number;
-	currency: string;
+	currency: TFiatCurrency;
 	bitcoinUnit: TBitcoinUnit;
 	locale?: string;
 }): IDisplayValues => {