Dynamic Integration for Flow (#19)

* first start

* dynamic button works and posts to server, but gotta clean up

* Cleanup

* updating keys and last round of cleanup

* package bundle

* removing unused yarn files

apps/flow/dynamicWidget/.Rbuildignore

@@ -0,0 +1,6 @@
+^node_modules$
+^srcjs$
+^app\.R$
+^package\.json$
+^webpack\.config\.js$
+^yarn\.lock$

apps/flow/dynamicWidget/.gitignore

@@ -0,0 +1 @@
+node_modules

apps/flow/dynamicWidget/DESCRIPTION

@@ -0,0 +1,16 @@
+Package: dynamicWidget
+Title: What the Package Does (One Line, Title Case)
+Version: 0.0.0.9000
+Authors@R: 
+    person("First", "Last", , "first.last@example.com", role = c("aut", "cre"),
+           comment = c(ORCID = "YOUR-ORCID-ID"))
+Description: What the package does (one paragraph).
+License: `use_mit_license()`, `use_gpl3_license()` or friends to pick a
+    license
+Encoding: UTF-8
+Roxygen: list(markdown = TRUE)
+RoxygenNote: 7.2.3
+Imports: 
+    htmltools,
+    reactR,
+    shiny

apps/flow/dynamicWidget/NAMESPACE

@@ -0,0 +1,7 @@
+# Generated by roxygen2: do not edit by hand
+
+export(dynamic_buttonInput)
+export(updateDynamic_buttonInput)
+importFrom(htmltools,htmlDependency)
+importFrom(htmltools,tags)
+importFrom(reactR,createReactShinyInput)

apps/flow/dynamicWidget/R/dynamic_button.R

@@ -0,0 +1,34 @@
+#' Dynamic Button
+#'
+#' React Button for multi-wallet connect using Dynamic SDK
+#'
+#' @importFrom reactR createReactShinyInput
+#' @importFrom htmltools htmlDependency tags
+#'
+#' @export
+dynamic_buttonInput <- function(inputId) {
+  reactR::createReactShinyInput(
+    inputId,
+    "dynamic_button",
+    htmltools::htmlDependency(
+      name = "dynamic_button-input",
+      version = "1.0.0",
+      src = "www/dynamicWidget/dynamic_button",
+      package = "dynamicWidget",
+      script = "dynamic_button.js"
+    ),
+    "",
+    list(), htmltools::tags$div
+  )
+}
+
+#' Dyanamic Button
+#'
+#' React Button for multi-wallet connect using Dynamic SDK
+#'
+#' @export
+updateDynamic_buttonInput <- function(session, inputId, value, configuration = NULL) {
+  message <- list(value = value)
+  if (!is.null(configuration)) message$configuration <- configuration
+  session$sendInputMessage(inputId, message)
+}

apps/flow/dynamicWidget/README.md

@@ -0,0 +1,58 @@
+## setup:
+
+1.  Install R and dependencies
+
+```
+brew install R
+brew install libgit2 
+brew install freetype
+brew install harfbuzz fribidi
+brew install libtiff  
+```
+
+
+2.  Install required packages by running
+
+ ```
+ Rscript setup.R
+ ```
+
+3.  in the terminal create an R project with react?
+
+```
+~ R
+> path <- file.path(getwd(), "flowAttestR")
+> usethis::create_package(path)
+> reactR::scaffoldReactShinyInput(
+  "wallet_connect", 
+  list(
+    "reactstrap" = "^8.9.0"
+  )
+)
+> quit()
+Save workspace image? [y/n/c]: n
+yarn install
+
+```
+## "exporting"
+
+R doesn't call it that but that's what we're doing
+
+```
+
+cd <my library to export>
+yarn run webpack --mode=development 
+R
+devtools::document()
+devtools::load_all()
+-or-
+devtools::install()
+```
+
+
+## Running
+
+```
+cd <this directory>
+ R -e "shiny::runApp('.')"
+```

apps/flow/dynamicWidget/app.R

@@ -0,0 +1,16 @@
+library(shiny)
+library(dynamicWidget)
+
+ui <- fluidPage(
+  titlePanel("reactR Input Example"),
+  dynamic_buttonInput("textInput"),
+  textOutput("textOutput")
+)
+
+server <- function(input, output, session) {
+  output$textOutput <- renderText({
+    sprintf("You entered: %s", input$textInput)
+  })
+}
+
+shinyApp(ui, server)

apps/flow/dynamicWidget/man/dynamic_buttonInput.Rd

@@ -0,0 +1,11 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dynamic_button.R
+\name{dynamic_buttonInput}
+\alias{dynamic_buttonInput}
+\title{Dynamic Button}
+\usage{
+dynamic_buttonInput(inputId)
+}
+\description{
+React Button for multi-wallet connect using Dynamic SDK
+}

apps/flow/dynamicWidget/man/updateDynamic_buttonInput.Rd

@@ -0,0 +1,11 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/dynamic_button.R
+\name{updateDynamic_buttonInput}
+\alias{updateDynamic_buttonInput}
+\title{Dyanamic Button}
+\usage{
+updateDynamic_buttonInput(session, inputId, value, configuration = NULL)
+}
+\description{
+React Button for multi-wallet connect using Dynamic SDK
+}

apps/flow/dynamicWidget/package.json

@@ -0,0 +1,22 @@
+{
+  "private": true,
+  "dependencies": {
+    "@dynamic-labs/sdk-react": "^0.15.0",
+    "react": "^18.2.0",
+    "reactstrap": "^8.9.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.0",
+    "@babel/preset-env": "^7.2.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.4",
+    "css-loader": "^5.0.1",
+    "style-loader": "^2.0.0",
+    "webpack": "^4.27.1",
+    "webpack-cli": "^3.1.2"
+  },
+  "scripts": {
+    "watch": "webpack --watch",
+    "build": "webpack"
+  }
+}

apps/flow/dynamicWidget/setup.R

@@ -0,0 +1,6 @@
+install.packages("languageserver", repos = "http://cran.us.r-project.org")
+install.packages("shiny", repos = "http://cran.us.r-project.org")
+install.packages("reactR", repos = "http://cran.us.r-project.org")
+install.packages("usethis", repos = "http://cran.us.r-project.org")
+install.packages("devtools", repos = "http://cran.us.r-project.org")
+install.packages("here", repos = "http://cran.us.r-project.org")

apps/flow/dynamicWidget/srcjs/DynamicAppUser.jsx

@@ -0,0 +1,26 @@
+import { useDynamicContext } from "@dynamic-labs/sdk-react";
+import { Button } from "reactstrap";
+
+const DynamicAppUser = (props) => {
+  const { user } = useDynamicContext();
+
+  return (
+    <>
+      {user ? (
+        <Button
+          onClick={() =>
+            props.setNewValue(
+              user?.verifiedCredentials?.map((wallet) => wallet.address)
+            )
+          }
+        >
+          Update Score
+        </Button>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default DynamicAppUser;

apps/flow/dynamicWidget/srcjs/dynamic_button.jsx

@@ -0,0 +1,39 @@
+import { reactShinyInput } from "reactR";
+import { DynamicContextProvider, DynamicWidget } from "@dynamic-labs/sdk-react";
+import DynamicAppUser from "./DynamicAppUser.jsx";
+import { Button } from "reactstrap";
+
+const TextInput = ({ configuration, value, setValue }) => {
+  return (
+    <DynamicContextProvider
+      settings={{
+        appName: "FlowScored",
+        multiWallet: true,
+        environmentId: "c6ef9d8c-6b8d-441a-9f67-72b728cef538",
+        eventsCallbacks: {
+          onAuthSuccess: (args) => {
+            console.log("onAuthSuccess was called", args);
+            if (args?.isAuthenticated) {
+              setValue(
+                args?.user?.verifiedCredentials?.map((wallet) => wallet.address)
+              );
+            }
+          },
+          onLinkSuccess: (args) => {
+            console.log("onLinkSuccess was called", args);
+            if (args?.isAuthenticated) {
+              setValue(
+                args?.user?.verifiedCredentials?.map((wallet) => wallet.address)
+              );
+            }
+          },
+        },
+      }}
+    >
+      <DynamicWidget />
+      <DynamicAppUser setNewValue={setValue} />
+    </DynamicContextProvider>
+  );
+};
+
+reactShinyInput(".dynamic_button", "dynamicWidget.dynamic_button", TextInput);

apps/flow/dynamicWidget/webpack.config.js

@@ -0,0 +1,34 @@
+var path = require('path');
+
+module.exports = {
+    entry: path.join(__dirname, 'srcjs', 'dynamic_button.jsx'),
+    output: {
+        path: path.join(__dirname, 'inst/www/dynamicWidget/dynamic_button'),
+        filename: 'dynamic_button.js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.jsx?$/,
+                loader: 'babel-loader',
+                options: {
+                    presets: ['@babel/preset-env', '@babel/preset-react']
+                }
+            },
+            // For CSS so that import "path/style.css"; works
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader']
+            }
+        ]
+    },
+    externals: {
+        'react': 'window.React',
+        'react-dom': 'window.ReactDOM',
+        'reactR': 'window.reactR'
+    },
+    stats: {
+        colors: true
+    },
+    devtool: 'source-map'
+};

apps/flow/shinyapp/app.R

@@ -0,0 +1,16 @@
+library(shiny)
+library(dynamicWidget)
+
+
+ui <- fluidPage(
+    titlePanel("dynamic test"),
+    dynamic_buttonInput("my_wallet")
+)
+
+# Define server logic to plot various variables against mpg ----
+server <- function(input, output) {
+    observeEvent(input$my_wallet, {
+        print(input$my_wallet)
+    })
+}
+shinyApp(ui, server)

apps/optimism/opAttestR/R/WalletHandler.R

@@ -23,4 +23,4 @@ WalletHandler <- function(inputId, chainId, default = "") {
     ),
     htmltools::tags$div
   )
-}
+}