Skip to content
This repository has been archived by the owner on May 8, 2023. It is now read-only.

Commit

Permalink
Make browser examples 95% more beautiful
Browse files Browse the repository at this point in the history
  • Loading branch information
@chmanie
chmanie committed Mar 27, 2023
1 parent d4ac1d0 commit 73094eb
Show file tree
Hide file tree
Showing 12 changed files with 394 additions and 170 deletions.
2 changes: 2 additions & 0 deletions examples/browser/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import '@picocss/pico';

import { ColonyRpcEndpoint } from '../../../src';

const addColonyRPC = () => {
Expand Down
45 changes: 30 additions & 15 deletions examples/browser/web/advanced.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,34 @@
<!DOCTYPE html>
<html>
<body>

<head>
<link href="index.css" rel="stylesheet">
</head>

<body>
<main class="container">
<h1>Colony SDK browser demo - create a team, move funds and make a payment</h1>
</body>
<p><b>1) Let's connect to the Colony first</b> <i style="color:red">Make sure you have the FUNDING and ADMINISTRATION permissions in the Root domain of that Colony</i></p>
<input type="text" id="address" placeholder="Colony address" />
<button type="button" id="button_connect">Connect</button>
<p><b>2) Next we create a team</b></p>
<button type="button" id="button_team">Add team</button>
<p><b>3) We need to move some funds to the new team.</b> <i style="color:red">Make sure the root colony has at least about 1 unit of the Colony's native token (see message below after connecting)</i></p>
<button type="button" id="button_fund">Fund new team with 0.66 tokens</button>
<p><b>4) Then, within that team, send someone some of the Colony's native tokens</b></p>
<input type="text" id="recipient" placeholder="Recipient" />
<button type="button" id="button_pay">Pay 0.42 tokens</button>
<p style="color:red" id="error"></p>
<p style="color:blue" id="result"></p>
<script src="advanced.js"></script>
<p><b>1) Let's connect to the Colony first</b> <i style="color:red">Make sure you have the FUNDING and
ADMINISTRATION permissions in the Root domain of that Colony</i></p>
<input type="text" id="address" placeholder="Colony address" />
<button type="button" id="button_connect">Connect</button>
<p><b>2) Next we create a team</b></p>
<button type="button" id="button_team">Add team</button>
<p><b>3) We need to move some funds to the new team.</b> <i style="color:red">Make sure the root colony has at least
about 1 unit of the Colony's native token (see message below after connecting)</i></p>
<button type="button" id="button_fund">Fund new team with 0.66 tokens</button>
<p><b>4) Then, within that team, send someone some of the Colony's native tokens</b></p>
<input type="text" id="recipient" placeholder="Recipient" />
<button type="button" id="button_pay">Pay 0.42 tokens</button>
<article>
<header>
<b>Message</b>
</header>
<p style="color:red" id="error"></p>
<p id="result"></p>
</article>
<script src="advanced.js"></script>
</main>
</body>

</html>
30 changes: 22 additions & 8 deletions examples/browser/web/basic.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,27 @@
<!DOCTYPE html>
<html>
<body>

<head>
<link href="index.css" rel="stylesheet">
</head>

<body>
<main class="container">
<h1>Colony SDK browser demo - basic</h1>
</body>
<p>Let's check the CLNY funding for a Colony</p>
<label for="address">Colony address:</label>
<input type="text" id="address" />
<button type="button" id="button">Check</button>
<p style="color:red" id="error"></p>
<p style="color:blue" id="result"></p>
<p>Let's check the CLNY funding for a Colony</p>
<label for="address">Colony address:
<input type="text" id="address" />
</label>
<button type="button" id="button">Check</button>
<article>
<header>
<b>Message</b>
</header>
<p style="color:red" id="error"></p>
<p id="result"></p>
</article>
</main>
<script src="basic.js"></script>
</body>

</html>
29 changes: 21 additions & 8 deletions examples/browser/web/events.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,26 @@
<!DOCTYPE html>
<html>
<body>

<head>
<link href="index.css" rel="stylesheet">
</head>

<body>
<main class="container">
<h1>Colony SDK browser demo - events</h1>
</body>
<p>Listen to Colony Events as they unfold...</p>
<label for="address">Colony address:</label>
<input type="text" id="address" />
<button type="button" id="button">Listen</button>
<p style="color:red" id="error"></p>
<p style="color:blue" id="result"></p>
<p>Listen to Colony Events as they unfold...</p>
<label for="address">Colony address:</label>
<input type="text" id="address" />
<button type="button" id="button">Listen</button>
<article>
<header>
<b>Message</b>
</header>
<p style="color:red" id="error"></p>
<p id="result"></p>
</article>
</main>
<script src="events.js"></script>
</body>

</html>
81 changes: 47 additions & 34 deletions examples/browser/web/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,52 @@
<!DOCTYPE html>
<html>
<body>

<head>
<link href="index.css" rel="stylesheet">
</head>

<body>
<main class="container">
<h1>Colony SDK browser demos</h1>
</body>
<p>See <a href="https://github.com/JoinColony/colonySDK">colonySDK</a> and <a href="https://github.com/JoinColony/colonyStarter">colonyStarter</a> for more information.</p>
<p>Check out the source code for the examples <a href="https://github.com/JoinColony/colonySDK/tree/main/examples/browser/src">here</a>.</p>
<p>These demos interact with LIVE Colonies on Gnosis chain. We recommend to use the <a href="#" id="add_rpc">Colony RPC endpoint</a> directly.</p>
<ul>
<li>
<a href="basic.html">Basic example (fetching funds from a Colony)</a>
</li>
<li>
<a href="metamask.html">MetaMask example (connecting to MetaMask)</a>
</li>
<li>
<a href="advanced.html">Advanced example (creating a domain within a Colony)</a>
</li>
<li>
<a href="events.html">Events example (listening to Colony events)</a>
</li>
<li>
<a href="motions.html">Motion workflow (connecting to a Demo Colony)</a>
</li>
</ul>
<p>These demos interact with a local development RPC endpoint (see <a href="https://colony.gitbook.io/colony-network/deploying-colony-locally" target="_blank">here</a> on how to set it up). MetaMask is not needed, the examples provide a wallet account.</p>
<ul>
<li>
<a href="local-basic.html">Basic example for local setup</a>
</li>
<li>
<a href="local-reputation.html">Reputation example (get reputation for a user)</a>
</li>
<li>
<a href="local-motions.html">Motion workflow</a>
</li>
</ul>
<p>See <a href="https://github.com/JoinColony/colonySDK">colonySDK</a> and <a
href="https://github.com/JoinColony/colonyStarter">colonyStarter</a> for more information.</p>
<p>Check out the source code for the examples <a
href="https://github.com/JoinColony/colonySDK/tree/main/examples/browser/src">here</a>.</p>
<p>These demos interact with LIVE Colonies on Gnosis chain. We recommend to use the <a href="#" id="add_rpc">Colony
RPC endpoint</a> directly.</p>
<ul>
<li>
<a href="basic.html">Basic example (fetching funds from a Colony)</a>
</li>
<li>
<a href="metamask.html">MetaMask example (connecting to MetaMask)</a>
</li>
<li>
<a href="advanced.html">Advanced example (creating a domain within a Colony)</a>
</li>
<li>
<a href="events.html">Events example (listening to Colony events)</a>
</li>
<li>
<a href="motions.html">Motion workflow (connecting to a Demo Colony)</a>
</li>
</ul>
<p>These demos interact with a local development RPC endpoint (see <a
href="https://colony.gitbook.io/colony-network/deploying-colony-locally" target="_blank">here</a> on how to set
it up). MetaMask is not needed, the examples provide a wallet account.</p>
<ul>
<li>
<a href="local-basic.html">Basic example for local setup</a>
</li>
<li>
<a href="local-reputation.html">Reputation example (get reputation for a user)</a>
</li>
<li>
<a href="local-motions.html">Motion workflow</a>
</li>
</ul>
</main>
<script src="index.js"></script>
</body>

</html>
41 changes: 31 additions & 10 deletions examples/browser/web/local-basic.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,36 @@
<!DOCTYPE html>
<html>
<body>

<head>
<link href="index.css" rel="stylesheet">
</head>

<body>
<main class="container">
<h1>Colony SDK browser demo - local deployment - check the MetaColony's funding</h1>
</body>
<p><b>First make sure that the Colony contracts are deployed locally and the Reputation Oracle is set up. See <a href="https://colony.gitbook.io/colony-network/guides/deploying-colony-locally" target="_blank">here</a> for more information</b></p>
<p>We'll be using wallet address 0xb77D57F4959eAfA0339424b83FcFaf9c15407461 to connect to the <b>locally deployed MetaColony</b>. Any transaction will automatically be signed as we have the private key hardcoded. No connection to MetaMask is needed.</p>
<p>Let's check the CLNY funding for the local <b>MetaColony</b>. <i style="color:red">Make sure to provide the correct address given in the `etherrouter-address.json` in the `colonyNetwork` directory.</i></p>
<label for="address">EtherRouter address:</label>
<input type="text" id="address" />
<button type="button" id="button">Check</button>
<p style="color:red" id="error"></p>
<p style="color:blue" id="result"></p>
<p><b>First make sure that the Colony contracts are deployed locally and the Reputation Oracle is set up. See <a
href="https://colony.gitbook.io/colony-network/guides/deploying-colony-locally" target="_blank">here</a> for
more
information</b></p>
<p>We'll be using wallet address 0xb77D57F4959eAfA0339424b83FcFaf9c15407461 to connect to the <b>locally deployed
MetaColony</b>. Any transaction will automatically be signed as we have the private key hardcoded. No connection
to
MetaMask is needed.</p>
<p>Let's check the CLNY funding for the local <b>MetaColony</b>. <i style="color:red">Make sure to provide the
correct
address given in the `etherrouter-address.json` in the `colonyNetwork` directory.</i></p>
<label for="address">EtherRouter address:</label>
<input type="text" id="address" />
<button type="button" id="button">Check</button>
<article>
<header>
<b>Message</b>
</header>
<p style="color:red" id="error"></p>
<p id="result"></p>
</article>
</main>
<script src="local-basic.js"></script>
</body>

</html>
Loading

0 comments on commit 73094eb

Please sign in to comment.