Skip to content

Commit 8054ba4

Browse files
author
Weiwu Zhang
committed
docs are generated from the document repository
1 parent 37c310e commit 8054ba4

File tree

95 files changed

+6162
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

95 files changed

+6162
-0
lines changed

‎docs/ActionCard.html

Lines changed: 211 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/ActivityCard.html

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html
2+
SYSTEM "about:legacy-compat">
3+
<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>
4+
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Lato">
5+
<script type="text/javascript" src="https://alphawallet.com/wp-content/themes/alphawallet/discourse/widget.js"></script>
6+
</head><body id="concept_rpz_3jl_mmb"><header role="banner"><nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
7+
<div class="container">
8+
<a class="navbar-brand" href="/">🆃okenScript</a>
9+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
10+
<span class="navbar-toggler-icon"></span>
11+
</button>
12+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
13+
<ul class="navbar-nav mr-auto">
14+
<li class="nav-item"><a class="nav-link" href="/TokenScript.html">Documents</a></li>
15+
<li class="nav-item"><a class="nav-link" href="/guides/Intro.html">Guides</a></li>
16+
<li class="nav-item"><a class="nav-link" href="/specs/Intro.html">Specs</a></li>
17+
<li class="nav-item external"><a class="nav-link" href="">TokenScript community forum</a></li>
18+
<li class="nav-item external"><a class="nav-link" href="/TokenScript.html">AlphaWallet (uses TokenScript)</a></li>
19+
<li class="nav-item external"><a class="nav-link" href="/guides/Intro.html">Github TokenScript</a></li>
20+
<li class="nav-item external"><a class="nav-link" href="/specs/Intro.html">Github TokenScript Examples</a></li>
21+
</ul>
22+
</div>
23+
</div>
24+
</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">
25+
<h1 class="title topictitle1" id="ariaid-title1">ActivityCard</h1>
26+
27+
<div class="body conbody"><p class="shortdesc">Activity Cards show relevant blockchain events, as well as relevant off-chain
28+
activities. They serve as a library of what is possible and a timeline of what
29+
happened.</p>
30+
<div class="p">
31+
<div class="note note note_note"><span class="note__title">Note:</span> In the current version of AlphaWallet Activity Cards are not supported. But
32+
AlphaWallet will soon release a version which supports Activity Cards. In this
33+
version the "transaction" tab will be renamed to "activity" tab.</div>
34+
</div>
35+
<section class="section"><h2 class="title sectiontitle">Why Activity Card</h2>
36+
<p class="p">Activity Cards are meant to show the history of a token. This might seem trivial, since
37+
any wallets connects to a blockchain, which already serves a shared history of
38+
transactions.</p>
39+
<p class="p">But if you ever used dApps with a standard wallet, you know how important Activity Cards
40+
are. Usually the wallet shows only transactions, in best cases, it also shows the token
41+
involved. This might be enough for plain value transfers. </p>
42+
<p class="p">But if you have token interacting with smart contracts - like, lending a token,
43+
exchanging tokens, (or in the future, renting a car) - the information of a plain
44+
transaction gets close to zero. Your wallet simply doesn't understand what happened.
45+
To make it understand what has happened, the wallet developers need to understand
46+
each smart contract and implement its logic in the wallet. This might work for a few
47+
popular token - but it can never scale to a large and diversified token
48+
universe.</p>
49+
<p class="p">Activity Cards solve this problem. The card is assigned to a token and creates, stores
50+
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
51+
the transaction, but also the purpose of the transaction - that a user rented a car,
52+
lended or exchanged a token and so on. And all the wallet has to do is to download the
53+
TokenScript.</p>
54+
<p class="p">Furthermore, Activity Cards remember offchain activities: That you created a Magic Link
55+
to allow someone else to withdraw tokens from your wallet, than your wallet displayed a
56+
QR code at a gate, that you called an API with an Action Card and so on.</p>
57+
<p class="p">To sum it up: Activity Cards allow token issuers to create customized history records for
58+
their token.</p>
59+
</section><section class="section"><h2 class="title sectiontitle">How Activity Card works with Ethereum</h2>
60+
61+
<div class="p">
62+
<div class="note note note_note"><span class="note__title">Note:</span> that this code might change with the release of AlphaWallet implementing Activity
63+
Cards.</div>
64+
</div>
65+
<p class="p">An ActivityCard is based on an event. Events themselves are not described in the
66+
activity card, but rather instead sourced as a data module. Data module is covered
67+
in a separate article.</p>
68+
<p class="p">Assuming that an event </p>
69+
<div class="p">
70+
<pre class="pre codeblock"><code>&lt;ts:cards&gt;
71+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ts:card type="activity" name="ownerApproved"&gt;
72+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ts:origins&gt;
73+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ethereum:event type="Approval" filter="owner=${ownerAddress}"/&gt;
74+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ts:origins&gt;
75+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ts:item-view xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
76+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;style type="text/css"&gt;&amp;style;&lt;/style&gt;
77+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script&nbsp; type="text/javascript"&gt;&amp;item-view-ownerApproved.en;&lt;/script&gt;
78+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ts:item-view&gt;
79+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ts:view xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
80+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;style type="text/css"&gt;&amp;style;&lt;/style&gt;
81+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script&nbsp; type="text/javascript"&gt;&amp;gaveApproval.en;&lt;/script&gt;
82+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ts:view&gt;
83+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ts:card&gt;
84+
&lt;/ts:cards&gt;</code></pre>
85+
</div>
86+
<p class="p">When it is implemented in AlphaWallet, this Activity Card will be visible in the Activity
87+
tab. By clicking on it, users can view more information about what happened. Like in an
88+
Action Card this information is produced by a JavaScript file like
89+
item-view-ownerApproved.en.js:</p>
90+
<pre class="pre codeblock"><code>class Token {
91+
92+
&nbsp;&nbsp;&nbsp; constructor(tokenInstance) {
93+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.props = tokenInstance;
94+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.setConfirm();
95+
&nbsp;&nbsp;&nbsp; }
96+
97+
&nbsp;&nbsp;&nbsp; setConfirm() {
98+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.onConfirm = function() {
99+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.close();
100+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
101+
&nbsp;&nbsp;&nbsp; }
102+
103+
&nbsp;&nbsp;&nbsp; render() {
104+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return`
105+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="ui container"&gt;
106+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="ui segment"&gt;
107+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src="data:image/png;base64,i...g=="&gt;
108+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span&gt;&lt;bold&gt;&lt;h3&gt;Gave approval to move ${this.props.amount} ${this.props.symbol} to ${this.props.to}&lt;/h3&gt;&lt;/bold&gt;&lt;/span&gt;
109+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
110+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
111+
`;
112+
&nbsp;&nbsp;&nbsp; }
113+
}
114+
115+
web3.tokens.dataChanged = (oldTokens, updatedTokens, tokenIdCard) =&gt; {
116+
&nbsp;&nbsp;&nbsp; const currentTokenInstance = web3.tokens.data.currentInstance;
117+
&nbsp;&nbsp;&nbsp; document.getElementById(tokenIdCard).innerHTML = new Token(currentTokenInstance).render();
118+
};</code></pre>
119+
<p class="p">As in Action Cards, the JavaScript file renders what the user will see: It displays the
120+
message that he gave approval for address x to move y token. It would also be possible
121+
to add a link to the transaction on any blockchain explorer and more.</p>
122+
</section>
123+
</div>
124+
<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">&lt;card&gt; 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.">&lt;cards&gt; element</a></li></ul></div></nav></article></main></div></div></body></html>

0 commit comments

Comments
 (0)