Page MenuHomePhabricator
Files F14864711

D15914.diff
No OneTemporary
Actions

D15914.diff
View Options

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 (
- <Option
- key={currencyMenuOption.value}
- value={currencyMenuOption.value}
- className="selectedCurrencyOption"
- >
- {currencyMenuOption.label}
- </Option>
- );
- });
-
- return (
- <Select
- className="select-after"
- style={{
- width: '100%',
- }}
- {...selectProps}
- >
- {currencyOptions}
- </Select>
- );
-};
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}
/>
- <CurrencyDropdown
+ <SendXecDropdown
data-testid="currency-select-dropdown"
value={selectValue}
onChange={e => handleSelect(e)}
@@ -354,7 +357,7 @@
<CurrencyOption data-testid="fiat-option" value={fiatCode}>
{fiatCode}
</CurrencyOption>
- </CurrencyDropdown>
+ </SendXecDropdown>
<OnMaxBtn
onClick={handleOnMax}
// Disable the onMax button if the user has fiat selected
@@ -578,3 +581,45 @@
handleFile: PropTypes.func,
imageUrl: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
};
+
+export const CurrencySelect = ({ name = 'select', value, handleSelect }) => {
+ // 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 (
+ <CurrencyOption
+ key={currencyMenuOption.value}
+ value={currencyMenuOption.value}
+ data-testid={currencyMenuOption.value}
+ >
+ {currencyMenuOption.label}
+ </CurrencyOption>
+ );
+ });
+
+ return (
+ <CurrencyDropdown
+ data-testid={name}
+ value={value}
+ onChange={handleSelect}
+ >
+ {currencyOptions}
+ </CurrencyDropdown>
+ );
+};
+
+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 @@
<h2>
<ThemedDollarOutlined /> Fiat Currency
</h2>
- <AntdFormWrapper>
- <CurrencySelectDropdown
- defaultValue={
- settings && settings.fiatCurrency
- ? settings.fiatCurrency
- : 'usd'
- }
- onChange={fiatCode => {
- updateCashtabState('settings', {
- ...settings,
- fiatCurrency: fiatCode,
- });
- }}
- />
- </AntdFormWrapper>
+ <CurrencySelect
+ name="configure-fiat-select"
+ value={cashtabState.settings.fiatCurrency}
+ handleSelect={e => {
+ updateCashtabState('settings', {
+ ...settings,
+ fiatCurrency: e.target.value,
+ });
+ }}
+ />
<StyledSpacer />
<h2>
<ThemedSettingOutlined /> 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(
+ <CashtabTestWrapper chronik={mockedChronik} route="/configure" />,
+ );
+
+ // 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',
+ );
+ });
});

File Metadata

Mime Type
text/plain
Expires
Tue, May 20, 21:47 (15 h, 42 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5865997
Default Alt Text
D15914.diff (10 KB)

Event Timeline