-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(wallet-web-extension): use vue-cli-plugin-browser-extension
- Loading branch information
Showing
28 changed files
with
258 additions
and
362 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| { | ||
| "name": "wallet", | ||
| "name": "wallet-iframe", | ||
| "version": "0.1.0", | ||
| "private": true, | ||
| "scripts": { | ||
|
|
||
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,17 @@ | ||
| # AE-Wallet-Extension-POC | ||
| # WebExtension-based wallet | ||
|
|
||
| How to build and install: | ||
| ## Overview | ||
| This is a sample wallet as an WebExtension. It works with æpp opened in a browser where it is installed. | ||
|
|
||
| 1. Do `npm install` after add your keyPair in src/background.js | ||
| 2. Build with `npm run build` | ||
| 3. Enable developer tools in chrome and load the `dist` folder using `Load unpacked` | ||
| 4. You are now all set to Rock 'n' Roll. | ||
| ### How it works | ||
| 1. Install this wallet to Chrome or Firefox | ||
| 2. Start the [sample contract æpp](../aepp), which will start on port `9001` | ||
| 3. Visit [localhost:9001](http://localhost:9001) | ||
| 4. This wallet should attempt to connect to the æpp | ||
|
|
||
| ## Installation and running in Google Chrome | ||
| 1. Install required dependencies with `npm install` | ||
| 2. Start the build server in watch mode `npm run serve` | ||
| 3. Open [chrome://extensions](chrome://extensions/) | ||
| 4. Enable "Developer mode" at the right top conner | ||
| 5. Press "Load unpacked" button and choose the `dist` folder |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| module.exports = { | ||
| presets: [ | ||
| '@vue/cli-plugin-babel/preset' | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,27 @@ | ||
| { | ||
| "name": "ae-wallet-extension-poc", | ||
| "version": "0.0.1", | ||
| "description": "Test for AEX 2", | ||
| "name": "wallet-web-extension", | ||
| "version": "0.1.0", | ||
| "private": true, | ||
| "scripts": { | ||
| "build": "node utils/build.js", | ||
| "start": "node utils/webserver.js" | ||
| "serve": "vue-cli-service build --mode development --watch", | ||
| "build": "vue-cli-service build" | ||
| }, | ||
| "dependencies": { | ||
| "core-js": "^3.6.5", | ||
| "vue": "^2.6.11" | ||
| }, | ||
| "devDependencies": { | ||
| "clean-webpack-plugin": "^1.0.0", | ||
| "copy-webpack-plugin": "^5.1.1", | ||
| "css-loader": "2.1.0", | ||
| "file-loader": "3.0.1", | ||
| "fs-extra": "7.0.1", | ||
| "html-loader": "0.5.5", | ||
| "html-webpack-plugin": "3.2.0", | ||
| "style-loader": "^0.23.1", | ||
| "webpack": "4.28.4", | ||
| "webpack-cli": "^3.2.1", | ||
| "webpack-dev-server": "3.1.14", | ||
| "write-file-webpack-plugin": "4.5.0" | ||
| } | ||
| "@vue/cli-plugin-babel": "~4.5.15", | ||
| "@vue/cli-service": "~4.5.15", | ||
| "sass": "^1.26.5", | ||
| "sass-loader": "^8.0.2", | ||
| "vue-cli-plugin-browser-extension": "^0.25.2", | ||
| "vue-template-compiler": "^2.6.11" | ||
| }, | ||
| "browserslist": [ | ||
| "> 1%", | ||
| "last 2 versions", | ||
| "not dead", | ||
| "not ie 11" | ||
| ] | ||
| } |
12 changes: 12 additions & 0 deletions
12
examples/browser/wallet-web-extension/public/browser-extension.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | ||
| <title><%= htmlWebpackPlugin.options.title %></title> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
| </body> | ||
| </html> |
File renamed without changes
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <template> | ||
| <div> | ||
| <h3>Wallet WebExtension</h3> | ||
| <img src="../public/icons/128.png" alt="Logo"> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| html { | ||
| width: 400px; | ||
| height: 400px; | ||
| } | ||
| </style> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| /* global browser */ | ||
|
|
||
| import { | ||
| RpcWallet, Node, MemoryAccount, Crypto, BrowserRuntimeConnection | ||
| } from '@aeternity/aepp-sdk' | ||
|
|
||
| (async () => { | ||
| const sdk = await RpcWallet({ | ||
| compilerUrl: 'https://compiler.aepps.com', | ||
| nodes: [{ | ||
| name: 'testnet', | ||
| instance: await Node({ url: 'https://testnet.aeternity.io' }) | ||
| }], | ||
| name: 'Wallet WebExtension', | ||
| // The `ExtensionProvider` uses the first account by default. | ||
| // You can change active account using `selectAccount(address)` function | ||
| accounts: [ | ||
| MemoryAccount({ | ||
| keypair: { | ||
| publicKey: 'ak_2dATVcZ9KJU5a8hdsVtTv21pYiGWiPbmVcU1Pz72FFqpk9pSRR', | ||
| secretKey: 'bf66e1c256931870908a649572ed0257876bb84e3cdf71efb12f56c7335fad54d5cf08400e988222f26eb4b02c8f89077457467211a6e6d955edb70749c6a33b' | ||
| } | ||
| }), | ||
| MemoryAccount({ keypair: Crypto.generateKeyPair() }) | ||
| ], | ||
| // Hook for sdk registration | ||
| onConnection (aepp, action) { | ||
| if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to connect`)) { | ||
| action.accept() | ||
| } else { | ||
| action.deny() | ||
| } | ||
| }, | ||
| onDisconnect (msg, client) { | ||
| console.log('Client disconnected:', client) | ||
| }, | ||
| onSubscription (aepp, action) { | ||
| if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to subscribe for accounts`)) { | ||
| action.accept() | ||
| } else { | ||
| action.deny() | ||
| } | ||
| }, | ||
| onSign (aepp, action) { | ||
| if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to sign tx ${action.params.tx}`)) { | ||
| action.accept() | ||
| } else { | ||
| action.deny() | ||
| } | ||
| }, | ||
| onAskAccounts (aepp, action) { | ||
| if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to get accounts`)) { | ||
| action.accept() | ||
| } else { | ||
| action.deny() | ||
| } | ||
| }, | ||
| onMessageSign (aepp, action) { | ||
| if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to sign msg ${action.params.message}`)) { | ||
| action.accept() | ||
| } else { | ||
| action.deny() | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| browser.runtime.onConnect.addListener((port) => { | ||
| // create connection | ||
| const connection = BrowserRuntimeConnection( | ||
| { connectionInfo: { id: port.sender.frameId }, port } | ||
| ) | ||
| // add new aepp to wallet | ||
| sdk.addRpcClient(connection) | ||
| // share wallet details | ||
| sdk.shareWalletInfo(port.postMessage.bind(port)) | ||
| setInterval(() => sdk.shareWalletInfo(port.postMessage.bind(port)), 3000) | ||
| }) | ||
|
|
||
| console.log('Wallet initialized!') | ||
| })() |
39 changes: 39 additions & 0 deletions
39
examples/browser/wallet-web-extension/src/content-script.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /* global browser */ | ||
|
|
||
| import { | ||
| BrowserRuntimeConnection, BrowserWindowMessageConnection, AeppWalletSchema, ContentScriptBridge | ||
| } from '@aeternity/aepp-sdk' | ||
|
|
||
| (async () => { | ||
| console.log('Waiting until document is ready') | ||
| await new Promise((resolve) => { | ||
| const interval = setInterval(() => { | ||
| // TODO: ensure that there is no corresponding event | ||
| if (document.readyState !== 'complete') return | ||
| clearInterval(interval) | ||
| resolve() | ||
| }, 100) | ||
| }) | ||
| console.log('Document is ready') | ||
|
|
||
| const port = browser.runtime.connect() | ||
| const extConnection = BrowserRuntimeConnection({ | ||
| connectionInfo: { | ||
| description: 'Content Script to Extension connection', | ||
| origin: window.origin | ||
| }, | ||
| port | ||
| }) | ||
| const pageConnection = BrowserWindowMessageConnection({ | ||
| connectionInfo: { | ||
| description: 'Content Script to Page connection', | ||
| origin: window.origin | ||
| }, | ||
| origin: window.origin, | ||
| sendDirection: AeppWalletSchema.MESSAGE_DIRECTION.to_aepp, | ||
| receiveDirection: AeppWalletSchema.MESSAGE_DIRECTION.to_waellet | ||
| }) | ||
|
|
||
| const bridge = ContentScriptBridge({ pageConnection, extConnection }) | ||
| bridge.run() | ||
| })() |
Empty file.
Empty file.
81 changes: 0 additions & 81 deletions
81
examples/browser/wallet-web-extension/src/js/background.js
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.