Skip to content

Commit 4359892

Browse files
pandablue0809ihomp
pandablue0809
and
ihomp
authored
/explorer2/ - new page (#537)
* init explorer page * move seo json * add examples --------- Co-authored-by: Viacheslav Bakshaev <[email protected]>
1 parent 3af2856 commit 4359892

File tree

3 files changed

+146
-26
lines changed

3 files changed

+146
-26
lines changed

‎pages/_app.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,8 @@ const MyApp = ({ Component, pageProps }) => {
163163
'/terms-and-conditions',
164164
'/press',
165165
'/404',
166-
'/faucet'
166+
'/faucet',
167+
'/explorer2'
167168
]
168169
if (showTopAds) {
169170
showTopAds = !pagesWithNoTopAdds.includes(pathname) && !pathname.includes('/admin')

‎pages/explorer2.js‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
2+
import { useTranslation } from 'next-i18next'
3+
import Head from 'next/head'
4+
import Link from 'next/link'
5+
6+
import { server, explorerName, nativeCurrency, network } from '../utils'
7+
import { getIsSsrMobile } from '../utils/mobile'
8+
9+
import SEO from '../components/SEO'
10+
import SearchBlock from '../components/Layout/SearchBlock'
11+
import Ads from '../components/Layout/Ads'
12+
import CopyButton from '../components/UI/CopyButton'
13+
import { shortHash } from '../utils/format'
14+
15+
export async function getServerSideProps(context) {
16+
const { locale } = context
17+
return {
18+
props: {
19+
isSsrMobile: getIsSsrMobile(context),
20+
...(await serverSideTranslations(locale, ['common']))
21+
}
22+
}
23+
}
24+
25+
const ldJsonWebsite = {
26+
'@context': 'https://schema.org',
27+
'@type': 'WebSite',
28+
name: nativeCurrency + ' Explorer',
29+
alternateName: [nativeCurrency + ' Explorer', explorerName + ' Explorer', 'Scan ' + nativeCurrency + ' Ledger'],
30+
url: server,
31+
potentialAction: {
32+
'@type': 'SearchAction',
33+
target: {
34+
'@type': 'EntryPoint',
35+
urlTemplate: server + '/explorer/{search_term_string}'
36+
},
37+
'query-input': 'required name=search_term_string'
38+
}
39+
}
40+
41+
const examples = {
42+
mainnet: {
43+
nft: '000A13884B50699E253C5098DEFE3A0872A79D129172F496F5F7E0EA00000532',
44+
amm: '160C6649399D6AF625ED94A66812944BDA1D8993445A503F6B5730DECC7D3767',
45+
txHash: '29C56EB4A9E6C6F16A54968EC7DC8DAE92A95348EC583F2B82A028C3EAE627C0',
46+
txCTID: 'C5DB956000090000',
47+
account: 'rHb9CJAWyB4rj91VRWn96DkukG4bwdtyTh',
48+
payString: ['username$paystring.crypto.com', 'vbuterin$bithomp.com'],
49+
xAddress: 'XVVFXHFdehYhofb7XRWeJYV6kjTEwbq2mLScCiYyDTHKu9E',
50+
username: ['bitstamp', 'vbuterin', 'JoelKatz'],
51+
object: '0802E4E7EACC17414747174474487E9DF24CFDB61DD12C58B09D9EFB42C7F8C8'
52+
},
53+
testnet: {}
54+
}
55+
56+
export default function Explorer({ isSsrMobile, showAds }) {
57+
const { t } = useTranslation()
58+
59+
const shortingHash = (hash) => {
60+
let length = 24
61+
if (isSsrMobile) {
62+
length = 7
63+
}
64+
return shortHash(hash, length)
65+
}
66+
67+
return (
68+
<>
69+
<SEO
70+
title={t('explorer.header.main', { explorerName })}
71+
titleWithNetwork="true"
72+
description={t('explorer.header.sub', { nativeCurrency })}
73+
/>
74+
<Head>
75+
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ldJsonWebsite) }} />
76+
</Head>
77+
78+
<section className="home-section">
79+
<h1 className="center">{t('explorer.header.main', { explorerName })}</h1>
80+
<p className="center">{t('explorer.header.sub', { nativeCurrency })}</p>
81+
<SearchBlock tab="explorer" isSsrMobile={isSsrMobile} />
82+
</section>
83+
84+
<section className="home-section">
85+
<div className="content-text content-center">
86+
<h2 className="center">Examples</h2>
87+
<h2>Account</h2>
88+
<p>
89+
start typing an account address, X-address, PayString, username, service name or web domain in the search
90+
box above.
91+
</p>
92+
<b>Address</b> examples: "rHb9CJ" - start typing it, and we will find the full address for you, or enter a
93+
full address like {examples[network]?.account} <CopyButton text={examples[network]?.account} />
94+
<br />
95+
<br />
96+
<b>Username</b> examples: {examples[network]?.username[0]}, {examples[network]?.username[1]},{' '}
97+
{examples[network]?.username[2]} (start typing and we will find the full usernames){' '}
98+
<Link href="/username">Register your username.</Link>
99+
<br />
100+
<br />
101+
<b>Domain</b> examples: "binance.com", "coinbase.com", "ripple.com" (start typing and we will find accounts
102+
with such domains) <Link href="/domains">Verify your domain.</Link>
103+
<br />
104+
<br />
105+
<b>X-Address</b> example: {shortingHash(examples[network]?.xAddress)}{' '}
106+
<CopyButton text={examples[network]?.xAddress} />
107+
<br />
108+
<br />
109+
<b>PayString</b> example: {examples[network]?.payString[0]}{' '}
110+
<CopyButton text={examples[network]?.payString[0]} />, {examples[network]?.payString[1]}{' '}
111+
<CopyButton text={examples[network]?.payString[1]} /> <Link href="/username">Get your PayString.</Link>
112+
<br />
113+
<br />
114+
<h2>Transaction</h2>
115+
<b>CTID</b> (compact transaction ID) example: {examples[network]?.txCTID}{' '}
116+
<CopyButton text={examples[network]?.txCTID} />
117+
<br />
118+
<br />
119+
<b>Transaction Hash</b> example: {shortingHash(examples[network]?.txHash)}{' '}
120+
<CopyButton text={examples[network]?.txHash} />
121+
<br />
122+
<br />
123+
<h2>NFT, AMM, Object</h2>
124+
<b>NFT</b> example: {shortingHash(examples[network]?.nft)} <CopyButton text={examples[network]?.nft} />
125+
<br />
126+
<br />
127+
<b>AMM</b> example: {shortingHash(examples[network]?.amm)} <CopyButton text={examples[network]?.amm} />
128+
<br />
129+
<br />
130+
<b>Object</b> example: {shortingHash(examples[network]?.object)}{' '}
131+
<CopyButton text={examples[network]?.object} />
132+
<br />
133+
<br />
134+
</div>
135+
</section>
136+
137+
{showAds && <Ads />}
138+
<br />
139+
</>
140+
)
141+
}

‎pages/index.js‎

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
22
import { useTranslation } from 'next-i18next'
33
import { useState, useEffect, useRef } from 'react'
44
import { LogoJsonLd, SocialProfileJsonLd } from 'next-seo'
5-
import Head from 'next/head'
5+
66

77
import { server, explorerName, nativeCurrency, devNet, xahauNetwork, wssServer, ledgerName } from '../utils'
88
import { getIsSsrMobile } from '../utils/mobile'
@@ -34,26 +34,7 @@ export async function getServerSideProps(context) {
3434
}
3535
}
3636

37-
const ldJsonWebsite = {
38-
'@context': 'https://schema.org',
39-
'@type': 'WebSite',
40-
name: nativeCurrency + ' Explorer',
41-
alternateName: [
42-
nativeCurrency + ' Explorer',
43-
explorerName + ' Explorer',
44-
'Scan ' + nativeCurrency + ' Ledger',
45-
'Bithomp ' + explorerName + ' and Services'
46-
],
47-
url: server,
48-
potentialAction: {
49-
'@type': 'SearchAction',
50-
target: {
51-
'@type': 'EntryPoint',
52-
urlTemplate: server + '/explorer/?r={search_term_string}'
53-
},
54-
'query-input': 'required name=search_term_string'
55-
}
56-
}
37+
5738

5839
function sendData(selectedCurrency) {
5940
if (ws && ws.readyState === WebSocket.OPEN) {
@@ -224,10 +205,7 @@ export default function Home({
224205
twitterImage={{
225206
file: 'previews/630x630/index.png'
226207
}}
227-
/>
228-
<Head>
229-
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ldJsonWebsite) }} />
230-
</Head>
208+
/>
231209

232210
<section className="home-section">
233211
<h1 className="center">{t('explorer.header.main', { explorerName })}</h1>

0 commit comments

Comments
 (0)