Index Arbitrum Registration Instances (#195)

* init arbitrum * update link * arbitrum display and network filters * deprecate unused logos folder * deprecate unused logos * add hats logo * add comments for filters used
metagov · Jan 23, 2024 · 45aab3d · 45aab3d
1 parent c3eff1a
commit 45aab3d
Show file tree

Hide file tree

Showing 91 changed files with 603 additions and 369 deletions.
diff --git a/daostar-website/src/App.js b/daostar-website/src/App.js
@@ -234,14 +234,27 @@ function App() {
     data: gnosisData,
   } = gnosisRes;
 
+  const arbitrumRes = useQuery(queries.REGISTRATIONS, {
+    context: { apiName: "arbitrum" },
+    variables: { id: "arbitrum-one" },
+  });
+  const {
+    loading: arbitrumLoading,
+    error: arbitrumError,
+    data: arbitrumData,
+  } = arbitrumRes;
+
+
+
   if (
     error ||
     goerliError ||
     optimismGoerliError ||
     arbitrumGoerliError ||
     chapelError ||
     optimismError ||
-    mainnetv0Error
+    mainnetv0Error ||
+    arbitrumError
   ) {
     console.error("Mainnet Error " + error);
     console.error("Mainnet v0 Error " + mainnetv0Error);
@@ -250,6 +263,8 @@ function App() {
     console.error("Arbitrum Goerli Error" + arbitrumGoerliError);
     console.error("Chapel Error" + chapelError);
     console.error("Optimism Error" + optimismError);
+    console.error("Arbitrum Error" + arbitrumError);
+
   }
   if (
     loading ||
@@ -258,7 +273,8 @@ function App() {
     optimismGoerliLoading ||
     arbitrumGoerliLoading ||
     chapelLoading ||
-    optimismLoading
+    optimismLoading ||
+    arbitrumLoading
   )
     return "loading...";
   const mainnetRegistrations =
@@ -275,6 +291,8 @@ function App() {
     gnosisData?.registrationNetwork?.registrations || [];
   const arbitrumGoerliRegistrations =
     arbitrumGoerliData?.registrationNetwork?.registrations || [];
+  const arbitrumRegistrations =
+    arbitrumData?.registrationNetwork?.registrations || [];
   const chapelRegistrations =
     chapelData?.registrationNetwork?.registrations || [];
 
@@ -297,7 +315,8 @@ function App() {
     optimismGoerliRegistrations,
     arbitrumGoerliRegistrations,
     chapelRegistrations,
-    optimismRegistrations
+    optimismRegistrations,
+    arbitrumRegistrations
   );
 
   const daodaoRegInstances = daodaoInstances;
@@ -313,6 +332,7 @@ function App() {
     optimismGoerliData,
     arbitrumGoerliData,
     chapelData,
+    arbitrumData
   });
 
   return (

diff --git a/daostar-website/src/components/ExplorePage/ExplorePage.js b/daostar-website/src/components/ExplorePage/ExplorePage.js
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
 import RegistrationCard from "../RegistrationCard/RegistrationCard";
 import "./ExplorePage.css";
-import { InputGroup } from "@blueprintjs/core";
+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;
@@ -13,6 +14,38 @@ export const filterRegistrations = (registration, filterVal = "") => {
   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-one" },
+  { text: "Arbitrum-Goerli", filter: "arbitrum-goerli" },
+  { text: "BNB Bruno", filter: "chapel" },
+  { text: "Ethereum", filter: "ethereum" },
+  { text: "Gnosis", filter: "gnosis" },
+  { text: "Goerli", filter: "goerli" },
+  { text: "Juno", filter: "juno" },
+  { text: "Optimism", filter: "optimism" },
+  { text: "Optimism-Goerli", filter: "optimism-goerli" },
+  { text: "Osmosis", filter: "osmosis" },
+  { text: "Stargaze", filter: "stargaze" },
+];
+NetworkButtons.sort((a, b) => a.text.localeCompare(b.text));
+
 const ExplorePage = ({
   registrationInstances,
   junosInstances,
@@ -21,15 +54,105 @@ const ExplorePage = ({
 }) => {
   const [filterVal, setFilterVal] = useState("");
   const onChangeFilter = (e) => setFilterVal(e.target.value);
+  const [networkFilter, setNetworkFilter] = useState("all");
 
-  //when evm networks
+  // Network Filter for Juno, Stargaze and Osmosis
+  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 "juno":
+        return filteredRegistrations(junosInstances);
+      case "osmosis":
+        return filteredRegistrations(osmosisInstances);
+      case "stargaze":
+        return filteredRegistrations(stargazeInstances);
+      case "arbitrum-one":
+        return registrationInstances
+          .filter((reg) => NetworkFilterRegistrations(reg, "arbitrum-one"))
+          .map((registration, i) => (
+            <RegistrationCard key={i} {...registration} />
+          ));
+      case "chapel":
+        return registrationInstances
+          .filter((reg) => NetworkFilterRegistrations(reg, "chapel"))
+          .map((registration, i) => (
+            <RegistrationCard key={i} {...registration} />
+          ));
+      case "goerli":
+        return registrationInstances
+          .filter((reg) => NetworkFilterRegistrations(reg, "goerli"))
+          .map((registration, i) => (
+            <RegistrationCard key={i} {...registration} />
+          ));
+      case "gnosis":
+        return registrationInstances
+          .filter((reg) => NetworkFilterRegistrations(reg, "gnosis"))
+          .map((registration, i) => (
+            <RegistrationCard key={i} {...registration} />
+          ));
+      case "ethereum":
+        return registrationInstances
+          .filter((reg) => NetworkFilterRegistrations(reg, "ethereum"))
+          .map((registration, i) => (
+            <RegistrationCard key={i} {...registration} />
+          ));
+      case "optimism":
+        return registrationInstances
+          .filter((reg) => NetworkFilterRegistrations(reg, "optimism"))
+          .map((registration, i) => (
+            <RegistrationCard key={i} {...registration} />
+          ));
+      case "optimism-goerli":
+        return registrationInstances
+          .filter((reg) => NetworkFilterRegistrations(reg, "optimism-goerli"))
+          .map((registration, i) => (
+            <RegistrationCard key={i} {...registration} />
+          ));
+      case "arbitrum-goerli":
+        return registrationInstances
+          .filter((reg) => NetworkFilterRegistrations(reg, "arbitrum-goerli"))
+          .map((registration, i) => (
+            <RegistrationCard key={i} {...registration} />
+          ));
+      default:
+        return (
+          <>
+            <div className="dao-cards">{daoCards}</div>
+            <br></br>
+            <div className="dao-cards">{daodaoCards}</div>
+            <br></br>
+            <div className="dao-cards">{osmosisDaoCards}</div>
+            <br></br>
+            <div className="dao-cards">{stargazeDaoCards}</div>
+          </>
+        );
+    }
+  };
+
+  // Handle EVM networks
   const daoCards = registrationInstances
     .filter((reg) => filterRegistrations(reg, filterVal))
     .map((registration, i) => {
       return <RegistrationCard key={i} {...registration} />;
     });
 
-  // Handle when junos
+  // Handle Juno DAOs
   const daodaoCards = junosInstances
     .flatMap((network) =>
       network.registrationNetwork.registrations.filter((reg) =>
@@ -47,7 +170,7 @@ const ExplorePage = ({
       );
     });
 
-  //Handle when stargaze
+  // Handle Stargaze DAOs
   console.log(stargazeInstances);
   const stargazeDaoCards = stargazeInstances
     ?.flatMap((network) =>
@@ -66,7 +189,7 @@ const ExplorePage = ({
       );
     });
 
-  // Handle when osmosis
+  // Handle Osmosis DAOs
   const osmosisDaoCards = osmosisInstances
     ?.flatMap((network) =>
       network.registrationNetwork.registrations.filter((reg) =>
@@ -92,14 +215,21 @@ const ExplorePage = ({
           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">{daoCards}</div>
-      <br></br>
-      <div className="dao-cards">{daodaoCards}</div>
-      <br></br>
-      <div className="dao-cards">{osmosisDaoCards}</div>
-      <br></br>
-      <div className="dao-cards">{stargazeDaoCards}</div>
+
+      <div className="dao-cards">{renderCards()}</div>
     </div>
   );
 };

diff --git a/daostar-website/src/components/Homepage/Homepage.css b/daostar-website/src/components/Homepage/Homepage.css
@@ -72,6 +72,11 @@ h1.title {
     font-size: 16px;
 }
 
+.button-highlighted {
+    border: 1px solid var(--clr-accent) !important;
+    color: var(--clr-accent);
+  }
+
 @media screen and (max-width: 900px) {
     .info-section .info-container {
         flex-direction: column;

diff --git a/daostar-website/src/components/Homepage/MemberLogos/MemberLogos.js b/daostar-website/src/components/Homepage/MemberLogos/MemberLogos.js
@@ -70,6 +70,7 @@ import utopiaLogo from '../../../img/logos/utopialabs.webp';
 import wildfireLogo from '../../../img/logos/wildfiredao.png';
 import wonderverseLogo from '../../../img/logos/wonderverse.png';
 import lxdaoLogo from '../../../img/logos/lxdao.jpg';
+import hatsLogo from '../../../img/logos/hats.png'
 
 const MemberLogos = (props) => {
     return (
@@ -104,6 +105,7 @@ const MemberLogos = (props) => {
             <a href="https://github.com/" target="_blank"><img src={githubLogo} alt="GitHub" /></a>
             <a href="https://gnosis.io/" target="_blank"><img src={gnosisLogo} alt="Gnosis" /></a>
             <a href="https://linktr.ee/Govrn" target="_blank"><img src={govrnLogo} alt="Govrn" /></a>
+            <a href="https://www.hatsprotocol.xyz/" target="_blank"><img src={hatsLogo} alt="Hats Protocol" /></a>
             <a href="https://interchain.io/" target="_blank"><img src={interchainLogo} alt="Interchain Foundation" /></a>
             <a href="https://kleros.io/" target="_blank"><img src={klerosLogo} alt="Kleros" /></a>
             <a href="https://kycdao.xyz/" target="_blank"><img src={kycdaoLogo} alt="kycDAO" /></a>