rendering contact error status

net/web/src/constants/Colors.js

@@ -18,6 +18,7 @@ const Colors = {
   requested: '#4488ff',
   pending: '#22aaaa',
   confirmed: '#aaaaaa',
+  error: '#ff4444',
 };
 
 export default Colors;

net/web/src/context/useCardContext.hook.js

@@ -206,7 +206,6 @@ export function useCardContext() {
         }
         catch (err) {
           console.log(err);
-          window.alert("failed to connect to contact");
         }
       } 
      
@@ -360,9 +359,9 @@ export function useCardContext() {
       let token = card.data.cardProfile.guid + "." + card.data.cardDetail.token;
       return getContactChannelTopicAssetUrl(node, token, channelId, topicId, assetId);
     },
-    resync: (cardId) => {
+    resync: async (cardId) => {
       resync.current.push(cardId);
-      setCards(null);
+      await setCards(null);
     }
   }
 

net/web/src/session/cards/cardItem/CardItem.jsx

@@ -1,7 +1,11 @@
-import { CardItemWrapper, StatusConnected, StatusConnecting, StatusRequested, StatusPending, StatusConfirmed} from './CardItem.styled';
+import { CardItemWrapper, StatusError,
+        StatusConnected, StatusConnecting, 
+        StatusRequested, StatusPending, 
+        StatusConfirmed} from './CardItem.styled';
 import { useCardItem } from './useCardItem.hook';
 import { Logo } from 'logo/Logo';
 import { Tooltip } from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 
 export function CardItem({ item }) {
 
@@ -24,6 +28,13 @@ export function CardItem({ item }) {
         <div class="handle">{ handle() }</div>
       </div>
       <div class="markup">
+        { !state.resync && item.error && (
+          <Tooltip placement="left" title="sync error">
+            <StatusError onClick={actions.resync}>
+              <ExclamationCircleOutlined />
+            </StatusError>
+          </Tooltip>
+        )}
         { detail?.status === 'connected' && (
           <Tooltip placement="left" title="connected contact">
             <StatusConnected />

net/web/src/session/cards/cardItem/CardItem.styled.js

@@ -42,9 +42,19 @@ export const CardItemWrapper = styled.div`
     position: absolute;
     right: 0;
     margin-right: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
   }
 `;
 
+export const StatusError = styled.div`
+  color: ${Colors.error};
+  font-size: 14px;
+  padding-right: 8px;
+`
+
 export const StatusConnected = styled.div`
   background-color: ${Colors.connected};
   border-radius: 8px;

net/web/src/session/cards/cardItem/useCardItem.hook.js

@@ -5,6 +5,7 @@ export function useCardItem(item) {
 
   const [state, setState] = useState({
     logo: null,
+    resync: false,
   });
 
   const card = useContext(CardContext);
@@ -18,6 +19,13 @@ export function useCardItem(item) {
   }, [card]); 
 
   const actions = {
+    resync: async () => {
+      if (!state.resync) {
+        updateState({ resync: true });
+        await card.actions.resync(item.id);
+        updateState({ resync: false });
+      }
+    },
   };
 
   return { state, actions };