@latticexyz/entrykit 2.2.22-9dc032a7075a33fca3936f049aae8de923e9a723 → 2.2.22-9f06079cb52cb39888097ea3a293ec71bd46ebbc

package/dist/tsup/exports/internal.js

@@ -550,7 +550,7 @@ function ConnectWallet() {
 }
 
 // src/onboarding/ConnectedSteps.tsx
-import { useEffect as useEffect13, useMemo as useMemo4, useRef as useRef4, useState as useState6 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo4, useRef as useRef4, useState as useState6 } from "react";
 import { twMerge as twMerge17 } from "tailwind-merge";
 
 // src/onboarding/usePrerequisites.ts
@@ -1613,8 +1613,9 @@ function Session({ isActive, isExpanded, userClient, registerSpender, registerDe
 }
 
 // src/onboarding/GasBalance.tsx
-import { useState as useState3 } from "react";
+import { useEffect as useEffect9, useState as useState3 } from "react";
 import { parseEther as parseEther4 } from "viem";
+import { useQueryClient as useQueryClient6 } from "@tanstack/react-query";
 import { useBalance as useBalance2, useWatchBlockNumber } from "wagmi";
 
 // src/data/relayChains.json
@@ -1920,6 +1921,16 @@ function useSetBalance() {
   });
 }
 
+// src/errors/usePrevious.ts
+import { useEffect as useEffect8, useRef as useRef2 } from "react";
+function usePrevious(value, initialValue) {
+  const ref = useRef2();
+  useEffect8(() => {
+    ref.current = { value };
+  }, [value]);
+  return ref.current ? ref.current.value : initialValue;
+}
+
 // src/icons/IconSVG.tsx
 import { twMerge as twMerge7 } from "tailwind-merge";
 import { jsx as jsx16 } from "react/jsx-runtime";
@@ -1972,9 +1983,11 @@ function CheckIcon(props) {
 // src/onboarding/GasBalance.tsx
 import { Fragment, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 function GasBalance({ isActive, isExpanded, sessionAddress }) {
+  const queryClient = useQueryClient6();
   const { chain } = useEntryKitConfig();
   const [copied, setCopied] = useState3(false);
   const balance = useShowQueryError(useBalance2({ chainId: chain.id, address: sessionAddress }));
+  const prevBalance = usePrevious(balance.data);
   useWatchBlockNumber({ onBlockNumber: () => balance.refetch() });
   const setBalance3 = useShowMutationError(useSetBalance());
   const relayChain = relayChains_default[chain.id];
@@ -1983,6 +1996,11 @@ function GasBalance({ isActive, isExpanded, sessionAddress }) {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
+  useEffect9(() => {
+    if (balance.data != null && prevBalance?.value === 0n && balance.data.value > 0n) {
+      queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
+    }
+  }, [balance.data, prevBalance, setBalance3, sessionAddress, queryClient]);
   return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-4", children: [
     /* @__PURE__ */ jsxs14("div", { className: "flex justify-between gap-4", children: [
       /* @__PURE__ */ jsxs14("div", { children: [
@@ -2053,7 +2071,7 @@ function GasBalance({ isActive, isExpanded, sessionAddress }) {
 
 // src/onboarding/deposit/DepositFormContainer.tsx
 import { useState as useState5 } from "react";
-import { useChains as useChains5, useChainId } from "wagmi";
+import { useChains as useChains4, useChainId } from "wagmi";
 
 // src/onboarding/deposit/DepositViaTransferForm.tsx
 import { useAccount as useAccount5, useWriteContract, usePrepareTransactionRequest, usePublicClient } from "wagmi";
@@ -2061,16 +2079,16 @@ import { encodeFunctionData as encodeFunctionData2 } from "viem";
 import { useMutation as useMutation4, useQuery as useQuery11 } from "@tanstack/react-query";
 
 // src/onboarding/deposit/DepositForm.tsx
-import { useEffect as useEffect8, useRef as useRef2 } from "react";
+import { useEffect as useEffect11, useRef as useRef3 } from "react";
 import { useAccount as useAccount4, useBalance as useBalance5, useWatchBlockNumber as useWatchBlockNumber2 } from "wagmi";
 import { useIsMounted } from "usehooks-ts";
 import { twMerge as twMerge15 } from "tailwind-merge";
 
 // src/onboarding/deposit/ChainSelect.tsx
-import { useMemo as useMemo2 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo2 } from "react";
+import { useAccount as useAccount2, useSwitchChain } from "wagmi";
 import { twMerge as twMerge12 } from "tailwind-merge";
 import * as Select from "@radix-ui/react-select";
-import { useAccount as useAccount2, useChains as useChains2 } from "wagmi";
 
 // src/icons/ChevronUpIcon.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
@@ -2227,7 +2245,7 @@ function ChainSelect({ value, onChange }) {
   const theme = useTheme();
   const { frame } = useFrame();
   const userAccount = useAccount2();
-  const chains = useChains2();
+  const { chains, switchChain } = useSwitchChain();
   const relay = useRelay();
   const relayChains = relay.data?.chains;
   const sourceChains = useMemo2(() => {
@@ -2240,6 +2258,13 @@ function ChainSelect({ value, onChange }) {
     }).filter((c) => c.relayChain);
   }, [chains, relayChains]);
   const selectedChain = sourceChains.find((c) => c.id === value);
+  useEffect10(() => {
+    if (sourceChains.length > 0 && !selectedChain) {
+      const defaultChain = sourceChains[0];
+      onChange(defaultChain.id);
+      switchChain({ chainId: defaultChain.id });
+    }
+  }, [value, selectedChain, sourceChains, onChange, switchChain]);
   return /* @__PURE__ */ jsxs15(
     Select.Root,
     {
@@ -2354,7 +2379,7 @@ var AmountInput = forwardRef3(function AmountInput2({ initialAmount, onChange },
 });
 
 // src/onboarding/deposit/SubmitButton.tsx
-import { useAccount as useAccount3, useBalance as useBalance4, useSwitchChain } from "wagmi";
+import { useAccount as useAccount3, useBalance as useBalance4, useSwitchChain as useSwitchChain2 } from "wagmi";
 import { twMerge as twMerge14 } from "tailwind-merge";
 import { parseEther as parseEther6 } from "viem";
 import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -2363,12 +2388,13 @@ function SubmitButton({ amount, chainId, className, ...buttonProps }) {
   const { chainId: userChainId, address: userAddress } = useAccount3();
   const { data: userBalance } = useBalance4({ address: userAddress });
   const shouldSwitchChain = chainId != null && chainId !== userChainId;
-  const switchChain = useSwitchChain();
+  const switchChain = useSwitchChain2();
   if (shouldSwitchChain) {
     return /* @__PURE__ */ jsx28(
       Button,
       {
         type: "button",
+        variant: "primary",
         className: twMerge14("w-full", className),
         pending: switchChain.isPending,
         onClick: () => switchChain.switchChain({ chainId }),
@@ -2424,7 +2450,7 @@ function DepositForm({
   onSubmit,
   submitButton
 }) {
-  const amountInputRef = useRef2(null);
+  const amountInputRef = useRef3(null);
   const isMounted = useIsMounted();
   const { address: userAddress, chainId: userChainId } = useAccount4();
   const balance = useShowQueryError(useBalance5({ chainId: sourceChain.id, address: userAddress }));
@@ -2437,7 +2463,7 @@ function DepositForm({
   });
   const minimumBalance = amount != null ? amount + (estimatedFee?.fee ?? 0n) : void 0;
   const hasMinimumBalance = balance.data != null ? balance.data.value > (minimumBalance ?? 0n) : void 0;
-  useEffect8(() => {
+  useEffect11(() => {
     amountInputRef.current?.focus();
   }, [userChainId]);
   return /* @__PURE__ */ jsxs18(
@@ -2764,14 +2790,14 @@ function DepositViaRelayForm({ amount, setAmount, sourceChain, setSourceChainId
 }
 
 // src/onboarding/deposit/Deposits.tsx
-import { useEffect as useEffect10 } from "react";
-import { useQuery as useQuery15, useQueryClient as useQueryClient6 } from "@tanstack/react-query";
+import { useEffect as useEffect13 } from "react";
+import { useQuery as useQuery15, useQueryClient as useQueryClient7 } from "@tanstack/react-query";
 
 // src/onboarding/deposit/TransferDepositStatus.tsx
 import { useQuery as useQuery13 } from "@tanstack/react-query";
 
 // src/onboarding/deposit/DepositStatus.tsx
-import { useEffect as useEffect9, useState as useState4 } from "react";
+import { useEffect as useEffect12, useState as useState4 } from "react";
 import { twMerge as twMerge16 } from "tailwind-merge";
 
 // src/icons/CloseIcon.tsx
@@ -2794,7 +2820,7 @@ function CloseIcon(props) {
 import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 function DepositStatus({ status, progress, children, onDismiss }) {
   const [appear, setAppear] = useState4(false);
-  useEffect9(() => {
+  useEffect12(() => {
     setAppear(true);
   }, []);
   return /* @__PURE__ */ jsxs19("div", { className: "group bg-white dark:bg-neutral-900 flex flex-col animate-in fade-in slide-in-from-bottom-2 animate-out fade-out", children: [
@@ -2839,7 +2865,7 @@ function DepositStatus({ status, progress, children, onDismiss }) {
 }
 
 // src/onboarding/deposit/TransferDepositStatus.tsx
-import { useChains as useChains3 } from "wagmi";
+import { useChains as useChains2 } from "wagmi";
 import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 function TransferDepositStatus({
   amount,
@@ -2850,7 +2876,7 @@ function TransferDepositStatus({
   estimatedTime,
   onDismiss
 }) {
-  const chains = useChains3();
+  const chains = useChains2();
   const chain = chains.find((chain2) => chain2.id === chainL1Id);
   const receipt = useQuery13({
     queryKey: ["transferDepositStatus", hash],
@@ -2912,8 +2938,7 @@ function TransferDepositStatus({
             }
           ),
           " ",
-          /* @__PURE__ */ jsx35(Balance, { wei: amount }),
-          " !"
+          /* @__PURE__ */ jsx35(Balance, { wei: amount })
         ] });
       })()
     }
@@ -2922,7 +2947,7 @@ function TransferDepositStatus({
 
 // src/onboarding/deposit/RelayDepositStatus.tsx
 import { useQuery as useQuery14 } from "@tanstack/react-query";
-import { useChains as useChains4 } from "wagmi";
+import { useChains as useChains3 } from "wagmi";
 import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 function RelayDepositStatus({
   amount,
@@ -2933,7 +2958,7 @@ function RelayDepositStatus({
   depositPromise,
   onDismiss
 }) {
-  const chains = useChains4();
+  const chains = useChains3();
   const chainL1 = chains.find((chain) => chain.id === chainL1Id);
   const chainL2 = chains.find((chain) => chain.id === chainL2Id);
   const deposit = useQuery14({
@@ -2980,7 +3005,7 @@ function RelayDepositStatus({
 import { useAccount as useAccount7, useClient as useClient11 } from "wagmi";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function Deposits() {
-  const queryClient = useQueryClient6();
+  const queryClient = useQueryClient7();
   const { chainId } = useEntryKitConfig();
   const client = useClient11({ chainId });
   const { address: userAddress } = useAccount7();
@@ -2993,7 +3018,7 @@ function Deposits() {
       return true;
     }
   });
-  useEffect10(() => {
+  useEffect13(() => {
     if (isComplete) {
       queryClient.invalidateQueries({ queryKey: ["balance"] });
       queryClient.invalidateQueries({ queryKey: ["getBalance", client?.uid, userAddress] });
@@ -3014,7 +3039,7 @@ import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 function DepositFormContainer() {
   const { chainId: destinationChainId } = useEntryKitConfig();
   const chainId = useChainId();
-  const chains = useChains5();
+  const chains = useChains4();
   const [amount, setAmount] = useState5(void 0);
   const [sourceChainId, setSourceChainId] = useState5(chainId);
   const sourceChain = chains.find(({ id }) => id === sourceChainId);
@@ -3057,33 +3082,18 @@ function ArrowLeftIcon(props) {
 }
 
 // src/onboarding/quarry/GasBalance.tsx
-import { useEffect as useEffect12 } from "react";
-import { useQueryClient as useQueryClient7 } from "@tanstack/react-query";
-
-// src/errors/usePrevious.ts
-import { useEffect as useEffect11, useRef as useRef3 } from "react";
-function usePrevious(value, initialValue) {
-  const ref = useRef3();
-  useEffect11(() => {
-    ref.current = { value };
-  }, [value]);
-  return ref.current ? ref.current.value : initialValue;
-}
-
-// src/onboarding/quarry/GasBalance.tsx
+import { useEffect as useEffect14 } from "react";
+import { useQueryClient as useQueryClient8 } from "@tanstack/react-query";
 import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 function GasBalance2({ isActive, isExpanded, isFocused, setFocused, userAddress }) {
-  const queryClient = useQueryClient7();
+  const queryClient = useQueryClient8();
   const balance = useShowQueryError(useBalance(userAddress));
   const prevBalance = usePrevious(balance.data || 0n);
-  useEffect12(() => {
-    const checkBalance = async () => {
-      if (balance.data != null && prevBalance === 0n && balance.data > 0n) {
-        await queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
-        setFocused(false);
-      }
-    };
-    checkBalance();
+  useEffect14(() => {
+    if (balance.data != null && prevBalance === 0n && balance.data > 0n) {
+      queryClient.invalidateQueries({ queryKey: ["getPrerequisites"] });
+      setFocused(false);
+    }
   }, [balance.data, prevBalance, setFocused, queryClient, userAddress]);
   if (isFocused) {
     return /* @__PURE__ */ jsxs23(Fragment7, { children: [
@@ -3128,7 +3138,7 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
   const [focusedId, setFocusedId] = useState6(null);
   const userAddress = userClient.account.address;
   const { data: prerequisites, error: prerequisitesError } = usePrerequisites(userAddress);
-  useEffect13(() => {
+  useEffect15(() => {
     if (prerequisitesError) {
       console.error("Could not get prerequisites", prerequisitesError);
     }
@@ -3136,7 +3146,7 @@ function ConnectedSteps({ userClient, initialUserAddress }) {
   const { closeAccountModal } = useAccountModal();
   const isNewConnection = userAddress !== initialUserAddress;
   const initialPrerequisites = useRef4(prerequisites);
-  useEffect13(() => {
+  useEffect15(() => {
     if (prerequisites == null) return;
     if (initialPrerequisites.current == null) {
       initialPrerequisites.current = prerequisites;
@@ -3261,11 +3271,11 @@ import { ErrorBoundary } from "react-error-boundary";
 
 // src/errors/ErrorOverlay.tsx
 import { wait } from "@latticexyz/common/utils";
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect16 } from "react";
 import { twMerge as twMerge18 } from "tailwind-merge";
 import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
 function ErrorOverlay({ error: error2, retry, dismiss }) {
-  useEffect14(() => {
+  useEffect16(() => {
     if (error2) {
       console.error(error2);
     }