unsuccesful try at adapting for connect kit

HausDAO · Oct 13, 2024 · c6d8135 · c6d8135
1 parent e2c0a6f
commit c6d8135
Show file tree

Hide file tree

Showing 6 changed files with 3,775 additions and 2,207 deletions.
diff --git a/package.json b/package.json
@@ -9,26 +9,28 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@daohaus/abis": "^0.5.0",
-    "@daohaus/connect": "^0.5.0",
-    "@daohaus/connect-context": "^0.5.0",
-    "@daohaus/contract-utils": "^0.5.0",
-    "@daohaus/form-builder": "^0.5.0",
-    "@daohaus/form-builder-base": "^0.5.0",
-    "@daohaus/keychain-utils": "^0.5.0",
-    "@daohaus/moloch-v3-data": "^0.5.0",
-    "@daohaus/moloch-v3-fields": "^0.5.0",
-    "@daohaus/moloch-v3-hooks": "^0.5.0",
-    "@daohaus/moloch-v3-legos": "^0.5.0",
-    "@daohaus/moloch-v3-macro-ui": "^0.5.0",
-    "@daohaus/profile-data": "^0.5.0",
-    "@daohaus/tx-builder": "^0.5.0",
-    "@daohaus/ui": "^0.5.0",
-    "@daohaus/utils": "^0.5.0",
+    "@daohaus/abis": "^0.5.3",
+    "@daohaus/contract-utils": "^0.5.3",
+    "@daohaus/form-builder": "^0.5.3",
+    "@daohaus/form-builder-base": "^0.5.3",
+    "@daohaus/keychain-utils": "^0.5.3",
+    "@daohaus/moloch-v3-data": "^0.5.3",
+    "@daohaus/moloch-v3-fields": "^0.5.3",
+    "@daohaus/moloch-v3-hooks": "^0.5.3",
+    "@daohaus/moloch-v3-legos": "^0.5.3",
+    "@daohaus/moloch-v3-macro-ui": "^0.5.3",
+    "@daohaus/profile-data": "^0.5.3",
+    "@daohaus/tx-builder": "^0.5.3",
+    "@daohaus/ui": "^0.5.3",
+    "@daohaus/utils": "^0.5.3",
+    "connectkit": "^1.8.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
     "react-query": "^3.39.3",
-    "react-router-dom": "^6.4.3"
+    "react-router-dom": "^6.4.3",
+    "viem": "2.x",
+    "wagmi": "^2.12.17"
   },
   "devDependencies": {
     "@types/react": "^18.0.22",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,16 @@
-import { DHConnectProvider } from '@daohaus/connect';
-import { useState } from 'react';
-import { Routes } from './Routes';
+// import { DHConnectProvider } from "@daohaus/connect";
+import { useState } from "react";
+import { Routes } from "./Routes";
 
 export const App = () => {
   const [daoChainId, setDaoChainId] = useState<string | undefined>();
 
+  console.log("daoChainId", daoChainId);
+
   return (
-    <DHConnectProvider daoChainId={daoChainId}>
-      <Routes setDaoChainId={setDaoChainId} />
-    </DHConnectProvider>
+    // <DHConnectProvider daoChainId={daoChainId}>
+    <Routes setDaoChainId={setDaoChainId} />
+
+    // </DHConnectProvider>
   );
 };
diff --git a/src/components/layout/DaoContainer.tsx b/src/components/layout/DaoContainer.tsx
@@ -1,11 +1,13 @@
 import { useMemo } from "react";
 import { Outlet, useLocation, useParams } from "react-router-dom";
 
-import { DHLayout, useDHConnect } from "@daohaus/connect";
+// import { DHLayout, useDHConnect } from "@daohaus/connect";
 import { TXBuilder } from "@daohaus/tx-builder";
 import { ValidNetwork } from "@daohaus/keychain-utils";
 import { CurrentDaoProvider, useDaoData } from "@daohaus/moloch-v3-hooks";
-import { HeaderAvatar } from "../HeaderAvatar";
+// import { HeaderAvatar } from "../HeaderAvatar";
+import { ConnectKitButton } from "connectkit";
+import { useAccount, usePublicClient } from "wagmi";
 
 export const DaoContainer = () => {
   const { proposalId, memberAddress, daoChain, daoId } = useParams<{
@@ -40,7 +42,9 @@ const Dao = ({
 }) => {
   const location = useLocation();
 
-  const { publicClient, address } = useDHConnect();
+  // const { publicClient, address } = useDHConnect();
+  const { address } = useAccount();
+  const publicClient = usePublicClient();
   const { dao } = useDaoData({
     daoId: daoId as string,
     daoChain: daoChain as string,
@@ -67,20 +71,22 @@ const Dao = ({
   }, [daoChain, daoId, address]);
 
   return (
-    <DHLayout
-      pathname={location.pathname}
-      navLinks={navLinks}
-      leftNav={
-        dao?.name &&
-        dao?.id && (
-          <HeaderAvatar
-            name={dao.name}
-            address={dao.id}
-            imgUrl={dao?.avatarImg}
-          />
-        )
-      }
-    >
+    // <DHLayout
+    //   pathname={location.pathname}
+    //   navLinks={navLinks}
+    //   leftNav={
+    //     dao?.name &&
+    //     dao?.id && (
+    //       <HeaderAvatar
+    //         name={dao.name}
+    //         address={dao.id}
+    //         imgUrl={dao?.avatarImg}
+    //       />
+    //     )
+    //   }
+    // >
+    <>
+      <ConnectKitButton />
       <CurrentDaoProvider
         userAddress={address}
         targetDao={{
@@ -100,6 +106,7 @@ const Dao = ({
           <Outlet />
         </TXBuilder>
       </CurrentDaoProvider>
-    </DHLayout>
+    </>
+    // </DHLayout>
   );
 };
diff --git a/src/main.tsx b/src/main.tsx
@@ -4,6 +4,9 @@ import { HashRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { HausThemeProvider } from "@daohaus/ui";
 
+import { WagmiProvider, createConfig, http } from "wagmi";
+import { base } from "wagmi/chains";
+import { ConnectKitProvider, getDefaultConfig } from "connectkit";
 import { App } from "./App";
 
 import "./App.css";
@@ -13,16 +16,41 @@ import "./App.css";
 // // Related open issue: https://github.com/WalletConnect/walletconnect-monorepo/issues/748
 // window.Buffer = window.Buffer || Buffer;
 
-const queryClient = new QueryClient();
+const config = createConfig(
+  getDefaultConfig({
+    // Your dApps chains
+    chains: [base],
+    transports: {
+      // RPC URL for each chain
+      [base.id]: http(
+        `https://base-mainnet.g.alchemy.com/v2/${
+          import.meta.env.VITE_BASE_ALCHEMY_KEY
+        }`
+      ),
+    },
+
+    // Required API Keys
+    walletConnectProjectId: import.meta.env.VITE_WALLET_CONNECT_ID,
+
+    // Required App Info
+    appName: "dh test",
+  })
+);
+
+export const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <HashRouter>
-      <QueryClientProvider client={queryClient}>
-        <HausThemeProvider>
-          <App />
-        </HausThemeProvider>
-      </QueryClientProvider>
+      <WagmiProvider config={config}>
+        <QueryClientProvider client={queryClient}>
+          <ConnectKitProvider>
+            <HausThemeProvider>
+              <App />
+            </HausThemeProvider>
+          </ConnectKitProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
     </HashRouter>
   </React.StrictMode>
 );
diff --git a/src/pages/RageQuit.tsx b/src/pages/RageQuit.tsx
@@ -12,12 +12,14 @@ import {
   useDaoMember,
   useDaoMembers,
 } from "@daohaus/moloch-v3-hooks";
-import { useDHConnect } from "@daohaus/connect";
+// import { useDHConnect } from "@daohaus/connect";
+import { useAccount } from "wagmi";
 
 export function RageQuit() {
   const { dao, refetch } = useDaoData();
   const { daoId, daoChain } = useCurrentDao();
-  const { address } = useDHConnect();
+  // const { address } = useDHConnect();
+  const { address } = useAccount();
   const { member: connectedMember, refetch: refetchMember } = useDaoMember({
     memberAddress: address,
     // @ts-expect-error: need to fix in hooks package