Reading/Writing Features

front-end-tools/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Unreleased changes
 
+## 3.0.0
+
+- Add reading from smart contract and writing to smart contract feature
+
 ## 2.2.0
 
 - Add warning box if module references in step 1 and step 2 are not the same. Add warning box if embedded schema indicates an input parameter but no input parameter is provided.

front-end-tools/package.json

@@ -1,7 +1,7 @@
 {
     "name": "front-end-tools",
     "packageManager": "[email protected]",
-    "version": "2.2.0",
+    "version": "3.0.0",
     "license": "Apache-2.0",
     "engines": {
         "node": ">=16.x"
@@ -15,6 +15,8 @@
         "react": "^18.1.0",
         "react-bootstrap": "^2.7.4",
         "react-dom": "^18.1.0",
+        "react-hook-form": "^7.47.0",
+        "react-select": "^5.7.7",
         "react-switch": "^7.0.0"
     },
     "devDependencies": {

front-end-tools/src/Root.tsx

@@ -6,7 +6,7 @@ import Main from './Main';
 import { version } from '../package.json';
 
 /**
- * Connect to wallet, setup application state context, and render children when the wallet API is ready for use.
+ * Select mainnet/testnet and display WithWalletConnector component for respective network.
  */
 export default function Root() {
     const [isTestnet, setIsTestnet] = useState(true);
@@ -34,9 +34,17 @@ export default function Root() {
                     <div>Mainnet</div>
                 </div>
                 <br />
-                <WithWalletConnector network={isTestnet ? TESTNET : MAINNET}>
-                    {(props) => <Main walletConnectionProps={props} isTestnet={isTestnet} />}
-                </WithWalletConnector>
+                {/* 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} />}
+                    </WithWalletConnector>
+                )}
             </main>
         </div>
     );

front-end-tools/src/components/Box.tsx

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+
+type BoxProps = PropsWithChildren<{
+    header: string;
+}>;
+
+/**
+ * A component that creates a box with a header and background/borderLine styling.
+ */
+export default function Box(props: BoxProps) {
+    const { children, header } = props;
+
+    return (
+        <fieldset className="box">
+            <legend>{header}</legend>
+            <div className="boxFields">{children}</div>
+            <br />
+        </fieldset>
+    );
+}

front-end-tools/src/components/CCDScanLinks.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+function ccdScanUrl(isTestnet: boolean): string {
+    return `https://${isTestnet ? `testnet.` : ``}ccdscan.io`;
+}
+
+interface TxHashLinkProps {
+    isTestnet: boolean;
+    txHash: string;
+    message: string;
+}
+
+/**
+ * A component that displays the CCDScan link of a transaction hash.
+ * A message at the bottom can be used to add some custom description to the link.
+ * If `isTestnet` is true, the testnet CCDScan link is displayed.
+ * If `isTestnet` is false, the mainnet CCDScan link is displayed.
+ */
+export const TxHashLink = function TxHashLink(props: TxHashLinkProps) {
+    const { isTestnet, txHash, message } = props;
+
+    return (
+        <>
+            <div>
+                Transaction hash:{' '}
+                <a
+                    className="link"
+                    target="_blank"
+                    rel="noreferrer"
+                    href={`${ccdScanUrl(isTestnet)}/?dcount=1&dentity=transaction&dhash=${txHash}`}
+                >
+                    {txHash}
+                </a>
+            </div>
+            <br />
+            <div>
+                CCDScan will take a moment to pick up the above transaction, hence the above link will work in a bit.
+            </div>
+            <div>{message}</div>
+        </>
+    );
+};
+
+interface AccountLinkProps {
+    isTestnet: boolean;
+    account: string;
+}
+
+/**
+ * A component that displays the CCDScan link to an account address.
+ * If `isTestnet` is true, the testnet CCDScan link is displayed.
+ * If `isTestnet` is false, the mainnet CCDScan link is displayed.
+ */
+export const AccountLink = function AccountLink(props: AccountLinkProps) {
+    const { isTestnet, account } = props;
+
+    return (
+        <div>
+            <a
+                className="link"
+                href={`${ccdScanUrl(isTestnet)}/?dcount=1&dentity=account&daddress=${account}`}
+                target="_blank"
+                rel="noreferrer"
+            >
+                {account}
+            </a>
+        </div>
+    );
+};