feat(web-devtools): add-connect-wallet-button

Author: tractorss

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

@@ -11,6 +11,7 @@ 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";
@@ -73,12 +74,14 @@ const ChangeDeveloper: React.FC = () => {
           variant={isValid ? "" : "error"}
         />
       </InputContainer>
-      <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={!changeRulerConfig || isError || isLoading || isChanging || isUndefined(arbitrable) || !isValid}
+        />
+      </EnsureChain>
     </Container>
   );
 };

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

@@ -1,3 +1,4 @@
+"use client";
 import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
@@ -16,6 +17,7 @@ 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";
@@ -111,13 +113,14 @@ const ManualRuling: React.FC = () => {
           onChange={() => setOverriden((prev) => !prev)}
         />
       </SelectContainer>
-
-      <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}
+        />
+      </EnsureChain>
     </Container>
   );
 };

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

@@ -18,6 +18,7 @@ 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";
@@ -269,13 +270,14 @@ const RulingModes: React.FC = () => {
           />
         </AutomaticPresetInputsContainer>
       </SelectContainer>
-
-      <Button
-        text="Update"
-        onClick={handleUpdate}
-        isLoading={isLoading || isSending}
-        disabled={isDisabled || isSending}
-      />
+      <EnsureChain>
+        <Button
+          text="Update"
+          onClick={handleUpdate}
+          isLoading={isLoading || isSending}
+          disabled={isDisabled || isSending}
+        />
+      </EnsureChain>
     </Container>
   );
 };

web-devtools/src/components/ConnectWallet/index.tsx

@@ -0,0 +1,57 @@
+import React, { useCallback } from "react";
+
+import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
+import { useAccount, useSwitchChain } from "wagmi";
+
+import { Button } from "@kleros/ui-components-library";
+
+import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
+
+export const SwitchChainButton: React.FC<{ className?: string }> = ({ className }) => {
+  // TODO isLoading is not documented, but exists in the type, might have changed to isPending
+  const { switchChain, isLoading } = useSwitchChain();
+  const handleSwitch = useCallback(() => {
+    if (!switchChain) {
+      console.error("Cannot switch network. Please do it manually.");
+      return;
+    }
+    try {
+      switchChain({ chainId: DEFAULT_CHAIN });
+    } catch (err) {
+      console.error(err);
+    }
+  }, [switchChain]);
+  return (
+    <Button
+      {...{ className }}
+      isLoading={isLoading}
+      disabled={isLoading}
+      text={`Switch to ${SUPPORTED_CHAINS[DEFAULT_CHAIN].name}`}
+      onClick={handleSwitch}
+    />
+  );
+};
+
+const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
+  const { open } = useWeb3Modal();
+  const { open: isOpen } = useWeb3ModalState();
+  return (
+    <Button
+      {...{ className }}
+      disabled={isOpen}
+      small
+      text={"Connect"}
+      onClick={async () => open({ view: "Connect" })}
+    />
+  );
+};
+
+const ConnectWallet: React.FC<{ className?: string }> = ({ className }) => {
+  const { isConnected, chainId } = useAccount();
+
+  if (isConnected && chainId !== DEFAULT_CHAIN) {
+    return <SwitchChainButton {...{ className }} />;
+  } else return <ConnectButton {...{ className }} />;
+};
+
+export default ConnectWallet;

web-devtools/src/components/EnsureChain.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react";
+
+import { useAccount } from "wagmi";
+
+import { DEFAULT_CHAIN } from "consts/chains";
+
+import ConnectWallet from "components/ConnectWallet";
+
+interface IEnsureChain {
+  children: React.ReactElement;
+  className?: string;
+}
+
+export const EnsureChain: React.FC<IEnsureChain> = ({ children, className }) => {
+  const { chainId } = useAccount();
+  const [isClient, setIsClient] = useState(false);
+
+  // hydration error workaround, in server pre-render chainId is undefined so it mismatches with the client's initial render
+  useEffect(() => setIsClient(true), []);
+
+  if (!isClient) return children;
+
+  return chainId === DEFAULT_CHAIN ? children : <ConnectWallet {...{ className }} />;
+};