Refactor to remove SimpleArweaveDataProvider

src/components/cards/NavMenuCard/NavMenuCard.tsx

@@ -100,7 +100,6 @@ function NavMenuCard() {
     // const arBalance = await queryClient.fetchQuery(
     //   buildARBalanceQuery({
     //     address: walletAddress,
-    //     provider: arweaveDataProvider,
     //     meta: [gateway],
     //   }),
     // );

src/components/devtools/ArNSRegistrySettings.tsx

@@ -5,12 +5,14 @@ import {
   ARIO_MAINNET_PROCESS_ID,
   ARIO_TESTNET_PROCESS_ID,
 } from '@ar.io/sdk/web';
-import { ArweaveCompositeDataProvider } from '@src/services/arweave/ArweaveCompositeDataProvider';
-import { SimpleArweaveDataProvider } from '@src/services/arweave/SimpleArweaveDataProvider';
 import { useGlobalState } from '@src/state/contexts/GlobalState';
 import { useWalletState } from '@src/state/contexts/WalletState';
 import { VALIDATION_INPUT_TYPES } from '@src/types';
-import { isArweaveTransactionID } from '@src/utils';
+import {
+  isArweaveTransactionID,
+  validateArweaveAddress,
+  validateArweaveId,
+} from '@src/utils';
 import { Collapse, Space } from 'antd';
 import Arweave from 'arweave';
 import { useEffect, useState } from 'react';
@@ -22,7 +24,7 @@ const Panel = Collapse.Panel;
 
 function ArNSRegistrySettings() {
   const [
-    { arweaveDataProvider, arioProcessId, aoClient, gateway, turboNetwork },
+    { arioProcessId, aoClient, gateway, turboNetwork },
     dispatchGlobalState,
   ] = useGlobalState();
   const [{ wallet }] = useWalletState();
@@ -35,7 +37,7 @@ function ArNSRegistrySettings() {
     setRegistryAddress(arioProcessId?.toString());
   }, [arioProcessId]);
 
-  function confirmSetting(id: string) {
+  async function confirmSetting(id: string) {
     if (isArweaveTransactionID(id)) {
       dispatchGlobalState({
         type: 'setIoProcessId',
@@ -59,16 +61,11 @@ function ArNSRegistrySettings() {
         host: gateway,
         protocol: 'https',
       });
-      const arweaveDataProvider = new SimpleArweaveDataProvider(arweave);
-
-      const provider = new ArweaveCompositeDataProvider({
-        contract: arIOContract,
-        arweave: arweaveDataProvider,
-      });
-
+      const blockHeight = (await arweave.blocks.getCurrent()).height;
+      dispatchGlobalState({ type: 'setBlockHeight', payload: blockHeight });
       dispatchGlobalState({
         type: 'setGateway',
-        payload: { gateway, provider },
+        payload: { gateway },
       });
     }
   }
@@ -165,12 +162,10 @@ function ArNSRegistrySettings() {
                 }
                 validationPredicates={{
                   [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
-                    fn: (id: string) =>
-                      arweaveDataProvider.validateArweaveId(id),
+                    fn: (id: string) => validateArweaveId(id),
                   },
                   [VALIDATION_INPUT_TYPES.ARWEAVE_ADDRESS]: {
-                    fn: (id: string) =>
-                      arweaveDataProvider.validateArweaveAddress(id),
+                    fn: (id: string) => validateArweaveAddress(id),
                     required: false,
                   },
                 }}

src/components/forms/DomainSettings/DescriptionRow.tsx

@@ -1,11 +1,11 @@
 import ValidationInput from '@src/components/inputs/text/ValidationInput/ValidationInput';
 import ConfirmTransactionModal from '@src/components/modals/ConfirmTransactionModal/ConfirmTransactionModal';
-import { useGlobalState } from '@src/state/contexts/GlobalState';
 import {
   ANT_INTERACTION_TYPES,
   ContractInteraction,
   VALIDATION_INPUT_TYPES,
 } from '@src/types';
+import { validateArweaveId } from '@src/utils';
 import eventEmitter from '@src/utils/events';
 import { Skeleton } from 'antd';
 import { useEffect, useState } from 'react';
@@ -25,7 +25,6 @@ export default function DescriptionRow({
   const [newDescription, setNewDescription] = useState<string>(
     description ?? '',
   );
-  const [{ arweaveDataProvider }] = useGlobalState();
   const [showModal, setShowModal] = useState<boolean>(false);
 
   useEffect(() => {
@@ -76,8 +75,7 @@ export default function DescriptionRow({
                 setValue={(e) => setNewDescription(e)}
                 validationPredicates={{
                   [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
-                    fn: (id: string) =>
-                      arweaveDataProvider.validateArweaveId(id),
+                    fn: (id: string) => validateArweaveId(id),
                   },
                 }}
                 maxCharLength={(str) => str.length <= 512}

src/components/forms/DomainSettings/LogoRow.tsx

@@ -4,12 +4,12 @@ import ArweaveID, {
 } from '@src/components/layout/ArweaveID/ArweaveID';
 import ConfirmTransactionModal from '@src/components/modals/ConfirmTransactionModal/ConfirmTransactionModal';
 import { ArweaveTransactionID } from '@src/services/arweave/ArweaveTransactionID';
-import { useGlobalState } from '@src/state/contexts/GlobalState';
 import {
   ANT_INTERACTION_TYPES,
   ContractInteraction,
   VALIDATION_INPUT_TYPES,
 } from '@src/types';
+import { validateArweaveId } from '@src/utils';
 import { isArweaveTransactionID } from '@src/utils';
 import { ARNS_TX_ID_ENTRY_REGEX } from '@src/utils/constants';
 import eventEmitter from '@src/utils/events';
@@ -29,7 +29,6 @@ export default function LogoRow({
 }) {
   const [editing, setEditing] = useState<boolean>(false);
   const [newLogoTxId, setNewLogoTxId] = useState<string>(logoTxId ?? '');
-  const [{ arweaveDataProvider }] = useGlobalState();
   const [showModal, setShowModal] = useState<boolean>(false);
 
   useEffect(() => {
@@ -86,8 +85,7 @@ export default function LogoRow({
                 setValue={(e) => setNewLogoTxId(e)}
                 validationPredicates={{
                   [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
-                    fn: (id: string) =>
-                      arweaveDataProvider.validateArweaveId(id),
+                    fn: (id: string) => validateArweaveId(id),
                   },
                 }}
                 maxCharLength={(str) => str.length <= 43}

src/components/forms/DomainSettings/TargetIDRow.tsx

@@ -4,12 +4,12 @@ import ArweaveID, {
 } from '@src/components/layout/ArweaveID/ArweaveID';
 import ConfirmTransactionModal from '@src/components/modals/ConfirmTransactionModal/ConfirmTransactionModal';
 import { ArweaveTransactionID } from '@src/services/arweave/ArweaveTransactionID';
-import { useGlobalState } from '@src/state/contexts/GlobalState';
 import {
   ANT_INTERACTION_TYPES,
   ContractInteraction,
   VALIDATION_INPUT_TYPES,
 } from '@src/types';
+import { validateArweaveId } from '@src/utils';
 import { isArweaveTransactionID } from '@src/utils';
 import { ARNS_TX_ID_ENTRY_REGEX } from '@src/utils/constants';
 import eventEmitter from '@src/utils/events';
@@ -29,7 +29,6 @@ export default function TargetIDRow({
 }) {
   const [editing, setEditing] = useState<boolean>(false);
   const [newTargetId, setNewTargetId] = useState<string>(targetId ?? '');
-  const [{ arweaveDataProvider }] = useGlobalState();
   const [showModal, setShowModal] = useState<boolean>(false);
 
   useEffect(() => {
@@ -86,8 +85,7 @@ export default function TargetIDRow({
                 setValue={(e) => setNewTargetId(e)}
                 validationPredicates={{
                   [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
-                    fn: (id: string) =>
-                      arweaveDataProvider.validateArweaveId(id),
+                    fn: (id: string) => validateArweaveId(id),
                   },
                 }}
                 maxCharLength={(str) => str.length <= 43}

src/components/inputs/text/NameTokenSelector/NameTokenSelector.tsx

@@ -1,5 +1,7 @@
 import { ANT, AOProcess, AoArNSNameData } from '@ar.io/sdk/web';
 import Tooltip from '@src/components/Tooltips/Tooltip';
+import { validateArweaveId } from '@src/utils';
+import { buildArNSRecordsQuery, queryClient } from '@src/utils/network';
 import { Pagination, PaginationProps } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 
@@ -31,7 +33,7 @@
 }: {
   selectedTokenCallback: (id: ArweaveTransactionID | undefined) => void;
 }) {
   const [{ arweaveDataProvider, antAoClient, hyperbeamUrl }] = useGlobalState();
   const [{ walletAddress }] = useWalletState();
 
   const [searchText, setSearchText] = useState<string>();
@@ -146,11 +148,12 @@
       }
 
       const processIds = fetchedprocessIds.concat(validImports);
-      const associatedRecords = await arweaveDataProvider.getRecords({
-        filters: {
-          processId: processIds,
-        },
-      });
+      const associatedRecords = await queryClient.fetchQuery(
+        buildArNSRecordsQuery({
+          arioContract,
+          meta: [arioProcessId.toString()],
+        }),
+      );
 
       const contracts: {
         processId: ArweaveTransactionID;
@@ -377,7 +380,7 @@
           validationPredicates={{
             [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
               fn: (id: string) => {
-                return arweaveDataProvider.validateArweaveId(id);
+                return validateArweaveId(id);
               },
             },
           }}

src/components/layout/ArPrice/ArPrice.tsx

@@ -1,30 +1,18 @@
-import { useEffect, useState } from 'react';
+import { useArPrice } from '@src/hooks';
+import { useEffect } from 'react';
 
-import { useGlobalState } from '../../../state/contexts/GlobalState';
 import eventEmitter from '../../../utils/events';
 
 function ArPrice({ dataSize }: { dataSize: number }) {
-  const [{ arweaveDataProvider }] = useGlobalState();
+  const { data, error } = useArPrice(dataSize);
 
-  const [price, setPrice] = useState(0);
   useEffect(() => {
-    getPrice();
-  }, [dataSize]);
-
-  async function getPrice() {
-    const result = await arweaveDataProvider.getArPrice(dataSize);
-    try {
-      if (!result) {
-        throw new Error('Could not get price on gas fee');
-      }
-      setPrice(result);
-    } catch (error: any) {
-      eventEmitter.emit(error);
-      setPrice(0);
+    if (error) {
+      eventEmitter.emit('error', error);
     }
-  }
+  }, [error]);
 
-  return <>{`${price.toPrecision(8)} AR`}</>;
+  return <>{`${(data ?? 0).toPrecision(8)} AR`}</>;
 }
 
 export default ArPrice;

src/components/layout/BlockHeightCounter/BlockHeightCounter.tsx

@@ -1,3 +1,4 @@
+import { useArweaveBlockHeight } from '@src/hooks';
 import Countdown from 'antd/lib/statistic/Countdown';
 import { ReactNode, useEffect, useState } from 'react';
 
@@ -10,17 +11,20 @@ const BlockHeightCounter = ({
 }: {
   prefixText?: ReactNode;
 }) => {
-  const [
-    { blockHeight, lastBlockUpdateTimestamp, arweaveDataProvider },
-    dispatchGlobalState,
-  ] = useGlobalState();
+  const [{ blockHeight, lastBlockUpdateTimestamp }, dispatchGlobalState] =
+    useGlobalState();
+  const { refetch } = useArweaveBlockHeight();
 
   const [timeUntilUpdate, setTimeUntilUpdate] = useState<number>(0);
 
   const updateBlockHeight = async () => {
     try {
-      const blockHeight = await arweaveDataProvider.getCurrentBlockHeight();
-      dispatchGlobalState({ type: 'setBlockHeight', payload: blockHeight });
+      const blockHeight = await refetch();
+      if (blockHeight.data)
+        dispatchGlobalState({
+          type: 'setBlockHeight',
+          payload: blockHeight.data,
+        });
     } catch (error) {
       eventEmitter.emit('error', error);
     }

src/components/modals/ant-management/EditUndernameModal/EditUndernameModal.tsx

@@ -1,4 +1,5 @@
 import { ANT, AOProcess, AoANTRecord } from '@ar.io/sdk/web';
+import { validateArweaveId } from '@src/utils';
 import { clamp } from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 
@@ -32,7 +33,7 @@
   closeModal: () => void;
   payloadCallback: (payload: SetRecordPayload) => void;
 }) {
   const [{ arweaveDataProvider, antAoClient, hyperbeamUrl }] = useGlobalState();
   const isMobile = useIsMobile();
   const targetIdRef = useRef<HTMLInputElement>(null);
   const ttlRef = useRef<HTMLInputElement>(null);
@@ -126,8 +127,7 @@
                   customPattern={ARNS_TX_ID_ENTRY_REGEX}
                   validationPredicates={{
                     [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
-                      fn: (id: string) =>
-                        arweaveDataProvider.validateArweaveId(id),
+                      fn: (id: string) => validateArweaveId(id),
                     },
                   }}
                 />

src/components/pages/Register/Register.tsx

@@ -29,6 +29,7 @@
   formatARIOWithCommas,
   formatDate,
   isArweaveTransactionID,
+  validateArweaveId,
 } from '../../../utils';
 import {
   MAX_LEASE_DURATION,
@@ -47,7 +48,7 @@
 function RegisterNameForm() {
   const [
     {
       arweaveDataProvider,
       arioTicker,
       arioProcessId,
       antAoClient,
@@ -483,8 +484,7 @@
                     placeholder={'Arweave Transaction ID (Target ID)'}
                     validationPredicates={{
                       [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
-                        fn: (id: string) =>
-                          arweaveDataProvider.validateArweaveId(id),
+                        fn: (id: string) => validateArweaveId(id),
                       },
                     }}
                     showValidationChecklist={false}

src/components/pages/Settings/ArNSSettings.tsx

@@ -8,9 +8,7 @@ import {
 import ArweaveID, {
   ArweaveIdTypes,
 } from '@src/components/layout/ArweaveID/ArweaveID';
-import { ArweaveCompositeDataProvider } from '@src/services/arweave/ArweaveCompositeDataProvider';
 import { ArweaveTransactionID } from '@src/services/arweave/ArweaveTransactionID';
-import { SimpleArweaveDataProvider } from '@src/services/arweave/SimpleArweaveDataProvider';
 import { useGlobalState, useWalletState } from '@src/state';
 import { isArweaveTransactionID } from '@src/utils';
 import { ARIO_PROCESS_ID } from '@src/utils/constants';
@@ -36,7 +34,7 @@ function ArNSSettings() {
     setRegistryAddress(arioProcessId?.toString());
   }, [arioProcessId]);
 
-  function confirmSetting(id: string) {
+  async function confirmSetting(id: string) {
     if (isArweaveTransactionID(id)) {
       dispatchGlobalState({
         type: 'setIoProcessId',
@@ -60,16 +58,11 @@ function ArNSSettings() {
         host: gateway,
         protocol: 'https',
       });
-      const arweaveDataProvider = new SimpleArweaveDataProvider(arweave);
-
-      const provider = new ArweaveCompositeDataProvider({
-        contract: arIOContract,
-        arweave: arweaveDataProvider,
-      });
-
+      const blockHeight = (await arweave.blocks.getCurrent()).height;
+      dispatchGlobalState({ type: 'setBlockHeight', payload: blockHeight });
       dispatchGlobalState({
         type: 'setGateway',
-        payload: { gateway, provider },
+        payload: { gateway },
       });
     }
   }

src/hooks/index.ts

@@ -2,4 +2,10 @@
 export * from './useLongPress/useLongPress';
 export * from './useIsFocused/useIsFocused';
 export * from './useRegistrationStatus/useRegistrationStatus';
+export * from './useArPrice';
+export * from './useArBalance';
+export * from './useArweaveBlockHeight';
+export * from './useArNSRecord';
+export * from './useArNSReserved';
 export * from './useSyncSettings/useSyncSettings';
+

src/hooks/useArBalance.tsx

@@ -0,0 +1,20 @@
+import { ArweaveTransactionID } from '@src/services/arweave/ArweaveTransactionID';
+import { useGlobalState } from '@src/state';
+import { useQuery } from '@tanstack/react-query';
+import Arweave from 'arweave';
+
+export function useArBalance(address?: ArweaveTransactionID) {
+  const [{ gateway }] = useGlobalState();
+
+  return useQuery({
+    queryKey: ['ar-balance', address?.toString(), gateway],
+    queryFn: async () => {
+      if (!address) throw new Error('No address provided');
+      const arweave = new Arweave({ host: gateway, protocol: 'https' });
+      const winston = await arweave.wallets.getBalance(address.toString());
+      return +arweave.ar.winstonToAr(winston);
+    },
+    enabled: !!address,
+    staleTime: 1000 * 60 * 60,
+  });
+}