connect two ae examples: Refactor and add spend with payload (#347)

* aepp examples: Simplify code, remove unused stuff, avoid console.log

* aepp example: Format displayed JSON

* wallet example: Use testnet instead of localhost by default

This will make easier to run this example.

* aepp example: Remove useless v-if="pub"

* aepp example: Add spend with payload

examples/connect-two-ae/aepp/src/components/Home.vue

@@ -5,12 +5,12 @@
     <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 Identity Aepp)</small>
+          Public Key <small>(from Wallet Aepp)</small>
         </div>
         <div v-if="pub" class="p-2 w-3/4 bg-grey-lightest break-words">
           {{pub}}
         </div>
-        <div v-if="!pub" class="p-2 w-3/4 bg-grey-lightest break-words text-grey">
+        <div v-else class="p-2 w-3/4 bg-grey-lightest break-words text-grey">
           Requesting Public Key from AE Wallet...
         </div>
       </div>
@@ -24,73 +24,119 @@
       </div>
     </div>
 
-    <h2 class="mt-4">Compile Contract</h2>
+    <h2 class="mt-4">Spend tokens</h2>
 
     <div class="border mt-4 rounded">
       <div class="bg-grey-lightest w-full flex flex-row font-mono">
         <div class="p-2 w-1/4">
-          Contract By
+          Recipient address
         </div>
-        <div v-if="pub" class="p-2 w-3/4 bg-white break-words">
-          {{pub}}
+        <div class="p-2 w-3/4 bg-white break-words">
+          <input
+            class="bg-black text-white border-b border-black p-2 w-full"
+            v-model="spendTo"
+            placeholder="ak_..."
+          />
         </div>
-        <div v-if="!pub" class="p-2 w-3/4 bg-grey-lightest break-words text-grey">
-          Requesting Public Key from AE Wallet...
+      </div>
+      <div class="bg-grey-lightest w-full flex flex-row font-mono">
+        <div class="p-2 w-1/4">
+          Tokens amount
+        </div>
+        <div class="p-2 w-3/4 bg-white break-words">
+          <input
+            class="bg-black text-white border-b border-black p-2 w-full"
+            v-model="spendAmount"
+          />
+        </div>
+      </div>
+      <div class="bg-grey-lightest w-full flex flex-row font-mono">
+        <div class="p-2 w-1/4">
+          Payload
+        </div>
+        <div class="p-2 w-3/4 bg-white break-words">
+          <input
+            class="bg-black text-white border-b border-black p-2 w-full"
+            v-model="spendPayload"
+          />
         </div>
       </div>
+      <button
+        v-if="client"
+        class="w-32 rounded rounded-full bg-purple text-white py-2 px-4 pin-r mr-8 mt-4 text-xs"
+        @click="spend"
+      >
+        Spend
+      </button>
+    </div>
+
+    <div v-if="spendResult || spendError" class="border mt-4 mb-8 rounded">
+      <div class="bg-green w-full flex flex-row font-mono border border-b">
+        <div class="p-2 w-1/4">
+          Send result
+        </div>
+        <div
+          class="p-2 w-3/4 bg-grey-lightest break-words whitespace-pre-wrap"
+        >{{ spendResult ? JSON.stringify(spendResult, null, 4) : spendError }}</div>
+      </div>
+    </div>
+
+    <h2 class="mt-4">Compile Contract</h2>
+
+    <div class="border mt-4 rounded">
       <div class="bg-grey-lightest w-full flex flex-row font-mono">
         <div class="p-2 w-1/4">
           Contract Code
         </div>
         <div class="p-2 w-3/4 bg-white">
-          <textarea class="bg-black text-white border-b border-black p-2 w-full h-64" v-model='contractCode' placeholder="contact code"/>
+          <textarea class="bg-black text-white border-b border-black p-2 w-full h-64" v-model="contractCode" placeholder="contact code"/>
         </div>
       </div>
-      <button v-if="client" class="w-32 rounded rounded-full bg-purple text-white py-2 px-4 pin-r mr-8 mt-4 text-xs" @click='onCompile'>
+      <button v-if="client" class="w-32 rounded rounded-full bg-purple text-white py-2 px-4 pin-r mr-8 mt-4 text-xs" @click="compile">
         Compile
       </button>
     </div>
 
-    <div v-if="byteCode" class="border mt-4 mb-8 rounded">
+    <div v-if="byteCode || compileError" class="border mt-4 mb-8 rounded">
       <div class="bg-green w-full flex flex-row font-mono border border-b">
         <div class="p-2 w-1/4">
           Compiled Code
         </div>
-        <div v-if="pub" class="p-2 w-3/4 bg-grey-lightest break-words">
-          {{byteCode}}
+        <div class="p-2 w-3/4 bg-grey-lightest break-words">
+          {{ byteCode || compileError }}
         </div>
       </div>
     </div>
-    <button v-if="byteCode" class="w-32 rounded rounded-full bg-purple text-white py-2 px-4 pin-r mr-8 mt-4 text-xs" @click='onDeploy'>
+
+    <button v-if="byteCode" class="w-32 rounded rounded-full bg-purple text-white py-2 px-4 pin-r mr-8 mt-4 text-xs" @click="deploy">
       Deploy
     </button>
 
-    <div v-if="deployInfo" class="border mt-4 mb-8 rounded">
+    <div v-if="deployInfo || deployError" class="border mt-4 mb-8 rounded">
       <div class="bg-green w-full flex flex-row font-mono border border-b">
         <div class="p-2 w-1/4">
           Deployed Contract
         </div>
-        <div v-if="pub" class="p-2 w-3/4 bg-grey-lightest break-words">
-          {{ deployInfo }}
-        </div>
+        <div
+          class="p-2 w-3/4 bg-grey-lightest break-words whitespace-pre-wrap"
+        >{{ deployInfo ? JSON.stringify(deployInfo, null, 4) : deployError }}</div>
       </div>
     </div>
-    <button v-if="deployInfo" class="w-32 rounded rounded-full bg-purple text-white py-2 px-4 pin-r mr-8 mt-4 text-xs" @click='onCall'>
+
+    <button v-if="deployInfo" class="w-32 rounded rounded-full bg-purple text-white py-2 px-4 pin-r mr-8 mt-4 text-xs" @click="call">
       Call
     </button>
 
-    <div v-if="callResult" class="border mt-4 mb-8 rounded">
+    <div v-if="callResult || callError" class="border mt-4 mb-8 rounded">
       <div class="bg-green w-full flex flex-row font-mono border border-b">
         <div class="p-2 w-1/4">
-          Deployed Contract
-        </div>
-        <div v-if="pub" class="p-2 w-3/4 bg-grey-lightest break-words">
-          {{ callResult }}
+          Call Result
         </div>
+        <div
+          class="p-2 w-3/4 bg-grey-lightest break-words whitespace-pre-wrap"
+        >{{ callResult ? JSON.stringify(callResult, null, 4) : callError }}</div>
       </div>
     </div>
-
-
   </div>
 </template>
 
@@ -99,92 +145,74 @@
 import Aepp from 'AE_SDK_MODULES/ae/aepp'
 
 export default {
-  name: 'Home',
-  components: {},
   data () {
     return {
       client: null,
-      abi: 'sophia',
-      to: null,
-      amount: null,
       height: null,
       pub: null,
-      callResult: null,
+      spendTo: null,
+      spendAmount: null,
+      spendPayload: null,
+      spendResult: null,
+      spendError: null,
       contractCode: `contract Identity =
   type state = ()
   function main(x : int) = x`,
       byteCode: null,
+      compileError: null,
       contractInitState: [],
-      deployInfo: null
+      deployInfo: null,
+      deployError: null,
+      callResult: null,
+      callError: null
     }
   },
-  computed: {
-  },
   methods: {
-    send () {},
-    async compile (code) {
-      console.log(`Compiling contract...`)
+    async spend () {
       try {
-        return await this.client.contractCompile(code)
+        this.spendResult = await this.client.spend(
+          this.spendAmount,
+          this.spendTo, {
+            payload: this.spendPayload,
+          }
+        )
+      } catch (err) {
+        this.spendError = err
+      }
+    },
+    async compile () {
+      this.byteCode = this.compileError = null
+      try {
+        this.byteCode = (await this.client.contractCompile(this.contractCode)).bytecode
       } catch (err) {
         this.compileError = err
-        console.error(err)
       }
     },
-    async deploy (code, options = {}) {
-      console.log(`Deploying contract...`)
+    async deploy () {
+      this.deployInfo = this.deployError = null
       try {
-        return await this.client.contractDeploy(this.byteCode, this.contractCode, this.contractInitState, options)
+        this.deployInfo = await this.client.contractDeploy(this.byteCode, this.contractCode, this.contractInitState)
       } catch (err) {
-        this.deployErr = err
-        console.error(err)
+        this.deployError = err
       }
     },
-    async call (code, abi, contractAddress, method = 'main', returnType = 'int', args = ['5'], options = {}) {
-      console.log(`Deploying contract...`)
+    async call (code, method = 'main', returnType = 'int', args = ['5']) {
+      this.callResult = this.callError = null
       try {
-        const result = await this.client.contractCall(this.contractCode, this.deployInfo.address, method,  args, options)
-        return Object.assign(
-          result,
+        this.callResult = await this.client.contractCall(this.contractCode, this.deployInfo.address, method,  args)
+        Object.assign(
+          this.callResult,
           { decodedRes: await result.decode(returnType) }
         )
       } catch (err) {
-        this.deployErr = err
-        console.error(err)
+        this.callError = err
       }
-    },
-    onCompile () {
-      this.compile(this.contractCode)
-        .then(byteCodeObj => {
-          this.byteCode = byteCodeObj.bytecode
-        })
-    },
-    onDeploy () {
-      this.deploy(this.byteCode)
-        .then(deployedContract => {
-          this.deployInfo = deployedContract
-        })
-    },
-    onCall () {
-      this.call(this.byteCode)
-        .then(callRes => {
-          console.log(callRes)
-          this.callResult = callRes
-        })
     }
   },
-  created () {
-    Aepp().then(ae => {
-      this.client = ae
-      ae.address()
-        .then(address => {
-          this.pub = address
-        })
-        .catch(e => { this.pub = `Rejected: ${e}` })
-    })
+  async created () {
+    this.client = await Aepp()
+    this.pub = await this.client.address().catch(e => `Rejected: ${e}`)
+    this.height = await this.client.height()
   }
 }
 </script>
-
-<style scoped lang="css">
-</style>

examples/connect-two-ae/aepp/src/index.js

@@ -9,7 +9,6 @@ import store from './store'
 Vue.config.productionTip = false
 Vue.use(VueRouter)
 
-console.info('about to render Vue App')
 new Vue({
   router: getRouter(store),
   store,

examples/connect-two-ae/identity/src/components/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full p-4 flex justify-center flex-col bg-grey h-screen">
-    <h1 class="mb-4">Identity (BASE) Aepp</h1>
+    <h1 class="mb-4">Wallet Aepp</h1>
 
     <div class="border">
       <div class="bg-green w-full flex flex-row font-mono border border-b">
@@ -34,7 +34,6 @@
     </div>
     <!-- external app -->
     <iframe v-show="aeppUrl" ref="aepp" class="w-full h-screen border border-black border-dashed bg-grey-light mx-auto mt-4 shadow" src="about:blank" frameborder="1"></iframe>
-
   </div>
 </template>
 
@@ -44,34 +43,26 @@ import Wallet from 'AE_SDK_MODULES/ae/wallet'
 import MemoryAccount from 'AE_SDK_MODULES/account/memory'
 
 export default {
-  name: 'Wallet',
-  components: {},
   data () {
     return {
       pub: 'ak_6A2vcm1Sz6aqJezkLCssUXcyZTX7X8D5UwbuS2fRJr9KkYpRU', // Your public key
       priv: 'a7a695f999b1872acb13d5b63a830a8ee060ba688a478a08c6e65dfad8a01cd70bb4ed7927f97b51e1bcb5e1340d12335b2a2b12c8bc5221d63c4bcb39d41e61', // Your private key
       client: null,
-      wallet: null,
       balance: null,
       height: null,
-      url: 'http://localhost:3013',
-      internalUrl: 'http://localhost:3113',
+      url: 'https://sdk-testnet.aepps.com',
+      internalUrl: 'https://sdk-testnet.aepps.com',
       compilerUrl: 'https://compiler.aepps.com',
       aeppUrl: '//0.0.0.0:9001'
     }
   },
-  computed: {
-  },
   methods: {
     confirmDialog (method, params, {id}) {
-      // return new Promise((resolve, reject) => { resolve ('test') })
       return Promise.resolve(window.confirm(`User ${id} wants to run ${method} ${params}`))
     }
   },
-  created () {
-    window.addEventListener('message', console.log, false)
-
-    Wallet({
+  async created () {
+    this.client = await Wallet({
       url: this.url,
       internalUrl: this.internalUrl,
       compilerUrl: this.compilerUrl,
@@ -81,28 +72,12 @@ export default {
       onChain: this.confirmDialog,
       onAccount: this.confirmDialog,
       onContract: this.confirmDialog
-    }).then(ae => {
-      this.client = ae
-      console.log('status', this.client.api.getTopBlock())
-      console.log('version', this.client.api.getStatus())
-      this.$refs.aepp.src = this.aeppUrl
+    })
 
-      ae.height().then(height => {
-        console.log('height', height)
-        this.height = height
-      })
-      console.log(ae)
+    this.$refs.aepp.src = this.aeppUrl
 
-      ae.balance(this.pub).then(balance => {
-        console.log('balance', balance)
-        this.balance = balance
-      }).catch(e => {
-        this.balance = 0
-      })
-    })
+    this.height = await this.client.height()
+    this.balance = await this.client.balance(this.pub).catch(() => 0)
   }
 }
 </script>
-
-<style scoped lang="css">
-</style>

examples/connect-two-ae/identity/src/index.html

@@ -5,8 +5,8 @@
     <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>Base Aepp (Wallet) Example</title>
-    <meta name="description" content="Base Aepp Example">
+    <title>Wallet Aepp Example</title>
+    <meta name="description" content="Wallet Aepp Example">
     <!-- CSS files will be injected here by WebPack -->
   </head>
   <body>