refactor(web-devtools): single-connect-button-at-top-level

Author: tractorss

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

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
 import { Address, isAddress } from "viem";
-import { usePublicClient } from "wagmi";
+import { useAccount, usePublicClient } from "wagmi";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -11,10 +11,10 @@ import { useSimulateKlerosCoreRulerChangeRuler, useWriteKlerosCoreRulerChangeRul
 import { isUndefined } from "utils/isUndefined";
 import { wrapWithToast } from "utils/wrapWithToast";
 
-import { EnsureChain } from "components/EnsureChain";
 import LabeledInput from "components/LabeledInput";
 
 import Header from "./Header";
+import { DEFAULT_CHAIN } from "consts/chains";
 
 const Container = styled.div`
   width: 100%;
@@ -34,6 +34,7 @@ const StyledLabel = styled.label`
 `;
 
 const ChangeDeveloper: React.FC = () => {
+  const { isConnected, chainId } = useAccount();
   const { arbitrable, currentDeveloper, refetchData } = useRulerContext();
   const [newDeveloper, setNewDeveloper] = useState("");
   const [isChanging, setIsChanging] = useState(false);
@@ -62,6 +63,18 @@ const ChangeDeveloper: React.FC = () => {
       .finally(() => setIsChanging(false));
   }, [publicClient, changeRulerConfig, changeRuler, refetchData]);
 
+  const isDisabled = useMemo(
+    () =>
+      !isConnected ||
+      chainId !== DEFAULT_CHAIN ||
+      !changeRulerConfig ||
+      isError ||
+      isLoading ||
+      isChanging ||
+      isUndefined(arbitrable) ||
+      !isValid,
+    [changeRulerConfig, isError, isLoading, isChanging, arbitrable, isValid, isConnected, chainId]
+  );
   return (
     <Container>
       <Header text="Developer" />
@@ -74,14 +87,7 @@ const ChangeDeveloper: React.FC = () => {
           variant={isValid ? "" : "error"}
         />
       </InputContainer>
-      <EnsureChain>
-        <Button
-          text="Update"
-          onClick={handleClick}
-          isLoading={isLoading || isChanging}
-          disabled={!changeRulerConfig || isError || isLoading || isChanging || isUndefined(arbitrable) || !isValid}
-        />
-      </EnsureChain>
+      <Button text="Update" onClick={handleClick} isLoading={isLoading || isChanging} disabled={isDisabled} />
     </Container>
   );
 };

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

@@ -3,7 +3,7 @@ import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
 import { RULING_MODE } from "consts";
-import { usePublicClient } from "wagmi";
+import { useAccount, usePublicClient } from "wagmi";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -17,10 +17,10 @@ import {
 import { isUndefined } from "utils/isUndefined";
 import { wrapWithToast } from "utils/wrapWithToast";
 
-import { EnsureChain } from "components/EnsureChain";
 import LabeledInput from "components/LabeledInput";
 
 import Header from "./Header";
+import { DEFAULT_CHAIN } from "consts/chains";
 
 const Container = styled.div`
   width: 100%;
@@ -37,8 +37,9 @@ const SelectContainer = styled.div`
 `;
 
 const ManualRuling: React.FC = () => {
-  const [isSending, setIsSending] = useState<boolean>(false);
+  const { isConnected, chainId } = useAccount();
   const { arbitrable, arbitrableSettings } = useRulerContext();
+  const [isSending, setIsSending] = useState<boolean>(false);
   const [tie, setTie] = useState(arbitrableSettings?.tied ?? false);
   const [overriden, setOverriden] = useState(arbitrableSettings?.overridden ?? false);
   const [ruling, setRuling] = useState(arbitrableSettings?.ruling);
@@ -55,8 +56,14 @@ const ManualRuling: React.FC = () => {
   const { writeContractAsync: changeToManualMode } = useWriteKlerosCoreRulerChangeRulingModeToManual();
 
   const isDisabled = useMemo(() => {
-    return isUndefined(disputeId) || isUndefined(ruling) || isUndefined(arbitrable);
-  }, [disputeId, ruling, arbitrable]);
+    return (
+      !isConnected ||
+      chainId !== DEFAULT_CHAIN ||
+      isUndefined(disputeId) ||
+      isUndefined(ruling) ||
+      isUndefined(arbitrable)
+    );
+  }, [disputeId, ruling, arbitrable, isConnected, chainId]);
 
   const {
     data: executeConfig,
@@ -113,14 +120,12 @@ const ManualRuling: React.FC = () => {
           onChange={() => setOverriden((prev) => !prev)}
         />
       </SelectContainer>
-      <EnsureChain>
-        <Button
-          text="Rule"
-          onClick={handleRuling}
-          isLoading={isLoadingExecuteConfig || isSending}
-          disabled={isDisabled || isError || isSending || isLoadingExecuteConfig}
-        />
-      </EnsureChain>
+      <Button
+        text="Rule"
+        onClick={handleRuling}
+        isLoading={isLoadingExecuteConfig || isSending}
+        disabled={isDisabled || isError || isSending || isLoadingExecuteConfig}
+      />
     </Container>
   );
 };

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

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 
 import { RULING_MODE } from "consts";
-import { usePublicClient } from "wagmi";
+import { useAccount, usePublicClient } from "wagmi";
 
 import { Button, Radio } from "@kleros/ui-components-library";
 
@@ -18,10 +18,10 @@ import {
 import { isUndefined } from "utils/isUndefined";
 import { wrapWithToast } from "utils/wrapWithToast";
 
-import { EnsureChain } from "components/EnsureChain";
 import LabeledInput from "components/LabeledInput";
 
 import Header from "./Header";
+import { DEFAULT_CHAIN } from "consts/chains";
 
 const Container = styled.div`
   width: 100%;
@@ -46,6 +46,7 @@ const AutomaticPresetInputsContainer = styled.div`
 `;
 
 const RulingModes: React.FC = () => {
+  const { isConnected, chainId } = useAccount();
   const { arbitrable, arbitrableSettings } = useRulerContext();
   const [rulingMode, setRulingMode] = useState<RULING_MODE>();
   const [tie, setTie] = useState(false);
@@ -54,7 +55,6 @@ const RulingModes: React.FC = () => {
   const [isSending, setIsSending] = useState(false);
 
   const publicClient = usePublicClient();
-
   useEffect(() => {
     // only update once the arbitrable settings are fetched and only update initially, not updated on refetch
     if (!isUndefined(rulingMode) || !arbitrableSettings) return;
@@ -117,7 +117,7 @@ const RulingModes: React.FC = () => {
     useWriteKlerosCoreRulerChangeRulingModeToAutomaticRandom();
 
   const isDisabled = useMemo(() => {
-    if (!arbitrable) return true;
+    if (!arbitrable || !isConnected || chainId !== DEFAULT_CHAIN) return true;
     switch (rulingMode) {
       case RULING_MODE.Manual:
         return (
@@ -160,6 +160,8 @@ const RulingModes: React.FC = () => {
     tie,
     overriden,
     ruling,
+    isConnected,
+    chainId,
   ]);
 
   const isLoading = useMemo(() => {
@@ -270,14 +272,12 @@ const RulingModes: React.FC = () => {
           </AutomaticPresetInputsContainer>
         )}
       </SelectContainer>
-      <EnsureChain>
-        <Button
-          text="Update"
-          onClick={handleUpdate}
-          isLoading={isLoading || isSending}
-          disabled={isDisabled || isSending}
-        />
-      </EnsureChain>
+      <Button
+        text="Update"
+        onClick={handleUpdate}
+        isLoading={isLoading || isSending}
+        disabled={isDisabled || isSending}
+      />
     </Container>
   );
 };

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

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
 import RulerContextProvider from "context/RulerContext";
@@ -10,6 +10,9 @@ import ChangeDeveloper from "./ChangeDeveloper";
 import ManualRuling from "./ManualRuling";
 import RulingModes from "./RulingModes";
 import SelectArbitrable from "./SelectArbitrable";
+import ConnectWallet from "components/ConnectWallet";
+import { useAccount } from "wagmi";
+import { DEFAULT_CHAIN } from "consts/chains";
 
 const Container = styled.div`
   min-height: calc(100vh - 160px);
@@ -21,12 +24,21 @@ const Container = styled.div`
   padding: ${responsiveSize(32, 72)} ${responsiveSize(16, 132)} ${responsiveSize(76, 96)};
 `;
 
+const StyledConnectWallet = styled(ConnectWallet)`
+  align-self: flex-start;
+`;
+
 const Ruler: React.FC = () => {
+  const { isConnected, chainId } = useAccount();
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => setIsClient(true), []);
   return (
     <RulerContextProvider>
       <Container>
         <h1>Ruler</h1>
         <SelectArbitrable />
+        {isClient && (!isConnected || chainId !== DEFAULT_CHAIN) ? <StyledConnectWallet /> : null}
         <RulingModes />
         <ManualRuling />
         <ChangeDeveloper />