As a user, I can see all my transactions so I can feel secure about my history being correct.

Abstract:

At any given time, we want the user to be able to see their transaction history. It is found in the /my-wallet view. In this iteration, transaction history is a list of items. Each item is a transaction on Ethereum’s Rinkeby network.

This should result in the user having a feeling of security and control, as the log always represents the history of past transactions.

How it works:

The API has a txHistory topic.

The client registers with the txHistory topic by sending its pubkey and the lastblock, which indicates the state of the client's local redux. Lastblock defaults to the block where we deployed SWT token contract.

The API returns to the client the current txHistory for that pubkey from lastblock up to the current block.

The API emits to the client an update message on each new transaction ( filtered on the pubkey that was given during the registration ) Either this is a new transaction - or it is an update of an existing transaction. The primary key is the transactionhash.

Service:

A service on the workernode that monitors the SWT contract and creates an index (LevelDB) containing the history grouped per pubkey.
The SWT token contract transactions are cached in a local levelDB database which emits updates on
- pending transactions
- mined transactions The filter is an Event listener on transfer events
The raw data is formatted to the data model described below (API).

API:

Provides topic txHistory to subscribe to. The response of the registration contains the subscriptionId and the complete history from the cache, starting from the provided lastBlock. Sorting of these items is newest first.
Emits txHistoryChanged events to the client when a new block contains new history items for this pubkey.
Allows clients to unsubscribe from the topic a socket disconnect unsubscribes the client from this topic.

API documentation

txHistory topic

subscribe:

/**
 * @request
 * Represents the client request
 * @param {string} pubkey - The pubkey of the user
 * @param {number} lastBlock - The last block time the client has in redux
 */

{
    pubkey: <String>,
    lastblock: <Number>,
}

subscription returns:

/**
 * Represents the txHistoryChanged response
 * @response
 * @param {number} response - The HTTP response code
 * @param {string} subscriptionId - The SubscriptionID 
 * @param {array} txHistory - Array of items 
 */

{ 
    response: <Number>,   
    subscriptionId: <String>,
    txHistory: <Array of historyItems>
}

Events

txHistoryChanged

/**
 * Represents a txhistory change
 * @response
 */
{
    subscriptionId: <String>,
    data: <historyItem>
}

historyItem model:

Each historyItem has following properties:

'transactionHash': '0x....' ( primary key )
'dateTime': <timestamp>
'direction': <'in'/'out'>
'amount': <in token units> ( 1e18 = 1 SWT )
'from': '0x....' 
'to': '0x....'
'block': <blocknumber where tx was mined>
'status': <0 => success,1 => failed>

What it looks like in front end:

route: /my-wallet

In the wallet-view, we see the transaction history at the bottom. It's a list, ordered by newest first. It consists of historyItems. A historyItem has 3 states: 1.pending, 2.confirmed, 3.rejected.

1. Pending The transaction has been sent to the node, but not mined yet.

It contains:

relative time derrived from timestamp or when the tx is older than 24 hrs, format time dd/MMM/yyyy - hh:mm
- eg. A few minutes ago
- eg. 12 Mar 2018 - 23:22
'+' or '-', indicating the direction
the amount (in its fullest form: show all determing digits - remove trailing 0's) + "SWT"
- eg. 7 SWT
- eg. 1.23 SWT
- eg. 0.0023 SWT
loading dots (blue)
Copy describing the tx, depending on direction:
- “Sending to” + username* of receiver
- “Receiving from” + username of sender The pubkey's "username" comes from an addressbook mapping pubkey's to usernames and their avatar, it is stored in localstorage (the username and avatar are stored in the localstorage while doing the token transfer over shortcode: described in Epic #672).
link "show on etherscan" that links to this transaction on external (Rinkeby) explorer

2. Confirmed The transaction has been mined and included in a block.

It contains:

relative time derrived from timestamp or when the tx is older than 24 hrs, format time dd/MMM/yyyy - hh:mm
- eg. A few minutes ago
- eg. 12 Mar 2018 - 23:22
Copy describing the tx, depending on direction:
- “-” and the amount (in its fullest form: show all determing digits - remove trailing 0's) and “SWT” and “to” and username of receiver
- “+” and the amount (in its fullest form: show all determing digits - remove trailing 0's) and “SWT” and “from” and username of sender
link "show on etherscan" that links to this transaction on external (Rinkeby) explorer

3. Rejected The transaction has been mined but rejected by the network.

relative time derrived from timestamp or when the tx is older than 24 hrs, format time dd/MMM/yyyy - hh:mm
- eg. A few minutes ago
- eg. 12 Mar 2018 - 23:22
Copy describing the tx, depending on direction:
- “Failed:” and “-” and the amount (in its fullest form: show all determing digits - remove trailing 0's) and “SWT” and “to” and username of receiver and “failed.”
- “Failed:” and “+” and the amount (in its fullest form: show all determing digits - remove trailing 0's) and “SWT” and “from” and username of sender and “failed.”
link "show on etherscan" that links to this transaction on external (Rinkeby) explorer

Documentation / references

Example:

var subscription = web3.eth.subscribe('pendingTransactions', function(error, result){
    if (!error)
        console.log(result);
})
.on("data", function(transaction){
    console.log(transaction);
});

// unsubscribes the subscription
subscription.unsubscribe(function(error, success){
    if(success)
        console.log('Successfully unsubscribed!');
});

pending transactions: http://web3js.readthedocs.io/en/1.0/web3-eth-subscribe.html#subscribe-pendingtransactions

new blocks: http://web3js.readthedocs.io/en/1.0/web3-eth-subscribe.html#subscribe-newblockheaders

swarmcity / SwarmCityConcept