Merge pull request #196 from Concordium/add-support-for-stagenet

Add support for stagenet to scTool
Concordium · Feb 17, 2025 · 081a65b · 081a65b
2 parents eb38d25 + 4f7c563
commit 081a65b
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 78 deletions.
diff --git a/front-end-tools/CHANGELOG.md b/front-end-tools/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 3.2.1
+
+- Add support for stagenet.
+
 ## 3.2.0
 
 - Change to enable reading from smart contract without wallet connection.

diff --git a/front-end-tools/package.json b/front-end-tools/package.json
@@ -1,7 +1,7 @@
 {
     "name": "front-end-tools",
     "packageManager": "[email protected]",
-    "version": "3.2.0",
+    "version": "3.2.1",
     "license": "Apache-2.0",
     "engines": {
         "node": ">=16.x"

diff --git a/front-end-tools/src/Main.tsx b/front-end-tools/src/Main.tsx
@@ -5,8 +5,6 @@ import {
     useConnection,
     useConnect,
     useGrpcClient,
-    TESTNET,
-    MAINNET,
     useWalletConnectorSelector,
 } from '@concordium/react-components';
 import { ModuleReference } from '@concordium/web-sdk';
@@ -23,7 +21,6 @@ import { BROWSER_WALLET, REFRESH_INTERVAL } from './constants';
 
 interface ConnectionProps {
     walletConnectionProps: WalletConnectionProps;
-    isTestnet: boolean;
 }
 
 /** The main component manages the connection to the browser wallet and
@@ -32,16 +29,24 @@ interface ConnectionProps {
  */
 export default function Main(props: ConnectionProps) {
     // Network state
-    const { walletConnectionProps, isTestnet } = props;
-    const { activeConnectorType, activeConnector, activeConnectorError, connectedAccounts, genesisHashes } =
-        walletConnectionProps;
+    const { walletConnectionProps } = props;
+    const {
+        network,
+        activeConnectorType,
+        setActiveConnectorType,
+        activeConnector,
+        activeConnectorError,
+        connectedAccounts,
+        genesisHashes,
+    } = walletConnectionProps;
+
     const { connection, setConnection, account } = useConnection(connectedAccounts, genesisHashes);
     const { isConnected, select } = useWalletConnectorSelector(BROWSER_WALLET, connection, {
         ...walletConnectionProps,
     });
     const { connect, connectError } = useConnect(activeConnector, setConnection);
 
-    const client = useGrpcClient(isTestnet ? TESTNET : MAINNET);
+    const client = useGrpcClient(network);
 
     // Account state
     const [viewErrorAccountInfo, setViewErrorAccountInfo] = useState<string | undefined>(undefined);
@@ -57,22 +62,22 @@ export default function Main(props: ConnectionProps) {
     // eslint-disable-next-line consistent-return
     useEffect(() => {
         if (connection && client && account) {
+            // Call immediately on mount or change of connection, account, or client
+            getAccountInfo(client, account, setAccountBalance, setAccountExistsOnNetwork, setViewErrorAccountInfo);
+
+            // Set up interval to refresh account info
             const interval = setInterval(() => {
                 getAccountInfo(client, account, setAccountBalance, setAccountExistsOnNetwork, setViewErrorAccountInfo);
             }, REFRESH_INTERVAL.asMilliseconds());
-            return () => clearInterval(interval);
-        }
-    }, [connection, account, client]);
 
-    useEffect(() => {
-        if (connection && client && account) {
-            getAccountInfo(client, account, setAccountBalance, setAccountExistsOnNetwork, setViewErrorAccountInfo);
+            return () => clearInterval(interval);
         }
     }, [connection, account, client]);
 
     useEffect(() => {
+        setActiveConnectorType(activeConnectorType);
         select();
-    }, []);
+    }, [network]);
 
     return (
         <main className="container">
@@ -99,13 +104,12 @@ export default function Main(props: ConnectionProps) {
                 {connection && !accountExistsOnNetwork && (
                     <>
                         <div className="alert alert-danger" role="alert">
-                            Please ensure that your browser wallet is connected to network `
-                            {walletConnectionProps.network.name}` and you have an account in that wallet that is
-                            connected to this website.
+                            Please ensure that your browser wallet is connected to network `{network.name}` and you have
+                            an account in that wallet that is connected to this website.
                         </div>
                         <div className="alert alert-danger" role="alert">
-                            Alternatively, if you intend to use `{isTestnet ? 'mainnet' : 'testnet'}`, switch the
-                            network button at the top of this webpage.
+                            Alternatively, if you intend to use another network, switch the network button at the top of
+                            this webpage.
                         </div>
                     </>
                 )}
@@ -120,7 +124,7 @@ export default function Main(props: ConnectionProps) {
                         )}
                         <br />
                         <div className="label">Connected account:</div>
-                        <AccountLink isTestnet={isTestnet} account={account} />
+                        <AccountLink network={network} account={account} />
                         <br />
                         {accountBalance && (
                             <>
@@ -133,7 +137,7 @@ export default function Main(props: ConnectionProps) {
 
                 <div className="col-lg-12">
                     <DeployComponent
-                        isTestnet={isTestnet}
+                        network={network}
                         connection={connection}
                         account={account}
                         client={client}
@@ -142,7 +146,7 @@ export default function Main(props: ConnectionProps) {
                     />
 
                     <InitComponent
-                        isTestnet={isTestnet}
+                        network={network}
                         connection={connection}
                         account={account}
                         client={client}
@@ -151,7 +155,7 @@ export default function Main(props: ConnectionProps) {
 
                     <ReadComponent client={client} />
 
-                    <UpdateComponent isTestnet={isTestnet} connection={connection} account={account} client={client} />
+                    <UpdateComponent network={network} connection={connection} account={account} client={client} />
                     <br />
                     <a
                         href="https://developer.concordium.software/en/mainnet/smart-contracts/guides/on-chain-index.html"

diff --git a/front-end-tools/src/Root.tsx b/front-end-tools/src/Root.tsx
@@ -1,48 +1,36 @@
 import React, { useState } from 'react';
 
-import { WithWalletConnector, TESTNET, MAINNET } from '@concordium/react-components';
-import Switch from 'react-switch';
+import { WithWalletConnector, Network } from '@concordium/react-components';
+import Select from 'react-select';
 import Main from './Main';
 import { version } from '../package.json';
+import { AVAILABLE_NETWORKS } from './constants';
 
 /**
  * Select mainnet/testnet and display WithWalletConnector component for respective network.
  */
 export default function Root() {
-    const [isTestnet, setIsTestnet] = useState(true);
+    const [selectedNetwork, setSelectedNetwork] = useState<Network | undefined>(undefined);
 
     return (
         <div>
             <main className="textCenter">
                 <div className="version">Version: {version}</div>
-                <h1>Deploy and Initialize Smart Contracts on Concordium {isTestnet ? 'Testnet' : 'Mainnet'}</h1>
-                <br />
-                <div className="switch-wrapper">
-                    <div>Testnet</div>
-                    <Switch
-                        onChange={() => {
-                            setIsTestnet(!isTestnet);
+
+                <h1>Deploy and Initialize Smart Contracts on Concordium {selectedNetwork?.name}</h1>
+                <div style={{ width: '33%', margin: '0 auto' }}>
+                    <Select
+                        options={AVAILABLE_NETWORKS}
+                        placeholder="Choose your network"
+                        onChange={(e) => {
+                            setSelectedNetwork(e?.value);
                         }}
-                        onColor="#308274"
-                        offColor="#308274"
-                        onHandleColor="#174039"
-                        offHandleColor="#174039"
-                        checked={!isTestnet}
-                        checkedIcon={false}
-                        uncheckedIcon={false}
                     />
-                    <div>Mainnet</div>
                 </div>
                 <br />
-                {/* Changes to the network value will remove the activeConnector. We switch between components here without changing the network value. */}
-                {isTestnet && (
-                    <WithWalletConnector network={TESTNET}>
-                        {(props) => <Main walletConnectionProps={props} isTestnet={isTestnet} />}
-                    </WithWalletConnector>
-                )}
-                {!isTestnet && (
-                    <WithWalletConnector network={MAINNET}>
-                        {(props) => <Main walletConnectionProps={props} isTestnet={isTestnet} />}
+                {selectedNetwork && (
+                    <WithWalletConnector network={selectedNetwork}>
+                        {(props) => <Main walletConnectionProps={props} />}
                     </WithWalletConnector>
                 )}
             </main>

diff --git a/front-end-tools/src/components/CCDScanLinks.tsx b/front-end-tools/src/components/CCDScanLinks.tsx
@@ -1,11 +1,8 @@
 import React from 'react';
-
-function ccdScanUrl(isTestnet: boolean): string {
-    return `https://${isTestnet ? `testnet.` : ``}ccdscan.io`;
-}
+import { Network } from '@concordium/react-components';
 
 interface TxHashLinkProps {
-    isTestnet: boolean;
+    network: Network;
     txHash: string;
     message: string;
 }
@@ -17,7 +14,7 @@ interface TxHashLinkProps {
  * If `isTestnet` is false, the mainnet CCDScan link is displayed.
  */
 export const TxHashLink = function TxHashLink(props: TxHashLinkProps) {
-    const { isTestnet, txHash, message } = props;
+    const { network, txHash, message } = props;
 
     return (
         <>
@@ -27,7 +24,7 @@ export const TxHashLink = function TxHashLink(props: TxHashLinkProps) {
                     className="link"
                     target="_blank"
                     rel="noreferrer"
-                    href={`${ccdScanUrl(isTestnet)}/?dcount=1&dentity=transaction&dhash=${txHash}`}
+                    href={`${network.ccdScanBaseUrl}/?dcount=1&dentity=transaction&dhash=${txHash}`}
                 >
                     {txHash}
                 </a>
@@ -42,7 +39,7 @@ export const TxHashLink = function TxHashLink(props: TxHashLinkProps) {
 };
 
 interface AccountLinkProps {
-    isTestnet: boolean;
+    network: Network;
     account: string;
 }
 
@@ -52,13 +49,13 @@ interface AccountLinkProps {
  * If `isTestnet` is false, the mainnet CCDScan link is displayed.
  */
 export const AccountLink = function AccountLink(props: AccountLinkProps) {
-    const { isTestnet, account } = props;
+    const { network, account } = props;
 
     return (
         <div>
             <a
                 className="link"
-                href={`${ccdScanUrl(isTestnet)}/?dcount=1&dentity=account&daddress=${account}`}
+                href={`${network.ccdScanBaseUrl}/?dcount=1&dentity=account&daddress=${account}`}
                 target="_blank"
                 rel="noreferrer"
             >

diff --git a/front-end-tools/src/components/DeployComponent.tsx b/front-end-tools/src/components/DeployComponent.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Alert, Button, Form } from 'react-bootstrap';
 
-import { WalletConnection } from '@concordium/react-components';
+import { WalletConnection, Network } from '@concordium/react-components';
 import {
     ModuleReference,
     ConcordiumGRPCClient,
@@ -23,7 +23,7 @@ interface ConnectionProps {
     account: string | undefined;
     connection: WalletConnection | undefined;
     client: ConcordiumGRPCClient | undefined;
-    isTestnet: boolean;
+    network: Network;
     setModuleReferenceCalculated: (moduleReferenceCalculated: ModuleReference.Type) => void;
     moduleReferenceCalculated: ModuleReference.Type | undefined;
 }
@@ -33,7 +33,7 @@ interface ConnectionProps {
  *  This components creates a `DeployModule` transaction.
  */
 export default function DeployComponenet(props: ConnectionProps) {
-    const { isTestnet, client, connection, account, setModuleReferenceCalculated, moduleReferenceCalculated } = props;
+    const { network, client, connection, account, setModuleReferenceCalculated, moduleReferenceCalculated } = props;
 
     type FormType = {
         file: FileList | undefined;
@@ -235,7 +235,7 @@ export default function DeployComponenet(props: ConnectionProps) {
             {txHashDeploy && (
                 <TxHashLink
                     txHash={txHashDeploy}
-                    isTestnet={isTestnet}
+                    network={network}
                     message="The outcome of the transaction will be displayed below."
                 />
             )}

diff --git a/front-end-tools/src/components/InitComponent.tsx b/front-end-tools/src/components/InitComponent.tsx
@@ -3,7 +3,7 @@ import { useForm, useWatch } from 'react-hook-form';
 import Select from 'react-select';
 import { Alert, Button, Form, Row } from 'react-bootstrap';
 
-import { WalletConnection } from '@concordium/react-components';
+import { WalletConnection, Network } from '@concordium/react-components';
 import {
     ModuleReference,
     TransactionKindString,
@@ -27,7 +27,6 @@ import {
     REFRESH_INTERVAL,
     INPUT_PARAMETER_TYPES_OPTIONS,
     REG_MODULE_REF,
-    MODULE_REFERENCE_PLACEHOLDER,
     OPTIONS_DERIVE_FROM_MODULE_REFERENCE,
     DO_NOT_DERIVE,
     DERIVE_FROM_STEP_1,
@@ -36,14 +35,15 @@ import {
     INPUT_PARAMETER_TYPE_OBJECT,
     INPUT_PARAMETER_TYPE_STRING,
     INPUT_PARAMETER_TYPE_NUMBER,
+    MODULE_REFERENCE_PLACEHOLDER_MAP,
 } from '../constants';
 import { getModuleSource } from '../reading_from_blockchain';
 
 interface ConnectionProps {
     account: string | undefined;
     client: ConcordiumGRPCClient | undefined;
     connection: WalletConnection | undefined;
-    isTestnet: boolean;
+    network: Network;
     moduleReferenceCalculated: undefined | ModuleReference.Type;
 }
 
@@ -52,7 +52,7 @@ interface ConnectionProps {
  * This components creates an `InitContract` transaction.
  */
 export default function InitComponent(props: ConnectionProps) {
-    const { account, client, connection, isTestnet, moduleReferenceCalculated } = props;
+    const { account, client, connection, network, moduleReferenceCalculated } = props;
 
     type FormType = {
         cCDAmount: number;
@@ -94,13 +94,21 @@ export default function InitComponent(props: ConnectionProps) {
     const [moduleReferenceLengthError, setModuleReferenceLengthError] = useState<string | undefined>(undefined);
     const [schemaError, setSchemaError] = useState<string | undefined>(undefined);
 
+    const placeholder = MODULE_REFERENCE_PLACEHOLDER_MAP.get(network.name);
+    if (!placeholder) {
+        // eslint-disable-next-line no-console
+        console.error(`Internal Error: Module reference placeholder should be set for network '${network.name}'.`);
+        return <div />;
+    }
+    const moduleReferencePlaceholder = ModuleReference.fromHexString(placeholder);
+
     const [isModuleReferenceAlreadyDeployed, setIsModuleReferenceAlreadyDeployed] = useState(false);
 
     const [txHash, setTxHash] = useState<string | undefined>(undefined);
 
     const [schema, setSchema] = useState<string | undefined>(undefined);
     const [moduleReference, setModuleReference] = useState<ModuleReference.Type | undefined>(
-        ModuleReference.fromHexString(MODULE_REFERENCE_PLACEHOLDER)
+        moduleReferencePlaceholder
     );
 
     const [smartContractIndex, setSmartContractIndex] = useState<string | undefined>(undefined);
@@ -404,7 +412,7 @@ export default function InitComponent(props: ConnectionProps) {
                     <Form.Group className="col-md-4 mb-3">
                         <Form.Label> Module Reference</Form.Label>
                         <Form.Control
-                            defaultValue={MODULE_REFERENCE_PLACEHOLDER}
+                            defaultValue={moduleReferencePlaceholder.moduleRef}
                             disabled={deriveFromModuleReference === DERIVE_FROM_STEP_1.value}
                             {...form.register('moduleReferenceString', {
                                 required: true,
@@ -720,7 +728,7 @@ export default function InitComponent(props: ConnectionProps) {
                 {txHash && (
                     <TxHashLink
                         txHash={txHash}
-                        isTestnet={isTestnet}
+                        network={network}
                         message="The smart contract index will appear below once the transaction is finalized."
                     />
                 )}