status-im
/
js-waku-examples
mirror of https://github.com/status-im/js-waku-examples.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add status colors, render status error when fail

This commit is contained in:
weboko 2022-12-12 12:41:04 +01:00
parent 38a7407355
commit 415faab105
No known key found for this signature in database
2 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
light-chat/index.js
View File

@ -7,14 +7,14 @@ const MULTI_ADDR = "/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/
const CONTENT_TOPIC = "/toy-chat/2/huilong/proto"; const CONTENT_TOPIC = "/toy-chat/2/huilong/proto";
const PROTOCOLS = ["filter", "lightpush"]; const PROTOCOLS = ["filter", "lightpush"];
runApp().catch((err) => { const ui = initUI();
runApp(ui).catch((err) => {
console.error(err); console.error(err);
ui.setStatus(`error: ${err.message}`, "error");
}); });
async function runApp() { async function runApp(ui) {
const ui = initUI(); ui.setStatus("connecting...", "progress");
ui.setStatus("connecting...");
const { info, sendMessage, unsubscribeFromMessages } = await initWakuContext({ const { info, sendMessage, unsubscribeFromMessages } = await initWakuContext({
protocols: PROTOCOLS, protocols: PROTOCOLS,
@ -23,7 +23,7 @@ async function runApp() {
onMessageReceived: ui.renderMessage, onMessageReceived: ui.renderMessage,
}); });
ui.setStatus("connected"); ui.setStatus("connected", "success");
ui.setLocalPeer(info.localPeerId); ui.setLocalPeer(info.localPeerId);
ui.setRemotePeer(info.remotePeerId); ui.setRemotePeer(info.remotePeerId);
@ -33,9 +33,9 @@ async function runApp() {
ui.onSendMessage(sendMessage); ui.onSendMessage(sendMessage);
ui.onExit(async () => { ui.onExit(async () => {
ui.setStatus("disconnecting..."); ui.setStatus("disconnecting...", "progress");
await unsubscribeFromMessages(); await unsubscribeFromMessages();
ui.setStatus("disconnected"); ui.setStatus("disconnected", "terminated");
ui.resetMessages(); ui.resetMessages();
}); });
} }
@ -130,8 +130,8 @@ function initUI() {
}); });
}, },
// UI renderers // UI renderers
setStatus: (value) => { setStatus: (value, className) => {
statusBlock.innerText = value.toString(); statusBlock.innerHTML = `<span class=${className || ""}>${value}</span>`;
}, },
setLocalPeer: (id) => { setLocalPeer: (id) => {
localPeerBlock.innerText = id.toString(); localPeerBlock.innerText = id.toString();

16
light-chat/style.css
View File

@ -129,6 +129,22 @@ h3 {
background-color: #c84740; background-color: #c84740;
} }
.success {
color: #3ba183;
}
.progress {
color: #9ea13b;
}
.terminated {
color: black;
}
.error {
color: #c84740;
}
.footer { .footer {
display: flex; display: flex;
width: 100%; width: 100%;