Small fixes

frontend/src/basic/Main.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { MemoryRouter, BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Box, Slide, Typography, styled } from '@mui/material';
 import { type UseAppStoreType, AppContext, closeAll } from '../contexts/AppContext';
@@ -34,11 +34,6 @@ const Main: React.FC = () => {
     useContext<UseAppStoreType>(AppContext);
   const { federation, sortedCoordinators } = useContext<UseFederationStoreType>(FederationContext);
   const { garage } = useContext<UseGarageStoreType>(GarageContext);
-  const [avatarBaseUrl, setAvatarBaseUrl] = useState<string>(hostUrl);
-
-  useEffect(() => {
-    setAvatarBaseUrl(federation.getCoordinator(sortedCoordinators[0]).getBaseUrl());
-  }, [settings.network, settings.selfhostedClient, federation, sortedCoordinators]);
 
   const onLoad = (): void => {
     garage.updateSlot({ avatarLoaded: true });
@@ -48,8 +43,7 @@ const Main: React.FC = () => {
     <Router>
       <RobotAvatar
         style={{ display: 'none' }}
-        nickname={garage.getSlot()?.getRobot()?.nickname}
+        hashId={garage.getSlot()?.getRobot()?.hashId}
-        baseUrl={federation.getCoordinator(sortedCoordinators[0]).getBaseUrl()}
         onLoad={onLoad}
       />
       <Notifications
@@ -81,7 +75,7 @@ const Main: React.FC = () => {
                     appear={slideDirection.in !== undefined}
                   >
                     <div>
-                      <RobotPage avatarBaseUrl={avatarBaseUrl} />
+                      <RobotPage />
                     </div>
                   </Slide>
                 }

frontend/src/basic/NavBar/NavBar.tsx

@@ -130,8 +130,7 @@ const NavBar = (): JSX.Element => {
               <RobotAvatar
                 style={{ width: '2.3em', height: '2.3em', position: 'relative', top: '0.2em' }}
                 avatarClass={theme.palette.mode === 'dark' ? 'navBarAvatarDark' : 'navBarAvatar'}
-                nickname={slot?.getRobot()?.nickname}
+                hashId={slot?.getRobot()?.hashId}
-                baseUrl={hostUrl}
               />
             ) : (
               <></>

frontend/src/basic/RobotPage/Onboarding.tsx

@@ -164,7 +164,7 @@ const Onboarding = ({
 
             <Grid item sx={{ width: '13.5em' }}>
               <RobotAvatar
-                nickname={robot?.nickname}
+                hashId={robot?.hashId}
                 smooth={true}
                 style={{ maxWidth: '12.5em', maxHeight: '12.5em' }}
                 placeholderType='generating'
@@ -176,7 +176,6 @@ const Onboarding = ({
                   width: '12.4em',
                 }}
                 tooltipPosition='top'
-                baseUrl={hostUrl}
               />
             </Grid>
 

frontend/src/basic/RobotPage/RobotProfile.tsx

@@ -44,7 +44,7 @@ const RobotProfile = ({
   setView,
   width,
 }: RobotProfileProps): JSX.Element => {
-  const { windowSize, hostUrl } = useContext<UseAppStoreType>(AppContext);
+  const { windowSize } = useContext<UseAppStoreType>(AppContext);
   const { garage, robotUpdatedAt, orderUpdatedAt } = useContext<UseGarageStoreType>(GarageContext);
   const { sortedCoordinators } = useContext<UseFederationStoreType>(FederationContext);
 
@@ -127,7 +127,7 @@ const RobotProfile = ({
 
         <Grid item sx={{ width: `13.5em` }}>
           <RobotAvatar
-            nickname={robot?.nickname}
+            hashId={robot?.hashId}
             smooth={true}
             style={{ maxWidth: '12.5em', maxHeight: '12.5em' }}
             placeholderType='generating'
@@ -140,7 +140,6 @@ const RobotProfile = ({
             }}
             tooltip={t('This is your trading avatar')}
             tooltipPosition='top'
-            baseUrl={hostUrl}
           />
           {robot?.found === true && slot?.lastShortAlias != null ? (
             <Typography align='center' variant='h6'>
@@ -275,11 +274,10 @@ const RobotProfile = ({
                         >
                           <Grid item>
                             <RobotAvatar
-                              nickname={slot?.getRobot()?.nickname}
+                              hashId={slot?.getRobot()?.hashId}
                               smooth={true}
                               style={{ width: '2.6em', height: '2.6em' }}
                               placeholderType='loading'
-                              baseUrl={hostUrl}
                               small={true}
                             />
                           </Grid>

frontend/src/basic/RobotPage/index.tsx

@@ -23,11 +23,7 @@ import { validateTokenEntropy } from '../../utils';
 import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
 import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext';
 
-interface RobotPageProps {
+const RobotPage = (): JSX.Element => {
-  avatarBaseUrl: string;
-}
-
-const RobotPage = ({ avatarBaseUrl }: RobotPageProps): JSX.Element => {
   const { torStatus, windowSize, settings, page } = useContext<UseAppStoreType>(AppContext);
   const { garage } = useContext<UseGarageStoreType>(GarageContext);
   const { federation, sortedCoordinators } = useContext<UseFederationStoreType>(FederationContext);
@@ -158,7 +154,6 @@ const RobotPage = ({ avatarBaseUrl }: RobotPageProps): JSX.Element => {
             inputToken={inputToken}
             setInputToken={setInputToken}
             getGenerateRobot={getGenerateRobot}
-            avatarBaseUrl={avatarBaseUrl}
           />
         ) : null}
 
@@ -170,7 +165,6 @@ const RobotPage = ({ avatarBaseUrl }: RobotPageProps): JSX.Element => {
             inputToken={inputToken}
             setInputToken={setInputToken}
             getGenerateRobot={getGenerateRobot}
-            avatarBaseUrl={avatarBaseUrl}
           />
         ) : null}
 

frontend/src/components/BookTable/index.tsx

@@ -220,14 +220,13 @@ const BookTable = ({
           >
             <ListItemAvatar>
               <RobotAvatar
-                nickname={params.row.maker_nick}
+                hashId={params.row.maker_hash_id}
                 style={{ width: '3.215em', height: '3.215em' }}
                 smooth={true}
                 flipHorizontally={true}
                 orderType={params.row.type}
                 statusColor={statusBadgeColor(params.row.maker_status)}
                 tooltip={t(params.row.maker_status)}
-                baseUrl={url + basePath}
                 small={true}
               />
             </ListItemAvatar>
@@ -257,14 +256,13 @@ const BookTable = ({
             }}
           >
             <RobotAvatar
-              nickname={params.row.maker_nick}
+              hashId={params.row.maker_hash_id}
               smooth={true}
               flipHorizontally={true}
               style={{ width: '3.215em', height: '3.215em' }}
               orderType={params.row.type}
               statusColor={statusBadgeColor(params.row.maker_status)}
               tooltip={t(params.row.maker_status)}
-              baseUrl={url + basePath}
             />
           </div>
         );
@@ -293,12 +291,10 @@ const BookTable = ({
           >
             <ListItemAvatar>
               <RobotAvatar
-                nickname={params.row.coordinatorShortAlias}
+                shortAlias={params.row.coordinatorShortAlias}
-                coordinator={true}
                 style={{ width: '3.215em', height: '3.215em' }}
                 smooth={true}
                 flipHorizontally={true}
-                baseUrl={hostUrl}
                 small={true}
               />
             </ListItemAvatar>

frontend/src/components/Dialogs/Coordinator.tsx

@@ -362,12 +362,10 @@ const CoordinatorDialog = ({ open = false, onClose, network, shortAlias }: Props
             <Grid container direction='column' alignItems='center' padding={0}>
               <Grid item>
                 <RobotAvatar
-                  nickname={coordinator?.shortAlias}
+                  shortAlias={coordinator?.shortAlias}
-                  coordinator={true}
                   style={{ width: '7.5em', height: '7.5em' }}
                   smooth={true}
                   flipHorizontally={false}
-                  baseUrl={hostUrl}
                 />
               </Grid>
               <Grid item>

frontend/src/components/Dialogs/Profile.tsx

@@ -83,8 +83,7 @@ const ProfileDialog = ({ open = false, baseUrl, onClose }: Props): JSX.Element =
               <RobotAvatar
                 avatarClass='profileAvatar'
                 style={{ width: 65, height: 65 }}
-                nickname={garage.getSlot()?.getRobot()?.nickname}
+                hashId={garage.getSlot()?.getRobot()?.hashId}
-                baseUrl={baseUrl}
               />
             </ListItemAvatar>
           </ListItem>

frontend/src/components/FederationTable/index.tsx

@@ -75,12 +75,10 @@ const FederationTable = ({
           >
             <Grid item>
               <RobotAvatar
-                nickname={params.row.shortAlias}
+                shortAlias={params.row.shortAlias}
-                coordinator={true}
                 style={{ width: '3.215em', height: '3.215em' }}
                 smooth={true}
                 flipHorizontally={true}
-                baseUrl={hostUrl}
                 small={true}
               />
             </Grid>

frontend/src/components/OrderDetails/index.tsx

@@ -264,12 +264,7 @@ const OrderDetails = ({
             {' '}
             <Grid container direction='row' justifyContent='center' alignItems='center'>
               <Grid item xs={2}>
-                <RobotAvatar
+                <RobotAvatar shortAlias={coordinator.shortAlias} coordinator={true} small={true} />
-                  nickname={coordinator.shortAlias}
-                  coordinator={true}
-                  baseUrl={hostUrl}
-                  small={true}
-                />
               </Grid>
               <Grid item xs={4}>
                 <ListItemText primary={coordinator.longAlias} secondary={t('Order host')} />
@@ -283,10 +278,9 @@ const OrderDetails = ({
             <ListItemAvatar sx={{ width: '4em', height: '4em' }}>
               <RobotAvatar
                 statusColor={statusBadgeColor(currentOrder?.maker_status ?? '')}
-                nickname={currentOrder?.maker_nick}
+                hashId={currentOrder?.maker_hash_id}
                 tooltip={t(currentOrder?.maker_status ?? '')}
                 orderType={currentOrder?.type}
-                baseUrl={baseUrl}
                 small={true}
               />
             </ListItemAvatar>
@@ -315,12 +309,11 @@ const OrderDetails = ({
                 <RobotAvatar
                   avatarClass='smallAvatar'
                   statusColor={statusBadgeColor(currentOrder?.taker_status ?? '')}
-                  nickname={
+                  hashId={
-                    currentOrder?.taker_nick === 'None' ? undefined : currentOrder?.taker_nick
+                    currentOrder?.taker_hash_id === 'None' ? undefined : currentOrder?.taker_hash_id
                   }
                   tooltip={t(currentOrder?.taker_status ?? '')}
                   orderType={currentOrder?.type === 0 ? 1 : 0}
-                  baseUrl={baseUrl}
                   small={true}
                 />
               </ListItemAvatar>

frontend/src/components/RobotAvatar/index.tsx

@@ -1,15 +1,15 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import SmoothImage from 'react-smooth-image';
 import { Avatar, Badge, Tooltip } from '@mui/material';
 import { SendReceiveIcon } from '../Icons';
-import { apiClient } from '../../services/api';
 import placeholder from './placeholder.json';
 import { robohash } from './RobohashGenerator';
+import { AppContext, UseAppStoreType } from '../../contexts/AppContext';
 
 interface Props {
-  nickname: string | undefined;
+  shortAlias?: string | undefined;
+  hashId?: string | undefined;
   smooth?: boolean;
-  coordinator?: boolean;
   small?: boolean;
   flipHorizontally?: boolean;
   style?: object;
@@ -21,7 +21,6 @@ interface Props {
   tooltipPosition?: string;
   avatarClass?: string;
   onLoad?: () => void;
-  baseUrl: string;
 }
 
 interface BackgroundData {
@@ -30,7 +29,8 @@ interface BackgroundData {
 }
 
 const RobotAvatar: React.FC<Props> = ({
-  nickname,
+  shortAlias,
+  hashId,
   orderType,
   statusColor,
   tooltip,
@@ -43,14 +43,13 @@ const RobotAvatar: React.FC<Props> = ({
   avatarClass = 'flippedSmallAvatar',
   imageStyle = {},
   onLoad = () => {},
-  coordinator = false,
-  baseUrl,
 }) => {
-  const [avatarSrc, setAvatarSrc] = useState<string>();
+  const [avatarSrc, setAvatarSrc] = useState<string>('');
-  const [nicknameReady, setNicknameReady] = useState<boolean>(false);
+  const [avatarReady, setAvatarReady] = useState<boolean>(false);
   const [activeBackground, setActiveBackground] = useState<boolean>(true);
+  const { hostUrl } = useContext<UseAppStoreType>(AppContext);
+  const backgroundFadeTime = 3000;
 
-  const path = coordinator ? '/static/federation/avatars/' : '/static/assets/avatars/';
   const [backgroundData] = useState<BackgroundData>(
     placeholderType === 'generating' ? placeholder.generating : placeholder.loading,
   );
@@ -59,38 +58,44 @@ const RobotAvatar: React.FC<Props> = ({
 
   useEffect(() => {
     // TODO: HANDLE ANDROID AVATARS TOO (when window.NativeRobosats !== undefined)
-    if (nickname !== undefined && !coordinator) {
+    if (hashId !== undefined) {
       robohash
-        .generate(nickname, small ? 'small' : 'large') // TODO: should hash_id
+        .generate(hashId, small ? 'small' : 'large')
         .then((avatar) => {
           setAvatarSrc(avatar);
         })
         .catch(() => {
           setAvatarSrc('');
         });
-      setNicknameReady(true);
+      setAvatarReady(true);
-      setActiveBackground(false);
+      setTimeout(() => {
+        setActiveBackground(false);
+      }, backgroundFadeTime);
     }
+  }, [hashId]);
 
-    if (coordinator) {
+  useEffect(() => {
+    if (shortAlias !== undefined) {
       if (window.NativeRobosats === undefined) {
         setAvatarSrc(
-          `${baseUrl}/static/federation/avatars/${nickname}${small ? '.small' : ''}.webp`,
+          `${hostUrl}/static/federation/avatars/${shortAlias}${small ? '.small' : ''}.webp`,
         );
       } else {
         setAvatarSrc(
-          `file:///android_asset/Web.bundle/assets/federation/avatars/${nickname}${
+          `file:///android_asset/Web.bundle/assets/federation/avatars/${shortAlias}${
             small ? ' .small' : ''
           }.webp`,
         );
       }
-      setNicknameReady(true);
+      setAvatarReady(true);
-      setActiveBackground(false);
+      setTimeout(() => {
+        setActiveBackground(false);
+      }, backgroundFadeTime);
     } else {
-      setNicknameReady(false);
+      setAvatarReady(false);
       setActiveBackground(true);
     }
-  }, [nickname]); // TODO: should hash_id
+  }, [shortAlias]); // TODO: should hashId
 
   const statusBadge = (
     <div style={{ position: 'relative', left: '0.428em', top: '0.07em' }}>
@@ -106,6 +111,7 @@ const RobotAvatar: React.FC<Props> = ({
   );
 
   const avatar = useMemo(() => {
+    console.log(avatarSrc, avatarReady);
     if (smooth) {
       return (
         <div
@@ -121,15 +127,12 @@ const RobotAvatar: React.FC<Props> = ({
         >
           <div className={className}>
             <SmoothImage
-              src={nicknameReady ? avatarSrc : null}
+              src={avatarReady ? avatarSrc : null}
               imageStyles={{
                 borderRadius: '50%',
                 border: '0.3px solid #55555',
                 filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
                 ...imageStyle,
-                onLoad: setTimeout(() => {
-                  setActiveBackground(false);
-                }, 5000),
               }}
             />
           </div>
@@ -140,8 +143,8 @@ const RobotAvatar: React.FC<Props> = ({
         <Avatar
           className={avatarClass}
           style={style}
-          alt={nickname}
+          alt={hashId ?? shortAlias ?? 'unknown'}
-          src={nicknameReady ? avatarSrc : null}
+          src={avatarReady ? avatarSrc : ''}
           imgProps={{
             sx: { transform: flipHorizontally ? 'scaleX(-1)' : '' },
             style: { transform: flipHorizontally ? 'scaleX(-1)' : '' },
@@ -150,7 +153,7 @@ const RobotAvatar: React.FC<Props> = ({
         />
       );
     }
-  }, [nickname, nicknameReady, avatarSrc, statusColor, tooltip, avatarClass]);
+  }, [hashId, shortAlias, avatarReady, avatarSrc, statusColor, tooltip, avatarClass]);
 
   const getAvatarWithBadges = useCallback(() => {
     let component = avatar;

frontend/src/contexts/FederationContext.ts

@@ -151,19 +151,11 @@ export const useFederationStore = (): UseFederationStoreType => {
     const slot = garage.getSlot();
     const robot = slot?.getRobot();
 
-<<<<<<< HEAD
     if (robot != null && garage.currentSlot != null) {
       if (open.profile && slot?.avatarLoaded === true && slot.token != null) {
         void federation.fetchRobot(garage, slot.token); // refresh/update existing robot
       } else if (
         !(slot?.avatarLoaded === true) &&
-=======
-    if (robot != null && garage.currentSlot) {
-      if (open.profile && slot?.avatarLoaded && slot.token) {
-        void federation.fetchRobot(garage, slot.token); // refresh/update existing robot
-      } else if (
-        !slot?.avatarLoaded &&
->>>>>>> f861207a (Add robo-identity-wasm)
         robot.token !== undefined &&
         robot.encPrivKey !== undefined &&
         robot.pubKey !== undefined

frontend/src/models/Order.model.ts

@@ -62,7 +62,9 @@ export interface Order {
   is_buyer: boolean;
   is_seller: boolean;
   maker_nick: string;
+  maker_hash_id: string;
   taker_nick: string;
+  taker_hash_id: string;
   status_message: string;
   is_fiat_sent: boolean;
   is_disputed: boolean;
@@ -150,7 +152,9 @@ export const defaultOrder: Order = {
   is_buyer: false,
   is_seller: false,
   maker_nick: '',
+  maker_hash_id: '',
   taker_nick: '',
+  taker_hash_id: '',
   status_message: '',
   is_fiat_sent: false,
   is_disputed: false,

frontend/src/models/Robot.model.ts

@@ -15,7 +15,7 @@ class Robot {
   constructor(garageRobot?: Robot) {
     if (garageRobot != null) {
       this.token = garageRobot?.token ?? undefined;
-      this.hash_id = garageRobot?.hash_id ?? undefined;
+      this.hashId = garageRobot?.hashId ?? undefined;
       this.tokenSHA256 =
         garageRobot?.tokenSHA256 ?? (this.token != null ? hexToBase91(sha256(this.token)) : '');
       this.pubKey = garageRobot?.pubKey ?? undefined;
@@ -25,7 +25,7 @@ class Robot {
 
   public nickname?: string;
   public token?: string;
-  public hash_id?: string;
+  public hashId?: string;
   public bitsEntropy?: number;
   public shannonEntropy?: number;
   public tokenSHA256: string = '';
@@ -45,13 +45,15 @@ class Robot {
 
   update = (attributes: Record<string, any>): void => {
     Object.assign(this, attributes);
+
+    // generate robo identity
     if (attributes.token != null) {
-      const hash_id = sha256(sha256(attributes.token));
+      const hashId = sha256(sha256(attributes.token));
-      this.hash_id = hash_id;
+      this.hashId = hashId;
-      this.nickname = generate_roboname(hash_id);
+      this.nickname = generate_roboname(hashId);
       // trigger RoboHash avatar generation in webworker and store in RoboHash class cache.
-      robohash.generate(hash_id, 'small');
+      robohash.generate(hashId, 'small');
-      robohash.generate(hash_id, 'large');
+      robohash.generate(hashId, 'large');
     }
   };