Add voucher balance subscription (#1415)

utils/gear-hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/react-hooks",
-  "version": "0.6.9",
+  "version": "0.6.10",
   "description": "React hooks used across Gear applications",
   "author": "Gear Technologies",
   "license": "GPL-3.0",

utils/gear-hooks/src/hooks/api/voucher/use-voucher-balance.ts

@@ -1,4 +1,5 @@
 import { HexString, generateVoucherId } from '@gear-js/api';
+import { UnsubscribePromise } from '@polkadot/api/types';
 import { AccountContext, AlertContext, ApiContext } from 'context';
 import { useContext, useEffect, useState } from 'react';
 
@@ -12,20 +13,32 @@ function useVoucherBalance(programId: HexString | undefined) {
   const [voucherBalance, setVoucherBalance] = useState<string>();
   const isVoucherBalanceReady = voucherBalance !== undefined;
 
+  const voucherId = programId && accountAddress ? generateVoucherId(accountAddress, programId) : undefined;
+
   useEffect(() => {
     setVoucherBalance(undefined);
 
-    if (!programId || !isApiReady || !accountAddress) return;
-
-    const id = generateVoucherId(accountAddress, programId);
+    if (!isApiReady || !voucherId) return;
 
     api.balance
-      .findOut(id)
+      .findOut(voucherId)
       .then((result) => setVoucherBalance(result.toString()))
       .catch(({ message }: Error) => alert.error(message));
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isApiReady, accountAddress, programId]);
+  }, [isApiReady, voucherId]);
+
+  // TODO: useBalanceSubscription, same as in Account context
+  useEffect(() => {
+    if (!isApiReady || !voucherId) return;
+
+    const unsub = api.gearEvents.subscribeToBalanceChanges(voucherId, (result) => setVoucherBalance(result.toString()));
+
+    return () => {
+      unsub.then((unsubCallback) => unsubCallback());
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isApiReady, voucherId]);
 
   return { voucherBalance, isVoucherBalanceReady };
 }