fix(hooks): add hooks for loading user assets

src/hooks/useANTRegistry.tsx

@@ -0,0 +1,45 @@
+import { ANTRegistry, ANT_REGISTRY_ID, AOProcess, AoClient } from '@ar.io/sdk';
+import { useGlobalState, useWalletState } from '@src/state';
+import { useQuery } from '@tanstack/react-query';
+
+export function buildANTRegistryQuery(
+  { address }: { address?: string },
+  { aoClient }: { aoClient: AoClient },
+): Parameters<
+  typeof useQuery<{
+    Owned: string[];
+    Controlled: string[];
+  }>
+>[0] {
+  return {
+    enabled: !!address,
+    queryKey: ['ant-registry', address, aoClient],
+    queryFn: async () => {
+      if (!address) throw new Error('User address required to query for ACL');
+      const antRegistry = ANTRegistry.init({
+        process: new AOProcess({
+          processId: ANT_REGISTRY_ID,
+          ao: aoClient,
+        }),
+      });
+      const acl = await antRegistry.accessControlList({
+        address,
+      });
+
+      return acl;
+    },
+    staleTime: 1000 * 60 * 5,
+  };
+}
+
+export function useANTRegistry({ address }: { address?: string } = {}) {
+  const [{ aoClient }] = useGlobalState();
+  const [{ walletAddress }] = useWalletState();
+
+  return useQuery(
+    buildANTRegistryQuery(
+      { address: address ?? walletAddress?.toString() },
+      { aoClient },
+    ),
+  );
+}

src/hooks/useAOProcessMetaData.tsx

@@ -0,0 +1,11 @@
+import { useGlobalState } from '@src/state';
+import { useQuery } from '@tanstack/react-query';
+import arweaveGraphql from 'arweave-graphql';
+
+export function useAOProcessMetaData({ processIds }: { processIds: string[] }) {
+  const [{ gateway }] = useGlobalState();
+
+  const arGql = arweaveGraphql(`${gateway}/graphql`);
+
+  return useQuery
+}

src/hooks/useArNSAssets.tsx

@@ -0,0 +1,21 @@
+import { useGlobalState, useWalletState } from '@src/state';
+
+import { useANTRegistry } from './useANTRegistry';
+import { useArNSRegistryDomains } from './useArNSRegistryDomains';
+
+/**
+ * This is a composite tanstack query hook that combines
+ *
+ */
+
+export function useArNSAssets({ address }: { address?: string }) {
+  const [{ arioContract, aoNetwork, gateway }] = useGlobalState();
+  const [{ walletAddress }] = useWalletState();
+
+  const { data: arnsRecords } = useArNSRegistryDomains();
+  const { data: userAcl } = useANTRegistry();
+
+  const res = useQuery({
+    queryKey: ['arns-assets', arioContract, aoNetwork],
+  });
+}