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/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,9 @@ export default function DescriptionRow({
                 setValue={(e) => setNewDescription(e)}
                 validationPredicates={{
                   [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
-                    fn: (id: string) =>
-                      arweaveDataProvider.validateArweaveId(id),
+                    fn: async (id: string) => {
+                      return 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,9 @@ export default function LogoRow({
                 setValue={(e) => setNewLogoTxId(e)}
                 validationPredicates={{
                   [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
-                    fn: (id: string) =>
-                      arweaveDataProvider.validateArweaveId(id),
+                    fn: async (id: string) => {
+                      return 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,9 @@ export default function TargetIDRow({
                 setValue={(e) => setNewTargetId(e)}
                 validationPredicates={{
                   [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
-                    fn: (id: string) =>
-                      arweaveDataProvider.validateArweaveId(id),
+                    fn: async (id: string) => {
+                      return 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,8 @@ function NameTokenSelector({
 }: {
   selectedTokenCallback: (id: ArweaveTransactionID | undefined) => void;
 }) {
-  const [{ arweaveDataProvider, antAoClient, hyperbeamUrl }] = useGlobalState();
+  const [{ antAoClient, hyperbeamUrl, arioContract, arioProcessId }] =
+    useGlobalState();
   const [{ walletAddress }] = useWalletState();
 
   const [searchText, setSearchText] = useState<string>();
@@ -146,11 +149,12 @@ function NameTokenSelector({
       }
 
       const processIds = fetchedprocessIds.concat(validImports);
-      const associatedRecords = await arweaveDataProvider.getRecords({
-        filters: {
-          processId: processIds,
-        },
-      });
+      const associatedRecords = await queryClient.fetchQuery(
+        buildArNSRecordsQuery({
+          arioContract: arioContract,
+          meta: [arioProcessId.toString()],
+        }),
+      );
 
       const contracts: {
         processId: ArweaveTransactionID;
@@ -376,8 +380,8 @@ function NameTokenSelector({
           }
           validationPredicates={{
             [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
-              fn: (id: string) => {
-                return arweaveDataProvider.validateArweaveId(id);
+              fn: async (id: string) => {
+                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/ConnectWalletModal/ConnectWalletModal.tsx

@@ -82,7 +82,6 @@ function ConnectWalletModal(): JSX.Element {
     try {
       setConnecting(true);
       await walletConnector.connect();
-
       const address = await walletConnector.getWalletAddress();
       dispatchWalletState({
         type: 'setWalletAddress',

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 @@ function EditUndernameModal({
   closeModal: () => void;
   payloadCallback: (payload: SetRecordPayload) => void;
 }) {
-  const [{ arweaveDataProvider, antAoClient, hyperbeamUrl }] = useGlobalState();
+  const [{ antAoClient, hyperbeamUrl }] = useGlobalState();
   const isMobile = useIsMobile();
   const targetIdRef = useRef<HTMLInputElement>(null);
   const ttlRef = useRef<HTMLInputElement>(null);
@@ -126,8 +127,9 @@ function EditUndernameModal({
                   customPattern={ARNS_TX_ID_ENTRY_REGEX}
                   validationPredicates={{
                     [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
-                      fn: (id: string) =>
-                        arweaveDataProvider.validateArweaveId(id),
+                      fn: async (id: string) => {
+                        return validateArweaveId(id);
+                      },
                     },
                   }}
                 />

src/components/pages/Register/Register.tsx

@@ -29,6 +29,7 @@ import {
   formatARIOWithCommas,
   formatDate,
   isArweaveTransactionID,
+  validateArweaveId,
 } from '../../../utils';
 import {
   MAX_LEASE_DURATION,
@@ -45,15 +46,8 @@ import PageLoader from '../../layout/progress/PageLoader/PageLoader';
 import './styles.css';
 
 function RegisterNameForm() {
-  const [
-    {
-      arweaveDataProvider,
-      arioTicker,
-      arioProcessId,
-      antAoClient,
-      hyperbeamUrl,
-    },
-  ] = useGlobalState();
+  const [{ arioTicker, arioProcessId, antAoClient, hyperbeamUrl }] =
+    useGlobalState();
   const [
     { domain, leaseDuration, registrationType, antID, targetId },
     dispatchRegisterState,
@@ -468,8 +462,9 @@ function RegisterNameForm() {
                     placeholder={'Arweave Transaction ID (Target ID)'}
                     validationPredicates={{
                       [VALIDATION_INPUT_TYPES.ARWEAVE_ID]: {
-                        fn: (id: string) =>
-                          arweaveDataProvider.validateArweaveId(id),
+                        fn: async (id: string) => {
+                          return validateArweaveId(id);
+                        },
                       },
                     }}
                     showValidationChecklist={false}

src/components/pages/Settings/ArNSSettings.tsx

@@ -8,14 +8,12 @@ import {
 import ArweaveID, {
   ArweaveIdTypes,
 } from '@src/components/layout/ArweaveID/ArweaveID';
-import { ArweaveCompositeDataProvider } from '@src/services/arweave/ArweaveCompositeDataProvider';
+import { useArweaveBlockHeight } from '@src/hooks';
 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';
 import { Input } from 'antd';
-import Arweave from 'arweave';
 import { RotateCcw } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
@@ -31,6 +29,7 @@ function ArNSSettings() {
     arioProcessId?.toString(),
   );
   const [isValidAddress, setIsValidAddress] = useState<boolean>(true);
+  const { data: blockHeight } = useArweaveBlockHeight();
 
   useEffect(() => {
     setRegistryAddress(arioProcessId?.toString());
@@ -55,22 +54,17 @@ function ArNSSettings() {
         type: 'setArIOContract',
         payload: arIOContract,
       });
-
-      const arweave = new Arweave({
-        host: gateway,
-        protocol: 'https',
-      });
-      const arweaveDataProvider = new SimpleArweaveDataProvider(arweave);
-
-      const provider = new ArweaveCompositeDataProvider({
-        contract: arIOContract,
-        arweave: arweaveDataProvider,
-      });
-
       dispatchGlobalState({
         type: 'setGateway',
-        payload: { gateway, provider },
+        payload: { gateway },
       });
+      // TODO: why do we need to set the block height here?
+      if (blockHeight) {
+        dispatchGlobalState({
+          type: 'setBlockHeight',
+          payload: blockHeight || 0,
+        });
+      }
     }
   }
 

src/components/pages/Settings/NetworkSettings.tsx

@@ -36,14 +36,7 @@ import './styles.css';
 
 function NetworkSettings() {
   const [
-    {
-      gateway,
-      aoNetwork,
-      arioProcessId,
-      arioContract,
-      turboNetwork,
-      hyperbeamUrl,
-    },
+    { gateway, aoNetwork, arioProcessId, turboNetwork, hyperbeamUrl },
     dispatchGlobalState,
   ] = useGlobalState();
   const [newGateway, setNewGateway] = useState<string>(gateway);
@@ -161,7 +154,7 @@ function NetworkSettings() {
         throw new Error('Gateway not available: ' + gate);
       });
       // Always try to update gateway
-      dispatchNewGateway(gate, arioContract, dispatchGlobalState);
+      dispatchNewGateway(gate, dispatchGlobalState);
     } catch (error) {
       eventEmitter.emit('error', error);
       eventEmitter.emit('error', {

src/hooks/index.ts

@@ -2,4 +2,9 @@ export * from './useIsMobile/useIsMobile';
 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';