From 0009626f5fa8fb7a821e32f95a230d2dffa28ac5 Mon Sep 17 00:00:00 2001 From: myxmaster Date: Thu, 12 Dec 2024 03:25:54 +0100 Subject: [PATCH] - use constructor in Receive.tsx to immediately render with correct selectedIndex - for on-chain->receive: replace ClearButton with SettingsButton and do not render LN invoice items addressType modalBox: - use ScrollView - do nothing if same address type as before is picked (also in InvoiceSettings.tsx) - Receive.tsx: autoGenerateOnChainAddress if new address type is picked --- views/Receive.tsx | 1517 ++++++++++++++------------- views/Settings/InvoicesSettings.tsx | 124 ++- 2 files changed, 855 insertions(+), 786 deletions(-) diff --git a/views/Receive.tsx b/views/Receive.tsx index 8e88e6c6e..9c9b180eb 100644 --- a/views/Receive.tsx +++ b/views/Receive.tsx @@ -176,41 +176,45 @@ export default class Receive extends React.Component< ReceiveProps, ReceiveState > { + constructor(props: ReceiveProps) { + super(props); + this.state = { + selectedIndex: props.route.params?.selectedIndex ?? 0, + expirationIndex: 1, + addressType: '0', + memo: '', + value: '', + satAmount: '', + expiry: '3600', + timePeriod: 'Seconds', + expirySeconds: '3600', + customPreimage: '', + ampInvoice: false, + routeHints: false, + account: 'default', + blindedPaths: false, + nfcSupported: false, + // POS + orderId: '', + orderTip: '', + orderTotal: '', + exchangeRate: '', + rate: 0, + // LSP + needInbound: false, + enableLSP: true, + lspIsActive: false, + lspNotConfigured: true, + routeHintMode: RouteHintMode.Automatic, + selectedRouteHintChannels: undefined + }; + } + listener: any; listenerSecondary: any; lnInterval: any; onChainInterval: any; hopPickerRef: HopPicker | null; - state: ReceiveState = { - selectedIndex: 0, - expirationIndex: 1, - addressType: '0', - memo: '', - value: '', - satAmount: '', - expiry: '3600', - timePeriod: 'Seconds', - expirySeconds: '3600', - customPreimage: '', - ampInvoice: false, - routeHints: false, - account: 'default', - blindedPaths: false, - nfcSupported: false, - // POS - orderId: '', - orderTip: '', - orderTotal: '', - exchangeRate: '', - rate: 0, - // LSP - needInbound: false, - enableLSP: true, - lspIsActive: false, - lspNotConfigured: true, - routeHintMode: RouteHintMode.Automatic, - selectedRouteHintChannels: undefined - }; async UNSAFE_componentWillMount() { const { @@ -263,12 +267,13 @@ export default class Receive extends React.Component< (settings?.invoices?.blindedPaths && BackendUtils.supportsBolt11BlindedRoutes()) || false, - enableLSP: settings?.enableLSP, + enableLSP: settings?.enableLSP || true, lspIsActive: - settings?.enableLSP && - BackendUtils.supportsLSPs() && - !lspNotConfigured, - lspNotConfigured + (settings?.enableLSP && + BackendUtils.supportsLSPs() && + !lspNotConfigured) || + false, + lspNotConfigured: lspNotConfigured || true }); const lnOnly = @@ -1507,7 +1512,8 @@ export default class Receive extends React.Component< loading || watchedInvoicePaid || posStatus === 'active' || - hideRightHeaderComponent ? null : haveInvoice ? ( + hideRightHeaderComponent ? null : haveInvoice && + selectedIndex !== 2 ? ( ) : ( BackendUtils.supportsAddressTypeSelection() && @@ -2049,386 +2055,273 @@ export default class Receive extends React.Component< )} )} - {!loading && !haveInvoice && !creatingInvoice && ( - <> - {BackendUtils.supportsLSPs() && - !lspNotConfigured && ( + {!loading && + !haveInvoice && + !creatingInvoice && + selectedIndex !== 2 && ( + <> + {BackendUtils.supportsLSPs() && + !lspNotConfigured && ( + <> + + navigation.navigate( + 'LspExplanationOverview' + ) + } + ]} + > + {localeString( + 'views.Settings.LSP.enableLSP' + )} + + { + this.setState({ + enableLSP: + !enableLSP, + lspIsActive: + !enableLSP && + BackendUtils.supportsLSPs() && + !lspNotConfigured + }); + await updateSettings( + { + enableLSP: + !enableLSP + } + ); + }} + /> + + )} + + {(!enableLSP || + lspNotConfigured) && ( <> - navigation.navigate( - 'LspExplanationOverview' - ) - } - ]} + }} > {localeString( - 'views.Settings.LSP.enableLSP' + 'views.Receive.memo' )} - { + { this.setState({ - enableLSP: - !enableLSP, - lspIsActive: - !enableLSP && - BackendUtils.supportsLSPs() && - !lspNotConfigured + memo: text }); - await updateSettings( - { - enableLSP: - !enableLSP - } - ); + clearUnified(); }} /> )} - {(!enableLSP || lspNotConfigured) && ( - <> - { + let needInbound = false; + if ( + lspIsActive && + satAmount != '0' && + new BigNumber( + satAmount + ).gt( + this.props + .ChannelsStore + .totalInbound ) - }} - > - {localeString( - 'views.Receive.memo' - )} - - { - this.setState({ - memo: text - }); - clearUnified(); - }} - /> - - )} + ) { + needInbound = true; + } + this.setState({ + value: amount, + satAmount, + needInbound + }); + }} + /> - { - let needInbound = false; - if ( - lspIsActive && - satAmount != '0' && - new BigNumber(satAmount).gt( - this.props.ChannelsStore - .totalInbound - ) - ) { - needInbound = true; - } - this.setState({ - value: amount, - satAmount, - needInbound - }); - }} - /> - - {needInbound && ( - - navigation.navigate( - 'LspExplanationFees' - ) - } - > - + navigation.navigate( + 'LspExplanationFees' + ) + } > - - {this.props - .ChannelsStore - .channels.length === - 0 - ? localeString( - 'views.Wallet.KeypadPane.lspExplainerFirstChannel' - ) - : localeString( - 'views.Wallet.KeypadPane.lspExplainer' - )} - + + {this.props + .ChannelsStore + .channels + .length === 0 + ? localeString( + 'views.Wallet.KeypadPane.lspExplainerFirstChannel' + ) + : localeString( + 'views.Wallet.KeypadPane.lspExplainer' + )} + + + {localeString( + 'general.tapToLearnMore' + )} + + + + )} + + {implementation !== 'lndhub' && ( + <> {localeString( - 'general.tapToLearnMore' + 'views.Receive.expiration' )} - - - )} - - {implementation !== 'lndhub' && ( - <> - - {localeString( - 'views.Receive.expiration' - )} - - - { - let expirySeconds = - '3600'; - if ( - timePeriod === - 'Seconds' - ) { - expirySeconds = - text; - } else if ( - timePeriod === - 'Minutes' - ) { - expirySeconds = - new BigNumber( - text - ) - .multipliedBy( - 60 - ) - .toString(); - } else if ( - timePeriod === - 'Hours' - ) { - expirySeconds = - new BigNumber( - text - ) - .multipliedBy( - 60 * - 60 - ) - .toString(); - } else if ( - timePeriod === - 'Days' - ) { - expirySeconds = - new BigNumber( - text - ) - .multipliedBy( - 60 * - 60 * - 24 - ) - .toString(); - } else if ( - timePeriod === - 'Weeks' - ) { - expirySeconds = - new BigNumber( - text - ) - .multipliedBy( - 60 * - 60 * - 24 * - 7 - ) - .toString(); - } - - if ( - expirySeconds == - '600' - ) { - this.setState({ - expiry: text, - expirySeconds, - expirationIndex: 0 - }); - } else if ( - expirySeconds == - '3600' - ) { - this.setState({ - expiry: text, - expirySeconds, - expirationIndex: 1 - }); - } else if ( - expirySeconds == - '86400' - ) { - this.setState({ - expiry: text, - expirySeconds, - expirationIndex: 2 - }); - } else if ( - expirySeconds == - '604800' - ) { - this.setState({ - expiry: text, - expirySeconds, - expirationIndex: 3 - }); - } else { - this.setState({ - expiry: text, - expirySeconds, - expirationIndex: 5 - }); - } - }} - /> - - { let expirySeconds = '3600'; if ( - value === + timePeriod === 'Seconds' ) { expirySeconds = - expiry; + text; } else if ( - value === + timePeriod === 'Minutes' ) { expirySeconds = new BigNumber( - expiry + text ) .multipliedBy( 60 ) .toString(); } else if ( - value === + timePeriod === 'Hours' ) { expirySeconds = new BigNumber( - expiry + text ) .multipliedBy( 60 * @@ -2436,12 +2329,12 @@ export default class Receive extends React.Component< ) .toString(); } else if ( - value === + timePeriod === 'Days' ) { expirySeconds = new BigNumber( - expiry + text ) .multipliedBy( 60 * @@ -2450,12 +2343,12 @@ export default class Receive extends React.Component< ) .toString(); } else if ( - value === + timePeriod === 'Weeks' ) { expirySeconds = new BigNumber( - expiry + text ) .multipliedBy( 60 * @@ -2466,166 +2359,190 @@ export default class Receive extends React.Component< .toString(); } - let expirationIndex; if ( - expirySeconds === + expirySeconds == '600' ) { - expirationIndex = 0; + this.setState( + { + expiry: text, + expirySeconds, + expirationIndex: 0 + } + ); } else if ( - expirySeconds === + expirySeconds == '3600' ) { - expirationIndex = 1; + this.setState( + { + expiry: text, + expirySeconds, + expirationIndex: 1 + } + ); } else if ( - expirySeconds === + expirySeconds == '86400' ) { - expirationIndex = 2; + this.setState( + { + expiry: text, + expirySeconds, + expirationIndex: 2 + } + ); } else if ( - expirySeconds === + expirySeconds == '604800' ) { - expirationIndex = 3; + this.setState( + { + expiry: text, + expirySeconds, + expirationIndex: 3 + } + ); } else { - expirationIndex = 4; + this.setState( + { + expiry: text, + expirySeconds, + expirationIndex: 5 + } + ); } - - this.setState({ - timePeriod: - value, - expirySeconds, - expirationIndex - }); }} /> - - - - - - )} - - {BackendUtils.supportsCustomPreimages() && - showCustomPreimageField && ( - <> - - {localeString( - 'views.Receive.customPreimage' - )} - - - this.setState({ - customPreimage: - text - }) - } - /> - - )} - - {BackendUtils.isLNDBased() && - !lspIsActive && ( - <> - - {localeString( - 'views.Receive.routeHints' - )} - - - this.setState({ - routeHints: - !routeHints - }) - } - disabled={blindedPaths} - /> - - )} + + { + let expirySeconds = + '3600'; + if ( + value === + 'Seconds' + ) { + expirySeconds = + expiry; + } else if ( + value === + 'Minutes' + ) { + expirySeconds = + new BigNumber( + expiry + ) + .multipliedBy( + 60 + ) + .toString(); + } else if ( + value === + 'Hours' + ) { + expirySeconds = + new BigNumber( + expiry + ) + .multipliedBy( + 60 * + 60 + ) + .toString(); + } else if ( + value === + 'Days' + ) { + expirySeconds = + new BigNumber( + expiry + ) + .multipliedBy( + 60 * + 60 * + 24 + ) + .toString(); + } else if ( + value === + 'Weeks' + ) { + expirySeconds = + new BigNumber( + expiry + ) + .multipliedBy( + 60 * + 60 * + 24 * + 7 + ) + .toString(); + } + + let expirationIndex; + if ( + expirySeconds === + '600' + ) { + expirationIndex = 0; + } else if ( + expirySeconds === + '3600' + ) { + expirationIndex = 1; + } else if ( + expirySeconds === + '86400' + ) { + expirationIndex = 2; + } else if ( + expirySeconds === + '604800' + ) { + expirationIndex = 3; + } else { + expirationIndex = 4; + } + + this.setState( + { + timePeriod: + value, + expirySeconds, + expirationIndex + } + ); + }} + /> + + - {BackendUtils.isLNDBased() && - routeHints && ( - - - {localeString( - 'general.mode' - )} - - + )} - {BackendUtils.isLNDBased() && - routeHints && ( - - (this.hopPickerRef = - ref) - } - onValueChange={( - channels - ) => { - this.setState({ - selectedRouteHintChannels: - channels - }); - }} - onCancel={() => { - if ( - !selectedRouteHintChannels?.length - ) { - setRouteHintMode( - RouteHintMode.Automatic - ); - } - }} - title={localeString( - 'views.Receive.customRouteHints' - )} - ChannelsStore={ - this.props.ChannelsStore - } - UnitsStore={UnitsStore} - containerStyle={{ - display: - routeHintMode === - RouteHintMode.Automatic - ? 'none' - : 'flex' - }} - clearOnTap={false} - selectionMode={'multiple'} - selectedChannels={ - selectedRouteHintChannels - } - /> - )} + {BackendUtils.supportsCustomPreimages() && + showCustomPreimageField && ( + <> + + {localeString( + 'views.Receive.customPreimage' + )} + + + this.setState({ + customPreimage: + text + }) + } + /> + + )} - {BackendUtils.supportsAMP() && - !lspIsActive && ( - <> - + + {localeString( + 'views.Receive.routeHints' + )} + + + this.setState({ + routeHints: + !routeHints + }) + } + disabled={ + blindedPaths + } + /> + + )} + + {BackendUtils.isLNDBased() && + routeHints && ( + + + {localeString( + 'general.mode' + )} + + + + )} + + {BackendUtils.isLNDBased() && + routeHints && ( + + (this.hopPickerRef = + ref) + } + onValueChange={( + channels + ) => { + this.setState({ + selectedRouteHintChannels: + channels + }); }} - infoModalText={[ - localeString( - 'views.Receive.ampSwitchExplainer1' - ), - localeString( - 'views.Receive.ampSwitchExplainer2' - ) - ]} - infoModalLink="https://docs.lightning.engineering/lightning-network-tools/lnd/amp" - > - {localeString( - 'views.Receive.ampInvoice' + onCancel={() => { + if ( + !selectedRouteHintChannels?.length + ) { + setRouteHintMode( + RouteHintMode.Automatic + ); + } + }} + title={localeString( + 'views.Receive.customRouteHints' )} - - - this.setState({ - ampInvoice: - !ampInvoice - }) + ChannelsStore={ + this.props + .ChannelsStore } - disabled={blindedPaths} - /> - - )} - - {BackendUtils.supportsBolt11BlindedRoutes() && - !lspIsActive && ( - <> - - {localeString( - 'views.Receive.blindedPaths' - )} - - - this.setState({ - blindedPaths: - !blindedPaths, - ampInvoice: - false, - routeHints: - false - }) + clearOnTap={false} + selectionMode={ + 'multiple' + } + selectedChannels={ + selectedRouteHintChannels } /> - - )} + )} - -