From 3f0bed7924ece04943a926a2098450c54695e7ba Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 2 Jun 2023 13:45:56 +0200 Subject: [PATCH] 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 | 2 +- .../src/assets/avatar-placeholder.svg | 1 + .../src/components/Avatar.tsx | 12 ++++++++-- .../src/components/MessageItem.tsx | 12 ++++++++-- .../billboard-widget/src/hooks/useAuth.ts | 21 +++++++++++------ packages/billboard-widget/src/styles/app.pcss | 4 ++++ .../billboard-widget/src/styles/classic.pcss | 23 ++++++++++--------- 7 files changed, 52 insertions(+), 23 deletions(-) create mode 100644 packages/billboard-widget/src/assets/avatar-placeholder.svg diff --git a/packages/billboard-widget/package.json b/packages/billboard-widget/package.json index d8aae1688..9af8f7418 100644 --- a/packages/billboard-widget/package.json +++ b/packages/billboard-widget/package.json @@ -1,6 +1,6 @@ { "name": "dm3-billboard-widget", - "version": "0.2.6", + "version": "0.2.7", "files": [ "dist" ], diff --git a/packages/billboard-widget/src/assets/avatar-placeholder.svg b/packages/billboard-widget/src/assets/avatar-placeholder.svg new file mode 100644 index 000000000..563ff538a --- /dev/null +++ b/packages/billboard-widget/src/assets/avatar-placeholder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/billboard-widget/src/components/Avatar.tsx b/packages/billboard-widget/src/components/Avatar.tsx index c8c7938b7..7a756aa85 100644 --- a/packages/billboard-widget/src/components/Avatar.tsx +++ b/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} + ) : ( + Avatar image + )} ); } diff --git a/packages/billboard-widget/src/components/MessageItem.tsx b/packages/billboard-widget/src/components/MessageItem.tsx index 02b7ec17a..874fd39f4 100644 --- a/packages/billboard-widget/src/components/MessageItem.tsx +++ b/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 (
-
-
{message.message}
+
+
{message.message}
diff --git a/packages/billboard-widget/src/hooks/useAuth.ts b/packages/billboard-widget/src/hooks/useAuth.ts index 8db3fb4fc..dafbaa7fc 100644 --- a/packages/billboard-widget/src/hooks/useAuth.ts +++ b/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 => { - 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; diff --git a/packages/billboard-widget/src/styles/app.pcss b/packages/billboard-widget/src/styles/app.pcss index 146f62a8d..4a04bb8c4 100644 --- a/packages/billboard-widget/src/styles/app.pcss +++ b/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; diff --git a/packages/billboard-widget/src/styles/classic.pcss b/packages/billboard-widget/src/styles/classic.pcss index 805173325..4d75a6097 100644 --- a/packages/billboard-widget/src/styles/classic.pcss +++ b/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; } }