From 163217502c253b854810f0f15e8d1dac612ae45d Mon Sep 17 00:00:00 2001
From: Jay <lygm1062@gmail.com>
Date: Tue, 7 Jun 2022 09:30:50 +0800
Subject: [PATCH] fix: crab available (#195)

---
 src/components/staking/AssetOverview.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/staking/AssetOverview.tsx b/src/components/staking/AssetOverview.tsx
index e4c9d464..b0c01946 100644
--- a/src/components/staking/AssetOverview.tsx
+++ b/src/components/staking/AssetOverview.tsx
@@ -2,7 +2,8 @@ import { QuestionCircleFilled } from '@ant-design/icons';
 import { Skeleton, Tooltip } from 'antd';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useStaking } from '../../hooks';
+import { BN } from '@polkadot/util';
+import { useStaking, useApi } from '../../hooks';
 import { AssetOverviewProps } from '../../model';
 import { fromWei, isRing, prettyNumber, getLedger } from '../../utils';
 import { PrettyAmount } from '../widget/PrettyAmount';
@@ -19,6 +20,7 @@ function Description({ title, value }: { title: string; value: string }) {
 }
 
 export function AssetOverview({ asset }: AssetOverviewProps) {
+  const { network } = useApi();
   const { t } = useTranslation();
   const { stakingDerive, isStakingLedgerEmpty, isStakingDeriveLoading } = useStaking();
   const tokenIconSrc = useMemo(
@@ -31,6 +33,12 @@ export function AssetOverview({ asset }: AssetOverviewProps) {
     [asset, isStakingLedgerEmpty, stakingDerive]
   );
 
+  // TODO: revert after upgrade darwinia runtime
+  const available = useMemo(
+    () => (network.name === 'darwinia' ? new BN(asset.max).sub(new BN(ledger.unbonding || 0)) : asset.max),
+    [network.name, asset.max, ledger.unbonding]
+  );
+
   if (isStakingDeriveLoading) {
     return <Skeleton active />;
   }
@@ -44,7 +52,7 @@ export function AssetOverview({ asset }: AssetOverviewProps) {
         </div>
 
         <div className="flex flex-col col-span-2 justify-between">
-          <Description title={t('Available')} value={fromWei({ value: asset.max }, prettyNumber)} />
+          <Description title={t('Available')} value={fromWei({ value: available }, prettyNumber)} />
           <Description title={t('Bonded')} value={fromWei({ value: ledger.bonded }, prettyNumber)} />
           <Description title={t('Unbonded')} value={fromWei({ value: ledger.unbonded }, prettyNumber)} />
           {isRing(asset.asset) && (