Burnt fees new layout
This commit is contained in:
parent
7ea23b02ed
commit
c7b36152a8
|
@ -190,7 +190,7 @@ const Details: React.FC<DetailsProps> = ({
|
|||
</>
|
||||
)}
|
||||
<InfoRow title="Transaction Fee">
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<FormattedBalance value={txData.fee} /> Ether
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,10 @@
|
|||
import React from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faBurn, faCoins } from "@fortawesome/free-solid-svg-icons";
|
||||
import {
|
||||
faAngleRight,
|
||||
faBurn,
|
||||
faCoins,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import FormattedBalance from "../components/FormattedBalance";
|
||||
import { TransactionData } from "../types";
|
||||
|
||||
|
@ -16,7 +20,25 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
|
|||
100;
|
||||
|
||||
return (
|
||||
<div className="inline-flex space-x-2">
|
||||
<div className="space-y-2">
|
||||
<div
|
||||
className="self-center w-40 border rounded border-gray-200"
|
||||
title="Burnt Fees Percentage"
|
||||
>
|
||||
<div className="w-full h-5 rounded bg-orange-500 relative">
|
||||
<div
|
||||
className="absolute top-0 right-0 bg-yellow-200 h-full rounded-r"
|
||||
style={{ width: `${100 - burntPerc}%` }}
|
||||
></div>
|
||||
<div className="w-full h-full absolute flex mix-blend-multiply text-sans text-orange-800">
|
||||
<span className="m-auto">{burntPerc}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-baseline space-x-1 text-sm">
|
||||
<span className="text-gray-500">
|
||||
<FontAwesomeIcon icon={faAngleRight} size="1x" />
|
||||
</span>
|
||||
<span className="flex space-x-1 text-orange-500">
|
||||
<span title="Burnt fees">
|
||||
<FontAwesomeIcon icon={faBurn} size="1x" />
|
||||
|
@ -28,6 +50,11 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
|
|||
Ether
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-baseline space-x-1 text-sm">
|
||||
<span className="text-gray-500">
|
||||
<FontAwesomeIcon icon={faAngleRight} size="1x" />
|
||||
</span>
|
||||
<span className="flex space-x-1">
|
||||
<span className="text-yellow-300" title="Miner fees">
|
||||
<FontAwesomeIcon icon={faCoins} size="1x" />
|
||||
|
@ -36,16 +63,6 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
|
|||
<FormattedBalance value={minerReward} /> Ether
|
||||
</span>
|
||||
</span>
|
||||
<div className="self-center w-40 border rounded border-gray-200">
|
||||
<div className="w-full h-5 rounded bg-orange-500 relative">
|
||||
<div
|
||||
className="absolute top-0 right-0 bg-yellow-200 h-full rounded-r"
|
||||
style={{ width: `${100 - burntPerc}%` }}
|
||||
></div>
|
||||
<div className="w-full h-full absolute flex mix-blend-multiply text-sans text-gray-600">
|
||||
<span className="m-auto">{burntPerc}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue