docs/website/src/supportedNetworks/components/NetworkPage.tsx at a21676cc7a8356af3a08cdd8af0d56faae199e5b · graphprotocol/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { NetworkType } from '@pinax/graph-networks-registry'
import Head from 'next/head'
import { useData } from 'nextra/hooks'
import { memo } from 'react'

import { ExperimentalCopyButton, ExperimentalDescriptionList, ExperimentalLink, Skeleton } from '@edgeandnode/gds'
import { NetworkIcon } from '@edgeandnode/go'

import { useI18n } from '@/i18n'

import { getIconVariant, type Network, shouldShowSkeleton } from '../utils'

import NetworkDetailsPage from './NetworkDetailsPage'

interface NetworkPageProps {
  network?: Network
}

export const NetworkPage = memo(({ network }: NetworkPageProps) => {
  const data = useData()
  const contextNetwork = data?.ssg?.network || data?.network
  const networkData: Network = network ||
    contextNetwork || {
      id: '',
      fullName: '',
      networkType: NetworkType.Mainnet,
      caip2Id: '',
    }

  const { t } = useI18n()

  return (
    <>
      <Head>
        <title>{networkData.fullName}</title>
      </Head>
      <div className="col-[container]">
        <div className="mb-5 mt-12 flex flex-col gap-3">
          {networkData.caip2Id ? (
            <div className="shrink-0">
              {shouldShowSkeleton(networkData.id) ? (
                <Skeleton borderRadius="FULL" height="40px" width="40px" />
              ) : (
                <NetworkIcon
                  variant={getIconVariant(networkData.id)}
                  caip2Id={networkData.caip2Id as any}
                  size={10}
                  className="h-10 w-10"
                />
              )}
            </div>
          ) : null}
          <h2 className="leading-tight mt-0 text-24 text-white">{networkData.fullName}</h2>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div className="col-span-2">
            <div>
              <ExperimentalDescriptionList size="medium">
                <ExperimentalDescriptionList.Item label={t('index.supportedNetworks.type')}>
                  {networkData.networkType}
                </ExperimentalDescriptionList.Item>
                {networkData.graphNode?.protocol && (
                  <ExperimentalDescriptionList.Item label={t('index.supportedNetworks.protocol')}>
                    {networkData.graphNode.protocol}
                  </ExperimentalDescriptionList.Item>
                )}
                {networkData.id && (
                  <ExperimentalDescriptionList.Item
                    variant="mono"
                    label={t('index.supportedNetworks.identifier')}
                    action={<ExperimentalCopyButton size="small" variant="naked" value={networkData.id} />}
                  >
                    {networkData.id}
                  </ExperimentalDescriptionList.Item>
                )}
                {networkData.caip2Id && (
                  <ExperimentalDescriptionList.Item
                    variant="mono"
                    label={t('index.supportedNetworks.chainId')}
                    action={<ExperimentalCopyButton size="small" variant="naked" value={networkData.caip2Id} />}
                  >
                    {networkData.caip2Id}
                  </ExperimentalDescriptionList.Item>
                )}
                {networkData.nativeToken && (
                  <ExperimentalDescriptionList.Item label={t('index.supportedNetworks.nativeCurrency')}>
                    {networkData.nativeToken}
                  </ExperimentalDescriptionList.Item>
                )}
                {networkData.docsUrl && (
                  <ExperimentalDescriptionList.Item label={t('index.supportedNetworks.docs')}>
                    <ExperimentalLink className="text-14" href={networkData.docsUrl} target="_blank">
                      {networkData.docsUrl}
                    </ExperimentalLink>
                  </ExperimentalDescriptionList.Item>
                )}
              </ExperimentalDescriptionList>
            </div>
          </div>
        </div>

        <hr />

        <NetworkDetailsPage network={networkData} />
      </div>
    </>
  )
})

NetworkPage.displayName = 'NetworkPage'