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

Fix spacing and alignment due to addresss highlight feature

This commit is contained in:
Willian Mitsuda 2021-07-14 15:35:53 -03:00
parent e2e94a4d30
commit f3213b3c69
4 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/TokenTransferItem.tsx
View File

@ -21,20 +21,20 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
<span className="text-gray-500"> <span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" /> <FontAwesomeIcon icon={faCaretRight} size="1x" />
</span> </span>
<div className="grid grid-cols-5"> <div className="grid grid-cols-5 gap-x-1">
<div className="flex space-x-2"> <div className="flex space-x-1">
<span className="font-bold">From</span> <span className="font-bold">From</span>
<AddressHighlighter address={t.from}> <AddressHighlighter address={t.from}>
<AddressOrENSName address={t.from} /> <AddressOrENSName address={t.from} />
</AddressHighlighter> </AddressHighlighter>
</div> </div>
<div className="flex space-x-2"> <div className="flex space-x-1">
<span className="font-bold">To</span> <span className="font-bold">To</span>
<AddressHighlighter address={t.to}> <AddressHighlighter address={t.to}>
<AddressOrENSName address={t.to} /> <AddressOrENSName address={t.to} />
</AddressHighlighter> </AddressHighlighter>
</div> </div>
<div className="col-span-3 flex space-x-2"> <div className="col-span-3 flex space-x-1">
<span className="font-bold">For</span> <span className="font-bold">For</span>
<span> <span>
<FormattedBalance <FormattedBalance

4
src/Transaction.tsx
View File

@ -209,7 +209,7 @@ const Transaction: React.FC = () => {
<Timestamp value={txData.timestamp} /> <Timestamp value={txData.timestamp} />
</InfoRow> </InfoRow>
<InfoRow title="From"> <InfoRow title="From">
<div className="flex items-baseline space-x-2"> <div className="flex items-baseline space-x-2 -ml-1">
<AddressHighlighter address={txData.from}> <AddressHighlighter address={txData.from}>
<AddressOrENSName <AddressOrENSName
address={txData.from} address={txData.from}
@ -220,7 +220,7 @@ const Transaction: React.FC = () => {
</div> </div>
</InfoRow> </InfoRow>
<InfoRow title="Interacted With (To)"> <InfoRow title="Interacted With (To)">
<div className="flex items-baseline space-x-2"> <div className="flex items-baseline space-x-2 -ml-1">
<AddressHighlighter address={txData.to}> <AddressHighlighter address={txData.to}>
<AddressOrENSName <AddressOrENSName
address={txData.to} address={txData.to}

64
src/components/InternalTransfer.tsx
View File

@ -25,36 +25,40 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
<FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
</span> </span>
<span>{ethers.utils.formatEther(transfer.value)} Ether</span> <span>{ethers.utils.formatEther(transfer.value)} Ether</span>
<span className="text-gray-500">From</span> <div className="flex items-baseline">
<AddressHighlighter address={transfer.from}> <span className="text-gray-500">From</span>
<div <AddressHighlighter address={transfer.from}>
className={`flex items-baseline space-x-1 ${ <div
fromMiner ? "rounded px-2 py-1 bg-yellow-100" : "" className={`flex items-baseline space-x-1 ${
}`} fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
> }`}
{fromMiner && ( >
<span className="text-yellow-400" title="Miner address"> {fromMiner && (
<FontAwesomeIcon icon={faCoins} size="1x" /> <span className="text-yellow-400" title="Miner address">
</span> <FontAwesomeIcon icon={faCoins} size="1x" />
)} </span>
<AddressLink address={transfer.from} /> )}
</div> <AddressLink address={transfer.from} />
</AddressHighlighter> </div>
<span className="text-gray-500">To</span> </AddressHighlighter>
<AddressHighlighter address={transfer.to}> </div>
<div <div className="flex items-baseline">
className={`flex items-baseline space-x-1 px-2 py-1 ${ <span className="text-gray-500">To</span>
toMiner ? "rounded px-2 py-1 bg-yellow-100" : "" <AddressHighlighter address={transfer.to}>
}`} <div
> className={`flex items-baseline space-x-1 ${
{toMiner && ( toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
<span className="text-yellow-400" title="Miner address"> }`}
<FontAwesomeIcon icon={faCoins} size="1x" /> >
</span> {toMiner && (
)} <span className="text-yellow-400" title="Miner address">
<AddressLink address={transfer.to} /> <FontAwesomeIcon icon={faCoins} size="1x" />
</div> </span>
</AddressHighlighter> )}
<AddressLink address={transfer.to} />
</div>
</AddressHighlighter>
</div>
</div> </div>
); );
}; };

4
src/search/ResultHeader.tsx
View File

@ -15,8 +15,8 @@ const ResultHeader: React.FC<ResultHeaderProps> = ({
<div>Method</div> <div>Method</div>
<div>Block</div> <div>Block</div>
<div>Age</div> <div>Age</div>
<div className="col-span-2">From</div> <div className="col-span-2 ml-1">From</div>
<div className="col-span-2">To</div> <div className="col-span-2 ml-1">To</div>
<div className="col-span-2">Value</div> <div className="col-span-2">Value</div>
<div> <div>
<button <button