cerc-io/laconic-wallet-web
17
0
Fork 2
Code Issues 1 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

style: hd path

Browse Source
This commit is contained in:
Cody Bender 2024-08-09 16:13:24 -04:00
parent e05ce4659e
commit 699cc5379e
2 changed files with 122 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/HDPath.tsx
View File

@ -1,11 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import { ScrollView, View, Text } from 'react-native'; import { ScrollView, View, Text } from "react-native";
import { Button, TextInput } from 'react-native-paper'; import { TextInput } from "react-native-paper";
import { addAccountFromHDPath } from '../utils/accounts'; import { addAccountFromHDPath } from "../utils/accounts";
import { Account, NetworksDataState, PathState } from '../types'; import { Account, NetworksDataState, PathState } from "../types";
import styles from '../styles/stylesheet'; import styles from "../styles/stylesheet";
import { useAccounts } from '../context/AccountsContext'; import { useAccounts } from "../context/AccountsContext";
import { LoadingButton } from "@mui/lab";
const HDPath = ({ const HDPath = ({
pathCode, pathCode,
@ -21,19 +22,19 @@ const HDPath = ({
const { setCurrentIndex } = useAccounts(); const { setCurrentIndex } = useAccounts();
const [isAccountCreating, setIsAccountCreating] = useState(false); const [isAccountCreating, setIsAccountCreating] = useState(false);
const [path, setPath] = useState<PathState>({ const [path, setPath] = useState<PathState>({
firstNumber: '', firstNumber: "",
secondNumber: '', secondNumber: "",
thirdNumber: '', thirdNumber: "",
}); });
const handleChange = (key: keyof PathState, value: string) => { const handleChange = (key: keyof PathState, value: string) => {
if (key === 'secondNumber' && value !== '' && !['0', '1'].includes(value)) { if (key === "secondNumber" && value !== "" && !["0", "1"].includes(value)) {
return; return;
} }
setPath({ setPath({
...path, ...path,
[key]: value.replace(/[^0-9]/g, ''), [key]: value.replace(/[^0-9]/g, ""),
}); });
}; };
@ -50,7 +51,7 @@ const HDPath = ({
hideDialog(); hideDialog();
} }
} catch (error) { } catch (error) {
console.error('Error creating account:', error); console.error("Error creating account:", error);
} finally { } finally {
setIsAccountCreating(false); setIsAccountCreating(false);
} }
@ -63,15 +64,15 @@ const HDPath = ({
<TextInput <TextInput
keyboardType="numeric" keyboardType="numeric"
mode="outlined" mode="outlined"
onChangeText={text => handleChange('firstNumber', text)} onChangeText={(text) => handleChange("firstNumber", text)}
value={path.firstNumber} value={path.firstNumber}
style={styles.HDtextInput} style={styles.HDtextInput}
/> />
<Text style={styles.HDtext}>{'\'/'}</Text> <Text style={styles.HDtext}>{"'/"}</Text>
<TextInput <TextInput
keyboardType="numeric" keyboardType="numeric"
mode="outlined" mode="outlined"
onChangeText={text => handleChange('secondNumber', text)} onChangeText={(text) => handleChange("secondNumber", text)}
value={path.secondNumber} value={path.secondNumber}
style={styles.HDtextInput} style={styles.HDtextInput}
/> />
@ -79,19 +80,20 @@ const HDPath = ({
<TextInput <TextInput
keyboardType="numeric" keyboardType="numeric"
mode="outlined" mode="outlined"
onChangeText={text => handleChange('thirdNumber', text)} onChangeText={(text) => handleChange("thirdNumber", text)}
value={path.thirdNumber} value={path.thirdNumber}
style={styles.HDtextInput} style={styles.HDtextInput}
/> />
</View> </View>
<View style={styles.HDbuttonContainer}> <View style={styles.HDbuttonContainer}>
<Button <LoadingButton
mode="contained" variant="contained"
onPress={createFromHDPathHandler} onClick={createFromHDPathHandler}
loading={isAccountCreating} loading={isAccountCreating}
disabled={isAccountCreating}> disabled={isAccountCreating}
{isAccountCreating ? 'Adding' : 'Add Account'} >
</Button> {isAccountCreating ? "Adding" : "Add Account"}
</LoadingButton>
</View> </View>
</ScrollView> </ScrollView>
); );

194
src/styles/stylesheet.js
View File

@ -1,21 +1,21 @@
import { StyleSheet } from 'react-native'; import { StyleSheet } from "react-native";
const styles = StyleSheet.create({ const styles = StyleSheet.create({
createWalletContainer: { createWalletContainer: {
marginTop: 20, marginTop: 20,
alignSelf: 'center', alignSelf: "center",
marginBottom: 30, marginBottom: 30,
}, },
signLink: { signLink: {
alignItems: 'flex-end', alignItems: "flex-end",
marginTop: 24, marginTop: 24,
}, },
hyperlink: { hyperlink: {
fontWeight: '500', fontWeight: "500",
textDecorationLine: 'underline', textDecorationLine: "underline",
}, },
highlight: { highlight: {
fontWeight: '700', fontWeight: "700",
}, },
accountContainer: { accountContainer: {
padding: 8, padding: 8,
@ -23,32 +23,32 @@ const styles = StyleSheet.create({
}, },
addAccountButton: { addAccountButton: {
marginTop: 24, marginTop: 24,
alignSelf: 'center', alignSelf: "center",
}, },
accountComponent: { accountComponent: {
flex: 4, flex: 4,
}, },
appSurface: { appSurface: {
backgroundColor: '#0f0f0f', backgroundColor: "#0f0f0f",
}, },
appContainer: { appContainer: {
flexGrow: 1, flexGrow: 1,
marginTop: 24, marginTop: 24,
paddingHorizontal: 24, paddingHorizontal: 24,
backgroundColor: '#0f0f0f', backgroundColor: "#0f0f0f",
}, },
resetContainer: { resetContainer: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: "center",
}, },
resetButton: { resetButton: {
alignSelf: 'center', alignSelf: "center",
}, },
signButton: { signButton: {
marginTop: 20, marginTop: 20,
marginBottom: 20, marginBottom: 20,
width: 150, width: 150,
alignSelf: 'center', alignSelf: "center",
}, },
signPage: { signPage: {
paddingHorizontal: 24, paddingHorizontal: 24,
@ -74,81 +74,81 @@ const styles = StyleSheet.create({
borderRadius: 10, borderRadius: 10,
}, },
dialogWarning: { dialogWarning: {
color: '#FFA3A8', color: "#FFA3A8",
}, },
resetDialogTitle:{ resetDialogTitle: {
width: 500, width: 500,
backgroundColor: '#18181A' backgroundColor: "#18181A",
}, },
resetDialogContent: { resetDialogContent: {
backgroundColor: '#18181A', backgroundColor: "#18181A",
}, },
resetDialogActionRow: { resetDialogActionRow: {
backgroundColor: '#18181A', backgroundColor: "#18181A",
}, },
button: { button: {
color: '#fff', color: "#fff",
margin: 10 margin: 10,
}, },
buttonRed: { buttonRed: {
backgroundColor: '#B20710' backgroundColor: "#B20710",
}, },
buttonBlue: { buttonBlue: {
backgroundColor: '#0000F4' backgroundColor: "#0000F4",
}, },
mnemonicTitle:{ mnemonicTitle: {
backgroundColor: '#18181A', backgroundColor: "#18181A",
}, },
mnemonicContainer:{ mnemonicContainer: {
backgroundColor: '#18181A', backgroundColor: "#18181A",
}, },
mnomonicDialogWarning: { mnomonicDialogWarning: {
color: '#FFA3A8', color: "#FFA3A8",
marginTop: 10 marginTop: 10,
}, },
mnemonicButtonRow: { mnemonicButtonRow: {
paddingRight: 40, paddingRight: 40,
backgroundColor: '#18181A' backgroundColor: "#18181A",
}, },
mnemonicButton:{ mnemonicButton: {
backgroundColor: '#0000F4', backgroundColor: "#0000F4",
color: 'white', color: "white",
padding: 2, padding: 2,
marginBottom: 20 marginBottom: 20,
}, },
mnemonicGridContainer: { mnemonicGridContainer: {
flexDirection: 'row', flexDirection: "row",
flexWrap: 'wrap', flexWrap: "wrap",
justifyContent: 'center', justifyContent: "center",
marginTop: 20, marginTop: 20,
paddingBottom: 30, paddingBottom: 30,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: '#29292E' borderBottomColor: "#29292E",
}, },
gridContainer: { gridContainer: {
flexDirection: 'row', flexDirection: "row",
flexWrap: 'wrap', flexWrap: "wrap",
justifyContent: 'center', justifyContent: "center",
}, },
gridItem: { gridItem: {
width: '30%', width: "30%",
margin: 4, margin: 4,
padding: 4, padding: 4,
borderRadius: 4, borderRadius: 4,
alignItems: 'center', alignItems: "center",
justifyContent: 'flex-start', justifyContent: "flex-start",
backgroundColor: '#29292E' backgroundColor: "#29292E",
}, },
HDcontainer: { HDcontainer: {
marginTop: 24, marginTop: 24,
paddingHorizontal: 8, paddingHorizontal: 8,
}, },
HDrowContainer: { HDrowContainer: {
flexDirection: 'row', flexDirection: "row",
alignItems: 'center', alignItems: "center",
}, },
HDtext: { HDtext: {
color: 'black', color: "#FBFBFB",
fontSize: 18, fontSize: 18,
margin: 4, margin: 4,
}, },
@ -158,15 +158,15 @@ const styles = StyleSheet.create({
HDbuttonContainer: { HDbuttonContainer: {
marginTop: 20, marginTop: 20,
width: 200, width: 200,
alignSelf: 'center', alignSelf: "flex-start",
}, },
spinnerContainer: { spinnerContainer: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
}, },
LoadingText: { LoadingText: {
color: 'black', color: "black",
fontSize: 18, fontSize: 18,
padding: 10, padding: 10,
}, },
@ -174,9 +174,9 @@ const styles = StyleSheet.create({
borderWidth: 1, borderWidth: 1,
borderRadius: 5, borderRadius: 5,
marginTop: 50, marginTop: 50,
height: 'auto', height: "auto",
alignItems: 'center', alignItems: "center",
justifyContent: 'center', justifyContent: "center",
padding: 10, padding: 10,
}, },
requestDirectMessage: { requestDirectMessage: {
@ -185,51 +185,51 @@ const styles = StyleSheet.create({
marginTop: 20, marginTop: 20,
marginBottom: 50, marginBottom: 50,
height: 500, height: 500,
alignItems: 'center', alignItems: "center",
justifyContent: 'center', justifyContent: "center",
padding: 8, padding: 8,
}, },
approveTransfer: { approveTransfer: {
height: '40%', height: "40%",
marginBottom: 30, marginBottom: 30,
}, },
buttonContainer: { buttonContainer: {
flexDirection: 'row', flexDirection: "row",
marginLeft: 20, marginLeft: 20,
marginTop: 10, marginTop: 10,
marginBottom: 10, marginBottom: 10,
justifyContent: 'space-evenly', justifyContent: "space-evenly",
}, },
badRequestContainer: { badRequestContainer: {
alignItems: 'center', alignItems: "center",
justifyContent: 'center', justifyContent: "center",
padding: 20, padding: 20,
}, },
invalidMessageText: { invalidMessageText: {
color: 'black', color: "black",
fontSize: 16, fontSize: 16,
textAlign: 'center', textAlign: "center",
marginBottom: 20, marginBottom: 20,
}, },
container: { container: {
flex: 1, flex: 1,
alignItems: 'center', alignItems: "center",
justifyContent: 'center', justifyContent: "center",
marginBottom: 10, marginBottom: 10,
paddingHorizontal: 20, paddingHorizontal: 20,
}, },
modalContentContainer: { modalContentContainer: {
display: 'flex', display: "flex",
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
borderRadius: 34, borderRadius: 34,
borderBottomStartRadius: 0, borderBottomStartRadius: 0,
borderBottomEndRadius: 0, borderBottomEndRadius: 0,
borderWidth: 1, borderWidth: 1,
width: '100%', width: "100%",
height: '50%', height: "50%",
position: 'absolute', position: "absolute",
backgroundColor: '#0f0f0f', backgroundColor: "#0f0f0f",
bottom: 0, bottom: 0,
}, },
modalOuterContainer: { flex: 1 }, modalOuterContainer: { flex: 1 },
@ -238,32 +238,32 @@ const styles = StyleSheet.create({
height: 50, height: 50,
borderRadius: 8, borderRadius: 8,
marginVertical: 16, marginVertical: 16,
overflow: 'hidden', overflow: "hidden",
}, },
space: { space: {
width: 50, width: 50,
}, },
flexRow: { flexRow: {
display: 'flex', display: "flex",
flexDirection: 'row', flexDirection: "row",
justifyContent: 'space-between', justifyContent: "space-between",
alignItems: 'center', alignItems: "center",
marginTop: 20, marginTop: 20,
paddingHorizontal: 16, paddingHorizontal: 16,
marginBottom: 10, marginBottom: 10,
}, },
marginVertical8: { marginVertical8: {
marginVertical: 8, marginVertical: 8,
textAlign: 'center', textAlign: "center",
}, },
subHeading: { subHeading: {
textAlign: 'center', textAlign: "center",
marginBottom: 10, marginBottom: 10,
marginTop: 10, marginTop: 10,
fontSize: 20 fontSize: 20,
}, },
centerText: { centerText: {
textAlign: 'center', textAlign: "center",
}, },
messageBody: { messageBody: {
borderWidth: 1, borderWidth: 1,
@ -276,48 +276,48 @@ const styles = StyleSheet.create({
marginTop: 20, marginTop: 20,
}, },
dappDetails: { dappDetails: {
display: 'flex', display: "flex",
alignItems: 'center', alignItems: "center",
}, },
dataBoxContainer: { dataBoxContainer: {
marginBottom: 10, marginBottom: 10,
backgroundColor: '#29292E', backgroundColor: "#29292E",
border: 'none' border: "none",
}, },
dataBoxLabel: { dataBoxLabel: {
fontSize: 18, fontSize: 18,
fontWeight: 'bold', fontWeight: "bold",
marginBottom: 3, marginBottom: 3,
color: 'black', color: "black",
}, },
dataBox: { dataBox: {
borderWidth: 1, borderWidth: 1,
borderColor: '#ccc', borderColor: "#ccc",
padding: 10, padding: 10,
borderRadius: 5, borderRadius: 5,
}, },
dataBoxData: { dataBoxData: {
fontSize: 16, fontSize: 16,
color: 'white', color: "white",
}, },
transactionText: { transactionText: {
padding: 8, padding: 8,
fontSize: 18, fontSize: 18,
fontWeight: 'bold', fontWeight: "bold",
color: 'black', color: "black",
}, },
balancePadding: { balancePadding: {
padding: 8, padding: 8,
}, },
noActiveSessions: { noActiveSessions: {
display: 'flex', display: "flex",
alignItems: 'center', alignItems: "center",
marginTop: 20, marginTop: 20,
marginBottom: 20, marginBottom: 20,
}, },
disconnectSession: { disconnectSession: {
display: 'flex', display: "flex",
justifyContent: 'center', justifyContent: "center",
}, },
sessionItem: { sessionItem: {
paddingLeft: 12, paddingLeft: 12,
@ -334,7 +334,7 @@ const styles = StyleSheet.create({
margin: 0, margin: 0,
}, },
selectNetworkText: { selectNetworkText: {
fontWeight: 'bold', fontWeight: "bold",
marginVertical: 10, marginVertical: 10,
}, },
transactionFeesInput: { marginBottom: 10 }, transactionFeesInput: { marginBottom: 10 },
@ -345,7 +345,7 @@ const styles = StyleSheet.create({
paddingVertical: 5, paddingVertical: 5,
}, },
transactionLabel: { transactionLabel: {
fontWeight: '700', fontWeight: "700",
padding: 8, padding: 8,
}, },
linkContainer: { linkContainer: {
@ -354,7 +354,7 @@ const styles = StyleSheet.create({
networksButton: { networksButton: {
marginTop: 12, marginTop: 12,
marginBottom: 20, marginBottom: 20,
} },
}); });
export default styles; export default styles;