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

Merge branch 'feature/faucets' into develop

This commit is contained in:
Willian Mitsuda 2022-04-05 22:58:00 -03:00
parent 932505fd50 6e5831af4b
commit fdc088d021
17 changed files with 192 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
chains

@ -1 +1 @@
Subproject commit af79eb7387b2a4f747bf31cb318d4f1db43c4d84
Subproject commit f795a1a1ec5a6e87012f34eb148419a358bec04b

8
src/Address.tsx
View File

@ -15,6 +15,7 @@ import StandardFrame from "./StandardFrame";
import StandardSubtitle from "./StandardSubtitle";
import AddressOrENSNameNotFound from "./components/AddressOrENSNameNotFound";
import Copy from "./components/Copy";
import Faucet from "./components/Faucet";
import NavTab from "./components/NavTab";
import SourcifyLogo from "./sourcify/SourcifyLogo";
import AddressTransactionResults from "./address/AddressTransactionResults";
@ -25,6 +26,7 @@ import { useAddressOrENS } from "./useResolvedAddresses";
import { useMultipleMetadata } from "./sourcify/useSourcify";
import { ChecksummedAddress } from "./types";
import { useAddressesWithCode } from "./useErigonHooks";
import { useChainInfo } from "./useChainInfo";
const AddressTransactionByNonce = React.lazy(
() =>
@ -86,6 +88,8 @@ const Address: React.FC = () => {
? metadatas[checksummedAddress]
: undefined;
const { faucets } = useChainInfo();
// Search address by nonce === transaction @ nonce
const rawNonce = searchParams.get("nonce");
if (rawNonce !== null) {
@ -119,6 +123,10 @@ const Address: React.FC = () => {
{checksummedAddress}
</span>
<Copy value={checksummedAddress} rounded />
{/* Only display faucets for testnets who actually have any */}
{faucets && faucets.length > 0 && (
<Faucet address={checksummedAddress} rounded />
)}
{isENS && (
<span className="rounded-lg px-2 py-1 bg-gray-200 text-gray-500 text-xs">
ENS: {addressOrName}

9
src/App.tsx
View File

@ -27,10 +27,10 @@ const Transaction = React.lazy(
import(/* webpackChunkName: "tx", webpackPrefetch: true */ "./Transaction")
);
const London = React.lazy(
() =>
import(
/* webpackChunkName: "london", webpackPrefetch: true */ "./special/london/London"
)
() => import(/* webpackChunkName: "london" */ "./special/london/London")
);
const Faucets = React.lazy(
() => import(/* webpackChunkName: "faucets" */ "./Faucets")
);
const PageNotFound = React.lazy(
() =>
@ -74,6 +74,7 @@ const App = () => {
path="address/:addressOrName/*"
element={<Address />}
/>
<Route path="faucets/*" element={<Faucets />} />
<Route path="*" element={<PageNotFound />} />
</Route>
</Routes>

8
src/Block.tsx
View File

@ -34,7 +34,9 @@ const Block: React.FC = () => {
if (blockNumberOrHash === undefined) {
throw new Error("blockNumberOrHash couldn't be undefined here");
}
const { nativeName, nativeSymbol } = useChainInfo();
const {
nativeCurrency: { name, symbol },
} = useChainInfo();
const block = useBlockData(provider, blockNumberOrHash);
useEffect(() => {
@ -146,7 +148,7 @@ const Block: React.FC = () => {
<span className="line-through">
<FormattedBalance value={burntFees} />
</span>{" "}
{nativeSymbol}
{symbol}
</span>
</span>
</div>
@ -165,7 +167,7 @@ const Block: React.FC = () => {
{extraStr} (Hex:{" "}
<span className="font-data break-all">{block.extraData}</span>)
</InfoRow>
<InfoRow title={`${nativeName} Price`}>
<InfoRow title={`${name} Price`}>
<USDValue value={blockETHUSDPrice} />
</InfoRow>
<InfoRow title="Difficult">

86
src/Faucets.tsx Normal file
View File

@ -0,0 +1,86 @@
import React, { useMemo } from "react";
import { useLocation } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
import { faFaucetDrip } from "@fortawesome/free-solid-svg-icons/faFaucetDrip";
import ExternalLink from "./components/ExternalLink";
import ContentFrame from "./ContentFrame";
import StandardFrame from "./StandardFrame";
import StandardSubtitle from "./StandardSubtitle";
import { useChainInfo } from "./useChainInfo";
const Faucets: React.FC = () => {
const { faucets } = useChainInfo();
const loc = useLocation();
const urls = useMemo(() => {
const s = new URLSearchParams(loc.search);
const address = s.get("address");
const _urls = faucets.map((u) =>
// eslint-disable-next-line no-template-curly-in-string
address !== null ? u.replaceAll("${ADDRESS}", address) : u
);
// Shuffle faucets to avoid UI bias
for (let i = _urls.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[_urls[i], _urls[j]] = [_urls[j], _urls[i]];
}
return _urls;
}, [faucets, loc]);
return (
<StandardFrame>
<StandardSubtitle>Faucets</StandardSubtitle>
<ContentFrame>
<div className="py-4 space-y-3">
{urls.length > 0 && (
<div className="flex space-x-2 items-baseline rounded bg-yellow-200 text-red-800 font-bold underline px-2 py-1">
<FontAwesomeIcon
className="self-center"
icon={faTriangleExclamation}
size="1x"
/>
<span>
The following external links come from
https://github.com/ethereum-lists/chains and are *NOT* endorsed
by us. Use at your own risk.
</span>
</div>
)}
{/* Display the shuffling notice only if there are 1+ faucets */}
{urls.length > 1 && (
<div className="flex space-x-2 items-baseline rounded bg-yellow-200 text-yellow-700 px-2 py-1">
<FontAwesomeIcon
className="self-center"
icon={faTriangleExclamation}
size="1x"
/>
<span>The faucet links below are shuffled on page load.</span>
</div>
)}
{urls.length > 0 ? (
<div className="pt-2 space-y-3">
{urls.map((url) => (
<div className="flex space-x-2 items-baseline">
<FontAwesomeIcon
className="text-gray-400"
icon={faFaucetDrip}
size="1x"
/>
<ExternalLink key={url} href={url}>
<span>{url}</span>
</ExternalLink>
</div>
))}
</div>
) : (
<div>There are no registered faucets.</div>
)}
</div>
</ContentFrame>
</StandardFrame>
);
};
export default Faucets;

8
src/PriceBox.tsx
View File

@ -14,7 +14,9 @@ const ETH_FEED_DECIMALS = 8;
// TODO: reduce duplication with useETHUSDOracle
const PriceBox: React.FC = () => {
const { provider } = useContext(RuntimeContext);
const { nativeSymbol } = useChainInfo();
const {
nativeCurrency: { symbol },
} = useChainInfo();
const latestBlock = useLatestBlock(provider);
const maybeOutdated: boolean =
@ -82,9 +84,9 @@ const PriceBox: React.FC = () => {
} font-sans text-xs text-gray-800`}
>
<span
title={`${nativeSymbol}/USD last updated at: ${latestPriceTimestamp?.toString()}`}
title={`${symbol}/USD last updated at: ${latestPriceTimestamp?.toString()}`}
>
{nativeSymbol}: $<span className="font-balance">{latestPrice}</span>
{symbol}: $<span className="font-balance">{latestPrice}</span>
</span>
{latestGasData && (
<>

2
src/api/address-resolver/hardcoded-addresses/11155111.json
View File

@ -1,3 +1,3 @@
{
"0xcFe95817aC44C3f8CE75F1EE6EC1431F586AB5A3": "FaucETH: Hot wallet"
"0xcFe95817aC44C3f8CE75F1EE6EC1431F586AB5A3": "Faucet: FaucETH"
}

26
src/components/Faucet.tsx Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import { NavLink } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFaucetDrip } from "@fortawesome/free-solid-svg-icons/faFaucetDrip";
import { ChecksummedAddress } from "../types";
type FaucetProps = {
address: ChecksummedAddress;
rounded?: boolean;
};
const Faucet: React.FC<FaucetProps> = ({ address, rounded }) => (
<NavLink
className={`self-center flex flex-no-wrap justify-center items-center space-x-1 text-gray-500 focus:outline-none ${
rounded
? "transition-colors transition-shadows bg-gray-200 hover:bg-gray-500 hover:text-gray-200 hover:shadow w-7 h-7 rounded-full text-xs"
: "text-sm"
}`}
to={`/faucets?address=${address}`}
title="Click to go to faucets page"
>
<FontAwesomeIcon icon={faFaucetDrip} size="1x" />
</NavLink>
);
export default React.memo(Faucet);

6
src/components/InternalSelfDestruct.tsx
View File

@ -17,7 +17,9 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
txData,
internalOp,
}) => {
const { nativeSymbol } = useChainInfo();
const {
nativeCurrency: { symbol },
} = useChainInfo();
const toMiner =
txData.confirmedData?.miner !== undefined &&
internalOp.to === txData.confirmedData.miner;
@ -46,7 +48,7 @@ const InternalSelfDestruct: React.FC<InternalSelfDestructProps> = ({
<FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
</span>
<span>
{formatEther(internalOp.value)} {nativeSymbol}
{formatEther(internalOp.value)} {symbol}
</span>
<div className="flex items-baseline">
<span className="text-gray-500">To</span>

6
src/components/InternalTransfer.tsx
View File

@ -18,7 +18,9 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
txData,
internalOp,
}) => {
const { nativeSymbol } = useChainInfo();
const {
nativeCurrency: { symbol },
} = useChainInfo();
const fromMiner =
txData.confirmedData?.miner !== undefined &&
internalOp.from === txData.confirmedData.miner;
@ -44,7 +46,7 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
<FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
</span>
<span>
{formatEther(internalOp.value)} {nativeSymbol}
{formatEther(internalOp.value)} {symbol}
</span>
<div className="flex items-baseline">
<span className="text-gray-500">From</span>

10
src/components/TransactionValue.tsx
View File

@ -22,16 +22,18 @@ const TransactionValue: React.FC<TransactionValueProps> = ({
value,
hideUnit,
}) => {
const { nativeSymbol, nativeDecimals } = useChainInfo();
const formattedValue = formatValue(value, nativeDecimals);
const {
nativeCurrency: { symbol, decimals },
} = useChainInfo();
const formattedValue = formatValue(value, decimals);
return (
<span
className={`text-sm ${value.isZero() ? "text-gray-400" : ""}`}
title={`${formattedValue} ${nativeSymbol}`}
title={`${formattedValue} ${symbol}`}
>
<span className={`font-balance`}>{formattedValue}</span>
{!hideUnit && ` ${nativeSymbol}`}
{!hideUnit && ` ${symbol}`}
</span>
);
};

6
src/components/USDValue.tsx
View File

@ -10,7 +10,9 @@ type USDValueProps = {
};
const USDValue: React.FC<USDValueProps> = ({ value }) => {
const { nativeSymbol } = useChainInfo();
const {
nativeCurrency: { symbol },
} = useChainInfo();
return (
<span className="text-sm">
@ -24,7 +26,7 @@ const USDValue: React.FC<USDValueProps> = ({ value }) => {
.toString()
)}
</span>{" "}
<span className="text-xs text-gray-500">/ {nativeSymbol}</span>
<span className="text-xs text-gray-500">/ {symbol}</span>
</>
) : (
"N/A"

9
src/special/london/BlockRow.tsx
View File

@ -16,7 +16,9 @@ type BlockRowProps = {
};
const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
const { nativeSymbol } = useChainInfo();
const {
nativeCurrency: { symbol },
} = useChainInfo();
const gasTarget = block.gasLimit.div(ELASTICITY_MULTIPLIER);
const burntFees =
block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
@ -55,11 +57,10 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
</div>
</div>
<div className="text-right col-span-2">
{commify(formatEther(totalReward))} {nativeSymbol}
{commify(formatEther(totalReward))} {symbol}
</div>
<div className="text-right col-span-2 line-through text-orange-500">
{commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))}{" "}
{nativeSymbol}
{commify(formatEther(block.gasUsed.mul(block.baseFeePerGas!)))} {symbol}
</div>
<div className="text-right text-gray-400">
<TimestampAge now={now / 1000} timestamp={block.timestamp} />

18
src/transaction/Details.tsx
View File

@ -87,7 +87,9 @@ const Details: React.FC<DetailsProps> = ({
const devMethod = txDesc ? devDoc?.methods[txDesc.signature] : undefined;
const { provider } = useContext(RuntimeContext);
const { nativeName, nativeSymbol } = useChainInfo();
const {
nativeCurrency: { name, symbol },
} = useChainInfo();
const addresses = useMemo(() => {
const _addresses: ChecksummedAddress[] = [];
if (txData.to) {
@ -315,7 +317,7 @@ const Details: React.FC<DetailsProps> = ({
</InfoRow>
)}
<InfoRow title="Value">
<FormattedBalance value={txData.value} /> {nativeSymbol}{" "}
<FormattedBalance value={txData.value} /> {symbol}{" "}
{!txData.value.isZero() && ethUSDPrice && (
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
<ETH2USDValue ethAmount={txData.value} eth2USDValue={ethUSDPrice} />
@ -338,8 +340,7 @@ const Details: React.FC<DetailsProps> = ({
{txData.type === 2 && (
<>
<InfoRow title="Max Priority Fee Per Gas">
<FormattedBalance value={txData.maxPriorityFeePerGas!} />{" "}
{nativeSymbol} (
<FormattedBalance value={txData.maxPriorityFeePerGas!} /> {symbol} (
<FormattedBalance
value={txData.maxPriorityFeePerGas!}
decimals={9}
@ -347,7 +348,7 @@ const Details: React.FC<DetailsProps> = ({
Gwei)
</InfoRow>
<InfoRow title="Max Fee Per Gas">
<FormattedBalance value={txData.maxFeePerGas!} /> {nativeSymbol} (
<FormattedBalance value={txData.maxFeePerGas!} /> {symbol} (
<FormattedBalance value={txData.maxFeePerGas!} decimals={9} /> Gwei)
</InfoRow>
</>
@ -356,7 +357,7 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title="Gas Price">
<div className="flex items-baseline space-x-1">
<span>
<FormattedBalance value={txData.gasPrice} /> {nativeSymbol} (
<FormattedBalance value={txData.gasPrice} /> {symbol} (
<FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
</span>
{sendsEthToMiner && (
@ -407,8 +408,7 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title="Transaction Fee">
<div className="space-y-3">
<div>
<FormattedBalance value={txData.confirmedData.fee} />{" "}
{nativeSymbol}{" "}
<FormattedBalance value={txData.confirmedData.fee} /> {symbol}{" "}
{ethUSDPrice && (
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
<ETH2USDValue
@ -421,7 +421,7 @@ const Details: React.FC<DetailsProps> = ({
{hasEIP1559 && <RewardSplit txData={txData} />}
</div>
</InfoRow>
<InfoRow title={`${nativeName} Price`}>
<InfoRow title={`${name} Price`}>
<USDValue value={ethUSDPrice} />
</InfoRow>
</>

8
src/transaction/RewardSplit.tsx
View File

@ -12,7 +12,9 @@ type RewardSplitProps = {
};
const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
const { nativeSymbol } = useChainInfo();
const {
nativeCurrency: { symbol },
} = useChainInfo();
const paidFees = txData.gasPrice.mul(txData.confirmedData!.gasUsed);
const burntFees = txData.confirmedData!.blockBaseFeePerGas!.mul(
txData.confirmedData!.gasUsed
@ -41,7 +43,7 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
<span className="line-through">
<FormattedBalance value={burntFees} />
</span>{" "}
{nativeSymbol}
{symbol}
</span>
</span>
</div>
@ -57,7 +59,7 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
<FontAwesomeIcon icon={faCoins} size="1x" />
</span>
<span>
<FormattedBalance value={minerReward} /> {nativeSymbol}
<FormattedBalance value={minerReward} /> {symbol}
</span>
</span>
</div>

7
src/transaction/TraceInput.tsx
View File

@ -19,7 +19,9 @@ type TraceInputProps = {
};
const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
const { nativeSymbol } = useChainInfo();
const {
nativeCurrency: { symbol },
} = useChainInfo();
const raw4Bytes = extract4Bytes(t.input);
const fourBytes = use4Bytes(raw4Bytes);
const sigText =
@ -57,8 +59,7 @@ const TraceInput: React.FC<TraceInputProps> = ({ t }) => {
<FunctionSignature callType={t.type} sig={sigText} />
{t.value && !t.value.isZero() && (
<span className="text-red-700 whitespace-nowrap">
{"{"}value: <FormattedBalance value={t.value} />{" "}
{nativeSymbol}
{"{"}value: <FormattedBalance value={t.value} /> {symbol}
{"}"}
</span>
)}

26
src/useChainInfo.ts
View File

@ -3,15 +3,21 @@ import { chainInfoURL } from "./url";
import { OtterscanRuntime } from "./useRuntime";
export type ChainInfo = {
nativeName: string;
nativeSymbol: string;
nativeDecimals: number;
faucets: string[];
nativeCurrency: {
name: string;
symbol: string;
decimals: number;
};
};
export const defaultChainInfo: ChainInfo = {
nativeName: "Ether",
nativeSymbol: "ETH",
nativeDecimals: 18,
faucets: [],
nativeCurrency: {
name: "Ether",
symbol: "ETH",
decimals: 18,
},
};
export const ChainInfoContext = createContext<ChainInfo | undefined>(undefined);
@ -37,13 +43,9 @@ export const useChainInfoFromMetadataFile = (
setChainInfo(defaultChainInfo);
return;
}
const info = await res.json();
setChainInfo({
nativeName: info.nativeCurrency.name,
nativeDecimals: info.nativeCurrency.decimals,
nativeSymbol: info.nativeCurrency.symbol,
});
const info: ChainInfo = await res.json();
setChainInfo(info);
} catch (err) {
// ignore
setChainInfo(defaultChainInfo);