Merge production with main

[marc-aurele-besner]

User description

Merge production with main

---

PR Type

enhancement, bug fix, tests

---

Description

• Refactored multiple components to replace useQuery with useSquidQuery for fetching data.
• Added useWindowFocus and useInView hooks to manage query visibility and improve performance.
• Updated table columns and accessor keys across various components.
• Added Zustand store for managing query states.

---

Changes walkthrough 📝

	Relevant files
Enhancement	15 files NominatorsList.tsx Refactor NominatorsList component to use new hooks and query management explorer/src/components/Operator/NominatorsList.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated table columns and accessor keys. +93/-44  LastExtrinsics.tsx Refactor LastExtrinsics component to use new hooks and query management explorer/src/components/WalletSideKick/LastExtrinsics.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated extrinsics list rendering logic. +103/-125 NominationManagement.tsx Refactor NominationManagement component to use new hooks and query management explorer/src/components/Operator/NominationManagement.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated table columns and accessor keys. +80/-39  StakingSummary.tsx Refactor StakingSummary component to use new hooks and query management explorer/src/components/WalletSideKick/StakingSummary.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated staking summary rendering logic. +91/-57  OperatorsList.tsx Refactor OperatorsList component to use new hooks and query management explorer/src/components/Operator/OperatorsList.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated table columns and accessor keys. +76/-41  query.ts Add Zustand store for managing query states                            explorer/src/states/query.ts Added new Zustand store for managing query states. Defined types for query states and helper functions. +217/-0  VoteBlockRewardList.tsx Refactor VoteBlockRewardList component to use new hooks and query management explorer/src/components/Leaderboard/VoteBlockRewardList.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated table columns and accessor keys. +87/-58  Leaderboard.tsx Refactor Leaderboard component to use new hooks and query management explorer/src/components/WalletSideKick/Leaderboard.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated leaderboard rendering logic. +81/-46  OperatorManagement.tsx Refactor OperatorManagement component to use new hooks and query management explorer/src/components/Operator/OperatorManagement.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated table columns and accessor keys. +69/-32  NominatorRewardsList.tsx Refactor NominatorRewardsList component to use new hooks and query management explorer/src/components/Leaderboard/NominatorRewardsList.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated table columns and accessor keys. +76/-54  PendingTransactions.tsx Refactor PendingTransactions component to use new hooks and query management explorer/src/components/WalletSideKick/PendingTransactions.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated pending transactions handling logic. +109/-32 AccountRewardList.tsx Refactor AccountRewardList component to use new hooks and query management explorer/src/components/Account/AccountRewardList.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated reward list rendering logic. +70/-33  OperatorRewardsList.tsx Refactor OperatorRewardsList component to use new hooks and query management explorer/src/components/Leaderboard/OperatorRewardsList.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated table columns and accessor keys. +73/-52  AccountExtrinsicList.tsx Refactor AccountExtrinsicList component to use new hooks and query management explorer/src/components/Account/AccountExtrinsicList.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated extrinsic list rendering logic. +75/-27  ExtrinsicList.tsx Refactor ExtrinsicList component to use new hooks and query management explorer/src/components/Extrinsic/ExtrinsicList.tsx Replaced useQuery with useSquidQuery for fetching data. Added useWindowFocus and useInView hooks for query visibility. Updated extrinsic list rendering logic. +74/-34
Additional files (token-limit)	41 files AccountList.tsx ...                                                                                                            explorer/src/components/Account/AccountList.tsx ... +66/-27  EventList.tsx ...                                                                                                            explorer/src/components/Event/EventList.tsx ... +80/-36  BlockDetailsEventList.tsx ...                                                                                                            explorer/src/components/Block/BlockDetailsEventList.tsx ... +64/-44  LogList.tsx ...                                                                                                            explorer/src/components/Log/LogList.tsx ... +80/-36  AccountPreviousRewards.tsx ...                                                                                                            explorer/src/components/Account/AccountPreviousRewards.tsx ... +48/-14  BlockDetailsExtrinsicList.tsx ...                                                                                                            explorer/src/components/Block/BlockDetailsExtrinsicList.tsx ... +66/-42  OperatorsList.tsx ...                                                                                                            explorer/src/components/StakeWars/OperatorsList.tsx ... +51/-29  BlockList.tsx ...                                                                                                            explorer/src/components/Block/BlockList.tsx ... +66/-28  NominatorList.tsx ...                                                                                                            explorer/src/components/StakeWars/NominatorList.tsx ... +41/-22  Operator.tsx ...                                                                                                            explorer/src/components/Operator/Operator.tsx ... +63/-38  Account.tsx ...                                                                                                            explorer/src/components/Account/Account.tsx ... +61/-14  GetDiscordRoles.tsx ...                                                                                                            explorer/src/components/WalletSideKick/GetDiscordRoles.tsx ... +34/-12  StakingHeader.tsx ...                                                                                                            explorer/src/components/layout/StakingHeader.tsx ... +24/-43  Block.tsx ...                                                                                                            explorer/src/components/Block/Block.tsx ... +63/-18  EndGame.tsx ...                                                                                                            explorer/src/components/StakeWars/EndGame.tsx ... +35/-20  index.tsx ...                                                                                                            explorer/src/components/Home/index.tsx ... +60/-15  Extrinsic.tsx ...                                                                                                            explorer/src/components/Extrinsic/Extrinsic.tsx ... +61/-13  AccountSummary.tsx ...                                                                                                            explorer/src/components/WalletSideKick/AccountSummary.tsx ... +28/-20  AccountRewardGraph.tsx ...                                                                                                            explorer/src/components/Account/AccountRewardGraph.tsx ... +29/-12  Log.tsx ...                                                                                                            explorer/src/components/Log/Log.tsx ... +53/-10  Event.tsx ...                                                                                                            explorer/src/components/Event/Event.tsx ... +46/-19  Footer.tsx ...                                                                                                            explorer/src/components/layout/Footer.tsx ... +10/-10  oldSquidTypes.ts ...                                                                                                            explorer/gql/oldSquidTypes.ts ... +18/-0    useSquidQuery.ts ...                                                                                                            explorer/src/hooks/useSquidQuery.ts ... +71/-0    ExtrinsicTable.tsx ...                                                                                                            explorer/src/components/Extrinsic/ExtrinsicTable.tsx ... +4/-3      LogDetailsEventList.tsx ...                                                                                                            explorer/src/components/Log/LogDetailsEventList.tsx ... +4/-3      BlockDetailsLogList.tsx ...                                                                                                            explorer/src/components/Block/BlockDetailsLogList.tsx ... +3/-2      index.tsx ...                                                                                                            explorer/src/components/layout/ExtrinsicAndEventResult/index.tsx ... +3/-2      useStakeWarsData.ts ...                                                                                                            explorer/src/components/StakeWars/hooks/useStakeWarsData.ts ... +9/-3      index.tsx ...                                                                                                            explorer/src/components/common/Spinner/index.tsx ... +10/-3    query.ts ...                                                                                                            explorer/src/components/WalletSideKick/query.ts ... +22/-0    HomeExtrinsicList.tsx ...                                                                                                            explorer/src/components/Home/HomeExtrinsicList.tsx ... +0/-3      query.ts ...                                                                                                            explorer/src/components/Operator/query.ts ... +16/-0    HomeBlockList.tsx ...                                                                                                            explorer/src/components/Home/HomeBlockList.tsx ... +0/-3      useWindowFocus.ts ...                                                                                                            explorer/src/hooks/useWindowFocus.ts ... +20/-0    index.tsx ...                                                                                                            explorer/src/components/WalletSideKick/index.tsx ... +4/-1      HomeChainInfo.tsx ...                                                                                                            explorer/src/components/Home/HomeChainInfo.tsx ... +0/-3      table.ts ...                                                                                                            explorer/src/utils/table.ts ... +2/-0      Dockerfile-debug ...                                                                                                            indexers/general-squid/Dockerfile-debug ... +59/-0    docker-compose-debug.yml ...                                                                                                            indexers/general-squid/docker-compose-debug.yml ... +68/-0    package.json ...                                                                                                            explorer/package.json ... +1/-0

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[netlify]

✅ Deploy Preview for astral-prod canceled.

Name	Link
🔨 Latest commit	cad4993
🔍 Latest deploy log	https://app.netlify.com/sites/astral-prod/deploys/66950ade7e0a7e0008197224

[netlify]

✅ Deploy Preview for dev-astral canceled.

Name	Link
🔨 Latest commit	cad4993
🔍 Latest deploy log	https://app.netlify.com/sites/dev-astral/deploys/66950ade282c510008ed5dcf

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Performance Concern The useInView hook is used to control the visibility of the component and its data fetching. However, this might lead to unnecessary re-renders and data fetching if not handled properly. Consider verifying if the current implementation efficiently handles visibility changes without excessive re-renders or data fetches. Code Clarity The useSquidQuery hook is used extensively throughout the component to manage state and data fetching. It's crucial to ensure that the states are managed clearly and efficiently to avoid state-related bugs and to improve maintainability. Error Handling The component fetches data using useSquidQuery, but there is no clear error handling strategy when data fetching fails. It's important to handle potential errors gracefully to improve the user experience. Data Integrity The component calculates totals and counts based on the fetched data. Ensure that the calculations are accurate and consider edge cases where data might be incomplete or incorrect. State Management The component uses Zustand for state management. Ensure that the state transitions are handled correctly and that there are no race conditions or stale states. Query Optimization The GraphQL queries used in the component should be optimized to fetch only the necessary data. This will improve the performance by reducing the load on the server and the network. Memory Management The component handles potentially large lists of data. Ensure that the memory usage is optimized, especially when handling large datasets or when performing operations like sorting and filtering.

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible bug	Correct the variable names in the destructuring of the useQueryStates hook to prevent data handling errors It seems that there is a typo in the destructuring of the useQueryStates hook, where consensus: { blockDetailsEvent: evmEntry } is repeated instead of using different variable names for different states. This might lead to incorrect data handling or runtime errors. explorer/src/components/Block/BlockDetailsEventList.tsx [67-68] consensus: { blockDetailsEvent: consensusEntry }, -consensus: { blockDetailsEvent: evmEntry }, +nova: { blockDetailsEvent: evmEntry }, Suggestion importance[1-10]: 10 Why: The suggestion correctly identifies a typo that could lead to incorrect data handling or runtime errors, making it a crucial fix.	10
	Add optional chaining to prevent potential runtime errors when accessing properties of selectedChain Consider checking for null or undefined before using the selectedChain object properties to avoid potential runtime errors if selectedChain is not defined. explorer/src/components/Account/AccountPreviousRewards.tsx [68] -selectedChain.isDomain ? accountId : formatAddress(accountId) +selectedChain?.isDomain ? accountId : formatAddress(accountId) Suggestion importance[1-10]: 9 Why: This suggestion prevents potential runtime errors by adding optional chaining when accessing selectedChain properties, which is crucial for code robustness.	9
Possible issue	Add a check to ensure eventId is valid before executing the query To prevent potential null or undefined errors, add a check for eventId before making the query in useSquidQuery. This ensures that the query only runs when eventId is valid. explorer/src/components/Event/Event.tsx [26-27] -variables: { eventId: eventId ?? '' }, +variables: eventId ? { eventId } : undefined, +skip: !eventId || !inFocus, Suggestion importance[1-10]: 9 Why: This suggestion prevents potential runtime errors by ensuring that the query only runs when eventId is valid, which is a significant improvement.	9
	Enhance type safety by specifying more precise types Replace the any type with more specific types for the data and rewards properties to enhance type safety and maintainability. explorer/src/components/Account/Account.tsx [71-73] +const account = useMemo(() => data && (data.accountById as SquidAccount), [data]); +const rewards = useMemo(() => (data ? (data.rewardEvents as RewardEvent[]) : []), [data]); - Suggestion importance[1-10]: 7 Why: The suggestion correctly identifies the use of any and proposes a more specific type, which would improve type safety and maintainability. However, it lacks the exact improved code.	7
	Ensure safe rendering by checking for modules existence before using it Consider checking for modules existence before rendering the EventListFilter to avoid potential runtime errors if modules is undefined. explorer/src/components/Event/EventList.tsx [198-209] -{modules && ( +{modules ? ( <div className='mt-5 flex w-full justify-between'> <EventListFilter title={ <div className=' font-medium text-grayDark dark:text-white'>Events {totalLabel}</div> } filters={filters} modules={modules} setFilters={setFilters} /> </div> -)} +) : null} Suggestion importance[1-10]: 5 Why: The suggestion adds a safety check for modules, which can prevent potential runtime errors, although the existing code already includes a conditional rendering check.	5
Enhancement	Ensure convertedAddress defaults to an empty string if undefined To ensure that the convertedAddress is always a string and avoid passing undefined to the GraphQL query, provide a default empty string when destructuring. explorer/src/components/Account/AccountPreviousRewards.tsx [78] -variables: { accountId: convertedAddress ?? '' } +variables: { accountId: convertedAddress || '' } Suggestion importance[1-10]: 8 Why: This suggestion ensures that convertedAddress is always a string, preventing potential issues when passing it to the GraphQL query, which is a good enhancement for code reliability.	8
	Update the useEffect to correctly manage the visibility state based on inView The useEffect hook that sets the visibility should also reset the visibility to false when inView is false to ensure the component state correctly reflects the UI state. explorer/src/components/Block/BlockList.tsx [195-196] useEffect(() => { - setIsVisible(inView) -}, [inView, setIsVisible]) + setIsVisible(inView); +}, [inView]) Suggestion importance[1-10]: 8 Why: The suggestion ensures that the component state accurately reflects the UI state, which is important for maintaining correct behavior.	8
	Simplify conditional rendering logic by using a ternary operator directly Replace the useMemo for loading state with a ternary operator directly in the JSX to simplify the component and reduce unnecessary memoization. explorer/src/components/Event/EventList.tsx [182-186] -const noData = useMemo(() => { - if (loading) return <Spinner isSmall /> - if (!data) return <NotFound /> - return null -}, [data, loading]) +const noData = loading ? <Spinner isSmall /> : (!data ? <NotFound /> : null) Suggestion importance[1-10]: 7 Why: The suggestion simplifies the code by reducing unnecessary memoization, making it more readable and potentially improving performance.	7
Best practice	Improve type definitions for state hooks to enhance type safety Consider using a more specific type for the useState hook for sorting and pagination to ensure type safety and better developer experience with autocompletion. explorer/src/components/Event/EventList.tsx [38-42] -const [sorting, setSorting] = useState<SortingState>([{ id: 'id', desc: false }]) -const [pagination, setPagination] = useState({ +const [sorting, setSorting] = useState<SortingState[]>([{ id: 'id', desc: false }]) +const [pagination, setPagination] = useState<{ pageSize: number; pageIndex: number }>({ pageSize: PAGE_SIZE, pageIndex: 0, }) Suggestion importance[1-10]: 8 Why: The suggestion improves type safety and developer experience by providing more specific types for the useState hooks. This can help prevent bugs and improve code readability.	8
	Improve key uniqueness for list items to prevent potential React key issues To avoid potential issues with duplicate keys in React components, consider using a more unique key for the list items. Combining phase.name with index could be more effective. explorer/src/components/Account/AccountPreviousRewards.tsx [272] -key={`${index}-account-rewards-block`} +key={`${phase.name}-${index}-account-rewards-block`} Suggestion importance[1-10]: 7 Why: This suggestion improves the uniqueness of keys in React list items, which is a best practice to avoid potential issues with duplicate keys.	7
Performance	Optimize the useEffect hook to only trigger setIsVisible when inView becomes true To improve the performance and avoid unnecessary re-renders, consider wrapping the setIsVisible function call inside a conditional check to ensure it only executes when inView changes its value from false to true. explorer/src/components/Block/BlockDetailsEventList.tsx [161-163] useEffect(() => { - setIsVisible(inView) + if (inView) { + setIsVisible(true); + } }, [inView, setIsVisible]) Suggestion importance[1-10]: 7 Why: This suggestion improves performance by preventing unnecessary re-renders, though it is not critical for functionality.	7
Maintainability	Simplify conditional rendering using logical AND instead of ternary operator Instead of using a ternary operator for conditional rendering based on loading and data states, use logical AND (&&) for a cleaner approach. explorer/src/components/Account/AccountRewardList.tsx [222-237] -{rewards ? ( +{rewards && ( <SortedTable data={rewards} columns={columns} showNavigation={true} sorting={sorting} onSortingChange={setSorting} pagination={pagination} pageCount={pageCount} onPaginationChange={setPagination} fullDataDownloader={fullDataDownloader} - /> -) : ( - noData )} +{!rewards && noData} Suggestion importance[1-10]: 6 Why: This suggestion simplifies the conditional rendering logic, making the code more readable and maintainable, although it is a minor improvement.	6
	Improve clarity of the hook's purpose by renaming the setter function Use a more descriptive variable name than setIsVisible for the useSquidQuery hook to clarify its purpose related to query visibility based on the UI state. explorer/src/components/Event/EventList.tsx [58-67] -const { setIsVisible } = useSquidQuery<EventsConnectionQuery, EventsConnectionQueryVariables>( +const { setQueryVisibility } = useSquidQuery<EventsConnectionQuery, EventsConnectionQueryVariables>( QUERY_EVENT_CONNECTION_LIST, { variables, skip: !inFocus, pollInterval: 6000, }, selectedChain?.isDomain ? Routes.nova : Routes.consensus, 'events', ) Suggestion importance[1-10]: 6 Why: Renaming setIsVisible to setQueryVisibility makes the code more descriptive and easier to understand, enhancing maintainability.	6

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@belopash/typeorm-store@1.2.2	Transitive: environment	+2	247 kB	belopash
npm/@polkadot/api@10.12.2	Transitive: network	+14	36.1 MB	polkadotjs

🚮 Removed packages: npm/@types/node@18.14.0, npm/@typescript-eslint/eslint-plugin@5.53.0, npm/@typescript-eslint/parser@5.53.0, npm/dotenv@16.0.3, npm/eslint-plugin-eslint-plugin@5.0.8, npm/eslint@8.34.0

View full report↗︎

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@belopash/typeorm-store@1.2.2	Transitive: environment	+2	247 kB	belopash
npm/@polkadot/api@10.12.2	Transitive: network	+14	36.1 MB	polkadotjs

🚮 Removed packages: npm/@types/node@18.14.0, npm/@typescript-eslint/eslint-plugin@5.53.0, npm/@typescript-eslint/parser@5.53.0, npm/dotenv@16.0.3, npm/eslint-plugin-eslint-plugin@5.0.8, npm/eslint@8.34.0

View full report↗︎