fix(sdk): update demo to adopt the latest api spec

AztecProtocol · Feb 13, 2020 · 0c6410b · 0c6410b
1 parent c73ba2f
commit 0c6410b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 64 deletions.
diff --git a/packages/extension/demo/1_apis-usage/asset.js b/packages/extension/demo/1_apis-usage/asset.js
@@ -90,15 +90,15 @@
   }
 
   async function approveAllowance() {
+    allowanceStatus.clear();
+
     const allowanceInput = document.getElementById('erc20-allowance-value');
     const value = parseInt(allowanceInput.value);
     if (!value) {
       allowanceStatus.error('× Allowance value must be larger than 0');
       return;
     }
 
-    allowanceStatus.clear();
-
     const registryAddress = window.aztec.web3.getAddress('AccountRegistry');
     const erc20Address = asset.linkedTokenAddress;
     await window.aztec.web3
@@ -115,18 +115,17 @@
   }
 
   async function deposit() {
-    const numberOfOutputNotes = parseInt(document.getElementById('deposit-output-number').value, 10);
-    const toAddress = document.getElementById('deposit-to-address').value;
-    const depositInput = document.getElementById('deposit-value');
-    const value = parseInt(depositInput.value, 10);
-
     depositStatus.clear();
 
+    const numberOfOutputNotes = document.getElementById('deposit-output-number').value;
+    const toAddress = document.getElementById('deposit-to-address').value;
+    const amount = document.getElementById('deposit-value').value;
+
     try {
       const resp = await asset.deposit(
         [
           {
-            amount: value,
+            amount,
             to: toAddress,
           },
         ],
@@ -136,63 +135,49 @@
       );
       console.log('>> deposit response', resp);
       refreshAssetBalances();
-      depositInput.value = '';
     } catch (error) {
       console.error(error);
       depositStatus.error(error.message);
     }
   }
 
   async function withdraw() {
-    const withdrawInput = document.getElementById('withdraw-value');
-    const toAddress = document.getElementById('withdraw-to-address').value;
-    const numberOfInputNotes = parseInt(document.getElementById('withdraw-input-number').value, 10);
-    const value = parseInt(withdrawInput.value, 10);
-
     withdrawStatus.clear();
 
-    const account = window.aztec.web3.getAccount();
+    const amount = document.getElementById('withdraw-value').value;
+    const toAddress = document.getElementById('withdraw-to-address').value;
+    const numberOfInputNotes = document.getElementById('withdraw-input-number').value;
 
     try {
       const resp = await asset.withdraw(
-        value,
+        amount,
         {
             to: toAddress,
             numberOfInputNotes,
         },
       );
       console.log('>> withdraw response', resp);
       refreshAssetBalances();
-      withdrawInput.value = '';
     } catch (error) {
       console.error(error);
       withdrawStatus.error(error.message);
     }
   }
 
   async function send() {
-    let numberOfInputNotes = document.getElementById('send-input-number').value.trim();
-    numberOfInputNotes = numberOfInputNotes === ''
-      ? undefined
-      : parseInt(numberOfInputNotes);
-    let numberOfOutputNotes = document.getElementById('send-output-number').value.trim();
-    numberOfOutputNotes = numberOfOutputNotes === ''
-      ? undefined
-      : parseInt(numberOfOutputNotes);
-    const valueInput = document.getElementById('send-value');
-    const address = document.getElementById('send-address').value.trim();
-    const value = parseInt(valueInput.value.trim(), 10);
-
     sendStatus.clear();
 
-    const account = window.aztec.web3.getAccount();
+    const numberOfInputNotes = document.getElementById('send-input-number').value;
+    const numberOfOutputNotes = document.getElementById('send-output-number').value;
+    const amount = document.getElementById('send-value').value;
+    const address = document.getElementById('send-address').value;
 
     try {
       const resp = await asset.send(
         [
           {
             to: address,
-            amount: value,
+            amount,
           },
         ],
         {
@@ -202,7 +187,6 @@
       );
       console.log('>> send response', resp);
       refreshAssetBalances();
-      valueInput.value = '';
     } catch (error) {
       console.error(error);
       sendStatus.error(error.message);
@@ -212,16 +196,9 @@
   async function createNoteFromBalance() {
     createStatus.clear();
 
-    let numberOfInputNotes = document.getElementById('create-input-number').value.trim();
-    numberOfInputNotes = numberOfInputNotes === ''
-      ? undefined
-      : parseInt(numberOfInputNotes);
-    let numberOfOutputNotes = document.getElementById('create-output-number').value.trim();
-    numberOfOutputNotes = numberOfOutputNotes === ''
-      ? undefined
-      : parseInt(numberOfOutputNotes);
-    const valueInput = document.getElementById('create-amount');
-    const value = parseInt(valueInput.value.trim());
+    const numberOfInputNotes = document.getElementById('create-input-number').value;
+    const numberOfOutputNotes = document.getElementById('create-output-number').value;
+    const value = document.getElementById('create-amount').value;
     const userAccess = [];
     for (let i = 0; i < 10; i += 1) {
       const elem = document.getElementById(`create-access-${i}`);
@@ -231,8 +208,6 @@
       }
     }
 
-    const account = window.aztec.web3.getAccount();
-
     try {
       const resp = await asset.createNoteFromBalance(
         value,
@@ -242,10 +217,8 @@
           numberOfOutputNotes,
         },
       );
-
       console.log('>> create note from balance response', resp);
       refreshAssetBalances();
-      valueInput.value = '';
     } catch (error) {
       console.error(error);
       createStatus.error(error.message);
@@ -255,22 +228,10 @@
   async function fetchNotesFromBalance() {
     fetchStatus.clear();
 
-    let equalTo = document.getElementById('fetch-eq-value').value.trim();
-    equalTo = equalTo === ''
-      ? undefined
-      : parseInt(equalTo);
-    let greaterThan = document.getElementById('fetch-gt-value').value.trim();
-    greaterThan = greaterThan === ''
-      ? undefined
-      : parseInt(greaterThan);
-    let lessThan = document.getElementById('fetch-lt-value').value.trim();
-    lessThan = lessThan === ''
-      ? undefined
-      : parseInt(lessThan);
-    let numberOfNotes = document.getElementById('fetch-count-value').value.trim();
-    numberOfNotes = numberOfNotes === ''
-      ? undefined
-      : parseInt(numberOfNotes);
+    const equalTo = document.getElementById('fetch-eq-value').value;
+    const greaterThan = document.getElementById('fetch-gt-value').value;
+    const lessThan = document.getElementById('fetch-lt-value').value;
+    const numberOfNotes = document.getElementById('fetch-count-value').value;
 
     let notes;
     try {

diff --git a/packages/extension/demo/1_apis-usage/index.html b/packages/extension/demo/1_apis-usage/index.html
@@ -13,9 +13,9 @@
       function handleReload(type, value) {
         let message;
         if (type === 'accountChanged') {
-          message = `Switching account to ${value}...`;
+          message = `Switching account to ${value.address}...`;
         } else if (type === 'networkChanged') {
-          message = `Switching network to ${value}...`;
+          message = `Switching network to ${value.name} (${value.id})...`;
         } else {
           message = 'Signing in to AZTEC account...';
         }