Merge pull request maticnetwork#18 from maticnetwork/add_web_example

Add example code for usage in web browser
anurag-arjun · Oct 31, 2018 · c4500f3 · c4500f3
2 parents 33d0cc6 + fdb80cf
commit c4500f3
Show file tree

Hide file tree

Showing 10 changed files with 7,207 additions and 4 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,6 +9,7 @@ module.exports = {
     process: true,
     module: true,
     setTimeout: true,
+    __dirname: true,
   },
   rules: {
     'space-before-function-paren': ['error', 'never'],

diff --git a/README.md b/README.md
@@ -51,7 +51,7 @@ const matic = new Matic({
 // matic.wallet = <private-key> // Use metamask provider or use WalletConnect provider instead.
 
 // get token address mapped with mainchain token address
-await matic.getMappedTokenAddress(
+const tokenAddressOnMatic = await matic.getMappedTokenAddress(
   tokenAddress // token address on mainchain
 )
 

diff --git a/examples/web/README.md b/examples/web/README.md
@@ -0,0 +1,18 @@
+# Web browser example
+
+## How to use
+
+### Clone the repo
+
+```bash
+git clone [email protected]:maticnetwork/matic.js.git
+```
+
+### Install and run:
+
+```bash
+cd examples/web
+npm install
+npm start
+```
+open http://localhost:8080 in the browser
diff --git a/examples/web/config.js b/examples/web/config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  'MATIC_PROVIDER': 'https://testnet.matic.network',
+  'PARENT_PROVIDER': 'https://kovan.infura.io/matic',
+  'ROOTCHAIN_ADDRESS': '0x24e01716a6ac34d5f2c4c082f553d86a557543a7',
+  'SYNCER_URL': 'https://eth-syncer.api.matic.network/api/v1',
+  'WATCHER_URL': 'https://eth-watcher.api.matic.network/api/v1',
+}
diff --git a/examples/web/index.html b/examples/web/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Maticjs Example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="dist/bundle.js"></script>
+</head>
+<body>
+  Check the console log
+</body>
+</html>
diff --git a/examples/web/main.js b/examples/web/main.js
@@ -0,0 +1,28 @@
+const Matic = require('maticjs')
+const config = require('./config')
+
+const token = '0xC4375B7De8af5a38a93548eb8453a498222C4fF2' // test token address
+const user = '0x7ed7f36694153ba6eff6ca6726b60f6e2bb17fcf' // test recepient address
+const amount = '10000000000000000'
+const from = '0x6e0c217de3235f1d8a95605d10bcc1b36ff7996f' // from address
+
+// Create object of Matic
+const matic = new Matic({
+  maticProvider: config.MATIC_PROVIDER,
+  parentProvider: config.PARENT_PROVIDER,
+  rootChainAddress: config.ROOTCHAIN_ADDRESS,
+  syncerUrl: config.SYNCER_URL,
+  watcherUrl: config.WATCHER_URL,
+})
+
+matic.wallet = '<private-key>'
+
+// Send Tokens
+matic.transferTokens(token, user, amount, {
+  from,
+  onTransactionHash: (resp) => {
+    // action on Transaction success
+    // eslint-disable-next-line
+    console.log('Transaction hash:', resp)
+  },
+})