style: accordions on home screen

This commit is contained in:
Cody Bender 2024-08-09 13:39:08 -04:00
parent cc2e608bc4
commit 1e0a0e66cc
5 changed files with 49 additions and 19 deletions

View File

@ -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",

View File

@ -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

View File

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

View File

@ -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",
},
},
});

View File

@ -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"