ActivityCard

Why Activity Card

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, lending a token, exchanging tokens, (or in the future, renting a car) - 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, lent 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.

How Activity Card works with Ethereum

An ActivityCard is based on an event. Events themselves are not described in the activity card, but rather instead sourced as a data module. Data module is covered in a separate article.

Assuming that an event

<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.