diff --git a/src/components/features/FeatureTable.tsx b/src/components/features/FeatureTable.tsx index b6de132..89b865b 100644 --- a/src/components/features/FeatureTable.tsx +++ b/src/components/features/FeatureTable.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useRef } from 'react'; import type { Chain } from '@/../script/index'; import { chainLogoUrl, classNames } from '@/lib/utils'; import { ExternalLink } from '@/components/layout/ExternalLink'; @@ -9,7 +9,7 @@ import { Copyable } from '@/components/ui/Copyable'; import { evmStackAddresses, type EVMStackResult } from '@/../script/checks/evm-stack-addresses'; import { knownOpcodes } from '@/../script/checks/opcodes'; import { getAddress } from 'viem'; -import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'; +import { ArrowTopRightOnSquareIcon, LinkIcon } from '@heroicons/react/20/solid'; import Image from 'next/image'; import { BASE_DATA_URL, type Feature } from '@/lib/constants'; import { FormattedAddress } from '@/lib/utils'; @@ -140,15 +140,42 @@ const PrecompilesTable = ({ featureData }: { featureData: Record }) => { + const opcodeRefs = useRef>({}); + + useEffect(() => { + const hash = window.location.hash.substring(1); + if (hash && opcodeRefs.current[hash]) { + opcodeRefs.current[hash]?.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + }, []); + return ( {Object.keys(knownOpcodes) .map(Number) .map((op: number) => ( - - - {knownOpcodes[op]} -
{toUppercaseHex(op)}
+ { + opcodeRefs.current[knownOpcodes[op]] = el; + }} + > + +
+ + {knownOpcodes[op]} +
{toUppercaseHex(op)}
+
+ } + Icon={LinkIcon} + textToCopy={`${location.href.replace(location.hash, '')}#${knownOpcodes[op]}`} + // Use negative margin to "center" since the hidden link icon makes it look off-center. + className="ml-2 -mr-2" + /> + {Object.keys(featureData).map((chainId) => { const opcode = featureData[chainId].find((opcode) => Number(opcode.number) === op); diff --git a/src/components/ui/Copyable.tsx b/src/components/ui/Copyable.tsx index 7ec6781..ab44c58 100644 --- a/src/components/ui/Copyable.tsx +++ b/src/components/ui/Copyable.tsx @@ -41,7 +41,7 @@ export const Copyable = ({ }; return ( -
+
{content}