forked from SmartTokenLabs/TokenScript
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathActivityCard.html
124 lines (118 loc) · 11.9 KB
/
ActivityCard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html
SYSTEM "about:legacy-compat">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="copyright" content="(C) Copyright 2020"><meta name="DC.rights.owner" content="(C) Copyright 2020"><meta name="DC.type" content="concept"><meta name="description" content="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."><meta name="DC.relation" scheme="URI" content="Card.html"><meta name="DC.relation" scheme="URI" content="elements/card.html"><meta name="DC.relation" scheme="URI" content="elements/cards.html"><meta name="DC.format" content="HTML5"><meta name="DC.identifier" content="concept_rpz_3jl_mmb"><link rel="stylesheet" type="text/css" href="css/commonltr.css"><link rel="stylesheet" type="text/css" href="css/custom.css"><title>ActivityCard</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Lato">
<script type="text/javascript" src="https://alphawallet.com/wp-content/themes/alphawallet/discourse/widget.js"></script>
</head><body id="concept_rpz_3jl_mmb"><header role="banner"><nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
<div class="container">
<a class="navbar-brand" href="/">🆃okenScript</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="/TokenScript.html">Documents</a></li>
<li class="nav-item"><a class="nav-link" href="/guides/Intro.html">Guides</a></li>
<li class="nav-item"><a class="nav-link" href="/specs/Intro.html">Specs</a></li>
<li class="nav-item external"><a class="nav-link" href="">TokenScript community forum</a></li>
<li class="nav-item external"><a class="nav-link" href="/TokenScript.html">AlphaWallet (uses TokenScript)</a></li>
<li class="nav-item external"><a class="nav-link" href="/guides/Intro.html">Github TokenScript</a></li>
<li class="nav-item external"><a class="nav-link" href="/specs/Intro.html">Github TokenScript Examples</a></li>
</ul>
</div>
</div>
</nav></header><div class="container" id="content"><div class="row"><nav role="toc" class="col-lg-3"><ul><li><a href="Tokenization.html">Tokenization and dApps</a></li><li><a href="index.html">Introduction to TokenScript</a></li><li><a href="QuickStart.html">Quick Start (usuable now)</a></li><li><a href="BasicConcepts.html">Basic Concepts</a><ul><li><a href="TokenScript-Component.html">TokenScript File</a></li><li><a href="Attributes.html">Attributes</a></li><li><a href="Card.html">Card</a><ul><li><a href="TokenCard.html">Token Card</a></li><li><a href="ActionCard.html">ActionCard</a></li><li class="active"><a href="ActivityCard.html">ActivityCard</a></li></ul></li><li><a href="DataObjects.html">Data Objects</a></li><li><a href="Attestation.html">Attestation</a></li><li><a href="TokenScript-Syntax.html">TokenScript Syntax</a></li><li><a href="MagicLink.html">Magic Link</a></li></ul></li><li><a href="Deploy.html">Deploy TokenScript</a></li><li><a href="features/FeatureImplementation.html">Features implemented</a></li><li><a href="specs/Intro.html">TokenScript Specs</a></li><li><a href="guides/Intro.html">TokenScript Guides</a></li></ul></nav><main role="main" class="col-lg-9"><article role="article" aria-labelledby="ariaid-title1">
<h1 class="title topictitle1" id="ariaid-title1">ActivityCard</h1>
<div class="body conbody"><p class="shortdesc">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.</p>
<div class="p">
<div class="note note note_note"><span class="note__title">Note:</span> 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.</div>
</div>
<section class="section"><h2 class="title sectiontitle">Why Activity Card</h2>
<p class="p">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.</p>
<p class="p">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. </p>
<p class="p">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.</p>
<p class="p">Activity Cards solve this problem. The card is assigned to a token and creates, stores
and loads <a class="xref" href="DataObjects.html" title="With Data Objects you can add data to a TokenScript. Data objects are in a format that allows efficient signing and onchain storage.">Data Objects</a>. 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.</p>
<p class="p">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.</p>
<p class="p">To sum it up: Activity Cards allow token issuers to create customized history records for
their token.</p>
</section><section class="section"><h2 class="title sectiontitle">How Activity Card works with Ethereum</h2>
<div class="p">
<div class="note note note_note"><span class="note__title">Note:</span> that this code might change with the release of AlphaWallet implementing Activity
Cards.</div>
</div>
<p class="p">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.</p>
<p class="p">Assuming that an event </p>
<div class="p">
<pre class="pre codeblock"><code><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></code></pre>
</div>
<p class="p">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:</p>
<pre class="pre codeblock"><code>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();
};</code></pre>
<p class="p">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.</p>
</section>
</div>
<nav role="navigation" class="related-links"><div class="familylinks"><div class="parentlink"><strong>Parent topic:</strong> <a class="link" href="Card.html" title="Cards are a fundamental part of Tokenscript. They define how the token behaves in the wallet and in web pages. They are the only part of Tokenscript which is visible for the user.">Card</a></div></div><div class="linklist relref"><strong>Related reference</strong><br><ul class="linklist"><li class="linklist"><a class="link" href="elements/card.html" title="card element defines a Card"><card> element</a></li><li class="linklist"><a class="link" href="elements/cards.html" title="cards element is a container of multiple Card. It can be used as a root element of a TokenScript File."><cards> element</a></li></ul></div></nav></article></main></div></div></body></html>