Issue #557: View internal balances

src/components/VaultBlock.tsx

@@ -45,6 +45,12 @@ const VaultBlock = ({ ...props }) => {
                                 <div>{returnState(props.riskState) ? returnState(props.riskState) : 'Closed'}</div>
                             </Wrapper>
                         </Item>
+                        {Number(props.internalCollateralBalance) > 0 && (
+                            <Item>
+                                <Label>{'Internal Balance'}</Label>
+                                <Value>{formatWithCommas(props.internalCollateralBalance)}</Value>
+                            </Item>
+                        )}
                     </Block>
                 </BlockContainer>
             </Link>

src/components/VaultStats.tsx

@@ -20,6 +20,7 @@ import { Tooltip as ReactTooltip } from 'react-tooltip'
 import { generateSvg } from '@opendollar/svg-generator'
 import { useWeb3React } from '@web3-react/core'
 import { useAddress } from '~/hooks/useAddress'
+import useGeb from '~/hooks/useGeb'
 
 const VaultStats = ({
     isModifying,
@@ -38,6 +39,7 @@ const VaultStats = ({
         liquidationPrice: newLiquidationPrice,
         account,
     } = useSafeInfo(isModifying ? (isDeposit ? 'deposit_borrow' : 'repay_withdraw') : 'info')
+    const geb = useGeb()
 
     const { safeModel: safeState } = useStoreState((state) => state)
     const { singleSafe, liquidationData } = safeState
@@ -110,6 +112,21 @@ const VaultStats = ({
         return false
     }, [isModifying, parsedAmounts.leftInput, parsedAmounts.rightInput])
 
+    const handleClaimClick = async () => {
+        if (!account) return
+        try {
+            const proxy = await geb.getProxyAction(account)
+            await proxy.collectTokenCollateral(
+                geb.contracts.safeManager.address,
+                geb.contracts.tokenCollateralJoin[collateralName].address,
+                Number(singleSafe?.id),
+                Number(singleSafe?.internalCollateralBalance)
+            )
+        } catch (e) {
+            console.debug(e, 'Error in claiming internal balance')
+        }
+    }
+
     return (
         <>
             <Flex>
@@ -330,6 +347,23 @@ const VaultStats = ({
                             </InfoIcon>
                             <SideValue>{`${returnRedRate()}%`}</SideValue>
                         </Side>
+                        {Number(singleSafe?.internalCollateralBalance) > 0 ? (
+                            <Side style={{ fontWeight: 'bold' }}>
+                                <SideTitle>Internal Balance</SideTitle>
+                                <InfoIcon
+                                    data-tooltip-id="vault-stats"
+                                    data-tooltip-content={t('internal_balance_tip')}
+                                >
+                                    <Info size="16" />
+                                </InfoIcon>
+                                <ClaimLink onClick={handleClaimClick}>CLAIM</ClaimLink>
+                                <SideValue>
+                                    {formatWithCommas(singleSafe?.internalCollateralBalance || '0', 2, 2)}
+                                </SideValue>
+                            </Side>
+                        ) : (
+                            <></>
+                        )}
                     </Inner>
                 </Right>
             </Flex>
@@ -531,3 +565,13 @@ const InfoIcon = styled.div`
         margin-top: 4px;
     }
 `
+
+const ClaimLink = styled.span`
+    cursor: pointer;
+    font-family: 'Open Sans', sans-serif;
+    font-size: ${(props) => props.theme.font.xxSmall};
+    text-decoration: underline;
+    color: ${(props) => props.theme.colors.blueish};
+    margin-left: 5px;
+    padding-top: 1px;
+`

src/containers/Earn/EarnBlock.tsx

@@ -1,5 +1,4 @@
 import styled from 'styled-components'
-import { formatWithCommas, getTokenLogo } from '~/utils'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 
 const Link = styled.a``

src/utils/i18n/en.json

@@ -76,6 +76,7 @@
     "repay_withdraw": "Repay & Withdraw",
     "confirmations_info": "You need to wait for 10 block confirmations to make sure that your account address does not change.",
     "annual_redemption_tip": "Rate at which OD is devalued or revalued over 1 year.",
+    "internal_balance_tip": "The internal balance of the Vault left in the system after the Vault is liquidated.",
     "liquidation_price_tip": "Collateral price under which this Vault can get liquidated. The liquidation price varies with the redemption price.",
     "liquidation_penalty_tip": "Liquidations ask for more OD than you have minted in your Vault, and apply a discount on the latest oracle price in order to incentivize bidding.",
     "app": "App",