From 985e3b96afab63f00022671afe4d27bb6f6a451b Mon Sep 17 00:00:00 2001 From: Denis Davidyuk Date: Sat, 24 Apr 2021 15:59:13 +0300 Subject: [PATCH] refactor(examples-browser): rearrange files and docs --- ...new-wallet-api.md => how-to-build-aepp.md} | 8 +- ...or-extension.md => how-to-build-wallet.md} | 15 +- docs/guides/quick-start.md | 2 +- examples/README.md | 134 ++---------------- examples/browser/README.md | 27 ++++ .../{vuejs/connect-two-ae => }/aepp/.babelrc | 0 examples/browser/aepp/README.md | 14 ++ .../connect-two-ae => }/aepp/package.json | 0 .../aepp/postcss.config.js | 0 .../connect-two-ae => }/aepp/src/App.vue | 0 .../connect-two-ae => }/aepp/src/account.js | 0 .../aepp/src/components/Home.vue | 6 +- .../connect-two-ae => }/aepp/src/index.html | 3 +- .../connect-two-ae => }/aepp/src/index.js | 0 .../connect-two-ae => }/aepp/src/main.css | 0 .../connect-two-ae => }/aepp/src/router.js | 0 .../connect-two-ae => }/aepp/src/store.js | 0 .../connect-two-ae => }/aepp/tailwind.js | 0 .../aepp/webpack.config.js | 2 +- examples/browser/extension/src/popup.html | 22 --- .../browser/vuejs/connect-two-ae/README.md | 22 --- .../vuejs/connect-two-ae/aepp/README.md | 59 -------- .../vuejs/connect-two-ae/identity/README.md | 61 -------- .../identity => wallet-iframe}/.babelrc | 0 examples/browser/wallet-iframe/README.md | 13 ++ .../identity => wallet-iframe}/package.json | 0 .../postcss.config.js | 0 .../identity => wallet-iframe}/src/App.vue | 0 .../identity => wallet-iframe}/src/account.js | 0 .../src/components/Home.vue | 4 +- .../identity => wallet-iframe}/src/index.html | 3 +- .../identity => wallet-iframe}/src/index.js | 0 .../identity => wallet-iframe}/src/main.css | 0 .../identity => wallet-iframe}/src/router.js | 0 .../identity => wallet-iframe}/src/store.js | 0 .../identity => wallet-iframe}/tailwind.js | 0 .../webpack.config.js | 2 +- .../LICENSE.md | 0 .../README.md | 2 +- .../package.json | 0 .../src/background.html | 0 .../src/css/options.css | 0 .../src/css/popup.css | 0 .../src/img/icon-128.png | Bin .../src/img/icon-34.png | Bin .../src/js/background.js | 2 +- .../src/js/inject.js | 0 .../src/js/options.js | 0 .../src/js/popup.js | 0 .../src/manifest.json | 2 +- .../src/options.html | 0 .../wallet-web-extension/src/popup.html | 12 ++ .../utils/build.js | 0 .../utils/env.js | 0 .../utils/webserver.js | 0 .../webpack.config.js | 2 +- greenkeeper.json | 5 +- 57 files changed, 102 insertions(+), 320 deletions(-) rename docs/guides/{how-to-build-aepp-using-new-wallet-api.md => how-to-build-aepp.md} (92%) rename docs/guides/{how-to-build-an-wallet-app-or-extension.md => how-to-build-wallet.md} (95%) create mode 100644 examples/browser/README.md rename examples/browser/{vuejs/connect-two-ae => }/aepp/.babelrc (100%) create mode 100644 examples/browser/aepp/README.md rename examples/browser/{vuejs/connect-two-ae => }/aepp/package.json (100%) rename examples/browser/{vuejs/connect-two-ae => }/aepp/postcss.config.js (100%) rename examples/browser/{vuejs/connect-two-ae => }/aepp/src/App.vue (100%) rename examples/browser/{vuejs/connect-two-ae => }/aepp/src/account.js (100%) rename examples/browser/{vuejs/connect-two-ae => }/aepp/src/components/Home.vue (99%) rename examples/browser/{vuejs/connect-two-ae => }/aepp/src/index.html (81%) rename examples/browser/{vuejs/connect-two-ae => }/aepp/src/index.js (100%) rename examples/browser/{vuejs/connect-two-ae => }/aepp/src/main.css (100%) rename examples/browser/{vuejs/connect-two-ae => }/aepp/src/router.js (100%) rename examples/browser/{vuejs/connect-two-ae => }/aepp/src/store.js (100%) rename examples/browser/{vuejs/connect-two-ae => }/aepp/tailwind.js (100%) rename examples/browser/{vuejs/connect-two-ae => }/aepp/webpack.config.js (98%) delete mode 100644 examples/browser/extension/src/popup.html delete mode 100644 examples/browser/vuejs/connect-two-ae/README.md delete mode 100644 examples/browser/vuejs/connect-two-ae/aepp/README.md delete mode 100644 examples/browser/vuejs/connect-two-ae/identity/README.md rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/.babelrc (100%) create mode 100644 examples/browser/wallet-iframe/README.md rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/package.json (100%) rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/postcss.config.js (100%) rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/src/App.vue (100%) rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/src/account.js (100%) rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/src/components/Home.vue (99%) rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/src/index.html (81%) rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/src/index.js (100%) rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/src/main.css (100%) rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/src/router.js (100%) rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/src/store.js (100%) rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/tailwind.js (100%) rename examples/browser/{vuejs/connect-two-ae/identity => wallet-iframe}/webpack.config.js (98%) rename examples/browser/{extension => wallet-web-extension}/LICENSE.md (100%) rename examples/browser/{extension => wallet-web-extension}/README.md (73%) rename examples/browser/{extension => wallet-web-extension}/package.json (100%) rename examples/browser/{extension => wallet-web-extension}/src/background.html (100%) rename examples/browser/{extension => wallet-web-extension}/src/css/options.css (100%) rename examples/browser/{extension => wallet-web-extension}/src/css/popup.css (100%) rename examples/browser/{extension => wallet-web-extension}/src/img/icon-128.png (100%) rename examples/browser/{extension => wallet-web-extension}/src/img/icon-34.png (100%) rename examples/browser/{extension => wallet-web-extension}/src/js/background.js (99%) rename examples/browser/{extension => wallet-web-extension}/src/js/inject.js (100%) rename examples/browser/{extension => wallet-web-extension}/src/js/options.js (100%) rename examples/browser/{extension => wallet-web-extension}/src/js/popup.js (100%) rename examples/browser/{extension => wallet-web-extension}/src/manifest.json (97%) rename examples/browser/{extension => wallet-web-extension}/src/options.html (100%) create mode 100644 examples/browser/wallet-web-extension/src/popup.html rename examples/browser/{extension => wallet-web-extension}/utils/build.js (100%) rename examples/browser/{extension => wallet-web-extension}/utils/env.js (100%) rename examples/browser/{extension => wallet-web-extension}/utils/webserver.js (100%) rename examples/browser/{extension => wallet-web-extension}/webpack.config.js (98%) diff --git a/docs/guides/how-to-build-aepp-using-new-wallet-api.md b/docs/guides/how-to-build-aepp.md similarity index 92% rename from docs/guides/how-to-build-aepp-using-new-wallet-api.md rename to docs/guides/how-to-build-aepp.md index d024be01c2..4bb98e547a 100644 --- a/docs/guides/how-to-build-aepp-using-new-wallet-api.md +++ b/docs/guides/how-to-build-aepp.md @@ -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 @@ -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) { diff --git a/docs/guides/how-to-build-an-wallet-app-or-extension.md b/docs/guides/how-to-build-wallet.md similarity index 95% rename from docs/guides/how-to-build-an-wallet-app-or-extension.md rename to docs/guides/how-to-build-wallet.md index d3d283acc8..7c19e852ef 100644 --- a/docs/guides/how-to-build-an-wallet-app-or-extension.md +++ b/docs/guides/how-to-build-wallet.md @@ -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 @@ -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 @@ -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 diff --git a/docs/guides/quick-start.md b/docs/guides/quick-start.md index 86aa78f1b1..71834bc648 100644 --- a/docs/guides/quick-start.md +++ b/docs/guides/quick-start.md @@ -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 ``` diff --git a/examples/README.md b/examples/README.md index 37707fe656..efead86f5c 100644 --- a/examples/README.md +++ b/examples/README.md @@ -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) diff --git a/examples/browser/README.md b/examples/browser/README.md new file mode 100644 index 0000000000..242322e196 --- /dev/null +++ b/examples/browser/README.md @@ -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). diff --git a/examples/browser/vuejs/connect-two-ae/aepp/.babelrc b/examples/browser/aepp/.babelrc similarity index 100% rename from examples/browser/vuejs/connect-two-ae/aepp/.babelrc rename to examples/browser/aepp/.babelrc diff --git a/examples/browser/aepp/README.md b/examples/browser/aepp/README.md new file mode 100644 index 0000000000..eb3486f115 --- /dev/null +++ b/examples/browser/aepp/README.md @@ -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` diff --git a/examples/browser/vuejs/connect-two-ae/aepp/package.json b/examples/browser/aepp/package.json similarity index 100% rename from examples/browser/vuejs/connect-two-ae/aepp/package.json rename to examples/browser/aepp/package.json diff --git a/examples/browser/vuejs/connect-two-ae/aepp/postcss.config.js b/examples/browser/aepp/postcss.config.js similarity index 100% rename from examples/browser/vuejs/connect-two-ae/aepp/postcss.config.js rename to examples/browser/aepp/postcss.config.js diff --git a/examples/browser/vuejs/connect-two-ae/aepp/src/App.vue b/examples/browser/aepp/src/App.vue similarity index 100% rename from examples/browser/vuejs/connect-two-ae/aepp/src/App.vue rename to examples/browser/aepp/src/App.vue diff --git a/examples/browser/vuejs/connect-two-ae/aepp/src/account.js b/examples/browser/aepp/src/account.js similarity index 100% rename from examples/browser/vuejs/connect-two-ae/aepp/src/account.js rename to examples/browser/aepp/src/account.js diff --git a/examples/browser/vuejs/connect-two-ae/aepp/src/components/Home.vue b/examples/browser/aepp/src/components/Home.vue similarity index 99% rename from examples/browser/vuejs/connect-two-ae/aepp/src/components/Home.vue rename to examples/browser/aepp/src/components/Home.vue index c619aa9f0e..c40c3c14ef 100644 --- a/examples/browser/vuejs/connect-two-ae/aepp/src/components/Home.vue +++ b/examples/browser/aepp/src/components/Home.vue @@ -1,11 +1,11 @@