This repository has been archived by the owner on Mar 11, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 160
/
drizzle.html
284 lines (249 loc) · 24 KB
/
drizzle.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
<!DOCTYPE html>
<html>
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WHT4PS2');</script>
<!-- End Google Tag Manager -->
<!-- HubSpot Forms -->
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/4795067.js"></script>
<!-- End of HubSpot Embed Code -->
<meta charset="utf-8">
<meta name="description" content="Drizzle makes writing dapp (decentralized application) front-ends easier and more predictable. Drizzle is based on a Redux store and takes care of synchronizing your contract data, transaction data and more.">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="environment" content="">
<!-- Favicon -->
<link rel="icon" href="/img/favicons/favicon.ico">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Truffle Suite">
<link rel="icon" sizes="192x192" href="/img/favicons/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Truffle Suite">
<link rel="apple-touch-icon" href="/img/favicons/apple-touch-icon.png">
<!-- Tile icon for Win8/10 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/favicons/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Facebook OpenGraph -->
<meta property="og:site_name" content="Truffle Suite" />
<meta property="og:description" content="Drizzle makes writing dapp (decentralized application) front-ends easier and more predictable. Drizzle is based on a Redux store and takes care of synchronizing your contract data, transaction data and more." />
<meta property="og:title" content="Drizzle | Truffle Suite" />
<meta property="og:url" content="https://trufflesuite.com/drizzle" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://truffleframework.com/img/favicons/truffle-share.png" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="Truffle Suite" />
<meta name="twitter:title" content="Drizzle | Truffle Suite" />
<meta name="twitter:description" content="Drizzle makes writing dapp (decentralized application) front-ends easier and more predictable. Drizzle is based on a Redux store and takes care of synchronizing your contract data, transaction data and more." />
<meta name="twitter:creator" content="Truffle Suite" />
<meta name="twitter:domain" content="trufflesuite.com" />
<meta name="twitter:image:src" content="https://truffleframework.com/img/favicons/truffle-share.png" />
<meta name="google-site-verification" content="BSgPkMHzw7IxJTpEElNfD8ZZYPzXgOQiTVPzAxAG8-o" />
<title>Drizzle | Truffle Suite</title>
<link href="https://fonts.googleapis.com/css?family=Grand+Hotel|Open+Sans|Oswald|Varela+Round|Roboto+Condensed|Roboto+Mono|Cinzel" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/okj1vue.css">
<script src="https://kit.fontawesome.com/371f2d7a8a.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/index.css?cache_buster=1623735132214">
<!-- start Mixpanel --><!--<script type="text/javascript">(function(c,a){if(!a.__SV){var b=window;try{var d,m,j,k=b.location,f=k.hash;d=function(a,b){return(m=a.match(RegExp(b+"=([^&]*)")))?m[1]:null};f&&d(f,"state")&&(j=JSON.parse(decodeURIComponent(d(f,"state"))),"mpeditor"===j.action&&(b.sessionStorage.setItem("_mpcehash",f),history.replaceState(j.desiredHash||"",c.title,k.pathname+k.search)))}catch(n){}var l,h;window.mixpanel=a;a._i=[];a.init=function(b,d,g){function c(b,i){var a=i.split(".");2==a.length&&(b=b[a[0]],i=a[1]);b[i]=function(){b.push([i].concat(Array.prototype.slice.call(arguments,
0)))}}var e=a;"undefined"!==typeof g?e=a[g]=[]:g="mixpanel";e.people=e.people||[];e.toString=function(b){var a="mixpanel";"mixpanel"!==g&&(a+="."+g);b||(a+=" (stub)");return a};e.people.toString=function(){return e.toString(1)+".people (stub)"};l="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
for(h=0;h<l.length;h++)c(e,l[h]);var f="set set_once union unset remove delete".split(" ");e.get_group=function(){function a(c){b[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));e.push([d,call2])}}for(var b={},d=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<f.length;c++)a(f[c]);return b};a._i.push([b,d,g])};a.__SV=1.2;b=c.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
MIXPANEL_CUSTOM_LIB_URL:"file:"===c.location.protocol&&"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";d=c.getElementsByTagName("script")[0];d.parentNode.insertBefore(b,d)}})(document,window.mixpanel||[]);
let devPort = '9000';
let devToken = 'ef061cba76a9bbc41219d6382fc12f23';
let prodToken = 'Production Token';
//If the hostname is anything other than your production domain, initialize the Mixpanel library with your Development Token
if (window.location.port.search(devPort) < 0) {
mixpanel.init(prodToken);
} else {
mixpanel.init(devToken);
}
</script>--><!-- end Mixpanel --></head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WHT4PS2"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top" id="primaryNav">
<a class="navbar-brand current" href="/">
<img class="suite-logo" src="/img/drizzle-logomark.svg" alt="Truffle Teams Logo" /><span class="d-none d-lg-block">TRUFFLE SUITE</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="suiteDropdown" href="#" data-toggle="dropdown">SUITE</a>
<div class="dropdown-menu">
<a class="text-truffle" href="/teams">
<img class="suite-logo" src="/img/tt-logomark.svg" alt="Truffle Teams Logo" /><span class="narrow">T</span>RUFFLE TEAMS
</a>
<a class="text-truffle" href="/truffle">
<img class="suite-logo" src="/img/truffle-logomark.svg" alt="Truffle Logo" /><span class="narrow">T</span>RUFFLE
</a>
<a class="text-ganache" href="/ganache">
<img class="suite-logo" src="/img/ganache-logomark.svg" alt="Ganache Logo" />Ganache
</a>
<a class="text-drizzle" href="/drizzle">
<img class="suite-logo" src="/img/drizzle-logomark.svg" alt="Drizzle Logo" />dri<span class="drizzle-z-skew-1">z</span><span class="drizzle-z-skew-2">z</span>le
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/docs">DOCS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/guides">GUIDES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/tutorial">TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/boxes">BOXES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/community">COMMUNITY</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="row align-items-center drizzle-heading-row">
<div class="col-md-6">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 440 671.34"><defs><style>.cls-1,.cls-3,.cls-4,.cls-5,.cls-8{fill:none;}.cls-2{fill:url(#radial-gradient);}.cls-3,.cls-4,.cls-5,.cls-8{stroke-miterlimit:10;}.cls-3{stroke:url(#linear-gradient);}.cls-4{stroke:url(#linear-gradient-2);}.cls-5{stroke:url(#linear-gradient-3);}.cls-6{fill:#e911bd;}.cls-7{fill-rule:evenodd;fill:url(#radial-gradient-2);}.cls-8{stroke:#e911bd;}.cls-9{fill:#5e464d;}.cls-10{fill:url(#radial-gradient-3);}.cls-11{fill:#fff;}.cls-12{clip-path:url(#clip-path);}</style><radialGradient id="radial-gradient" cx="220" cy="544.32" r="181.3" gradientTransform="translate(0 156.41) scale(1 0.71)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e911bd"/><stop offset="1" stop-color="#33262a" stop-opacity="0"/></radialGradient><linearGradient id="linear-gradient" x1="67.25" y1="476.59" x2="154.67" y2="476.59" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33262a" stop-opacity="0"/><stop offset="1" stop-color="#e911bd"/></linearGradient><linearGradient id="linear-gradient-2" x1="53.58" y1="484.48" x2="141.01" y2="484.48" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="80.91" y1="468.7" x2="168.33" y2="468.7" xlink:href="#linear-gradient"/><radialGradient id="radial-gradient-2" cx="220" cy="544.32" r="109.69" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1d1d1b"/><stop offset="0.49" stop-color="#2a2224"/><stop offset="1" stop-color="#33262a"/></radialGradient><radialGradient id="radial-gradient-3" cx="220" cy="505.53" r="62.24" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5e464d"/><stop offset="1" stop-color="#5e464d"/></radialGradient><clipPath id="clip-path"><path class="cls-1" d="M410,462.79,230,358.86c-5.5-3.17-10-10.27-10-15.77v-330c0-5.5,4.5-7.4,10-4.23L410,112.79c5.5,3.17,10,10.27,10,15.77v330C420,464.06,415.5,466,410,462.79Z"/></clipPath></defs><title>drizzle-header</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><ellipse class="cls-2" cx="220" cy="544.32" rx="220" ry="127.02"/><line class="cls-3" x1="67.5" y1="451.5" x2="154.42" y2="501.68"/><line class="cls-4" x1="53.83" y1="459.38" x2="140.76" y2="509.57"/><line class="cls-5" x1="81.16" y1="443.61" x2="168.08" y2="493.8"/><path class="cls-6" d="M220,466.76a17.77,17.77,0,0,1,8.66,2.06l122.11,70.5c4.77,2.75,4.77,7.25,0,10L228.66,619.83a19.23,19.23,0,0,1-17.32,0L89.23,549.32c-4.77-2.75-4.77-7.25,0-10l122.11-70.5a17.77,17.77,0,0,1,8.66-2.06m0-1a18.58,18.58,0,0,0-9.16,2.2L88.73,538.46c-2.63,1.51-4.08,3.6-4.08,5.86s1.45,4.35,4.08,5.87l122.11,70.5a20.17,20.17,0,0,0,18.32,0l122.11-70.5c2.63-1.52,4.08-3.6,4.08-5.87s-1.45-4.35-4.08-5.86L229.16,468a18.58,18.58,0,0,0-9.16-2.2Z"/><path class="cls-7" d="M89.23,539.32c-4.77,2.75-4.77,7.25,0,10l122.11,70.51c4.76,2.75,12.56,2.75,17.32,0l122.11-70.51c4.77-2.75,4.77-7.25,0-10l-122.11-70.5c-4.76-2.75-12.56-2.75-17.32,0Z"/><path class="cls-8" d="M320.5,128.57v348c0,5.5-3.9,12.25-8.66,15L290,504.22"/><path class="cls-8" d="M334.5,138.57v348c0,5.5-3.9,12.25-8.66,15l-20.21,11.67"/><path class="cls-8" d="M305.5,118.57v348c0,5.5-3.9,12.25-8.66,15l-23,13.3"/><path class="cls-9" d="M410,462.79,230,358.86c-5.5-3.17-10-10.27-10-15.77v-330c0-5.5,4.5-7.4,10-4.23L410,112.79c5.5,3.17,10,10.27,10,15.77v330C420,464.06,415.5,466,410,462.79Z"/><path class="cls-10" d="M285.8,512.58c0-.35.12-1,.12-1.39,0-34-31.9-61.8-65.94-61.8S154,477.25,154,511.29c0,.06,0,.46,0,.46h-.15l-1.7,30.85c.35,10.06,34,19.07,67.79,19.07,34,0,67.79-9,67.79-19.07Z"/><path class="cls-11" d="M183.42,517a77.37,77.37,0,0,0-1.48-11.11,76.58,76.58,0,0,0-2.88-10.41c-.61-1.66-1.23-3.29-1.94-4.86A47.37,47.37,0,0,1,175,486c-.23-.8-.45-1.6-.72-2.39s-.62-1.54-1-2.28c-.67-1.51-1.48-2.95-2.29-4.38l-.11-.2a6,6,0,0,1,7-8.68l.71.22.62.2,1.18.42c.77.28,1.53.57,2.29.88,1.5.6,3,1.25,4.43,1.93a93.1,93.1,0,0,1,8.47,4.55,84.33,84.33,0,0,1,15.28,11.81,71.87,71.87,0,0,1,12,15.41,68.91,68.91,0,0,1,7.26,18.24l-11.5-.74.28-.82.3-1c.2-.66.38-1.35.56-2,.35-1.38.65-2.79.92-4.2a72.91,72.91,0,0,0,1.06-8.6,67.37,67.37,0,0,0-1.09-17.15,60.53,60.53,0,0,0-5.58-16.1,64,64,0,0,0-9.83-14l-.07-.09a6,6,0,0,1,.37-8.47,6.06,6.06,0,0,1,4.84-1.52l.51.07.42.06.8.14,1.54.29c1,.21,2,.44,3,.69,2,.5,3.88,1.07,5.78,1.72a84.14,84.14,0,0,1,11,4.63,86,86,0,0,1,19.64,13.59,87.43,87.43,0,0,1,15.12,18.44,101.62,101.62,0,0,1,9.91,21.45l-11.2-.67.2-.48.25-.65c.16-.46.32-.93.46-1.41a25.6,25.6,0,0,0,.73-2.93c.17-1,.23-2,.36-3s.34-2,.51-3a30.34,30.34,0,0,0-.42-12.28,31.75,31.75,0,0,0-2.18-6.07,37.19,37.19,0,0,0-3.45-5.76,49.52,49.52,0,0,0-4.5-5.3,66,66,0,0,0-5.31-4.8,51.89,51.89,0,0,1,6.64,3,45.21,45.21,0,0,1,6.27,4.05,39.62,39.62,0,0,1,5.59,5.27,36.57,36.57,0,0,1,4.54,6.51,38.87,38.87,0,0,1,4.56,15.64,20.46,20.46,0,0,1,0,4.14,33.05,33.05,0,0,1-.77,4c-.31,1.33-.63,2.66-1,4-.2.66-.41,1.32-.65,2l-.39,1-.21.53-.28.64a6,6,0,0,1-11.13-.49l-.07-.19A89.36,89.36,0,0,0,258,493a75.72,75.72,0,0,0-13-15.91,73.94,73.94,0,0,0-16.88-11.68,72.81,72.81,0,0,0-9.48-4c-1.62-.55-3.25-1-4.89-1.45-.82-.21-1.63-.4-2.44-.57l-1.2-.23-.57-.09-.44-.07,5.13-10.07a76.17,76.17,0,0,1,11.67,16.66,72.73,72.73,0,0,1,6.68,19.29,79.11,79.11,0,0,1,1.29,20.24,82.89,82.89,0,0,1-1.23,10q-.47,2.49-1.09,5c-.22.83-.44,1.66-.69,2.5l-.39,1.26-.21.65-.27.75a6,6,0,0,1-11.47-.56l0-.17a56.57,56.57,0,0,0-6-15,59.48,59.48,0,0,0-10-12.83,72,72,0,0,0-13.1-10.11,78.39,78.39,0,0,0-7.34-3.94c-1.26-.59-2.53-1.15-3.8-1.66-.64-.26-1.28-.51-1.91-.74l-.93-.33-.82-.26,6.88-8.88c1,1.8,2,3.62,2.87,5.5.46.93.82,1.9,1.24,2.84s.86,1.88,1.22,2.84c.17.49.33,1,.46,1.47s.19,1,.26,1.53c.15,1,.24,2,.34,3.07.16,2,.25,4.07.22,6.08a65.89,65.89,0,0,1-1.23,11.82,57.26,57.26,0,0,1-1.41,5.67A45.42,45.42,0,0,1,183.42,517Z"/><path class="cls-6" d="M183.42,517a70.92,70.92,0,0,0,0-11.1,75.29,75.29,0,0,0-1.62-10.85c-.41-1.77-.87-3.52-1.42-5.23s-1.22-3.38-1.78-5.07c-.27-.85-.56-1.69-.88-2.53s-.66-1.65-1-2.45c-.73-1.63-1.59-3.18-2.47-4.73l0-.06a2.34,2.34,0,0,1,2.71-3.39c1.6.49,3,1,4.45,1.6s2.84,1.2,4.24,1.85a86.88,86.88,0,0,1,8.12,4.37,80.55,80.55,0,0,1,14.62,11.28,68.06,68.06,0,0,1,11.4,14.63,64.69,64.69,0,0,1,6.88,17.25l-4.48-.28c.22-.61.47-1.37.67-2.07s.42-1.44.6-2.17c.37-1.47.7-3,1-4.44a74.15,74.15,0,0,0,1.12-9,71.28,71.28,0,0,0-1.15-18.1,64.84,64.84,0,0,0-5.91-17.07A68.41,68.41,0,0,0,208,454.6l0,0a2.33,2.33,0,0,1,2-3.89c1.08.14,2,.31,3,.5s1.89.42,2.82.65q2.79.72,5.51,1.64a82.28,82.28,0,0,1,43.84,35.11,97.52,97.52,0,0,1,9.54,20.67l-4.35-.26c.18-.39.4-.95.58-1.45s.36-1.05.52-1.58c.32-1.07.6-2.16.82-3.26.4-2.21.64-4.43.84-6.66a32.81,32.81,0,0,0-1.68-13.31,35.77,35.77,0,0,0-7-11.81,53.33,53.33,0,0,0-10.76-9.17,51.56,51.56,0,0,1,12,8,35.88,35.88,0,0,1,12.05,26.4,26.49,26.49,0,0,1-.14,3.78c-.14,1.26-.38,2.49-.64,3.73s-.58,2.45-.95,3.66c-.18.6-.38,1.21-.59,1.81s-.44,1.16-.75,1.86a2.34,2.34,0,0,1-4.34-.22v0a93.3,93.3,0,0,0-9.08-19.69,79.25,79.25,0,0,0-13.68-16.68,77.69,77.69,0,0,0-17.72-12.27,76.76,76.76,0,0,0-10-4.17c-1.7-.58-3.42-1.1-5.16-1.54q-1.31-.33-2.61-.6c-.85-.17-1.78-.34-2.53-.44l2-3.92a72.91,72.91,0,0,1,11.11,15.85,69.38,69.38,0,0,1,6.35,18.32,75.75,75.75,0,0,1,1.22,19.3,79.63,79.63,0,0,1-1.18,9.6c-.3,1.58-.64,3.16-1,4.73-.2.79-.41,1.57-.64,2.36s-.47,1.53-.79,2.4a2.34,2.34,0,0,1-4.46-.24v0a60.31,60.31,0,0,0-6.39-16A63.49,63.49,0,0,0,205,494.07a76,76,0,0,0-13.76-10.62,83.57,83.57,0,0,0-7.69-4.13c-1.32-.62-2.65-1.2-4-1.75-.68-.27-1.35-.53-2-.77s-1.38-.49-2-.67l2.68-3.45a65,65,0,0,1,4.91,10.53,33,33,0,0,1,1.37,5.63c.34,1.9.57,3.8.75,5.71a67.58,67.58,0,0,1,0,11.38c-.15,1.89-.37,3.76-.69,5.61A47.87,47.87,0,0,1,183.42,517Z"/><g class="cls-12"><image width="806" height="1434" transform="matrix(0.27, 0.15, 0, 0.27, 219.91, 0)" xlink:href="/img/home/shapeshift-homepage-sm.jpg"/></g></g></g></svg>
</div>
<div class="col-md-6">
<h1 class="text-drizzle">dri<span class="drizzle-z-skew-1">z</span><span class="drizzle-z-skew-2">z</span>le</h1>
<h2>FRESH CHAIN-DATA FOR FRONT-ENDS</h2>
<p>A collection of front-end libraries that make writing dapp user interfaces easier and more predictable.</p>
<pre class="bd-milk-chocolate"><code>npm install drizzle --save</code></pre>
<br/>
<a href="https://github.com/trufflesuite/drizzle" class="btn btn-drizzle">GITHUB REPO</a>
<a href="/docs/drizzle/overview" class="btn btn-drizzle">DOCS</a>
<div class="github-button-wrapper">
<a class="github-button" href="https://github.com/trufflesuite/drizzle" data-size="large" data-show-count="true" aria-label="Star trufflesuite/drizzle on GitHub">Star</a>
</div>
</div>
<!--<p class="drizzle-down-arrow d-none d-md-block" id="headerArrow"><i class="fas fa-chevron-down"></i></p>-->
</div>
<div class="row mb-6 mt-5" id="contentBegins">
<div class="col text-center">
<h1 class="text-drizzle">FEATURES</h1>
</div>
</div>
<div class="row text-center mb-5">
<div class="col-md-6 mb-5 mb-md-0">
<img class="feature-icon-md mb-4" src="img/drizzle-feature-1-icon.svg" alt="Drizzle" title="Drizzle" />
<h2>REACTIVE ETHEREUM DATASTORE</h2>
<p>The core of Drizzle is based on a Redux store. We take care of synchronizing your contract data, transaction data and more.</p>
<a class="link-drizzle" href="/docs/drizzle/reference/drizzle-state">Learn More</a>
</div>
<div class="col-md-6">
<img class="feature-icon-md mb-4" src="img/drizzle-feature-2-icon.svg" alt="Drizzle" title="Drizzle" />
<h2>MAINTAINS UNDERLYING FUNCTIONS</h2>
<p>Drizzle extends web3 1.0's contracts, so you have access to all properties & methods described in their documentation.</p>
<a class="link-drizzle" href="/docs/drizzle/getting-started/contract-interaction">Learn More</a>
</div>
</div>
<div class="row text-center mb-7">
<div class="col-md-6 mb-5 mb-md-0">
<img class="feature-icon-md mb-4" src="img/drizzle-feature-3-icon.svg" alt="Drizzle" title="Drizzle" />
<h2>USE AN EXISTING STORE</h2>
<p>Drizzle can generate its own store or use your existing store. Simply import its reducers & sagas and you're good to go.</p>
<a class="link-drizzle" href="/docs/drizzle/getting-started/using-an-existing-redux-store">Learn More</a>
</div>
<div class="col-md-6">
<img class="feature-icon-md mb-4" src="img/drizzle-feature-4-icon.svg" alt="Drizzle" title="Drizzle" />
<h2>COMPONENT LIBRARY</h2>
<p>We maintain a library of React components for commonly used dapp functions. For example, generating input forms for contracts.</p>
<a class="link-drizzle" href="/docs/drizzle/react/react-components">Learn More</a>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-8">
<h1 class="text-drizzle text-center mb-3">modular, not magic</h1>
<p class="mb-4">Drizzle's architecture is completely modular--drizzle as much or as little as you like. We've created two packages for use with React, but the core functionality is contained in the base <code class="dark">drizzle</code> module itself. If you're familiar with Redux, it's not a stretch to create an Angular library or use it for something other than a webapp.</p>
<ul class="drizzle-libs-list">
<li><code class="dark">drizzle</code>: The core library responsible for web3, account and contract instantiation; wiring up the necessary synchronizations and providing additional contract functionality.</li>
<li><code class="dark">drizzle-react</code>: Provides a DrizzleProvider component and drizzleConnect helper method to make it easier to connect Drizzle with your React app.</li>
<li><code class="dark">drizzle-react-components</code>: A library of useful components for common dapp functions. Currently includes ContractData, ContractForm and LoadingContainer.</li>
</ul>
<img class="img-fluid" src="img/drizzle-modules.svg" alt="Drizzle Modules" title="Drizzle Modules" />
</div>
</div>
</main>
<div class="banner-taste drizzle">
<div class="container">
<div class="row">
<div class="col text-center">
<h1 class="text-drizzle">Like the taste?</h1>
<h2>The recipe is open source!</h2>
<p>The full source code of Drizzle is on <a href="https://github.com/trufflesuite/drizzle">GitHub</a>! We welcome all contributions and feature suggestions.</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scroll-arrow.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<footer>
<div class="container">
<div class="row">
<div class="col-12 col-md-2 mb-4 mb-md-0">
<img class="truffle-logo" src="/img/truffle-logo-light.svg" alt="Truffle Logo" />
</div>
<div class="col-12 col-md-5 mb-3 mb-md-0">
<ul>
<li><a href="mailto:[email protected]">CONTACT US</a></li>
<li><a href="/policy">PRIVACY POLICY</a></li>
<li><a href="/press-releases">PRESS RELEASES</a></li>
<li><a href="/staff">STAFF</a></li>
<li><a href="/dashboard">DASHBOARD</a></li>
<li><a href="https://github.com/trufflesuite">GITHUB</a></li>
<li><a class="trufflecon-link" href="https://www.trufflesuite.com/trufflecon2020">TRUFFLEC<img src="/img/truffle-logomark.svg" alt="Truffle Logo" /><span>O</span>N 2020</a></li>
<li><strong>© ConsenSys Software Inc. 2021</strong></li>
</ul>
<ul class="list-inline h4 ">
<li class="list-inline-item mb-0"><a href="https://www.reddit.com/r/truffle"><i class="fab fa-reddit-square"></i></a></li>
<li class="list-inline-item mb-0"><a href="https://twitter.com/trufflesuite"><i class="fab fa-twitter-square"></i></a></li>
<li class="list-inline-item mb-0"><a href="https://www.facebook.com/trufflesuite/"><i class="fab fa-facebook-square"></i></a></li>
<li class="list-inline-item mb-0"><a href="https://www.instagram.com/truffledevsuite/"><i class="fab fa-instagram"></i></a></li>
<li class="list-inline-item mb-0"><a href="https://www.linkedin.com/company/trufflesuite/"><i class="fab fa-linkedin"></i></a></li>
<li class="list-inline-item mb-0"><a href="https://www.youtube.com/channel/UCo2cy2Z7_91zPJSrb6NWfSw"><i class="fab fa-youtube-square"></i></a></li>
</ul>
</div>
<div class="col-12 col-md-5">
<h4>SIGN UP FOR THE TRUFFLE MAILING LIST</h4>
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "4795067",
formId: "d18995c8-32bb-4b2d-bde9-3f49fb3d2837"
});
</script>
</div>
</div>
</div>
</footer>
</body>
</html>