From 699cc5379ea678bc42888603756a6d727bb396f5 Mon Sep 17 00:00:00 2001 From: Cody Bender Date: Fri, 9 Aug 2024 16:13:24 -0400 Subject: [PATCH] style: hd path --- src/components/HDPath.tsx | 48 +++++----- src/styles/stylesheet.js | 194 +++++++++++++++++++------------------- 2 files changed, 122 insertions(+), 120 deletions(-) diff --git a/src/components/HDPath.tsx b/src/components/HDPath.tsx index cc38bef..185b33c 100644 --- a/src/components/HDPath.tsx +++ b/src/components/HDPath.tsx @@ -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({ - 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 = ({ handleChange('firstNumber', text)} + onChangeText={(text) => handleChange("firstNumber", text)} value={path.firstNumber} style={styles.HDtextInput} /> - {'\'/'} + {"'/"} handleChange('secondNumber', text)} + onChangeText={(text) => handleChange("secondNumber", text)} value={path.secondNumber} style={styles.HDtextInput} /> @@ -79,19 +80,20 @@ const HDPath = ({ handleChange('thirdNumber', text)} + onChangeText={(text) => handleChange("thirdNumber", text)} value={path.thirdNumber} style={styles.HDtextInput} /> - + disabled={isAccountCreating} + > + {isAccountCreating ? "Adding" : "Add Account"} + ); diff --git a/src/styles/stylesheet.js b/src/styles/stylesheet.js index 13cc1cd..937aa0e 100644 --- a/src/styles/stylesheet.js +++ b/src/styles/stylesheet.js @@ -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;