Token Card

TokenCards determine how a wallet represents a token visually.

Token Cards instruct a wallet, a dapp browser or a website how to represent a token. This can include visible instructions, like icons, colors, a text description or buttons. These visible properties are set with the <view> declaration View vs Item-View. With it token issuers can design how the token appears in the wallet or on websites. You can think of it similar to a library of CSS code.

There are also invisible aspects of the token cards. They can define important security parameters like a serial number and other technical properties which are useful for wallets to know.

A token card can have different properties in different circumstances. A soccer ticket token can change its appearance after the game started, and a car leasing token can show different properties depending on your position in the car leasing chain.

Token Cards are declared in the XML-file, but expressed in JavaScript, for example by creating a token class and rendering html code in it.

Code

Here is an example of how a Token Card is declared in the XML file of TokenScript:

<ts:cards>
<ts:card type="token" name="main">
<ts:item-view xml:lang="en">
<xhtml:style type="text/css">&item-view-style;</xhtml:style>
<xhtml:script type="text/javascript">&item-view.en;</xhtml:script>
</ts:item-view>
</ts:card>

This code fragment instructs the wallet to use a JavaScript file (item-view.en.js) and a CSS file (item-view-file.css) to display the token. You can lookup these files in the ENS example for TokenScript.