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

Merge branch 'feature/ui-fixes' into develop

This commit is contained in:
Willian Mitsuda 2021-08-08 03:10:18 -03:00
parent 1452ed0d63 97d10740f5
commit f94a0eef5e
2 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/PercentageGauge.tsx
View File

@ -2,29 +2,29 @@ import React from "react";
type PercentageGaugeProps = { type PercentageGaugeProps = {
perc: number; perc: number;
bgFull: string; bgColor: string;
bgPerc: string; bgColorPerc: string;
textPerc: string; textColor: string;
}; };
const PercentageGauge: React.FC<PercentageGaugeProps> = ({ const PercentageGauge: React.FC<PercentageGaugeProps> = ({
perc, perc,
bgFull, bgColor,
bgPerc, bgColorPerc,
textPerc, textColor,
}) => ( }) => (
<div className="w-60 h-6 border-l-2 border-gray-400 relative"> <div className="w-60 h-6 border-l-2 border-gray-400 relative">
<div className="flex absolute w-full h-full"> <div className="flex absolute w-full h-full">
<div className={`my-auto h-5 rounded-r-lg w-full ${bgFull}`}></div> <div className={`my-auto h-5 rounded-r-lg w-full ${bgColor}`}></div>
</div> </div>
<div className="flex absolute w-full h-full"> <div className="flex absolute w-full h-full">
<div <div
className={`my-auto h-5 rounded-r-lg ${bgPerc}`} className={`my-auto h-5 rounded-r-lg ${bgColorPerc}`}
style={{ width: `${perc}%` }} style={{ width: `${perc}%` }}
></div> ></div>
</div> </div>
<div <div
className={`flex absolute w-full h-full mix-blend-multiply text-sans ${textPerc}`} className={`flex absolute w-full h-full mix-blend-multiply text-sans ${textColor}`}
> >
<span className="m-auto">{perc}%</span> <span className="m-auto">{perc}%</span>
</div> </div>

22
src/transaction/RewardSplit.tsx
View File

@ -10,20 +10,22 @@ type RewardSplitProps = {
}; };
const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => { const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
const paidFees = txData.gasPrice.mul(txData.gasUsed);
const burntFees = txData.blockBaseFeePerGas!.mul(txData.gasUsed); const burntFees = txData.blockBaseFeePerGas!.mul(txData.gasUsed);
const minerReward = txData.gasPrice.mul(txData.gasUsed).sub(burntFees);
const minerReward = paidFees.sub(burntFees);
const burntPerc = const burntPerc =
burntFees.mul(10000).div(txData.gasPrice.mul(txData.gasUsed)).toNumber() / Math.round(burntFees.mul(10000).div(paidFees).toNumber()) / 100;
100; const minerPerc = Math.round((100 - burntPerc) * 100) / 100;
return ( return (
<div className="inline-block"> <div className="inline-block">
<div className="grid grid-cols-2 gap-x-2 gap-y-1 items-center text-sm"> <div className="grid grid-cols-2 gap-x-2 gap-y-1 items-center text-sm">
<PercentageGauge <PercentageGauge
perc={burntPerc} perc={burntPerc}
bgFull="bg-orange-100" bgColor="bg-orange-100"
bgPerc="bg-orange-500" bgColorPerc="bg-orange-500"
textPerc="text-orange-800" textColor="text-orange-800"
/> />
<div className="flex items-baseline space-x-1"> <div className="flex items-baseline space-x-1">
<span className="flex space-x-1 text-orange-500"> <span className="flex space-x-1 text-orange-500">
@ -39,10 +41,10 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
</span> </span>
</div> </div>
<PercentageGauge <PercentageGauge
perc={100 - burntPerc} perc={minerPerc}
bgFull="bg-yellow-100" bgColor="bg-yellow-100"
bgPerc="bg-yellow-300" bgColorPerc="bg-yellow-300"
textPerc="text-yellow-700" textColor="text-yellow-700"
/> />
<div className="flex items-baseline space-x-1"> <div className="flex items-baseline space-x-1">
<span className="flex space-x-1"> <span className="flex space-x-1">