State refactor: assets (#41)

* State refactor: assets

* Cleanup

* More cleanup

* Fix trustline button alignment

src/apiQueries/useAssetsAdd.ts

@@ -0,0 +1,42 @@
+import { useMutation } from "@tanstack/react-query";
+import { API_URL } from "constants/settings";
+import { fetchApi } from "helpers/fetchApi";
+import { ApiAsset, AppError } from "types";
+
+type Asset = {
+  assetCode: string;
+  assetIssuer: string;
+};
+
+export const useAssetsAdd = ({
+  onSuccess,
+}: {
+  onSuccess: (addedAsset: ApiAsset) => void;
+}) => {
+  const mutation = useMutation({
+    mutationFn: ({ assetCode, assetIssuer }: Asset) => {
+      return fetchApi(`${API_URL}/assets`, {
+        method: "POST",
+        body: JSON.stringify({
+          code: assetCode,
+          issuer: assetIssuer,
+        }),
+      });
+    },
+    cacheTime: 0,
+    onSuccess,
+  });
+
+  return {
+    ...mutation,
+    error: mutation.error as AppError,
+    data: mutation.data as ApiAsset,
+    mutateAsync: async ({ assetCode, assetIssuer }: Asset) => {
+      try {
+        await mutation.mutateAsync({ assetCode, assetIssuer });
+      } catch (e) {
+        // do nothing
+      }
+    },
+  };
+};

src/apiQueries/useAssetsByWallet.ts

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import { API_URL } from "constants/settings";
+import { fetchApi } from "helpers/fetchApi";
+import { ApiAsset, AppError } from "types";
+
+export const useAssetsByWallet = (walletId: string) => {
+  const query = useQuery<ApiAsset[], AppError>({
+    queryKey: ["assets", "wallet", walletId],
+    queryFn: async () => {
+      if (!walletId) {
+        return;
+      }
+
+      return await fetchApi(`${API_URL}/assets?wallet=${walletId}`);
+    },
+    enabled: Boolean(walletId),
+  });
+
+  return query;
+};

src/apiQueries/useAssetsDelete.ts

@@ -0,0 +1,33 @@
+import { useMutation } from "@tanstack/react-query";
+import { API_URL } from "constants/settings";
+import { fetchApi } from "helpers/fetchApi";
+import { ApiAsset, AppError } from "types";
+
+export const useAssetsDelete = ({
+  onSuccess,
+}: {
+  onSuccess: (deletedAsset: ApiAsset) => void;
+}) => {
+  const mutation = useMutation({
+    mutationFn: (assetId: string) => {
+      return fetchApi(`${API_URL}/assets/${assetId}`, {
+        method: "DELETE",
+      });
+    },
+    cacheTime: 0,
+    onSuccess,
+  });
+
+  return {
+    ...mutation,
+    error: mutation.error as AppError,
+    data: mutation.data as ApiAsset,
+    mutateAsync: async (assetId: string) => {
+      try {
+        await mutation.mutateAsync(assetId);
+      } catch (e) {
+        // do nothing
+      }
+    },
+  };
+};

src/apiQueries/useBalanceTrustline.ts

@@ -0,0 +1,42 @@
+import { useQuery } from "@tanstack/react-query";
+import { API_URL } from "constants/settings";
+import { fetchApi } from "helpers/fetchApi";
+import { ApiAsset, AppError, StellarAccountBalance } from "types";
+
+type Trustline = {
+  id: string | null;
+  code: string;
+  issuer: string;
+  balance: string;
+  isNative: boolean;
+};
+
+export const useBalanceTrustline = (
+  balances?: StellarAccountBalance[] | undefined,
+) => {
+  const query = useQuery<Trustline[] | undefined, AppError>({
+    queryKey: ["trustlines", { balances }],
+    queryFn: async () => {
+      const response = await fetchApi(`${API_URL}/assets`);
+
+      return balances?.map((b) => {
+        const id =
+          response?.find(
+            (a: ApiAsset) =>
+              a.code === b?.assetCode && a.issuer === b?.assetIssuer,
+          )?.id || null;
+
+        return {
+          id,
+          code: b?.assetCode || "XLM",
+          issuer: b?.assetIssuer || "native",
+          balance: b.balance,
+          isNative: Boolean(!b.assetCode && !b.assetIssuer),
+        };
+      });
+    },
+    enabled: Boolean(balances),
+  });
+
+  return query;
+};

src/components/DisbursementDetails/index.tsx

@@ -10,9 +10,9 @@ import { useDispatch } from "react-redux";
 
 import { AppDispatch } from "store";
 import { getCountriesAction } from "store/ducks/countries";
-import { getAssetsByWalletAction } from "store/ducks/assets";
 
 import { useWallets } from "apiQueries/useWallets";
+import { useAssetsByWallet } from "apiQueries/useAssetsByWallet";
 import { InfoTooltip } from "components/InfoTooltip";
 import { formatUploadedFileDisplayName } from "helpers/formatUploadedFileDisplayName";
 import { useRedux } from "hooks/useRedux";
@@ -61,7 +61,7 @@ export const DisbursementDetails: React.FC<DisbursementDetailsProps> = ({
   onChange,
   onValidate,
 }: DisbursementDetailsProps) => {
-  const { assets, countries } = useRedux("assets", "countries");
+  const { countries } = useRedux("countries");
 
   enum FieldId {
     NAME = "name",
@@ -76,6 +76,12 @@ export const DisbursementDetails: React.FC<DisbursementDetailsProps> = ({
     isLoading: isWalletsLoading,
   } = useWallets();
 
+  const {
+    data: walletAssets,
+    error: walletError,
+    isFetching: isWalletAssetsFetching,
+  } = useAssetsByWallet(details.wallet.id);
+
   const dispatch: AppDispatch = useDispatch();
 
   // Don't fetch again if we already have them in store
@@ -88,7 +94,7 @@ export const DisbursementDetails: React.FC<DisbursementDetailsProps> = ({
   const apiErrors = [
     countries.errorString,
     walletsError?.message,
-    assets.errorString,
+    walletError?.message,
   ];
 
   const sanitizedApiErrors = apiErrors.filter((e) => Boolean(e));
@@ -157,12 +163,11 @@ export const DisbursementDetails: React.FC<DisbursementDetailsProps> = ({
             name: wallet?.name || "",
           },
         });
-        dispatch(getAssetsByWalletAction({ walletId: wallet?.id || "" }));
 
         break;
       case FieldId.ASSET_CODE:
         // eslint-disable-next-line no-case-declarations
-        const asset = assets.items.find((a: ApiAsset) => a.id === value);
+        const asset = walletAssets?.find((a: ApiAsset) => a.id === value);
 
         updateState({
           asset: {
@@ -274,10 +279,10 @@ export const DisbursementDetails: React.FC<DisbursementDetailsProps> = ({
           fieldSize="sm"
           onChange={updateDraftDetails}
           value={details.asset.id}
-          disabled={assets.status === "PENDING" || !details.wallet.id}
+          disabled={isWalletAssetsFetching || !details.wallet.id}
         >
-          {renderDropdownDefault(assets.status === "PENDING")}
-          {assets.items.map((asset: ApiAsset) => (
+          {renderDropdownDefault(isWalletAssetsFetching)}
+          {walletAssets?.map((asset: ApiAsset) => (
             <option key={asset.id} value={asset.id}>
               {asset.code}
             </option>