style: sign message and use layout component

This commit is contained in:
Cody Bender 2024-08-09 15:48:23 -04:00
parent 393a42fceb
commit ec3617ad42
4 changed files with 363 additions and 364 deletions

32
src/components/Layout.tsx Normal file
View File

@ -0,0 +1,32 @@
import { Button, Typography } from "@mui/material";
import React, { PropsWithChildren } from "react";
import { Container } from "./Container";
import { ArrowBack } from "@mui/icons-material";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { useNavigation } from "@react-navigation/native";
import { StackParamsList } from "../types";
export const Layout: React.FC<PropsWithChildren<{ title: string }>> = ({
children,
title,
}) => {
const navigation =
useNavigation<NativeStackNavigationProp<StackParamsList>>();
return (
<Container boxProps={{ sx: { backgroundColor: "inherit" } }}>
<Button
startIcon={<ArrowBack />}
color="info"
sx={{ mb: 4 }}
onClick={() => navigation.navigate("Home")}
>
Home
</Button>
<Typography variant="h4" sx={{ mb: 4 }}>
{title}
</Typography>
<Container>{children}</Container>
</Container>
);
};

View File

@ -29,10 +29,9 @@ import {
getInternetCredentials, getInternetCredentials,
setInternetCredentials, setInternetCredentials,
} from "../utils/key-store"; } from "../utils/key-store";
import { Button, Divider, Grid, Typography } from "@mui/material"; import { Divider, Grid } from "@mui/material";
import { Container } from "../components/Container";
import { ArrowBack } from "@mui/icons-material";
import { LoadingButton } from "@mui/lab"; import { LoadingButton } from "@mui/lab";
import { Layout } from "../components/Layout";
const ethNetworkDataSchema = z.object({ const ethNetworkDataSchema = z.object({
chainId: z.string().nonempty({ message: EMPTY_FIELD_ERROR }), chainId: z.string().nonempty({ message: EMPTY_FIELD_ERROR }),
@ -214,19 +213,7 @@ const AddNetwork = () => {
}, [namespace, reset]); }, [namespace, reset]);
return ( return (
<Container boxProps={{ sx: { backgroundColor: "inherit" } }}> <Layout title="Add Network">
<Button
startIcon={<ArrowBack />}
color="info"
sx={{ mb: 4 }}
onClick={() => navigation.navigate("Home")}
>
Home
</Button>
<Typography variant="h4" sx={{ mb: 4 }}>
Add Network
</Typography>
<Container>
<SelectNetworkType updateNetworkType={updateNetworkType} /> <SelectNetworkType updateNetworkType={updateNetworkType} />
<Divider flexItem sx={{ my: 4 }} /> <Divider flexItem sx={{ my: 4 }} />
@ -245,9 +232,7 @@ const AddNetwork = () => {
onBlur={onBlur} onBlur={onBlur}
onChangeText={(textValue) => onChange(textValue)} onChangeText={(textValue) => onChange(textValue)}
/> />
<HelperText type="error"> <HelperText type="error">{errors.chainId?.message}</HelperText>
{errors.chainId?.message}
</HelperText>
</> </>
)} )}
/> />
@ -330,9 +315,7 @@ const AddNetwork = () => {
onBlur={onBlur} onBlur={onBlur}
onChangeText={onChange} onChangeText={onChange}
/> />
<HelperText type="error"> <HelperText type="error">{errors.coinType?.message}</HelperText>
{errors.coinType?.message}
</HelperText>
</> </>
)} )}
/> />
@ -460,8 +443,7 @@ const AddNetwork = () => {
> >
{isSubmitting ? "Adding" : "Submit"} {isSubmitting ? "Adding" : "Submit"}
</LoadingButton> </LoadingButton>
</Container> </Layout>
</Container>
); );
}; };

View File

@ -20,10 +20,9 @@ import {
EMPTY_FIELD_ERROR, EMPTY_FIELD_ERROR,
INVALID_URL_ERROR, INVALID_URL_ERROR,
} from "../utils/constants"; } from "../utils/constants";
import { Container } from "../components/Container"; import { Divider, Grid, Typography } from "@mui/material";
import { Button, Divider, Grid, Typography } from "@mui/material";
import { LoadingButton } from "@mui/lab"; import { LoadingButton } from "@mui/lab";
import { ArrowBack } from "@mui/icons-material"; import { Layout } from "../components/Layout";
const ethNetworksFormSchema = z.object({ const ethNetworksFormSchema = z.object({
// Adding type field for resolving typescript error // Adding type field for resolving typescript error
@ -99,19 +98,7 @@ const EditNetwork = ({ route }: EditNetworkProps) => {
const isCosmos = networkData.namespace === COSMOS; const isCosmos = networkData.namespace === COSMOS;
return ( return (
<Container boxProps={{ sx: { backgroundColor: "inherit" } }}> <Layout title="Edit Network">
<Button
startIcon={<ArrowBack />}
color="info"
sx={{ mb: 4 }}
onClick={() => navigation.navigate("Home")}
>
Home
</Button>
<Typography variant="h4" sx={{ mb: 4 }}>
Edit Network
</Typography>
<Container>
<Typography fontSize="1.5rem" fontWeight={500}> <Typography fontSize="1.5rem" fontWeight={500}>
Edit {networkData?.networkName} details Edit {networkData?.networkName} details
</Typography> </Typography>
@ -218,8 +205,7 @@ const EditNetwork = ({ route }: EditNetworkProps) => {
> >
{isSubmitting ? "Adding" : "Submit"} {isSubmitting ? "Adding" : "Submit"}
</LoadingButton> </LoadingButton>
</Container> </Layout>
</Container>
); );
}; };

View File

@ -1,22 +1,22 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import { View } from 'react-native'; import { Text, TextInput } from "react-native-paper";
import { Button, Text, TextInput } from 'react-native-paper'; import { Button, Divider, Stack } from "@mui/material";
import { NativeStackScreenProps } from '@react-navigation/native-stack'; import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { StackParamsList } from '../types'; import { StackParamsList } from "../types";
import styles from '../styles/stylesheet'; import { signMessage } from "../utils/sign-message";
import { signMessage } from '../utils/sign-message'; import AccountDetails from "../components/AccountDetails";
import AccountDetails from '../components/AccountDetails'; import { Layout } from "../components/Layout";
type SignProps = NativeStackScreenProps<StackParamsList, 'SignMessage'>; type SignProps = NativeStackScreenProps<StackParamsList, "SignMessage">;
const SignMessage = ({ route }: SignProps) => { const SignMessage = ({ route }: SignProps) => {
const namespace = route.params.selectedNamespace; const namespace = route.params.selectedNamespace;
const chainId = route.params.selectedChainId; const chainId = route.params.selectedChainId;
const account = route.params.accountInfo; const account = route.params.accountInfo;
const [message, setMessage] = useState<string>(''); const [message, setMessage] = useState<string>("");
const signMessageHandler = async () => { const signMessageHandler = async () => {
const signedMessage = await signMessage({ const signedMessage = await signMessage({
@ -29,31 +29,30 @@ const SignMessage = ({ route }: SignProps) => {
}; };
return ( return (
<View style={styles.signPage}> <Layout title="Sign Message">
<View style={styles.accountInfo}>
<View>
<Text variant="titleMedium"> <Text variant="titleMedium">
{account && `Account ${account.index + 1}`} {account && `Account ${account.index + 1}`}
</Text> </Text>
</View>
<View style={styles.accountContainer}>
<AccountDetails account={account} /> <AccountDetails account={account} />
</View>
</View>
<Stack spacing={4}>
<Divider flexItem />
<TextInput <TextInput
mode="outlined" mode="outlined"
placeholder="Enter your message" placeholder="Enter your message"
onChangeText={text => setMessage(text)} onChangeText={(text) => setMessage(text)}
value={message} value={message}
/> />
<View style={styles.signButton}> <Button
<Button mode="contained" onPress={signMessageHandler}> variant="contained"
onClick={signMessageHandler}
sx={{ width: "200px", px: 4, py: 1, mt: 2 }}
>
Sign Sign
</Button> </Button>
</View> </Stack>
</View> </Layout>
); );
}; };