Add wallet disconnected state (#116)

src/App.tsx

@@ -1,3 +1,5 @@
+import { useAccount } from "wagmi";
+import { DisconnectedState } from "./features/structure/DisconnectedState";
 import { Header } from "./features/structure/Header";
 import { ClaimFloat } from "./features/votes/ClaimFloat";
 import { VoteList } from "./features/votes/VoteList";
@@ -7,12 +9,13 @@ import { useApplyTheme } from "./hooks/useApplyTheme";
 function App() {
   useApplyTheme();
   const { setShowClaimModal } = useClaimSelectionStore();
+  const { isConnected } = useAccount();
 
   return (
     <div className="flex flex-col flex-1 h-full items-center">
       <Header />
       <main className="mx-auto flex w-[808px] p-2 max-w-full flex-col flex-1">
-        <VoteList />
+        {isConnected ? <VoteList /> : <DisconnectedState />}
       </main>
       <ClaimFloat onClaimClicked={() => setShowClaimModal(true)} />
     </div>

src/features/structure/DisconnectedState.tsx

@@ -0,0 +1,24 @@
+export const DisconnectedState = ({}: {}) => {
+  return (
+    <div className="flex flex-col gap-3 max-w-prose justify-center self-center justify-self-center">
+      <h1 className="text-2xl font-bold text-white">AirSwap Voter Dashboard</h1>
+      <p className="text-gray-500 text-[15px] leading-6">
+        <span>
+          Connect your wallet to manage AST staking, vote on DAO proposals, and
+          claim rewards for participating in the decentralized governance
+          process.{" "}
+        </span>
+      </p>
+      <p>
+        <a
+          className="underline text-gray-500 transition-colors hover:text-gray-50"
+          href="https://about.airswap.io"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn more
+        </a>
+      </p>
+    </div>
+  );
+};