style: sign message and use layout component
This commit is contained in:
parent
393a42fceb
commit
ec3617ad42
32
src/components/Layout.tsx
Normal file
32
src/components/Layout.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
@ -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>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user