ActivityCard

Activity Cards show relevant blockchain events, as well as relevant off-chain activities. They serve as a library of what is possible and a timeline of what happened.

Note: In the current version of AlphaWallet Activity Cards are not supported. But AlphaWallet will soon release a version which supports Activity Cards. In this version the "transaction" tab will be renamed to "activity" tab.

Concept

Activity Cards are meant to show the history of a token. This might seem trivial, since any wallets connects to a blockchain, which already serves a shared history of transactions.

But if you ever used dApps with a standard wallet, you know how important Activity Cards are. Usually the wallet shows only transactions, in best cases, it also shows the token involved. This might be enough for plain value transfers.

But if you have token interacting with smart contracts - like, renting a car, lending a token, exchanging tokens and so on - the information of a plain transaction gets close to zero. Your wallet simply doesn't understand what happened. To make it understand what has happened, the wallet developers need to understand each smart contract and implement its logic in the wallet. This might work for a few popular token - but it can never scale to a large and diversified token universe.

Activity Cards solve this problem. The card is assigned to a token and creates, stores and loads Data Objects. This makes wallets suddenly smart: They remember not only the transaction, but also the purpose of the transaction - that a user rented a car, lended or exchanged a token and so on. And all the wallet has to do is to download the TokenScript.

Furthermore, Activity Cards remember offchain activities: That you created a Magic Link to allow someone else to withdraw tokens from your wallet, than your wallet displayed a QR code at a gate, that you called an API with an Action Card and so on.

To sum it up: Activity Cards allow token issuers to create customized history records for their token.

Code

Note: that this code might change with the release of AlphaWallet implementing Activity Cards.

We demonstrate the current code for an Activity Card which can be used to document an approval for an ERC token.

Before you create an activity card, you need to create a data object.

<asnx:module name="ERC20-Events">
        <namedType name="Approval">
            <type>
                <sequence>
                    <element name="owner" ethereum:type="address" ethereum:indexed="true"/>
                    <element name="spender" ethereum:type="address" ethereum:indexed="true"/>
                    <element name="value" ethereum:type="uint256" ethereum:indexed="false"/>
                </sequence>
            </type>
        </namedType>
</asnx:module>

In this data object TokenScript records that the owner of an ERC token approved someone else to spent a certain amount of the token. This information can be used to create an Activity Card:

<ts:cards>
        <ts:card type="activity" name="ownerApproved">
            <ts:origins>
                <ethereum:event type="Approval" filter="owner=${ownerAddress}"/>
            </ts:origins>
            <ts:item-view xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
                <style type="text/css">&style;</style>
                <script  type="text/javascript">&item-view-ownerApproved.en;</script>
            </ts:item-view>
            <ts:view xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
                <style type="text/css">&style;</style>
                <script  type="text/javascript">&gaveApproval.en;</script>
            </ts:view>
        </ts:card>
</ts:cards>

When it is implemented in AlphaWallet, this Activity Card will be visible in the Activity tab. By clicking on it, users can view more information about what happened. Like in an Action Card this information is produced by a JavaScript file like item-view-ownerApproved.en.js:

class Token {

    constructor(tokenInstance) {
        this.props = tokenInstance;
        this.setConfirm();
    }

    setConfirm() {
        window.onConfirm = function() {
            window.close();
        }
    }

    render() {
        return`
        <div class="ui container">
          <div class="ui segment">
            <img src="data:image/png;base64,i...g==">
            <span><bold><h3>Gave approval to move ${this.props.amount} ${this.props.symbol} to ${this.props.to}</h3></bold></span>
          </div>
        </div>
`;
    }
}

web3.tokens.dataChanged = (oldTokens, updatedTokens, tokenIdCard) => {
    const currentTokenInstance = web3.tokens.data.currentInstance;
    document.getElementById(tokenIdCard).innerHTML = new Token(currentTokenInstance).render();
};

As in Action Cards, the JavaScript file renders what the user will see: It displays the message that he gave approval for address x to move y token. It would also be possible to add a link to the transaction on any blockchain explorer and more.