style: add back wallet connect button and style add session

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 (
-    <Surface id="surfface" style={styles.appSurface}>
+    <Surface style={styles.appSurface}>
       <Stack.Navigator
         screenOptions={{
           headerBackTitleVisible: true,
@@ -229,7 +231,9 @@ const App = (): React.JSX.Element => {
           component={HomeScreen}
           options={{
             // eslint-disable-next-line react/no-unstable-nested-components
-            header: () => <Header title="Wallet" />,
+            header: () => (
+              <Header title="Wallet" showWalletConnect={showWalletConnect} />
+            ),
           }}
         />
         <Stack.Screen

src/components/Header.tsx

@@ -8,10 +8,24 @@ import {
 } from "@mui/material";
 import React from "react";
 import { useNavigation } from "@react-navigation/native";
+import { Image } from "react-native";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { StackParamsList } from "../types";
+import styles from "../styles/stylesheet";
 
-export const Header: React.FC<{ title: string }> = ({ title }) => {
+const WCLogo = () => {
+  return (
+    <Image
+      style={styles.walletConnectLogo}
+      source={require("../assets/WalletConnect-Icon-Blueberry.png")}
+    />
+  );
+};
+
+export const Header: React.FC<{
+  title: string;
+  showWalletConnect?: boolean;
+}> = ({ title, showWalletConnect }) => {
   const navigation =
     useNavigation<NativeStackNavigationProp<StackParamsList>>();
   return (
@@ -22,9 +36,11 @@ export const Header: React.FC<{ title: string }> = ({ title }) => {
         pl: 2,
         alignItems: "center",
         py: 1,
+        justifyContent: "space-between",
       }}
       spacing={1}
     >
+      <Stack direction="row">
         <Button
           component={Link}
           onClick={() => {
@@ -80,9 +96,18 @@ export const Header: React.FC<{ title: string }> = ({ title }) => {
           flexItem
           orientation="vertical"
           color="#FBFBFB"
-        sx={{ height: "75%", alignSelf: "center" }}
+          sx={{ height: "20px", width: "1px", alignSelf: "center" }}
         />
-      <Typography fontSize="1.25rem" sx={{ paddingLeft: 1}}>{title}</Typography>
+        <Typography fontSize="1.25rem" sx={{ paddingLeft: 1 }}>
+          {title}
+        </Typography>
+      </Stack>
+
+      {showWalletConnect && (
+        <Button onClick={() => navigation.navigate("WalletConnect")}>
+          {<WCLogo />}
+        </Button>
+      )}
     </Stack>
   );
 };

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<NativeStackNavigationProp<StackParamsList>>();
 
-  const [currentWCURI, setCurrentWCURI] = useState<string>('');
+  const [currentWCURI, setCurrentWCURI] = useState<string>("");
 
-  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 (
-    <View style={styles.appContainer}>
+    <Layout title="Add Session">
       <View style={styles.inputContainer}>
         <Text variant="titleMedium">Enter WalletConnect URI</Text>
         <TextInput
@@ -41,13 +43,13 @@ const AddSession = () => {
           style={styles.walletConnectUriText}
         />
 
-        <View style={styles.signButton}>
-          <Button mode="contained" onPress={pair}>
+        <Box sx={{ mt: 2 }}>
+          <Button variant="contained" onClick={pair}>
             Pair Session
           </Button>
+        </Box>
       </View>
-      </View>
-    </View>
+    </Layout>
   );
 };
 export default AddSession;

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 (
-    <Image
-      style={styles.walletConnectLogo}
-      source={require("../assets/WalletConnect-Icon-Blueberry.png")}
-    />
-  );
-};
-
 const HomeScreen = () => {
-  const { accounts, setAccounts, setCurrentIndex } = useAccounts();
+  const { setAccounts, setCurrentIndex } = useAccounts();
 
   const { networksData, selectedNetwork, setSelectedNetwork, setNetworksData } =
     useNetworks();
   const { setActiveSessions, web3wallet } = useWalletConnect();
 
-  const navigation =
-    useNavigation<NativeStackNavigationProp<StackParamsList>>();
-  useEffect(() => {
-    if (accounts.length > 0) {
-      navigation.setOptions({
-        // eslint-disable-next-line react/no-unstable-nested-components
-        headerRight: () => (
-          <Button onClick={() => navigation.navigate("WalletConnect")}>
-            {<WCLogo />}
-          </Button>
-        ),
-      });
-    } else {
-      navigation.setOptions({
-        headerRight: undefined,
-      });
-    }
-  }, [navigation, accounts]);
-
   const [isWalletCreated, setIsWalletCreated] = useState<boolean>(false);
   const [isWalletCreating, setIsWalletCreating] = useState<boolean>(false);
   const [importWalletDialog, setImportWalletDialog] = useState<boolean>(false);

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 (
-    <View>
+    <Layout title="Active Sessions">
       {Object.keys(activeSessions).length > 0 ? (
         <>
-          <View style={styles.sessionsContainer}>
-            <Text variant="titleMedium">Active Sessions</Text>
-          </View>
+          <View style={styles.sessionsContainer} />
           <List.Section>
             {Object.entries(activeSessions).map(([sessionId, session]) => (
               <List.Item
@@ -44,7 +43,7 @@ export default function WalletConnect() {
                 // eslint-disable-next-line react/no-unstable-nested-components
                 left={() => (
                   <>
-                    {session.peer.metadata.icons[0].endsWith('.svg') ? (
+                    {session.peer.metadata.icons[0].endsWith(".svg") ? (
                       <View style={styles.dappLogo}>
                         <Text>SvgURI peerMetaDataIcon</Text>
                       </View>
@@ -60,7 +59,8 @@ export default function WalletConnect() {
                 right={() => (
                   <TouchableOpacity
                     onPress={() => disconnect(sessionId)}
-                    style={styles.disconnectSession}>
+                    style={styles.disconnectSession}
+                  >
                     <List.Icon icon="close" />
                   </TouchableOpacity>
                 )}
@@ -73,6 +73,6 @@ export default function WalletConnect() {
           <Text>You have no active sessions</Text>
         </View>
       )}
-    </View>
+    </Layout>
   );
 }