feat: updated erc20 example (#84)

* 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

* 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

Co-authored-by: Nicolas Riquelme <[email protected]>

examples/erc20-react-example/README.md

@@ -0,0 +1,62 @@
+<p align="center"><a href="https://https://chainsafe.io/"><img width="250" title="Chainbridge UI" src='../../assets/full-logo.png'/></a></p>
+
+## Sygma SDK ERC20 React Example
+<p align="center">
+<img widht="700" src='./public/erc20-example-screen.png' alt="screen" />
+</p>
+
+This simple React application demonstrate the usage of our SDK methods, alongside with the [Sygma](https://github.com/sygmaprotocol/sygma-relayer) local setup.
+
+### Getting started
+#### Installing and building sdk
+Before running the erc20 example you need to clone the repo and then install dependencies:
+
+```bash
+git clone [email protected]:sygmaprotocol/sygma-sdk.git
+cd sygma-sdk
+yarn
+```
+
+then compile sdk with following command:
+```bash
+# from the repository root
+cd ./packages/sdk
+yarn tsc
+```
+
+
+#### Local setup
+To run our local setup please follow insturctions in [sygma-relayer repo](https://github.com/sygmaprotocol/sygma-relayer#local-environment)
+
+In the end you should have 2 geth nodes running on `localhost:8545` and `localhost:8547` and two relayers running
+
+### Running the react app
+first change directory to erc20 directory:
+
+```bash
+# from the repository root
+cd examples/erc20-react-example
+```
+
+Mint 99 ERC20 token for test:
+```bash
+# from examples/erc20-react-example
+yarn mintERC20
+```
+Please add private key `0xcc2c32b154490f09f70c1c8d4b997238448d649e0777495863db231c4ced3616`
+and erc20 token `0x1CcB4231f2ff299E1E049De76F0a1D2B415C563A` to metamask
+<p align="center">
+<img widht="200" src='./public/metamask0.png' alt="screen" />
+<img widht="200" src='./public/metamask2.png' alt="screen" />
+
+</p>
+
+
+run the command to start the app:
+```bash
+# from examples/erc20-react-example
+yarn start
+```
+and then you can open your browser on http://localhost:3001
+
+

examples/react-example/package.json → examples/erc20-react-example/package.json

@@ -1,9 +1,10 @@
 {
-  "name": "@buildwithsygma/sygma-sdk-react-example",
+  "name": "@buildwithsygma/sygma-sdk-erc20-react-example",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@buildwithsygma/sygma-sdk-core": "1.0.0",
+    "@buildwithsygma/sygma-sdk-core": "link:../packages/sdk",
+    "@buildwithsygma/sygma-contracts": "1.0.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
@@ -19,6 +20,7 @@
     "react-hook-form": "^7.30.0",
     "react-scripts": "5.0.1",
     "ts-node": "^10.7.0",
+    "ethers": "5.6.2",
     "typescript": "^4.6.3",
     "web-vitals": "^2.1.4",
     "web3": "^1.7.3"
@@ -27,7 +29,8 @@
     "start": "PORT=3001 BROWSER=none react-app-rewired start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "mintERC20": "ts-node ./src/scripts/mint.ts"
   },
   "eslintConfig": {
     "extends": [

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

@@ -14,167 +14,56 @@ import {
   FeeDataResult
 } from "@buildwithsygma/sygma-sdk-core";
 
-// TODO: MOVE THIS TO ENV
-const bridgeSetup: BridgeData = {
-  chain1: {
-    domainId: "1",
-    networkId: 422,
-    name: "Local EVM 1",
-    decimals: 18,
-    bridgeAddress: "0xF75ABb9ABED5975d1430ddCF420bEF954C8F5235",
-    erc20HandlerAddress: "0x7ec51Af51bf6f6f4e3C2E87096381B2cf94f6d74",
-    erc721HandlerAddress: "0x1cd88Fa5848389E4027d29B267BAB561300CEA2A",
-    rpcUrl: "http://localhost:8545",
-    tokens: [
-      {
-        type: "erc20",
-        address: "0xDA8556C2485048eee3dE91085347c3210785323c",
-        name: "csUSD",
-        symbol: "csUSD",
-        imageUri: "ETHIcon",
-        decimals: 18,
-        resourceId:
-          "0x0000000000000000000000000000000000000000000000000000000000000000",
-        feeSettings: {
-          type: "basic",
-          address: "0xA8254f6184b82D7307257966b95D7569BD751a90",
-        },
-      },
-      {
-        type: "erc721",
-        address: "0xd6D787253cc022E6839583aD0cBECfc9c60b581c",
-        name: "NFT",
-        symbol: "NFT",
-        imageUri: "ETHIcon",
-        decimals: 0,
-        resourceId:
-          "0x0000000000000000000000000000000000000000000000000000000000000200",
-        feeSettings: {
-          type: "basic",
-          address: "0xA8254f6184b82D7307257966b95D7569BD751a90",
-        },
-      },
-    ],
-  },
-  chain2: {
-    domainId: "2",
-    networkId: 1214,
-    name: "Local EVM 2",
-    decimals: 18,
-    bridgeAddress: "0xF75ABb9ABED5975d1430ddCF420bEF954C8F5235",
-    erc20HandlerAddress: "0x7ec51Af51bf6f6f4e3C2E87096381B2cf94f6d74",
-    erc721HandlerAddress: "0x1cd88Fa5848389E4027d29B267BAB561300CEA2A",
-    rpcUrl: "http://localhost:8547",
-    tokens: [
-      {
-        type: "erc20",
-        address: "0xDA8556C2485048eee3dE91085347c3210785323c",
-        name: "csUSD",
-        symbol: "csUSD",
-        imageUri: "ETHIcon",
-        decimals: 18,
-        resourceId:
-          "0x0000000000000000000000000000000000000000000000000000000000000000",
-        feeSettings: {
-          type: "basic",
-          address: "0xA8254f6184b82D7307257966b95D7569BD751a90",
-        },
-      },
-      {
-        type: "erc721",
-        address: "0xd6D787253cc022E6839583aD0cBECfc9c60b581c",
-        name: "NFT",
-        symbol: "NFT",
-        imageUri: "ETHIcon",
-        decimals: 0,
-        resourceId:
-          "0x0000000000000000000000000000000000000000000000000000000000000200",
-        feeSettings: {
-          type: "basic",
-          address: "0xA8254f6184b82D7307257966b95D7569BD751a90",
-        },
-      },
-    ],
-  },
-};
 
 const bridgeSetupList: SygmaBridgeSetupList = [
   {
     domainId: "1",
-    networkId: 422,
+    networkId: 1337,
     name: "Local EVM 1",
     decimals: 18,
-    bridgeAddress: "0xF75ABb9ABED5975d1430ddCF420bEF954C8F5235",
-    erc20HandlerAddress: "0x7ec51Af51bf6f6f4e3C2E87096381B2cf94f6d74",
-    erc721HandlerAddress: "0x1cd88Fa5848389E4027d29B267BAB561300CEA2A",
+    bridgeAddress: "0x6CdE2Cd82a4F8B74693Ff5e194c19CA08c2d1c68",
+    erc20HandlerAddress: "0x1ED1d77911944622FCcDDEad8A731fd77E94173e",
+    erc721HandlerAddress: "0x481f97f9C82a971B3844a422936a4d3c4082bF84",
     rpcUrl: "http://localhost:8545",
     tokens: [
       {
         type: "erc20",
-        address: "0xDA8556C2485048eee3dE91085347c3210785323c",
-        name: "csUSD",
-        symbol: "csUSD",
+        address: "0x1CcB4231f2ff299E1E049De76F0a1D2B415C563A",
+        name: "ERC20LRTST",
+        symbol: "ETHIcon",
         imageUri: "ETHIcon",
         decimals: 18,
         resourceId:
-          "0x0000000000000000000000000000000000000000000000000000000000000000",
-        feeSettings: {
-          type: "basic",
-          address: "0xA8254f6184b82D7307257966b95D7569BD751a90",
-        },
-      },
-      {
-        type: "erc721",
-        address: "0xd6D787253cc022E6839583aD0cBECfc9c60b581c",
-        name: "NFT",
-        symbol: "NFT",
-        imageUri: "ETHIcon",
-        decimals: 0,
-        resourceId:
-          "0x0000000000000000000000000000000000000000000000000000000000000200",
+          "0x0000000000000000000000000000000000000000000000000000000000000300",
         feeSettings: {
           type: "basic",
-          address: "0xA8254f6184b82D7307257966b95D7569BD751a90",
+          address: "0x78E5b9cEC9aEA29071f070C8cC561F692B3511A6",
         },
       },
     ],
   },
   {
     domainId: "2",
-    networkId: 1214,
+    networkId: 1338,
     name: "Local EVM 2",
     decimals: 18,
-    bridgeAddress: "0xF75ABb9ABED5975d1430ddCF420bEF954C8F5235",
-    erc20HandlerAddress: "0x7ec51Af51bf6f6f4e3C2E87096381B2cf94f6d74",
-    erc721HandlerAddress: "0x1cd88Fa5848389E4027d29B267BAB561300CEA2A",
+    bridgeAddress: "0x6CdE2Cd82a4F8B74693Ff5e194c19CA08c2d1c68",
+    erc20HandlerAddress: "0x1ED1d77911944622FCcDDEad8A731fd77E94173e",
+    erc721HandlerAddress: "0x481f97f9C82a971B3844a422936a4d3c4082bF84",
     rpcUrl: "http://localhost:8547",
     tokens: [
       {
         type: "erc20",
-        address: "0xDA8556C2485048eee3dE91085347c3210785323c",
-        name: "csUSD",
-        symbol: "csUSD",
+        address: "0x1CcB4231f2ff299E1E049De76F0a1D2B415C563A",
+        name: "ERC20LRTST",
+        symbol: "ETHIcon",
         imageUri: "ETHIcon",
         decimals: 18,
         resourceId:
-          "0x0000000000000000000000000000000000000000000000000000000000000000",
-        feeSettings: {
-          type: "basic",
-          address: "0xA8254f6184b82D7307257966b95D7569BD751a90",
-        },
-      },
-      {
-        type: "erc721",
-        address: "0xd6D787253cc022E6839583aD0cBECfc9c60b581c",
-        name: "NFT",
-        symbol: "NFT",
-        imageUri: "ETHIcon",
-        decimals: 0,
-        resourceId:
-          "0x0000000000000000000000000000000000000000000000000000000000000200",
+          "0x0000000000000000000000000000000000000000000000000000000000000300",
         feeSettings: {
           type: "basic",
-          address: "0xA8254f6184b82D7307257966b95D7569BD751a90",
+          address: "0x78E5b9cEC9aEA29071f070C8cC561F692B3511A6",
         },
       },
     ],
@@ -259,10 +148,11 @@ function App() {
   const watchTo = watch("to");
 
   useEffect(() => {
-    const setup = { bridgeSetupList, bridgeSetup };
-    const chainbridge = new Sygma(setup);
+    const setup = { bridgeSetupList };
+    const sygma = new Sygma(setup);
+    console.log("🚀 ~ file: App.tsx ~ line 153 ~ useEffect ~ sygma", sygma)
 
-    setSygmaInstance(chainbridge);
+    setSygmaInstance(sygma);
   }, []);
 
 
@@ -288,13 +178,13 @@ function App() {
     }
   }, [sygmaInstance, homeDepositNonce]);
 
-  const getAccountData = async (chainbridge: Sygma) => {
+  const getAccountData = async (sygma: Sygma) => {
     try {
       const balance =
-        (await chainbridge.getSignerBalance("chain1")) ?? BigNumber.from("0");
-      const address = await chainbridge.getSignerAddress("chain1");
-      const gasPrice = await chainbridge.getSignerGasPrice("chain1");
-      const { balanceOfTokens, tokenName } = await chainbridge.getTokenInfo(
+        (await sygma.getSignerBalance("chain1")) ?? BigNumber.from("0");
+      const address = await sygma.getSignerAddress("chain1");
+      const gasPrice = await sygma.getSignerGasPrice("chain1");
+      const { balanceOfTokens, tokenName } = await sygma.getTokenInfo(
         "chain1"
       );
       console.log("signer balance", utils.formatEther(balance!));
@@ -335,6 +225,8 @@ function App() {
     if (metaIsConnected && sygmaInstance !== undefined) {
       handleConnect();
       getAccountData(sygmaInstance! as Sygma);
+      setValue("from", sygmaInstance.bridgeSetup?.chain1.domainId!)
+      setValue("to", sygmaInstance.bridgeSetup?.chain2.domainId!)
     }
   }, [metaIsConnected]);
 
@@ -441,7 +333,7 @@ function App() {
   const buttonStyle: CSSProperties = {
     display: "flex",
     alignSelf: "center",
-    width: "20%",
+    width: "23%",
     padding: "10px",
     marginTop: "15px",
     justifyContent: "center",
@@ -549,7 +441,7 @@ function App() {
                   borderRadius: "5px",
                 }}
               >
-                Bridge!
+                Approve & transfer
               </button>
             </div>
           </form>

examples/erc20-react-example/src/scripts/mint.ts

@@ -0,0 +1,28 @@
+import {
+  ERC20PresetMinterPauser__factory
+} from '@buildwithsygma/sygma-contracts';
+import { utils, BigNumber, ethers } from 'ethers';
+
+async function mintERC20() {
+  const provider = new ethers.providers.JsonRpcProvider('http://localhost:8547');
+  const wallet = ethers.Wallet.fromMnemonic('black toward wish jar twin produce remember fluid always confirm bacon slush', "m/44'/60'/0'/0/0")
+  console.log('wallet address: ', wallet.address)
+  console.log('wallet private key: ', wallet.privateKey)
+  const signer = wallet.connect(provider);
+
+  const tokenContract = ERC20PresetMinterPauser__factory.connect(
+    '0x1CcB4231f2ff299E1E049De76F0a1D2B415C563A',
+    signer,
+  );
+  // console.log("🚀 ~ file: feeOracle.ts ~ line 172 ~ testFeeOracle ~ tokenContract", tokenContract)
+  const mintTx = await tokenContract.mint(wallet.address, ethers.utils.parseUnits("99.0", 18) )
+  await mintTx.wait(1)
+  const balance = await tokenContract.balanceOf(wallet.address);
+  console.log('🚀 ~ file: feeOracle.ts ~ line 174 ~ testFeeOracle ~ balance', balance);
+  const balanceFormatted = ethers.utils.formatUnits(balance, 18);
+  console.log(
+    '🚀 ~ file: feeOracle.ts ~ line 175 ~ testFeeOracle ~ balanceFormatted',
+    balanceFormatted,
+  );
+}
+mintERC20();

examples/react-example/tsconfig.json → examples/erc20-react-example/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
     "lib": [
       "dom",
       "dom.iterable",
@@ -13,7 +13,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
+    "module": "CommonJS",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,