Merge pull request #500 from interlay/rui/vault-dashboard-null-vault

fix(VaultDashboard): vault remaining capacity calculation

src/pages/Vaults/Vault/VaultDashboard.tsx

@@ -48,7 +48,7 @@ const VaultDashboard = (): JSX.Element => {
     <ProgressCircle
       aria-label='BTC remaining capacity'
       diameter='65'
-      value={(1 - Number(vault.remainingCapacity.percentage)) * 100}
+      value={(1 - Number(vault.remainingCapacity.ratio)) * 100}
     />
   );
 
@@ -66,7 +66,7 @@ const VaultDashboard = (): JSX.Element => {
     {
       title: 'Remaining kBTC capacity',
       label: vault.remainingCapacity.amount.toBig().toString(),
-      sublabel: formatPercentage(vault.remainingCapacity.percentage, {
+      sublabel: formatPercentage(vault.remainingCapacity.ratio, {
         maximumFractionDigits: 2,
         minimumFractionDigits: 2
       }),

src/utils/hooks/api/vaults/get-vault-data.ts

@@ -60,10 +60,22 @@ interface VaultData {
   secureThreshold: Big;
   remainingCapacity: {
     amount: MonetaryAmount<CollateralCurrencyExt>;
-    percentage: number;
+    ratio: number;
   };
 }
 
+const getRemainingCapacity = (issuableTokens: Big, vaultExt: VaultExt): number => {
+  if (!issuableTokens.gt(0)) return 0;
+
+  const backedTokens = vaultExt.getBackedTokens().toBig();
+
+  if (!backedTokens.gt(0)) return 1;
+
+  const totalTokens = issuableTokens.add(backedTokens);
+
+  return issuableTokens.div(totalTokens).toNumber();
+};
+
 const getVaultData = async (vault: VaultExt, accountId: AccountId, prices: Prices | undefined): Promise<VaultData> => {
   const collateralTokenIdLiteral = vault.backingCollateral.currency.ticker as CollateralIdLiteral;
   const collateralTokenPrice = getTokenPrice(prices, collateralTokenIdLiteral);
@@ -144,11 +156,6 @@ const getVaultData = async (vault: VaultExt, accountId: AccountId, prices: Price
 
   const pendingRequests = issuesCount.data.issuesConnection.totalCount + redeemsCount.data.redeemsConnection.totalCount;
 
-  // Calculate remaning capacity
-  const backedTokens = vaultExt.getBackedTokens();
-  const divisor = issuableTokens.add(backedTokens).toBig();
-  const remainingCapacity = issuableTokens.div(divisor);
-
   return {
     apy,
     collateralization,
@@ -184,7 +191,7 @@ const getVaultData = async (vault: VaultExt, accountId: AccountId, prices: Price
     secureThreshold,
     remainingCapacity: {
       amount: issuableTokens,
-      percentage: remainingCapacity.toBig().toNumber()
+      ratio: getRemainingCapacity(issuableTokens.toBig(), vaultExt)
     }
   };
 };