Skip to content

Commit

Permalink
feat(explorer): format raw transaction value (#2961)
Browse files Browse the repository at this point in the history
* Format raw bigint value in transaction

* Display full amount on hover
  • Loading branch information
bigboydiamonds authored Jul 30, 2024
1 parent 93aa8e4 commit 9029c41
Show file tree
Hide file tree
Showing 6 changed files with 65 additions and 27 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const BridgeTransactionTable = ({ queryResult }) => {
useExplorerLink={false}
/>
<IconAndAmount
formattedValue={fromInfo.formattedValue}
value={fromInfo.value}
tokenAddress={fromInfo.tokenAddress}
chainId={fromInfo.chainID}
tokenSymbol={
Expand All @@ -83,9 +83,7 @@ export const BridgeTransactionTable = ({ queryResult }) => {
useExplorerLink={false}
/>
<IconAndAmount
formattedValue={
pending ? fromInfo.formattedValue : toInfo?.formattedValue
}
value={pending ? fromInfo.value : toInfo?.value}
tokenAddress={
pending ? fromInfo.tokenAddress : toInfo?.tokenAddress
}
Expand Down
25 changes: 6 additions & 19 deletions packages/explorer-ui/components/misc/IconAndAmount.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,33 @@ import { Tooltip as ReactTooltip } from 'react-tooltip'
import { AssetImage } from '@components/misc/AssetImage'
import { formatAmount } from '@utils/formatAmount'
import { addressToDecimals } from '@utils/addressToDecimals'
import { formatBigIntToString } from '@utils/formatBigIntToString'

export const IconAndAmount = ({
formattedValue,
value,
tokenAddress,
chainId,
tokenSymbol,
iconSize = 'w-4 h-4 rounded-full',
className = '',
}) => {
2
let amount
if (tokenSymbol) {
const dec = 10 ** addressToDecimals({ tokenAddress, chainId })
if (formattedValue > 10000000) {
amount = formattedValue / (dec / 10 ** 6)
} else {
amount = formattedValue
}
} else {
const dec = 10 ** addressToDecimals({ tokenAddress, chainId })
amount = formattedValue / (dec / 10 ** 6)
}

const displayAmount = amount ? formatAmount(amount) : '< 0.001'
const decimals = addressToDecimals({ tokenAddress, chainId })
const formattedValue = formatBigIntToString(value, decimals)

return (
<div className={`flex items-center ${className}`}>
<div className="flex flex-row items-center text-white">
<AssetImage
tokenAddress={tokenAddress}
// tokenSymbol={tokenSymbol}
chainId={chainId}
className={`${iconSize} min-w-[1rem] min-h-[1rem] inline rounded-full`}
/>
<div
data-tooltip-content={displayAmount}
data-tooltip-content={formattedValue}
data-tooltip-id="amount"
className="flex-1 pl-1 mr-1 text-white"
>
{displayAmount}
{formatAmount(formattedValue)}
</div>
</div>
<span className="text-white">{tokenSymbol}</span>
Expand Down
4 changes: 2 additions & 2 deletions packages/explorer-ui/pages/tx/[kappa].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export const BridgeTransaction = ({ queryResult }) => {
<p className="w-24 text-white text-opacity-60">Sent</p>
<div className="flex flex-col items-center sm:flex-row">
<IconAndAmount
formattedValue={fromInfo.formattedValue}
value={fromInfo.value}
tokenAddress={fromInfo.tokenAddress}
chainId={fromInfo.chainID}
tokenSymbol={fromInfo.tokenSymbol}
Expand All @@ -179,7 +179,7 @@ export const BridgeTransaction = ({ queryResult }) => {
{toInfo ? (
<div className="flex flex-col items-center sm:flex-row">
<IconAndAmount
formattedValue={toInfo.formattedValue}
value={toInfo.value}
tokenAddress={toInfo.tokenAddress}
chainId={toInfo.chainID}
tokenSymbol={toInfo.tokenSymbol}
Expand Down
5 changes: 5 additions & 0 deletions packages/explorer-ui/patch.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore: Unreachable code error
BigInt.prototype.toJSON = function (): number {
return this.toString()
}
4 changes: 2 additions & 2 deletions packages/explorer-ui/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"compilerOptions": {
"target": "es5",
"target": "ES2020",
"downlevelIteration": true,
"lib": [
"dom",
Expand Down Expand Up @@ -97,4 +97,4 @@
"exclude": [
"node_modules"
]
}
}
48 changes: 48 additions & 0 deletions packages/explorer-ui/utils/formatBigIntToString.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
export const formatBigIntToString = (
bi: bigint,
nativePrecision: number,
decimalPlaces?: number
) => {
if (typeof bi !== 'bigint' && !bi) {
return
}
try {
// Check if input is zero
if (bi === 0n) {
return '0.0'
}

// Check if the input is negative
const isNegative = bi < 0n
if (isNegative) {
// Convert to positive for the calculation
bi = -bi
}
// Convert to string and add padding zeros if necessary
let str = bi.toString().padStart(nativePrecision, '0')

// Insert decimal point
const idx = str.length - nativePrecision
str = `${str.slice(0, idx)}.${str.slice(idx)}`

// Handle values below zero by adding a '0' before the decimal point
if (str.startsWith('.')) {
str = '0' + str
}

// Trim to desired number of decimal places
if (decimalPlaces !== undefined) {
const decimalIdx = str.indexOf('.')
str = str.slice(0, decimalIdx + decimalPlaces + 1)
}

// Add the negative sign back if necessary
if (isNegative) {
str = '-' + str
}

return str
} catch (error) {
console.error(`error`, error)
}
}

0 comments on commit 9029c41

Please sign in to comment.