docs/components/MainnetConfig.tsx at db20b62eca40d49dc61ff6e0348f2765e32c19a8 · tangle-network/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
112
113
114
115
116
117
118
119
120
import Link from "next/link";
import styles from "./NetworkConfig.module.css";

type NetworkCardProps = {
  cardTitle: string;
  network: string;
  type: string;
  symbol: string;
  decimals: number;
  chainId: string;
  rpcUrl: string;
  wssUrl: string;
  wssUrl2: string;
  explorerUrls: { name: string; url: string }[];
  fundingInfo: { url: string };
};

const NetworkCard = ({
  cardTitle,
  network,
  type,
  symbol,
  decimals,
  chainId,
  rpcUrl,
  wssUrl,
  wssUrl2,
  explorerUrls,
}: NetworkCardProps) => {
  return (
    <div className={styles.networkCard}>
      <div className={styles.networkType}>
        {type} {cardTitle}
      </div>
      <div className={styles.titleContainer}>
        <h2 className={styles.networkTitle}>{network}</h2>
      </div>
      <table className={styles.table}>
        <tbody>
          <tr className={styles.tableRow}>
            <th className={styles.tableHeader}>Network Type</th>
            <td className={styles.tableCell}>{type}</td>
          </tr>
          <tr className={styles.tableRow}>
            <th className={styles.tableHeader}>Native Asset Symbol</th>
            <td className={styles.tableCell}>{symbol}</td>
          </tr>
          <tr className={styles.tableRow}>
            <th className={styles.tableHeader}>Native Asset Decimals</th>
            <td className={styles.tableCell}>{decimals}</td>
          </tr>
          <tr className={styles.tableRow}>
            <th className={styles.tableHeader}>Chain ID</th>
            <td className={styles.tableCell}>{chainId}</td>
          </tr>
          <tr className={styles.tableRow}>
            <th className={styles.tableHeader}>Public RPC URL</th>
            <td className={styles.tableCell}>
              <Link href={rpcUrl}>{rpcUrl}</Link>
            </td>
          </tr>
          <tr className={styles.tableRow}>
            <th className={styles.tableHeader}>Public WSS URL</th>
            <td className={styles.tableCell}>
              <Link href={wssUrl}>{wssUrl}</Link>
              <Link href={wssUrl2}>{wssUrl2}</Link>
            </td>
          </tr>
          {explorerUrls.map((explorer, index) => (
            <tr key={index}>
              <th className={styles.tableHeader}>
                {index === 0 ? "Interfaces & Explorers" : ""}
              </th>
              <td className={styles.tableCell}>
                <Link href={explorer.url}>{explorer.name}</Link>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

const NetworkInfo = () => {
  // Define the network details here or fetch from an API
  const networks = [
    {
      cardTitle: "Network Information",
      network: "Tangle Network",
      type: "Mainnet",
      symbol: "TNT",
      decimals: 18,
      chainId: "5845",
      rpcUrl: "https://rpc.tangle.tools",
      wssUrl: "wss://rpc.tangle.tools",
      wssUrl2: "wss://tangle-mainnet-rpc.n.dwellir.com/",
      explorerUrls: [
        { name: "BlockScout", url: "https://explorer.tangle.tools" },
        {
          name: "PolkadotJS",
          url: "https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Frpc.tangle.tools#/explorer",
        },
      ],
      fundingInfo: {
        url: "https://discord.gg/PQDYv5GT",
      },
    },
  ];

  return (
    <div className={styles.networkInfo}>
      {networks.map((network, index) => (
        <NetworkCard key={index} {...network} />
      ))}
    </div>
  );
};

export default NetworkInfo;