docs(examples/cbdc): migrate frontend to Typescript

* Closes hyperledger-cacti#2817 * Depends on hyperledger-cacti#2912 Signed-off-by: André Augusto <[email protected]>
outSH · Dec 5, 2023 · 358861d · 358861d
1 parent 6a27b7c
commit 358861d
Show file tree

Hide file tree

Showing 35 changed files with 806 additions and 730 deletions.
diff --git a/examples/cactus-example-cbdc-bridging-backend/package.json b/examples/cactus-example-cbdc-bridging-backend/package.json
@@ -46,7 +46,7 @@
   "scripts": {
     "build:dev:backend:postbuild": "mkdir -p ./dist/lib/fabric-contracts && cp -r ./src/fabric-contracts/* ./dist/lib/fabric-contracts/",
     "solidity": "hardhat compile",
-    "start": "CONFIG_FILE=./example-config.json node dist/lib/main/typescript/cbdc-bridging-app-cli.js",
+    "start": "node dist/lib/main/typescript/cbdc-bridging-app-cli.js dotenv_config_path=./process.env",
     "test": "nyc cucumber-js ./src/test/typescript/cucumber/features/*.feature --require-module ts-node/register --require './src/test/typescript/cucumber/*/*.ts'",
     "watch": "npm-watch",
     "webpack": "npm-run-all webpack:dev",

diff --git a/examples/cactus-example-cbdc-bridging-backend/src/main/typescript/cbdc-bridging-app.ts b/examples/cactus-example-cbdc-bridging-backend/src/main/typescript/cbdc-bridging-app.ts
@@ -18,12 +18,12 @@ import {
 import {
   Configuration,
   DefaultApi as OdapApi,
-} from "@hyperledger/cactus-plugin-odap-hermes/src/main/typescript/index";
+  IOdapPluginKeyPair,
+} from "@hyperledger/cactus-plugin-odap-hermes";
 import { PluginKeychainMemory } from "@hyperledger/cactus-plugin-keychain-memory";
 import { CbdcBridgingAppDummyInfrastructure } from "./infrastructure/cbdc-bridging-app-dummy-infrastructure";
 import { DefaultApi as FabricApi } from "@hyperledger/cactus-plugin-ledger-connector-fabric";
 import { DefaultApi as BesuApi } from "@hyperledger/cactus-plugin-ledger-connector-besu";
-import { IOdapPluginKeyPair } from "@hyperledger/cactus-plugin-odap-hermes/src/main/typescript/gateway/plugin-odap-gateway";
 import { DefaultApi as IpfsApi } from "@hyperledger/cactus-plugin-object-store-ipfs";
 import { FabricOdapGateway } from "./odap-extension/fabric-odap-gateway";
 import { BesuOdapGateway } from "./odap-extension/besu-odap-gateway";

diff --git a/...ging-backend/src/main/typescript/infrastructure/cbdc-bridging-app-dummy-infrastructure.ts b/...ging-backend/src/main/typescript/infrastructure/cbdc-bridging-app-dummy-infrastructure.ts
@@ -38,7 +38,7 @@ import { PluginRegistry } from "@hyperledger/cactus-core";
 import { PluginObjectStoreIpfs } from "@hyperledger/cactus-plugin-object-store-ipfs";
 import AssetReferenceContractJson from "../../../solidity/asset-reference-contract/AssetReferenceContract.json";
 import CBDCcontractJson from "../../../solidity/cbdc-erc-20/CBDCcontract.json";
-import { IOdapPluginKeyPair } from "@hyperledger/cactus-plugin-odap-hermes/src/main/typescript/gateway/plugin-odap-gateway";
+import { IOdapPluginKeyPair } from "@hyperledger/cactus-plugin-odap-hermes";
 import { FabricOdapGateway } from "../odap-extension/fabric-odap-gateway";
 import { BesuOdapGateway } from "../odap-extension/besu-odap-gateway";
 import { PluginImportType } from "@hyperledger/cactus-core-api";

diff --git a/...tus-example-cbdc-bridging-backend/src/main/typescript/odap-extension/besu-odap-gateway.ts b/...tus-example-cbdc-bridging-backend/src/main/typescript/odap-extension/besu-odap-gateway.ts
@@ -10,8 +10,8 @@ import {
 import {
   IOdapPluginKeyPair,
   PluginOdapGateway,
-} from "@hyperledger/cactus-plugin-odap-hermes/src/main/typescript/gateway/plugin-odap-gateway";
-import { SessionDataRollbackActionsPerformedEnum } from "@hyperledger/cactus-plugin-odap-hermes/src/main/typescript";
+} from "@hyperledger/cactus-plugin-odap-hermes";
+import { SessionDataRollbackActionsPerformedEnum } from "@hyperledger/cactus-plugin-odap-hermes";
 import { ClientHelper } from "./client-helper";
 import { ServerHelper } from "./server-helper";
 

diff --git a/.../cactus-example-cbdc-bridging-backend/src/main/typescript/odap-extension/client-helper.ts b/.../cactus-example-cbdc-bridging-backend/src/main/typescript/odap-extension/client-helper.ts
@@ -2,9 +2,9 @@ import { SHA256 } from "crypto-js";
 import {
   PluginOdapGateway,
   TransferInitializationV1Request,
-} from "@hyperledger/cactus-plugin-odap-hermes/src/main/typescript";
-import { ClientGatewayHelper } from "@hyperledger/cactus-plugin-odap-hermes/src/main/typescript/gateway/client/client-helper";
-import { OdapMessageType } from "@hyperledger/cactus-plugin-odap-hermes/src/main/typescript/gateway/plugin-odap-gateway";
+  ClientGatewayHelper
+} from "@hyperledger/cactus-plugin-odap-hermes";
+import { OdapMessageType } from "@hyperledger/cactus-plugin-odap-hermes";
 import { FabricOdapGateway } from "./fabric-odap-gateway";
 import { BesuOdapGateway } from "./besu-odap-gateway";
 

diff --git a/...s-example-cbdc-bridging-backend/src/main/typescript/odap-extension/fabric-odap-gateway.ts b/...s-example-cbdc-bridging-backend/src/main/typescript/odap-extension/fabric-odap-gateway.ts
@@ -10,8 +10,8 @@ import {
 import {
   IOdapPluginKeyPair,
   PluginOdapGateway,
-} from "@hyperledger/cactus-plugin-odap-hermes/src/main/typescript/gateway/plugin-odap-gateway";
-import { SessionDataRollbackActionsPerformedEnum } from "@hyperledger/cactus-plugin-odap-hermes/src/main/typescript";
+} from "@hyperledger/cactus-plugin-odap-hermes";
+import { SessionDataRollbackActionsPerformedEnum } from "@hyperledger/cactus-plugin-odap-hermes";
 import { ClientHelper } from "./client-helper";
 import { ServerHelper } from "./server-helper";
 

diff --git a/examples/cactus-example-cbdc-bridging-frontend/CHANGELOG.md b/examples/cactus-example-cbdc-bridging-frontend/CHANGELOG.md
diff --git a/examples/cactus-example-cbdc-bridging-frontend/Dockerfile b/examples/cactus-example-cbdc-bridging-frontend/Dockerfile
@@ -1,14 +1,15 @@
 
+
 FROM node:16-alpine
 
 WORKDIR /usr/src/app
 
-COPY ./examples/cbdc-bridging-fabric-evm-frontend/package.json ./
+COPY package.json ./
 
 RUN npm install
 
-COPY ./examples/cbdc-bridging-fabric-evm-frontend/ .
+COPY . .
 
 EXPOSE 2000
 
-CMD [ "npm", "start" ]
+CMD [ "npm", "start" ]
diff --git a/examples/cactus-example-cbdc-bridging-frontend/README.md b/examples/cactus-example-cbdc-bridging-frontend/README.md
@@ -1,26 +1,20 @@
-# Available Scripts
+# Getting Started with Create React App
 
-In the project directory, you can run:
+## Run with Docker
 
-## `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+### Using a pre-built image
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+`docker run -p 2000:2000 aaugusto11/cactus-example-cbdc-bridging-frontend`
 
-## `npm test`
+### Building the image
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+```docker build -t cbdc-app-frontend .
+docker run -p 2000:2000 cbdc-app-frontend```
 
-## `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+## `npm start`
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+Runs the app in the development mode.\
+Open [http://localhost:2000](http://localhost:2000) to view it in the browser.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
diff --git a/examples/cactus-example-cbdc-bridging-frontend/package.json b/examples/cactus-example-cbdc-bridging-frontend/package.json
@@ -1,61 +1,39 @@
 {
-  "name": "@hyperledger/cacti-example-cbdc-bridging-frontend",
-  "version": "2.0.0-alpha.2",
-  "description": "An example UI showing how to use Cacti when implementing a CBDC bridging application between Hyperledger Fabric and Hyperledger Besu.",
-  "keywords": [
-    "Hyperledger",
-    "Cacti",
-    "ODAP",
-    "Fabric",
-    "Besu",
-    "Blockchain",
-    "CBDC"
-  ],
-  "bugs": {
-    "url": "https://github.com/hyperledger/cacti/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/hyperledger/cacti.git"
-  },
-  "license": "Apache-2.0",
-  "contributors": [
-    {
-      "name": "Please add yourself to the list of contributors",
-      "email": "[email protected]",
-      "url": "https://example.com"
-    },
-    {
-      "name": "Peter Somogyvari",
-      "email": "[email protected]",
-      "url": "https://accenture.com"
-    },
-    {
-      "name": "André Augusto",
-      "email": "[email protected]"
-    }
-  ],
+  "name": "cbdc-app-frontend",
+  "version": "0.1.0",
+  "private": true,
   "dependencies": {
-    "@emotion/react": "11.11.1",
-    "@emotion/styled": "11.11.0",
-    "@mui/material": "5.14.13",
-    "@mui/styles": "5.14.13",
-    "axios": "1.5.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "uuid": "9.0.1"
-  },
-  "devDependencies": {
-    "eslint-config-react-app": "7.0.1",
-    "react-scripts": "5.0.1"
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/material": "^5.14.19",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.66",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "axios": "^1.6.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "uuid": "^9.0.1",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {},
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -67,5 +45,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/uuid": "^9.0.7"
   }
 }
diff --git a/examples/cactus-example-cbdc-bridging-frontend/src/App.js b/examples/cactus-example-cbdc-bridging-frontend/src/App.js
diff --git a/examples/cactus-example-cbdc-bridging-frontend/src/App.tsx b/examples/cactus-example-cbdc-bridging-frontend/src/App.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import HomePage from './pages/HomePage';
+import { CssBaseline } from '@mui/material';
+import './App.css';
+
+function App() {
+  return (
+    <>
+      <CssBaseline />
+      <HomePage />
+    </>
+  );
+}
+
+export default App;
diff --git a/...idging-frontend/src/api-calls/besu-api.js → ...dging-frontend/src/api-calls/besu-api.tsx b/...idging-frontend/src/api-calls/besu-api.js → ...dging-frontend/src/api-calls/besu-api.tsx
@@ -6,9 +6,9 @@ const BESU_CONTRACT_CBDC_ERC20_NAME = "CBDCcontract";
 const BESU_CONTRACT_ASSET_REF_NAME = "AssetReferenceContract";
 
 export async function transferTokensBesu(
-  frontendUserFrom,
-  frontendUserTo,
-  amount,
+  frontendUserFrom: string,
+  frontendUserTo: string,
+  amount: number,
 ) {
   const from = getEthAddress(frontendUserFrom);
   const to = getEthAddress(frontendUserTo);
@@ -30,7 +30,11 @@ export async function transferTokensBesu(
   );
 }
 
-export async function escrowTokensBesu(frontendUserFrom, amount, assetRefID) {
+export async function escrowTokensBesu(
+  frontendUserFrom: string,
+  amount: number,
+  assetRefID: string
+) {
   const from = getEthAddress(frontendUserFrom);
 
   await axios.post(
@@ -51,7 +55,7 @@ export async function escrowTokensBesu(frontendUserFrom, amount, assetRefID) {
   );
 }
 
-export async function getAssetReferencesBesu(frontendUser) {
+export async function getAssetReferencesBesu(frontendUser: string) {
   const from = getEthAddress(frontendUser);
 
   const response = await axios.post(
@@ -71,7 +75,7 @@ export async function getAssetReferencesBesu(frontendUser) {
     },
   );
 
-  return response.data.callOutput.map((asset) => {
+  return response.data.callOutput.map((asset: any) => {
     return {
       id: asset[0],
       numberTokens: asset[2],
@@ -80,7 +84,7 @@ export async function getAssetReferencesBesu(frontendUser) {
   });
 }
 
-export async function bridgeBackTokensBesu(frontendUser, amount, assetRefID) {
+export async function bridgeBackTokensBesu(frontendUser: string, amount: number, assetRefID: string) {
   const address = getEthAddress(frontendUser);
   const fabricID = getFabricId(frontendUser);
 
@@ -130,7 +134,7 @@ export async function bridgeBackTokensBesu(frontendUser, amount, assetRefID) {
   );
 }
 
-export async function getBesuBalance(frontendUser) {
+export async function getBesuBalance(frontendUser: string) {
   const userEthAddress = getEthAddress(frontendUser);
 
   const response = await axios.post(
@@ -153,7 +157,7 @@ export async function getBesuBalance(frontendUser) {
   return parseInt(response.data.callOutput);
 }
 
-function getUserFromEthAddress(ethAddress) {
+function getUserFromEthAddress(ethAddress: string) {
   switch (ethAddress) {
     case CryptoMaterial.accounts["userA"].ethAddress:
       return "Alice";

diff --git a/...bridging-frontend/src/api-calls/common.js → ...ridging-frontend/src/api-calls/common.tsx b/...bridging-frontend/src/api-calls/common.js → ...ridging-frontend/src/api-calls/common.tsx
@@ -2,7 +2,7 @@ import axios from "axios";
 import CryptoMaterial from "../crypto-material/crypto-material.json";
 
 // Input: [Alice, Charlie, Bridge]
-export function getUserFromPseudonim(user) {
+export function getUserFromPseudonim(user: string) {
   switch (user) {
     case "Alice":
       return "userA";
@@ -15,7 +15,7 @@ export function getUserFromPseudonim(user) {
   }
 }
 
-export function getFabricId(user) {
+export function getFabricId(user: string) {
   switch (getUserFromPseudonim(user)) {
     case "userA":
       return CryptoMaterial.accounts["userA"].fabricID;
@@ -28,7 +28,7 @@ export function getFabricId(user) {
   }
 }
 
-export function getEthAddress(user) {
+export function getEthAddress(user: string) {
   switch (getUserFromPseudonim(user)) {
     case "userA":
       return CryptoMaterial.accounts["userA"].ethAddress;
@@ -41,7 +41,7 @@ export function getEthAddress(user) {
   }
 }
 
-export function getEthUserPrKey(user) {
+export function getEthUserPrKey(user: string) {
   switch (getUserFromPseudonim(user)) {
     case "userA":
       return CryptoMaterial.accounts["userA"].privateKey;
@@ -55,13 +55,9 @@ export function getEthUserPrKey(user) {
 }
 
 export async function checkApiServer1Connection() {
-  await axios.get("http://localhost:4000/api/v1/api-server/healthcheck", {
-    timeout: 2000,
-  });
+  await axios.get("http://localhost:4000/api/v1/api-server/healthcheck");
 }
 
 export async function checkApiServer2Connection() {
-  await axios.get("http://localhost:4100/api/v1/api-server/healthcheck", {
-    timeout: 2000,
-  });
+  await axios.get("http://localhost:4100/api/v1/api-server/healthcheck");
 }