1"use strict";(self.webpackChunkopentezos=self.webpackChunkopentezos||[]).push([[8354],{15680:(e,t,n)=>{n.d(t,{xA:()=>s,yg:()=>h});var a=n(96540);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},p=Object.keys(e);for(a=0;a<p.length;a++)n=p[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(a=0;a<p.length;a++)n=p[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c=a.createContext({}),l=function(e){var t=a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},s=function(e){var t=l(e.components);return a.createElement(c.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},f=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,p=e.originalType,c=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),d=l(n),f=r,h=d["".concat(c,".").concat(f)]||d[f]||m[f]||p;return n?a.createElement(h,i(i({ref:t},s),{},{components:n})):a.createElement(h,i({ref:t},s))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var p=n.length,i=new Array(p);i[0]=f;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o[d]="string"==typeof e?e:r,i[1]=o;for(var l=2;l<p;l++)i[l]=n[l];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},49841:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>p,metadata:()=>o,toc:()=>l});var a=n(58168),r=(n(96540),n(15680));const p={id:"dapp-event-example",title:"Dapp example",authors:"Benoit Rognier"},i=void 0,o={unversionedId:"archetype/events/dappexample/dapp-event-example",id:"archetype/events/dappexample/dapp-event-example",title:"Dapp example",description:"The Bulb demo presented here illustrates how to integrate the crank process in a typescript React Dapp.",source:"@site/prebuild/archetype/events/dappexample/dappexample.md",sourceDirName:"archetype/events/dappexample",slug:"/archetype/events/dappexample/",permalink:"/archetype/events/dappexample/",draft:!1,editUrl:"https://gitlab.com/tezos-paris-hub/opentezos/-/blob/main/prebuild/archetype/events/dappexample/dappexample.md",tags:[],version:"current",frontMatter:{id:"dapp-event-example",title:"Dapp example",authors:"Benoit Rognier"},sidebar:"docs",previous:{title:"Example",permalink:"/archetype/events/example/"},next:{title:"Contract Templates",permalink:"/archetype/templates/"}},c={},l=[{value:"Bulb contract",id:"bulb-contract",level:2},{value:"Switch on/off",id:"switch-onoff",level:2}],s={toc:l},d="wrapper";
1function m(e){let{components:t,...p}=e;return(0,r.yg)(d,(0,a.A)({},s,p,{components:t,mdxType:"MDXLayout"}),(0,r.yg)("p",null,"The ",(0,r.yg)("em",{parentName:"p"},"Bulb")," demo presented here illustrates how to integrate the crank process in a typescript ",(0,r.yg)("a",{parentName:"p",href:"https://reactjs.org/"},"React")," Dapp."),(0,r.yg)("admonition",{type:"info"},(0,r.yg)("p",{parentName:"admonition"},"The source code of the example is available ",(0,r.yg)("a",{parentName:"p",href:"https://github.com/completium/bulb-event-demo"},"here"))),(0,r.yg)("p",null,"The bulb demo is live at this ",(0,r.yg)("a",{parentName:"p",href:"https://completium.github.io/bulb-event-demo/"},"address"),"."),(0,r.yg)("p",null,(0,r.yg)("img",{alt:"Buld Dapp webpage: an image of a light bulb",src:n(21836).A,width:"1898",height:"1014"})),(0,r.yg)("h2",{id:"bulb-contract"},"Bulb contract"),(0,r.yg)("p",null,"The bulb is switched on/off by receiving events from the bulb contract. The contract is designed as a simplistic state machine with ",(0,r.yg)("em",{parentName:"p"},"On")," and ",(0,r.yg)("em",{parentName:"p"},"Off")," states. Two events ",(0,r.yg)("inlineCode",{parentName:"p"},"SwitchedOn")," and ",(0,r.yg)("inlineCode",{parentName:"p"},"SwitchedOff")," are defined and emitted respectively by ",(0,r.yg)("inlineCode",{parentName:"p"},"switchOn")," and ",(0,r.yg)("inlineCode",{parentName:"p"},"switchOff")," entrypoints:"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-archetype"},"archetype bulb\n\nstates = | On | Off\n\nevent SwitchedOn {}\n\nevent SwitchedOff {}\n\ntransition switchOn() {\n from Off to On\n with effect { emit<SwitchedOn>({}) }\n}\n\ntransition switchOff() {\n from On to Off\n with effect { emit<SwitchedOff>({}) }\n}\n")),(0,r.yg)("p",null,"The bulb contract has been deployed on Ithacanet and its address is ",(0,r.yg)("inlineCode",{parentName:"p"},"KT1PKQ76kR1nZSvu5YN41r7GjYcAqGQSrLxg")," . Click ",(0,r.yg)("a",{parentName:"p",href:"https://better-call.dev/ithacanet/KT1PKQ76kR1nZSvu5YN41r7GjYcAqGQSrLxg/operations"},"here")," to view it on Better Call Dev indexer."),(0,r.yg)("h2",{id:"switch-onoff"},"Switch on/off"),(0,r.yg)("p",null,"Use the ",(0,r.yg)("a",{parentName:"p",href:"https://better-call.dev/ithacanet/KT1PKQ76kR1nZSvu5YN41r7GjYcAqGQSrLxg/interact"},(0,r.yg)("em",{parentName:"a"},"Interact"))," tab in Better Call Dev to switch the bulb on and off."),(0,r.yg)("p",null,(0,r.yg)("img",{alt:"Better-Call-Dev page of the Dapp smart contract",src:n(50993).A,width:"1878",height:"1010"})),(0,r.yg)("admonition",{type:"info"},(0,r.yg)("p",{parentName:"admonition"},"You cannot switch on (off) a bulb already on (off). You then get the error ",(0,r.yg)("inlineCode",{parentName:"p"},"A FAILWITH instruction was reached with InvalidState"),"."),(0,r.yg)("p",{parentName:"admonition"},"Hence switch the bulb off (on) first. The event will appear in the event notification anyway.")))}m.isMDXComponent=!0},21836:(e,t,n)=>{n.d(t,{A:()=>a});const a=n.p+"assets/images/bulb-event-demo-light-10f5245ec6d35c99ea105d1360251c94.png"},50993:(e,t,n)=>{n.d(t,{A:()=>a});const a=n.p+"assets/images/bulb-interact-bcd-aafe74225eba1cc5420a3dd5c11aab2a.png"}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.