feat: sdk support for generic handler and generic example app (#85)

* added support of erc721

* cleanup

* fixes for sdk for erc721 example

* erc721 example local build

* updated yarn lock

* added scripts for minting

* update config to new local setup

* update readme

* fix readme

* use localy compile sdk version

* update erc20 react example

* delete old react example

* generic app example initial implementation

* adding sygma contracts dependency on package.json for react example

* update bridge setup to work with updated local setup

* update bridge setup for nft example

* adding method for creating deposit data for generic handler support

* toHex function as public method on Sygma

* wip: generic deposit

* wip: generic deposit providing fee from query the contract

* wip: generic deposit providing fee from query the contract

* improvements over code of generic app example, using custom hooks for connection, added couple of new methods to sdk

* remove artifacts folder

* remove artifacts folder inside src

* using generic deposit to transfer colors

* getting all the colors after tx

* Deposit generic method on EvmBridge class and more cleanup of the example app

* listening to event on chain change from meta

* update on reducer

* modifiying script for setting up colors

* readme with instructions on how to run generic app example

* update redme with troubleshootin instructions, remove no-check for typescript, some minor updates for the app example

* remove unnecesary scripts

* remove logs and format script

* adding types on function signatures for some of the methods and functions added to the SDK. Removing more logs

* minor change on app.tsx

* PR review comments

* PR review comments: disabled button

* PR review comments: loading state

* removing logs

* added resetSelectedColor action

* reset color after transfer, move the transfering state

Co-authored-by: Nikolay Topkaridi <[email protected]>

examples/generic-colors/.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# Created by https://www.toptal.com/developers/gitignore/api/yarn
+# Edit at https://www.toptal.com/developers/gitignore?templates=yarn
+
+### yarn ###
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+
+.yarn/*
+!.yarn/releases
+!.yarn/patches
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+
+# if you are NOT using Zero-installs, then:
+# comment the following lines
+!.yarn/cache
+
+# and uncomment the following lines
+# .pnp.*
+
+# End of https://www.toptal.com/developers/gitignore/api/yarn

examples/generic-colors/README.md

@@ -0,0 +1,33 @@
+# Generic Colors App
+
+## Setup
+
+For you to run this example you need our local setup. Go to this [repo](https://github.com/sygmaprotocol/sygma-relayer) and make sure you have `golang` installed. Once you clone this repo, run the command `make example` and you will have two ganache nodes and three relayers with all the contracts deployed on each node
+
+## Import private key to Metamask
+
+To import the bridge account on metamask to use this app, use the following private key:
+
+```bash
+cc2c32b154490f09f70c1c8d4b997238448d649e0777495863db231c4ced3616
+```
+
+Address of the bridge admin is: `0x5C1F5961696BaD2e73f73417f07EF55C62a2dC5b`
+
+## How to run this app
+
+After you clone this repo run:
+
+```bash
+yarn # to install dependencies
+cd ./examples/generic-colors
+yarn setupColors # to setup some colors on the Colors contract that the example app uses
+yarn start # start the frontend application
+```
+
+## Troubleshooting
+
+A couple of important details:
+
+- After deposit, update on the state for the app to show the new color in the destination chain will occur after 20 seconds. So, just wait to check the update on the state. This is because we need to wait some amount of time for the relayers to relay the message and the create the color on destinatio chain
+- If you change networks with metamask, the app is going to be reloaded, but since this is using local nodes, metamask can keep the nonce count. If you try to start transfer, is going to fail because of incorrect nonce. Go to metamaks, click on `adavance` and the `reset account data` to reset nonce and use your account to start a transfer.

examples/generic-colors/config-overrides.js

@@ -0,0 +1,22 @@
+const webpack = require('webpack');
+
+module.exports = function override(config) {
+    const fallback = config.resolve.fallback || {};
+    Object.assign(fallback, {
+        "crypto": require.resolve("crypto-browserify"),
+        "stream": require.resolve("stream-browserify"),
+        "assert": require.resolve("assert"),
+        "http": require.resolve("stream-http"),
+        "https": require.resolve("https-browserify"),
+        "os": require.resolve("os-browserify"),
+        "url": require.resolve("url")
+    })
+    config.resolve.fallback = fallback;
+    config.plugins = (config.plugins || []).concat([
+        new webpack.ProvidePlugin({
+            process: 'process/browser',
+            Buffer: ['buffer', 'Buffer']
+        })
+    ])
+    return config;
+}

examples/generic-colors/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@buildwithsygma/generic-colors",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@buildwithsygma/sygma-contracts": "1.1.1",
+    "@buildwithsygma/sygma-sdk-core": "link:../../../sygma-sdk/packages/sdk",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.4.2",
+    "web-vitals": "^2.1.0",
+    "ethers": "5.7.1",
+    "@ethersproject/experimental": "^5.7.0",
+    "ts-node": ">=8.0.0",
+    "react-hook-form": "^7.30.0"
+  },
+  "scripts": {
+    "start": "PORT=3006 BROWSER=none react-app-rewired start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "setupColors": "ts-node ./src/scripts/setColors.ts"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "assert": "^2.0.0",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "https-browserify": "^1.0.0",
+    "os-browserify": "^0.3.0",
+    "process": "^0.11.10",
+    "react-app-rewired": "^2.2.1",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "url": "^0.11.0"
+  }
+}

examples/generic-colors/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/generic-colors/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/generic-colors/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

examples/generic-colors/src/App.css

@@ -0,0 +1,124 @@
+.App {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.title-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title-info > p {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.off-color { 
+  color: red
+}
+
+.on-color {
+  color: green
+}
+
+.main-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+}
+
+.box {
+  border: 2px solid grey;
+  border-radius: 10px;
+  box-shadow: 10px 10px 3px;
+  margin: 15px;
+  width: 100%;
+  padding: 10px;
+}
+
+.start-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 25px;
+}
+
+.start-button > button {
+  padding: 20px;
+  border: 1px solid white;
+  border-radius: 8px;
+  color: white;
+  font-size: 16px;
+}
+
+.start-button > .disabled {
+  background-color: grey;
+}
+
+.start-button > .disabled:active {
+  background-color: #282c34;
+}
+
+.start-button > .enabled {
+  background-color: coral;
+}
+
+.start-button > button:active {
+  background-color: #ad4018;
+}
+
+.start-button > button.connect-button {
+  background: dodgerblue;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  margin-left: 10px;
+}
+
+.start-button > button.connect-button:active {
+  background-color: #24588b;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

examples/generic-colors/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});