research.logos.co/assets/js/12da0170.e54f1ba3.js

"use strict";(self.webpackChunkresearch_logos_co=self.webpackChunkresearch_logos_co||[]).push([[5339],{28453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>r});var a=n(96540);const s={},i=a.createContext(s);function o(e){const t=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),a.createElement(i.Provider,{value:t},e.children)}},51521:e=>{e.exports=JSON.parse('{"permalink":"/rlog/presenting-js-waku","source":"@site/rlog/2021-06-04-presenting-js-waku.mdx","title":"Presenting JS-Waku: Waku v2 in the Browser","description":"JS-Waku is bringing Waku v2 to the browser. Learn what we achieved so far and what is next in our pipeline!","date":"2021-06-04T12:00:00.000Z","tags":[],"readingTime":6.85,"hasTruncateMarker":true,"authors":[{"name":"Franck","twitter":"fryorcraken","github":"fryorcraken","key":"franck","page":null}],"frontMatter":{"layout":"post","name":"Presenting JS-Waku: Waku v2 in the Browser","title":"Presenting JS-Waku: Waku v2 in the Browser","date":"2021-06-04T12:00:00.000Z","authors":"franck","published":true,"slug":"presenting-js-waku","categories":"platform","image":"/img/js-waku-gist.png","discuss":"https://forum.research.logos.co/t/discussion-presenting-js-waku-waku-v2-in-the-browser/81"},"unlisted":false,"prevItem":{"title":"[Talk at COSCUP] Vac, Waku v2 and Ethereum Messaging","permalink":"/rlog/waku-v2-ethereum-coscup"},"nextItem":{"title":"Privacy-preserving p2p economic spam protection in Waku v2","permalink":"/rlog/rln-relay"}}')},63022:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>h,contentTitle:()=>r,default:()=>l,frontMatter:()=>o,metadata:()=>a,toc:()=>c});var a=n(51521),s=n(74848),i=n(28453);const o={layout:"post",name:"Presenting JS-Waku: Waku v2 in the Browser",title:"Presenting JS-Waku: Waku v2 in the Browser",date:new Date("2021-06-04T12:00:00.000Z"),authors:"franck",published:!0,slug:"presenting-js-waku",categories:"platform",image:"/img/js-waku-gist.png",discuss:"https://forum.research.logos.co/t/discussion-presenting-js-waku-waku-v2-in-the-browser/81"},r=void 0,h={authorsImageUrls:[void 0]},c=[{value:"Waku v2",id:"waku-v2",level:2},{value:"Waku v2 in the browser",id:"waku-v2-in-the-browser",level:2},{value:"Achievements so far",id:"achievements-so-far",level:2},{value:"What's next?",id:"whats-next",level:2}];function u(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.p,{children:"JS-Waku is bringing Waku v2 to the browser. Learn what we achieved so far and what is next in our pipeline!"}),"\n","\n",(0,s.jsx)(t.p,{children:"For the past 3 months, we have been working on bringing Waku v2 to the browser.\nOur aim is to empower dApps with Waku v2, and it led to the creation of a new library.\nWe believe now is good time to introduce it!"}),"\n",(0,s.jsx)(t.h2,{id:"waku-v2",children:"Waku v2"}),"\n",(0,s.jsx)(t.p,{children:"First, let's review what Waku v2 is and what problem it is trying to solve."}),"\n",(0,s.jsx)(t.p,{children:"Waku v2 comes from a need to have a more scalable, better optimised solution for the Status app to achieve decentralised\ncommunications on resource restricted devices (i.e., mobile phones)."}),"\n",(0,s.jsx)(t.p,{children:"The Status chat feature was initially built over Whisper.\nHowever, Whisper has a number of caveats which makes it inefficient for mobile phones.\nFor example, with Whisper, all devices are receiving all messages which is not ideal for limited data plans."}),"\n",(0,s.jsx)(t.p,{children:"To remediate this, a Waku mode (then Waku v1), based on devp2p, was introduced.\nTo further enable web and restricted resource environments, Waku v2 was created based on libp2p.\nThe migration of the Status chat feature to Waku v2 is currently in progress."}),"\n",(0,s.jsxs)(t.p,{children:["We see the need of such solution in the broader Ethereum ecosystem, beyond Status.\nThis is why we are building Waku v2 as a decentralised communication platform for all to use and build on.\nIf you want to read more about Waku v2 and what it aims to achieve,\ncheckout ",(0,s.jsx)(t.a,{href:"/waku-v2-plan",children:"What's the Plan for Waku v2?"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Since last year, we have been busy defining and implementing Waku v2 protocols in ",(0,s.jsx)(t.a,{href:"https://github.com/status-im/nim-waku",children:"nim-waku"}),",\nfrom which you can build ",(0,s.jsx)(t.a,{href:"https://github.com/status-im/nim-waku#wakunode",children:"wakunode2"}),".\nWakunode2 is an adaptive and modular Waku v2 node,\nit allows users to run their own node and use the Waku v2 protocols they need.\nThe nim-waku project doubles as a library, that can be used to add Waku v2 support to native applications."]}),"\n",(0,s.jsx)(t.h2,{id:"waku-v2-in-the-browser",children:"Waku v2 in the browser"}),"\n",(0,s.jsx)(t.p,{children:"We believe that dApps and wallets can benefit from the Waku network in several ways.\nFor some dApps, it makes sense to enable peer-to-peer communications.\nFor others, machine-to-machine communications would be a great asset.\nFor example, in the case of a DAO,\nWaku could be used for gas-less voting.\nEnabling the DAO to notify their users of a new vote,\nand users to vote without interacting with the blockchain and spending gas."}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.a,{href:"https://github.com/status-im/murmur",children:"Murmur"})," was the first attempt to bring Whisper to the browser,\nacting as a bridge between devp2p and libp2p.\nOnce Waku v2 was started and there was a native implementation on top of libp2p,\na ",(0,s.jsx)(t.a,{href:"https://github.com/vacp2p/waku-web-chat",children:"chat POC"})," was created to demonstrate the potential of Waku v2\nin web environment.\nIt showed how using js-libp2p with few modifications enabled access to the Waku v2 network.\nThere was still some unresolved challenges.\nFor example, nim-waku only support TCP connections which are not supported by browser applications.\nHence, to connect to other node, the POC was connecting to a NodeJS proxy application using websockets,\nwhich in turn could connect to wakunode2 via TCP."]}),"\n",(0,s.jsxs)(t.p,{children:["However, to enable dApp and Wallet developers to easily integrate Waku in their product,\nwe need to give them a library that is easy to use and works out of the box:\nintroducing ",(0,s.jsx)(t.a,{href:"https://github.com/status-im/js-waku",children:"JS-Waku"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["JS-Waku is a JavaScript library that allows your dApp, wallet or other web app to interact with the Waku v2 network.\nIt is available right now on ",(0,s.jsx)(t.a,{href:"https://www.npmjs.com/package/js-waku",children:"npm"}),":"]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"npm install js-waku"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"As it is written in TypeScript, types are included in the npm package to allow easy integration with TypeScript, ClojureScript and other typed languages that compile to JavaScript."}),"\n",(0,s.jsxs)(t.p,{children:["Key Waku v2 protocols are already available:\n",(0,s.jsx)(t.a,{href:"https://rfc.vac.dev/waku/standards/core/14/message",children:"message"}),", ",(0,s.jsx)(t.a,{href:"https://rfc.vac.dev/waku/standards/core/13/store",children:"store"}),", ",(0,s.jsx)(t.a,{href:"https://rfc.vac.dev/waku/standards/core/11/relay",children:"relay"})," and ",(0,s.jsx)(t.a,{href:"https://rfc.vac.dev/waku/standards/core/19/lightpush",children:"light push"}),",\nenabling your dApp to:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Send and receive near-instant messages on the Waku network (relay),"}),"\n",(0,s.jsx)(t.li,{children:"Query nodes for messages that may have been missed, e.g. due to poor cellular network (store),"}),"\n",(0,s.jsx)(t.li,{children:"Send messages with confirmations (light push)."}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"JS-Waku needs to operate in the same context from which Waku v2 was born:\na restricted environment were connectivity or uptime are not guaranteed;\nJS-Waku brings Waku v2 to the browser."}),"\n",(0,s.jsx)(t.h2,{id:"achievements-so-far",children:"Achievements so far"}),"\n",(0,s.jsxs)(t.p,{children:["We focused the past month on developing a ",(0,s.jsx)(t.a,{href:"https://status-im.github.io/js-waku/",children:"ReactJS Chat App"}),".\nThe aim was to create enough building blocks in JS-Waku to enable this showcase web app that\nwe now ",(0,s.jsx)(t.a,{href:"https://github.com/status-im/nim-waku/issues/399",children:"use for dogfooding"})," purposes."]}),"\n",(0,s.jsxs)(t.p,{children:["Most of the effort was on getting familiar with the ",(0,s.jsx)(t.a,{href:"https://github.com/libp2p/js-libp2p",children:"js-libp2p"})," library\nthat we heavily rely on.\nJS-Waku is the second implementation of Waku v2 protocol,\nso a lot of effort on interoperability was needed.\nFor example, to ensure compatibility with the nim-waku reference implementation,\nwe run our ",(0,s.jsx)(t.a,{href:"https://github.com/status-im/js-waku/blob/90c90dea11dfd1277f530cf5d683fb92992fe141/src/lib/waku_relay/index.spec.ts#L137",children:"tests against wakunode2"})," as part of the CI."]}),"\n",(0,s.jsxs)(t.p,{children:["This interoperability effort helped solidify the current Waku v2 specifications:\nBy clarifying the usage of topics\n(",(0,s.jsx)(t.a,{href:"https://github.com/vacp2p/rfc/issues/327",children:"#327"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/vacp2p/rfc/pull/383",children:"#383"}),"),\nfix discrepancies between specs and nim-waku\n(",(0,s.jsx)(t.a,{href:"https://github.com/status-im/nim-waku/issues/418",children:"#418"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/status-im/nim-waku/issues/419",children:"#419"}),")\nand fix small nim-waku & nim-libp2p bugs\n(",(0,s.jsx)(t.a,{href:"https://github.com/status-im/nim-waku/issues/411",children:"#411"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/status-im/nim-waku/issues/439",children:"#439"}),")."]}),"\n",(0,s.jsxs)(t.p,{children:["To fully access the waku network, JS-Waku needs to enable web apps to connect to nim-waku nodes.\nA standard way to do so is using secure websockets as it is not possible to connect directly to a TCP port from the browser.\nUnfortunately websocket support is not yet available in ",(0,s.jsx)(t.a,{href:"https://github.com/status-im/nim-libp2p/issues/407",children:"nim-libp2p"})," so\nwe ended up deploying ",(0,s.jsx)(t.a,{href:"https://github.com/novnc/websockify",children:"websockify"})," alongside wakunode2 instances."]}),"\n",(0,s.jsxs)(t.p,{children:["As we built the ",(0,s.jsx)(t.a,{href:"https://github.com/status-im/js-waku/tree/main/examples/web-chat",children:"web chat app"}),",\nwe were able to fine tune the API to provide a simple and succinct interface.\nYou can start a node, connect to other nodes and send a message in less than ten lines of code:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-javascript",children:"import { Waku } from 'js-waku'\n\nconst waku = await Waku.create({})\n\nconst nodes = await getStatusFleetNodes()\nawait Promise.all(nodes.map((addr) => waku.dial(addr)))\n\nconst msg = WakuMessage.fromUtf8String(\n  'Here is a message!',\n  '/my-cool-app/1/my-use-case/proto',\n)\nawait waku.relay.send(msg)\n"})}),"\n",(0,s.jsxs)(t.p,{children:["We have also put a bounty at ",(0,s.jsx)(t.a,{href:"https://0xhack.dev/",children:"0xHack"})," for using JS-Waku\nand running a ",(0,s.jsx)(t.a,{href:"https://www.youtube.com/watch?v=l77j0VX75QE",children:"workshop"}),".\nWe were thrilled to have a couple of hackers create new software using our libraries.\nOne of the projects aimed to create a decentralised, end-to-end encrypted messenger app,\nsimilar to what the ",(0,s.jsx)(t.a,{href:"https://rfc.vac.dev/waku/standards/application/20/toy-eth-pm",children:"ETH-DM"})," protocol aims to achieve.\nAnother project was a decentralised Twitter platform.\nSuch projects allow us to prioritize the work on JS-Waku and understand how DevEx can be improved."]}),"\n",(0,s.jsx)(t.p,{children:"As more developers use JS-Waku, we will evolve the API to allow for more custom and fine-tune usage of the network\nwhile preserving this out of the box experience."}),"\n",(0,s.jsx)(t.h2,{id:"whats-next",children:"What's next?"}),"\n",(0,s.jsxs)(t.p,{children:["Next, we are directing our attention towards ",(0,s.jsx)(t.a,{href:"https://github.com/status-im/js-waku/issues/68",children:"Developer Experience"}),".\nWe already have ",(0,s.jsx)(t.a,{href:"https://www.npmjs.com/package/js-waku",children:"documentation"})," available but we want to provide more:\n",(0,s.jsx)(t.a,{href:"https://github.com/status-im/js-waku/issues/56",children:"Tutorials"}),", various examples\nand showing how ",(0,s.jsx)(t.a,{href:"https://github.com/status-im/js-waku/issues/72",children:"JS-Waku can be used with Web3"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"By prioritizing DevEx we aim to enable JS-Waku integration in dApps and wallets.\nWe think JS-Waku builds a strong case for machine-to-machine (M2M) communications.\nThe first use cases we are looking into are dApp notifications:\nEnabling dApp to notify their user directly in their wallets!\nLeveraging Waku as a decentralised infrastructure and standard so that users do not have to open their dApp to be notified\nof events such as DAO voting."}),"\n",(0,s.jsxs)(t.p,{children:["We already have some POC in the pipeline to enable voting and polling on the Waku network,\nallowing users to save gas by ",(0,s.jsx)(t.strong,{children:"not"})," broadcasting each individual vote on the blockchain."]}),"\n",(0,s.jsx)(t.p,{children:"To facilitate said applications, we are looking at improving integration with Web3 providers by providing examples\nof signing, validating, encrypting and decrypting messages using Web3.\nWaku is privacy conscious, so we will also provide signature and encryption examples decoupled from users' Ethereum identity."}),"\n",(0,s.jsxs)(t.p,{children:["As you can read, we have grand plans for JS-Waku and Waku v2.\nThere is a lot to do, and we would love some help so feel free to\ncheck out the new role in our team:\n",(0,s.jsx)(t.a,{href:"https://status.im/our_team/jobs.html?gh_jid=3157894",children:"js-waku: Wallet & Dapp Integration Developer"}),".\nWe also have a number of ",(0,s.jsx)(t.a,{href:"https://status.im/our_team/jobs.html",children:"positions"})," open to work on Waku protocol and nim-waku."]}),"\n",(0,s.jsxs)(t.p,{children:["If you are as excited as us by JS-Waku, why not build a dApp with it?\nYou can find documentation on the ",(0,s.jsx)(t.a,{href:"https://www.npmjs.com/package/js-waku",children:"npmjs page"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Whether you are a developer, you can come chat with us using ",(0,s.jsx)(t.a,{href:"https://status-im.github.io/js-waku/",children:"WakuJS Web Chat"}),"\nor ",(0,s.jsx)(t.a,{href:"https://github.com/status-im/nim-waku/blob/master/docs/tutorial/chat2.md",children:"chat2"}),".\nYou can get support in #dappconnect-support on ",(0,s.jsx)(t.a,{href:"https://discord.gg/j5pGbn7MHZ",children:"Vac Discord"})," or ",(0,s.jsx)(t.a,{href:"https://t.me/dappconnectsupport",children:"Telegram"}),".\nIf you have any ideas on how Waku could enable a specific dapp or use case, do share, we are always keen to hear it."]})]})}function l(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}}}]);