feat: substrate support to SDK (#154)

* added draft for node example substrate

* added runtime calls and substrate react example

* updated jest and jest setup

* updated substrateSocketConnect function

* remove comment

* temrorary disabled eslint for substrate example

* tests for substrateSocketConnect

* added block comments

* remove unused code

* removed comment

* renamed for compatibility with esmodules

* added Event type to err

* removed tabs

* extracted functions and added tests, added deposit function draft

* add deposit function and tests

* Add form and deposit function

* extracted throwError function and added tests

* added tests for deposit function

* fix test for signAndSend

* update types for native balance func

* 100% lines of code covered by unit tests

* replace react dispatch with callbacks

* update substrate with callbacks

* move types inside substrate dir

* substrate example is updated

* added resolutions for polkadot

* added listenForEvent function and tests

* get rid of @ts-ignore-line in tests for substrate

* update deposit method and test to be compatible with latest substrate pallet

* change name of the type to EvmBridgeSetup

* renamed type

* updated substrate functions and tests

* added evm functions and tests

* updated exports

* upated example for Substrate -> Evm

* updated test scripts

* cleanup

* changed any to unknown

* extracted type creation out of function

* deleted .eslintignore from substrate example

* changed to vite-plugin-node-polyfills in substrate example

examples/erc20-react-example/src/App.tsx

@@ -4,11 +4,11 @@ import { BigNumber, utils, constants, Event, providers } from "ethers";
 import { useForm } from "react-hook-form";
 import {
   Sygma,
-  SygmaBridgeSetupList,
+  EvmBridgeSetupList,
   BridgeEvents,
 } from "@buildwithsygma/sygma-sdk-core";
 
-const bridgeSetupList: SygmaBridgeSetupList = [
+const bridgeSetupList: EvmBridgeSetupList = [
   {
     domainId: "1",
     networkId: 1337,

examples/erc721-react-example/src/App.tsx

@@ -3,11 +3,11 @@ import { BigNumber, utils, constants, Event, providers } from "ethers";
 import { useForm } from "react-hook-form";
 import {
   Sygma,
-  SygmaBridgeSetupList,
+  EvmBridgeSetupList,
   BridgeEvents,
 } from "@buildwithsygma/sygma-sdk-core";
 
-const bridgeSetupList: SygmaBridgeSetupList = [
+const bridgeSetupList: EvmBridgeSetupList = [
   {
     domainId: "1",
     networkId: 1337,

examples/generic-colors/src/bridgeSetup.ts

@@ -1,4 +1,4 @@
-import { SygmaBridgeSetupList } from "@buildwithsygma/sygma-sdk-core";
+import { EvmBridgeSetupList } from "@buildwithsygma/sygma-sdk-core";
 
 const bridgeAddress = "0x6CdE2Cd82a4F8B74693Ff5e194c19CA08c2d1c68";
 const genericAddress = "0x783BB8123b8532CC85C8D2deF2f47C55D1e46b46";
@@ -8,7 +8,7 @@ const colorsAddress = "0xE54Dc792c226AEF99D6086527b98b36a4ADDe56a";
 const erc20HandlerAddress = "0x1ED1d77911944622FCcDDEad8A731fd77E94173e";
 const erc721HandlerAddress = "0x481f97f9C82a971B3844a422936a4d3c4082bF84";
 
-const bridgeSetupList: SygmaBridgeSetupList = [
+const bridgeSetupList: EvmBridgeSetupList = [
   {
     domainId: "1",
     networkId: 1337,

examples/node-example/local-setup-example/index.ts

@@ -1,5 +1,5 @@
 import { BigNumber, Event } from "ethers";
-import { Sygma, SygmaBridgeSetupList } from "@buildwithsygma/sygma-sdk-core";
+import { Sygma, EvmBridgeSetupList } from "@buildwithsygma/sygma-sdk-core";
 
 const depositEventLogs = (
   destinationDomainId: number,
@@ -30,7 +30,7 @@ const proposalExecutionEventsLogs = (
 
 void (async () => {
   // CHAIN 1 ADRESSES
-  const bridgeSetupList: SygmaBridgeSetupList = [
+  const bridgeSetupList: EvmBridgeSetupList = [
     {
       domainId: "1",
       networkId: 1337,

examples/substrate-react-example/.eslintrc.js

@@ -0,0 +1,2 @@
+module.exports = {
+}

examples/substrate-react-example/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/substrate-react-example/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Minimal example Polkadot</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/substrate-react-example/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@buildwithsygma/sygma-sdk-substrate-react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "tsc  -p ./tsconfig.json --noEmit --pretty"
+  },
+  "dependencies": {
+    "@buildwithsygma/sygma-sdk-core": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@polkadot/util": "^10.1.13",
+    "bn.js": "^5.2.1",
+    "dotenv": "^16.0.3"
+  },
+  "devDependencies": {
+    "@polkadot/api": "^9.9.1",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@polkadot/types": "^9.9.1",
+    "@polkadot/ui-keyring": "^2.10.1",
+    "@vitejs/plugin-react": "^3.0.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vite-plugin-node-polyfills": "^0.7.0"
+  }
+}

examples/substrate-react-example/src/App.css

@@ -0,0 +1,59 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.App {
+  min-width: 712px;
+}
+
+.mainTitle {
+  display: "flex";
+  justify-content: "center"
+}
+
+.formFieldset {
+  display: flex;
+  flex-direction: column;
+  border: none;
+}
+
+.input {
+  display: flex;
+  align-self: center;
+  width: 56%;
+  padding: 10px;
+  border: 1px solid grey;
+  text-align: start;
+  font-size: 15px;
+  border-radius: 5px;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+}
+
+.label {
+  display: flex;
+  align-self: center;
+  width: 56%;
+  padding: 5px 10px;
+  text-align: start;
+  font-size: 15px;
+  border-radius: 5px;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+}
+
+.button {
+  display: flex;
+  align-self: center;
+  width: 33%;
+  padding: 10px;
+  margin-top: 15px;
+  justify-content: center;
+  background: white;
+  color: green;
+  border: 1px solid green;
+  font-weight: 800;
+  border-radius: 5px;
+}

examples/substrate-react-example/src/App.tsx

@@ -0,0 +1,68 @@
+import {
+  JSXElementConstructor,
+  ReactElement,
+  ReactFragment,
+} from "react";
+import "./App.css";
+
+import { SubstrateContextProvider, useSubstrateState } from "./substrate-lib";
+
+import UserInfo from "./components/UserInfo";
+import Form from "./components/Form";
+import TransferStatus from "./components/TransferStatus"
+
+const Loader = (
+  text:
+    | string
+    | number
+    | boolean
+    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
+    | ReactFragment
+    | null
+    | undefined
+) => <div>{text}</div>;
+
+const Message = (errObj: { target: { url: string } }) => (
+  <div>{`Connection to websocket '${errObj.target.url}' failed.`}</div>
+);
+
+function Main() {
+  const { apiState, apiError, keyringState, keyring } = useSubstrateState()!;
+
+  if (apiState === "ERROR") return Message(apiError as { target: { url: string } });
+  if (apiState !== "READY") return Loader("Connecting to Substrate");
+
+  if (keyringState === "ERROR" && !keyring) {
+    return Loader(
+      "Can't get access to etensions accounts. Please authorize in extension"
+    );
+  }
+
+  if (keyringState !== "READY") {
+    return Loader(
+      "Loading accounts (please review any extension's authorization)"
+    );
+  }
+
+  return (
+    <div className="App">
+      <div>
+        <h2 className="mainTitle">
+          Minimal example Polkadot
+        </h2>
+        <UserInfo />
+        <Form />
+        <br />
+        <TransferStatus />
+      </div>
+    </div>
+  );
+}
+
+export default function App(): JSX.Element {
+  return (
+    <SubstrateContextProvider>
+      <Main />
+    </SubstrateContextProvider>
+  );
+}

examples/substrate-react-example/src/components/Form.tsx

@@ -0,0 +1,94 @@
+import React, {useState} from "react";
+import { useForm } from "react-hook-form";
+
+import { useSubstrateState, useSubstrate } from "../substrate-lib";
+import { substrateConfig, evmSetupList } from "../config";
+
+function Main(): JSX.Element {
+  const [isLoading, setIsLoading] = useState(false);
+  const { currentAccount, destinationDomainId } = useSubstrateState();
+  const { makeDeposit } = useSubstrate();
+  const { register, handleSubmit, watch, setValue } = useForm({
+    defaultValues: {
+      amount: "11",
+      address: "0x5C1F5961696BaD2e73f73417f07EF55C62a2dC5b",
+      from: "3",
+      to: "2",
+    },
+  });
+
+  const submit = async (values: {
+    amount: string;
+    address: string;
+    from: string;
+    to: string;
+  }): Promise<void> => {
+    console.log('form data', values);
+    if (values.amount && values.address) {
+      setIsLoading(true)
+      makeDeposit(values.amount, values.address, values.to).finally(() => {
+        setIsLoading(false)
+      });
+    }
+  };
+
+  if (!currentAccount) {
+    return <div>Please create accounts</div>;
+  }
+
+  return (
+    <form
+      action=""
+      onSubmit={(...args) => void handleSubmit(submit)(...args)}
+    >
+      <fieldset disabled={isLoading} className="formFieldset">
+      <label htmlFor="amount" className="label">
+        Amount
+      </label>
+      <input
+        type="text"
+        placeholder="amount"
+        {...register("amount")}
+        className="input"
+      />
+      <label htmlFor="address" className="label">
+        Recepient address
+      </label>
+      <input
+        type="text"
+        placeholder="address"
+        {...register("address")}
+        className="input"
+      />
+      <label htmlFor="from" className="label">
+        Home Substrate network domain ID: {substrateConfig.domainId}
+      </label>
+      <label htmlFor="to" className="label">
+        Destination EVM network:
+      </label>
+      <select {...register("to")} className="input">
+        {evmSetupList.map((bridgeItem) => (
+          <option key={bridgeItem.domainId} value={bridgeItem.domainId}>
+            {bridgeItem.name}
+          </option>
+        ))}
+      </select>
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          justifyContent: "space-evenly",
+        }}
+      >
+        <button
+          type="submit"
+          className="button"
+        >
+          Transfer
+        </button>
+      </div>
+      </fieldset>
+    </form>
+  );
+}
+export default Main;

examples/substrate-react-example/src/components/TransferStatus.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { useSubstrateState } from "../substrate-lib";
+
+function TransferStatus() {
+  const { transferStatus, transferStatusBlock, evmStatus, proposalExecution } =
+    useSubstrateState();
+  return (
+    <div>
+      {transferStatus && <div>Substrate transfer status: {transferStatus}</div>}
+      {transferStatusBlock && <div>Block: {transferStatusBlock}</div>}
+      {evmStatus && <div>EVM transfer status: {evmStatus}</div>}
+      {proposalExecution && (
+        <div>ProposalExecution tx: {proposalExecution}</div>
+      )}
+    </div>
+  );
+}
+export default TransferStatus;