Usage

See a complete example in our app

import { generateSvg } from '@opendollar/svg-generator'

 const statsForSVG = {
    vaultID: singleSafe?.id,
    stabilityFee:
        Math.floor(
            Number(
                getRatePercentage(
                    singleSafe?.totalAnnualizedStabilityFee ? singleSafe?.totalAnnualizedStabilityFee : '0',
                    2
                )
            )
        ).toString() + '%',
    debtAmount: formatWithCommas(totalDebt) + ' OD',
    collateralAmount: formatWithCommas(collateral) + ' ' + collateralName,
    collateralizationRatio: Number(singleSafe?.collateralRatio),
    safetyRatio: Number(safeState.liquidationData!.collateralLiquidationData[collateralName].safetyCRatio),
    liqRatio: Number(safeState.liquidationData!.collateralLiquidationData[collateralName].liquidationCRatio),
}

const svgHtml = generateSvg(statsForSVG)

return (
     <div>
        <div
            style={{
                maxWidth: '100%',
                height: 'auto',
                border: '1px solid #00374E',
                borderRadius: '0px',
            }}
            dangerouslySetInnerHTML={{ __html: svgHtml }}
        ></div>
    </div>
)

Test

Generate example SVGs in /test

node test

Validation

Validate the on-chain SVG renderer by querying the first few vaults:

node tasks/pullFromContracts.js