a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Burnt fees new layout

This commit is contained in:
Willian Mitsuda 2021-07-28 19:16:02 -03:00
parent 7ea23b02ed
commit c7b36152a8
2 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/transaction/Details.tsx
View File

@ -190,7 +190,7 @@ const Details: React.FC<DetailsProps> = ({
</> </>
)} )}
<InfoRow title="Transaction Fee"> <InfoRow title="Transaction Fee">
<div className="space-y-2"> <div className="space-y-3">
<div> <div>
<FormattedBalance value={txData.fee} /> Ether <FormattedBalance value={txData.fee} /> Ether
</div> </div>

41
src/transaction/RewardSplit.tsx
View File

@ -1,6 +1,10 @@
import React from "react"; import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 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 FormattedBalance from "../components/FormattedBalance";
import { TransactionData } from "../types"; import { TransactionData } from "../types";
@ -16,7 +20,25 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
100; 100;
return ( 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 className="flex space-x-1 text-orange-500">
<span title="Burnt fees"> <span title="Burnt fees">
<FontAwesomeIcon icon={faBurn} size="1x" /> <FontAwesomeIcon icon={faBurn} size="1x" />
@ -28,6 +50,11 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
Ether Ether
</span> </span>
</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="flex space-x-1">
<span className="text-yellow-300" title="Miner fees"> <span className="text-yellow-300" title="Miner fees">
<FontAwesomeIcon icon={faCoins} size="1x" /> <FontAwesomeIcon icon={faCoins} size="1x" />
@ -36,16 +63,6 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
<FormattedBalance value={minerReward} /> Ether <FormattedBalance value={minerReward} /> Ether
</span> </span>
</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>
</div> </div>
); );