diff --git a/src/components/ChainSelect/index.tsx b/src/components/ChainSelect/index.tsx index 8fe28b4..84aa8eb 100644 --- a/src/components/ChainSelect/index.tsx +++ b/src/components/ChainSelect/index.tsx @@ -9,6 +9,7 @@ type ChainSelectProps = { handleChainIdChange: SelectSearchProps["onChange"]; id?: string; availableChains?: number[]; + transparent?: boolean; }; export default function ChainSelect({ @@ -16,6 +17,7 @@ export default function ChainSelect({ handleChainIdChange, id, availableChains, + transparent, }: ChainSelectProps) { const { sourcifyChains } = useContext(Context); @@ -42,6 +44,7 @@ export default function ChainSelect({ filterOptions={fuzzySearch} emptyMessage="Couldn't fetch Sourcify chains" placeholder="Choose chain" + className={`select-search ${transparent ? "transparent-select" : ""}`} /> ); } diff --git a/src/components/ChainSelect/style.css b/src/components/ChainSelect/style.css index ebbbf6e..32b0f91 100644 --- a/src/components/ChainSelect/style.css +++ b/src/components/ChainSelect/style.css @@ -47,6 +47,13 @@ padding-right: 1rem /* 16px */; height: 2.75rem; } + +.transparent-select .select-search__input { + border: none; + background-color: transparent; + outline: none; +} + .select-search__input:disabled { opacity: 0.3; } @@ -89,7 +96,7 @@ .select-search__option, .select-search__not-found { display: block; - height: 36px; + height: 42px !important; width: 100%; padding: 0 16px; --tw-bg-opacity: 1; @@ -99,6 +106,7 @@ font-size: 14px; text-align: left; cursor: pointer; + overflow: hidden; } .select-search--multiple .select-search__option { diff --git a/src/pages/LandingPage/ChartSection.tsx b/src/pages/LandingPage/ChartSection.tsx index cb728de..c6cb8e1 100644 --- a/src/pages/LandingPage/ChartSection.tsx +++ b/src/pages/LandingPage/ChartSection.tsx @@ -48,9 +48,9 @@ const Chart = ({ stats }: { stats: statsType | undefined }) => { const keyInt = parseInt(key); return { name: - Object.keys(sourcifyChainMap).length > 0 && - sourcifyChainMap[keyInt] && - (sourcifyChainMap[keyInt]?.name || sourcifyChainMap[keyInt].title), // Shorter name takes precedence + sourcifyChainMap?.[keyInt] && + (sourcifyChainMap[keyInt]?.name || sourcifyChainMap[keyInt].title) + + ` (${keyInt})`, // Shorter name takes precedence fullMatch: stats[key]?.full_match ?? 0, partialMatch: stats[key]?.partial_match ?? 0, total: (stats[key]?.full_match ?? 0) + (stats[key]?.partial_match ?? 0), @@ -89,11 +89,14 @@ const Chart = ({ stats }: { stats: statsType | undefined }) => { return (

- {total.toLocaleString()} contracts verified on Sourcify so far! + {total.toLocaleString()} +

+

+ contracts verified on Sourcify so far!

- + {getFormattedChainData(selectedChain).total.toLocaleString()}{" "} contracts verified on @@ -103,6 +106,7 @@ const Chart = ({ stats }: { stats: statsType | undefined }) => { setSelectedChain(newChainId.toString()) } availableChains={sourcifyChains.map((chain) => chain.chainId)} + transparent />