Fix chat avatars and numeric displays

frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx

@@ -29,6 +29,8 @@ interface Props {
   status: number;
   userNick: string;
   takerNick: string;
+  takerHashId: string;
+  makerHashId: string;
   messages: EncryptedChatMessage[];
   setMessages: (messages: EncryptedChatMessage[]) => void;
   baseUrl: string;
@@ -41,6 +43,8 @@ const EncryptedSocketChat: React.FC<Props> = ({
   status,
   userNick,
   takerNick,
+  makerHashId,
+  takerHashId,
   messages,
   setMessages,
   baseUrl,
@@ -315,7 +319,9 @@ const EncryptedSocketChat: React.FC<Props> = ({
                   message={message}
                   isTaker={isTaker}
                   userConnected={userConnected}
-                  baseUrl={baseUrl}
+                  takerNick={takerNick}
+                  takerHashId={takerHashId}
+                  makerHashId={makerHashId}
                 />
               </li>
             );

frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx

@@ -25,6 +25,8 @@ interface Props {
   order: Order;
   userNick: string;
   takerNick: string;
+  takerHashId: string;
+  makerHashId: string;
   chatOffset: number;
   messages: EncryptedChatMessage[];
   setMessages: (messages: EncryptedChatMessage[]) => void;
@@ -42,6 +44,8 @@ const EncryptedTurtleChat: React.FC<Props> = ({
   order,
   userNick,
   takerNick,
+  takerHashId,
+  makerHashId,
   chatOffset,
   messages,
   setMessages,
@@ -311,7 +315,9 @@ const EncryptedTurtleChat: React.FC<Props> = ({
                   message={message}
                   isTaker={isTaker}
                   userConnected={userConnected}
-                  baseUrl={baseUrl}
+                  takerNick={takerNick}
+                  takerHashId={takerHashId}
+                  makerHashId={makerHashId}
                 />
               </li>
             );

frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx

@@ -13,12 +13,21 @@ import { type EncryptedChatMessage } from '..';
 
 interface Props {
   message: EncryptedChatMessage;
+  takerNick: string;
+  takerHashId: string;
+  makerHashId: string;
   isTaker: boolean;
   userConnected: boolean;
-  baseUrl: string;
 }
 
-const MessageCard: React.FC<Props> = ({ message, isTaker, userConnected, baseUrl }) => {
+const MessageCard: React.FC<Props> = ({
+  message,
+  isTaker,
+  userConnected,
+  takerNick,
+  takerHashId,
+  makerHashId,
+}) => {
   const [showPGP, setShowPGP] = useState<boolean>(false);
   const { t } = useTranslation();
   const theme = useTheme();
@@ -34,8 +43,7 @@ const MessageCard: React.FC<Props> = ({ message, isTaker, userConnected, baseUrl
         avatar={
           <RobotAvatar
             statusColor={userConnected ? 'success' : 'error'}
-            nickname={message.userNick}
+            hashId={message.userNick === takerNick ? takerHashId : makerHashId}
-            baseUrl={baseUrl}
             small={true}
           />
         }

frontend/src/components/TradeBox/EncryptedChat/index.tsx

@@ -6,9 +6,6 @@ import EncryptedTurtleChat from './EncryptedTurtleChat';
 interface Props {
   order: Order;
   status: number;
-  takerNick: string;
-  makerNick: string;
-  userNick: string;
   chatOffset: number;
   baseUrl: string;
   messages: EncryptedChatMessage[];
@@ -34,8 +31,6 @@ export interface ServerMessage {
 
 const EncryptedChat: React.FC<Props> = ({
   order,
-  takerNick,
-  userNick,
   chatOffset,
   baseUrl,
   setMessages,
@@ -49,8 +44,10 @@ const EncryptedChat: React.FC<Props> = ({
       messages={messages}
       setMessages={setMessages}
       order={order}
-      takerNick={takerNick}
+      takerNick={order.taker_nick}
-      userNick={userNick}
+      takerHashId={order.taker_hash_id}
+      makerHashId={order.maker_hash_id}
+      userNick={order.ur_nick}
       chatOffset={chatOffset}
       baseUrl={baseUrl}
       turtleMode={turtleMode}
@@ -62,8 +59,10 @@ const EncryptedChat: React.FC<Props> = ({
       messages={messages}
       setMessages={setMessages}
       order={order}
-      takerNick={takerNick}
+      takerNick={order.taker_nick}
-      userNick={userNick}
+      takerHashId={order.taker_hash_id}
+      makerHashId={order.maker_hash_id}
+      userNick={order.ur_nick}
       baseUrl={baseUrl}
       turtleMode={turtleMode}
       setTurtleMode={setTurtleMode}

frontend/src/components/TradeBox/Prompts/Chat.tsx

@@ -50,7 +50,9 @@ export const ChatPrompt = ({
   const [text, setText] = useState<string>('');
 
   const currencyCode: string = currencies[`${order.currency}`];
-  const amount: string = pn(parseFloat(order.amount ?? 0).toFixed(order.currency === 1000 ? 8 : 4));
+  const amount: string = pn(
+    Number(parseFloat(order.amount ?? 0).toFixed(order.currency === 1000 ? 8 : 4)),
+  );
 
   const disputeCountdownRenderer = function ({
     hours,
@@ -133,9 +135,6 @@ export const ChatPrompt = ({
           status={order.status}
           chatOffset={order.chat_last_index}
           order={order}
-          takerNick={order.taker_nick}
-          makerNick={order.maker_nick}
-          userNick={order.ur_nick}
           baseUrl={baseUrl}
           messages={messages}
           setMessages={setMessages}