Skip to content

Commit

Permalink
Show balance diff on the side
Browse files Browse the repository at this point in the history
  • Loading branch information
sealer3 committed Apr 25, 2024
1 parent cd81017 commit 6459937
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 11 deletions.
14 changes: 10 additions & 4 deletions src/components/ElementDiff.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,15 @@ import React from "react";
type ElementDiffProps = {
oldElem: React.ReactNode | null;
newElem: React.ReactNode | null;
diffElem: React.ReactNode | null;
};

const ElementDiff: React.FC<ElementDiffProps> = ({ oldElem, newElem }) => {
return (
const ElementDiff: React.FC<ElementDiffProps> = ({
oldElem,
newElem,
diffElem,
}) => (
<div className="flex flex-row overflow-hidden items-center gap-3">
<div className="flex flex-col rounded overflow-hidden">
{oldElem !== null && (
<div className="bg-opacity-10 bg-red-500 px-2 py-1">
Expand All @@ -25,7 +30,8 @@ const ElementDiff: React.FC<ElementDiffProps> = ({ oldElem, newElem }) => {
</div>
)}
</div>
);
};
{diffElem && <div>{diffElem}</div>}
</div>
);

export default ElementDiff;
14 changes: 7 additions & 7 deletions src/execution/transaction/StateDiff.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { useContext } from "react";
import ContentFrame from "../../components/ContentFrame";
import DisplayInteger from "../../components/DisplayInteger";
import ElementDiff from "../../components/ElementDiff";
import { balancePreset, neutralPreset } from "../../components/FiatValue";
import { balancePreset } from "../../components/FiatValue";
import HexValue from "../../components/HexValue";
import NativeTokenAmountAndFiat from "../../components/NativeTokenAmountAndFiat";
import { TransactionData } from "../../types";
Expand Down Expand Up @@ -101,6 +101,7 @@ const buildStateDiffTree = (
} else {
result.push(getBranch());
let values: [string | null, string | null] = [group.from, group.to];
let diffElement: null | React.ReactElement = null;
let formatter: (value: string) => React.ReactNode | null = (
value: string,
) => <>{value}</>;
Expand All @@ -123,18 +124,16 @@ const buildStateDiffTree = (
formatter = (value: string) => <DisplayInteger numberStr={value} />;
break;
case "balance":
let diffElement: null | React.ReactElement = null;
if (values[0] !== null && values[1] !== null) {
let balanceDiff = BigInt(values[1]) - BigInt(values[0]);
diffElement = (
<span className="ml-2">
({balanceDiff >= 0n ? "+" : ""}
<>
{balanceDiff >= 0n ? "+" : ""}
<NativeTokenAmountAndFiat
value={balanceDiff}
{...neutralPreset}
{...balancePreset}
/>
)
</span>
</>
);
}
formatter = (value: string) => (
Expand Down Expand Up @@ -167,6 +166,7 @@ const buildStateDiffTree = (
<ElementDiff
oldElem={values[0] !== null ? formatter(values[0]) : null}
newElem={values[1] !== null ? formatter(values[1]) : null}
diffElem={diffElement}
/>
</div>
</div>
Expand Down

0 comments on commit 6459937

Please sign in to comment.