better dao container setup

src/components/HeaderAvatar.tsx

@@ -0,0 +1,27 @@
+import { H4, ProfileAvatar } from "@daohaus/ui";
+import styled from "styled-components";
+
+const DaoNavContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1.7rem;
+`;
+
+const DaoProfileAvatar = styled(ProfileAvatar)`
+  width: 4.8rem;
+  height: 4.8rem;
+`;
+
+type HAvatar = {
+  name: string;
+  address: string;
+  imgUrl?: string;
+};
+export const HeaderAvatar = ({ name, imgUrl, address }: HAvatar) => {
+  return (
+    <DaoNavContainer>
+      <DaoProfileAvatar image={imgUrl} address={address} />
+      <H4>{name}</H4>
+    </DaoNavContainer>
+  );
+};

src/components/layout/DaoContainer.tsx

@@ -1,22 +1,50 @@
+import { useMemo } from "react";
 import { Outlet, useLocation, useParams } from "react-router-dom";
 
 import { DHLayout, useDHConnect } from "@daohaus/connect";
 import { TXBuilder } from "@daohaus/tx-builder";
-import { H4 } from "@daohaus/ui";
 import { ValidNetwork } from "@daohaus/keychain-utils";
 import { CurrentDaoProvider, useDaoData } from "@daohaus/moloch-v3-hooks";
-import { useMemo } from "react";
+import { HeaderAvatar } from "../HeaderAvatar";
 
 export const DaoContainer = () => {
-  const location = useLocation();
   const { proposalId, memberAddress, daoChain, daoId } = useParams<{
     daoChain: ValidNetwork;
     daoId: string;
     proposalId: string;
     memberAddress: string;
   }>();
+
+  if (!daoId || !daoChain) return null;
+
+  return (
+    <Dao
+      daoId={daoId}
+      daoChain={daoChain}
+      proposalId={proposalId}
+      memberAddress={memberAddress}
+    />
+  );
+};
+
+const Dao = ({
+  daoId,
+  daoChain,
+  proposalId,
+  memberAddress,
+}: {
+  daoId: string;
+  daoChain: ValidNetwork;
+  proposalId?: string;
+  memberAddress?: string;
+}) => {
+  const location = useLocation();
+
   const { publicClient, address } = useDHConnect();
-  const { dao } = useDaoData();
+  const { dao } = useDaoData({
+    daoId: daoId as string,
+    daoChain: daoChain as string,
+  });
 
   const routePath = `molochv3/${daoChain}/${daoId}`;
 
@@ -42,7 +70,16 @@ export const DaoContainer = () => {
     <DHLayout
       pathname={location.pathname}
       navLinks={navLinks}
-      leftNav={<H4>{dao?.name}</H4>}
+      leftNav={
+        dao?.name &&
+        dao?.id && (
+          <HeaderAvatar
+            name={dao.name}
+            address={dao.id}
+            imgUrl={dao?.avatarImg}
+          />
+        )
+      }
     >
       <CurrentDaoProvider
         targetDao={{

src/components/layout/HomeContainer.tsx

@@ -7,7 +7,7 @@ export const HomeContainer = () => {
 
   return (
     <DHLayout
-      leftNav={<H4>DAOhaus Admin Tool</H4>}
+      leftNav={<H4>DAOhaus App Starter</H4>}
       pathname={location.pathname}
       navLinks={[{ label: "Home", href: `/` }]}
       footer={<Footer />}