@@ -2,6 +2,7 @@ import React from "react";
22import Tabs from "@theme/Tabs" ;
33import TabItem from "@theme/TabItem" ;
44import Link from "@docusaurus/Link" ;
5+ import CopyButton from "@site/src/components/CopyButton" ;
56
67import { operationalParameters } from "./operational-parameters" ;
78
@@ -32,6 +33,20 @@ export default function OperationalParameters({
3233 type OperationalParameter =
3334 ( typeof operationalParameters ) [ number ] [ "parameters" ] [ number ] ;
3435 type Network = "songbird" | "coston" | "coston2" | "flare" ;
36+ type ValueType = "text" | "address" ;
37+
38+ const networkAddressExplorerPrefix : Record < Network , string > = {
39+ flare : "https://flare-explorer.flare.network/address/" ,
40+ coston2 : "https://coston2-explorer.flare.network/address/" ,
41+ songbird : "https://songbird-explorer.flare.network/address/" ,
42+ coston : "https://coston-explorer.flare.network/address/" ,
43+ } ;
44+ const networkExplorerLabel : Record < Network , string > = {
45+ flare : "Flare Mainnet" ,
46+ coston2 : "Flare Testnet Coston2" ,
47+ songbird : "Songbird Canary-Network" ,
48+ coston : "Songbird Testnet Coston" ,
49+ } ;
3550
3651 function ParameterTable ( {
3752 network,
@@ -46,6 +61,8 @@ export default function OperationalParameters({
4661 hideBtc ?: boolean ;
4762 hideDoge ?: boolean ;
4863 } ) {
64+ const isAddress = ( value : string ) => / ^ 0 x [ a - f A - F 0 - 9 ] { 40 } $ / . test ( value ) ;
65+
4966 const getNetworkValue = (
5067 parameter : OperationalParameter ,
5168 asset : "xrp" | "btc" | "doge" ,
@@ -54,6 +71,38 @@ export default function OperationalParameters({
5471 return typeof value === "string" && value . trim ( ) . length > 0 ? value : "-" ;
5572 } ;
5673
74+ const getValueType = ( parameter : OperationalParameter ) : ValueType =>
75+ "valueType" in parameter && parameter . valueType === "address"
76+ ? "address"
77+ : "text" ;
78+
79+ const renderValueCell = (
80+ parameter : OperationalParameter ,
81+ asset : "xrp" | "btc" | "doge" ,
82+ ) => {
83+ const value = getNetworkValue ( parameter , asset ) ;
84+ const valueType = getValueType ( parameter ) ;
85+
86+ if ( valueType === "address" && value !== "-" && isAddress ( value ) ) {
87+ const explorerNetwork = networkExplorerLabel [ network ] ;
88+ return (
89+ < >
90+ < Link
91+ href = { `${ networkAddressExplorerPrefix [ network ] } ${ value } ` }
92+ target = "_blank"
93+ rel = "noopener noreferrer"
94+ title = { `Open address in ${ explorerNetwork } explorer` }
95+ >
96+ < code > { value } </ code >
97+ </ Link > { " " }
98+ < CopyButton textToCopy = { value } />
99+ </ >
100+ ) ;
101+ }
102+
103+ return < span dangerouslySetInnerHTML = { { __html : value } } /> ;
104+ } ;
105+
57106 return (
58107 < table >
59108 < thead >
@@ -112,27 +161,9 @@ export default function OperationalParameters({
112161 < br />
113162 { parameter . description }
114163 </ td >
115- { ! hideXrp && (
116- < td
117- dangerouslySetInnerHTML = { {
118- __html : getNetworkValue ( parameter , "xrp" ) ,
119- } }
120- />
121- ) }
122- { ! hideBtc && (
123- < td
124- dangerouslySetInnerHTML = { {
125- __html : getNetworkValue ( parameter , "btc" ) ,
126- } }
127- />
128- ) }
129- { ! hideDoge && (
130- < td
131- dangerouslySetInnerHTML = { {
132- __html : getNetworkValue ( parameter , "doge" ) ,
133- } }
134- />
135- ) }
164+ { ! hideXrp && < td > { renderValueCell ( parameter , "xrp" ) } </ td > }
165+ { ! hideBtc && < td > { renderValueCell ( parameter , "btc" ) } </ td > }
166+ { ! hideDoge && < td > { renderValueCell ( parameter , "doge" ) } </ td > }
136167 </ tr >
137168 ) ) }
138169 </ tbody >
0 commit comments