feat(web-devtools): inputable-dropdown-for-arbitrables-with-storage-saving

Author: tractorss

web-devtools/src/app/(main)/ruler/SelectArbitrable.tsx

@@ -1,9 +1,12 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
-import { Field } from "@kleros/ui-components-library";
+import { Address } from "viem";
+
+import { DropdownSelect, Field } from "@kleros/ui-components-library";
 
 import { useRulerContext } from "context/RulerContext";
+import { shortenAddress } from "utils/shortenAddress";
 
 const Arbitrables = styled.div`
   width: 100%;
@@ -20,18 +23,70 @@ const Arbitrables = styled.div`
 `;
 const StyledLabel = styled.label``;
 
+const SelectContainer = styled.div`
+  position: relative;
+`;
+const StyledDropdown = styled(DropdownSelect)`
+  position: absolute;
+  z-index: 0;
+  top: 40px;
+  left: 0;
+  width: 100%;
+  > button {
+    display: none;
+  }
+  > div {
+    z-index: 1;
+    width: 100%;
+    > div {
+      width: 100%;
+    }
+  }
+  .simplebar-content {
+    > div {
+      width: 100%;
+    }
+  }
+`;
+
 const SelectArbitrable: React.FC = () => {
-  const { arbitrable, setArbitrable } = useRulerContext();
+  const { arbitrable, setArbitrable, knownArbitrables } = useRulerContext();
+  const ref = useRef<HTMLDivElement>(null);
+  const [isClient, setIsClient] = useState(false);
+
+  // hydration workaround, local storage is inevitably going to be different, so knownArbitrables will be different
+  // server and client side
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const items = useMemo(
+    () =>
+      !isClient ? [] : knownArbitrables.map((arbitrable) => ({ text: shortenAddress(arbitrable), value: arbitrable })),
+    [isClient, knownArbitrables]
+  );
+
+  const openDropdown = useCallback(() => {
+    if (!ref.current || knownArbitrables.length === 0) return;
+
+    const child = ref.current.firstElementChild?.firstChild as HTMLButtonElement;
+    child.click();
+  }, [knownArbitrables, ref]);
+
   return (
-    <Arbitrables>
+    <Arbitrables suppressHydrationWarning={true}>
       <StyledLabel>Arbitrable:</StyledLabel>
-      <Field
-        value={arbitrable}
-        placeholder="Enter Arbitrable"
-        onChange={(e) => {
-          setArbitrable(e.target.value);
-        }}
-      />
+      <SelectContainer ref={ref}>
+        <StyledDropdown defaultValue={arbitrable} items={items} callback={(val) => setArbitrable(val as Address)} />
+        <Field
+          value={arbitrable}
+          placeholder="Enter Arbitrable"
+          onChange={(e) => {
+            setArbitrable(e.target.value as Address);
+          }}
+          onClick={openDropdown}
+        />
+      </SelectContainer>
     </Arbitrables>
   );
 };

web-devtools/src/context/RulerContext.tsx

@@ -1,10 +1,10 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 
 import { RULING_MODE } from "consts";
-import { Address } from "viem";
-import { useAccount } from "wagmi";
+import { Address, isAddress } from "viem";
 
 import { useReadKlerosCoreRulerRulers, useReadKlerosCoreRulerSettings } from "hooks/contracts/generated";
+import { useLocalStorage } from "hooks/useLocalStorage";
 import { isUndefined } from "utils/isUndefined";
 
 const REFETCH_INTERVAL = 5000;
@@ -22,13 +22,14 @@ interface IRulerContext {
   arbitrableSettings?: ArbitrableSettings;
   currentDeveloper?: Address;
   refetchData: () => void;
+  knownArbitrables: string[];
 }
 const RulerContext = createContext<IRulerContext | undefined>(undefined);
 
 const RulerContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [arbitrable, setArbitrable] = useState<Address>();
   const [arbitrableSettings, setArbitrableSettings] = useState<ArbitrableSettings>();
-  const { address } = useAccount();
+  const [knownArbitrables, setKnownArbitrables] = useLocalStorage<string[]>("knownArbitrables", []);
 
   const { data: currentDeveloper, refetch: refetchDeveloper } = useReadKlerosCoreRulerRulers({
     query: {
@@ -56,6 +57,13 @@ const RulerContextProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     });
   }, [arbitrableSettingsData]);
 
+  useEffect(() => {
+    if (isUndefined(arbitrable) || !isAddress(arbitrable) || knownArbitrables.includes(arbitrable?.toLowerCase()))
+      return;
+
+    setKnownArbitrables([...knownArbitrables, arbitrable?.toLowerCase()]);
+  }, [arbitrable, knownArbitrables, setKnownArbitrables]);
+
   const refetchData = useCallback(() => {
     refetchArbitrableSettings();
     refetchDeveloper();
@@ -70,8 +78,9 @@ const RulerContextProvider: React.FC<{ children: React.ReactNode }> = ({ childre
           arbitrableSettings,
           currentDeveloper,
           refetchData,
+          knownArbitrables,
         }),
-        [arbitrable, setArbitrable, arbitrableSettings, currentDeveloper, refetchData]
+        [arbitrable, setArbitrable, arbitrableSettings, currentDeveloper, refetchData, knownArbitrables]
       )}
     >
       {children}

web-devtools/src/hooks/useLocalStorage.ts

@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+export function useLocalStorage<T>(keyName: string, defaultValue: T) {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const value = window.localStorage.getItem(keyName);
+      return value ? JSON.parse(value) : defaultValue;
+    } catch (err) {
+      return defaultValue;
+    }
+  });
+
+  const setValue = (newValue: T) => {
+    try {
+      window.localStorage.setItem(keyName, JSON.stringify(newValue));
+    } finally {
+      setStoredValue(newValue);
+    }
+  };
+
+  return [storedValue, setValue];
+}

web-devtools/src/utils/shortenAddress.ts

@@ -0,0 +1,10 @@
+import { getAddress } from "viem";
+
+export function shortenAddress(address: string): string {
+  try {
+    const formattedAddress = getAddress(address);
+    return formattedAddress.substring(0, 6) + "..." + formattedAddress.substring(formattedAddress.length - 4);
+  } catch {
+    throw new TypeError("Invalid input, address can't be parsed");
+  }
+}