Display Aragon DAO URIs

daostar-website/src/App.js

@@ -25,6 +25,47 @@ const mainnetOldClient = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
+const SUBGRAPH_API_URL = {
+  arbitrum: 'https://aragon-dao-uri.onrender.com/fetch_aragon_daos/arbitrum',
+  'arbitrum-goerli': 'https://aragon-dao-uri.onrender.com/fetch_aragon_daos/arbitrum-goerli',
+  base: 'https://aragon-dao-uri.onrender.com/fetch_aragon_daos/base',
+  ethereum: 'https://aragon-dao-uri.onrender.com/fetch_aragon_daos/ethereum',
+  goerli: 'https://aragon-dao-uri.onrender.com/fetch_aragon_daos/goerli',
+  polygon: 'https://aragon-dao-uri.onrender.com/fetch_aragon_daos/polygon',
+  sepolia: 'https://aragon-dao-uri.onrender.com/fetch_aragon_daos/sepolia',
+  unsupported: undefined,
+};
+
+function useFetchAragonDAOs(network) {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const apiUrl = SUBGRAPH_API_URL[network];
+        if (!apiUrl) {
+          throw new Error(`Unsupported network: ${network}`);
+        }
+        const response = await axios.get(apiUrl);
+        const structuredData = restructureAragonDAOData(response.data, network); // Adjust based on actual data structure
+        setData(structuredData);
+      } catch (error) {
+        console.error(error);
+        setError(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [network]);
+
+  return { data, loading, error };
+}
+
+
 const alchemyId = process.env.REACT_APP_ALCHEMY_ID;
 const walletConnectId = process.env.REACT_APP_WALLETCONNECT_ID;
 const token = process.env.REACT_APP_BEARER_TOKEN;
@@ -102,8 +143,38 @@ function restructureDAOData(daoInstances, networkId) {
   ];
 }
 
+function restructureAragonDAOData(daoInstances, network) {
+  const aragonNetwork = network.toLowerCase(); // Convert network to lowercase
+
+  return [
+    {
+      registrationNetwork: {
+        __typename: "RegistrationNetwork",
+        id: network,
+        registrations: daoInstances?.map((item) => ({
+          __typename: "RegistrationInstance",
+          id: item.name,
+          daoName: item.name,
+          daoAddress: item.name,
+          daoDescription: item.description,
+          daoURI: `https://aragon-dao-uri.onrender.com/aragon_dao/${aragonNetwork}/${item.name}`,
+          governanceURI: item.governanceURI,
+          issuersURI: item.issuersURI,
+          managerAddress: '',
+          membersURI: item.membersURI,
+          proposalsURI: item.proposalsURI,
+          registrationAddress: '',
+          registrationNetwork: {
+            __typename: "RegistrationNetwork",
+            id: network,
+          },
+        })),
+      },
+    },
+  ];
+}
+
 function App() {
-  //DAODAOINT START
 
   if (token !== undefined) {
     headers = {
@@ -122,6 +193,7 @@ function App() {
   const [daodaoInstances, setDaoDaoInstances] = useState([]);
   const [osmosisInstances, setOsmosisInstances] = useState([]);
   const [stargazeInstances, setStargazeInstances] = useState([]);
+  const [aragonBaseDAOs, setAragonBaseDAOs] = useState([])
 
   useEffect(() => {
     const fetchDAOs = async () => {
@@ -138,6 +210,12 @@ function App() {
         "Stargaze"
       );
 
+      const aragonBaseResponse = await axios.get("https://aragon-dao-uri.onrender.com/fetch_aragon_daos/base");
+      const aragonBaseData = aragonBaseResponse.data;
+      const aragonBD = restructureAragonDAOData(aragonBaseData, "Base")
+      setAragonBaseDAOs(aragonBD)
+
+
       setDaoDaoInstances(daodaoData);
       setOsmosisInstances(osmosisData);
       setStargazeInstances(stargazeData);
@@ -154,7 +232,6 @@ function App() {
     fetchDAOs();
   }, []);
 
-  //DAODAOINT END
   const {
     loading,
     error,
@@ -346,7 +423,8 @@ function App() {
     optimismGoerliData,
     arbitrumGoerliData,
     chapelData,
-    arbitrumData
+    arbitrumData,
+    aragonBaseDAOs
   });
 
   return (
@@ -381,6 +459,7 @@ function App() {
                   osmosisInstances={osmosisInstances}
                   stargazeInstances={stargazeInstances}
                   easOptimismGoerli={EASOptimismGoerliAttestations}
+                  aragonDAOs={aragonBaseDAOs}
                 />
               }
             />

daostar-website/src/components/ExplorePage/ExploreAragonDAOs.js

@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import RegistrationCard from "../RegistrationCard/RegistrationCard";
+import AttestationCard from "../AttestationCard/AttestationCard";
+import "./ExplorePage.css";
+import { InputGroup, Button } from "@blueprintjs/core";
+
+// Prelimnary check filter, if a DAO has no name, it won't be displayed
+export const filterRegistrations = (registration, filterVal = "") => {
+  if (!registration.daoName) {
+    return false;
+  }
+  if (filterVal !== "") {
+    return registration.daoName.toLowerCase().includes(filterVal.toLowerCase());
+  }
+  return true;
+};
+
+// Network Filter for EVM Chains
+export const NetworkFilterRegistrations = (registration, filterVal = "") => {
+  console.log(registration.registrationNetwork.id);
+  if (registration.registrationNetwork.id === filterVal) {
+    return true;
+  }
+  if (filterVal === "ethereum") {
+    if (
+      (registration.registrationNetwork.id === filterVal) |
+      (registration.registrationNetwork.id === "mainnet")
+    ) {
+      return true;
+    }
+  }
+};
+
+const NetworkButtons = [
+  { text: "All", filter: "all" },
+  { text: "Arbitrum", filter: "arbitrum" },
+  { text: "Base", filter: "base" },
+  { text: "Ethereum", filter: "ethereum" },
+  { text: "Goerli", filter: "goerli" },
+  { text: "Polygon", filter: "polygon" },
+  { text: "Arbitrum Goerli", filter: "arbitrum-goerli" },
+  { text: "Sepolia", filter: "sepolia" },
+];
+NetworkButtons.sort((a, b) => a.text.localeCompare(b.text));
+
+const ExplorePage = ({
+  aragonBase,
+  aragonArbitrum,
+  aragonEthereum,
+  aragonGoerli,
+  aragonPolygon,
+  aragonSepolia,
+  aragonArbitrumGoerli,
+}) => {
+  const [filterVal, setFilterVal] = useState("");
+  const onChangeFilter = (e) => setFilterVal(e.target.value);
+  const [networkFilter, setNetworkFilter] = useState("all");
+
+  const filteredRegistrations = (instances) => {
+    return instances
+      .flatMap((network) =>
+        network.registrationNetwork.registrations.filter((reg) =>
+          filterRegistrations(reg, filterVal)
+        )
+      )
+      .map((registration, i) => (
+        <RegistrationCard
+          key={i}
+          {...registration}
+          standalone={true}
+          displayWithoutEdit={true}
+        />
+      ));
+  };
+
+  const renderCards = () => {
+    switch (networkFilter) {
+      case "arbitrum-goerli":
+        return filteredRegistrations(aragonArbitrumGoerli);
+
+      case "base":
+        return filteredRegistrations(aragonBase);
+
+      case "arbitrum":
+        return filteredRegistrations(aragonArbitrum);
+
+      case "polygon":
+        return filteredRegistrations(aragonPolygon);
+
+      case "sepolia":
+        return filteredRegistrations(aragonSepolia);
+
+      case "ethereum":
+        return filteredRegistrations(aragonEthereum);
+
+      case "goerli":
+        return filteredRegistrations(aragonGoerli);
+
+      default:
+        return (
+          <>
+            <div className="dao-cards">{filteredRegistrations(aragonEthereum)}</div>
+            <br></br>
+
+          </>
+        );
+    }
+  };
+
+
+
+  return (
+    <div className="explore-page">
+      <div className="filter">
+        <InputGroup
+          large
+          placeholder="Filter DAOs..."
+          value={filterVal}
+          onChange={onChangeFilter}
+        />
+        <div>
+          {NetworkButtons.map((button, index) => (
+            <Button
+              key={index}
+              text={button.text}
+              onClick={() => setNetworkFilter(button.filter)}
+              className={
+                networkFilter === button.filter ? "button-highlighted" : ""
+              }
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="dao-cards">{renderCards()}</div>
+    </div>
+  );
+};
+
+export default ExplorePage;

daostar-website/src/components/ExplorePage/ExplorePage.js

@@ -45,6 +45,7 @@ const NetworkButtons = [
   { text: "Osmosis", filter: "osmosis" },
   { text: "Stargaze", filter: "stargaze" },
   { text: "EAS OPGoerli", filter: "easOptimismGoerli" },
+  { text: "Aragon DAOs on Base", filter: "aragonBaseDAOS"}
 
 ];
 NetworkButtons.sort((a, b) => a.text.localeCompare(b.text));
@@ -54,13 +55,15 @@ const ExplorePage = ({
   junosInstances,
   osmosisInstances,
   stargazeInstances,
-  easOptimismGoerli
+  easOptimismGoerli,
+  aragonDAOs
 }) => {
   const [filterVal, setFilterVal] = useState("");
   const onChangeFilter = (e) => setFilterVal(e.target.value);
   const [networkFilter, setNetworkFilter] = useState("all");
 
-  // Network Filter for Juno, Stargaze and Osmosis
+
+  // Network Filter for Juno, Stargaze and Osmosis and
   const filteredRegistrations = (instances) => {
     return instances
       .flatMap((network) =>
@@ -139,16 +142,18 @@ const ExplorePage = ({
         .map((attestation, i) => (
           <AttestationCard key={i} {...attestation} />
         ));
+      case "aragonBaseDAOS":
+        return filteredRegistrations(aragonDAOs);
       default:
         return (
           <>
             <div className="dao-cards">{daoCards}</div>
             <br></br>
-            <div className="dao-cards">{daodaoCards}</div>
+            <div className="dao-cards">{filteredRegistrations(junosInstances)}</div>
             <br></br>
-            <div className="dao-cards">{osmosisDaoCards}</div>
+            <div className="dao-cards">{filteredRegistrations(osmosisInstances)}</div>
             <br></br>
-            <div className="dao-cards">{stargazeDaoCards}</div>
+            <div className="dao-cards">{filteredRegistrations(stargazeInstances)}</div>
           </>
         );
     }
@@ -161,60 +166,7 @@ const ExplorePage = ({
       return <RegistrationCard key={i} {...registration} />;
     });
 
-  // Handle Juno DAOs
-  const daodaoCards = junosInstances
-    .flatMap((network) =>
-      network.registrationNetwork.registrations.filter((reg) =>
-        filterRegistrations(reg, filterVal)
-      )
-    )
-    .map((registration, i) => {
-      return (
-        <RegistrationCard
-          key={i}
-          {...registration}
-          standalone={true}
-          displayWithoutEdit={true}
-        />
-      );
-    });
-
-  // Handle Stargaze DAOs
-  console.log(stargazeInstances);
-  const stargazeDaoCards = stargazeInstances
-    ?.flatMap((network) =>
-      network.registrationNetwork.registrations.filter((reg) =>
-        filterRegistrations(reg, filterVal)
-      )
-    )
-    .map((registration, i) => {
-      return (
-        <RegistrationCard
-          key={i}
-          {...registration}
-          standalone={true}
-          displayWithoutEdit={true}
-        />
-      );
-    });
-
-  // Handle Osmosis DAOs
-  const osmosisDaoCards = osmosisInstances
-    ?.flatMap((network) =>
-      network.registrationNetwork.registrations.filter((reg) =>
-        filterRegistrations(reg, filterVal)
-      )
-    )
-    .map((registration, i) => {
-      return (
-        <RegistrationCard
-          key={i}
-          {...registration}
-          standalone={true}
-          displayWithoutEdit={true}
-        />
-      );
-    });
+
   return (
     <div className="explore-page">
       <div className="filter">