Billboard widget enhancements2 (#511)

* useAuth stores more than one account

* use empty placeholder if avatar is undefined

* show users message in a different color

* release 0.2.7

packages/billboard-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dm3-billboard-widget",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "files": [
     "dist"
   ],

packages/billboard-widget/src/components/Avatar.tsx

@@ -1,5 +1,6 @@
 import { useContext } from 'react';
 import { GlobalContext } from '../context/GlobalContext';
+import AvatarPlaceholder from '../assets/avatar-placeholder.svg';
 interface Props {
     identifier: string;
 }
@@ -20,9 +21,16 @@ function Avatar(props: Props) {
                             ? avatarSrc
                             : avatarSrc(identifier)
                     }
-                    alt={`cute robot avatar of dm3 user: ${identifier}`}
+                    alt={`avatar of  ${identifier}`}
                 />
-            ) : null}
+            ) : (
+                <img
+                    width="38px"
+                    height="38px"
+                    src={AvatarPlaceholder}
+                    alt="Avatar image"
+                />
+            )}
         </div>
     );
 }

packages/billboard-widget/src/components/MessageItem.tsx

@@ -1,5 +1,7 @@
 import { Message } from 'dm3-lib-messaging';
 
+import { useContext } from 'react';
+import { AuthContext } from '../context/AuthContext';
 import Avatar from './Avatar';
 import MessageFooter from './MessageFooter';
 
@@ -11,12 +13,18 @@ interface Props {
 
 function MessageItem(props: Props) {
     const { message } = props;
+    const { ensName } = useContext(AuthContext);
+
+    const messageStyle =
+        'content text-sm ' +
+        ' ' +
+        (message.metadata.from === ensName ? 'own' : '');
 
     return (
         <div className="item-container">
             <Avatar identifier={message.metadata.from} />
-            <div className="message">
-                <div className="content text-sm">{message.message}</div>
+            <div className="message ">
+                <div className={messageStyle}>{message.message}</div>
                 <MessageFooter {...message.metadata} />
             </div>
         </div>

packages/billboard-widget/src/hooks/useAuth.ts

@@ -9,7 +9,11 @@ import { DeliveryServiceClient } from '../http/DeliveryServiceClient';
 import { OffchainResolverClient } from '../http/OffchainResolverClient';
 import { ClientProps } from '../types';
 
-const RANDOM_HOTWALLET_KEY = 'Billboard-Random-Hotwallet-Key';
+const RANDOM_HOTWALLET_KEY = 'DM3-Hotwallet-Key-';
+
+const getDm3HotWalletKey = (address: string) => {
+    return RANDOM_HOTWALLET_KEY + address;
+};
 
 interface BillboardHotWallet {
     keys: ProfileKeys;
@@ -22,11 +26,6 @@ export const useAuth = (
     clientProps: ClientProps,
 ) => {
     const getWallet = async (): Promise<BillboardHotWallet> => {
-        const hotWallet = localStorage.getItem(RANDOM_HOTWALLET_KEY);
-        //User has used the widget before hence we have a keypair in the local storage
-        if (hotWallet) {
-            return JSON.parse(hotWallet) as BillboardHotWallet;
-        }
         if (
             !clientProps.siweAddress ||
             !clientProps.siweSig ||
@@ -35,6 +34,14 @@ export const useAuth = (
             throw 'user is not logged in yet';
         }
 
+        const hotWallet = localStorage.getItem(
+            getDm3HotWalletKey(clientProps.siweAddress),
+        );
+        //User has used the widget before hence we have a keypair in the local storage
+        if (hotWallet) {
+            return JSON.parse(hotWallet) as BillboardHotWallet;
+        }
+
         const deliverServiceProfile = await getDeliveryServiceProfile(
             clientProps.deliveryServiceEnsName,
             web3Provider,
@@ -102,7 +109,7 @@ export const useAuth = (
 
         //Keep the KeyPair we just generated in the local storage so we can use them later
         localStorage.setItem(
-            RANDOM_HOTWALLET_KEY,
+            getDm3HotWalletKey(clientProps.siweAddress),
             JSON.stringify(newHotWallet),
         );
         return newHotWallet;

packages/billboard-widget/src/styles/app.pcss

@@ -20,6 +20,7 @@
 .common-styles {
     --mainBg: #1f2029;
     --messageBg: #3a3c50;
+    --messageBgOwn: #3a3c50;
     --messageBg25: rgba(58, 60, 80, 0.25);
     --borderInputColor: #b4b8c9;
     --inputBg: #434450;
@@ -158,6 +159,9 @@
         white-space: wrap;
     }
 
+    .own {
+        background-color: var(--messageBgOwn);
+    }
     .meta {
         display: flex;
         justify-content: space-between;

packages/billboard-widget/src/styles/classic.pcss

@@ -1,9 +1,10 @@
 .common-styles {
-    --mainBg: #FFF;
-    --messageBg: #F8F8F8;
-    --messageBg25: #FFF;
-    --borderInputColor: #E0E0E0;
-    --inputBg: #FFF;
+    --mainBg: #fff;
+    --messageBg: #f8f8f8;
+    --messageBgOwn: #dfdfdf;
+    --messageBg25: #fff;
+    --borderInputColor: #e0e0e0;
+    --inputBg: #fff;
     --textColorPrimary: #000;
     --textColorSecondary: #808080;
     --borderRadiusS: 0;
@@ -12,14 +13,14 @@
 }
 
 .styled-scrollbars {
-    --scrollbar-foreground: #FF0050;
-    --scrollbar-background: #F8F8F8;
+    --scrollbar-foreground: #ff0050;
+    --scrollbar-background: #f8f8f8;
 }
 
 .dm3-loading-btn {
-    --timeoutActiveForeground: #FFFFFF;
-    --timeoutRunningForeground: #FF0050;
-    --timeoutCircleBackground: #E0E0E0;
+    --timeoutActiveForeground: #ffffff;
+    --timeoutRunningForeground: #ff0050;
+    --timeoutCircleBackground: #e0e0e0;
 }
 
 .create-message {
@@ -47,7 +48,7 @@
 
     &:focus {
         outline: none;
-        border-color: #CCC;
+        border-color: #ccc;
     }
 }