diff --git a/cashtab/package-lock.json b/cashtab/package-lock.json --- a/cashtab/package-lock.json +++ b/cashtab/package-lock.json @@ -1,12 +1,12 @@ { "name": "cashtab", - "version": "2.23.4", + "version": "2.23.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cashtab", - "version": "2.23.4", + "version": "2.23.5", "dependencies": { "@ant-design/icons": "^5.3.0", "@bitgo/utxo-lib": "^9.33.0", diff --git a/cashtab/package.json b/cashtab/package.json --- a/cashtab/package.json +++ b/cashtab/package.json @@ -1,6 +1,6 @@ { "name": "cashtab", - "version": "2.23.4", + "version": "2.23.5", "private": true, "scripts": { "start": "node scripts/start.js", diff --git a/cashtab/src/components/Common/EnhancedInputs.js b/cashtab/src/components/Common/EnhancedInputs.js --- a/cashtab/src/components/Common/EnhancedInputs.js +++ b/cashtab/src/components/Common/EnhancedInputs.js @@ -4,13 +4,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { Form, Input, Select, Checkbox } from 'antd'; +import { Form, Input, Checkbox } from 'antd'; import { ThemedWalletOutlined, ThemedAliasOutlined, } from 'components/Common/CustomIcons'; import styled, { css } from 'styled-components'; -import { supportedFiatCurrencies } from 'config/cashtabSettings'; export const AntdFormCss = css` input[type='number'] { @@ -167,43 +166,3 @@ AliasAddressInput.propTypes = { inputProps: PropTypes.object, }; - -export const CurrencySelectDropdown = selectProps => { - const { Option } = Select; - - // Build select dropdown from supportedFiatCurrencies - const currencyMenuOptions = []; - const currencyKeys = Object.keys(supportedFiatCurrencies); - for (let i = 0; i < currencyKeys.length; i += 1) { - const currencyMenuOption = {}; - currencyMenuOption.value = - supportedFiatCurrencies[currencyKeys[i]].slug; - currencyMenuOption.label = `${ - supportedFiatCurrencies[currencyKeys[i]].name - } (${supportedFiatCurrencies[currencyKeys[i]].symbol})`; - currencyMenuOptions.push(currencyMenuOption); - } - const currencyOptions = currencyMenuOptions.map(currencyMenuOption => { - return ( - - ); - }); - - return ( - - ); -}; diff --git a/cashtab/src/components/Common/Inputs.js b/cashtab/src/components/Common/Inputs.js --- a/cashtab/src/components/Common/Inputs.js +++ b/cashtab/src/components/Common/Inputs.js @@ -7,6 +7,7 @@ import styled from 'styled-components'; import ScanQRCode from './ScanQRCode'; import appConfig from 'config/app'; +import { supportedFiatCurrencies } from 'config/cashtabSettings'; const CashtabInputWrapper = styled.div` box-sizing: border-box; @@ -107,7 +108,6 @@ `; const CurrencyDropdown = styled.select` - width: 100px; cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')}; font-size: 18px; padding: 6px; @@ -119,6 +119,9 @@ outline: none; } `; +const SendXecDropdown = styled(CurrencyDropdown)` + width: 100px; +`; const CurrencyOption = styled.option` text-align: left; background-color: ${props => props.theme.forms.selectionBackground}; @@ -342,7 +345,7 @@ onChange={e => handleInput(e)} disabled={inputDisabled} /> - handleSelect(e)} @@ -354,7 +357,7 @@ {fiatCode} - + { + // Build select dropdown from supportedFiatCurrencies + const currencyMenuOptions = []; + const currencyKeys = Object.keys(supportedFiatCurrencies); + for (let i = 0; i < currencyKeys.length; i += 1) { + const currencyMenuOption = {}; + currencyMenuOption.value = + supportedFiatCurrencies[currencyKeys[i]].slug; + currencyMenuOption.label = `${ + supportedFiatCurrencies[currencyKeys[i]].name + } (${supportedFiatCurrencies[currencyKeys[i]].symbol})`; + currencyMenuOptions.push(currencyMenuOption); + } + const currencyOptions = currencyMenuOptions.map(currencyMenuOption => { + return ( + + {currencyMenuOption.label} + + ); + }); + + return ( + + {currencyOptions} + + ); +}; + +CurrencySelect.propTypes = { + name: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, + handleSelect: PropTypes.func.isRequired, +}; diff --git a/cashtab/src/components/Configure/Configure.js b/cashtab/src/components/Configure/Configure.js --- a/cashtab/src/components/Configure/Configure.js +++ b/cashtab/src/components/Configure/Configure.js @@ -9,10 +9,7 @@ import { LockFilled } from '@ant-design/icons'; import { WalletContext } from 'wallet/context'; import { StyledCollapse } from 'components/Common/StyledCollapse'; -import { - AntdFormWrapper, - CurrencySelectDropdown, -} from 'components/Common/EnhancedInputs'; +import { AntdFormWrapper } from 'components/Common/EnhancedInputs'; import PrimaryButton, { SecondaryButton, } from 'components/Common/PrimaryButton'; @@ -45,7 +42,12 @@ } from 'wallet'; import CustomModal from 'components/Common/Modal'; import { toast } from 'react-toastify'; -import { Input, ModalInput, InputFlex } from 'components/Common/Inputs'; +import { + Input, + ModalInput, + InputFlex, + CurrencySelect, +} from 'components/Common/Inputs'; import Switch from 'components/Common/Switch'; import { Info } from 'components/Common/Atoms'; @@ -872,21 +874,16 @@

Fiat Currency

- - { - updateCashtabState('settings', { - ...settings, - fiatCurrency: fiatCode, - }); - }} - /> - + { + updateCashtabState('settings', { + ...settings, + fiatCurrency: e.target.value, + }); + }} + />

General Settings diff --git a/cashtab/src/components/Configure/__tests__/Configure.test.js b/cashtab/src/components/Configure/__tests__/Configure.test.js --- a/cashtab/src/components/Configure/__tests__/Configure.test.js +++ b/cashtab/src/components/Configure/__tests__/Configure.test.js @@ -87,6 +87,21 @@ .mockResolvedValue({ json: () => Promise.resolve(priceResponse), }); + // Mock another price URL for a user that changes fiat currency + const altFiat = 'gbp'; + const altFiatPriceApiUrl = `https://api.coingecko.com/api/v3/simple/price?ids=${cryptoId}&vs_currencies=${altFiat}&include_last_updated_at=true`; + const xecPriceAltFiat = 0.00002; + const altFiatPriceResponse = { + ecash: { + [altFiat]: xecPriceAltFiat, + last_updated_at: 1706644626, + }, + }; + when(fetch) + .calledWith(altFiatPriceApiUrl) + .mockResolvedValue({ + json: () => Promise.resolve(altFiatPriceResponse), + }); }); afterEach(async () => { jest.clearAllMocks(); @@ -479,4 +494,34 @@ ), ).toBeInTheDocument(); }); + it('We can choose a new fiat currency', async () => { + const mockedChronik = await initializeCashtabStateForTests( + walletWithXecAndTokens, + localforage, + ); + render( + , + ); + + // Wait for wallet to load + await waitFor(() => + expect(screen.queryByTestId('loading-ctn')).not.toBeInTheDocument(), + ); + + // Choose GBP + await user.selectOptions( + screen.getByTestId('configure-fiat-select'), + screen.getByTestId('gbp'), + ); + + // We expect balance header to be updated + expect(screen.getByTestId('ecash-price')).toHaveTextContent( + `1 XEC = 0.00002000 GBP`, + ); + + // We expect localforage to be updated + expect((await localforage.getItem('settings')).fiatCurrency).toEqual( + 'gbp', + ); + }); });