Skip to content

Commit

Permalink
refactor(examples-browser): rearrange files and docs
Browse files Browse the repository at this point in the history
  • Loading branch information
davidyuk committed Apr 24, 2021
1 parent d34d818 commit 985e3b9
Show file tree
Hide file tree
Showing 57 changed files with 102 additions and 320 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
## How to build an Aepp using new Wallet API
## How to build an Aepp using RPC API

This guide describing the process of building Aepp using the new Wallet<->Aepp integration API
The full example of implementation you can find here: [AEPP example](../../examples/browser/vuejs/connect-two-ae/aepp)
This guide describing the process of building Aepp using the Wallet<->Aepp integration API
The full example of implementation you can find here: [AEPP example](../../examples/browser/aepp)
### First we need to initialize our `Aepp` stamp

```js
Expand Down Expand Up @@ -61,7 +61,7 @@ The full example of implementation you can find here: [AEPP example](../../examp
}
```

### The last step is to connect to the Waellet
### The last step is to connect to the Wallet

```js
async function connectToWallet (wallet) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
## How to build a wallet

This guide describing the process of building Waellet using the new Wallet<->Aepp integration API
This guide describing the process of building Wallet using the new Wallet<->Aepp integration API
The full example of implementation you can find here:
- [Web Waellet](../../examples/browser/vuejs/connect-two-ae/identity)
- [Extension Waellet](../../examples/browser/extension)

### First we need to initialize our `Aepp` stamp

- [iframe-based Wallet](../../examples/browser/wallet-iframe)
- [Wallet WebExtension](../../examples/browser/wallet-web-extension)

### Extension wallet

Expand Down Expand Up @@ -56,8 +53,8 @@ const readyStateCheckInterval = setInterval(function () {
}, 10)

```
- Then we need to initialize `Waellet` stamp in our extension and subscribe for new `runtime` connection's
After connection will be established we can start to send `announcePresence` message to the `page` to let `Aepp` know about `Waellet`
- Then we need to initialize `Wallet` stamp in our extension and subscribe for new `runtime` connection's
After connection will be established we can start to send `announcePresence` message to the `page` to let `Aepp` know about `Wallet`
```js
// background.js

Expand Down Expand Up @@ -167,7 +164,7 @@ RpcWallet({

```

### Web Waellet (Iframe/Reverse Iframe)
### Web Wallet (Iframe/Reverse Iframe)

- This works the same as extension but without `Content Script bridge` in between

Expand Down
2 changes: 1 addition & 1 deletion docs/guides/quick-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ If you're using bundling/compilation techniques (eg. `webpack`), please continue
Add the latest `@aeternity/aepp-sdk` release from npmjs.com to your project using one of these commands

```bash
# install using npm...or yarn or pnpm
# install using npm
npm i @aeternity/aepp-sdk
```

Expand Down
134 changes: 9 additions & 125 deletions examples/README.md
Original file line number Diff line number Diff line change
@@ -1,129 +1,13 @@
# ⚡ Examples

This folder contains examples of maintained code samples that you can run autonomously.
This folder contains examples of code samples that you can run autonomously.
Create a [new issue](https://github.com/aeternity/aepp-sdk-js/issues/new) to suggest another example.

## VueJS (maintained) Examples to run in the `browser`
## Run in the browser
1. [Aepp](browser/connect-wallet-aepp) (VueJS)
2. [iframe-based Wallet](browser/wallet-iframe) (VueJS)
3. [Wallet WebExtension](browser/wallet-web-extension)

1. VueJS [Wallet + Aepp RPC setup](browser/vuejs/connect-two-ae)
2. [Suggest another example](https://github.com/aeternity/aepp-sdk-js/issues/new)

## NodeJS (maintained and tested) Examples to run in the `terminal`

1. [Simple Contract](../docs/examples/node/aecontract.md) - [Code](node/aecontract.js)
2. [Wallet](../docs/examples/node/aewallet.md) - [Code](node/aewallet.js)
3. [Suggest another example](https://github.com/aeternity/aepp-sdk-js/issues/new)

## Quick Standalone _Browser_ Example
> This example interacts with aeternity's blockchain's [**Universal flavor**](docs/usage.md) (_all_ SDK's functionalities, in the Browser)
```js
// Start the instance using Universal flavor
import Ae from '@aeternity/aepp-sdk/es/ae/universal'
import Node from '@aeternity/aepp-sdk/es/node'

// const node1 = await Node({ url })

Ae({
nodes: [
// { name: 'someNode', instance: node1 },
// node2
],
compilerUrl: 'https://compiler.aepps.com',
accounts: [
MemoryAccount({ keypair: { secretKey: 'A_PRIV_KEY', publicKey: 'A_PUB_ADDRESS' } }),
// acc2
],
address: 'SELECTED_ACCOUNT_PUB',
networkId: 'ae_uat' // or any other networkId your client should connect to
}).then(ae => {

// Interacting with the blockchain client
// getting the latest block height
ae.height().then(height => {
// logs current height
console.log('height', height)
}).catch(e => {
// logs error
console.log(e)
})

// getting the balance of a public address
ae.balance('A_PUB_ADDRESS').then(balance => {
// logs current balance of "A_PUB_ADDRESS"
console.log('balance', balance)
}).catch(e => {
// logs error
console.log(e)
})
})
```
## Quick _Browser_ Examples for:
### 1. Wallet Example (_only_ Wallet's functionalities)
> interact with aeternity's blockchain's [**Wallet flavor**](docs/usage.md) – For _Wallet_ development
> You can find a more [complete example using VueJS here](browser/vuejs/connect-two-ae/README.md)

```js
// Start the instance using Wallet flavor
import Wallet from '@aeternity/aepp-sdk/es/ae/wallet'
const walletBalance

// Simple function to Guard SDK actions
const confirmDialog = function (method, params, {id}) {
return Promise.resolve(window.confirm(`User ${id} wants to run ${method} ${params}`))
}

Wallet({
nodes: [
// { name: 'someNode', instance: node1 },
// mode2
],
compilerUrl: 'https://compiler.aepps.com',
accounts: [
MemoryAccount({
keypair: {
secretKey: 'secr3tKeYh3RE',
publicKey: 'ak_pUbL1cH4sHHer3'
}
})
],
address: 'ak_pUbL1cH4sHHer3',
onTx: confirmDialog,
onChain: confirmDialog,
onAccount: confirmDialog,
onContract: confirmDialog,
networkId: 'ae_uat' // or any other networkId your client should connect to
}).then(ae => {

// Interact with the blockchain!
ae.balance(this.pub).then(balance => {
walletBalance = balance
}).catch(e => {
walletBalance = 0
})
})
```

### 2. Aepp Example (Aepp <--> Wallet via RPC)
> interact with aeternity's blockchain's [**Aepp flavor**](docs/usage.md) – For _Aepps_ development AKA DApp development
> You can find a more [complete example using VueJS here](browser/vuejs/connect-two-ae/README.md)

```js
// Start the instance using Aepp flavor
import Aepp from '@aeternity/aepp-sdk/es/ae/aepp'
const pubKey

// Here, we're not initialising anything, assuming that this is an Aepp (DApp)
// working inside an Iframe of a "Wallet flavored" JS App
Aepp().then(ae => {

// Interact with the blockchain!
ae.address()
.then(address => {
//get address of the Wallet used by this Aepp
pubKey = address
})
.catch(e => { console.log(`Rejected: ${e}`) })
})
```
## Run in the terminal (NodeJS)
1. [Simple Contract](../docs/examples/node/contract.md) - [Code](node/contract.js)
2. [Wallet](../docs/examples/node/wallet.md) - [Code](node/wallet.js)
27 changes: 27 additions & 0 deletions examples/browser/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# How to Connect Wallet to Aepp using Aeternity's JS SDK

## Introduction
In aeternity ecosystem, the app that has access to user's private keys and grants other apps
access to them is called wallet. Respectively, the app that is granted access is called aepp.

This folder has been created to **showcase the aeternity SDK integration** to both wallets and aepps.

## Setup info
If you are trying these examples after checking out the entire Aepp-SDK repo (this repo),
you want to first run `npm install`, from the repo root, to get all the SDK dependencies installed,
and only then, move to individual apps installations.

## Available examples

### 1. Aepp
The Sample [Aepp](aepp) project (Distributed App or dapp) shows how you can create a simple Aeternity Aepp,
dependent on a Wallet, in this case: offering the possibility to work with contracts.

### 2. Wallet WebExtension
The [Wallet WebExtension](wallet-web-extension) example project shows how you can create a simple
Aeternity Wallet as a Chrome/Firefox browser extension. This approach is actively used in
[Superhero Wallet](https://github.com/aeternity/superhero-wallet).

### 3. iframe-based Wallet
The [Wallet](wallet-iframe) example project shows how you can create a simple Aeternity Wallet
that opens aepps in iframe. This approach is actively used in [Base aepp](https://github.com/aeternity/aepp-base).
File renamed without changes.
14 changes: 14 additions & 0 deletions examples/browser/aepp/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Sample Aepp for Contracts

## Overview
This is a sample Aepp that compiles contracts using the Aeternity JavaScript SDK.

### How it works
1. Choose the wallet example from [examples](..) folder (the simplest is [iframe-based Wallet](../wallet-iframe))
2. Start the wallet according to its readme
3. Start this Aepp, which will start on port [9001](http://localhost:9001)
4. Connect this Aepp to a choosed wallet according to its readme

## Installation and running
1. Install required dependencies with `npm install`
1. Start the application `npm run start:dev`
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<div class="w-full p-4 flex flex-col">
<h1 class="mb-4">Your Aepp</h1>
<h1 class="mb-4">Simple Aepp</h1>

<div class="border">
<div class="bg-green w-full flex flex-row font-mono border border-b">
<div class="p-2 w-1/4">
Public Key <small>(from Wallet Aepp)</small>
Public Key <small>(from Wallet)</small>
</div>
<div v-if="addressResponse" class="p-2 w-3/4 bg-grey-lightest break-words">
{{addressResponse | responseToString}}
Expand Down Expand Up @@ -332,7 +332,7 @@
window !== window.parent || await this.getReverseWindow()
this.client = await RpcAepp({
name: 'AEPP',
name: 'Simple Aepp',
nodes: [
{ name: 'ae_uat', instance: await Node({ url: TEST_NET_NODE_URL }) },
{ name: 'ae_mainnet', instance: await Node({ url: MAIN_NET_NODE_INTERNAL_URL }) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Wallet Aepp Example</title>
<meta name="description" content="Wallet Aepp Example">
<title>Simple Aepp</title>
<!-- CSS files will be injected here by WebPack -->
</head>
<body>
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ module.exports = {
mode: process.env.NODE_ENV === 'prod' ? 'production' : 'development',
resolve: {
alias: {
AE_SDK_MODULES: '../../../../../../../src/'
AE_SDK_MODULES: '../../../../../es/'
}
},
entry: {
Expand Down
22 changes: 0 additions & 22 deletions examples/browser/extension/src/popup.html

This file was deleted.

22 changes: 0 additions & 22 deletions examples/browser/vuejs/connect-two-ae/README.md

This file was deleted.

59 changes: 0 additions & 59 deletions examples/browser/vuejs/connect-two-ae/aepp/README.md

This file was deleted.

Loading

0 comments on commit 985e3b9

Please sign in to comment.