From 360f3b76bcaef17c07748cb01c74bf6a103e796d Mon Sep 17 00:00:00 2001 From: Cody Bender Date: Sat, 10 Aug 2024 16:09:49 -0400 Subject: [PATCH] style: add back wallet connect button and style add session --- src/App.tsx | 10 ++- src/components/Header.tsx | 143 ++++++++++++++++++++-------------- src/screens/AddSession.tsx | 36 +++++---- src/screens/HomeScreen.tsx | 36 +-------- src/screens/WalletConnect.tsx | 28 +++---- 5 files changed, 127 insertions(+), 126 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 60a69f5..49881f8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import { Button, Snackbar, Surface, Text } from "react-native-paper"; import { TxBody, AuthInfo } from "cosmjs-types/cosmos/tx/v1beta1/tx"; @@ -217,8 +217,10 @@ const App = (): React.JSX.Element => { }; }); + const showWalletConnect = useMemo(() => accounts.length > 0, [accounts]); + return ( - + { component={HomeScreen} options={{ // eslint-disable-next-line react/no-unstable-nested-components - header: () =>
, + header: () => ( +
+ ), }} /> = ({ title }) => { +const WCLogo = () => { + return ( + + ); +}; + +export const Header: React.FC<{ + title: string; + showWalletConnect?: boolean; +}> = ({ title, showWalletConnect }) => { const navigation = useNavigation>(); return ( @@ -22,67 +36,78 @@ export const Header: React.FC<{ title: string }> = ({ title }) => { pl: 2, alignItems: "center", py: 1, + justifyContent: "space-between", }} spacing={1} > - - - {title} + + + + + {title} + + + + {showWalletConnect && ( + + )} ); }; diff --git a/src/screens/AddSession.tsx b/src/screens/AddSession.tsx index 55fa2b3..430cccb 100644 --- a/src/screens/AddSession.tsx +++ b/src/screens/AddSession.tsx @@ -1,22 +1,24 @@ -import React, { useCallback, useState } from 'react'; -import { View } from 'react-native'; -import { Button, Text, TextInput } from 'react-native-paper'; +import React, { useCallback, useState } from "react"; +import { View } from "react-native"; +import { Text, TextInput } from "react-native-paper"; -import { useNavigation } from '@react-navigation/native'; -import { NativeStackNavigationProp } from '@react-navigation/native-stack'; +import { useNavigation } from "@react-navigation/native"; +import { NativeStackNavigationProp } from "@react-navigation/native-stack"; +import { Box, Button } from "@mui/material"; -import { web3WalletPair } from '../utils/wallet-connect/WalletConnectUtils'; -import styles from '../styles/stylesheet'; -import { StackParamsList } from '../types'; -import { useWalletConnect } from '../context/WalletConnectContext'; +import { web3WalletPair } from "../utils/wallet-connect/WalletConnectUtils"; +import styles from "../styles/stylesheet"; +import { StackParamsList } from "../types"; +import { useWalletConnect } from "../context/WalletConnectContext"; +import { Layout } from "../components/Layout"; const AddSession = () => { const navigation = useNavigation>(); - const [currentWCURI, setCurrentWCURI] = useState(''); + const [currentWCURI, setCurrentWCURI] = useState(""); - const {web3wallet} = useWalletConnect(); + const { web3wallet } = useWalletConnect(); const pair = useCallback(async () => { if (!web3wallet) { @@ -24,12 +26,12 @@ const AddSession = () => { } const pairing = await web3WalletPair(web3wallet, { uri: currentWCURI }); - navigation.navigate('WalletConnect'); + navigation.navigate("WalletConnect"); return pairing; }, [currentWCURI, navigation, web3wallet]); return ( - + Enter WalletConnect URI { style={styles.walletConnectUriText} /> - - - + - + ); }; export default AddSession; diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index 4fb3f1e..79e8700 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -1,10 +1,8 @@ import React, { useCallback, useEffect, useState } from "react"; -import { View, ActivityIndicator, Image } from "react-native"; +import { View, ActivityIndicator } from "react-native"; import { Text } from "react-native-paper"; import { Button, Divider, Portal, Snackbar } from "@mui/material"; -import { NativeStackNavigationProp } from "@react-navigation/native-stack"; -import { useNavigation } from "@react-navigation/native"; import { getSdkError } from "@walletconnect/utils"; import { createWallet, resetWallet, retrieveAccounts } from "../utils/accounts"; @@ -15,47 +13,19 @@ import ConfirmDialog from "../components/ConfirmDialog"; import styles from "../styles/stylesheet"; import { useAccounts } from "../context/AccountsContext"; import { useWalletConnect } from "../context/WalletConnectContext"; -import { NetworksDataState, StackParamsList } from "../types"; +import { NetworksDataState } from "../types"; import { useNetworks } from "../context/NetworksContext"; import ImportWalletDialog from "../components/ImportWalletDialog"; import { MnemonicDialog } from "../components/MnemonicDialog"; import { Container } from "../components/Container"; -const WCLogo = () => { - return ( - - ); -}; - const HomeScreen = () => { - const { accounts, setAccounts, setCurrentIndex } = useAccounts(); + const { setAccounts, setCurrentIndex } = useAccounts(); const { networksData, selectedNetwork, setSelectedNetwork, setNetworksData } = useNetworks(); const { setActiveSessions, web3wallet } = useWalletConnect(); - const navigation = - useNavigation>(); - useEffect(() => { - if (accounts.length > 0) { - navigation.setOptions({ - // eslint-disable-next-line react/no-unstable-nested-components - headerRight: () => ( - - ), - }); - } else { - navigation.setOptions({ - headerRight: undefined, - }); - } - }, [navigation, accounts]); - const [isWalletCreated, setIsWalletCreated] = useState(false); const [isWalletCreating, setIsWalletCreating] = useState(false); const [importWalletDialog, setImportWalletDialog] = useState(false); diff --git a/src/screens/WalletConnect.tsx b/src/screens/WalletConnect.tsx index f581930..4728826 100644 --- a/src/screens/WalletConnect.tsx +++ b/src/screens/WalletConnect.tsx @@ -1,11 +1,12 @@ -import React, { useEffect } from 'react'; -import { Image, TouchableOpacity, View } from 'react-native'; -import { List, Text } from 'react-native-paper'; +import React, { useEffect } from "react"; +import { Image, TouchableOpacity, View } from "react-native"; +import { List, Text } from "react-native-paper"; -import { getSdkError } from '@walletconnect/utils'; +import { getSdkError } from "@walletconnect/utils"; -import { useWalletConnect } from '../context/WalletConnectContext'; -import styles from '../styles/stylesheet'; +import { useWalletConnect } from "../context/WalletConnectContext"; +import styles from "../styles/stylesheet"; +import { Layout } from "../components/Layout"; export default function WalletConnect() { const { web3wallet, activeSessions, setActiveSessions } = useWalletConnect(); @@ -13,7 +14,7 @@ export default function WalletConnect() { const disconnect = async (sessionId: string) => { await web3wallet!.disconnectSession({ topic: sessionId, - reason: getSdkError('USER_DISCONNECTED'), + reason: getSdkError("USER_DISCONNECTED"), }); const sessions = web3wallet?.getActiveSessions() || {}; setActiveSessions(sessions); @@ -26,12 +27,10 @@ export default function WalletConnect() { }, [web3wallet, setActiveSessions]); return ( - + {Object.keys(activeSessions).length > 0 ? ( <> - - Active Sessions - + {Object.entries(activeSessions).map(([sessionId, session]) => ( ( <> - {session.peer.metadata.icons[0].endsWith('.svg') ? ( + {session.peer.metadata.icons[0].endsWith(".svg") ? ( SvgURI peerMetaDataIcon @@ -60,7 +59,8 @@ export default function WalletConnect() { right={() => ( disconnect(sessionId)} - style={styles.disconnectSession}> + style={styles.disconnectSession} + > )} @@ -73,6 +73,6 @@ export default function WalletConnect() { You have no active sessions )} - + ); }