Peter/fix staking limit bug

package.json

@@ -7,7 +7,7 @@
     "@headlessui/react": "^1.1.1",
     "@heroicons/react": "^2.0.18",
     "@interlay/bridge": "^0.3.13",
-    "@interlay/interbtc-api": "2.4.0",
+    "@interlay/interbtc-api": "2.4.1",
     "@interlay/monetary-js": "0.7.3",
     "@polkadot/api": "9.14.2",
     "@polkadot/extension-dapp": "0.44.1",

src/hooks/api/escrow/use-get-account-stakable-limit.ts

@@ -0,0 +1,38 @@
+import { CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api';
+import { MonetaryAmount } from '@interlay/monetary-js';
+import { AccountId } from '@polkadot/types/interfaces';
+import { useErrorHandler } from 'react-error-boundary';
+import { useQuery } from 'react-query';
+
+import { GOVERNANCE_TOKEN } from '@/config/relay-chains';
+import useAccountId from '@/hooks/use-account-id';
+import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api';
+
+interface GetAccountStakableLimitResult {
+  data: MonetaryAmount<CurrencyExt> | undefined;
+  refetch: () => void;
+}
+
+const getAccountStakableLimit = async (account: AccountId) => {
+  const { amount } = await window.bridge.api.rpc.escrow.totalSupply(account);
+  return newMonetaryAmount(amount, GOVERNANCE_TOKEN);
+};
+
+const useGetAccountStakableLimit = (): GetAccountStakableLimitResult => {
+  const account = useAccountId();
+
+  const queryKey = ['staking', account];
+
+  const { data, error, refetch } = useQuery({
+    queryKey,
+    queryFn: () => account && getAccountStakableLimit(account),
+    refetchInterval: BLOCKTIME_REFETCH_INTERVAL,
+    enabled: !!account
+  });
+
+  useErrorHandler(error);
+
+  return { data, refetch };
+};
+
+export { useGetAccountStakableLimit };

src/pages/Staking/index.tsx

@@ -27,7 +27,7 @@ import {
   VOTE_GOVERNANCE_TOKEN_SYMBOL,
   VoteGovernanceTokenMonetaryAmount
 } from '@/config/relay-chains';
-import { useGetBalances } from '@/hooks/api/tokens/use-get-balances';
+import { useGetAccountStakableLimit } from '@/hooks/api/escrow/use-get-account-stakable-limit';
 import { useGetPrices } from '@/hooks/api/use-get-prices';
 import { Transaction, useTransaction } from '@/hooks/transaction';
 import { useSignMessage } from '@/hooks/use-sign-message';
@@ -109,8 +109,7 @@ const Staking = (): JSX.Element => {
 
   const { bridgeLoaded } = useSelector((state: StoreType) => state.general);
 
-  const { data: balances, isLoading: isBalancesLoading } = useGetBalances();
-  const governanceTokenBalance = balances?.[GOVERNANCE_TOKEN.ticker];
+  const { data: maxStakableAmount } = useGetAccountStakableLimit();
 
   const queryClient = useQueryClient();
 
@@ -319,7 +318,7 @@ const Staking = (): JSX.Element => {
 
   const availableBalance = React.useMemo(() => {
     if (
-      isBalancesLoading ||
+      maxStakableAmount === undefined ||
       stakedAmountAndEndBlockIdle ||
       stakedAmountAndEndBlockLoading ||
       transactionFeeReserveIdle ||
@@ -332,21 +331,17 @@ const Staking = (): JSX.Element => {
     if (transactionFeeReserve === undefined) {
       throw new Error('Transaction fee reserve value returned undefined!');
     }
-    if (governanceTokenBalance === undefined) {
-      throw new Error('Governance token balance value returned undefined!');
-    }
 
-    const calculatedBalance = governanceTokenBalance.free.sub(stakedAmount).sub(transactionFeeReserve);
+    const calculatedBalance = maxStakableAmount.sub(transactionFeeReserve);
 
     return calculatedBalance.toBig().gte(0) ? calculatedBalance : newMonetaryAmount(0, GOVERNANCE_TOKEN);
   }, [
-    isBalancesLoading,
-    governanceTokenBalance,
+    maxStakableAmount,
     stakedAmountAndEndBlockIdle,
     stakedAmountAndEndBlockLoading,
-    stakedAmount,
     transactionFeeReserveIdle,
     transactionFeeReserveLoading,
+    stakedAmount,
     transactionFeeReserve
   ]);
 
@@ -736,7 +731,7 @@ const Staking = (): JSX.Element => {
               <AvailableBalanceUI
                 label='Available balance'
                 balance={
-                  availableMonetaryBalance === undefined
+                  availableMonetaryBalance === undefined // /
                     ? '-'
                     : formatNumber(Number(availableMonetaryBalance), {
                         minimumFractionDigits: 0,

yarn.lock

@@ -2125,13 +2125,13 @@
   dependencies:
     axios "^0.21.1"
 
-"@interlay/interbtc-api@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.4.0.tgz#097a5bc16364e9f5aaf18d2921f9bc6b98fef326"
-  integrity sha512-SJG2FBF9410YG3L6n6lluDmu0zUR5JyvE7HGDFD3osrXdckKGC47gEY4Xar7Qbf/Z+gI4KNwNbdUUfhtstjx+Q==
+"@interlay/interbtc-api@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.4.1.tgz#8e9d247f38ce89eef95422db4bc9d772b3e8f1c7"
+  integrity sha512-mhXMhmabezjVG/FZDBMgGsvguBDpkhmFHuMOiZIbvoNUNJp3pEseTRD9tXcPZiS23B0NrSJvqR9j3R9VPihn/Q==
   dependencies:
     "@interlay/esplora-btc-api" "0.4.0"
-    "@interlay/interbtc-types" "1.12.0"
+    "@interlay/interbtc-types" "1.13.0"
     "@interlay/monetary-js" "0.7.3"
     "@polkadot/api" "9.14.2"
     big.js "6.1.1"
@@ -2147,10 +2147,10 @@
   resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.11.0.tgz#5b94066ddee1fd677de928531db36e6ae439e08f"
   integrity sha512-bn3XjyRlXyhe1QKUHx5IEQJDNC6LoSCJJIkTnSp5xm52GRBEWgHOvLAnfJi3gyj7A3lV/yA2Xjqf294bZgMmfw==
 
-"@interlay/interbtc-types@1.12.0":
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.12.0.tgz#07dc8e15690292387124dbc2bbb7bf5bc8b68001"
-  integrity sha512-ELJa2ftIbe8Ds2ejS7kO5HumN9EB5l2OBi3Qsy5iHJsHKq2HtXfFoKnW38HarM6hADrWG+e/yNGHSKJIJzEZuA==
+"@interlay/interbtc-types@1.13.0":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.13.0.tgz#0e09badf10861b4c8a5087b4358da317e464a14a"
+  integrity sha512-oUjavcfnX7lxlMd10qGc48/MoATX37TQcuSAZBIUmpCRiJ15hZbQoTAKGgWMPsla3+3YqUAzkWUEVMwUvM1U+w==
 
 "@interlay/monetary-js@0.7.3":
   version "0.7.3"