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,27 +46,27 @@ const GoToOrder = ({ open, onClose }: Props): React.JSX.Element => {
       <DialogTitle>{t('Search order')}</DialogTitle>
       <DialogContent>
         <DialogContentText>
-          {t("Enter here an order URL to search for it, even if it's password protected")}
+          <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')}`}
-              type='url'
-              error={error}
-              value={orderUrl}
-              style={{ marginTop: 8 }}
-              inputProps={{
-                style: {
-                  textAlign: 'center',
-                  backgroundColor: theme.palette.background.paper,
-                  borderRadius: 4,
-                },
-              }}
-              onChange={(e) => setOrderUrl(e.target.value)}
-            />
-          </Grid>
+          <TextField
+            fullWidth
+            label={`${t('Order URL')}`}
+            type='url'
+            error={error}
+            value={orderUrl}
+            style={{ marginTop: 8 }}
+            inputProps={{
+              style: {
+                textAlign: 'center',
+                backgroundColor: theme.palette.background.paper,
+                borderRadius: 4,
+              },
+            }}
+            onChange={(e) => setOrderUrl(e.target.value)}
+          />
         </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,42 +58,31 @@ 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={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'left',
-                        flexWrap: 'wrap',
-                        width: 300,
-                      }}
-                    >
-                      <BoltIcon sx={{ color: '#fcba03', height: '28px', width: '24px' }} />
+                <div style={{ position: 'relative', left: '-7px' }}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'left',
+                      flexWrap: 'wrap',
+                      width: 300,
+                    }}
+                  >
+                    <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>
+                    <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,42 +46,52 @@ const RobotAvatar: React.FC<Props> = ({
   imageStyle = {},
   onLoad = () => {},
 }) => {
-  const { hostUrl, client } = useContext<UseAppStoreType>(AppContext);
-  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 backgroundFadeTime = 3000;
   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) {
-      roboidentitiesClient
-        .generateRobohash(hashId, small ? 'small' : 'large')
-        .then((avatar) => {
-          setAvatarSrc(avatar);
-          setActiveBackground(false);
-        })
-        .catch(() => {
-          setActiveBackground(true);
-        });
+      generateAvatar();
+
+      setTimeout(() => {
+        if (!avatarSrc) generateAvatar();
+      }, backgroundFadeTime);
     }
   }, [hashId, small]);
 
   useEffect(() => {
     if (shortAlias && shortAlias !== '') {
-      setAvatarSrc(defaultAvatarSrc);
+      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) => {
+        setAvatarSrc(avatar);
+        setActiveBackground(false);
+      })
+      .catch(() => {
+        console.log('CATCH');
+        setActiveBackground(true);
+      });
+  };
+
   const statusBadge = (
     <div style={{ position: 'relative', left: '0.428em', top: '0.07em' }}>
       {orderType === 0 ? (

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.": "輸入你的機器人領牌來重造你的機器人並訪問它的交易。",