How to use the react-async-hook.useAsyncCallback function in react-async-hook

export const Topbar = () => {
  const socket = useSocket();
  const [maximized, setMaximized] = useState(false);
  const [popover, setPopover] = useState(null);
  let profile = useProfile();

  let close = useAsyncCallback(async () => {
    await socket.query(queries.close);
  });

  let minimize = useAsyncCallback(async () => {
    await socket.query(queries.minimize);
  });

  let toggleMaximized = useAsyncCallback(async () => {
    await socket.query(queries.toggleMaximized);
  });

  useEffect(() => {
    (async () => {
      try {
        const { maximized } = await socket.query(queries.isMaximized);
        setMaximized(maximized);
      } catch (e) {
        // ignore
      }
    })();
  }, []);

  useListen(socket, packets.maximizedChanged, ({ maximized }) => {
    setMaximized(maximized);

'cmps.designer.lightning.actions.OpenChannelModal',
  );
  const { nodes } = useStoreState(s => s.lightning);
  const { visible, to, from } = useStoreState(s => s.modals.openChannel);
  const { hideOpenChannel } = useStoreActions(s => s.modals);
  const { getWalletBalance, openChannel } = useStoreActions(s => s.lightning);
  const { notify } = useStoreActions(s => s.app);

  const getBalancesAsync = useAsync(async () => {
    if (!visible) return;
    for (const node of network.nodes.lightning) {
      await getWalletBalance(node);
    }
  }, [network.nodes, visible]);

  const openChanAsync = useAsyncCallback(async (payload: OpenChannelPayload) => {
    try {
      await openChannel(payload);
      hideOpenChannel();
    } catch (error) {
      notify({ message: l('submitError'), error });
    }
  });

  // flag to show the deposit checkbox if the from node balance is less than the capacity
  let showDeposit = false;
  const selectedFrom = form.getFieldValue('from') || from;
  const areSameNodesSelected = selectedFrom === (form.getFieldValue('to') || to);
  if (selectedFrom && nodes[selectedFrom] && !openChanAsync.loading) {
    const { confirmed } = nodes[selectedFrom].walletBalance || {};
    const balance = parseInt(confirmed || '0');
    const sats = form.getFieldValue('sats');

const passwordRef = useRef(null);
  const [password, setPassword] = useState("");
  const [passwordShown, setPasswordShown] = useState(false);
  const [totpState, setTOTPState] = useState(null);

  let togglePasswordVisibility = () => {
    setPasswordShown(!passwordShown);
  };

  let onForgotPassword = useAsyncCallback(async () => {
    await socket.query(queries.openExternalURL, {
      url: "https://itch.io/user/forgot-password",
    });
  });

  let onLogin = useAsyncCallback(async () => {
    const { error: _, ...stage } = props.stage;
    props.setState({
      type: "form",
      stage,
    });

    if (!passwordRef.current) {
      return;
    }

    if (props.stage.username === "#api-key") {
      // for integration tests
      const { profile } = await socket.call(messages.ProfileLoginWithAPIKey, {
        apiKey: passwordRef.current.value,
      });

export const Gate = (props: {}) => {
  const socket = useSocket();
  const [loading, setLoading] = useState(true);
  const [state, setState] = useState({
    type: "form",
    stage: {
      type: "need-username",
    },
  });
  const [profiles, setProfiles] = useState([]);
  const [forgetConfirm, setForgetConfirm] = useState(
    null
  );

  const forgetProfile = useAsyncCallback(async (profile: Profile) => {
    try {
      await new Promise((resolve, reject) => {
        setForgetConfirm({ resolve, reject, profile });
      });
    } catch (e) {
      console.log(`Forget confirm was cancelled`);
      return;
    } finally {
      setForgetConfirm(null);
    }

    await socket.call(messages.ProfileForget, { profileId: profile.id });
    fetchProfiles("refresh");
  });

  let fetchProfiles = (purpose: "first-time" | "refresh") => {

props.onClose();
        const locsRes = await socket.call(messages.InstallLocationsList, {});

        await socket.call(messages.InstallQueue, {
          game: props.game,
          upload: upload,
          queueDownload: true,
          installLocationId: locsRes.installLocations[0].id,
        });
      } catch (e) {
        setQueued(_.omit(queued, upload.id));
      }
    });

    const uninstall = useAsyncCallback(async (cave: Cave) => {
      setUninstalling(null);
      setDownloads(_.omit(downloads, cave.upload.id));
      await socket.query(queries.uninstallGame, { cave });
    });

    const [showOthers, setShowOthers] = useState(false);

    const hasUploads =
      uploads &&
      !(
        _.isEmpty(uploads.compatible) &&
        _.isEmpty(uploads.local) &&
        _.isEmpty(uploads.others)
      );

    return (

const DownloadsMenu = (props: { download: Download }) => {
  const d = props.download;

  const socket = useSocket();
  const uninstall = useAsyncCallback(async () => {
    await socket.call(messages.UninstallPerform, {
      caveId: d.caveId,
    });
  });
  const discard = useAsyncCallback(async () => {
    await socket.call(messages.DownloadsDiscard, {
      downloadId: d.id,
    });
  });

  return (
    
      <button id="grid.item.discard_download" label="{<FormattedMessage">}
        onClick={discard.execute}
        loading={discard.loading}
      /&gt;
      </button><button id="grid.item.open_page" label="{<FormattedMessage">}</button>

const MineBlocksInput: React.FC<{ node: BitcoinNode }> = ({ node }) => {
  const { l } = usePrefixedTranslation('cmps.designer.bitcoind.MineBlocksInput');
  const [value, setValue] = useState(6);
  const { notify } = useStoreActions(s => s.app);
  const { mine } = useStoreActions(s => s.bitcoind);
  const mineAsync = useAsyncCallback(async () => {
    try {
      await mine({ blocks: value, node });
    } catch (error) {
      notify({ message: l('error'), error });
    }
  });

  return (
    <>
      
        
           v && setValue(v)}

const Deposit: React.FC<{ node: LightningNode }> = ({ node }) => {
  const { l } = usePrefixedTranslation('cmps.designer.lightning.actions.Deposit');
  const [amount, setAmount] = useState(1000000);
  const { notify } = useStoreActions(s => s.app);
  const { depositFunds } = useStoreActions(s => s.lightning);
  const depositAsync = useAsyncCallback(async () => {
    try {
      await depositFunds({ node, sats: amount.toString() });
      notify({
        message: l('depositSuccess', { amount: format(amount), node: node.name }),
      });
    } catch (error) {
      notify({ message: l('depositError'), error });
    }
  });

  return (

const CreateInvoiceModal: React.FC = ({ network, form }) => {
  const { l } = usePrefixedTranslation(
    'cmps.designer.lightning.actions.CreateInvoiceModal',
  );
  const { visible, nodeName, invoice, amount } = useStoreState(
    s => s.modals.createInvoice,
  );
  const { showCreateInvoice, hideCreateInvoice } = useStoreActions(s => s.modals);
  const { createInvoice } = useStoreActions(s => s.lightning);
  const { notify } = useStoreActions(s => s.app);

  const createAsync = useAsyncCallback(async (node: LightningNode, amount: number) => {
    try {
      const invoice = await createInvoice({ node, amount, memo: '' });
      showCreateInvoice({ nodeName: node.name, amount, invoice });
    } catch (error) {
      notify({ message: l('submitError'), error });
    }
  });

  const handleSubmit = () => {
    form.validateFields((err, values: FormFields) => {
      if (err) return;

      const { lightning } = network.nodes;
      const node = lightning.find(n => n.name === values.node);
      if (!node || !values.amount) return;
      createAsync.execute(node, parseInt(values.amount));

const ProfileMenu = (props: Props & { setShown: (shown: boolean) => void }) => {
  const socket = useSocket();

  const logout = useAsyncCallback(async () => {
    await socket.query(queries.setProfile, {});
  });

  return (
    
      <button id="sidebar.preferences" label="{<FormattedMessage">}
        icon="cog"
        onClick={() =&gt; {
          props.setShown(false);
          props.openPreferences();
        }}
      /&gt;
      </button>