Skip to content

Commit

Permalink
Adjusted hover clipboard for addresses on blockspace pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@mokelgit
mokelgit committed Aug 27, 2023
1 parent 6719d4a commit 14bea6b
Show file tree
Hide file tree
Showing 2 changed files with 180 additions and 33 deletions.
89 changes: 77 additions & 12 deletions components/layout/CategoryMetrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ export default function CategoryMetrics({
const [selectedType, setSelectedType] = useState("gas_fees_absolute_usd");
const [showUsd, setShowUsd] = useLocalStorage("showUsd", true);
const [showMore, setShowMore] = useState(false);
const [copyContract, setCopyContract] = useState(false);
const isMobile = useMediaQuery("(max-width: 1023px)");

const { theme } = useTheme();
Expand Down Expand Up @@ -1757,7 +1758,7 @@ export default function CategoryMetrics({

return (
<div key={key + "" + sortOrder}>
<div className="flex rounded-full border-forest-100 border-[1px] h-[60px] mt-[7.5px] ">
<div className="flex rounded-full border-forest-100 border-[1px] h-[60px] mt-[7.5px] group">
<div className="flex w-[100%] ml-4 mr-8 items-center ">
<div className="flex items-center h-10 w-[34%] gap-x-[20px] pl-1 ">
<div className=" w-[40px]">
Expand Down Expand Up @@ -1801,19 +1802,46 @@ export default function CategoryMetrics({
...prevHover,
[key]: false,
}));
setCopyContract(false);
}}
>
{sortedContracts[key].name
? `${sortedContracts[key].project_name}: ${sortedContracts[key].name}`
? !contractHover[key]
? `${
sortedContracts[key].project_name
? sortedContracts[key].project_name + ": "
: ""
} ${sortedContracts[key].name}`
: `${
(
sortedContracts[key].project_name +
": " +
sortedContracts[key].name
).length >= 40
? (
sortedContracts[key].project_name +
": " +
sortedContracts[key].name
).substring(0, 38) + "..."
: sortedContracts[key].project_name
? sortedContracts[key].project_name +
": " +
sortedContracts[key].name
: sortedContracts[key].name
}`
: sortedContracts[key].address.substring(0, 6) +
"..." +
sortedContracts[key].address.substring(36, 42)}
sortedContracts[key].address.substring(
36,
42,
)}{" "}
{sortedContracts[key].name ||
sortedContracts[key].address ? (
<div
className={` space-x-2 items-center bg-black/50 px-0.5 rounded-xl text-[12px] ${
contractHover[key] ? "flex" : "hidden"
}`}
className="group-hover:flex hidden space-x-2 items-center bg-black/50 px-0.5 rounded-xl text-[12px]"
onClick={() => {
setCopyContract(true);
}}
>
<div>
{sortedContracts[key].address.substring(
Expand All @@ -1827,7 +1855,11 @@ export default function CategoryMetrics({
)}
</div>
<Icon
icon="feather:copy"
icon={`${
!copyContract
? "feather:copy"
: "feather:check"
}`}
onClick={() => {
navigator.clipboard.writeText(
sortedContracts[key].address,
Expand All @@ -1839,7 +1871,7 @@ export default function CategoryMetrics({
) : null}
</div>
</div>
<div className="flex items-center text-[14px] w-[43%] justify-start h-full ">
<div className="flex items-center text-[14px] w-[43%] justify-start h-full ">
<div className="flex w-[40%] ">
{master &&
master.blockspace_categories.main_categories[
Expand Down Expand Up @@ -1972,19 +2004,48 @@ export default function CategoryMetrics({
...prevHover,
[key]: false,
}));
setCopyContract(false);
}}
>
{sortedContracts[key].name
? `${sortedContracts[key].project_name}: ${sortedContracts[key].name}`
? !contractHover[key]
? `${
sortedContracts[key].project_name
? sortedContracts[key].project_name +
": "
: ""
} ${sortedContracts[key].name}`
: `${
(
sortedContracts[key].project_name +
": " +
sortedContracts[key].name
).length >= 40
? (
sortedContracts[key].project_name +
": " +
sortedContracts[key].name
).substring(0, 38) + "..."
: sortedContracts[key].project_name
? sortedContracts[key].project_name +
": " +
sortedContracts[key].name
: sortedContracts[key].name
}`
: sortedContracts[key].address.substring(0, 6) +
"..." +
sortedContracts[key].address.substring(
36,
42,
)}
)}{" "}
{sortedContracts[key].name ||
sortedContracts[key].address ? (
<div className="group-hover:flex hidden space-x-2 items-center bg-black/50 px-0.5 rounded-xl text-[12px]">
<div
className="group-hover:flex hidden space-x-2 items-center bg-black/50 px-0.5 rounded-xl text-[12px]"
onClick={() => {
setCopyContract(true);
}}
>
<div>
{sortedContracts[key].address.substring(
0,
Expand All @@ -1997,7 +2058,11 @@ export default function CategoryMetrics({
)}
</div>
<Icon
icon="feather:copy"
icon={`${
!copyContract
? "feather:copy"
: "feather:check"
}`}
onClick={() => {
navigator.clipboard.writeText(
sortedContracts[key].address,
Expand Down
Loading

1 comment on commit 14bea6b

@vercel
Copy link

@vercel vercel bot commented on 14bea6b Aug 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

growthepie-frontend – ./

ef-grant-frontend.vercel.app
growthepie-frontend-git-main-orbal-analytics.vercel.app
growthepie-frontend-orbal-analytics.vercel.app
www.growthepie.xyz
growthepie.xyz

Please sign in to comment.