forked from cerc-io/laconic-wallet-web
style: hd path
This commit is contained in:
parent
e05ce4659e
commit
699cc5379e
@ -1,11 +1,12 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ScrollView, View, Text } from 'react-native';
|
||||
import { Button, TextInput } from 'react-native-paper';
|
||||
import React, { useState } from "react";
|
||||
import { ScrollView, View, Text } from "react-native";
|
||||
import { TextInput } from "react-native-paper";
|
||||
|
||||
import { addAccountFromHDPath } from '../utils/accounts';
|
||||
import { Account, NetworksDataState, PathState } from '../types';
|
||||
import styles from '../styles/stylesheet';
|
||||
import { useAccounts } from '../context/AccountsContext';
|
||||
import { addAccountFromHDPath } from "../utils/accounts";
|
||||
import { Account, NetworksDataState, PathState } from "../types";
|
||||
import styles from "../styles/stylesheet";
|
||||
import { useAccounts } from "../context/AccountsContext";
|
||||
import { LoadingButton } from "@mui/lab";
|
||||
|
||||
const HDPath = ({
|
||||
pathCode,
|
||||
@ -21,19 +22,19 @@ const HDPath = ({
|
||||
const { setCurrentIndex } = useAccounts();
|
||||
const [isAccountCreating, setIsAccountCreating] = useState(false);
|
||||
const [path, setPath] = useState<PathState>({
|
||||
firstNumber: '',
|
||||
secondNumber: '',
|
||||
thirdNumber: '',
|
||||
firstNumber: "",
|
||||
secondNumber: "",
|
||||
thirdNumber: "",
|
||||
});
|
||||
|
||||
const handleChange = (key: keyof PathState, value: string) => {
|
||||
if (key === 'secondNumber' && value !== '' && !['0', '1'].includes(value)) {
|
||||
if (key === "secondNumber" && value !== "" && !["0", "1"].includes(value)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPath({
|
||||
...path,
|
||||
[key]: value.replace(/[^0-9]/g, ''),
|
||||
[key]: value.replace(/[^0-9]/g, ""),
|
||||
});
|
||||
};
|
||||
|
||||
@ -50,7 +51,7 @@ const HDPath = ({
|
||||
hideDialog();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating account:', error);
|
||||
console.error("Error creating account:", error);
|
||||
} finally {
|
||||
setIsAccountCreating(false);
|
||||
}
|
||||
@ -63,15 +64,15 @@ const HDPath = ({
|
||||
<TextInput
|
||||
keyboardType="numeric"
|
||||
mode="outlined"
|
||||
onChangeText={text => handleChange('firstNumber', text)}
|
||||
onChangeText={(text) => handleChange("firstNumber", text)}
|
||||
value={path.firstNumber}
|
||||
style={styles.HDtextInput}
|
||||
/>
|
||||
<Text style={styles.HDtext}>{'\'/'}</Text>
|
||||
<Text style={styles.HDtext}>{"'/"}</Text>
|
||||
<TextInput
|
||||
keyboardType="numeric"
|
||||
mode="outlined"
|
||||
onChangeText={text => handleChange('secondNumber', text)}
|
||||
onChangeText={(text) => handleChange("secondNumber", text)}
|
||||
value={path.secondNumber}
|
||||
style={styles.HDtextInput}
|
||||
/>
|
||||
@ -79,19 +80,20 @@ const HDPath = ({
|
||||
<TextInput
|
||||
keyboardType="numeric"
|
||||
mode="outlined"
|
||||
onChangeText={text => handleChange('thirdNumber', text)}
|
||||
onChangeText={(text) => handleChange("thirdNumber", text)}
|
||||
value={path.thirdNumber}
|
||||
style={styles.HDtextInput}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.HDbuttonContainer}>
|
||||
<Button
|
||||
mode="contained"
|
||||
onPress={createFromHDPathHandler}
|
||||
<LoadingButton
|
||||
variant="contained"
|
||||
onClick={createFromHDPathHandler}
|
||||
loading={isAccountCreating}
|
||||
disabled={isAccountCreating}>
|
||||
{isAccountCreating ? 'Adding' : 'Add Account'}
|
||||
</Button>
|
||||
disabled={isAccountCreating}
|
||||
>
|
||||
{isAccountCreating ? "Adding" : "Add Account"}
|
||||
</LoadingButton>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
createWalletContainer: {
|
||||
marginTop: 20,
|
||||
alignSelf: 'center',
|
||||
alignSelf: "center",
|
||||
marginBottom: 30,
|
||||
},
|
||||
signLink: {
|
||||
alignItems: 'flex-end',
|
||||
alignItems: "flex-end",
|
||||
marginTop: 24,
|
||||
},
|
||||
hyperlink: {
|
||||
fontWeight: '500',
|
||||
textDecorationLine: 'underline',
|
||||
fontWeight: "500",
|
||||
textDecorationLine: "underline",
|
||||
},
|
||||
highlight: {
|
||||
fontWeight: '700',
|
||||
fontWeight: "700",
|
||||
},
|
||||
accountContainer: {
|
||||
padding: 8,
|
||||
@ -23,32 +23,32 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
addAccountButton: {
|
||||
marginTop: 24,
|
||||
alignSelf: 'center',
|
||||
alignSelf: "center",
|
||||
},
|
||||
accountComponent: {
|
||||
flex: 4,
|
||||
},
|
||||
appSurface: {
|
||||
backgroundColor: '#0f0f0f',
|
||||
backgroundColor: "#0f0f0f",
|
||||
},
|
||||
appContainer: {
|
||||
flexGrow: 1,
|
||||
marginTop: 24,
|
||||
paddingHorizontal: 24,
|
||||
backgroundColor: '#0f0f0f',
|
||||
backgroundColor: "#0f0f0f",
|
||||
},
|
||||
resetContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
justifyContent: "center",
|
||||
},
|
||||
resetButton: {
|
||||
alignSelf: 'center',
|
||||
alignSelf: "center",
|
||||
},
|
||||
signButton: {
|
||||
marginTop: 20,
|
||||
marginBottom: 20,
|
||||
width: 150,
|
||||
alignSelf: 'center',
|
||||
alignSelf: "center",
|
||||
},
|
||||
signPage: {
|
||||
paddingHorizontal: 24,
|
||||
@ -74,81 +74,81 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 10,
|
||||
},
|
||||
dialogWarning: {
|
||||
color: '#FFA3A8',
|
||||
color: "#FFA3A8",
|
||||
},
|
||||
resetDialogTitle:{
|
||||
resetDialogTitle: {
|
||||
width: 500,
|
||||
backgroundColor: '#18181A'
|
||||
backgroundColor: "#18181A",
|
||||
},
|
||||
resetDialogContent: {
|
||||
backgroundColor: '#18181A',
|
||||
backgroundColor: "#18181A",
|
||||
},
|
||||
resetDialogActionRow: {
|
||||
backgroundColor: '#18181A',
|
||||
backgroundColor: "#18181A",
|
||||
},
|
||||
button: {
|
||||
color: '#fff',
|
||||
margin: 10
|
||||
color: "#fff",
|
||||
margin: 10,
|
||||
},
|
||||
buttonRed: {
|
||||
backgroundColor: '#B20710'
|
||||
backgroundColor: "#B20710",
|
||||
},
|
||||
buttonBlue: {
|
||||
backgroundColor: '#0000F4'
|
||||
backgroundColor: "#0000F4",
|
||||
},
|
||||
mnemonicTitle:{
|
||||
backgroundColor: '#18181A',
|
||||
mnemonicTitle: {
|
||||
backgroundColor: "#18181A",
|
||||
},
|
||||
mnemonicContainer:{
|
||||
backgroundColor: '#18181A',
|
||||
mnemonicContainer: {
|
||||
backgroundColor: "#18181A",
|
||||
},
|
||||
mnomonicDialogWarning: {
|
||||
color: '#FFA3A8',
|
||||
marginTop: 10
|
||||
color: "#FFA3A8",
|
||||
marginTop: 10,
|
||||
},
|
||||
mnemonicButtonRow: {
|
||||
paddingRight: 40,
|
||||
backgroundColor: '#18181A'
|
||||
backgroundColor: "#18181A",
|
||||
},
|
||||
mnemonicButton:{
|
||||
backgroundColor: '#0000F4',
|
||||
color: 'white',
|
||||
mnemonicButton: {
|
||||
backgroundColor: "#0000F4",
|
||||
color: "white",
|
||||
padding: 2,
|
||||
marginBottom: 20
|
||||
marginBottom: 20,
|
||||
},
|
||||
mnemonicGridContainer: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "center",
|
||||
marginTop: 20,
|
||||
paddingBottom: 30,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#29292E'
|
||||
borderBottomColor: "#29292E",
|
||||
},
|
||||
gridContainer: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "center",
|
||||
},
|
||||
gridItem: {
|
||||
width: '30%',
|
||||
width: "30%",
|
||||
margin: 4,
|
||||
padding: 4,
|
||||
borderRadius: 4,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
backgroundColor: '#29292E'
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
backgroundColor: "#29292E",
|
||||
},
|
||||
HDcontainer: {
|
||||
marginTop: 24,
|
||||
paddingHorizontal: 8,
|
||||
},
|
||||
HDrowContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
HDtext: {
|
||||
color: 'black',
|
||||
color: "#FBFBFB",
|
||||
fontSize: 18,
|
||||
margin: 4,
|
||||
},
|
||||
@ -158,15 +158,15 @@ const styles = StyleSheet.create({
|
||||
HDbuttonContainer: {
|
||||
marginTop: 20,
|
||||
width: 200,
|
||||
alignSelf: 'center',
|
||||
alignSelf: "flex-start",
|
||||
},
|
||||
spinnerContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
LoadingText: {
|
||||
color: 'black',
|
||||
color: "black",
|
||||
fontSize: 18,
|
||||
padding: 10,
|
||||
},
|
||||
@ -174,9 +174,9 @@ const styles = StyleSheet.create({
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
marginTop: 50,
|
||||
height: 'auto',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: "auto",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 10,
|
||||
},
|
||||
requestDirectMessage: {
|
||||
@ -185,51 +185,51 @@ const styles = StyleSheet.create({
|
||||
marginTop: 20,
|
||||
marginBottom: 50,
|
||||
height: 500,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 8,
|
||||
},
|
||||
approveTransfer: {
|
||||
height: '40%',
|
||||
height: "40%",
|
||||
marginBottom: 30,
|
||||
},
|
||||
buttonContainer: {
|
||||
flexDirection: 'row',
|
||||
flexDirection: "row",
|
||||
marginLeft: 20,
|
||||
marginTop: 10,
|
||||
marginBottom: 10,
|
||||
justifyContent: 'space-evenly',
|
||||
justifyContent: "space-evenly",
|
||||
},
|
||||
badRequestContainer: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 20,
|
||||
},
|
||||
invalidMessageText: {
|
||||
color: 'black',
|
||||
color: "black",
|
||||
fontSize: 16,
|
||||
textAlign: 'center',
|
||||
textAlign: "center",
|
||||
marginBottom: 20,
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginBottom: 10,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
modalContentContainer: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 34,
|
||||
borderBottomStartRadius: 0,
|
||||
borderBottomEndRadius: 0,
|
||||
borderWidth: 1,
|
||||
width: '100%',
|
||||
height: '50%',
|
||||
position: 'absolute',
|
||||
backgroundColor: '#0f0f0f',
|
||||
width: "100%",
|
||||
height: "50%",
|
||||
position: "absolute",
|
||||
backgroundColor: "#0f0f0f",
|
||||
bottom: 0,
|
||||
},
|
||||
modalOuterContainer: { flex: 1 },
|
||||
@ -238,32 +238,32 @@ const styles = StyleSheet.create({
|
||||
height: 50,
|
||||
borderRadius: 8,
|
||||
marginVertical: 16,
|
||||
overflow: 'hidden',
|
||||
overflow: "hidden",
|
||||
},
|
||||
space: {
|
||||
width: 50,
|
||||
},
|
||||
flexRow: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginTop: 20,
|
||||
paddingHorizontal: 16,
|
||||
marginBottom: 10,
|
||||
},
|
||||
marginVertical8: {
|
||||
marginVertical: 8,
|
||||
textAlign: 'center',
|
||||
textAlign: "center",
|
||||
},
|
||||
subHeading: {
|
||||
textAlign: 'center',
|
||||
textAlign: "center",
|
||||
marginBottom: 10,
|
||||
marginTop: 10,
|
||||
fontSize: 20
|
||||
fontSize: 20,
|
||||
},
|
||||
centerText: {
|
||||
textAlign: 'center',
|
||||
textAlign: "center",
|
||||
},
|
||||
messageBody: {
|
||||
borderWidth: 1,
|
||||
@ -276,48 +276,48 @@ const styles = StyleSheet.create({
|
||||
marginTop: 20,
|
||||
},
|
||||
dappDetails: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
},
|
||||
dataBoxContainer: {
|
||||
marginBottom: 10,
|
||||
backgroundColor: '#29292E',
|
||||
border: 'none'
|
||||
backgroundColor: "#29292E",
|
||||
border: "none",
|
||||
},
|
||||
dataBoxLabel: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
fontWeight: "bold",
|
||||
marginBottom: 3,
|
||||
color: 'black',
|
||||
color: "black",
|
||||
},
|
||||
dataBox: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#ccc',
|
||||
borderColor: "#ccc",
|
||||
padding: 10,
|
||||
borderRadius: 5,
|
||||
},
|
||||
dataBoxData: {
|
||||
fontSize: 16,
|
||||
color: 'white',
|
||||
color: "white",
|
||||
},
|
||||
transactionText: {
|
||||
padding: 8,
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: 'black',
|
||||
fontWeight: "bold",
|
||||
color: "black",
|
||||
},
|
||||
balancePadding: {
|
||||
padding: 8,
|
||||
},
|
||||
noActiveSessions: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginTop: 20,
|
||||
marginBottom: 20,
|
||||
},
|
||||
disconnectSession: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
},
|
||||
sessionItem: {
|
||||
paddingLeft: 12,
|
||||
@ -334,7 +334,7 @@ const styles = StyleSheet.create({
|
||||
margin: 0,
|
||||
},
|
||||
selectNetworkText: {
|
||||
fontWeight: 'bold',
|
||||
fontWeight: "bold",
|
||||
marginVertical: 10,
|
||||
},
|
||||
transactionFeesInput: { marginBottom: 10 },
|
||||
@ -345,7 +345,7 @@ const styles = StyleSheet.create({
|
||||
paddingVertical: 5,
|
||||
},
|
||||
transactionLabel: {
|
||||
fontWeight: '700',
|
||||
fontWeight: "700",
|
||||
padding: 8,
|
||||
},
|
||||
linkContainer: {
|
||||
@ -354,7 +354,7 @@ const styles = StyleSheet.create({
|
||||
networksButton: {
|
||||
marginTop: 12,
|
||||
marginBottom: 20,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export default styles;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user