Refactor avatars (#251)

.github/workflows/client-image.yml

@@ -46,10 +46,8 @@ jobs:
       with:
         images: recksato/robosats-client
         tags: |
-            type=ref,event=branch
             type=ref,event=pr
             type=ref,event=tag
-            type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
             type=sha,enable=true,priority=100,prefix=,suffix=,format=short
             type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'main') }}
@@ -72,4 +70,3 @@ jobs:
         push: true
         tags: ${{ steps.meta.outputs.tags }}
         labels: ${{ steps.meta.outputs.labels }}
-

.github/workflows/coordinator-image.yml

@@ -35,10 +35,8 @@ jobs:
       with:
         images: recksato/robosats
         tags: |
-            type=ref,event=branch
             type=ref,event=pr
             type=ref,event=tag
-            type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
             type=sha,enable=true,priority=100,prefix=,suffix=,format=short
             type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'main') }}
@@ -58,4 +56,3 @@ jobs:
         push: true
         tags: ${{ steps.meta.outputs.tags }}
         labels: ${{ steps.meta.outputs.labels }}
-

.github/workflows/frontend-build.yml

@@ -54,17 +54,16 @@ jobs:
         name: main-js
         path: frontend/static/frontend/main.js
 
-  invoke-docker-builds:
+    # Invoke pre-release image build if this was not a tag push
-    if: inputs.semver == ''
+    # Docker images tagged only with short commit hash
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
     - name: 'Invoke Coodinator Image CI'
+      if: inputs.semver == ''
       uses: benc-uk/workflow-dispatch@v1
       with:
         workflow: 'Coodinator Image CI'
         token: ${{ secrets.PERSONAL_TOKEN }}
     - name: 'Invoke Client App Build CI/CD workflow'
+      if: inputs.semver == ''
       uses: benc-uk/workflow-dispatch@v1
       with:
         workflow: 'Client App Image CI/CD'

.github/workflows/release.yml

@@ -97,5 +97,3 @@ jobs:
       #     asset_path: app-release.apk
       #     asset_name: robosats-${{ needs.check-versions.outputs.semver }}.apk
       #     asset_content_type: application/apk
-
-          

frontend/src/components/BookPage.js

@@ -81,13 +81,13 @@ class BookPage extends Component {
 
   // Colors for the status badges
   statusBadgeColor(status) {
-    if (status == 'Active') {
+    if (status === 'Active') {
       return 'success';
     }
-    if (status == 'Seen recently') {
+    if (status === 'Seen recently') {
       return 'warning';
     }
-    if (status == 'Inactive') {
+    if (status === 'Inactive') {
       return 'error';
     }
   }
@@ -167,7 +167,12 @@ class BookPage extends Component {
                 return (
                   <ListItemButton style={{ cursor: 'pointer' }}>
                     <ListItemAvatar>
-                      <RobotAvatar order={params.row} />
+                      <RobotAvatar
+                        nickname={params.row.maker_nick}
+                        orderType={params.row.type}
+                        statusColor={this.statusBadgeColor(params.row.maker_status)}
+                        tooltip={t(params.row.maker_status)}
+                      />
                     </ListItemAvatar>
                     <ListItemText primary={params.row.maker_nick} />
                   </ListItemButton>
@@ -307,7 +312,13 @@ class BookPage extends Component {
               renderCell: (params) => {
                 return (
                   <div style={{ position: 'relative', left: '-5px' }}>
-                    <RobotAvatar order={params.row} />
+                    <RobotAvatar
+                      nickname={params.row.maker_nick}
+                      smooth={true}
+                      orderType={params.row.type}
+                      statusColor={this.statusBadgeColor(params.row.maker_status)}
+                      tooltip={t(params.row.maker_status)}
+                    />
                   </div>
                 );
               },

frontend/src/components/BottomBar.js

@@ -19,6 +19,7 @@ import MediaQuery from 'react-responsive';
 import Flags from 'country-flag-icons/react/3x2';
 import { Link as LinkRouter } from 'react-router-dom';
 import { apiClient } from '../services/api';
+import RobotAvatar from './Robots/RobotAvatar';
 
 // Icons
 import BarChartIcon from '@mui/icons-material/BarChart';
@@ -204,29 +205,16 @@ class BottomBar extends Component {
                   }
                 >
                   <ListItemAvatar sx={{ width: 30 * fontSizeFactor, height: 30 * fontSizeFactor }}>
-                    <Badge
+                    <RobotAvatar
-                      badgeContent={
+                      style={{ marginTop: -13 }}
-                        (this.props.activeOrderId > 0) & !this.props.profileShown ? '' : null
+                      statusColor={
-                      }
+                        (this.props.activeOrderId > 0) & !this.props.profileShown
-                      color='primary'
+                          ? 'primary'
-                    >
+                          : undefined
-                      <Avatar
-                        className='flippedSmallAvatar'
-                        sx={{ margin: 0, top: -13 }}
-                        alt={this.props.nickname}
-                        imgProps={{
-                          onLoad: () => this.props.setAppState({ avatarLoaded: true }),
-                        }}
-                        src={
-                          this.props.nickname
-                            ? window.location.origin +
-                              '/static/assets/avatars/' +
-                              this.props.nickname +
-                              '.png'
-                            : null
                       }
+                      nickname={this.props.nickname}
+                      onLoad={() => this.props.setAppState({ avatarLoaded: true })}
                     />
-                    </Badge>
                   </ListItemAvatar>
                 </Tooltip>
                 <ListItemText primary={this.props.nickname} />
@@ -512,29 +500,17 @@ class BottomBar extends Component {
                   onClick={this.handleClickOpenProfile}
                   sx={{ margin: 0, bottom: 17, right: 8 }}
                 >
-                  <Badge
+                  <RobotAvatar
-                    badgeContent={
+                    style={{ width: 55, height: 55 }}
-                      (this.state.active_order_id > 0) & !this.state.profileShown ? '' : null
+                    avatarClass='phoneFlippedSmallAvatar'
-                    }
+                    statusColor={
-                    color='primary'
+                      (this.props.activeOrderId > 0) & !this.props.profileShown
-                  >
+                        ? 'primary'
-                    <Avatar
+                        : undefined
-                      className='phoneFlippedSmallAvatar'
-                      sx={{ width: 55, height: 55 }}
-                      alt={this.props.nickname}
-                      imgProps={{
-                        onLoad: () => this.props.setAppState({ avatarLoaded: true }),
-                      }}
-                      src={
-                        this.props.nickname
-                          ? window.location.origin +
-                            '/static/assets/avatars/' +
-                            this.props.nickname +
-                            '.png'
-                          : null
                     }
+                    nickname={this.props.nickname}
+                    onLoad={() => this.props.setAppState({ avatarLoaded: true })}
                   />
-                  </Badge>
                 </IconButton>
               </Tooltip>
             </div>

frontend/src/components/Charts/DepthChart/index.tsx

@@ -216,6 +216,17 @@ const DepthChart: React.FC<DepthChartProps> = ({
     />
   );
 
+  const statusBadgeColor = (status: string) => {
+    if (status === 'Active') {
+      return 'success';
+    }
+    if (status === 'Seen recently') {
+      return 'warning';
+    }
+
+    return 'error';
+  };
+
   const generateTooltip: React.FunctionComponent<PointTooltipProps> = (
     pointTooltip: PointTooltipProps,
   ) => {
@@ -225,7 +236,12 @@ const DepthChart: React.FC<DepthChartProps> = ({
         <Grid container justifyContent='space-between'>
           <Grid item xs={3}>
             <Grid container justifyContent='center' alignItems='center'>
-              <RobotAvatar order={order} />
+              <RobotAvatar
+                nickname={order.maker_nick}
+                orderType={order.type}
+                statusColor={statusBadgeColor(order.maker_status)}
+                tooltip={t(order.maker_status)}
+              />
             </Grid>
           </Grid>
           <Grid item xs={8}>

frontend/src/components/Dialogs/Profile.tsx

@@ -39,6 +39,7 @@ import { UserNinjaIcon, BitcoinIcon } from '../Icons';
 import { getCookie } from '../../utils/cookies';
 import { copyToClipboard } from '../../utils/clipboard';
 import { getWebln } from '../../utils/webln';
+import RobotAvatar from '../Robots/RobotAvatar';
 
 interface Props {
   isOpen: boolean;
@@ -167,13 +168,10 @@ const ProfileDialog = ({
             </ListItemText>
 
             <ListItemAvatar>
-              <Avatar
+              <RobotAvatar
-                className='profileAvatar'
+                avatarClass='profileAvatar'
-                sx={{ width: 65, height: 65 }}
+                style={{ width: 65, height: 65 }}
-                alt={nickname}
+                nickname={nickname}
-                src={
-                  nickname ? `${window.location.origin}/static/assets/avatars/${nickname}.png` : ''
-                }
               />
             </ListItemAvatar>
           </ListItem>

frontend/src/components/EncryptedChat.js

@@ -20,6 +20,7 @@ import { getCookie } from '../utils/cookies';
 import { saveAsJson } from '../utils/saveFile';
 import { copyToClipboard } from '../utils/clipboard';
 import { AuditPGPDialog } from './Dialogs';
+import RobotAvatar from './Robots/RobotAvatar';
 
 // Icons
 import CheckIcon from '@mui/icons-material/Check';
@@ -270,23 +271,10 @@ class Chat extends Component {
         <CardHeader
           sx={{ color: '#333333' }}
           avatar={
-            <Badge
+            <RobotAvatar
-              variant='dot'
+              statusColor={props.userConnected ? 'success' : 'error'}
-              overlap='circular'
+              nickname={props.message.userNick}
-              badgeContent=''
-              color={props.userConnected ? 'success' : 'error'}
-            >
-              <Avatar
-                className='flippedSmallAvatar'
-                alt={props.message.userNick}
-                src={
-                  window.location.origin +
-                  '/static/assets/avatars/' +
-                  props.message.userNick +
-                  '.png'
-                }
             />
-            </Badge>
           }
           style={{ backgroundColor: props.cardColor }}
           title={

frontend/src/components/OrderPage.js

@@ -55,6 +55,7 @@ import { pn } from '../utils/prettyNumbers';
 import { copyToClipboard } from '../utils/clipboard';
 import { getWebln } from '../utils/webln';
 import { apiClient } from '../services/api';
+import RobotAvatar from './Robots/RobotAvatar';
 
 class OrderPage extends Component {
   constructor(props) {
@@ -667,13 +668,13 @@ class OrderPage extends Component {
 
   // Colors for the status badges
   statusBadgeColor(status) {
-    if (status == 'Active') {
+    if (status === 'Active') {
       return 'success';
     }
-    if (status == 'Seen recently') {
+    if (status === 'Seen recently') {
       return 'warning';
     }
-    if (status == 'Inactive') {
+    if (status === 'Inactive') {
       return 'error';
     }
   }
@@ -692,46 +693,12 @@ class OrderPage extends Component {
             <List dense={true}>
               <ListItem>
                 <ListItemAvatar sx={{ width: 56, height: 56 }}>
-                  <Tooltip placement='top' enterTouchDelay={0} title={t(this.state.maker_status)}>
+                  <RobotAvatar
-                    <Badge
+                    statusColor={this.statusBadgeColor(this.state.maker_status)}
-                      variant='dot'
+                    nickname={this.state.maker_nick}
-                      overlap='circular'
+                    tooltip={t(this.state.maker_status)}
-                      badgeContent=''
+                    orderType={this.state.type}
-                      color={this.statusBadgeColor(this.state.maker_status)}
-                    >
-                      <Badge
-                        overlap='circular'
-                        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-                        badgeContent={
-                          <div style={{ position: 'relative', left: '5px', top: '2px' }}>
-                            {' '}
-                            {!this.state.type ? (
-                              <SendReceiveIcon
-                                sx={{ transform: 'scaleX(-1)', height: '18px', width: '18px' }}
-                                color='secondary'
                   />
-                            ) : (
-                              <SendReceiveIcon
-                                sx={{ height: '18px', width: '18px' }}
-                                color='primary'
-                              />
-                            )}
-                          </div>
-                        }
-                      >
-                        <Avatar
-                          className='flippedSmallAvatar'
-                          alt={this.state.maker_nick}
-                          src={
-                            window.location.origin +
-                            '/static/assets/avatars/' +
-                            this.state.maker_nick +
-                            '.png'
-                          }
-                        />
-                      </Badge>
-                    </Badge>
-                  </Tooltip>
                 </ListItemAvatar>
                 <ListItemText
                   primary={
@@ -745,7 +712,7 @@ class OrderPage extends Component {
 
               {this.state.is_participant ? (
                 <>
-                  {this.state.taker_nick != 'None' ? (
+                  {this.state.taker_nick !== 'None' ? (
                     <>
                       <Divider />
                       <ListItem align='left'>
@@ -757,50 +724,13 @@ class OrderPage extends Component {
                           secondary={t('Order taker')}
                         />
                         <ListItemAvatar>
-                          <Tooltip enterTouchDelay={0} title={t(this.state.taker_status)}>
+                          <RobotAvatar
-                            <Badge
+                            avatarClass='smallAvatar'
-                              variant='dot'
+                            statusColor={this.statusBadgeColor(this.state.taker_status)}
-                              overlap='circular'
+                            nickname={this.state.taker_nick}
-                              badgeContent=''
+                            tooltip={t(this.state.taker_status)}
-                              color={this.statusBadgeColor(this.state.taker_status)}
+                            orderType={this.state.type === 0 ? 1 : 0}
-                            >
-                              <Badge
-                                overlap='circular'
-                                anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
-                                badgeContent={
-                                  <div style={{ position: 'relative', right: '5px', top: '2px' }}>
-                                    {' '}
-                                    {this.state.type ? (
-                                      <SendReceiveIcon
-                                        sx={{ height: '18px', width: '18px' }}
-                                        color='secondary'
                           />
-                                    ) : (
-                                      <SendReceiveIcon
-                                        sx={{
-                                          transform: 'scaleX(-1)',
-                                          height: '18px',
-                                          width: '18px',
-                                        }}
-                                        color='primary'
-                                      />
-                                    )}
-                                  </div>
-                                }
-                              >
-                                <Avatar
-                                  className='smallAvatar'
-                                  alt={this.state.taker_nick}
-                                  src={
-                                    window.location.origin +
-                                    '/static/assets/avatars/' +
-                                    this.state.taker_nick +
-                                    '.png'
-                                  }
-                                />
-                              </Badge>
-                            </Badge>
-                          </Tooltip>
                         </ListItemAvatar>
                       </ListItem>
                     </>

frontend/src/components/Robots/RobotAvatar/index.tsx

@@ -1,24 +1,37 @@
 import React from 'react';
-import { Badge, Tooltip } from '@mui/material';
 import SmoothImage from 'react-smooth-image';
-
+import { Avatar, Badge, Tooltip } from '@mui/material';
-import Order from '../../../models/Order.model';
 import { useTranslation } from 'react-i18next';
 import { SendReceiveIcon } from '../../Icons';
 
 interface DepthChartProps {
-  order: Order;
+  nickname: string;
+  smooth?: boolean;
+  style?: object;
+  statusColor?: 'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning';
+  orderType?: number;
+  tooltip?: string;
+  avatarClass?: string;
+  onLoad?: () => void;
 }
 
-const RobotAvatar: React.FC<DepthChartProps> = ({ order }) => {
+const RobotAvatar: React.FC<DepthChartProps> = ({
+  nickname,
+  orderType,
+  statusColor,
+  tooltip,
+  smooth = false,
+  style = {},
+  avatarClass = 'flippedSmallAvatar',
+  onLoad = () => {},
+}) => {
   const { t } = useTranslation();
 
-  const avatarSrc: string =
+  const avatarSrc: string = window.location.origin + '/static/assets/avatars/' + nickname + '.png';
-    window.location.origin + '/static/assets/avatars/' + order?.maker_nick + '.png';
 
   const statusBadge = (
     <div style={{ position: 'relative', left: '6px', top: '1px' }}>
-      {order?.type === 0 ? (
+      {orderType === 0 ? (
         <SendReceiveIcon
           sx={{ transform: 'scaleX(-1)', height: '18px', width: '18px' }}
           color='secondary'
@@ -29,45 +42,68 @@ const RobotAvatar: React.FC<DepthChartProps> = ({ order }) => {
     </div>
   );
 
-  const statusBadgeColor = () => {
+  const getAvatar = () => {
-    if (!order) {
+    if (smooth) {
-      return;
+      return (
-    }
-    if (order.maker_status === 'Active') {
-      return 'success';
-    }
-    if (order.maker_status === 'Seen recently') {
-      return 'warning';
-    }
-    if (order.maker_status === 'Inactive') {
-      return 'error';
-    }
-  };
-
-  return order ? (
-    <Tooltip placement='right' enterTouchDelay={0} title={t(order.maker_status) || ''}>
-      <Badge variant='dot' overlap='circular' badgeContent='' color={statusBadgeColor()}>
-        <Badge
-          overlap='circular'
-          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-          badgeContent={statusBadge}
-        >
-          <div style={{ width: 45, height: 45 }}>
         <SmoothImage
+          className={avatarClass}
           src={avatarSrc}
           imageStyles={{
+            ...style,
             borderRadius: '50%',
             transform: 'scaleX(-1)',
             border: '0.3px solid #555',
             filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
           }}
         />
-          </div>
+      );
+    } else {
+      return (
+        <Avatar
+          className={avatarClass}
+          style={style}
+          alt={nickname}
+          src={avatarSrc}
+          imgProps={{
+            onLoad,
+          }}
+        />
+      );
+    }
+  };
+
+  const getAvatarWithBadges = () => {
+    let component = getAvatar();
+
+    if (statusColor) {
+      component = (
+        <Badge variant='dot' overlap='circular' badgeContent='' color={statusColor}>
+          {component}
         </Badge>
+      );
+    }
+
+    if (orderType !== undefined) {
+      component = (
+        <Badge
+          overlap='circular'
+          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+          badgeContent={statusBadge}
+        >
+          {component}
         </Badge>
+      );
+    }
+
+    return component;
+  };
+
+  return tooltip ? (
+    <Tooltip placement='right' enterTouchDelay={0} title={tooltip}>
+      {getAvatarWithBadges()}
     </Tooltip>
   ) : (
-    <></>
+    getAvatarWithBadges()
   );
 };
 

frontend/src/components/TradeSummary.tsx

@@ -20,6 +20,7 @@ import {
 } from '@mui/material';
 import { pn } from '../utils/prettyNumbers';
 import { saveAsJson } from '../utils/saveFile';
+import RobotAvatar from './Robots/RobotAvatar';
 
 // Icons
 import FlagWithProps from './FlagWithProps';
@@ -94,12 +95,7 @@ const TradeSummary = ({
           >
             <ToggleButtonGroup size='small' value={buttonValue} exclusive>
               <ToggleButton value={0} disableRipple={true} onClick={() => setButtonValue(0)}>
-                <Avatar
+                <RobotAvatar style={{ height: 24, width: 24 }} nickname={makerNick} />
-                  className='flippedSmallAvatar'
-                  sx={{ height: 24, width: 24 }}
-                  alt={makerNick}
-                  src={window.location.origin + '/static/assets/avatars/' + makerNick + '.png'}
-                />
                 &nbsp;
                 {t('Maker')}
               </ToggleButton>
@@ -109,11 +105,10 @@ const TradeSummary = ({
               <ToggleButton value={2} disableRipple={true} onClick={() => setButtonValue(2)}>
                 {t('Taker')}
                 &nbsp;
-                <Avatar
+                <RobotAvatar
-                  className='smallAvatar'
+                  avatarClass='smallAvatar'
-                  sx={{ height: 28, width: 28 }}
+                  style={{ height: 28, width: 28 }}
-                  alt={takerNick}
+                  nickname={takerNick}
-                  src={window.location.origin + '/static/assets/avatars/' + takerNick + '.png'}
                 />
               </ToggleButton>
             </ToggleButtonGroup>