diff --git a/assets/images/SVG/Caret Right.svg b/assets/images/SVG/Caret Right.svg
index b094f997c..474823fc7 100644
--- a/assets/images/SVG/Caret Right.svg
+++ b/assets/images/SVG/Caret Right.svg
@@ -1,3 +1 @@
-
+
\ No newline at end of file
diff --git a/views/PaymentRequest.tsx b/views/PaymentRequest.tsx
index 429b419bc..4db45d45d 100644
--- a/views/PaymentRequest.tsx
+++ b/views/PaymentRequest.tsx
@@ -5,31 +5,35 @@ import {
ScrollView,
StyleSheet,
Text,
- View
+ View,
+ TouchableOpacity
} from 'react-native';
import { inject, observer } from 'mobx-react';
import { Header, Icon } from 'react-native-elements';
-import Amount from './../components/Amount';
-import Button from './../components/Button';
-import HopPicker from './../components/HopPicker';
-import KeyValue from './../components/KeyValue';
-import LoadingIndicator from './../components/LoadingIndicator';
-import Switch from './../components/Switch';
-import TextInput from './../components/TextInput';
-
-import InvoicesStore from './../stores/InvoicesStore';
-import TransactionsStore, {
- SendPaymentReq
-} from './../stores/TransactionsStore';
-import UnitsStore from './../stores/UnitsStore';
-import ChannelsStore from './../stores/ChannelsStore';
-import SettingsStore from './../stores/SettingsStore';
-
-import FeeUtils from './../utils/FeeUtils';
-import { localeString } from './../utils/LocaleUtils';
-import BackendUtils from './../utils/BackendUtils';
-import { themeColor } from './../utils/ThemeUtils';
+import Amount from '../components/Amount';
+import Button from '../components/Button';
+import HopPicker from '../components/HopPicker';
+import KeyValue from '../components/KeyValue';
+import LoadingIndicator from '../components/LoadingIndicator';
+import Switch from '../components/Switch';
+import TextInput from '../components/TextInput';
+
+import InvoicesStore from '../stores/InvoicesStore';
+import TransactionsStore, { SendPaymentReq } from '../stores/TransactionsStore';
+import UnitsStore from '../stores/UnitsStore';
+import ChannelsStore from '../stores/ChannelsStore';
+import SettingsStore from '../stores/SettingsStore';
+
+import FeeUtils from '../utils/FeeUtils';
+import { localeString } from '../utils/LocaleUtils';
+import BackendUtils from '../utils/BackendUtils';
+import { themeColor } from '../utils/ThemeUtils';
+
+import { Row } from '../components/layout/Row';
+
+import CaretDown from '../assets/images/SVG/Caret Down.svg';
+import CaretRight from '../assets/images/SVG/Caret Right.svg';
interface InvoiceProps {
exitSetup: any;
@@ -52,6 +56,7 @@ interface InvoiceState {
maxFeePercent: string;
outgoingChanId: string | null;
lastHopPubkey: string | null;
+ settingsToggle: boolean;
}
@inject(
@@ -77,7 +82,8 @@ export default class PaymentRequest extends React.Component<
feeOption: 'fixed',
maxFeePercent: '0.5',
outgoingChanId: null,
- lastHopPubkey: null
+ lastHopPubkey: null,
+ settingsToggle: false
};
async UNSAFE_componentWillMount() {
@@ -211,7 +217,8 @@ export default class PaymentRequest extends React.Component<
maxFeePercent,
outgoingChanId,
lastHopPubkey,
- customAmount
+ customAmount,
+ settingsToggle
} = this.state;
const {
pay_req,
@@ -446,328 +453,406 @@ export default class PaymentRequest extends React.Component<
/>
)}
- {isLnd && (
- <>
-
- {`${localeString(
- 'views.PaymentRequest.feeLimit'
- )} (${localeString(
- 'general.optional'
- )})`}
-
- {this.displayFeeRecommendation()}
-
-
-
-
-
+ {(isLnd || isCLightning) && (
+ {
+ this.setState({
+ settingsToggle: !settingsToggle
+ });
+ }}
+ >
-
- this.setState({
- feeLimitSat: text
- })
- }
- onPressIn={() =>
- this.setState({
- feeOption: 'fixed'
- })
- }
- />
-
- {`${localeString('general.sats')}`}
-
-
- this.setState({
- maxFeePercent: text
- })
- }
- onPressIn={() =>
- this.setState({
- feeOption: 'percent'
- })
- }
- />
-
- {'%'}
-
+
+
+
+
+ {settingsToggle ? (
+
+ ) : (
+
+ )}
+
-
+
)}
- {isCLightning && (
+ {settingsToggle && (
<>
-
- {`${localeString(
- 'views.PaymentRequest.feeLimit'
- )} (${localeString(
- 'general.percentage'
- )})`}
-
-
- this.setState({
- maxFeePercent: text
- })
- }
- />
-
- )}
-
- {!!pay_req && BackendUtils.supportsHopPicking() && (
- <>
- {
-
- this.setState({
- outgoingChanId: item
- ? item.channelId
- : null
- })
- }
- title={localeString(
- 'views.PaymentRequest.firstHop'
- )}
- ChannelsStore={ChannelsStore}
- UnitsStore={UnitsStore}
- />
- }
- {
-
- this.setState({
- lastHopPubkey: item
- ? item.remote_pubkey
- : null
- })
- }
- title={localeString(
- 'views.PaymentRequest.lastHop'
- )}
- ChannelsStore={ChannelsStore}
- UnitsStore={UnitsStore}
- />
- }
-
- )}
+ {isLnd && (
+ <>
+
+ {`${localeString(
+ 'views.PaymentRequest.feeLimit'
+ )} (${localeString(
+ 'general.optional'
+ )})`}
+
+ {this.displayFeeRecommendation()}
+
+
+
+
+
+
+
+ this.setState({
+ feeLimitSat: text
+ })
+ }
+ onPressIn={() =>
+ this.setState({
+ feeOption: 'fixed'
+ })
+ }
+ />
+
+ {`${localeString(
+ 'general.sats'
+ )}`}
+
+
+ this.setState({
+ maxFeePercent: text
+ })
+ }
+ onPressIn={() =>
+ this.setState({
+ feeOption: 'percent'
+ })
+ }
+ />
+
+ {'%'}
+
+
+
+ )}
- {!!pay_req &&
- BackendUtils.supportsMPP() &&
- !enableTor && (
-
-
- {localeString(
- 'views.PaymentRequest.mpp'
- )}
-
-
- {
- const enable =
- !enableMultiPathPayment;
- this.setState({
- enableMultiPathPayment:
- enable,
- enableAtomicMultiPathPayment:
- enableMultiPathPayment
- ? false
- : true
- });
+ {isCLightning && (
+ <>
+
+ {`${localeString(
+ 'views.PaymentRequest.feeLimit'
+ )} (${localeString(
+ 'general.percentage'
+ )})`}
+
+
+ this.setState({
+ maxFeePercent: text
+ })
+ }
/>
-
-
- )}
+
+ )}
- {!!pay_req && BackendUtils.supportsAMP() && (
-
-
- {localeString(
- 'views.PaymentRequest.amp'
+ {!!pay_req &&
+ BackendUtils.supportsHopPicking() && (
+ <>
+ {
+
+ this.setState({
+ outgoingChanId:
+ item
+ ? item.channelId
+ : null
+ })
+ }
+ title={localeString(
+ 'views.PaymentRequest.firstHop'
+ )}
+ ChannelsStore={
+ ChannelsStore
+ }
+ UnitsStore={UnitsStore}
+ />
+ }
+ {
+
+ this.setState({
+ lastHopPubkey:
+ item
+ ? item.remote_pubkey
+ : null
+ })
+ }
+ title={localeString(
+ 'views.PaymentRequest.lastHop'
+ )}
+ ChannelsStore={
+ ChannelsStore
+ }
+ UnitsStore={UnitsStore}
+ />
+ }
+
)}
-
-
- {
- const enable =
- !enableAtomicMultiPathPayment;
- this.setState({
- enableAtomicMultiPathPayment:
- enable,
- enableMultiPathPayment:
- enable ||
- enableMultiPathPayment
- });
- }}
- disabled={
- lockAtomicMultiPathPayment
- }
- />
-
-
- )}
- {ampOrMppEnabled && (
-
-
- {localeString(
- 'views.PaymentRequest.maxParts'
- )}
-
-
- this.setState({
- maxParts: text
- })
- }
- />
-
- {localeString(
- 'views.PaymentRequest.maxPartsDescription'
+ {!!pay_req &&
+ BackendUtils.supportsMPP() &&
+ !enableTor && (
+
+
+ {localeString(
+ 'views.PaymentRequest.mpp'
+ )}
+
+
+ {
+ const enable =
+ !enableMultiPathPayment;
+ this.setState({
+ enableMultiPathPayment:
+ enable,
+ enableAtomicMultiPathPayment:
+ enableMultiPathPayment
+ ? false
+ : true
+ });
+ }}
+ />
+
+
)}
-
-
- )}
- {ampOrMppEnabled && (
-
-
- {`${localeString(
- 'views.PaymentRequest.maxShardAmt'
- )} (${localeString(
- 'general.sats'
- )}) (${localeString(
- 'general.optional'
- )})`}
-
-
- this.setState({
- maxShardAmt: text
- })
- }
- />
-
+ {!!pay_req && BackendUtils.supportsAMP() && (
+
+
+ {localeString(
+ 'views.PaymentRequest.amp'
+ )}
+
+
+ {
+ const enable =
+ !enableAtomicMultiPathPayment;
+ this.setState({
+ enableAtomicMultiPathPayment:
+ enable,
+ enableMultiPathPayment:
+ enable ||
+ enableMultiPathPayment
+ });
+ }}
+ disabled={
+ lockAtomicMultiPathPayment
+ }
+ />
+
+
+ )}
+
+ {ampOrMppEnabled && (
+
+
+ {localeString(
+ 'views.PaymentRequest.maxParts'
+ )}
+
+
+ this.setState({
+ maxParts: text
+ })
+ }
+ />
+
+ {localeString(
+ 'views.PaymentRequest.maxPartsDescription'
+ )}
+
+
+ )}
+
+ {ampOrMppEnabled && (
+
+
+ {`${localeString(
+ 'views.PaymentRequest.maxShardAmt'
+ )} (${localeString(
+ 'general.sats'
+ )}) (${localeString(
+ 'general.optional'
+ )})`}
+
+
+ this.setState({
+ maxShardAmt: text
+ })
+ }
+ />
+
+ )}
+
)}
{!!pay_req && (