fix(PE-8428): reduce use of dispatchArNSState #800

dtfiedler · 2025-06-27T00:05:56Z

No description provided.

coderabbitai · 2025-06-27T00:06:26Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch manage-improvements

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

src/components/pages/Manage/Manage.tsx

atticusofsparta · 2025-08-10T01:34:31Z

src/components/data-display/tables/DomainsTable.tsx

-              })
-            : false);
-
+        console.log(domainData);


Suggested change

console.log(domainData);

atticusofsparta · 2025-08-10T01:43:26Z

src/components/pages/Manage/Manage.tsx

+  const [isLoading, setIsLoading] = useState(isLoadingDomains || isLoadingAnts);
+
+  useEffect(() => {
+    setIsLoading(
+      isLoadingDomains || isLoadingAnts || isLoadingAntsRequireUpdate,
+    );
+  }, [
+    isLoadingDomains,
+    isLoadingAnts,
+    isRefetchingDomains,
+    isRefetchingAnts,
+    isLoadingAntsRequireUpdate,
+  ]);


useMemo is more concise here. Also some unnecessary deps in here, should just need to watch the three booleans that set the variable.

atticusofsparta · 2025-08-10T01:52:27Z

src/hooks/useAntsForWallet.tsx

+export const useAntsRequireUpdate = (): {
+  ants: string[];
+  isLoading: boolean;
+} => {
+  const { data: antData = {}, isLoading, isRefetching } = useAntsForWallet();
+  const {
+    data: latestAntVersion,
+    isLoading: isLoadingLatestAntVersion,
+    isRefetching: isRefetchingLatestAntVersion,
+  } = useLatestANTVersion();
+  return {
+    ants: Object.keys(antData)
+      .filter((processId) => {
+        return +antData[processId].version < +(latestAntVersion?.version || 0);
+      })
+      .map((processId) => processId),
+    isLoading:
+      isLoading ||
+      isLoadingLatestAntVersion ||
+      isRefetching ||
+      isRefetchingLatestAntVersion,
+  };
+};


recommend useMemo on the ants and isLoading vars

deps for ants is the query data (antData and latestAntVersion) then deps for isLoading is all the loading variables.

This helps prevent unnecessary rerenders, especially if using this in a lot of elements (eg domains table on every single row and in ternaries for feature blocking inputs)

atticusofsparta · 2025-08-10T01:53:29Z

src/hooks/useAntsForWallet.tsx

+};
+
+export const useAntsRequireUpdate = (): {
+  ants: string[];


nit: antIds

atticusofsparta · 2025-08-10T01:54:11Z

src/components/pages/Manage/Manage.tsx

+    isRefetching: isRefetchingDomains,
+    refetch: refetchDomains,
+  } = useArNSRecordsForWallet();
+  const { ants: antsRequireUpdate, isLoading: isLoadingAntsRequireUpdate } =


nit: antsRequireUpdate seems to indicate boolean but this is an array of process id's - antsRequiringUpdate / useAntsRequiringUpdate might be higher signal here.

atticusofsparta · 2025-08-10T02:03:14Z

src/hooks/useAntsForWallet.tsx

+  const { data: antVersions = {} } = useANTVersions();
+  const { data: latestAntVersion } = useLatestANTVersion();
+  return useQuery({
+    queryKey: ['ants-with-metadata', walletAddress?.toString()],


hyperbeamUrl, aoNetwork.ANT, accessControlList, antVersions should be added to the query key so that if they are updated the data is reevaluated. Main concern there is accessControlList

And actually doesn't look like we need wallet address here. Fine to have it, but it doesn't affect the query.

atticusofsparta · 2025-08-10T02:09:41Z

src/hooks/useArNSRecordsForWallet.tsx

+  const [{ walletAddress }] = useWalletState();
+  const [{ arioContract }] = useGlobalState();
+  return useQuery({
+    queryKey: ['arns-records-for-wallet', walletAddress?.toString()],


arioProcessId, aoNetwork.ARIO, and hyperbeamUrl should be added to the query key here

atticusofsparta · 2025-08-10T02:11:18Z

src/hooks/useArNSRecordsForWallet.tsx

+      }
+      return arnsRecordsForWallet;
+    },
+    staleTime: 60 * 60 * 1000, // 1 hour


enabled: !!walletAddress

atticusofsparta · 2025-08-10T02:12:50Z

src/hooks/useArNSRecordsForWallet.tsx

+        const {
+          items: newRecords,
+          hasMore: nextHasMore,
+          nextCursor,
+        } = await arioContract.getArNSRecordsForAddress({
+          address: walletAddress?.toString() ?? '',
+          cursor,
+        });


nit: explicitly throw if no wallet address to satisfy type (also see comment on enabling the query)

Also, think we need to specify limit: 1000 else it will default to 100?

atticusofsparta · 2025-08-10T02:13:53Z

src/state/actions/dispatchArNSUpdate.ts


    // TODO: move all of these async calls to unique hooks and remove the need for the dispatchArNSUpdate action
    const arioContract = ARIO.init({
-      hyperbeamUrl,


this was added so the ANTRegistry internally in the sdk uses the hyperbeam ACL - why does it need to be removed?

atticusofsparta · 2025-08-10T02:14:57Z

src/state/contexts/ArNSState.tsx

  version: number;
  processMeta: TransactionEdge['node'] | null;
  errors?: Error[];
+  isLatestVersion?: boolean;


is the intention of nullish to indicate to not display upgrade prompts?

atticusofsparta · 2025-08-10T02:22:17Z

src/components/data-display/tables/DomainsTable.tsx

+                    await queryClient.invalidateQueries({
+                      queryKey: ['ant', processId],


This is a less dependant way to indicate the query key - omitting 'ant' will also refresh any apis using the process id.

Query key is position sensitive, so if processId is changed in the future to another index this breaks. Using the predicate helps future proof a bit there.

Suggested change

await queryClient.invalidateQueries({

queryKey: ['ant', processId],

await queryClient.invalidateQueries({

predicate: ({ queryKey }) => queryKey.includes("ant") && queryKey.includes(processId),

Another note there, check in with the new hooks on things relying on state... I believe the useAntsForWallet hook calls this in its query, but its state may not be updated in this refresh.

Thats a case where including the process id in the query key and then predicating on the process ID can help in cache control.

atticusofsparta · 2025-08-10T02:32:01Z

src/hooks/useAntsForWallet.tsx

+
+      return antsWithMetadata.reduce((acc, item) => ({ ...acc, ...item }), {});
+    },
+  });


Should add a stale time, and enabled prop.

Should only be enabled if we have the accessControlList - not having version is fine.

atticusofsparta · 2025-08-10T02:34:38Z

src/hooks/useAntsForWallet.tsx

+  return {
+    ants: Object.keys(antData)
+      .filter((processId) => {
+        return +antData[processId].version < +(latestAntVersion?.version || 0);


need to check the role on these ants as well, if its not an Owner role, then needs to be filters out.

Or, if not, then we need to update the permissions/handling on the buttons (which tbh is probably a better idea to show the actual state with a different UI)

github-actions · 2025-08-10T11:51:26Z

Visit the preview URL for this PR (updated for commit 7b0514f):

https://arns-portal--pr800-manage-improvements-kvttgo21.web.app

_{(expires Sun, 24 Aug 2025 11:51:15 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1f59769442cb89cf2a92042a342e51fe94047b94}

fix(manage): reduce use of dispatchArNSState

7c54bd8

dtfiedler commented Jun 27, 2025

View reviewed changes

src/components/pages/Manage/Manage.tsx Outdated Show resolved Hide resolved

dtfiedler closed this Aug 7, 2025

dtfiedler reopened this Aug 8, 2025

dtfiedler added 2 commits August 8, 2025 15:55

Merge remote-tracking branch 'origin/develop' into manage-improvements

4d1a424

chore(manage): use the latest SDK

15e218b

dtfiedler changed the title ~~fix(manage): reduce use of dispatchArNSState~~ fix(PE-8428): reduce use of dispatchArNSState Aug 8, 2025

dtfiedler added 2 commits August 8, 2025 16:28

fix(hook): rename hook

410746b

fix(manage): catch errors when fail to load state

3ad7972

dtfiedler force-pushed the manage-improvements branch from 6382b85 to 3ad7972 Compare August 8, 2025 21:44

atticusofsparta reviewed Aug 10, 2025

View reviewed changes

src/hooks/useAntsForWallet.tsx

};

export const useAntsRequireUpdate = (): {

ants: string[];

Copy link

Contributor

atticusofsparta Aug 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: antIds

atticusofsparta reviewed Aug 10, 2025

View reviewed changes

dtfiedler added 2 commits August 10, 2025 06:35

chore(docs): remove console statement

dfc7a5c

chore(hooks): remove unused hook

7b0514f

dtfiedler temporarily deployed to develop August 10, 2025 11:47 — with GitHub Actions Inactive

		await queryClient.invalidateQueries({
		queryKey: ['ant', processId],

fix(PE-8428): reduce use of dispatchArNSState #800

Are you sure you want to change the base?

fix(PE-8428): reduce use of dispatchArNSState #800

Uh oh!

Conversation

dtfiedler commented Jun 27, 2025

Uh oh!

coderabbitai bot commented Jun 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

atticusofsparta Aug 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

atticusofsparta Aug 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Aug 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

coderabbitai bot commented Jun 27, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

atticusofsparta Aug 10, 2025 •

edited

Loading

atticusofsparta Aug 10, 2025 •

edited

Loading