Skip to content

Commit

Permalink
Merge pull request #2394 from shubhamkmr04/shubham/custodial-wallet-w…
Browse files Browse the repository at this point in the history 
…arning

Add modal to dismiss custodial wallet warning
  • Loading branch information
@kaloudis
kaloudis authored Sep 16, 2024
2 parents 8f1fe10 + 2cff1ed commit ab216cb
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 8 deletions.
3 changes: 2 additions & 1 deletion components/WalletHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,8 @@ export default class WalletHeader extends React.Component<
};

const CustodialBadge = () => {
return implementation === 'lndhub' ? (
return implementation === 'lndhub' &&
!selectedNode.dismissCustodialWarning ? (
<Badge
onPress={() =>
navigation.navigate('CustodialWalletWarning')
Expand Down
6 changes: 6 additions & 0 deletions locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1140,6 +1140,12 @@
"views.Settings.CustodialWalletWarning.graph3": "ZEUS has the ability to create a self-custodial wallet in the app. This wallet provides you with a 24-word seed phrase that gives you full control of your funds.",
"views.Settings.CustodialWalletWarning.graph4": "To get started with your own self-custodial wallet, press the button below, and hit the 'Create mainnet wallet' button on the next screen.",
"views.Settings.CustodialWalletWarning.create": "Create self-custodial wallet",
"views.Settings.CustodialWalletWarning.dismissWarning": "Dismiss warning",
"views.Settings.CustodialWalletWarning.dismissWarningHeader": "Please confirm the following to dismiss the warning:",
"views.Settings.CustodialWalletWarning.dismissWarning1": "I know that I don't have custody of the funds in this wallet without the 12 or 24 word seed phrase",
"views.Settings.CustodialWalletWarning.dismissWarning2": "I know that an LNDHub account password is not the same as a seed phrase",
"views.Settings.CustodialWalletWarning.dismissWarning3": "I either set up this connection myself or I trust the person who set it up",
"views.Settings.CustodialWalletWarning.dismissWarning4": "I'm not just lying to get this over with",
"views.PayCode.bolt12": "BOLT 12",
"views.PayCode.offerId": "Offer ID",
"views.PayCode.createOffer": "Create pay code",
Expand Down
3 changes: 3 additions & 0 deletions stores/SettingsStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export interface Node {
certVerification?: boolean;
enableTor?: boolean;
nickname?: string;
dismissCustodialWarning: boolean;
photo?: string;
// LNC
pairingPhrase?: string;
Expand Down Expand Up @@ -1195,6 +1196,7 @@ export default class SettingsStore {
@observable username: string;
@observable password: string;
@observable lndhubUrl: string;
@observable dismissCustodialWarning: boolean = false;
@observable public createAccountError: string;
@observable public createAccountSuccess: string;
@observable public accessToken: string;
Expand Down Expand Up @@ -1544,6 +1546,7 @@ export default class SettingsStore {
this.macaroonHex = node.macaroonHex;
this.rune = node.rune;
this.accessKey = node.accessKey;
this.dismissCustodialWarning = node.dismissCustodialWarning;
this.implementation = node.implementation || 'lnd';
this.certVerification = node.certVerification || false;
this.enableTor = node.enableTor;
Expand Down
191 changes: 184 additions & 7 deletions views/Settings/CustodialWalletWarning.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { StyleSheet, Text, View, ScrollView, Modal } from 'react-native';
import { inject, observer } from 'mobx-react';
import { StackNavigationProp } from '@react-navigation/stack';
import { CheckBox } from 'react-native-elements';

import Button from '../../components/Button';
import Header from '../../components/Header';
Expand All @@ -12,6 +13,14 @@ import { themeColor } from '../../utils/ThemeUtils';

import SettingsStore from '../../stores/SettingsStore';

interface CustodialWalletWarningState {
checkbox1: boolean;
checkbox2: boolean;
checkbox3: boolean;
checkbox4: boolean;
showModal: boolean;
}

interface CustodialWalletWarningProps {
SettingsStore: SettingsStore;
navigation: StackNavigationProp<any, any>;
Expand All @@ -21,10 +30,72 @@ interface CustodialWalletWarningProps {
@observer
export default class CustodialWalletWarning extends React.Component<
CustodialWalletWarningProps,
{}
CustodialWalletWarningState
> {
constructor(props: CustodialWalletWarningProps) {
super(props);
this.state = {
checkbox1: false,
checkbox2: false,
checkbox3: false,
checkbox4: false,
showModal: false
};
}

areAllChecked = () => {
const { checkbox1, checkbox2, checkbox3, checkbox4 } = this.state;
return checkbox1 && checkbox2 && checkbox3 && checkbox4;
};

toggleModal = () => {
this.setState({
showModal: !this.state.showModal,
checkbox1: false,
checkbox2: false,
checkbox3: false,
checkbox4: false
});
};

updateNode = () => {
const { SettingsStore } = this.props;
const { settings, updateSettings } = SettingsStore;
const { nodes, selectedNode } = settings;

if (nodes && nodes.length > 0) {
const currentNodeIndex = selectedNode || 0;
const currentNode = nodes[currentNodeIndex];

// Update the dismissCustodialWarning property
const updatedNode = {
...currentNode,
dismissCustodialWarning: true
};

// Replace the current node with the updated node
const updatedNodes = [...nodes];
updatedNodes[currentNodeIndex] = updatedNode;

// Save the updated nodes array back to the settings
updateSettings({ nodes: updatedNodes })
.then(() => {
console.log('Node configuration updated successfully.');
})
.catch((error) => {
console.error(
'Failed to update node configuration:',
error
);
});
} else {
console.error('No nodes available to update.');
}
};

render() {
const { SettingsStore, navigation } = this.props;
const { showModal } = this.state;
const nodes = SettingsStore?.settings?.nodes || [];

// check if user has embedded node wallet configured already
Expand Down Expand Up @@ -111,10 +182,7 @@ export default class CustodialWalletWarning extends React.Component<
<View style={{ bottom: 10 }}>
<View
style={{
paddingTop: 30,
paddingBottom: 15,
paddingLeft: 10,
paddingRight: 10
paddingBottom: 10
}}
>
<Button
Expand All @@ -135,14 +203,123 @@ export default class CustodialWalletWarning extends React.Component<
</View>
</View>
)}

<Modal
visible={showModal}
transparent={true}
animationType="slide"
onRequestClose={this.toggleModal}
>
<View style={styles.modalOverlay}>
<View
style={{
...styles.modalContainer,
backgroundColor: themeColor('background')
}}
>
<Text
style={{
...styles.text,
color: themeColor('text')
}}
>
{localeString(
'views.Settings.CustodialWalletWarning.dismissWarningHeader'
)}
</Text>
{[
localeString(
'views.Settings.CustodialWalletWarning.dismissWarning1'
),
localeString(
'views.Settings.CustodialWalletWarning.dismissWarning2'
),
localeString(
'views.Settings.CustodialWalletWarning.dismissWarning3'
),
localeString(
'views.Settings.CustodialWalletWarning.dismissWarning4'
)
].map((title, index) => (
<CheckBox
key={index}
title={title}
checked={this.state[`checkbox${index + 1}`]}
onPress={() =>
this.setState((prevState) => ({
[`checkbox${index + 1}`]:
!prevState[
`checkbox${index + 1}`
]
}))
}
containerStyle={{
backgroundColor: 'transparent',
borderWidth: 0
}}
textStyle={{
...styles.text,
color: themeColor('text')
}}
/>
))}
<View style={styles.modalButtonContainer}>
<Button
title={localeString(
'views.Settings.CustodialWalletWarning.dismissWarning'
)}
disabled={!this.areAllChecked()}
onPress={() => {
this.updateNode();
this.toggleModal();
navigation.popTo('Wallet');
}}
containerStyle={{ paddingBottom: 20 }}
/>
<Button
title={localeString('general.close')}
onPress={() => {
this.toggleModal();
}}
secondary
/>
</View>
</View>
</View>
</Modal>
<Button
title={localeString(
'views.Settings.CustodialWalletWarning.dismissWarning'
)}
onPress={this.toggleModal}
secondary
/>
</Screen>
);
}
}

const styles = StyleSheet.create({
text: {
fontSize: 18,
fontSize: 16,
fontWeight: 'normal',
paddingTop: 12
},
modalOverlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.4)',
justifyContent: 'center',
alignItems: 'center'
},
modalContainer: {
width: '86%',
padding: 22,
borderRadius: 10,
alignItems: 'center'
},
modalButtonContainer: {
marginTop: 20,
width: '100%',
alignItems: 'center'
}
});
6 changes: 6 additions & 0 deletions views/Settings/NodeConfiguration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ interface NodeConfigurationState {
username: string | undefined; // lndhub
password: string | undefined; // lndhub, eclair
existingAccount: boolean; // lndhub
dismissCustodialWarning: boolean;
implementation: Implementations;
certVerification: boolean;
saved: boolean;
Expand Down Expand Up @@ -133,6 +134,7 @@ export default class NodeConfiguration extends React.Component<
state: NodeConfigurationState = {
node: null,
nickname: '',
dismissCustodialWarning: false,
host: '',
port: '',
macaroonHex: '',
Expand Down Expand Up @@ -310,6 +312,7 @@ export default class NodeConfiguration extends React.Component<
if (node) {
const {
nickname,
dismissCustodialWarning,
host,
port,
macaroonHex,
Expand Down Expand Up @@ -338,6 +341,7 @@ export default class NodeConfiguration extends React.Component<
this.setState({
node,
nickname,
dismissCustodialWarning,
host,
port,
macaroonHex,
Expand Down Expand Up @@ -380,6 +384,7 @@ export default class NodeConfiguration extends React.Component<
const { SettingsStore, navigation } = this.props;
const {
nickname,
dismissCustodialWarning,
host,
port,
url,
Expand Down Expand Up @@ -414,6 +419,7 @@ export default class NodeConfiguration extends React.Component<

const node = {
nickname,
dismissCustodialWarning,
host,
port,
url,
Expand Down

0 comments on commit ab216cb

Please sign in to comment.