Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ref/settings list 02 #417

Merged
merged 2 commits into from
Oct 12, 2022
+90 −40
Merged

Ref/settings list 02 #417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1caf0b1
Ref: add selected values for language and currency
cmgustavo Sep 20, 2022
402e743
Ref: hide advanced info. Click on it to show
cmgustavo Sep 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 57 additions & 37 deletions src/navigation/tabs/settings/components/Crypto.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {SettingsComponent} from '../SettingsRoot';
import React from 'react';
import React, {useState} from 'react';
import {
InfoTriangle,
Info,
Expand Down Expand Up @@ -30,6 +30,10 @@ const Crypto = () => {
const enableReplaceByFee = useAppSelector(
({WALLET}) => WALLET.enableReplaceByFee,
);
const [showInfoUnconfirmed, setShowInfoUnconfirmed] = useState(false);
const [showInfoCustomizeEth, setShowInfoCustomizeEth] = useState(false);
const [showInfoEthQueued, setShowInfoEthQueued] = useState(false);
const [showInfoEnableRbf, setShowInfoEnableRbf] = useState(false);
const navigation = useNavigation();

return (
Expand All @@ -46,7 +50,9 @@ const Crypto = () => {
<AngleRight />
</Setting>
<Hr />
<Setting activeOpacity={1}>
<Setting
activeOpacity={1}
onPress={() => setShowInfoUnconfirmed(!showInfoUnconfirmed)}>
<SettingTitle>{t('Use Unconfirmed Funds')}</SettingTitle>
<ToggleSwitch
onChange={value => {
Expand All @@ -60,16 +66,20 @@ const Crypto = () => {
isEnabled={useUnconfirmedFunds}
/>
</Setting>
<Info>
<InfoTriangle />
<InfoDescription>
{t(
'If enabled, wallets will also try to spend unconfirmed funds. However, unconfirmed funds are not allowed for spending with merchants, BitPay Card loads, or BitPay in-app gift card purchases.',
)}
</InfoDescription>
</Info>
{showInfoUnconfirmed ? (
<Info>
<InfoTriangle />
<InfoDescription>
{t(
'If enabled, wallets will also try to spend unconfirmed funds. However, unconfirmed funds are not allowed for spending with merchants, BitPay Card loads, or BitPay in-app gift card purchases.',
)}
</InfoDescription>
</Info>
) : null}
<Hr />
<Setting activeOpacity={1}>
<Setting
activeOpacity={1}
onPress={() => setShowInfoCustomizeEth(!showInfoCustomizeEth)}>
<SettingTitle>{t('Customize ETH Nonce')}</SettingTitle>
<ToggleSwitch
onChange={value => {
Expand All @@ -83,16 +93,20 @@ const Crypto = () => {
isEnabled={customizeNonce}
/>
</Setting>
<Info>
<InfoTriangle />
<InfoDescription>
{t(
'If enabled, the transaction nonce could be changed on the confirm view. This is an advanced feature, use cautiously.',
)}
</InfoDescription>
</Info>
{showInfoCustomizeEth ? (
<Info>
<InfoTriangle />
<InfoDescription>
{t(
'If enabled, the transaction nonce could be changed on the confirm view. This is an advanced feature, use cautiously.',
)}
</InfoDescription>
</Info>
) : null}
<Hr />
<Setting activeOpacity={1}>
<Setting
activeOpacity={1}
onPress={() => setShowInfoEthQueued(!showInfoEthQueued)}>
<SettingTitle>{t('ETH Queued transactions')}</SettingTitle>
<ToggleSwitch
onChange={value =>
Expand All @@ -101,16 +115,20 @@ const Crypto = () => {
isEnabled={queuedTransactions}
/>
</Setting>
<Info>
<InfoTriangle />
<InfoDescription>
{t(
'If enabled, your eth transactions will be queued if there is a pending transaction with a lower account nonce. This is an advanced feature, use cautiously.',
)}
</InfoDescription>
</Info>
{showInfoEthQueued ? (
<Info>
<InfoTriangle />
<InfoDescription>
{t(
'If enabled, your eth transactions will be queued if there is a pending transaction with a lower account nonce. This is an advanced feature, use cautiously.',
)}
</InfoDescription>
</Info>
) : null}
<Hr />
<Setting activeOpacity={1}>
<Setting
activeOpacity={1}
onPress={() => setShowInfoEnableRbf(!showInfoEnableRbf)}>
<SettingTitle>{t('Enable BTC Replace-By-Fee')}</SettingTitle>
<ToggleSwitch
onChange={value => {
Expand All @@ -124,14 +142,16 @@ const Crypto = () => {
isEnabled={enableReplaceByFee}
/>
</Setting>
<Info>
<InfoTriangle />
<InfoDescription>
{t(
'If enabled, your transactions will be marked as non-final, and you will have the possibility, while they are unconfirmed, to replace them with transactions that pay higher fees. Note that some merchants do not accept non-final transactions until they are confirmed.',
)}
</InfoDescription>
</Info>
{showInfoEnableRbf ? (
<Info>
<InfoTriangle />
<InfoDescription>
{t(
'If enabled, your transactions will be marked as non-final, and you will have the possibility, while they are unconfirmed, to replace them with transactions that pay higher fees. Note that some merchants do not accept non-final transactions until they are confirmed.',
)}
</InfoDescription>
</Info>
) : null}
</SettingsComponent>
);
};
Expand Down
36 changes: 33 additions & 3 deletions src/navigation/tabs/settings/components/General.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, {useEffect, useState} from 'react';
import Button from '../../../../components/button/Button';
import AngleRight from '../../../../../assets/img/angle-right.svg';
import ToggleSwitch from '../../../../components/toggle-switch/ToggleSwitch';
Expand All @@ -12,6 +12,7 @@ import {RootState} from '../../../../store';
import {useAppDispatch} from '../../../../utils/hooks/useAppDispatch';
import {useTranslation} from 'react-i18next';
import {SettingsComponent} from '../SettingsRoot';
import {LanguageList} from '../../../../constants/LanguageSelectionList';
import {
ActiveOpacity,
Hr,
Expand All @@ -24,10 +25,23 @@ const General = () => {
const showPortfolioValue = useAppSelector(
({APP}: RootState) => APP.showPortfolioValue,
);
const selectedAltCurrency = useAppSelector(
({APP}: RootState) => APP.defaultAltCurrency,
);
const appLanguage = useAppSelector(({APP}) => APP.defaultLanguage);
const [appLanguageName, setAppLanguageName] = useState('');

const dispatch = useAppDispatch();
const {t} = useTranslation();

useEffect(() => {
LanguageList.forEach(lng => {
if (lng.isoCode === appLanguage) {
setAppLanguageName(lng.name);
}
});
}, [appLanguage]);

return (
<SettingsComponent>
<Setting
Expand Down Expand Up @@ -77,7 +91,15 @@ const General = () => {
})
}>
<SettingTitle>{t('Display Currency')}</SettingTitle>
<AngleRight />
<Button
buttonType={'pill'}
onPress={() =>
navigation.navigate('GeneralSettings', {
screen: 'AltCurrencySettings',
})
}>
{selectedAltCurrency.name}
</Button>
</Setting>
<Hr />
{/*----------------------------------------------------------------------*/}
Expand All @@ -87,7 +109,15 @@ const General = () => {
navigation.navigate('GeneralSettings', {screen: 'LanguageSettings'})
}>
<SettingTitle>{t('Language')}</SettingTitle>
<AngleRight />
<Button
buttonType={'pill'}
onPress={() =>
navigation.navigate('GeneralSettings', {
screen: 'LanguageSettings',
})
}>
{appLanguageName}
</Button>
</Setting>
<Hr />
{/*----------------------------------------------------------------------*/}
Expand Down