watchTransaction (#108)

- Name auth token functions more consistently.
  - getAuthToken -> fetchAuthToken
  - setBearerToken -> setAuthToken
- Explain why fetchAuthToken is on KeyManager and setAuthToken on DepositProvider / WithdrawProvider
- Add a new generic type for watchers 
- Add a function, watchTransaction, to poll the transaction endpoint until the transaction stops pending
- Add tests for the watcher

plans/authservers.md

@@ -28,5 +28,5 @@ interface GetAuthTokenParams {
   publicKey: PublicKey;
 }
 
-const jwt = await KeyManager.getAuthToken(params: GetAuthTokenParams);
+const jwt = await KeyManager.fetchAuthToken(params: GetAuthTokenParams);
 ```

playground/src/components/AccountDetails.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import Json from "react-json-view";
 
 class AccountDetails extends Component {
   state = {
@@ -83,9 +84,7 @@ class AccountDetails extends Component {
                 <li key={time.toString()}>{time.toString()}</li>
               ))}
             </ul>
-            {accountDetails && (
-              <pre>{JSON.stringify(accountDetails, null, 2)}</pre>
-            )}
+            {accountDetails && <Json src={accountDetails} />}
           </>
         )}
 

playground/src/components/Authorization.js

@@ -22,7 +22,7 @@ class Authorization extends Component {
       "https://transfer-dot-jewel-api-dev.appspot.com",
     );
 
-    depositProvider.setBearerToken("testtesttest");
+    depositProvider.setAuthToken("testtesttest");
 
     this.setState({ depositProvider });
 

playground/src/components/KeyEntry.js

@@ -74,13 +74,13 @@ export default class KeyEntry extends Component {
     }
   };
 
-  _getAuthToken = async (authServer) => {
+  _fetchAuthToken = async (authServer) => {
     const { keyManager, password, keyMetadata } = this.state;
     this.setState({ authToken: null });
     localStorage.setItem("authServer", authServer);
 
     try {
-      const authToken = await keyManager.getAuthToken({
+      const authToken = await keyManager.fetchAuthToken({
         id: keyMetadata.id,
         password,
         authServer,
@@ -118,7 +118,7 @@ export default class KeyEntry extends Component {
           <form
             onSubmit={(ev) => {
               ev.preventDefault();
-              this._getAuthToken(authServer);
+              this._fetchAuthToken(authServer);
             }}
           >
             <label>

playground/src/components/TransferProvider.js

@@ -30,7 +30,10 @@ class TransferProvider extends Component {
   }
 
   _setUrl = (url) => {
-    const depositProvider = new WalletSdk.DepositProvider(url);
+    const depositProvider = new WalletSdk.DepositProvider(
+      url,
+      this.props.dataProvider.getAccountKey(),
+    );
 
     this.setState({
       depositProvider,
@@ -51,9 +54,7 @@ class TransferProvider extends Component {
       transactions,
       transactionError,
     } = this.state;
-    const { dataProvider, authToken } = this.props;
-
-    const accountKey = dataProvider.getAccountKey();
+    const { authToken } = this.props;
 
     return (
       <div>
@@ -109,11 +110,10 @@ class TransferProvider extends Component {
                 theme={ButtonThemes.primary}
                 onClick={() => {
                   if (authToken) {
-                    depositProvider.setBearerToken(authToken);
+                    depositProvider.setAuthToken(authToken);
                   }
                   depositProvider
                     .fetchTransactions({
-                      account: accountKey,
                       asset_code: assetCode,
                     })
                     .then((transactions) =>

src/KeyManager.test.ts

@@ -106,7 +106,7 @@ describe("KeyManager", function() {
     ).toEqual(true);
   });
 
-  describe("getAuthToken", () => {
+  describe("fetchAuthToken", () => {
     beforeEach(() => {
       // @ts-ignore
       fetch.resetMocks();
@@ -120,7 +120,7 @@ describe("KeyManager", function() {
       });
       try {
         // @ts-ignore
-        await testKeyManager.getAuthToken({});
+        await testKeyManager.fetchAuthToken({});
         expect("This test failed").toBe(null);
       } catch (e) {
         expect(e).toBeTruthy();
@@ -163,7 +163,7 @@ describe("KeyManager", function() {
       });
 
       try {
-        await testKeyManager.getAuthToken({
+        await testKeyManager.fetchAuthToken({
           id: keyMetadata.id,
           password,
           authServer,
@@ -212,7 +212,7 @@ describe("KeyManager", function() {
       });
 
       try {
-        await testKeyManager.getAuthToken({
+        await testKeyManager.fetchAuthToken({
           id: keyMetadata.id,
           password,
           authServer,

src/KeyManager.ts

@@ -250,7 +250,7 @@ export class KeyManager {
    * @returns {Promise<string>} authToken JWT
    */
   // tslint:enable max-line-length
-  public async getAuthToken({
+  public async fetchAuthToken({
     id,
     password,
     authServer,

src/data/DataProvider.ts

@@ -11,6 +11,7 @@ import {
   Offer,
   Trade,
   Transfer,
+  WatcherParams,
 } from "../types";
 
 import { makeDisplayableBalances } from "./makeDisplayableBalances";
@@ -23,11 +24,6 @@ export interface DataProviderParams {
   accountOrKey: Account | string;
 }
 
-export interface WatcherParams {
-  onMessage: (accountDetails: AccountDetails) => void;
-  onError: (error: any) => void;
-}
-
 function isAccount(obj: any): obj is Account {
   return obj.publicKey !== undefined;
 }
@@ -188,7 +184,9 @@ export class DataProvider {
    * If the account doesn't exist yet, it will re-check it every 2 seconds.
    * Returns a function you can execute to stop the watcher.
    */
-  public watchAccountDetails(params: WatcherParams): () => void {
+  public watchAccountDetails(
+    params: WatcherParams<AccountDetails>,
+  ): () => void {
     const { onMessage, onError } = params;
 
     this.fetchAccountDetails()