adding axelar dynamic widget library (#22)

apps/axelar/dynamicWidget/.Rbuildignore

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

apps/axelar/dynamicWidget/.gitignore

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

apps/axelar/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/axelar/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/axelar/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/axelar/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/axelar/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/axelar/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/axelar/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/axelar/dynamicWidget/package.json

@@ -0,0 +1,26 @@
+{
+  "private": true,
+  "dependencies": {
+    "@cosmjs/stargate": "^0.30.1",
+    "@cosmjs/tendermint-rpc": "^0.30.1",
+    "@dynamic-labs/sdk-react": "0.16.0-RC.9",
+    "@keplr-wallet/types": "^0.11.51",
+    "react": "^18.2.0",
+    "reactstrap": "^8.9.0",
+    "stream-browserify": "^3.0.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/axelar/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/axelar/dynamicWidget/srcjs/DynamicAppUser.jsx

@@ -0,0 +1,41 @@
+import { useDynamicContext } from "@dynamic-labs/sdk-react";
+import { Button } from "reactstrap";
+import { useEffect } from "react";
+
+const DynamicAppUser = (props) => {
+  const { user } = useDynamicContext();
+
+  // const provider = useCosmosProvider();
+
+  useEffect(async () => {
+    // console.log("user", JSON.stringify(user, null, 2));
+    // console.log("user?.verifiedCredentials", user?.verifiedCredentials);
+    if (user?.verifiedCredentials) {
+      // console.log(
+      //   "ok then ",
+      //   user.verifiedCredentials.map(
+      //     (wallet) => wallet.walletName + ":" + wallet.address
+      //   )
+      // );
+
+      await window?.keplr?.enable("axelar-dojo-1");
+      let resp = await window.keplr.getKey("axelar-dojo-1");
+      console.log("address", resp?.bech32Address);
+
+      props.setNewValue("axelar" + ":" + resp?.bech32Address);
+
+      // props.setNewValue(
+      //   user.verifiedCredentials.map(
+      //     (wallet) => wallet.walletName + ":" + wallet.address
+      //   )
+      // );
+    }
+    // else {
+    //   console.log("no verified credentials");
+    // }
+  }, [user]);
+
+  return <></>;
+};
+
+export default DynamicAppUser;

apps/axelar/dynamicWidget/srcjs/dynamic_button.jsx

@@ -0,0 +1,72 @@
+import { reactShinyInput } from "reactR";
+import { DynamicContextProvider, DynamicWidget } from "@dynamic-labs/sdk-react";
+import DynamicAppUser from "./DynamicAppUser.jsx";
+// import { useCosmosProvider } from "./useCosmosProvider.jsx";
+
+// Add this
+// if (typeof window !== "undefined") {
+//   window.global = globalThis;
+//   Object.assign(window, { Buffer });
+//   Object.assign(window, { crypto });
+//   Object.assign(window, { Stream });
+// }
+
+const TextInput = ({ configuration, value, setValue }) => {
+  return (
+    <DynamicContextProvider
+      settings={{
+        appName: "CosmoScored",
+        multiWallet: true,
+        environmentId: "88e7cf93-cd57-4664-b5da-9682b46074e0",
+        eventsCallbacks: {
+          onAuthSuccess: async (args) => {
+            console.log("onAuthSuccess was called", args);
+
+            if (args?.isAuthenticated) {
+              // bech32Address;
+              // console.log("resp", JSON.stringify(resp, null, 2));
+
+              await window?.keplr?.enable("axelar-dojo-1");
+              let resp = await window.keplr.getKey("axelar-dojo-1");
+              console.log("address", resp?.bech32Address);
+
+              setValue("axelar" + ":" + resp?.bech32Address);
+
+              // setValue(
+              //   args?.user?.verifiedCredentials?.map(
+              //     (wallet) => wallet.walletName + ":" + wallet.address
+              //   )
+              // );
+            }
+          },
+          onLinkSuccess: async (args) => {
+            console.log("onLinkSuccess was called", args);
+            if (args?.isAuthenticated) {
+              await window?.keplr?.enable("axelar-dojo-1");
+              let resp = await window.keplr.getKey("axelar-dojo-1");
+              console.log("address", resp?.bech32Address);
+
+              setValue("axelar" + ":" + resp?.bech32Address);
+              // setValue(
+              //   args?.user?.verifiedCredentials?.map(
+              //     (wallet) => wallet.walletName + ":" + wallet.address
+              //   )
+              // );
+            }
+          },
+        },
+        newToWeb3WalletChainMap: {
+          primary_chain: "cosmos",
+          wallets: {
+            cosmos: "keplr",
+          },
+        },
+      }}
+    >
+      <DynamicWidget />
+      <DynamicAppUser setNewValue={setValue} />
+    </DynamicContextProvider>
+  );
+};
+
+reactShinyInput(".dynamic_button", "dynamicWidget.dynamic_button", TextInput);

apps/axelar/dynamicWidget/webpack.config.js

@@ -0,0 +1,51 @@
+var path = require("path");
+var webpack = require("webpack");
+
+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",
+  //   resolve: {
+  //     fallback: {
+  //       crypto: false,
+  //       stream: require.resolve("stream-browserify"),
+  //     },
+  //   },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
+    }),
+  ],
+  node: {
+    crypto: false, //"empty",
+    stream: true, //require.resolve("stream-browserify"),
+  },
+};