Issue #557: View internal balances (#633)

* initial balance draft * initial balance draft * bump sdk version * fix lock file * fix lock file * fix lock file * fix vault block issue
open-dollar · Jul 18, 2024 · 4fef374 · 4fef374
1 parent 686337e
commit 4fef374
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
         "@ethersproject/address": "^5.0.10",
         "@ethersproject/experimental": "5.4.0",
         "@ethersproject/providers": "5.4.5",
-        "@opendollar/sdk": "1.7.4-rc.1",
+        "@opendollar/sdk": "1.7.4-rc.2",
         "@opendollar/svg-generator": "1.0.5",
         "@react-spring/web": "^9.7.3",
         "@sentry/cli": "^2.31.0",

diff --git a/src/components/VaultBlock.tsx b/src/components/VaultBlock.tsx
@@ -12,6 +12,7 @@ interface VaultBlockProps {
     collateralRatio: string
     liquidationPrice: string
     className?: string
+    internalCollateralBalance: string
 }
 
 const VaultBlock = ({
@@ -23,6 +24,7 @@ const VaultBlock = ({
     collateralRatio,
     liquidationPrice,
     className,
+    internalCollateralBalance,
 }: VaultBlockProps) => {
     const stateClass = returnState(riskState) ? returnState(riskState).toLowerCase() : 'dimmed'
 
@@ -63,6 +65,12 @@ const VaultBlock = ({
                                 <div>{returnState(riskState) ? returnState(riskState) : 'Closed'}</div>
                             </Wrapper>
                         </Item>
+                        {Number(internalCollateralBalance) > 0 && (
+                            <Item>
+                                <Label>{'Internal Balance'}</Label>
+                                <Value>{formatWithCommas(internalCollateralBalance)}</Value>
+                            </Item>
+                        )}
                     </Block>
                 </BlockContainer>
             </Link>

diff --git a/src/components/VaultStats.tsx b/src/components/VaultStats.tsx
@@ -20,6 +20,8 @@ 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'
 import Skeleton from 'react-loading-skeleton'
 
 const VaultStats = ({
@@ -39,6 +41,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
@@ -111,6 +114,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>
@@ -333,6 +351,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>
@@ -534,3 +569,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;
+`
diff --git a/src/utils/i18n/en.json b/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",

diff --git a/yarn.lock b/yarn.lock
@@ -3695,15 +3695,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@opendollar/sdk@npm:1.7.4-rc.1":
-  version: 1.7.4-rc.1
-  resolution: "@opendollar/sdk@npm:1.7.4-rc.1"
+"@opendollar/sdk@npm:1.7.4-rc.2":
+  version: 1.7.4-rc.2
+  resolution: "@opendollar/sdk@npm:1.7.4-rc.2"
   dependencies:
     "@opendollar/abis": 0.0.0-605371bd
     ethers: 5.4.7
   peerDependencies:
     utf-8-validate: ^5.0.2
-  checksum: 74974d2ca6af9030f04bb3bfeb692cd2028d83cc1fa606708069fba03bf0f3fdb9a4368dfbfb9f4403f3c4df04ac6bd7ad7d1e48d7a9852afb865dcb10fa2aed
+  checksum: f589ecf8c9e86fcf920841bb9ec142c59e482f6afb44c4140e63d982f9cc9638c7e5a84efea39d6000a3be5fe6ff9bddf3bef522d6fb1d755ff32c68d5f81fe0
   languageName: node
   linkType: hard
 
@@ -15006,7 +15006,7 @@ __metadata:
     "@ethersproject/address": ^5.0.10
     "@ethersproject/experimental": 5.4.0
     "@ethersproject/providers": 5.4.5
-    "@opendollar/sdk": 1.7.4-rc.1
+    "@opendollar/sdk": 1.7.4-rc.2
     "@opendollar/svg-generator": 1.0.5
     "@react-spring/web": ^9.7.3
     "@sentry/cli": ^2.31.0