Finally fix RobotAvatar

frontend/src/components/Dialogs/GoToOrder.tsx

@@ -7,9 +7,9 @@ import {
   DialogContent,
   DialogContentText,
   Button,
-  Grid,
   TextField,
   useTheme,
+  Typography,
 } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
@@ -46,10 +46,11 @@ const GoToOrder = ({ open, onClose }: Props): React.JSX.Element => {
       <DialogTitle>{t('Search order')}</DialogTitle>
       <DialogContent>
         <DialogContentText>
+          <Typography variant='body2'>
             {t("Enter here an order URL to search for it, even if it's password protected")}
+          </Typography>
         </DialogContentText>
         <DialogContentText>
-          <Grid item sx={{ width: '100%' }}>
           <TextField
             fullWidth
             label={`${t('Order URL')}`}
@@ -66,7 +67,6 @@ const GoToOrder = ({ open, onClose }: Props): React.JSX.Element => {
             }}
             onChange={(e) => setOrderUrl(e.target.value)}
           />
-          </Grid>
         </DialogContentText>
       </DialogContent>
       <DialogActions>

frontend/src/components/Dialogs/Profile.tsx

@@ -30,18 +30,14 @@ const ProfileDialog = ({ open = false, onClose }: Props): React.JSX.Element => {
   const { garage, slotUpdatedAt } = useContext<UseGarageStoreType>(GarageContext);
   const { t } = useTranslation();
 
-  const slot = garage.getSlot();
-
   const [loading, setLoading] = useState<boolean>(true);
-  const [loadingRobots, setLoadingRobots] = useState<number>(
-    Object.values(slot?.robots ?? {}).length,
-  );
 
   useEffect(() => {
     setLoading(!garage.getSlot()?.hashId);
-    setLoadingRobots(Object.values(slot?.robots ?? {}).filter((robot) => robot.loading).length);
   }, [slotUpdatedAt]);
 
+  const slot = garage.getSlot();
+
   return (
     <Dialog
       open={open}
@@ -62,7 +58,6 @@ const ProfileDialog = ({ open = false, onClose }: Props): React.JSX.Element => {
           <ListItem className='profileNickname'>
             <ListItemText>
               <Typography component='h6' variant='h6'>
-                {!garage.getSlot()?.nickname && (
                 <div style={{ position: 'relative', left: '-7px' }}>
                   <div
                     style={{
@@ -75,29 +70,19 @@ const ProfileDialog = ({ open = false, onClose }: Props): React.JSX.Element => {
                   >
                     <BoltIcon sx={{ color: '#fcba03', height: '28px', width: '24px' }} />
 
-                      <a>{garage.getSlot()?.nickname}</a>
+                    <a>{slot?.nickname}</a>
 
                     <BoltIcon sx={{ color: '#fcba03', height: '28px', width: '24px' }} />
                   </div>
                 </div>
-                )}
               </Typography>
-
-              {loadingRobots > 0 ? (
-                <>
-                  <b>{t('Looking for your robot!')}</b>
-                  <LinearProgress />
-                </>
-              ) : (
-                <></>
-              )}
             </ListItemText>
 
             <ListItemAvatar>
               <RobotAvatar
                 avatarClass='profileAvatar'
                 style={{ width: 65, height: 65 }}
-                hashId={garage.getSlot()?.hashId ?? ''}
+                hashId={slot?.hashId ?? ''}
               />
             </ListItemAvatar>
           </ListItem>

frontend/src/components/RobotAvatar/index.tsx

@@ -46,22 +46,40 @@ const RobotAvatar: React.FC<Props> = ({
   imageStyle = {},
   onLoad = () => {},
 }) => {
-  const { hostUrl, client } = useContext<UseAppStoreType>(AppContext);
+  const backgroundFadeTime = 3000;
-  const defaultAvatarSrc = useMemo(() => {
-    return client !== 'mobile'
-      ? `${hostUrl}/static/federation/avatars/${shortAlias}${small ? '.small' : ''}.webp`
-      : `file:///android_asset/Web.bundle/assets/federation/avatars/${shortAlias}.webp`;
-  }, [shortAlias, small]);
-
-  const [avatarSrc, setAvatarSrc] = useState<string>(defaultAvatarSrc);
-  const [activeBackground, setActiveBackground] = useState<boolean>(true);
   const [backgroundData] = useState<BackgroundData>(placeholder.loading);
-
   const backgroundImage = `url(data:${backgroundData.mime};base64,${backgroundData.data})`;
+  const { hostUrl, client } = useContext<UseAppStoreType>(AppContext);
+  const [avatarSrc, setAvatarSrc] = useState<string>();
+  const [activeBackground, setActiveBackground] = useState<boolean>(true);
+
   const className = placeholderType === 'loading' ? 'loadingAvatar' : 'generatingAvatar';
 
   useEffect(() => {
     if (hashId) {
+      generateAvatar();
+
+      setTimeout(() => {
+        if (!avatarSrc) generateAvatar();
+      }, backgroundFadeTime);
+    }
+  }, [hashId, small]);
+
+  useEffect(() => {
+    if (shortAlias && shortAlias !== '') {
+      const coordinatorAvatar =
+        client !== 'mobile'
+          ? `${hostUrl}/static/federation/avatars/${shortAlias}${small ? '.small' : ''}.webp`
+          : `file:///android_asset/Web.bundle/assets/federation/avatars/${shortAlias}.webp`;
+      setAvatarSrc(coordinatorAvatar);
+    } else {
+      setActiveBackground(true);
+    }
+  }, [shortAlias]);
+
+  const generateAvatar = () => {
+    if (!hashId) return;
+
     roboidentitiesClient
       .generateRobohash(hashId, small ? 'small' : 'large')
       .then((avatar) => {
@@ -69,18 +87,10 @@ const RobotAvatar: React.FC<Props> = ({
         setActiveBackground(false);
       })
       .catch(() => {
+        console.log('CATCH');
         setActiveBackground(true);
       });
-    }
+  };
-  }, [hashId, small]);
-
-  useEffect(() => {
-    if (shortAlias && shortAlias !== '') {
-      setAvatarSrc(defaultAvatarSrc);
-    } else {
-      setActiveBackground(true);
-    }
-  }, [shortAlias]);
 
   const statusBadge = (
     <div style={{ position: 'relative', left: '0.428em', top: '0.07em' }}>

frontend/static/locales/ca.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "No tens un avatar robot",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinadors que coneixen el teu robot:",
-  "Looking for your robot!": "Buscant el teu robot!",
   "Your Robot": "El teu Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Introdueix el teu token per reconstruir el teu robot i accedir a les seves operacions.",

frontend/static/locales/cs.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "Nemáš robota a avatar",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Your Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Enter your robot token to re-build your robot and gain access to its trades.",

frontend/static/locales/de.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "Du hast keinen Roboter-Avatar",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Your Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Enter your robot token to re-build your robot and gain access to its trades.",

frontend/static/locales/en.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "You do not have a robot avatar",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Your Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Enter your robot token to re-build your robot and gain access to its trades.",

frontend/static/locales/es.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "No tienes un avatar robot",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Your Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Escribe o pega el token de tu robot token para reconstruirlo y acceder a tus operaciones.",

frontend/static/locales/eu.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "Ez daukazu robot avatarrik",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Your Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Enter your robot token to re-build your robot and gain access to its trades.",

frontend/static/locales/fr.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "Vous n'avez pas d'avatar robot",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Votre Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Saisissez votre jeton de robot pour reconstruire votre robot et accéder à ses transactions.",

frontend/static/locales/it.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "Non hai un avatar per il tuo robot",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Il tuo Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Inserisci il token del tuo robot per ricostruirlo ed ottenere l'accesso ai suoi scambi.",

frontend/static/locales/ja.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "ロボットのアバターがありません",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Your Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "取引にアクセスするために、ロボットのトークンを入力してロボットを再生成してください。",

frontend/static/locales/pl.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "You do not have a robot avatar",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Your Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Enter your robot token to re-build your robot and gain access to its trades.",

frontend/static/locales/pt.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "Você não tem um avatar de robô",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Procurando pelo seu robô!",
   "Your Robot": "Seu Robô",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Entre com seu token de robô para reconstruir seu robô e ganhar acesso às suas negociações.",

frontend/static/locales/ru.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "У Вас нет аватара робота",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Ваш Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Введите токен своего робота, чтобы восстанавить своего робота и получить доступ к его сделкам.",

frontend/static/locales/sv.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "Du har ingen robotavatar",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Your Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Enter your robot token to re-build your robot and gain access to its trades.",

frontend/static/locales/sw.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "Huna picha ya mwakilishi wa roboti",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Roboti yako",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Ingiza alama ya roboti yako ili kuirekebisha roboti yako na kupata ufikiaji wa biashara zake.",

frontend/static/locales/th.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "คุณไม่มีโรบอท",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "Your Robot",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "Enter your robot token to re-build your robot and gain access to its trades.",

frontend/static/locales/zh-SI.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "你没有机器人头像",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "你的机器人",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "输入你的机器人令牌来重造你的机器人并访问它的交易。",

frontend/static/locales/zh-TR.json

@@ -329,7 +329,6 @@
   "You do not have a robot avatar": "你沒有機器人頭像",
   "#32": "Phrases in components/Dialogs/Profile.tsx",
   "Coordinators that know your robot:": "Coordinators that know your robot:",
-  "Looking for your robot!": "Looking for your robot!",
   "Your Robot": "你的機器人",
   "#33": "Phrases in components/Dialogs/Recovery.tsx",
   "Enter your robot token to re-build your robot and gain access to its trades.": "輸入你的機器人領牌來重造你的機器人並訪問它的交易。",