diff --git a/client/src/lib/peg.js b/client/src/lib/peg.js index 94206707..5b36b7f6 100644 --- a/client/src/lib/peg.js +++ b/client/src/lib/peg.js @@ -3,25 +3,14 @@ const isNonNegativeNumber = value => Number.isFinite(value) && value >= 0 export const getPegAccounting = (chainStats = {}) => { const pegInAmount = chainStats.peg_in_amount , pegOutAmount = chainStats.peg_out_amount - , burnedAmount = chainStats.burned_amount , federationAssets = isNonNegativeNumber(pegInAmount) && isNonNegativeNumber(pegOutAmount) && pegInAmount >= pegOutAmount ? pegInAmount - pegOutAmount : null - , circulatingLiabilities = isNonNegativeNumber(federationAssets) && - isNonNegativeNumber(burnedAmount) && federationAssets >= burnedAmount - ? federationAssets - burnedAmount - : null - , assetsVsLiabilitiesRatio = isNonNegativeNumber(federationAssets) && circulatingLiabilities > 0 - ? federationAssets / circulatingLiabilities * 100 - : null return { pegInAmount , pegOutAmount - , burnedAmount , federationAssets - , circulatingLiabilities - , assetsVsLiabilitiesRatio } } diff --git a/client/src/views/peg-info.js b/client/src/views/peg-info.js index ea86cf7e..80e18257 100644 --- a/client/src/views/peg-info.js +++ b/client/src/views/peg-info.js @@ -15,11 +15,7 @@ import { } from "../const"; const staticRoot = process.env.STATIC_ROOT || ""; -const ratioMiddleBound = 100; -const minimumRatioHalfRange = 0.1; -const ratioScaleIncrement = 0.1; -const ratioScaleHeadroom = 0.05; -const recentPegTransactionLimit = 4; +const recentPegTransactionLimit = 7; const getPegTypes = (tx) => { const pegTypes = []; @@ -68,30 +64,6 @@ const getPegAmount = (tx, pegType) => { : sumValues(outputs.filter((output) => output.pegout)); }; -const getRatioScale = (ratio) => { - const ratioDistance = Number.isFinite(ratio) - ? Math.abs(ratio - ratioMiddleBound) - : 0; - const halfRange = Math.max( - minimumRatioHalfRange, - Math.ceil( - (ratioDistance + ratioScaleHeadroom) / ratioScaleIncrement, - ) * ratioScaleIncrement, - ); - const lowerBound = ratioMiddleBound - halfRange; - const upperBound = ratioMiddleBound + halfRange; - const fill = Number.isFinite(ratio) - ? Math.min( - 100, - Math.max(0, ((ratio - lowerBound) / (upperBound - lowerBound)) * 100), - ) - : 0; - - return { lowerBound, upperBound, fill }; -}; - -const formatRatioBound = (ratio) => `${ratio.toFixed(1)}%`; - const getLastConfirmationTime = (txs) => txs.reduce( (latest, tx) => @@ -155,9 +127,7 @@ export const pegInfo = (asset, txs, { t, feeEst, error }) => { pegInAmount, pegOutAmount, federationAssets, - assetsVsLiabilitiesRatio, } = getPegAccounting(chainStats); - const ratioScale = getRatioScale(assetsVsLiabilitiesRatio); const allPegTransactions = txs .reduce( (entries, tx) => entries.concat( @@ -179,7 +149,7 @@ export const pegInfo = (asset, txs, { t, feeEst, error }) => { ); return ( -
{t`Proof of Reserves`}
{formatRatioBound(ratioScale.lowerBound)}
-{formatRatioBound(ratioMiddleBound)}
-{formatRatioBound(ratioScale.upperBound)}
-- {Number.isFinite(assetsVsLiabilitiesRatio) - ? `${assetsVsLiabilitiesRatio.toFixed(3)}%` - : t`N/A`} -
-100\.0%<\/p>
100\.3%/); - assert.doesNotMatch(html, /assets-vs-liabilities-fill" style="width: 100%/); -}); - test("renders an unavailable state when peg requests fail", () => { const html = render(pegInfo(null, null, { t: l10n.en, @@ -247,7 +197,6 @@ test("keeps previous peg data visible when a refresh fails", () => { peg_in_amount: 100_000_000_000, peg_out_count: 4, peg_out_amount: 10_000_000_000, - burned_amount: 1_000_000_000, }, }, [], { t: l10n.en, diff --git a/www/style.css b/www/style.css index da5aff61..c1e065fb 100644 --- a/www/style.css +++ b/www/style.css @@ -4100,7 +4100,13 @@ a.back-link img{ min-width: 0; } +.proof-of-reserves-container { + display: flex; + flex-direction: column; +} + .peg-info { + flex: 1; display: flex; flex-direction: column; gap: var(--page-gap); @@ -4128,47 +4134,6 @@ a.back-link img{ width: 100%; } -.assets-vs-liabilities { - width: 100%; - height: auto; -} - -.assets-vs-liabilities-body { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 13px; - gap: 6px; -} - -.assets-vs-liabilities-scale { - display: flex; - justify-content: space-between; - font-size: 14px; - font-weight: 600; - width: 100%; -} - -.assets-vs-liabilities-bar { - width: 100%; - height: 6px; - border-radius: 9999px; - background-color: var(--surface-secondary-color); -} - -.assets-vs-liabilities-fill { - height: 100%; - background-color: var(--accent-color); - border-radius: 9999px; -} - -.assets-vs-liabilities-ratio { - font-size: 20px; - font-weight: 700; - font-family: "Rigid Square"; -} - .peg-transaction-table { display: flex; flex-direction: column;