@@ -4,6 +4,9 @@ import bashLang from "react-syntax-highlighter/dist/esm/languages/prism/bash";
44import javascriptLang from "react-syntax-highlighter/dist/esm/languages/prism/javascript" ;
55import codeStyle from "react-syntax-highlighter/dist/esm/styles/prism/dracula" ;
66import { motion , useInView } from "framer-motion" ;
7+ import integrationsData from "../../data/integrations.json" ;
8+ import selfHostedInstancesData from "../../data/selfHostedInstances.json" ;
9+ import Button from "../../components/Button" ;
710
811// Register languages
912SyntaxHighlighter . registerLanguage ( "bash" , bashLang ) ;
@@ -13,6 +16,8 @@ export default function Tooling() {
1316 const [ activeTab , setActiveTab ] = useState ( "foundry" ) ;
1417 const integrationsRef = useRef ( null ) ;
1518 const areIntegrationsInView = useInView ( integrationsRef , { once : true } ) ;
19+ const selfHostedRef = useRef ( null ) ;
20+ const areSelfHostedInView = useInView ( selfHostedRef , { once : true } ) ;
1621 const [ displayedCode , setDisplayedCode ] = useState ( "" ) ;
1722 const codeRef = useRef ( null ) ;
1823 const isCodeInView = useInView ( codeRef , { once : true } ) ;
@@ -22,58 +27,8 @@ export default function Tooling() {
2227 const areTabsInView = useInView ( tabsRef , { once : true } ) ;
2328
2429 const tabs = [ "foundry" , "hardhat" , "remix" ] ;
25- const integrations = [
26- {
27- name : "Blockscout" ,
28- url : "https://docs.blockscout.com/devs/verification/contracts-verification-via-sourcify" ,
29- logo : "/blockscout.png" ,
30- } ,
31- {
32- name : "Otterscan" ,
33- url : "https://docs.otterscan.io/contract-verification/sourcify/" ,
34- logo : "/otterscan.jpg" ,
35- } ,
36- {
37- name : "Wagmi" ,
38- url : "https://wagmi.sh/cli/api/plugins/sourcify#sourcify" ,
39- logo : "/wagmi.png" ,
40- } ,
41- {
42- name : "DexGuru Explorer" ,
43- url : "https://ethereum.dex.guru/verifyContract" ,
44- logo : "/dexGuru.svg" ,
45- } ,
46- {
47- name : "Chainlens" ,
48- url : "https://www.chainlens.com/documentation-articles/source-code-verification" ,
49- logo : "/chainlens.png" ,
50- } ,
51- {
52- name : "Hedera Hashscan" ,
53- url : "https://hedera.com/blog/smart-contract-verification-on-hedera" ,
54- logo : "/hashscan.webp" ,
55- } ,
56- {
57- name : "BuildBear" ,
58- url : "https://www.buildbear.io/blogs/sourcify_plugin" ,
59- logo : "/buildbear.jpg" ,
60- } ,
61- {
62- name : "Avalanche Explorer" ,
63- url : "https://support.avax.network/en/articles/6333375-explorer-how-do-i-manage-smart-contracts" ,
64- logo : "/avalanche.svg" ,
65- } ,
66- {
67- name : "Graph CLI" ,
68- url : "https://x.com/graphprotocol/status/1897291358114897929" ,
69- logo : "/graph-dev.jpg" ,
70- } ,
71- {
72- name : "Wake" ,
73- url : "https://github.com/Ackee-Blockchain/wake/releases/tag/v4.14.0" ,
74- logo : "/wake-logo.png" ,
75- } ,
76- ] ;
30+ const integrations = integrationsData ;
31+ const selfHostedInstances = selfHostedInstancesData ;
7732
7833 const foundryExample = `# Deploy and verify
7934$ forge create --rpc-url <rpc-url> --private-key <private-key> src/MyContract.sol:MyContract --verify --verifier sourcify
@@ -317,6 +272,50 @@ $ npx hardhat verify --network mainnet 0x1F98431c8aD98523631AE4a59f267346ea31F98
317272 ) ) }
318273 </ div >
319274 </ div >
275+
276+ < div className = "text-center mx-4" >
277+ < h2 className = "text-4xl md:text-6xl font-bold text-ceruleanBlue-500 mb-4" > Self-hosting</ h2 >
278+ < p className = "text-base md:text-lg text-gray-600 mb-12" >
279+ Sourcify is open-source and for self-hosting. Here are some public instances we are aware of:
280+ </ p >
281+ < div className = "flex flex-wrap justify-center gap-2 md:gap-8 mt-12 mx-2" ref = { selfHostedRef } >
282+ { selfHostedInstances
283+ . sort ( ( a , b ) => a . name . localeCompare ( b . name ) )
284+ . map ( ( instance , index ) => (
285+ < motion . a
286+ initial = { { opacity : 0 } }
287+ animate = {
288+ areSelfHostedInView
289+ ? {
290+ opacity : 1 ,
291+ y : [ 0 , 0 , - 20 ] ,
292+ transition : { duration : 0.6 , delay : index * 0.1 } ,
293+ }
294+ : { opacity : 0 }
295+ }
296+ whileHover = { { scale : 1.1 , transition : { duration : 0.1 , delay : 0 } } }
297+ href = { instance . url + "/health" }
298+ target = "_blank"
299+ rel = "noopener noreferrer"
300+ key = { instance . name }
301+ className = "w-16 flex flex-col items-center text-center"
302+ >
303+ < img src = { instance . logo } alt = { instance . name } className = "w-10 h-10 md:w-14 md:h-14 rounded-full" />
304+ < div className = "text-gray-700 text-xs md:text-sm mt-1 text-wrap" > { instance . name } </ div >
305+ </ motion . a >
306+ ) ) }
307+ </ div >
308+ < div className = "mb-8 mt-4" >
309+ < div className = "text-gray-500 mb-2 text-sm" > Are you running a self-hosted instance?</ div >
310+ < a
311+ href = "https://github.com/ethereum/sourcify/issues/new?template=self-hosted-instance.md"
312+ target = "_blank"
313+ rel = "noopener noreferrer"
314+ >
315+ < Button className = "font-semibold" > Add your instance</ Button >
316+ </ a >
317+ </ div >
318+ </ div >
320319 </ section >
321320 ) ;
322321}
0 commit comments