fix(app): fix txns details loader issue and rpc switching (#602)

apps/app/src/components/app/Address/AccountAlerts.tsx

@@ -2,8 +2,8 @@
 import { convertToUTC, nanoToMilli } from '@/utils/app/libs';
 import { useEffect, useState, useCallback } from 'react';
 import WarningIcon from '../Icons/WarningIcon';
-import useRpc from '@/hooks/useRpc';
 import { AccountDataInfo, ContractCodeInfo } from '@/utils/types';
+import useRpc from '@/hooks/app/useRpc';
 
 export default function AccountAlerts({
   id,

apps/app/src/components/app/Address/AccountMoreInfo.tsx

@@ -9,10 +9,10 @@ import {
   yoctoToNear,
 } from '@/utils/app/libs';
 import TokenImage from '../common/TokenImage';
-import useRpc from '@/hooks/useRpc';
 import { AccountDataInfo, ContractCodeInfo } from '@/utils/types';
 import { Link } from '@/i18n/routing';
 import { useTranslations } from 'next-intl';
+import useRpc from '@/hooks/app/useRpc';
 
 export default function AccountMoreInfo({
   id,

apps/app/src/components/app/Address/AccountOverview.tsx

@@ -3,11 +3,11 @@ import React, { useEffect, useState } from 'react';
 import { dollarFormat, fiatValue, yoctoToNear } from '@/utils/app/libs';
 import TokenHoldings from '../common/TokenHoldings';
 import FaExternalLinkAlt from '../Icons/FaExternalLinkAlt';
-import useRpc from '@/hooks/useRpc';
 import Big from 'big.js';
 import { FtInfo, TokenListInfo } from '@/utils/types';
 import { useTranslations } from 'next-intl';
 import { useConfig } from '@/hooks/app/useConfig';
+import useRpc from '@/hooks/app/useRpc';
 
 export default function AccountOverview({
   id,

apps/app/src/components/app/Address/Contract/Info.tsx

@@ -1,6 +1,6 @@
 'use client';
 import Question from '@/components/Icons/Question';
-import useRpc from '@/hooks/useRpc';
+import useRpc from '@/hooks/app/useRpc';
 import { Link } from '@/i18n/routing';
 import { useRpcStore } from '@/stores/rpc';
 import { convertToUTC, nanoToMilli } from '@/utils/libs';

apps/app/src/components/app/Address/Contract/OverviewActions.tsx

@@ -7,7 +7,7 @@ import {
   VerificationData,
   VerifierStatus,
 } from '@/utils/types';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 import Info from './Info';
 import { Tooltip } from '@reach/tooltip';
@@ -16,9 +16,10 @@ import ViewOrChange from './ViewOrChange';
 import { useAuthStore } from '@/stores/auth';
 import ViewOrChangeAbi from './ViewOrChangeAbi';
 import ContractCode from './ContractCode';
-import useRpc from '@/hooks/useRpc';
-import { useRpcStore } from '@/stores/rpc';
 import { verifierConfig } from '@/utils/app/config';
+import useRpc from '@/hooks/app/useRpc';
+import { useRpcProvider } from '@/hooks/app/useRpcProvider';
+import { useRpcStore } from '@/stores/app/rpc';
 
 interface Props {
   id: string;
@@ -65,7 +66,22 @@ const OverviewActions = (props: Props) => {
     Record<string, VerificationData>
   >({});
   const [rpcError, setRpcError] = useState(false);
-  const switchRpc: () => void = useRpcStore((state) => state.switchRpc);
+  const initializedRef = useRef(false);
+
+  const useRpcStoreWithProviders = () => {
+    const setProviders = useRpcStore((state) => state.setProviders);
+    const { RpcProviders } = useRpcProvider();
+    useEffect(() => {
+      if (!initializedRef.current) {
+        initializedRef.current = true;
+        setProviders(RpcProviders);
+      }
+    }, [RpcProviders, setProviders]);
+
+    return useRpcStore((state) => state);
+  };
+
+  const { switchRpc } = useRpcStoreWithProviders();
 
   useEffect(() => {
     if (rpcError) {

apps/app/src/components/app/Address/Contract/Verifier.tsx

@@ -3,12 +3,13 @@ import ErrorMessage from '@/components/common/ErrorMessage';
 import LoadingCircular from '@/components/common/LoadingCircular';
 import ArrowDown from '@/components/Icons/ArrowDown';
 import FaInbox from '@/components/Icons/FaInbox';
-import useRpc from '@/hooks/useRpc';
-import { useRpcStore } from '@/stores/rpc';
+import useRpc from '@/hooks/app/useRpc';
+import { useRpcProvider } from '@/hooks/app/useRpcProvider';
+import { useRpcStore } from '@/stores/app/rpc';
 import { verifierConfig } from '@/utils/config';
 import { parseGitHubLink, parseLink } from '@/utils/libs';
 import { ContractMetadata } from '@/utils/types';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 type ContractFormProps = {
   accountId: string;
@@ -34,8 +35,22 @@ const Verifier: React.FC<ContractFormProps> = ({
   const [onChainCodeHash, setOnChainCodeHash] = useState<string | null>(null);
   const [verified, setVerified] = useState<boolean>(false);
   const [rpcError, setRpcError] = useState(false);
-  const switchRpc: () => void = useRpcStore((state) => state.switchRpc);
+  const initializedRef = useRef(false);
+
+  const useRpcStoreWithProviders = () => {
+    const setProviders = useRpcStore((state) => state.setProviders);
+    const { RpcProviders } = useRpcProvider();
+    useEffect(() => {
+      if (!initializedRef.current) {
+        initializedRef.current = true;
+        setProviders(RpcProviders);
+      }
+    }, [RpcProviders, setProviders]);
+
+    return useRpcStore((state) => state);
+  };
 
+  const { switchRpc } = useRpcStoreWithProviders();
   const { contractCode, getContractMetadata, getVerifierData } = useRpc();
 
   useEffect(() => {

apps/app/src/components/app/Contact/FormContact.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useEffect, useRef, useState } from 'react';
 import ArrowDown from '../Icons/ArrowDown';
 import { toast } from 'react-toastify';
@@ -7,18 +8,17 @@ import type { TurnstileInstance } from '@marsidev/react-turnstile';
 import { useTranslations } from 'next-intl';
 import LoadingCircular from '@/components/common/LoadingCircular';
 import { useThemeStore } from '@/stores/theme';
+import { useConfig } from '@/hooks/app/useConfig';
 
 interface Props {
   selectValue?: string;
   getContactDetails: any;
 }
 
-const siteKey = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY;
-
 const FormContact = ({ selectValue, getContactDetails }: Props) => {
   const theme = useThemeStore((store) => store.theme);
   const t = useTranslations('contact');
-
+  const { siteKey } = useConfig();
   const [loading, setLoading] = useState(false);
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');

apps/app/src/components/app/Layouts/RpcMenu.tsx

@@ -1,14 +1,33 @@
 'use client';
-import { useRpcStore } from '@/stores/rpc';
 import { useEffect, useRef, useState } from 'react';
 import Rpc from '../Icons/Rpc';
 import ArrowDown from '../Icons/ArrowDown';
 import Check from '../Icons/Check';
-import { RpcProviders } from '@/utils/app/rpc';
+import { useRpcStore } from '@/stores/app/rpc';
+import { useRpcProvider } from '@/hooks/app/useRpcProvider';
+import { useRouter } from 'next/navigation';
 
 const RpcMenu = () => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const { RpcProviders } = useRpcProvider();
+  const initializedRef = useRef(false);
+  const router = useRouter();
+  const useRpcStoreWithProviders = () => {
+    const setProviders = useRpcStore((state) => state.setProviders);
+    const { RpcProviders } = useRpcProvider();
+
+    useEffect(() => {
+      if (!initializedRef.current) {
+        initializedRef.current = true;
+        setProviders(RpcProviders);
+      }
+    }, [RpcProviders, setProviders]);
+
+    return useRpcStore((state) => state);
+  };
+
+  const { setRpc, rpc: rpcUrl } = useRpcStoreWithProviders();
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
@@ -17,6 +36,7 @@ const RpcMenu = () => {
   const handleSelect = (url: string) => {
     setRpc(url);
     setIsOpen(false);
+    router.refresh();
   };
 
   useEffect(() => {
@@ -35,9 +55,6 @@ const RpcMenu = () => {
     };
   }, [dropdownRef]);
 
-  const rpcUrl = useRpcStore((state) => state.rpc);
-  const setRpc = useRpcStore((state) => state.setRpc);
-
   return (
     <li className="relative group flex h-8 justify-end max-md:mb-2">
       <span className="border rounded-md bg-gray-100 dark:bg-black-200 text-nearblue-600 dark:text-neargray-10 hover:text-green-500 dark:hover:text-green-250 ">

apps/app/src/components/app/NodeExplorer/Delegators.tsx

@@ -4,18 +4,19 @@ import { DelegatorInfo, RewardFraction, ValidatorStatus } from '@/utils/types';
 import { CurrentEpochValidatorInfo, ValidatorDescription } from 'nb-types';
 import { useEffect, useRef, useState } from 'react';
 import { Tooltip } from '@reach/tooltip';
-import useRpc from '@/hooks/useRpc';
 import Image from 'next/image';
 import { debounce } from 'lodash';
 import Skeleton from '../skeleton/common/Skeleton';
 import Table from '../common/Table';
 import ErrorMessage from '../common/ErrorMessage';
 import FaInbox from '../Icons/FaInbox';
-import { useRpcStore } from '@/stores/rpc';
 import { Link } from '@/i18n/routing';
 import { useSearchParams } from 'next/navigation';
 import { useConfig } from '@/hooks/app/useConfig';
 import { useThemeStore } from '@/stores/theme';
+import useRpc from '@/hooks/app/useRpc';
+import { useRpcProvider } from '@/hooks/app/useRpcProvider';
+import { useRpcStore } from '@/stores/app/rpc';
 
 interface Props {
   accountId: string;
@@ -45,10 +46,23 @@ const Delegators = ({ accountId }: Props) => {
   const [searchResults, setSearchResults] = useState<DelegatorInfo[]>([]);
   const [status, setStatus] = useState<string>();
   const [count, setCount] = useState<number>();
-  const rpcUrl: string = useRpcStore((state) => state.rpc);
-  const switchRpc: () => void = useRpcStore((state) => state.switchRpc);
   const [_allRpcProviderError, setAllRpcProviderError] = useState(false);
+  const initializedRef = useRef(false);
 
+  const useRpcStoreWithProviders = () => {
+    const setProviders = useRpcStore((state) => state.setProviders);
+    const { RpcProviders } = useRpcProvider();
+    useEffect(() => {
+      if (!initializedRef.current) {
+        initializedRef.current = true;
+        setProviders(RpcProviders);
+      }
+    }, [RpcProviders, setProviders]);
+
+    return useRpcStore((state) => state);
+  };
+
+  const { switchRpc, rpc: rpcUrl } = useRpcStoreWithProviders();
   const start = (pagination.page - 1) * pagination.per_page;
 
   const getStatusColorClass = (status: string) => {

apps/app/src/components/app/Tokens/FT/TokenFilter.tsx

@@ -3,10 +3,10 @@ import { FtInfo, FtsInfo, InventoryInfo, TokenListInfo } from '@/utils/types';
 import Big from 'big.js';
 import { useEffect, useState } from 'react';
 import { dollarFormat, localFormat } from '@/utils/libs';
-import useRpc from '@/hooks/useRpc';
 import FaAddressBook from '@/components/Icons/FaAddressBook';
 import Skeleton from '@/components/skeleton/common/Skeleton';
 import { Link } from '@/i18n/routing';
+import useRpc from '@/hooks/app/useRpc';
 
 interface Props {
   id: string;

apps/app/src/components/app/Tokens/FTTransfersActions.tsx

@@ -16,10 +16,10 @@ import Clock from '@/components/Icons/Clock';
 import ErrorMessage from '@/components/common/ErrorMessage';
 import FaInbox from '@/components/Icons/FaInbox';
 import TokenImage from '@/components/common/TokenImage';
-import useRpc from '@/hooks/useRpc';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
 import Table from '../common/Table';
+import useRpc from '@/hooks/app/useRpc';
 
 interface ListProps {
   data: {

apps/app/src/components/app/Tokens/NFTTransfersActions.tsx

@@ -3,7 +3,6 @@ import { TransactionInfo } from '@/utils/types';
 import { Tooltip } from '@reach/tooltip';
 import { useEffect, useState } from 'react';
 import { getTimeAgoString, localFormat, nanoToMilli } from '@/utils/libs';
-import useRpc from '@/hooks/useRpc';
 import TxnStatus from '@/components/common/Status';
 import FaLongArrowAltRight from '@/components/Icons/FaLongArrowAltRight';
 import TokenImage from '@/components/common/TokenImage';
@@ -14,6 +13,7 @@ import FaInbox from '@/components/Icons/FaInbox';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
 import Table from '../common/Table';
+import useRpc from '@/hooks/app/useRpc';
 
 interface ListProps {
   data: {