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

style: sign message and use layout component

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>
);
};

404
src/screens/AddNetwork.tsx
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,141 +213,154 @@ const AddNetwork = () => {
}, [namespace, reset]); }, [namespace, reset]);
return ( return (
<Container boxProps={{ sx: { backgroundColor: "inherit" } }}> <Layout title="Add Network">
<Button <SelectNetworkType updateNetworkType={updateNetworkType} />
startIcon={<ArrowBack />} <Divider flexItem sx={{ my: 4 }} />
color="info"
sx={{ mb: 4 }}
onClick={() => navigation.navigate("Home")}
>
Home
</Button>
<Typography variant="h4" sx={{ mb: 4 }}>
Add Network
</Typography>
<Container>
<SelectNetworkType updateNetworkType={updateNetworkType} />
<Divider flexItem sx={{ my: 4 }} />
<Grid container spacing={2} sx={{ px: 1 }}> <Grid container spacing={2} sx={{ px: 1 }}>
<Grid item xs={6}> <Grid item xs={6}>
<Controller
control={control}
name="chainId"
defaultValue=""
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
value={value}
label="Chain ID"
onBlur={onBlur}
onChangeText={(textValue) => onChange(textValue)}
/>
<HelperText type="error">{errors.chainId?.message}</HelperText>
</>
)}
/>
</Grid>
<Grid item xs={6}>
<Controller
control={control}
defaultValue=""
name="networkName"
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
label="Network Name"
value={value}
onBlur={onBlur}
onChangeText={(textValue) => onChange(textValue)}
/>
<HelperText type="error">
{errors.networkName?.message}
</HelperText>
</>
)}
/>
</Grid>
<Grid item xs={6}>
<Controller
control={control}
name="rpcUrl"
defaultValue=""
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
label="New RPC URL"
onBlur={onBlur}
value={value}
onChangeText={(textValue) => onChange(textValue)}
/>
<HelperText type="error">{errors.rpcUrl?.message}</HelperText>
</>
)}
/>
</Grid>
<Grid item xs={6}>
<Controller
control={control}
defaultValue=""
name="blockExplorerUrl"
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
value={value}
label="Block Explorer URL (Optional)"
onBlur={onBlur}
onChangeText={(textValue) => onChange(textValue)}
/>
<HelperText type="error">
{errors.blockExplorerUrl?.message}
</HelperText>
</>
)}
/>
</Grid>
<Grid item xs={namespace === EIP155 ? 12 : 6}>
<Controller
control={control}
name="coinType"
defaultValue=""
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
value={value}
label="Coin Type"
onBlur={onBlur}
onChangeText={onChange}
/>
<HelperText type="error">{errors.coinType?.message}</HelperText>
</>
)}
/>
</Grid>
{namespace === EIP155 ? (
<Grid item xs={12}>
<Controller <Controller
control={control} control={control}
name="chainId" name="currencySymbol"
defaultValue="" defaultValue=""
render={({ field: { onChange, onBlur, value } }) => ( render={({ field: { onChange, onBlur, value } }) => (
<> <>
<TextInput <TextInput
mode="outlined" mode="outlined"
value={value} value={value}
label="Chain ID" label="Currency Symbol"
onBlur={onBlur} onBlur={onBlur}
onChangeText={(textValue) => onChange(textValue)} onChangeText={(textValue) => onChange(textValue)}
/> />
<HelperText type="error"> <HelperText type="error">
{errors.chainId?.message} {
(
errors as FieldErrors<
z.infer<typeof ethNetworkDataSchema>
>
).currencySymbol?.message
}
</HelperText> </HelperText>
</> </>
)} )}
/> />
</Grid> </Grid>
) : (
<Grid item xs={6}> <>
<Controller <Grid item xs={6}>
control={control}
defaultValue=""
name="networkName"
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
label="Network Name"
value={value}
onBlur={onBlur}
onChangeText={(textValue) => onChange(textValue)}
/>
<HelperText type="error">
{errors.networkName?.message}
</HelperText>
</>
)}
/>
</Grid>
<Grid item xs={6}>
<Controller
control={control}
name="rpcUrl"
defaultValue=""
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
label="New RPC URL"
onBlur={onBlur}
value={value}
onChangeText={(textValue) => onChange(textValue)}
/>
<HelperText type="error">{errors.rpcUrl?.message}</HelperText>
</>
)}
/>
</Grid>
<Grid item xs={6}>
<Controller
control={control}
defaultValue=""
name="blockExplorerUrl"
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
value={value}
label="Block Explorer URL (Optional)"
onBlur={onBlur}
onChangeText={(textValue) => onChange(textValue)}
/>
<HelperText type="error">
{errors.blockExplorerUrl?.message}
</HelperText>
</>
)}
/>
</Grid>
<Grid item xs={namespace === EIP155 ? 12 : 6}>
<Controller
control={control}
name="coinType"
defaultValue=""
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
value={value}
label="Coin Type"
onBlur={onBlur}
onChangeText={onChange}
/>
<HelperText type="error">
{errors.coinType?.message}
</HelperText>
</>
)}
/>
</Grid>
{namespace === EIP155 ? (
<Grid item xs={12}>
<Controller <Controller
control={control} control={control}
name="currencySymbol" name="nativeDenom"
defaultValue="" defaultValue=""
render={({ field: { onChange, onBlur, value } }) => ( render={({ field: { onChange, onBlur, value } }) => (
<> <>
<TextInput <TextInput
mode="outlined" mode="outlined"
value={value} value={value}
label="Currency Symbol" label="Native Denom"
onBlur={onBlur} onBlur={onBlur}
onChangeText={(textValue) => onChange(textValue)} onChangeText={(textValue) => onChange(textValue)}
/> />
@ -356,112 +368,82 @@ const AddNetwork = () => {
{ {
( (
errors as FieldErrors< errors as FieldErrors<
z.infer<typeof ethNetworkDataSchema> z.infer<typeof cosmosNetworkDataSchema>
> >
).currencySymbol?.message ).nativeDenom?.message
} }
</HelperText> </HelperText>
</> </>
)} )}
/> />
</Grid> </Grid>
) : ( <Grid item xs={6}>
<> <Controller
<Grid item xs={6}> control={control}
<Controller name="addressPrefix"
control={control} defaultValue=""
name="nativeDenom" render={({ field: { onChange, onBlur, value } }) => (
defaultValue="" <>
render={({ field: { onChange, onBlur, value } }) => ( <TextInput
<> mode="outlined"
<TextInput value={value}
mode="outlined" label="Address Prefix"
value={value} onBlur={onBlur}
label="Native Denom" onChangeText={(textValue) => onChange(textValue)}
onBlur={onBlur} />
onChangeText={(textValue) => onChange(textValue)} <HelperText type="error">
/> {
<HelperText type="error"> (
{ errors as FieldErrors<
( z.infer<typeof cosmosNetworkDataSchema>
errors as FieldErrors< >
z.infer<typeof cosmosNetworkDataSchema> ).addressPrefix?.message
> }
).nativeDenom?.message </HelperText>
} </>
</HelperText> )}
</> />
)} </Grid>
/> <Grid item xs={6}>
</Grid> <Controller
<Grid item xs={6}> control={control}
<Controller name="gasPrice"
control={control} defaultValue=""
name="addressPrefix" render={({ field: { onChange, onBlur, value } }) => (
defaultValue="" <>
render={({ field: { onChange, onBlur, value } }) => ( <TextInput
<> mode="outlined"
<TextInput value={value}
mode="outlined" label="Gas Price"
value={value} onBlur={onBlur}
label="Address Prefix" onChangeText={onChange}
onBlur={onBlur} />
onChangeText={(textValue) => onChange(textValue)} <HelperText type="error">
/> {
<HelperText type="error"> (
{ errors as FieldErrors<
( z.infer<typeof cosmosNetworkDataSchema>
errors as FieldErrors< >
z.infer<typeof cosmosNetworkDataSchema> ).gasPrice?.message
> }
).addressPrefix?.message </HelperText>
} </>
</HelperText> )}
</> />
)} </Grid>
/> </>
</Grid> )}
<Grid item xs={6}> </Grid>
<Controller <LoadingButton
control={control} variant="contained"
name="gasPrice" loading={isSubmitting}
defaultValue="" disabled={isSubmitting}
render={({ field: { onChange, onBlur, value } }) => ( onClick={handleSubmit(submit)}
<> sx={{ minWidth: "200px", px: 4, py: 1, mt: 2 }}
<TextInput >
mode="outlined" {isSubmitting ? "Adding" : "Submit"}
value={value} </LoadingButton>
label="Gas Price" </Layout>
onBlur={onBlur}
onChangeText={onChange}
/>
<HelperText type="error">
{
(
errors as FieldErrors<
z.infer<typeof cosmosNetworkDataSchema>
>
).gasPrice?.message
}
</HelperText>
</>
)}
/>
</Grid>
</>
)}
</Grid>
<LoadingButton
variant="contained"
loading={isSubmitting}
disabled={isSubmitting}
onClick={handleSubmit(submit)}
sx={{ minWidth: "200px", px: 4, py: 1, mt: 2 }}
>
{isSubmitting ? "Adding" : "Submit"}
</LoadingButton>
</Container>
</Container>
); );
}; };

230
src/screens/EditNetwork.tsx
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,127 +98,114 @@ 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 <Typography fontSize="1.5rem" fontWeight={500}>
startIcon={<ArrowBack />} Edit {networkData?.networkName} details
color="info"
sx={{ mb: 4 }}
onClick={() => navigation.navigate("Home")}
>
Home
</Button>
<Typography variant="h4" sx={{ mb: 4 }}>
Edit Network
</Typography> </Typography>
<Container> <Divider flexItem sx={{ my: 4 }} />
<Typography fontSize="1.5rem" fontWeight={500}> <Grid container spacing={2}>
Edit {networkData?.networkName} details <Grid item xs={6}>
</Typography> <Controller
<Divider flexItem sx={{ my: 4 }} /> control={control}
<Grid container spacing={2}> defaultValue={networkData.networkName}
<Grid item xs={6}> name="networkName"
<Controller render={({ field: { onChange, onBlur, value } }) => (
control={control} <>
defaultValue={networkData.networkName} <TextInput
name="networkName" mode="outlined"
render={({ field: { onChange, onBlur, value } }) => ( label="Network Name"
<> value={value}
<TextInput onBlur={onBlur}
mode="outlined" onChangeText={(textValue) => onChange(textValue)}
label="Network Name" />
value={value} <HelperText type="error">
onBlur={onBlur} {errors.networkName?.message}
onChangeText={(textValue) => onChange(textValue)} </HelperText>
/> </>
<HelperText type="error"> )}
{errors.networkName?.message} />
</HelperText>
</>
)}
/>
</Grid>
<Grid item xs={6}>
<Controller
control={control}
name="rpcUrl"
defaultValue={networkData.rpcUrl}
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
label="New RPC URL"
onBlur={onBlur}
value={value}
onChangeText={(textValue) => onChange(textValue)}
/>
<HelperText type="error">{errors.rpcUrl?.message}</HelperText>
</>
)}
/>
</Grid>
<Grid item xs={isCosmos ? 6 : 12}>
<Controller
control={control}
defaultValue={networkData.blockExplorerUrl}
name="blockExplorerUrl"
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
value={value}
label="Block Explorer URL (Optional)"
onBlur={onBlur}
onChangeText={(textValue) => onChange(textValue)}
/>
<HelperText type="error">
{errors.blockExplorerUrl?.message}
</HelperText>
</>
)}
/>
</Grid>
{isCosmos && (
<Grid item xs={6}>
<Controller
control={control}
name="gasPrice"
defaultValue={networkData.gasPrice}
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
value={value}
label="Gas Price"
onBlur={onBlur}
onChangeText={onChange}
/>
<HelperText type="error">
{
(
errors as FieldErrors<
z.infer<typeof cosmosNetworksFormDataSchema>
>
).gasPrice?.message
}
</HelperText>
</>
)}
/>
</Grid>
)}
</Grid> </Grid>
<LoadingButton <Grid item xs={6}>
variant="contained" <Controller
loading={isSubmitting} control={control}
disabled={isSubmitting} name="rpcUrl"
onClick={handleSubmit(submit)} defaultValue={networkData.rpcUrl}
sx={{ minWidth: "200px", px: 4, py: 1, mt: 2 }} render={({ field: { onChange, onBlur, value } }) => (
> <>
{isSubmitting ? "Adding" : "Submit"} <TextInput
</LoadingButton> mode="outlined"
</Container> label="New RPC URL"
</Container> onBlur={onBlur}
value={value}
onChangeText={(textValue) => onChange(textValue)}
/>
<HelperText type="error">{errors.rpcUrl?.message}</HelperText>
</>
)}
/>
</Grid>
<Grid item xs={isCosmos ? 6 : 12}>
<Controller
control={control}
defaultValue={networkData.blockExplorerUrl}
name="blockExplorerUrl"
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
value={value}
label="Block Explorer URL (Optional)"
onBlur={onBlur}
onChangeText={(textValue) => onChange(textValue)}
/>
<HelperText type="error">
{errors.blockExplorerUrl?.message}
</HelperText>
</>
)}
/>
</Grid>
{isCosmos && (
<Grid item xs={6}>
<Controller
control={control}
name="gasPrice"
defaultValue={networkData.gasPrice}
render={({ field: { onChange, onBlur, value } }) => (
<>
<TextInput
mode="outlined"
value={value}
label="Gas Price"
onBlur={onBlur}
onChangeText={onChange}
/>
<HelperText type="error">
{
(
errors as FieldErrors<
z.infer<typeof cosmosNetworksFormDataSchema>
>
).gasPrice?.message
}
</HelperText>
</>
)}
/>
</Grid>
)}
</Grid>
<LoadingButton
variant="contained"
loading={isSubmitting}
disabled={isSubmitting}
onClick={handleSubmit(submit)}
sx={{ minWidth: "200px", px: 4, py: 1, mt: 2 }}
>
{isSubmitting ? "Adding" : "Submit"}
</LoadingButton>
</Layout>
); );
}; };

61
src/screens/SignMessage.tsx
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}> <Text variant="titleMedium">
<View> {account && `Account ${account.index + 1}`}
<Text variant="titleMedium"> </Text>
{account && `Account ${account.index + 1}`} <AccountDetails account={account} />
</Text>
</View>
<View style={styles.accountContainer}>
<AccountDetails account={account} />
</View>
</View>
<TextInput <Stack spacing={4}>
mode="outlined" <Divider flexItem />
placeholder="Enter your message" <TextInput
onChangeText={text => setMessage(text)} mode="outlined"
value={message} placeholder="Enter your message"
/> onChangeText={(text) => setMessage(text)}
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>
); );
}; };