Finish unipig frontend

plasma-group · Sep 3, 2019 · 70ce92a · 70ce92a
1 parent e346235
commit 70ce92a
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 10 deletions.
diff --git a/packages/example-rollup/index.ts b/packages/example-rollup/index.ts
@@ -4,15 +4,49 @@ import MemDown from 'memdown'
 import {
   State,
   UNISWAP_ADDRESS,
+  UNI_TOKEN_TYPE,
+  PIGI_TOKEN_TYPE,
   AGGREGATOR_ADDRESS,
   UnipigWallet,
 } from '@pigi/wallet'
 
 /* Global declarations */
-declare function updateAccountAddress(address: string): void
-declare function updateBalances(balances: object): void
+declare var document: any
 
-/* Body */
+/* Functions which update UI */
+const updateAccountAddress = (address) => {
+  document.getElementById('account-address').textContent = address
+}
+
+const updateBalances = (balances) => {
+  document.getElementById('uni-balance').textContent = balances.uni
+  document.getElementById('pigi-balance').textContent = balances.pigi
+}
+
+const updateUniswapBalances = (balances) => {
+  document.getElementById('uniswap-uni-balance').textContent = balances.uni
+  document.getElementById('uniswap-pigi-balance').textContent = balances.pigi
+}
+
+/* Listeners */
+setTimeout(() => {
+  // Add listener for request funds
+  document
+    .getElementById('request-funds-button')
+    .addEventListener('click', onRequestFundsClicked)
+  // Add listener for transfer
+  document
+    .getElementById('send-button')
+    .addEventListener('click', onTransferFundsClicked)
+  // Add listener for swap
+  document
+    .getElementById('swap-button')
+    .addEventListener('click', onSwapFundsClicked)
+}, 300)
+
+/*
+ * Body
+ */
 const db = new BaseDB(new MemDown('ovm') as any)
 const unipigWallet = new UnipigWallet(db)
 // Now create a wallet account
@@ -21,11 +55,54 @@ const accountAddress = 'mocked account'
 // Connect to the mock aggregator
 unipigWallet.rollup.connect(new SimpleClient('http://localhost:3000'))
 
-// tslint:disable-next-line
 updateAccountAddress(accountAddress)
 
 async function fetchBalanceUpdate() {
-  const response = await unipigWallet.getBalances(UNISWAP_ADDRESS)
+  const balances = await unipigWallet.getBalances(accountAddress)
+  const uniswapBalances = await unipigWallet.rollup.getUniswapBalances()
+  updateBalances(balances)
+  updateUniswapBalances(uniswapBalances)
+}
+
+async function onRequestFundsClicked() {
+  const response = await unipigWallet.rollup.requestFaucetFunds(
+    accountAddress,
+    10
+  )
   updateBalances(response)
 }
+
+async function onTransferFundsClicked() {
+  const selectedIndex = document.getElementById('send-token-type').selectedIndex
+  const tokenType = selectedIndex === 0 ? UNI_TOKEN_TYPE : PIGI_TOKEN_TYPE
+  const amount = parseInt(document.getElementById('send-amount').value, 10)
+  const recipient = document.getElementById('send-recipient').value
+  const response: State = await unipigWallet.rollup.sendTransaction(
+    {
+      tokenType,
+      recipient,
+      amount,
+    },
+    accountAddress
+  )
+  updateBalances(response.sender.balances)
+}
+
+async function onSwapFundsClicked() {
+  const selectedIndex = document.getElementById('swap-token-type').selectedIndex
+  const tokenType = selectedIndex === 0 ? UNI_TOKEN_TYPE : PIGI_TOKEN_TYPE
+  const inputAmount = parseInt(document.getElementById('swap-amount').value, 10)
+  const response: State = await unipigWallet.rollup.sendTransaction(
+    {
+      tokenType,
+      inputAmount,
+      minOutputAmount: 0,
+      timeout: +new Date() + 1000,
+    },
+    accountAddress
+  )
+  updateBalances(response.sender.balances)
+  updateUniswapBalances(response.uniswap.balances)
+}
+
 fetchBalanceUpdate()
diff --git a/packages/example-rollup/public/index.html b/packages/example-rollup/public/index.html
@@ -11,7 +11,7 @@ <h1>
         Unipig
       </h1>
       <p>
-        A beautiful step forward.
+        A beautiful step forward into layer 2.
       </p>
     </div>
     <div>
@@ -35,22 +35,47 @@ <h4>
         Request money!
       </h4>
       <div>
-        <input id="send-button" type="submit" value="Request!">
+        <input id="request-funds-button" type="submit" value="Request!">
       </div>
     </div>
     <div>
       <h4>
         Send Money!
       </h4>
       <div>
-        <select>
+        <select id="send-token-type">
           <option value="uni">Uni</option>
           <option value="pigi">Pigi</option>
         </select>
-        Amount: <input id="send-amount" type="text" value="0">
+        Recipient: <input id="send-recipient" type="text" value="0xdeadbeef">
+        - Amount: <input id="send-amount" type="text" value="0">
         - <input id="send-button" type="submit" value="Send!">
       </div>
     </div>
+    <div>
+      <h4>
+        Swap Money!
+      </h4>
+      <div>
+        <h4>
+          Uniswap Balance:
+        </h4>
+        <p>
+          Uni: <span id="uniswap-uni-balance">0</span>
+        </p>
+        <p>
+          Pigi: <span id="uniswap-pigi-balance">0</span>
+        </p>
+      </div>
+      <div>
+        <select id="swap-token-type">
+          <option value="uni">Uni</option>
+          <option value="pigi">Pigi</option>
+        </select>
+        Amount: <input id="swap-amount" type="text" value="0">
+        - <input id="swap-button" type="submit" value="Swap!">
+      </div>
+    </div>
 
     <script>
       // Set some functions that we will use to change the ui
@@ -62,6 +87,15 @@ <h4>
         document.getElementById('uni-balance').textContent = balances.uni
         document.getElementById('pigi-balance').textContent = balances.pigi
       }
+
+      // Set some functions which will be used to register listeners
+      window.registerRequestFundsListener = function(requestFundsListener) {
+        window.requestFundsListener = requestFundsListener
+      }
+
+      window.registerTransferListener = function(transferListener) {
+        window.transferListener = transferListener
+      }
     </script>
     <script src="bundle.js"></script>
   </body>

diff --git a/packages/wallet/src/mock-rollup-client.ts b/packages/wallet/src/mock-rollup-client.ts
@@ -5,6 +5,7 @@ import { KeyValueStore, RpcClient, serializeObject } from '@pigi/core'
 import {
   Address,
   Balances,
+  State,
   Transaction,
   MockedSignature,
   TransactionReceipt,
@@ -60,7 +61,7 @@ export class MockRollupClient {
   public async sendTransaction(
     transaction: Transaction,
     account: Address
-  ): Promise<Balances> {
+  ): Promise<State> {
     const signature = await this.sign(account, serializeObject(transaction))
     const result = await this.rpcClient.handle<TransactionReceipt>(
       AGGREGATOR_API.applyTransaction,