diff --git a/public/Logo.svg b/public/Logo.svg new file mode 100644 index 0000000..2efbd79 --- /dev/null +++ b/public/Logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/App.tsx b/src/App.tsx index 9716b8d..f003057 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,6 +33,7 @@ import { useNetworks } from "./context/NetworksContext"; import { NETWORK_METHODS } from "./utils/wallet-connect/common-data"; import { COSMOS_METHODS } from "./utils/wallet-connect/COSMOSData"; import styles from "./styles/stylesheet"; +import { Header } from "./components/Header"; const Stack = createStackNavigator(); @@ -310,7 +311,7 @@ const App = (): React.JSX.Element => { name="EditNetwork" component={EditNetwork} options={{ - title: "Edit Network", + header: () =>
, }} /> = ({ children }) => ( +export const Container: React.FC< + PropsWithChildren<{ boxProps?: BoxProps }> +> = ({ children, boxProps = {} }) => ( {children} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..15a9be0 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,68 @@ +import { Divider, Stack, SvgIcon, Typography } from "@mui/material"; +import React from "react"; +import { Text } from "react-native-paper"; + +export const Header: React.FC<{ title: string }> = ({ title }) => ( + + + + + + + + + + + + + + + {title} + +); diff --git a/src/index.tsx b/src/index.tsx index 78e53b0..8459247 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -65,6 +65,7 @@ const muiTheme = createTheme({ }, MuiTypography: { defaultProps: { + color: "text.primary", fontWeight: 400, }, }, @@ -91,6 +92,12 @@ const muiTheme = createTheme({ default: "#0F0F0F", paper: "#18181A", }, + text: { + primary: "#FBFBFB", + }, + info: { + main: "#FBFBFB", + }, }, }); diff --git a/src/screens/EditNetwork.tsx b/src/screens/EditNetwork.tsx index c721208..26ca890 100644 --- a/src/screens/EditNetwork.tsx +++ b/src/screens/EditNetwork.tsx @@ -1,27 +1,30 @@ -import React, { useCallback } from 'react'; -import { View } from 'react-native'; -import { useForm, Controller, FieldErrors } from 'react-hook-form'; -import { TextInput, Button, HelperText, Text } from 'react-native-paper'; -import { z } from 'zod'; +import React, { useCallback } from "react"; +import { useForm, Controller, FieldErrors } from "react-hook-form"; +import { TextInput, HelperText } from "react-native-paper"; +import { z } from "zod"; -import { zodResolver } from '@hookform/resolvers/zod'; +import { zodResolver } from "@hookform/resolvers/zod"; import { NativeStackNavigationProp, NativeStackScreenProps, -} from '@react-navigation/native-stack'; -import { useNavigation } from '@react-navigation/native'; +} from "@react-navigation/native-stack"; +import { useNavigation } from "@react-navigation/native"; -import { setInternetCredentials } from '../utils/key-store'; -import { StackParamsList } from '../types'; -import styles from '../styles/stylesheet'; -import { retrieveNetworksData } from '../utils/accounts'; -import { useNetworks } from '../context/NetworksContext'; +import { setInternetCredentials } from "../utils/key-store"; +import { StackParamsList } from "../types"; +import styles from "../styles/stylesheet"; +import { retrieveNetworksData } from "../utils/accounts"; +import { useNetworks } from "../context/NetworksContext"; import { COSMOS, EIP155, EMPTY_FIELD_ERROR, INVALID_URL_ERROR, -} from '../utils/constants'; +} from "../utils/constants"; +import { Container } from "../components/Container"; +import { Button, Divider, Grid, Typography } from "@mui/material"; +import { LoadingButton } from "@mui/lab"; +import { ArrowBack } from "@mui/icons-material"; const ethNetworksFormSchema = z.object({ // Adding type field for resolving typescript error @@ -31,7 +34,7 @@ const ethNetworksFormSchema = z.object({ blockExplorerUrl: z .string() .url({ message: INVALID_URL_ERROR }) - .or(z.literal('')), + .or(z.literal("")), }); const cosmosNetworksFormDataSchema = z.object({ @@ -41,14 +44,14 @@ const cosmosNetworksFormDataSchema = z.object({ blockExplorerUrl: z .string() .url({ message: INVALID_URL_ERROR }) - .or(z.literal('')), + .or(z.literal("")), gasPrice: z .string() .nonempty({ message: EMPTY_FIELD_ERROR }) .regex(/^\d+(\.\d+)?$/), }); -type EditNetworkProps = NativeStackScreenProps; +type EditNetworkProps = NativeStackScreenProps; const EditNetwork = ({ route }: EditNetworkProps) => { const { setNetworksData } = useNetworks(); @@ -67,7 +70,7 @@ const EditNetwork = ({ route }: EditNetworkProps) => { formState: { errors, isSubmitting }, handleSubmit, } = useForm>({ - mode: 'onChange', + mode: "onChange", resolver: zodResolver(networksFormDataSchema), }); @@ -77,121 +80,148 @@ const EditNetwork = ({ route }: EditNetworkProps) => { const { type, ...dataWithoutType } = data; const newNetworkData = { ...networkData, ...dataWithoutType }; const index = retrievedNetworksData.findIndex( - network => network.networkId === networkData.networkId, + (network) => network.networkId === networkData.networkId, ); retrievedNetworksData.splice(index, 1, newNetworkData); await setInternetCredentials( - 'networks', - '_', + "networks", + "_", JSON.stringify(retrievedNetworksData), ); setNetworksData(retrievedNetworksData); - navigation.navigate('Home'); + navigation.navigate("Home"); }, [networkData, navigation, setNetworksData], ); + const isCosmos = networkData.namespace === COSMOS; return ( - - - - Edit {networkData?.networkName} details - - - ( - <> - onChange(textValue)} - /> - {errors.networkName?.message} - - )} - /> - ( - <> - onChange(textValue)} - /> - {errors.rpcUrl?.message} - - )} - /> - - ( - <> - onChange(textValue)} - /> - - {errors.blockExplorerUrl?.message} - - - )} - /> - {networkData.namespace === COSMOS && ( - ( - <> - - - { - ( - errors as FieldErrors< - z.infer - > - ).gasPrice?.message - } - - - )} - /> - )} + - + + Edit Network + + + + Edit {networkData?.networkName} details + + + + + ( + <> + onChange(textValue)} + /> + + {errors.networkName?.message} + + + )} + /> + + + ( + <> + onChange(textValue)} + /> + {errors.rpcUrl?.message} + + )} + /> + + + + ( + <> + onChange(textValue)} + /> + + {errors.blockExplorerUrl?.message} + + + )} + /> + + {isCosmos && ( + + ( + <> + + + { + ( + errors as FieldErrors< + z.infer + > + ).gasPrice?.message + } + + + )} + /> + + )} + + + {isSubmitting ? "Adding" : "Submit"} + + + ); };