feat(example): migrate store-js to esm

examples/store-js/index.html

@@ -12,9 +12,13 @@
 <div><h1>Timestamp of latest relay ping</h1></div>
 <div id='timestamp'></div>
 
-<script
-  src='https://unpkg.com/js-waku@latest/build/umd/js-waku.min.bundle.js'></script>
-<script>
+<script type='module'>
+  import {
+    createWaku,
+    waitForRemotePeer,
+    Protocols
+  } from '../../dist/bundle.min.js';
+
   /**
    * This example demonstrates how to use the js-waku minified bundle
    * available on unpkg.com.
@@ -25,19 +29,16 @@
   const timestampDiv = document.getElementById('timestamp');
 
   try {
-    timestampDiv.innerHTML = '<p>Starting waku.</p>';
-    jswaku.Waku.create({ bootstrap: { default: true } }).catch(e => {
-        timestampDiv.innerHTML = 'Failed to create Waku: ' + e.toString();
-      }
-    ).then(waku => {
-      timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
-      waku.waitForRemotePeer()
-        .catch((e) => {
-          timestampDiv.innerHTML = 'Failed to connect to peers' + e.toString();
-        })
-        .then(() => {
-          timestampDiv.innerHTML = '<p>Retrieving messages.</p>';
+    timestampDiv.innerHTML = '<p>Creating waku.</p>';
+    const node = await createWaku({ bootstrap: { default: true } });
 
+    timestampDiv.innerHTML = '<p>Starting waku.</p>';
+    await node.start();
+
+    timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
+    await waitForRemotePeer(node, [Protocols.Store]);
+
+    timestampDiv.innerHTML = '<p>Retrieving messages.</p>';
     const callback = (wakuMessages) => {
       // Messages are ordered with oldest first
       // even with page direction `backward`
@@ -58,7 +59,7 @@
     // Only retrieve a week of messages
     startTime.setTime(Date.now() - 7 * 24 * 60 * 60 * 1000);
 
-          waku.store
+    await node.store
       .queryHistory(['/relay-ping/1/ping/null'], {
         callback,
         pageDirection: 'backward',
@@ -67,14 +68,9 @@
           startTime,
           endTime: new Date()
         }
-            })
-            .catch((e) => {
-              timestampDiv.innerHTML = 'Failed to retrieve messages' + e.toString();
-            });
-        });
       });
   } catch (e) {
-    timestampDiv.innerHTML = 'Failed to start application' + e.toString();
+    timestampDiv.innerHTML = 'Error encountered: ' + e.toString();
   }
 </script>
 </body>