adding translations to contact component

net/web/src/constants/Colors.js

@@ -21,6 +21,7 @@ export const Colors = {
 
   itemDivider: '#eeeeee',
 
+  unsaved: '#ffff00',  
   connected: '#44cc44',
   connecting: '#dd88ff',
   requested: '#4488ff',
@@ -66,6 +67,12 @@ export const LightTheme = {
   sectionBorder: '#bbbbbb',
   headerBorder: '#aaaaaa',
   drawerBorder: '#cccccc',
+  unsaved: '#ffff00',  
+  connected: '#44cc44',
+  connecting: '#dd88ff',
+  requested: '#4488ff',
+  pending: '#22aaaa',
+  confirmed: '#aaaaaa',
 };
 
 export const DarkTheme = {
@@ -96,5 +103,11 @@ export const DarkTheme = {
   sectionBorder: '#777777',
   headerBorder: '#aaaaaa',
   drawerBorder: '#444444',
+  unsaved: '#ffff00',  
+  connected: '#44cc44',
+  connecting: '#dd88ff',
+  requested: '#4488ff',
+  pending: '#22aaaa',
+  confirmed: '#aaaaaa',
 };
 

net/web/src/constants/Strings.js

@@ -22,7 +22,7 @@ export const en = {
   sealedTopic: 'Sealed Topic',
   start: 'Start',
 
-  communication: 'Communication for the decentralized web',
+  communication: 'Communication for the Decentralized Web',
   setupProfile: 'Setup your profile',
   connectPeople: 'Connect with people',
   startConversation: 'Start a conversation',
@@ -42,6 +42,7 @@ export const en = {
   application: 'Application',
   account: 'Account',
   name: 'Name',
+  node: 'Node',
   location: 'Location',
   description: 'Description',
   timeFormat: 'Time Format',
@@ -64,6 +65,7 @@ export const en = {
   confirmPassword: 'Confirm Password',
   deleteKey: 'Type \'delete\' to remove key',
   delete: 'delete',
+  remove: 'Delete',
   username: 'Username',
   updateProfile: 'Update Profile',
 
@@ -75,6 +77,22 @@ export const en = {
   connectingTip: 'Connection Requested',
   pendingTip: 'Connection Requested by Unknown Contact',
   confirmedTip: 'Disconnected Contact',
+  unsavedTip: 'Unknown Contact',
+
+  actions: 'Actions',
+  resync: 'Resync',
+  connect: 'Connect',
+  disconnect: 'Disconnect',
+  disconnectContact: 'Disconnect Contact',
+  deleteContact: 'Delete Contact',
+  saveContact: 'Save Contact',
+  saveAccept: 'Save and Accept Connection',
+  saveRequest: 'Save and Request Connection',
+  ignoreRequest: 'Ignore Request',
+  acceptConnection: 'Accept Connection',
+  requestConnection: 'Request Connection',
+  cancelRequest: 'Cancel Request',
+  resyncContact: 'Resync Contact',
 };
 
 export const fr = {
@@ -101,7 +119,7 @@ export const fr = {
   sealedTopic: 'Sujet Sécurisé',
   start: 'Commencer',
 
-  communication: 'Communication pour le web décentralisé',
+  communication: 'Communication pour le Web Décentralisé',
   setupProfile: 'Configurez votre profil',
   connectPeople: 'Connectez avec les gens',
   startConversation: 'Commencez une conversation',
@@ -121,6 +139,7 @@ export const fr = {
   application: 'Application',
   account: 'Compte',
   name: 'Nom',
+  node: 'Serveur',
   location: 'Emplacement',
   description: 'Description',
   timeFormat: 'Format de l\'heure',
@@ -143,16 +162,33 @@ export const fr = {
   confirmPassword: 'Confirmer le Mot de Passe',
   deleteKey: 'Tapez \'supprimer\' pour supprimer la clé',
   delete: 'supprimer',
+  remove: 'Supprimer',
   username: 'Nom d\'Utilisateur',
   updateProfile: 'Mettre à Jour le Profil',
 
-  syncError: 'Erreur de synchronisation',
+  syncError: 'Erreur de Synchronisation',
   callTip: 'Appeler le Contact',
-  messageTip: 'Envoyer un message au contact',
+  messageTip: 'Envoyer un Message au Contact',
-  connectedTip: 'Contact connecté',
+  connectedTip: 'Contact Connecté',
-  requestedTip: 'Demande de connexion envoyée par le contact',
+  requestedTip: 'Demande de Connexion Envoyée par le Contact',
-  connectingTip: 'Demande de connexion en cours',
+  connectingTip: 'Demande de Connexion en Cours',
-  pendingTip: 'Demande de connexion envoyée par un contact inconnu',
+  pendingTip: 'Demande de Connexion Envoyée par un Contact Inconnu',
-  confirmedTip: 'Contact déconnecté'
+  confirmedTip: 'Contact Déconnecté',
+  unsavedTip: 'Contact Inconnu',
+
+  actions: 'Actions',
+  resync: 'Resynchroniser',
+  connect: 'Connecter',
+  disconnect: 'Déconnecter',
+  disconnectContact: 'Déconnecter le Contact',
+  deleteContact: 'Supprimer le Contact',
+  saveContact: 'Enregistrer le Contact',
+  saveAccept: 'Enregistrer et Accepter la Connexion',
+  saveRequest: 'Enregistrer et Demander la Connexion',
+  ignoreRequest: 'Ignorer la Demande',
+  acceptConnection: 'Accepter la Connexion',
+  requestConnection: 'Demander une Connexion',
+  cancelRequest: 'Annuler la Demande',
+  resyncContact: 'Resynchroniser le Contact',
 };
 

net/web/src/session/contact/Contact.jsx

@@ -1,5 +1,5 @@
 import { Modal, Button, Tooltip } from 'antd';
-import { ContactWrapper } from './Contact.styled';
+import { StatusConnected, StatusRequested, StatusConnecting, StatusPending, StatusConfirmed, StatusUnsaved, ContactWrapper } from './Contact.styled';
 import { useContact } from './useContact.hook';
 import { Logo } from 'logo/Logo';
 import { SyncOutlined, UserAddOutlined, UserDeleteOutlined, UserSwitchOutlined, StopOutlined, DeleteOutlined, DatabaseOutlined, CloseOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons';
@@ -9,9 +9,6 @@ export function Contact({ close, guid, listing }) {
   const [ modal, modalContext ] = Modal.useModal();
   const { state, actions } = useContact(guid, listing, close);
 
-console.log(state.busy);
-
-
   const updateContact = async (action) => {
     try {
       await action();
@@ -54,7 +51,7 @@ console.log(state.busy);
                 <div className="data">{ state.name }</div>
               )}
               { !state.name && (
-                <div className="data notset">Name</div>
+                <div className="data notset">{ state.strings.name }</div>
               )}
             </div>
             { state.node && (
@@ -69,7 +66,7 @@ console.log(state.busy);
                 <div className="data">{ state.location }</div>
               )}
               { !state.location && (
-                <div className="data notset">Location</div>
+                <div className="data notset">{ state.strings.location }</div>
               )}
             </div>
             <div className="description">
@@ -78,91 +75,124 @@ console.log(state.busy);
                 <div className="data">{ state.description }</div>
               )}
               { !state.description && (
-                <div className="data notset">Description</div>
+                <div className="data notset">{ state.strings.description }</div>
               )}
             </div>
           </div>
         </div>
 
         <div className="actions">
-          <div className="label">Actions</div>
+          <div className="label">{ state.strings.actions }</div>
           <div className="controls">
             { state.status === 'connected' && (
-              <Tooltip placement="top" title="Disconnect Contact">
+              <Tooltip placement="top" title={state.strings.disconnectContact}>
-                <Button className="button" type="primary" loading={state.busy} icon={<UserDeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>Disconnect</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserDeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>{ state.strings.disconnect }</Button>
               </Tooltip>
             )}
             { state.status === 'connected' && (
-              <Tooltip placement="top" title="Delete Contact">
+              <Tooltip placement="top" title={state.strings.deleteContact}>
-                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnectRemove)}>Delete</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnectRemove)}>{ state.strings.remove }</Button>
               </Tooltip>
             )}
             { state.status === 'pending' && (
-              <Tooltip placement="top" title="Save Contact">
+              <Tooltip placement="top" title={state.strings.saveContact}>
-                <Button className="button" type="primary" loading={state.busy} icon={<UserAddOutlined />} size="medium"  onClick={() => updateContact(actions.confirmContact)}>Save</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserAddOutlined />} size="medium"  onClick={() => updateContact(actions.confirmContact)}>{ state.strings.save }</Button>
               </Tooltip>
             )}
             { state.status === 'pending' && (
-              <Tooltip placement="top" title="Save and Accept">
+              <Tooltip placement="top" title={state.strings.saveAccept}>
-                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.connect)}>Connect</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.connect)}>{ state.strings.connect }</Button>
               </Tooltip>
             )}
             { state.status === 'pending' && (
-              <Tooltip placement="top" title="Ignore Request">
+              <Tooltip placement="top" title={state.strings.ignoreRequest}>
-                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.remove)}>Cancel</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.remove)}>{ state.strings.cancel }</Button>
               </Tooltip>
             )}
-            { state.status === 'request received' && (
+            { state.status === 'requested' && (
-              <Tooltip placement="top" title="Accept Connection">
+              <Tooltip placement="top" title={state.strings.acceptConnection}>
-                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.saveConnect)}>Connect</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.saveConnect)}>{ state.strings.cancel }</Button>
               </Tooltip>
             )}
-            { state.status === 'request received' && (
+            { state.status === 'requested' && (
-              <Tooltip placement="top" title="Ignore Request">
+              <Tooltip placement="top" title={state.strings.ignoreRequest}>
-                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>Cancel</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>{ state.strings.cancel }</Button>
               </Tooltip>
             )}
-            { state.status === 'request sent' && (
+            { state.status === 'connecting' && (
               <Tooltip placement="top" title="Cancel Request">
-                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>Cancel</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<StopOutlined />} size="medium"  onClick={() => updateContact(actions.disconnect)}>{ state.strings.cancel }</Button>
               </Tooltip>
             )}
-            { state.status === 'request sent' && (
+            { state.status === 'connecting' && (
-              <Tooltip placement="top" title="Delete Contact">
+              <Tooltip placement="top" title={state.strings.deleteContact}>
-                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnectRemove)}>Delete</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.disconnectRemove)}>{ state.strings.remove }</Button>
               </Tooltip>
             )}
-            { state.status === 'saved' && (
+            { state.status === 'confirmed' && (
-              <Tooltip placement="top" title="Request Connection">
+              <Tooltip placement="top" title={state.strings.requestConnection}>
-                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.connect)}>Connect</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.connect)}>{ state.strings.connect }</Button>
               </Tooltip>
             )}
-            { state.status === 'saved' && (
+            { state.status === 'confirmed' && (
-              <Tooltip placement="top" title="Delete Contact">
+              <Tooltip placement="top" title={state.strings.deleteContact}>
-                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.remove)}>Delete</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<DeleteOutlined />} size="medium"  onClick={() => updateContact(actions.remove)}>{ state.strings.remove }</Button>
               </Tooltip>
             )}
             { state.status === 'unsaved' && (
-              <Tooltip placement="top" title="Save Contact">
+              <Tooltip placement="top" title={state.strings.saveContact}>
-                <Button className="button" type="primary" loading={state.busy} icon={<UserAddOutlined />} size="medium"  onClick={() => updateContact(actions.saveContact)}>Save</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserAddOutlined />} size="medium"  onClick={() => updateContact(actions.saveContact)}>{ state.strings.save }</Button>
               </Tooltip>
             )}
             { state.status === 'unsaved' && (
-              <Tooltip placement="top" title="Save and Request">
+              <Tooltip placement="top" title={state.strings.saveRequest}>
-                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.saveConnect)}>Connect</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<UserSwitchOutlined />} size="medium"  onClick={() => updateContact(actions.saveConnect)}>{ state.strings.connect }</Button>
               </Tooltip>
             )}
             { state.offsync && (
-              <Tooltip placement="top" title="Resync Contact">
+              <Tooltip placement="top" title={state.strings.resyncContact}>
-                <Button className="button" type="primary" loading={state.busy} icon={<SyncOutlined />} size="medium"  onClick={() => updateContact(actions.resync)}>Resync</Button>
+                <Button className="button" type="primary" loading={state.busy} icon={<SyncOutlined />} size="medium"  onClick={() => updateContact(actions.resync)}>{ state.strings.resync }</Button>
               </Tooltip>
             )}
           </div>
         </div>
 
+        { state.status === 'connected' && (
           <div className="footer">
-          <div className="status">Status: { state.status }</div>
+            <StatusConnected />
+            <div className="status">{state.strings.connectedTip}</div>
           </div>
+        )}
+        { state.status === 'requested' && (
+          <div className="footer">
+            <StatusRequested />
+            <div className="status">{state.strings.requestedTip}</div>
+          </div>
+        )}
+        { state.status === 'connecting' && (
+          <div className="footer">
+            <StatusConnecting />
+            <div className="status">{state.strings.connectingTip}</div>
+          </div>
+        )}
+        { state.status === 'pending' && (
+          <div className="footer">
+            <StatusPending />
+            <div className="status">{state.strings.pendingTip}</div>
+          </div>
+        )}
+        { state.status === 'confirmed' && (
+          <div className="footer">
+            <StatusConfirmed />
+            <div className="status">{state.strings.confirmedTip}</div>
+          </div>
+        )}
+        { state.status === 'unsaved' && (
+          <div className="footer">
+            <StatusUnsaved />
+            <div className="status">{state.strings.unsavedTip}</div>
+          </div>
+        )}
       </div>
     </ContactWrapper>
   );

net/web/src/session/contact/Contact.styled.js

@@ -208,6 +208,8 @@ export const ContactWrapper = styled.div`
     display: flex;
     flex-direction: row;
     gap: 16px;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
 
     .button {
       display: flex;
@@ -241,6 +243,51 @@ export const ContactWrapper = styled.div`
     justify-content: center;
     padding-bottom: 16px;
     color: ${props => props.theme.hintText};
+    align-items: center;
+    gap: 8px;
   }
 `
 
+export const StatusConnected = styled.div`
+  background-color: ${props => props.theme.connected};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusConnecting = styled.div`
+  background-color: ${props => props.theme.connecting};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusRequested = styled.div`
+  background-color: ${props => props.theme.requested};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusPending = styled.div`
+  background-color: ${props => props.theme.pending};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusConfirmed = styled.div`
+  background-color: ${props => props.theme.confirmed};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+export const StatusUnsaved = styled.div`
+  background-color: ${props => props.theme.unsaved};
+  border-radius: 8px;
+  width: 8px;
+  height: 8px;
+`;
+
+

net/web/src/session/contact/useContact.hook.js

@@ -30,26 +30,13 @@ export function useContact(guid, listing, close) {
     setState((s) => ({ ...s, ...value }));
   }
 
-  const statusMap = (status) => {
-    if (status === 'confirmed') {
-      return 'saved';
-    }
-    if (status === 'requested') {
-      return 'request received';
-    }
-    if (status === 'connecting') {
-      return 'request sent';
-    }
-    return status;
-  }
-
   useEffect(() => {
     const contact = getCardByGuid(card.state.cards, guid);
     if (contact) {
       const profile = contact?.data?.cardProfile;
       const detail = contact?.data?.cardDetail;
       const { imageSet, name, location, description, handle, node } = profile;      
-      const status = statusMap(detail.status);
+      const status = detail.status;
       const cardId = contact.id;
       const offsync = contact.offsync;
       const logo = imageSet ? card.actions.getCardImageUrl(cardId) : null;