Skip to content

Commit

Permalink
Add modal to dismiss custodial wallet warning
Browse files Browse the repository at this point in the history
  • Loading branch information
@shubhamkmr04
shubhamkmr04 committed Sep 5, 2024
1 parent 7daf702 commit 0f4f8c2
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 8 deletions.
1 change: 1 addition & 0 deletions locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1143,6 +1143,7 @@
"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.PayCode.bolt12": "BOLT 12",
"views.PayCode.offerId": "Offer ID",
"views.PayCode.createOffer": "Create pay code",
Expand Down
151 changes: 143 additions & 8 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,37 @@ 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
});
};

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 @@ -107,14 +143,11 @@ export default class CustodialWalletWarning extends React.Component<
)}
</View>
</ScrollView>
{!hasEmbeddedWallet && (
{true && (
<View style={{ bottom: 10 }}>
<View
style={{
paddingTop: 30,
paddingBottom: 15,
paddingLeft: 10,
paddingRight: 10
paddingBottom: 10
}}
>
<Button
Expand All @@ -135,14 +168,116 @@ 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')
}}
>
Please confirm the following to dismiss the
warning:
</Text>
{[
"I know that I don't have custody of the funds in this wallet without the 12 or 24 word seed phrase",
'I know that an LNDHub account password is not the same as a seed phrase',
'I either set up this connection myself or I trust the person who set it up',
"I'm not just lying to get this over with"
].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.toggleModal();
}}
containerStyle={{ paddingBottom: 20 }}
/>
<Button
title="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'
},
closeButton: {
marginTop: 10,
color: 'blue'
}
});

0 comments on commit 0f4f8c2

Please sign in to comment.