Complete hooks

.gitignore

@@ -13,6 +13,7 @@ dist
 dist-ssr
 *.tgz
 *.local
+demo
 
 # Editor directories and files
 .vscode/*

package.json

@@ -31,6 +31,8 @@
   },
   "peerDependencies": {
     "@bluxcc/core": "^0.1.16",
+    "@tanstack/react-query": "^5.90.11",
+    "@stellar/stellar-sdk": "^14.1.1",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },

src/Provider.tsx

@@ -2,12 +2,15 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { createConfig, setAppearance } from '@bluxcc/core';
 
 import { IConfig } from '@bluxcc/core/dist/types';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 type BluxProviderProps = {
   config: IConfig;
   children: React.ReactNode | any;
 };
 
+const queryClient = new QueryClient();
+
 export const BluxProvider = ({ config, children }: BluxProviderProps) => {
   const hostRef = useRef<null | HTMLDivElement>(null);
 
@@ -29,5 +32,9 @@ export const BluxProvider = ({ config, children }: BluxProviderProps) => {
     }
   }, [hostRef, appearance]);
 
-  return <div ref={hostRef}>{children}</div>;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div ref={hostRef}>{children}</div>;
+    </QueryClientProvider>
+  );
 };

src/index.ts

@@ -1,4 +1,5 @@
 export { setAppearance } from '@bluxcc/core';
+export { Asset } from '@stellar/stellar-sdk'
 
 export * from './useStellar';
 export { useBlux } from './hooks/useBlux';

src/useStellar/index.ts

@@ -1,21 +1,20 @@
 export { networks } from '@bluxcc/core';
 export * from './useAccount';
+export * from './useAccounts';
+export * from './useAssets';
+export * from './useBalances';
+export * from './useClaimableBalances';
+export * from './useEffects';
+export * from './useLedgers';
+export * from './useLiquidityPools';
 export * from './useNetwork';
-// import useAccounts from './useAccounts';
-// import useAssets from './useAssets';
-// import useBalances from './useBalances';
-// import useClaimableBalances from './useClaimableBalances';
-// import useEffects from './useEffects';
-// import useLedgers from './useLedgers';
-// import useLiquidityPools from './useLiquidityPools';
-// import useNetwork from './useNetwork';
-// import useOffers from './useOffers';
-// import useOperations from './useOperations';
-// import useOrderbook from './useOrderbook';
-// import usePayments from './usePayments';
-// import useStrictReceivePaths from './useStrictReceivePaths';
-// import useStrictSendPaths from './useStrictSendPaths';
-// import useTradeAggregation from './useTradeAggregation';
-// import useTrades from './useTrades';
-// import useTransactions from './useTransactions';
-export { useSwitchNetwork } from './useSwitchNetwork';
+export * from './useOffers';
+export * from './useOperations';
+export * from './useOrderbook';
+export * from './usePayments';
+export * from './useStrictReceivePaths';
+export * from './useStrictSendPaths';
+export * from './useTradeAggregation';
+export * from './useTrades';
+export * from './useTransactions';
+export * from './useSwitchNetwork';

src/useStellar/useAccount.ts

@@ -1,38 +1,57 @@
+import { useMemo } from 'react';
 import { getAccount } from '@bluxcc/core';
-import { useEffect, useState } from 'react';
 import {
+  useQuery,
+  UseQueryResult,
+  UseQueryOptions,
+} from '@tanstack/react-query';
+import type {
   GetAccountResult,
   GetAccountOptions,
 } from '@bluxcc/core/dist/exports/core/getAccount';
 
-export type UseAccountResult = {
-  loading: boolean;
-  error: Error | null;
-  result: GetAccountResult;
-};
-
-export function useAccount(options: GetAccountOptions): UseAccountResult {
-  // TODO: we need the same exact function as the core function here.
-  // Take the options.address, options.network, pass it to it, and wait for changes
-  // In useEffect.
-  const [result, setResult] = useState<GetAccountResult>(null);
-  const [error, setError] = useState<Error | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
-
-  useEffect(() => {
-    setLoading(true);
-
-    getAccount(options)
-      .then((r) => {
-        setResult(r);
-
-        setLoading(false);
-      })
-      .catch((e) => {
-        setError(e);
-        setLoading(false);
-      });
-  }, [options.address, options.network]);
-
-  return { loading, error, result };
-}
+import { getAddress, getNetwork } from '../utils';
+
+type R = GetAccountResult;
+type O = GetAccountOptions;
+
+export function useAccount(
+  options?: O,
+  queryOptions?: UseQueryOptions<R, Error>,
+): UseQueryResult<R, Error> {
+  const address = getAddress(options?.address);
+  const network = getNetwork(options?.network);
+  const enabled = queryOptions?.enabled ?? true;
+
+  const deps = [
+    address,
+    network,
+  ];
+
+  const queryKey = useMemo(
+    () => ['blux', 'account', network, ...deps],
+    [network, ...deps],
+  );
+
+  const queryFn = useMemo(
+    () => async () => {
+      const opts: O = {
+        ...options,
+        address,
+        network,
+      };
+
+      return getAccount(opts);
+    },
+    [network, ...deps],
+  );
+
+  const result = useQuery<R, Error>({
+    queryKey,
+    queryFn,
+    enabled,
+    ...queryOptions,
+  });
+
+  return result;
+}

src/useStellar/useAccounts.ts

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { getAccounts } from '@bluxcc/core';
+import {
+  useQuery,
+  UseQueryResult,
+  UseQueryOptions,
+} from '@tanstack/react-query';
+import type {
+  GetAccountsResult,
+  GetAccountsOptions,
+} from '@bluxcc/core/dist/exports/core/getAccounts';
+
+import { getNetwork } from '../utils';
+
+type R = GetAccountsResult;
+type O = GetAccountsOptions;
+
+export function useAccounts(
+  options?: O,
+  queryOptions?: UseQueryOptions<R, Error>,
+): UseQueryResult<R, Error> {
+  const network = getNetwork(options?.network);
+  const enabled = queryOptions?.enabled ?? true;
+
+  const deps = [
+    options?.forSigner,
+    options?.forAsset,
+    options?.sponsor,
+    options?.forLiquidityPool,
+    options?.cursor,
+    options?.limit,
+    options?.network,
+    options?.order,
+  ];
+
+  const queryKey = useMemo(
+    () => ['blux', 'accounts', network, ...deps],
+    [network, ...deps],
+  );
+
+  const queryFn = useMemo(
+    () => async () => {
+      const opts: O = {
+        ...options,
+        network,
+      };
+
+      return getAccounts(opts);
+    },
+    [network, ...deps],
+  );
+
+  const result = useQuery<R, Error>({
+    queryKey,
+    queryFn,
+    enabled,
+    ...queryOptions,
+  });
+
+  return result;
+}

src/useStellar/useAssets.ts

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { getAssets } from "@bluxcc/core";
+import {
+  useQuery,
+  UseQueryResult,
+  UseQueryOptions,
+} from '@tanstack/react-query';
+import type {
+  GetAssetsResult,
+  GetAssetsOptions,
+} from "@bluxcc/core/dist/exports/core/getAssets";
+
+import { getNetwork } from '../utils';
+
+type R = GetAssetsResult;
+type O = GetAssetsOptions;
+
+export function useAssets(
+  options?: O,
+  queryOptions?: UseQueryOptions<R, Error>,
+): UseQueryResult<R, Error> {
+  const network = getNetwork(options?.network);
+  const enabled = queryOptions?.enabled ?? true;
+
+  const deps = [
+    options?.forCode,
+    options?.forIssuer,
+    options?.cursor,
+    options?.limit,
+    options?.network,
+    options?.order,
+  ];
+
+  const queryKey = useMemo(
+    () => ['blux', 'assets', network, ...deps],
+    [network, options, ...deps],
+  );
+
+  const queryFn = useMemo(
+    () => async () => {
+      const opts: O = {
+        ...options,
+        network,
+      };
+
+      return getAssets(opts);
+    },
+    [network, options, ...deps],
+  );
+
+  const result = useQuery<R, Error>({
+    queryKey,
+    queryFn,
+    enabled,
+    ...queryOptions,
+  });
+
+  return result;
+}

src/useStellar/useBalances.ts

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { getBalances } from "@bluxcc/core";
+import {
+  useQuery,
+  UseQueryResult,
+  UseQueryOptions,
+} from '@tanstack/react-query';
+import type {
+  GetBalancesResult,
+  GetBalancesOptions,
+} from "@bluxcc/core/dist/exports/core/getBalances";
+
+import { getAddress, getNetwork } from '../utils';
+
+type R = GetBalancesResult;
+type O = GetBalancesOptions;
+
+export function useBalances(
+  options?: O,
+  queryOptions?: UseQueryOptions<R, Error>,
+): UseQueryResult<R, Error> {
+  const address = getAddress(options?.address);
+  const network = getNetwork(options?.network);
+  const enabled = queryOptions?.enabled ?? true;
+  const includeZeroBalances = options?.includeZeroBalances ?? true
+
+  const deps = [
+    address,
+    network,
+    includeZeroBalances,
+  ];
+
+  const queryKey = useMemo(
+    () => ['blux', 'balances', network, ...deps],
+    [network, ...deps],
+  );
+
+  const queryFn = useMemo(
+    () => async () => {
+      const opts: O = {
+        ...options,
+        address,
+        includeZeroBalances,
+        network,
+      };
+
+      return getBalances(opts);
+    },
+    [network, ...deps],
+  );
+
+  const result = useQuery<R, Error>({
+    queryKey,
+    queryFn,
+    enabled,
+    ...queryOptions,
+  });
+
+  return result;
+}