feat: new a Webapp to show the QR Code (#21)

New a Webapp to show the QR Code For ATL-4304
Create a pipeline to build the Mediator App
Fix CI setup
Disable the test in scalajs
Updated the node setup version

Co-authored-by: Shailesh Patil <shailesh.patil@iohk.io>
Signed-off-by: Fabio <Pinheiro>

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ on:
     # tags: ["v*"]
 
 env:
-    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
 jobs:
   Run-Tests:
@@ -23,12 +23,12 @@ jobs:
           fetch-depth: 0 # Needed for the release tag // `git fetch --tags` will also work
       - name: Setup Java and Scala
         uses: olafurpg/setup-scala@v14
-      # - name: Setup Node
-      #   uses: actions/setup-node@v2
-      #   with:
-      #     node-version: "16" # or whatever
-      # - name: Setup Scala.JS
-      #   uses: japgolly/setup-scalajs@v1
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "lts/*"
+      - name: Setup Scala.JS
+        uses: japgolly/setup-scalajs@v1
       - name: Cache sbt
         uses: coursier/cache-action@v6.3
       - name: Cache embedmongo
@@ -37,8 +37,8 @@ jobs:
           path: ~/.embedmongo
           key: ${{ runner.os }}-embedmongo-4.7.0
           restore-keys: |
-             ${{ runner.os }}-embedmongo-4.7.0
+            ${{ runner.os }}-embedmongo-4.7.0
       ### Compile and TESTS ###
       - run: sbt -mem 2048 -J-Xmx5120m "test"
-      #   env:
-      #     NODE_OPTIONS: "--openssl-legacy-provider"
+        env:
+          NODE_OPTIONS: "--openssl-legacy-provider"

README.md

@@ -25,3 +25,18 @@ A cloud-based agent that forwards messages to mobile devices.
 - [WIP] `MediatorCoordination 2.0` - https://didcomm.org/mediator-coordination/2.0
 - [DONE] `Pickup 3` - https://didcomm.org/pickup/3.0
 - [DONE] `TrustPing 2.0` - https://didcomm.org/trust-ping/2.0/
+
+## How to run
+
+### server
+
+**Start the server**:
+ - shell> `docker-compose up mongo`
+ - sbt> `mediator/reStart`
+### webapp
+
+The webapp/webpage is atm just to show the QRcode with out of band invitation for the Mediator.
+
+**Compile** - sbt> `webapp / Compile / fastOptJS / webpack`
+
+**Open the webpage for develop** - open> `file:///.../webapp/index-fastopt.html`

build.sbt

@@ -3,7 +3,7 @@ resolvers ++= Resolver.sonatypeOssRepos("snapshots")
 
 inThisBuild(
   Seq(
-    scalaVersion := "3.3.0", // Also update docs/publishWebsite.sh and any ref to scala-3.2.2
+    scalaVersion := "3.3.0", // Also update docs/publishWebsite.sh and any ref to scala-3.3.0
   )
 )
 
@@ -20,8 +20,8 @@ lazy val V = new {
 //   // val scalajsLogging = "1.1.2-SNAPSHOT" //"1.1.2"
 
 //   // https://mvnrepository.com/artifact/dev.zio/zio
-//   val zio = "2.0.13"
-//   val zioJson = "0.4.2"
+  val zio = "2.0.13"
+  val zioJson = "0.4.2"
   // val zioMunitTest = "0.1.1"
   val zioHttp = "0.0.5"
   val zioConfig = "4.0.0-RC16"
@@ -37,6 +37,12 @@ lazy val V = new {
   val zioTestSbt = "2.0.15"
   val zioTestMagnolia = "2.0.15"
 
+  // For WEBAPP
+  val laminar = "15.0.1"
+  val waypoint = "6.0.0"
+  val upickle = "3.1.0"
+  // https://www.npmjs.com/package/material-components-web
+  val materialComponents = "12.0.0"
 }
 
 /** Dependencies */
@@ -56,9 +62,9 @@ lazy val D = new {
 
 //   val dom = Def.setting("org.scala-js" %%% "scalajs-dom" % V.scalajsDom)
 
-//   val zio = Def.setting("dev.zio" %%% "zio" % V.zio)
+  val zio = Def.setting("dev.zio" %%% "zio" % V.zio)
 //   val zioStreams = Def.setting("dev.zio" %%% "zio-streams" % V.zio)
-//   val zioJson = Def.setting("dev.zio" %%% "zio-json" % V.zioJson)
+  val zioJson = Def.setting("dev.zio" %%% "zio-json" % V.zioJson)
 
   val zioHttp = Def.setting("dev.zio" %% "zio-http" % V.zioHttp)
   val zioConfig = Def.setting("dev.zio" %% "zio-config" % V.zioConfig)
@@ -80,6 +86,18 @@ lazy val D = new {
   val zioTest = Def.setting("dev.zio" %% "zio-test" % V.zioTest % Test)
   val zioTestSbt = Def.setting("dev.zio" %% "zio-test-sbt" % V.zioTestSbt % Test)
   val zioTestMagnolia = Def.setting("dev.zio" %% "zio-test-magnolia" % V.zioTestMagnolia % Test)
+
+  // For WEBAPP
+  val laminar = Def.setting("com.raquo" %%% "laminar" % V.laminar)
+  val waypoint = Def.setting("com.raquo" %%% "waypoint" % V.waypoint)
+  val upickle = Def.setting("com.lihaoyi" %%% "upickle" % V.upickle)
+}
+
+/** NPM Dependencies */
+lazy val NPM = new {
+  val qrcode = Seq("qrcode-generator" -> "1.4.4")
+
+  val materialDesign = Seq("material-components-web" -> V.materialComponents)
 }
 
 inThisBuild(
@@ -123,13 +141,13 @@ lazy val scalaJSBundlerConfigure: Project => Project =
       scalaJSLinkerConfig ~= {
         _.withSourceMap(false) // disabled because it somehow triggers warnings and errors
           .withModuleKind(ModuleKind.CommonJSModule) // ModuleKind.ESModule
-          // must be set to ModuleKind.CommonJSModule in projects where ScalaJSBundler plugin is enabled
-          .withJSHeader(
-            """/* FMGP scala-did examples and tool
-            | * https://github.com/FabioPinheiro/scala-did
-            | * Copyright: Fabio Pinheiro - fabiomgpinheiro@gmail.com
-            | */""".stripMargin.trim() + "\n"
-          )
+        // must be set to ModuleKind.CommonJSModule in projects where ScalaJSBundler plugin is enabled
+        // .withJSHeader(
+        //   """/* FMGP scala-did examples and tool
+        //   | * https://github.com/FabioPinheiro/scala-did
+        //   | * Copyright: Fabio Pinheiro - fabiomgpinheiro@gmail.com
+        //   | */""".stripMargin.trim() + "\n"
+        // )
       }
     )
     // .settings( //TODO https://scalacenter.github.io/scalajs-bundler/reference.html#jsdom
@@ -206,9 +224,48 @@ lazy val mediator = project
     dockerBaseImage := "openjdk:11",
   )
   .settings(Test / parallelExecution := false)
+  .settings(
+    // WebScalaJSBundlerPlugin
+    scalaJSProjects := Seq(webapp),
+    /** scalaJSPipeline task runs scalaJSDev when isDevMode is true, runs scalaJSProd otherwise. scalaJSProd task runs
+      * all tasks for production, including Scala.js fullOptJS task and source maps scalaJSDev task runs all tasks for
+      * development, including Scala.js fastOptJS task and source maps.
+      */
+    Assets / pipelineStages := Seq(scalaJSPipeline),
+    // pipelineStages ++= Seq(digest, gzip), //Compression - If you serve your Scala.js application from a web server, you should additionally gzip the resulting .js files.
+    Compile / unmanagedResourceDirectories += baseDirectory.value / "src" / "main" / "extra-resources",
+    // Compile / unmanagedResourceDirectories += (baseDirectory.value.toPath.getParent.getParent / "docs-build" / "target" / "mdoc").toFile,
+    // Compile / unmanagedResourceDirectories += (baseDirectory.value.toPath.getParent.getParent / "serviceworker" / "target" / "scala-3.3.0" / "fmgp-serviceworker-fastopt").toFile,
+    Compile / compile := ((Compile / compile) dependsOn scalaJSPipeline).value,
+    // Frontend dependency configuration
+    Assets / WebKeys.packagePrefix := "public/",
+    Runtime / managedClasspath += (Assets / packageBin).value,
+  )
+  .enablePlugins(WebScalaJSBundlerPlugin)
   .dependsOn(httpUtils.jvm) // did, didExample,
   .enablePlugins(JavaAppPackaging, DockerPlugin)
 
+lazy val webapp = project
+  .in(file("webapp"))
+  .settings(publish / skip := true)
+  .settings(Test / test := {})
+  .settings(name := "webapp")
+  .configure(scalaJSBundlerConfigure)
+  .configure(buildInfoConfigure)
+  .settings(
+    libraryDependencies ++= Seq(D.laminar.value, D.waypoint.value, D.upickle.value),
+    libraryDependencies ++= Seq(D.zio.value, D.zioJson.value),
+    libraryDependencies ++= Seq(D.scalaDID.value, D.scalaDID_peer.value),
+    Compile / npmDependencies ++= NPM.qrcode ++ NPM.materialDesign
+  )
+  .settings(
+    stShortModuleNames := true,
+    webpackBundlingMode := BundlingMode.LibraryAndApplication(), // BundlingMode.Application,
+    Compile / scalaJSModuleInitializers += {
+      org.scalajs.linker.interface.ModuleInitializer.mainMethod("fmgp.webapp.App", "main")
+    },
+  )
+
 // ############################
 // ####  Release process  #####
 // ############################

mediator/src/main/resources/public/index.html

@@ -0,0 +1,33 @@
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>IOHK Mediator</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <!-- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"> -->
+
+
+  <!-- https://material.io/develop/web/getting-started -->
+  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+  <!-- <link
+    href="./target/scala-3.3.0/scalajs-bundler/main/node_modules/material-components-web/dist/material-components-web.min.css"
+    rel="stylesheet"> -->
+  <!-- <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script> -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <!-- <script src="https://cdn.jsdelivr.net/npm/ipfs-http-client/dist/index.min.js"></script> -->
+
+  <script>
+    var callback = function () {
+      alert('A callback was triggered');
+    }
+  </script>
+  <!-- My APP -->
+  <script type="text/javascript" src="public/webapp-fastopt-bundle.js"></script>
+</head>
+
+<body style="margin:0;">
+  <div id="app-container"></div>
+</body>
+
+</html>