forked from interledger/interledger.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
351 lines (321 loc) · 20.3 KB
/
index.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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
---
layout: page
title: "Welcome | Interledger"
---
<div class="jumbotron">
<div class="container">
<div class="col-sm-4">
<img class='hero-img img-responsive animated zoomIn' src='assets/ilp_logo.svg' />
</div>
<div class="col-sm-8">
<h1>Interledger</h1>
<div class="typewriter-wrapper">
<p class="typewriter-intro">The protocol for connecting <span class="typewriter"></span></p>
</div>
<p><a class="btn btn-primary btn-lg getting-started-button" href="getting-started.html" role="button">Try It
Out</a></p>
</div>
</div>
</div>
<!-- event callout section -->
<div class="container-fluid callout-banner">
<div class="col-xs-12">
<p>Watch the videos from the
<a href="summit-2019.html">2019 Interledger Developer Summit</a>
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-1">
</div>
<div class="col-md-10 lead">
Interledger is an open protocol suite for sending payments across
different <b>ledgers</b>.
Like routers on the Internet, <b>connectors</b> route packets of money across independent payment
networks.
The open architecture and minimal protocol enable interoperability for any value transfer system.
Interledger is not tied to any one company, blockchain, or currency.
<br>
<br>
Interested in connecting ledgers, building with micropayments or getting involved in the protocol
development? Join the <a href="community.html">Interledger W3C Community Group</a>!
</div>
<div class="col-md-1">
</div>
</div>
</div>
<hr>
<br>
<!-- benefits section -->
<div class="row">
<div class="col-md-12">
<div class="benefit col-sm-4">
<div class="benefit-wrapper">
<img class="code-img img-responsive" src="assets/icn_code.svg">
</div>
<h3>Code With Money</h3>
<p>Add payments without being tied to a single currency or payment provider.</p>
</div>
<div class="benefit col-sm-4">
<div class="benefit-wrapper">
<img class="hop-img img-responsive" src="assets/icn_hop.svg">
</div>
<h3>Multi-Hop Routing</h3>
<p>Send payments to other ledgers, even if they are multiple hops away.</p>
</div>
<div class="benefit col-sm-4">
<div class="benefit-wrapper">
<img class="simple-img img-responsive" src="assets/icn_simple.svg">
</div>
<h3>Simple Protocol</h3>
<p>Inspired by TCP/IP, Interledger is easy to implement and use.</p>
</div>
</div>
</div>
<hr>
<!-- example section -->
<div class="col-md-12">
<h2>Receiving Money</h2>
<p class="example-intro">Interledger allows you to receive money from any ledger, without setting up accounts on
lots of different services.</p>
<div class="row example-wrapper">
<div class='col-sm-8 col-xs-12'>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#js1">Javascript</a></li>
<li class="teaser"><a data-toggle="tab" href="#menu1">+</a></li>
</ul>
<div class="tab-content">
<div id="js1" class="tab-pane active">
<pre><code>const Koa = require('koa')
const router = require('koa-router')()
const app = new Koa()
const KoaIlp = require('koa-ilp')
const plugin = require('ilp-plugin')()
const ilp = new KoaIlp({ plugin })
router.get('/', ilp.paid({ price: 1000 }), async ctx => {
ctx.body = 'Hello World!'
})
app
.use(router.routes())
.use(router.allowedMethods())
.listen(8080)</code></pre>
</div>
<div id="menu1" class="tab-pane">
<pre><code>
<!-- Don’t see your language here? -->
Help implement Interledger in your
favorite programming language.
<p><a class="btn btn-primary btn-lg getting-started-button contribute" target="_blank" href="https://github.com/interledger" role="button">Contribute</a></p>
</code></pre>
</div>
</div>
<div class="callout left">
<div class="col-sm-2 hidden-xs">
<img class='magic' src='assets/icn_routing.svg' />
</div>
<div class="col-sm-10 col-xs-12">
<h2>Automated Routing</h2>
<p>Interledger takes care of getting your money from ledger A to ledger Z, so you can get back
to building awesome things! If you’re interested, <a
href="/rfcs/0001-interledger-architecture/">learn more about how the magic works.</a>
</p>
</div>
</div>
<h2 class="simple">Simple Sending</h2>
<p class="example-intro">Interledger makes it easy to send money, no matter what ledger you or the
recipient are on.</p>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#js2">Javascript</a></li>
<li class="teaser"><a data-toggle="tab" href="#sh2">Command-Line</a></li>
<li class="teaser"><a data-toggle="tab" href="#menu2">+</a></li>
</ul>
<div class="tab-content">
<div id="js2" class="tab-pane active">
<pre><code>const plugin = require('ilp-plugin')()
const fetch = require('ilp-fetch')
fetch('http://localhost:8080/', {
method: 'GET',
maxPrice: 5000,
plugin
})
.then(response => {
console.log('paid!')
console.log('got response:', response.text)
})</code></pre>
</div>
<div id="sh2" class="tab-pane">
<pre><code>$ npm install -g ilp-curl moneyd
$ moneyd configure --testnet
$ moneyd start --testnet
$ ilp-curl -X GET http://localhost:8080/
Hello World!</code></pre>
</div>
<div id="menu2" class="tab-pane">
<pre><code>
<!-- Don’t see your language here? -->
Help implement Interledger in your
favorite programming language.
<p><a class="btn btn-primary btn-lg getting-started-button contribute" target="_blank" href="https://github.com/interledger" role="button">Contribute</a></p>
</code></pre>
</div>
</div>
</div>
<div class="col-sm-4 hidden-xs text-center">
<h2 class="receiving-amount">€ <span class="receiver">23.12<span class="superscript">0</span></span> EUR
</h2>
<p class="account">Receiving account</p>
<div class="canvas-wrapper">
<svg id="svgGraphic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 1000">
<line id="conncection-top" y1="48.102" x2="133.0815" y2="48.102"
style="fill:none;stroke:#4f6164;stroke-miterlimit:10" />
<line id="connection-btm" x1="133.0815" y1="951.898" y2="951.898"
style="fill:none;stroke:#4f6164;stroke-miterlimit:10" />
<g id="lines_bg">
<polyline points="170.081 48.102 133.081 376.669 81.402 532.924 170.081 951.898"
style="fill:none;stroke:#36dabc;stroke-miterlimit:10;opacity:0.3" />
<line x1="170.0815" y1="48.102" x2="207.0815" y2="618.9239"
style="fill:none;stroke:#36dabc;stroke-miterlimit:10;opacity:0.3" />
<line x1="170.0815" y1="951.898" x2="207.0815" y2="618.9239"
style="fill:none;stroke:#36dabc;stroke-miterlimit:10;opacity:0.3" />
<line x1="81.4021" y1="532.9238" x2="207.0815" y2="618.9239"
style="fill:none;stroke:#36dabc;stroke-miterlimit:10;opacity:0.3" />
<line x1="133.0815" y1="376.6689" x2="207.0815" y2="618.9239"
style="fill:none;stroke:#36dabc;stroke-miterlimit:10;opacity:0.3" />
</g>
<circle id="circle-5" cx="170.0815" cy="48.102" r="37"
style="fill:#176f87;opacity:0.7;transform-origin: 18.5px 18.5px" />
<circle id="circle-4" cx="133.0815" cy="376.6689" r="35.5277"
style="fill:#529948;opacity:0.5;transform-origin: 17.7px 17.7px" />
<circle id="circle-3" cx="81.4021" cy="532.9238" r="42.465"
style="fill:#254c45;opacity:0.7;transform-origin: 21.2px 21.2px" />
<circle id="circle-2" cx="207.0815" cy="618.9239" r="26.403"
style="fill:#f7ba59;opacity:0.7;transform-origin: 13.2px 13.2px" />
<circle id="circle-1" cx="170.0815" cy="951.898" r="37"
style="fill:#c95959;opacity:0.7;transform-origin: 18.5px 18.5px" />
<g id="label-1">
<text transform="translate(217.1534 956.8694)"
style="font-size:14px;fill:#333;font-family:Source Sans Pro">
Digital Wallet
</text>
</g>
<text transform="translate(178.044 380.2177)"
style="font-size:14px;fill:#253b3f;font-family:Source Sans Pro">
Local Bank
</text>
<text transform="translate(135.5684 536.4723)"
style="font-size:14px;fill:#253b3f;font-family:Source Sans Pro">
International Bank
</text>
<text transform="translate(241.4844 622.4718)"
style="font-size:14px;fill:#253b3f;font-family:Source Sans Pro">
Cryptocurrency
</text>
<g id="label-5">
<text transform="translate(216.1534 45.3919)"
style="font-size:14px;fill:#333;font-family:Source Sans Pro">
Online
<tspan x="0" y="16">Payment Service</tspan>
</text>
</g>
<g id="icn-bigbank">
<polyline
points="85.25 547.882 85.25 537.897 77.487 537.897 77.487 547.882 56.89 547.882 56.89 522.142 71.233 522.142 71.233 509.997 91.901 509.997 91.901 522.142 106.232 522.142 106.232 547.882 91.901 547.882 91.901 526.899"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="61.7193" y1="526.8991" x2="66.0957" y2="526.8991"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="61.7193" y1="531.8288" x2="66.0957" y2="531.8288"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="61.7193" y1="536.7586" x2="66.0957" y2="536.7586"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="61.7193" y1="541.6883" x2="66.0957" y2="541.6883"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="97.0383" y1="526.8991" x2="101.4147" y2="526.8991"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="97.0383" y1="531.8288" x2="101.4147" y2="531.8288"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="97.0383" y1="536.7586" x2="101.4147" y2="536.7586"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="97.0383" y1="541.6883" x2="101.4147" y2="541.6883"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="86.2988" y1="516.109" x2="86.2988" y2="520.4854"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="81.3691" y1="516.109" x2="81.3691" y2="520.4854"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="76.4393" y1="516.109" x2="76.4393" y2="520.4854"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="86.2988" y1="526.8828" x2="86.2988" y2="531.2592"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="76.4393" y1="526.8828" x2="76.4393" y2="531.2592"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="71.2326" y1="522.1425" x2="71.2326" y2="543.4993"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="52.6121" y1="552.2493" x2="110.1261" y2="552.2493"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
</g>
<g id="icn-display">
<path
d="M151.4382,957.9249h37.2866v4.6467a1.4828,1.4828,0,0,1-1.4928,1.4726H174.4809v3.8a1.4614,1.4614,0,0,0,.3815.9833l2.0962,2.3054a0.7353,0.7353,0,0,1-.5556,1.228H164.4859a0.7353,0.7353,0,0,1-.5556-1.228l2.0962-2.3054a1.4614,1.4614,0,0,0,.3815-0.9833v-3.8H152.931a1.4828,1.4828,0,0,1-1.4928-1.4726V939.488a1.4828,1.4828,0,0,1,1.4928-1.4726h34.301a1.4828,1.4828,0,0,1,1.4928,1.4726v14.4928"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="166.408" y1="968.0446" x2="170.0815" y2="968.0446"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:1.85px" />
</g>
<g id="icn-phone">
<path
d="M181.2137,38.4073V67.7108a2.2505,2.2505,0,0,1-2.2656,2.2351H161.2122a2.2505,2.2505,0,0,1-2.2656-2.2351V28.4932a2.2505,2.2505,0,0,1,2.2656-2.2351h17.7359a2.2505,2.2505,0,0,1,2.2656,2.2351v4.8826H158.9466"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:1.85px" />
<line x1="158.9466" y1="60.8647" x2="181.2137" y2="60.8647"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:1.85px" />
<ellipse cx="170.0802" cy="65.4053" rx="1.471" ry="1.4511" style="fill:#fff" />
</g>
<g id="icn-bank">
<path
d="M137.6337,370.8155H117.0366a0.6856,0.6856,0,0,1-.4137-1.24L131.9893,358.38l16.3163,11.1845a0.6856,0.6856,0,0,1-.3974,1.2512h-5.0327V386.41a0.72,0.72,0,0,1-.7248.715H128.614l-0.0057-16.3091"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<line x1="121.4417" y1="370.8155" x2="121.4417" y2="387.1246"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:1.85px" />
<line x1="135.5689" y1="370.8155" x2="135.5689" y2="387.1246"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:1.85px" />
<line x1="115.783" y1="390.9699" x2="149.1618" y2="390.9699"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:1.85px" />
</g>
<g id="icn-wallet">
<path
d="M195.5129,608.2415v20.37a1.2813,1.2813,0,0,0,1.2813,1.2813h22.2583a1.2813,1.2813,0,0,0,1.2813-1.2813v-4.8963"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<path
d="M222.65,617.7583v4.2424a1.3837,1.3837,0,0,1-1.3837,1.3837h-6.379a1.3477,1.3477,0,0,1-1.0248-.4725L211.9741,620.7a1.3477,1.3477,0,0,1-.0018-1.7483l1.8055-2.1231a1.3477,1.3477,0,0,1,1.0267-.4746h4.3647a1.1646,1.1646,0,0,0,1.1646-1.1646v-3.4964a1.1646,1.1646,0,0,0-1.1646-1.1646H197.8a2.2869,2.2869,0,0,1-2.2869-2.2869h0a2.2869,2.2869,0,0,1,2.2869-2.2869h17.1286a1.2135,1.2135,0,0,1,1.2135,1.2135h0"
style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85px" />
<circle cx="216.1534" cy="619.9761" r="1.4649" style="fill:#fff" />
</g>
<circle id="dot-5" cx="170.0815" cy="48.102" r="1.9941" style="fill:#36dabc" />
<circle id="dot-4" cx="133.0815" cy="376.6689" r="1.9941" style="fill:#36dabc" />
<circle id="dot-3" cx="81.4021" cy="532.9238" r="1.9941" style="fill:#36dabc" />
<circle id="dot-2" cx="207.0815" cy="618.9239" r="1.9941" style="fill:#36dabc" />
<circle id="dot-1" cx="170.0815" cy="950.8979" r="1.9941" style="fill:#36dabc" />
<polyline id="path-1" points="170 951 81 533 133 377 170 48"
style="fill:none;stroke:#36dabc;stroke-miterlimit:10;stroke-width:2px" />
<polyline id="path-4" points="170 951 207 619 81 533 133 377 170 48"
style="fill:none;stroke:#36dabc;stroke-miterlimit:10;stroke-width:2px" />
<polyline id="path-2" points="170 951 207 619 133 377 170 48"
style="fill:none;stroke:#36dabc;stroke-miterlimit:10;stroke-width:2px" />
<polyline id="path-3" points="170 951 207 619 170 48"
style="fill:none;stroke:#36dabc;stroke-miterlimit:10;stroke-width:2px" />
</svg>
</div>
<h2 class="sending-amount">$ <span class="sender">525.38<span class="superscript">0</span></span> USD
</h2>
<p class="account">Sending account</p>
</div>
</div>
<hr>
<div class="row get-started">
<div class="col-sm-12">
<div class="text-center">
<a class="btn btn-primary btn-lg" href="getting-started.html" role="button">Try It Out</a>
</div>
</div>
</div>
</div>
</div> <!-- /container -->