fix: removes reliance on session for Header

dapps/react-dapp-v2-with-ethers/src/App.tsx

@@ -208,7 +208,7 @@ export default function App() {
       </SLanding>
     ) : (
       <SAccountsContainer>
-        <h3>Accounts</h3>
+        <h3>Account</h3>
         <SAccounts>
           {accounts.map(account => {
             return (
@@ -232,7 +232,7 @@ export default function App() {
   return (
     <SLayout>
       <Column maxWidth={1000} spanHeight>
-        <Header ping={() => Promise.resolve()} disconnect={disconnect} session={session} />
+        <Header ping={() => Promise.resolve()} disconnect={disconnect} accounts={accounts} />
         <SContent>{isInitializing ? "Loading..." : renderContent()}</SContent>
       </Column>
       <Modal show={!!modal} closeModal={closeModal}>

dapps/react-dapp-v2-with-ethers/src/components/Header.tsx

@@ -50,18 +50,18 @@ const SActiveSession = styled(SActiveAccount as any)`
 interface HeaderProps {
   ping: () => Promise<void>;
   disconnect: () => Promise<void>;
-  session: SessionTypes.Created | undefined;
+  accounts: string[];
 }
 
 const Header = (props: HeaderProps) => {
-  const { ping, disconnect, session } = props;
+  const { ping, disconnect, accounts } = props;
   return (
     <SHeader {...props}>
-      {session ? (
+      {accounts.length > 0 ? (
         <>
           <SActiveSession>
-            <p>{`Connected to`}</p>
+            <p>{`Connected with`}</p>
-            <p>{session.peer.metadata.name}</p>
+            <p>{accounts[0]}</p>
           </SActiveSession>
           <SHeaderActions>
             <Button outline color="black" onClick={ping}>