fix: loading state options

Author: akbarsaputrait

examples/nextjs-app/package.json

@@ -14,7 +14,7 @@
     "@headlessui/react": "^2.2.0",
     "@rainbow-me/rainbowkit": "^2.2.8",
     "@rozoai/intent-common": "0.1.7",
-    "@rozoai/intent-pay": "0.1.10",
+    "@rozoai/intent-pay": "workspace:*",
     "@tanstack/react-query": "^5.51.11",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@wagmi/core": "^2.22.0",

packages/connectkit/bundle-analysis.html

@@ -1,7 +1,7 @@
 {
   "name": "@rozoai/intent-pay",
   "private": false,
-  "version": "0.1.10",
+  "version": "0.1.12-beta.1",
   "author": "RozoAI",
   "homepage": "https://github.com/RozoAI/intent-pay",
   "license": "BSD-2-Clause",
@@ -47,7 +47,7 @@
     "@albedo-link/intent": "^0.13.0",
     "@reown/appkit": "^1.7.0",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@rozoai/intent-common": "0.1.7",
+    "@rozoai/intent-common": "0.1.8-beta.1",
     "@solana/spl-token": "^0.4.14",
     "@solana/wallet-adapter-base": "^0.9.27",
     "@solana/wallet-adapter-react": "^0.15.39",

packages/connectkit/package.json

@@ -114,7 +114,7 @@ export default function SelectToken() {
         show={effectiveTokenMode}
         excludeLogos={["stellar"]}
       />
-      {(optionsList.length > 0 || isLoading) && (
+      {(!isEmptyOptionsList || isLoading) && (
         <OptionsList
           requiredSkeletons={3}
           isLoading={isLoading}
@@ -126,7 +126,7 @@ export default function SelectToken() {
           hideBottomLine={!isAnotherMethodButtonVisible}
         />
       )}
-      {isEmptyOptionsList && !noConnectedWallet && (
+      {!isLoading && isEmptyOptionsList && !noConnectedWallet && (
         <NoTokensAvailable
           onRefresh={refreshOptions}
           preferredTokens={paymentState.payParams?.preferredTokens}

packages/connectkit/src/components/Pages/SelectToken/index.tsx

@@ -1,13 +1,10 @@
 import { type CreateConfigParameters, CreateConnectorFn, http } from "wagmi";
 import {
   arbitrum,
-  avalanche,
   base,
   bsc,
   Chain,
-  gnosis,
   mainnet,
-  optimism,
   polygon,
   worldchain,
 } from "wagmi/chains";
@@ -41,12 +38,12 @@ type DefaultConfigProps = {
  */
 export const REQUIRED_CHAINS: CreateConfigParameters["chains"] = [
   arbitrum,
-  avalanche,
+  // avalanche,
   base,
   bsc,
-  gnosis,
+  // gnosis,
   mainnet,
-  optimism,
+  // optimism,
   polygon,
   worldchain,
 ];

packages/connectkit/src/defaultConfig.ts

@@ -24,7 +24,7 @@ export function useSolanaPaymentOptions({
   payParams: PayParams | undefined;
 }) {
   const [options, setOptions] = useState<WalletPaymentOption[] | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   // Track the last executed parameters to prevent duplicate API calls
   const lastExecutedParams = useRef<string | null>(null);

packages/connectkit/src/hooks/useSolanaPaymentOptions.ts

@@ -33,7 +33,7 @@ export function useStellarPaymentOptions({
   }, [chains]);
 
   const [options, setOptions] = useState<WalletPaymentOption[] | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   // Track the last executed parameters to prevent duplicate API calls
   const lastExecutedParams = useRef<string | null>(null);

packages/connectkit/src/hooks/useStellarPaymentOptions.ts

@@ -35,7 +35,7 @@ export function useTokenOptions(mode: "evm" | "solana" | "stellar" | "all"): {
   const preferredTokens = paymentState.payParams?.preferredTokens;
 
   const optionsList: Option[] = [];
-  let isLoading = false;
+  let isLoading = true;
   let hasAnyData = false;
 
   // Determine which token types should be included based on mode and paymentOptions

packages/connectkit/src/hooks/useTokenOptions.tsx

@@ -47,7 +47,7 @@ export function useWalletPaymentOptions({
   log: (msg: string) => void;
 }) {
   const [options, setOptions] = useState<WalletPaymentOption[] | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   // Track the last executed parameters to prevent duplicate API calls
   const lastExecutedParams = useRef<string | null>(null);

packages/connectkit/src/hooks/useWalletPaymentOptions.ts

@@ -604,7 +604,7 @@ async function runHydratePayIdEffects(
         value: BigInt("0"),
         data: "0x",
       },
-      refundAddr: (order.refundAddr as `0x${string}`) || null,
+      refundAddr: order.refundAddr || null,
       nonce: orderData.data.nonce as unknown as bigint,
       sourceTokenAmount: null,
       sourceFulfillerAddr: null,