aeternity · davidyuk · Jan 28, 2022 · Dec 8, 2021 · Dec 10, 2021 · Jan 27, 2022
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {
+      include: [
+        '@babel/plugin-proposal-nullish-coalescing-operator',
+        '@babel/plugin-proposal-logical-assignment-operators'
+      ]
+    }],
+    '@babel/preset-typescript'
+  ],
+  plugins: [
+    ['@babel/plugin-transform-runtime', { corejs: 3 }]
+  ]
+}
diff --git a/babel.config.json b/babel.config.json
diff --git a/babel.esm.config.js b/babel.esm.config.js
@@ -1,7 +1,12 @@
-const config = require('./babel.config.json')
+const config = require('./babel.config.js')
 
-config.presets[0] = ['@babel/preset-env', { modules: false }]
-config.plugins.push(['add-import-extension', { extension: 'mjs' }])
-config.plugins.push('transform-default-named-imports')
+config.presets
+  .filter(plugin => Array.isArray(plugin))
+  .find(([name]) => name === '@babel/preset-env')[1].modules = false
+
+config.plugins.push(
+  ['add-import-extension', { extension: 'mjs' }],
+  ['transform-default-named-imports', { exclude: ['rlp'] }]
+)
 
 module.exports = config
diff --git a/examples/browser/wallet-iframe/package.json b/examples/browser/wallet-iframe/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "wallet",
+  "name": "wallet-iframe",
   "version": "0.1.0",
   "private": true,
   "scripts": {

diff --git a/examples/browser/wallet-web-extension/LICENSE.md b/examples/browser/wallet-web-extension/LICENSE.md
diff --git a/examples/browser/wallet-web-extension/README.md b/examples/browser/wallet-web-extension/README.md
@@ -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
diff --git a/examples/browser/wallet-web-extension/babel.config.js b/examples/browser/wallet-web-extension/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/examples/browser/wallet-web-extension/package.json b/examples/browser/wallet-web-extension/package.json
@@ -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"
+  ]
 }
diff --git a/examples/browser/wallet-web-extension/public/browser-extension.html b/examples/browser/wallet-web-extension/public/browser-extension.html
@@ -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>
diff --git a/...wallet-web-extension/src/img/icon-128.png → ...wallet-web-extension/public/icons/128.png b/...wallet-web-extension/src/img/icon-128.png → ...wallet-web-extension/public/icons/128.png
diff --git a/.../wallet-web-extension/src/img/icon-34.png → .../wallet-web-extension/public/icons/34.png b/.../wallet-web-extension/src/img/icon-34.png → .../wallet-web-extension/public/icons/34.png
diff --git a/examples/browser/wallet-web-extension/src/Popup.vue b/examples/browser/wallet-web-extension/src/Popup.vue
@@ -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>
diff --git a/examples/browser/wallet-web-extension/src/background.html b/examples/browser/wallet-web-extension/src/background.html
diff --git a/examples/browser/wallet-web-extension/src/background.js b/examples/browser/wallet-web-extension/src/background.js
@@ -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!')
+})()
diff --git a/examples/browser/wallet-web-extension/src/content-script.js b/examples/browser/wallet-web-extension/src/content-script.js
@@ -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()
+})()
diff --git a/examples/browser/wallet-web-extension/src/css/options.css b/examples/browser/wallet-web-extension/src/css/options.css
diff --git a/examples/browser/wallet-web-extension/src/css/popup.css b/examples/browser/wallet-web-extension/src/css/popup.css
diff --git a/examples/browser/wallet-web-extension/src/js/background.js b/examples/browser/wallet-web-extension/src/js/background.js