added 2 sample project in /examples

.github/CODEOWNERS

@@ -4,6 +4,8 @@
 /.github/                                       @fuxingloh @monstrobishi
 /.husky/                                        @fuxingloh @monstrobishi
 
+/examples/                                      @fuxingloh
+
 /packages/jellyfish/                            @fuxingloh @canonbrother
 /packages/jellyfish-address/                    @fuxingloh @ivan-zynesis
 

.github/governance.yml

@@ -38,6 +38,7 @@ issue:
         - core
         - workflow
         - website
+        - examples
         - jellyfish
         - jellyfish-address
         - jellyfish-api-core

.github/labeler.yml

@@ -11,6 +11,11 @@ labels:
     matcher:
       files: "website/**"
 
+  - label: area/examples
+    sync: true
+    matcher:
+      files: "examples/**"
+
   - label: area/jellyfish
     sync: true
     matcher:

.github/labels.yml

@@ -56,6 +56,8 @@
   name: area/workflow
 - color: fbca04
   name: area/website
+- color: fbca04
+  name: area/examples
 - color: fbca04
   name: area/jellyfish
 - color: fbca04

.gitignore

@@ -23,6 +23,9 @@ parcel-bundle-reports
 
 # node_modules
 node_modules
+package-lock.json
+!/package-lock.json
+yarn.lock
 
 # dist & pack
 dist

examples/ocean-dex-api/.gitignore

@@ -0,0 +1,29 @@
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+
+# node_modules
+node_modules
+
+# dist & pack
+dist
+*.tgz
+
+# debug log
+lerna-debug.log
+
+coverage
+
+# vscode
+.vscode
+
+# typescript
+tsconfig.build.tsbuildinfo
+
+# Level
+.next

examples/ocean-dex-api/README.md

@@ -0,0 +1,25 @@
+# Ocean DEX API
+
+This is a very simple example to fetch live DEX Pool Pair information from `ocean.defichain.com`.
+
+The ocean API is a publicly available endpoint to provide DeFiChain developers access to a fleet of highly available
+data nodes powered by the jellyfish ecosystem.
+
+> https://github.com/DeFiCh/whale/tree/main/packages/whale-api-client/src/api
+
+## How to use this example?
+
+This example project is created with [vercel/next.js](https://github.com/vercel/next.js). You can clone
+this `examples/ocean-dex-api` project and get started via `npm i` and `npm start`.
+
+Alternatively, you can bootstrap a production grade React applications and install `@defichain/whale-api-client`:
+
+```
+npx create-next-app
+npm i @defichain/whale-api-client
+# or
+yarn create next-app
+yarn add @defichain/whale-api-client
+```
+
+

examples/ocean-dex-api/package.json

@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@defichain/whale-api-client": "latest",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  }
+}

examples/ocean-dex-api/pages/index.jsx

@@ -0,0 +1,55 @@
+import { WhaleApiClient } from '@defichain/whale-api-client'
+
+export default function Index ({ pairs }) {
+  return (
+    <>
+      <h1>DEX Pool Pairs</h1>
+
+      <p>
+        This is a very simple example to fetch live DEX Pool Pair information from ocean.defichain.com.
+      </p>
+
+      <table className="table">
+        <thead>
+        <th>ID</th>
+        <th>Pair Symbol</th>
+        <th>Left Symbol</th>
+        <th>Left Reserve</th>
+        <th>Right Symbol</th>
+        <th>Right Reserve</th>
+        <th>APY</th>
+        </thead>
+
+        <tbody>
+        {pairs.map(pair => {
+          return (
+            <tr>
+              <td>{pair.id}</td>
+              <td>{pair.symbol}</td>
+              <td>{pair.tokenA.symbol}</td>
+              <td>{pair.tokenA.reserve}</td>
+              <td>{pair.tokenB.symbol}</td>
+              <td>{pair.tokenB.reserve}</td>
+              <td>{pair.apr.total * 100}%</td>
+            </tr>
+          )
+        })}
+        </tbody>
+      </table>
+    </>
+  )
+}
+
+export async function getStaticProps () {
+  const api = new WhaleApiClient({
+    version: 'v0',
+    network: 'mainnet',
+    url: 'https://ocean.defichain.com'
+  })
+
+  return {
+    props: {
+      pairs: await api.poolpairs.list()
+    }
+  }
+}

examples/ocean-masternodes-api/.gitignore

@@ -0,0 +1,29 @@
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+
+# node_modules
+node_modules
+
+# dist & pack
+dist
+*.tgz
+
+# debug log
+lerna-debug.log
+
+coverage
+
+# vscode
+.vscode
+
+# typescript
+tsconfig.build.tsbuildinfo
+
+# Level
+.next

examples/ocean-masternodes-api/README.md

@@ -0,0 +1,25 @@
+# Ocean Masternodes API
+
+This is a very simple example to fetch Masternode information from `ocean.defichain.com` with pagination.
+
+The ocean API is a publicly available endpoint to provide DeFiChain developers access to a fleet of highly available
+data nodes powered by the jellyfish ecosystem.
+
+> https://github.com/DeFiCh/whale/tree/main/packages/whale-api-client/src/api
+
+## How to use this example?
+
+This example project is created with [vercel/next.js](https://github.com/vercel/next.js). You can clone
+this `examples/ocean-dex-api` project and get started via `npm i` and `npm start`.
+
+Alternatively, you can bootstrap a production grade React applications and install `@defichain/whale-api-client`:
+
+```
+npx create-next-app
+npm i @defichain/whale-api-client
+# or
+yarn create next-app
+yarn add @defichain/whale-api-client
+```
+
+

examples/ocean-masternodes-api/package.json

@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@defichain/whale-api-client": "latest",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  }
+}

examples/ocean-masternodes-api/pages/index.jsx

@@ -0,0 +1,75 @@
+import { WhaleApiClient } from '@defichain/whale-api-client'
+import { useState } from 'react'
+
+const api = new WhaleApiClient({
+  version: 'v0',
+  network: 'mainnet',
+  url: 'https://ocean.defichain.com'
+})
+
+export default function Index ({
+  masternodes,
+  nextToken
+}) {
+  const [list, setList] = useState(masternodes)
+  const [token, setToken] = useState(nextToken)
+
+  async function loadMore () {
+    if (next === undefined) {
+      return
+    }
+    const response = await api.masternodes.list(60, token)
+    setToken(response.nextToken)
+    setList([
+      ...list,
+      ...response
+    ])
+  }
+
+  return (
+    <>
+      <h1>DeFiChain Masternode</h1>
+
+      <p>
+        This is a very simple example to fetch Masternode information from ocean.defichain.com with pagination.
+      </p>
+
+      <table className="table">
+        <thead>
+        <th>Owner</th>
+        <th>Operator</th>
+        <th>TimeLock Weeks</th>
+        <th>Minted Blocks</th>
+        <th>State</th>
+        </thead>
+
+        <tbody>
+        {list.map(masternode => {
+          return (
+            <tr key={masternode.id}>
+              <td>{masternode.owner.address}</td>
+              <td>{masternode.operator.address}</td>
+              <td>{masternode.timelock}</td>
+              <td>{masternode.mintedBlocks}</td>
+              <td>{masternode.state}</td>
+            </tr>
+          )
+        })}
+        </tbody>
+      </table>
+
+      <button onClick={loadMore}>Load More</button>
+    </>
+  )
+}
+
+export async function getStaticProps () {
+  // Due to current limitations, we only allow 60 request per page
+  const response = await api.masternodes.list(60)
+  return {
+    props: {
+      masternodes: response,
+      nextToken: response.nextToken
+    }
+  }
+}