moonstream/frontend/src/components/CheckboxABI.js

import React, { useContext, useMemo } from "react";
import { chakra, Stack, Spinner } from "@chakra-ui/react";
import { useSubscription, usePresignedURL } from "../core/hooks";
import CheckboxGrouped from "./CheckboxGrouped";
import UIContext from "../core/providers/UIProvider/context";
import {
  DASHBOARD_CONFIGURE_SETTING_SCOPES,
  DASHBOARD_UPDATE_ACTIONS,
} from "../core/constants";

const SuggestABI = ({ subscriptionId, state }) => {
  const { subscriptionLinksCache } = useSubscription({
    id: subscriptionId,
  });

  const { dispatchDashboardUpdate } = useContext(UIContext);

  const { data, isLoading } = usePresignedURL({
    url: subscriptionLinksCache?.data?.data?.url,
    isEnabled: true,
    id: subscriptionId,
    cacheType: "abi",
    requestNewURLCallback: subscriptionLinksCache.refetch,
  });

  const abiEvents = useMemo(
    () => data && data.filter((abiItem) => abiItem.type === "event"),
    [data]
  );
  const abiMethods = useMemo(
    () => data && data.filter((abiItem) => abiItem.type === "function"),
    [data]
  );
  if (isLoading) return <Spinner />;
  if (!data) return "";

  return (
    <>
      <Stack>
        <CheckboxGrouped
          groupName="events"
          list={abiEvents}
          isItemChecked={(item) => {
            return state.events.some((event) => event.name === item.name);
          }}
          isAllChecked={abiEvents.every((abiEvent) => {
            return state.events.some((event) => abiEvent.name === event.name);
          })}
          isIndeterminate={state.events.some((event) =>
            abiEvents.some((abiEvent) => abiEvent.name === event.name)
          )}
          setItemChecked={(item, isChecked) =>
            dispatchDashboardUpdate({
              type: isChecked
                ? DASHBOARD_UPDATE_ACTIONS.APPEND_METRIC
                : DASHBOARD_UPDATE_ACTIONS.DROP_METRIC,
              scope: DASHBOARD_CONFIGURE_SETTING_SCOPES.METRIC_NAME,
              payload: {
                subscriptionId: subscriptionId,
                data: item.name,
                propertyName: "events",
              },
            })
          }
          setAll={(isChecked) =>
            dispatchDashboardUpdate({
              type: isChecked
                ? DASHBOARD_UPDATE_ACTIONS.APPEND_METRIC
                : DASHBOARD_UPDATE_ACTIONS.DROP_METRIC,
              scope: DASHBOARD_CONFIGURE_SETTING_SCOPES.METRICS_ARRAY,
              payload: {
                subscriptionId: subscriptionId,
                data: abiEvents.map((abiEvent) => {
                  return { name: abiEvent.name };
                }),
                propertyName: "events",
              },
            })
          }
          getName={(item) => {
            const args = item.inputs.map((input) => input.internalType);
            let name = item.name + ` (`;
            name += args.map((argument, idx) =>
              idx === 0 ? `${argument}` : ` ${argument}`
            );
            name += `)`;
            return name;
          }}
        />
        <CheckboxGrouped
          groupName="methods"
          list={abiMethods}
          isItemChecked={(item) =>
            state.methods.some((fn) => fn.name === item.name)
          }
          isAllChecked={abiMethods.every((abiMethod) => {
            return state.methods.some((fn) => abiMethod.name === fn.name);
          })}
          isIndeterminate={state.methods.some((fn) =>
            abiMethods.some((abiMethod) => abiMethod.name === fn.name)
          )}
          setItemChecked={(item, isChecked) =>
            dispatchDashboardUpdate({
              type: isChecked
                ? DASHBOARD_UPDATE_ACTIONS.APPEND_METRIC
                : DASHBOARD_UPDATE_ACTIONS.DROP_METRIC,
              scope: DASHBOARD_CONFIGURE_SETTING_SCOPES.METRIC_NAME,
              payload: {
                subscriptionId: subscriptionId,
                data: item.name,
                propertyName: "methods",
              },
            })
          }
          setAll={(isChecked) =>
            dispatchDashboardUpdate({
              type: isChecked
                ? DASHBOARD_UPDATE_ACTIONS.APPEND_METRIC
                : DASHBOARD_UPDATE_ACTIONS.DROP_METRIC,
              scope: DASHBOARD_CONFIGURE_SETTING_SCOPES.METRICS_ARRAY,
              payload: {
                subscriptionId: subscriptionId,
                data: abiMethods.map((abiMethod) => {
                  return { name: abiMethod.name };
                }),
                propertyName: "methods",
              },
            })
          }
          getName={(item) => {
            const args = item.inputs.map((input) => input.internalType);
            let name = item.name + ` (`;
            name += args.map((argument, idx) =>
              idx === 0 ? `${argument}` : ` ${argument}`
            );
            name += `)`;
            return name;
          }}
        />
      </Stack>
    </>
  );
};

const ChakraSuggestABI = chakra(SuggestABI);

export default ChakraSuggestABI;