chore(entrykit): various improvements (#3699)

Author: karooolis

.changeset/loud-keys-give.md

@@ -0,0 +1,8 @@
+---
+"@latticexyz/entrykit": patch
+---
+
+- EntryKit now returns to the login flow modal after a successful top-up.
+- The default chain is now selected as the source chain if the connected chain is not part of selectable chains.
+- The "Switch chain" button now uses the primary color, making it appear clickable.
+- The successful deposit status message has been updated.

packages/entrykit/src/onboarding/GasBalance.tsx

@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Hex, parseEther } from "viem";
+import { useQueryClient } from "@tanstack/react-query";
 import { PendingIcon } from "../icons/PendingIcon";
 import { Button } from "../ui/Button";
 import { Balance } from "../ui/Balance";
@@ -11,6 +12,7 @@ import { RelayChains, StepContentProps } from "./common";
 import { TruncatedHex } from "../ui/TruncatedHex";
 import { useShowMutationError } from "../errors/useShowMutationError";
 import { useShowQueryError } from "../errors/useShowQueryError";
+import { usePrevious } from "../errors/usePrevious";
 import { CopyIcon } from "../icons/CopyIcon";
 import { CheckIcon } from "../icons/CheckIcon";
 
@@ -19,10 +21,12 @@ export type Props = StepContentProps & {
 };
 
 export function GasBalance({ isActive, isExpanded, sessionAddress }: Props) {
+  const queryClient = useQueryClient();
   const { chain } = useEntryKitConfig();
   const [copied, setCopied] = useState(false);
 
   const balance = useShowQueryError(useBalance({ chainId: chain.id, address: sessionAddress }));
+  const prevBalance = usePrevious(balance.data);
   useWatchBlockNumber({ onBlockNumber: () => balance.refetch() });
 
   const setBalance = useShowMutationError(useSetBalance());
@@ -35,6 +39,12 @@ export function GasBalance({ isActive, isExpanded, sessionAddress }: Props) {
     setTimeout(() => setCopied(false), 2000);
   };
 
+  useEffect(() => {
+    if (balance.data != null && prevBalance?.value === 0n && balance.data.value > 0n) {
+      queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
+    }
+  }, [balance.data, prevBalance, setBalance, sessionAddress, queryClient]);
+
   return (
     <div className="flex flex-col gap-4">
       <div className="flex justify-between gap-4">

packages/entrykit/src/onboarding/deposit/ChainSelect.tsx

@@ -1,8 +1,8 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
+import { useAccount, useSwitchChain } from "wagmi";
 import { twMerge } from "tailwind-merge";
 import * as Select from "@radix-ui/react-select";
 import { useFrame } from "../../ui/FrameProvider";
-import { useAccount, useChains } from "wagmi";
 import { useTheme } from "../../useTheme";
 import { ChevronUpIcon } from "../../icons/ChevronUpIcon";
 import { ChevronDownIcon } from "../../icons/ChevronDownIcon";
@@ -20,8 +20,7 @@ export function ChainSelect({ value, onChange }: Props) {
   const theme = useTheme();
   const { frame } = useFrame();
   const userAccount = useAccount();
-
-  const chains = useChains();
+  const { chains, switchChain } = useSwitchChain();
   const relay = useRelay();
   const relayChains = relay.data?.chains;
 
@@ -39,6 +38,14 @@ export function ChainSelect({ value, onChange }: Props) {
 
   const selectedChain = sourceChains.find((c) => c.id === value)!;
 
+  useEffect(() => {
+    if (sourceChains.length > 0 && !selectedChain) {
+      const defaultChain = sourceChains[0];
+      onChange(defaultChain.id);
+      switchChain({ chainId: defaultChain.id });
+    }
+  }, [value, selectedChain, sourceChains, onChange, switchChain]);
+
   return (
     <Select.Root
       value={value.toString()}

packages/entrykit/src/onboarding/deposit/SubmitButton.tsx

@@ -20,6 +20,7 @@ export function SubmitButton({ amount, chainId, className, ...buttonProps }: Pro
     return (
       <Button
         type="button"
+        variant="primary"
         className={twMerge("w-full", className)}
         pending={switchChain.isPending}
         onClick={() => switchChain.switchChain({ chainId })}

packages/entrykit/src/onboarding/deposit/TransferDepositStatus.tsx

@@ -74,7 +74,7 @@ export function TransferDepositStatus({
             >
               deposited
             </a>{" "}
-            <Balance wei={amount} /> !
+            <Balance wei={amount} />
           </>
         );
       })()}

packages/entrykit/src/onboarding/quarry/GasBalance.tsx

@@ -21,13 +21,10 @@ export function GasBalance({ isActive, isExpanded, isFocused, setFocused, userAd
   const prevBalance = usePrevious(balance.data || 0n);
 
   useEffect(() => {
-    const checkBalance = async () => {
-      if (balance.data != null && prevBalance === 0n && balance.data > 0n) {
-        await queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
-        setFocused(false);
-      }
-    };
-    checkBalance();
+    if (balance.data != null && prevBalance === 0n && balance.data > 0n) {
+      queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
+      setFocused(false);
+    }
   }, [balance.data, prevBalance, setFocused, queryClient, userAddress]);
 
   if (isFocused) {