style: accordions on home screen

This commit is contained in:
Cody Bender 2024-08-09 13:39:08 -04:00
parent 181f9e8b7d
commit 45e045d956
5 changed files with 49 additions and 19 deletions

View File

@ -13,6 +13,7 @@
"@ethersproject/shims": "^5.7.0", "@ethersproject/shims": "^5.7.0",
"@hookform/resolvers": "^3.3.4", "@hookform/resolvers": "^3.3.4",
"@json-rpc-tools/utils": "^1.7.6", "@json-rpc-tools/utils": "^1.7.6",
"@mui/icons-material": "^5.16.7",
"@mui/lab": "^5.0.0-alpha.173", "@mui/lab": "^5.0.0-alpha.173",
"@mui/material": "^5.16.4", "@mui/material": "^5.16.4",
"@react-navigation/elements": "^1.3.30", "@react-navigation/elements": "^1.3.30",

View File

@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { TouchableOpacity, View } from "react-native"; import { TouchableOpacity, View } from "react-native";
import { List } from "react-native-paper"; import { List } from "react-native-paper";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack"; import { NativeStackNavigationProp } from "@react-navigation/native-stack";
@ -16,7 +17,13 @@ import ConfirmDialog from "./ConfirmDialog";
import { getNamespaces } from "../utils/wallet-connect/helpers"; import { getNamespaces } from "../utils/wallet-connect/helpers";
import ShowPKDialog from "./ShowPKDialog"; import ShowPKDialog from "./ShowPKDialog";
import { setInternetCredentials } from "../utils/key-store"; 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"; import { LoadingButton } from "@mui/lab";
const Accounts = () => { const Accounts = () => {
@ -124,13 +131,12 @@ const Accounts = () => {
updateAccounts={updateAccounts} updateAccounts={updateAccounts}
pathCode={pathCode} pathCode={pathCode}
/> />
<List.Accordion <Accordion expanded={expanded} onClick={handlePress}>
title={`Account ${currentIndex + 1}`} <AccordionSummary
expanded={expanded} expandIcon={<ExpandMoreIcon />}
onPress={handlePress} >{`Account ${currentIndex + 1}`}</AccordionSummary>
>
{renderAccountItems()} {renderAccountItems()}
</List.Accordion> </Accordion>
<Stack direction="row" spacing={3} sx={{ mt: 4 }}> <Stack direction="row" spacing={3} sx={{ mt: 4 }}>
<LoadingButton <LoadingButton

View File

@ -1,10 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import { View } from 'react-native'; import { View } from "react-native";
import { List } from 'react-native-paper'; import { List } from "react-native-paper";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { NetworkDropdownProps, NetworksDataState } from '../types'; import { NetworkDropdownProps, NetworksDataState } from "../types";
import styles from '../styles/stylesheet'; import styles from "../styles/stylesheet";
import { useNetworks } from '../context/NetworksContext'; import { useNetworks } from "../context/NetworksContext";
import { Accordion, AccordionSummary } from "@mui/material";
const NetworkDropdown = ({ updateNetwork }: NetworkDropdownProps) => { const NetworkDropdown = ({ updateNetwork }: NetworkDropdownProps) => {
const { networksData, selectedNetwork, setSelectedNetwork } = useNetworks(); const { networksData, selectedNetwork, setSelectedNetwork } = useNetworks();
@ -19,18 +21,19 @@ const NetworkDropdown = ({ updateNetwork }: NetworkDropdownProps) => {
return ( return (
<View style={styles.networkDropdown}> <View style={styles.networkDropdown}>
<List.Accordion <Accordion expanded={expanded} onClick={() => setExpanded(!expanded)}>
title={selectedNetwork!.networkName} <AccordionSummary expandIcon={<ExpandMoreIcon />}>
expanded={expanded} {selectedNetwork!.networkName}
onPress={() => setExpanded(!expanded)}> </AccordionSummary>
{networksData.map(networkData => (
{networksData.map((networkData) => (
<List.Item <List.Item
key={networkData.networkId} key={networkData.networkId}
title={networkData.networkName} title={networkData.networkName}
onPress={() => handleNetworkPress(networkData)} onPress={() => handleNetworkPress(networkData)}
/> />
))} ))}
</List.Accordion> </Accordion>
</View> </View>
); );
}; };

View File

@ -39,6 +39,15 @@ const navigationTheme: typeof DarkTheme = {
const muiTheme = createTheme({ const muiTheme = createTheme({
components: { components: {
MuiAccordion: {
defaultProps: {
sx: {
border: "1px solid #48474F",
borderBottomRightRadius: 3,
borderBottomLeftRadius: 3,
},
},
},
MuiButton: { MuiButton: {
defaultProps: { defaultProps: {
color: "primary", color: "primary",
@ -71,6 +80,10 @@ const muiTheme = createTheme({
error: { error: {
main: "#B20710", 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" resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.4.tgz#a34de72acd7e81fdbcc7eeb07786205e90dda148"
integrity sha512-rNdHXhclwjEZnK+//3SR43YRx0VtjdHnUFhMSGYmAMJve+KiwEja/41EYh8V3pZKqF2geKyfcFUenTfDTYUR4w== 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": "@mui/lab@^5.0.0-alpha.173":
version "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" resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.173.tgz#a0f9696d93a765b48d69a7da5aaca0affa510ae8"