style: accordions on home screen
This commit is contained in:
parent
181f9e8b7d
commit
45e045d956
@ -13,6 +13,7 @@
|
||||
"@ethersproject/shims": "^5.7.0",
|
||||
"@hookform/resolvers": "^3.3.4",
|
||||
"@json-rpc-tools/utils": "^1.7.6",
|
||||
"@mui/icons-material": "^5.16.7",
|
||||
"@mui/lab": "^5.0.0-alpha.173",
|
||||
"@mui/material": "^5.16.4",
|
||||
"@react-navigation/elements": "^1.3.30",
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { TouchableOpacity, View } from "react-native";
|
||||
import { List } from "react-native-paper";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
|
||||
@ -16,7 +17,13 @@ import ConfirmDialog from "./ConfirmDialog";
|
||||
import { getNamespaces } from "../utils/wallet-connect/helpers";
|
||||
import ShowPKDialog from "./ShowPKDialog";
|
||||
import { setInternetCredentials } from "../utils/key-store";
|
||||
import { Button, Link, Stack } from "@mui/material";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionSummary,
|
||||
Button,
|
||||
Link,
|
||||
Stack,
|
||||
} from "@mui/material";
|
||||
import { LoadingButton } from "@mui/lab";
|
||||
|
||||
const Accounts = () => {
|
||||
@ -124,13 +131,12 @@ const Accounts = () => {
|
||||
updateAccounts={updateAccounts}
|
||||
pathCode={pathCode}
|
||||
/>
|
||||
<List.Accordion
|
||||
title={`Account ${currentIndex + 1}`}
|
||||
expanded={expanded}
|
||||
onPress={handlePress}
|
||||
>
|
||||
<Accordion expanded={expanded} onClick={handlePress}>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
>{`Account ${currentIndex + 1}`}</AccordionSummary>
|
||||
{renderAccountItems()}
|
||||
</List.Accordion>
|
||||
</Accordion>
|
||||
|
||||
<Stack direction="row" spacing={3} sx={{ mt: 4 }}>
|
||||
<LoadingButton
|
||||
|
@ -1,10 +1,12 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import { List } from 'react-native-paper';
|
||||
import React, { useState } from "react";
|
||||
import { View } from "react-native";
|
||||
import { List } from "react-native-paper";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
|
||||
import { NetworkDropdownProps, NetworksDataState } from '../types';
|
||||
import styles from '../styles/stylesheet';
|
||||
import { useNetworks } from '../context/NetworksContext';
|
||||
import { NetworkDropdownProps, NetworksDataState } from "../types";
|
||||
import styles from "../styles/stylesheet";
|
||||
import { useNetworks } from "../context/NetworksContext";
|
||||
import { Accordion, AccordionSummary } from "@mui/material";
|
||||
|
||||
const NetworkDropdown = ({ updateNetwork }: NetworkDropdownProps) => {
|
||||
const { networksData, selectedNetwork, setSelectedNetwork } = useNetworks();
|
||||
@ -19,18 +21,19 @@ const NetworkDropdown = ({ updateNetwork }: NetworkDropdownProps) => {
|
||||
|
||||
return (
|
||||
<View style={styles.networkDropdown}>
|
||||
<List.Accordion
|
||||
title={selectedNetwork!.networkName}
|
||||
expanded={expanded}
|
||||
onPress={() => setExpanded(!expanded)}>
|
||||
{networksData.map(networkData => (
|
||||
<Accordion expanded={expanded} onClick={() => setExpanded(!expanded)}>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
{selectedNetwork!.networkName}
|
||||
</AccordionSummary>
|
||||
|
||||
{networksData.map((networkData) => (
|
||||
<List.Item
|
||||
key={networkData.networkId}
|
||||
title={networkData.networkName}
|
||||
onPress={() => handleNetworkPress(networkData)}
|
||||
/>
|
||||
))}
|
||||
</List.Accordion>
|
||||
</Accordion>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
@ -39,6 +39,15 @@ const navigationTheme: typeof DarkTheme = {
|
||||
|
||||
const muiTheme = createTheme({
|
||||
components: {
|
||||
MuiAccordion: {
|
||||
defaultProps: {
|
||||
sx: {
|
||||
border: "1px solid #48474F",
|
||||
borderBottomRightRadius: 3,
|
||||
borderBottomLeftRadius: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
defaultProps: {
|
||||
color: "primary",
|
||||
@ -71,6 +80,10 @@ const muiTheme = createTheme({
|
||||
error: {
|
||||
main: "#B20710",
|
||||
},
|
||||
background: {
|
||||
default: "#0F0F0F",
|
||||
paper: "#18181A",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -2602,6 +2602,13 @@
|
||||
resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.4.tgz#a34de72acd7e81fdbcc7eeb07786205e90dda148"
|
||||
integrity sha512-rNdHXhclwjEZnK+//3SR43YRx0VtjdHnUFhMSGYmAMJve+KiwEja/41EYh8V3pZKqF2geKyfcFUenTfDTYUR4w==
|
||||
|
||||
"@mui/icons-material@^5.16.7":
|
||||
version "5.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.16.7.tgz#e27f901af792065efc9f3d75d74a66af7529a10a"
|
||||
integrity sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.23.9"
|
||||
|
||||
"@mui/lab@^5.0.0-alpha.173":
|
||||
version "5.0.0-alpha.173"
|
||||
resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.173.tgz#a0f9696d93a765b48d69a7da5aaca0affa510ae8"
|
||||
|
Loading…
Reference in New Issue
Block a user