forked from SmartTokenLabs/TokenScript
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTokenScript-Component.html
185 lines (179 loc) · 18 KB
/
TokenScript-Component.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!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="TokenScript file is an overlay of XML Mark-up and JavaScript."><meta name="DC.relation" scheme="URI" content="BasicConcepts.html"><meta name="DC.relation" scheme="URI" content="elements/contract.html"><meta name="DC.relation" scheme="URI" content="elements/address.html"><meta name="DC.relation" scheme="URI" content="elements/token.html"><meta name="DC.format" content="HTML5"><meta name="DC.identifier" content="concept_yph_nkg_nmb"><link rel="stylesheet" type="text/css" href="css/commonltr.css"><link rel="stylesheet" type="text/css" href="css/custom.css"><title>TokenScript File</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_yph_nkg_nmb"><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 class="active"><a href="TokenScript-Component.html">TokenScript File</a></li><li><a href="Attributes.html">Attributes</a></li><li><a href="Card.html">Card</a></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">TokenScript File</h1>
<div class="body conbody"><p class="shortdesc">TokenScript file
is an overlay of XML Mark-up and JavaScript.</p>
<p dir="ltr" class="p" id="concept_yph_nkg_nmb__docs-internal-guid-97ed4cbc-7fff-a39d-5b96-20bec9a103c1">A TokenScript file
consists of Token Cards, presently in JavaScript and HTML, overlayed with XML
mark-up.</p>
<p dir="ltr" class="p">The XML mark-up tells a <a class="xref" href="Engine.html" title="A TokenScript engine runs TokenScript">TokenScript Engine</a> to work out how to identify,
index and search a token, provide data for its actions and connect it to the web. The
JavaScript is used in TokenCards to render token UX and carry out token actions.</p>
<p dir="ltr" class="p">The TokenScript is not part of the smart contract which created the token. But
it must contain a reference to it and can interact with it.</p>
<p dir="ltr" class="p">The TokenScript files are written and <a class="xref" href="Signing.html" title="TokenScript files are signed by the token issuer, usually.">signed by the
issuer of a token or a trusted party</a>. They can be updated with another
signature. Users can download the TokenScript files on any website or the TokenScript
repository and validate the signature. This makes it impossible to fake a TokenScript. </p>
<p dir="ltr" class="p">Wallets which understand TokenScript can import it and render the user
experience according to the TokenScript instructions.</p>
<section class="section"><h2 class="title sectiontitle">The XML markup</h2>
<p dir="ltr" class="p" id="concept_yph_nkg_nmb__docs-internal-guid-f87167c3-7fff-e895-9671-be989e591192">The XML markup is
usually expressed in a file and uses standard XML syntax. It is mostly a declarative
language, with declarations sometimes being nested.</p>
<p dir="ltr" class="p">The XML markup describes properties of the token: The functions it provides,
the smart contract it relies upon, the behavior of the token, information of the token
and much more. </p>
<p dir="ltr" class="p">There is a <a class="xref" href="elements/index.html" title="Reference of all elements that can be used in a TokenScript.">list of XML declarations</a>
developed by TokenScript. For most cases you only need a few of them.</p>
<p dir="ltr" class="p">TokenScript uses XML according the the c14n canonicalization. This allows to
create standardized digital signatures for XML and to enforce standardized static types
like ASN.1 data modules.</p>
<p class="p">The best way to understand how the XML files are structured, study <a class="xref" href="https://github.com/AlphaWallet/TokenScript-Examples" target="_blank" rel="external noopener">our TokenScript example</a> repo.</p>
<div class="p">Here is a fragmented example for a TokenScript XML
file:<pre class="pre codeblock"><code><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE token [
<!ENTITY style SYSTEM "shared.css">
<!ENTITY about.en SYSTEM "about.en.js">
]>
<ts:token
xmlns:ts="http://tokenscript.org/2020/06/tokenscript"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:asnx="urn:ietf:params:xml:ns:asnx"
xmlns:ethereum="urn:ethereum:constantinople" xsi:schemaLocation="http://tokenscript.org/2020/06/tokenscript http://tokenscript.org/2020/06/tokenscript.xsd" custodian="false">
<asnx:module name="Coin-event-Sent">
<namedType name="Sent">
<sequence>
<element name="from" ethereum:type="address" ethereum:indexed="false"></element>
<element name="to" ethereum:type="address" ethereum:indexed="false"></element>
<element name="amount" ethereum:type="uint256" ethereum:indexed="false"></element>
</sequence>
</namedType>
</asnx:module>
<ts:label>
<ts:string xml:lang="en">Coin</ts:string>
</ts:label>
<ts:contract interface="erc20" name="Coin">
<ts:address network="3">0xe35FE4A1B17d50A8022078d98162DB25bC860834</ts:address>
</ts:contract>
<ts:origins>
<ts:ethereum contract="Coin"/>
</ts:origins>
<ts:cards>
<ts:card type="action">
<ts:label>
<ts:string xml:lang="en">Approve</ts:string>
</ts:label>
<ts:attribute name="approvalAddress">
<ts:type>
<ts:syntax>1.3.6.1.4.1.1466.115.121.1.36</ts:syntax>
</ts:type>
<ts:label>
<ts:string xml:lang="en">Approval Address</ts:string>
</ts:label>
<ts:origins>
<ts:user-entry as="address"/>
</ts:origins>
</ts:attribute>
<ts:transaction>
<ethereum:transaction function="approve" contract="Coin" as="uint">
<ts:data>
<ts:address ref="approvalAddress"/> <ts:uint256>115792089237316195423570985008687907853269984665640564039457584007913129639935</ts:uint256>
</ts:data>
</ethereum:transaction>
</ts:transaction>
<ts:view
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<style type="text/css">&style;</style>
<script type="text/javascript">&approve.en;</script>
</ts:view>
</ts:card>
</ts:cards>
<ts:attribute name="name">
<ts:type>
<ts:syntax>1.3.6.1.4.1.1466.115.121.1.26</ts:syntax>
</ts:type>
<ts:label>
<ts:string xml:lang="en">name</ts:string>
</ts:label>
<ts:origins>
<ethereum:call function="name" contract="Coin" as="utf8"></ethereum:call>
</ts:origins>
</ts:attribute>
</ts:token>
</code></pre></div>
</section><section class="section"><h2 class="title sectiontitle">JavaScript / WebAssembly</h2>
<p dir="ltr" class="p" id="concept_yph_nkg_nmb__docs-internal-guid-164e561b-7fff-349a-545c-506c6cb992db">The JavaScript
part integrates TokenScript in the wallet or dApps. It renders the display of the token
and can execute custom offchain functionalities. Broadly, it is the dynamic part of the
TokenScript, while XML is the static one.</p>
<p dir="ltr" class="p">Everything what happens in the wallet and everything a user can see is
described with JavaScript: The rendering of the environment, the display of text and
images and so on. In terms of TokenScript, JavaScript is used when a card is
triggered.</p>
<p dir="ltr" class="p">The creators of TokenScript use JavaScript. But any WeAssembly compatible
language like Ruby or C can be used. The wallet importing TokenScript needs to
understand these languages.</p>
<p class="p">Again, the best way to learn about how to build the JavaScript files is to inspect them in
the <a class="xref" href="https://github.com/AlphaWallet/TokenScript-Examples/blob/master/examples/erc20/WETH/WETH.xml" target="_blank" rel="external noopener">TokenScript example repo</a>. Here we present a
very simple JavaScript to show an "about" site.</p>
<div class="p">
<pre class="pre codeblock"><code>//<![CDATA[
class Token {
constructor(tokenInstance) {
this.props = tokenInstance;
this.setConfirm();
}
setConfirm() {
window.onConfirm = function() {
window.close();
}
}
render() {
let message = "Sample about page for your token, fill me up!";
return`
<div class="ui container">
<div class="ui segment">
<img src="https://www.bitcoin-buch.org/bitcoin-geschichte-front-1.jpg" />
<span><bold><h1>This is the Token of Christoph!</h1></bold><br /><br />It is a one of the century chance to invest!</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>
</div>
</section><section class="section"><h2 class="title sectiontitle">Merging and signing the files</h2>
<p class="p">To deploy TokenScript, the files needs to be merged in a canonicalized XML file. For
testing purposes you can load the canonicalized XML file in the AlphaWallet folder
on your smart phone. For production you must sign the file and make it available to
your users, either by a website or by the <a class="xref" href="https://github.com/AlphaWallet/TokenScript-Repo" target="_blank" rel="external noopener">TokenScript repo</a>.</p></section>
</div>
<nav role="navigation" class="related-links"><div class="familylinks"><div class="parentlink"><strong>Parent topic:</strong> <a class="link" href="BasicConcepts.html" title="Learn about the basic concepts of TokenScript, which are used for creating a TokenScript.">Basic Concepts</a></div></div><div class="linklist relref"><strong>Related reference</strong><br><ul class="linklist"><li class="linklist"><a class="link" href="elements/contract.html" title="The contract elements declares address, network and name of the token's smart contract.">Contract</a></li><li class="linklist"><a class="link" href="elements/address.html" title="The address element declares an Address, usually that of a smart contract on Ethereum.">Address</a></li><li class="linklist"><a class="link" href="elements/token.html" title="token element defines a Token"><token> element</a></li></ul></div></nav></article></main></div></div></body></html>