feat(ui): 🎉 edit & finish pairing contacts

src/components/contacts-list.js

@@ -4,30 +4,8 @@ import {
   restate,
   sortContactsByAlias,
   timeago,
+  getAvatar,
 } from '../helpers/utils.js'
-// import { updateAllFunds, } from '../helpers/wallet.js'
-
-function getAvatar(c) {
-  let initials = c.info?.name?.
-    split(' ').map(n => n[0]).join('') || ''
-
-  if (!initials) {
-    initials = (c.alias || c.info?.preferred_username)?.[0] || ''
-  }
-
-  let avStr = `<div class="avatar" style="`
-
-  if (c.info?.picture) {
-    avStr += `color:transparent;background-image:url(${c.info.picture});`
-  }
-
-  // Gravatar
-  // if (c.info.email) {
-  //   avStr += `color:transparent;background-image:url(${c.info.email});`
-  // }
-
-  return html`${avStr}">${initials}</div>`
-}
 
 let _handlers = []
 
@@ -79,8 +57,8 @@ const initialState = {
   `,
   item: c => {
     let paired = Object.keys(c?.outgoing || {}).length > 0
-    let created = c.created_at
-      ? timeago(Date.now() - (new Date(c.created_at)).getTime())
+    let created = c.createdAt
+      ? timeago(Date.now() - (new Date(c.createdAt)).getTime())
       : ''
     let finishPairing = !paired
       ? 'Finish pairing with contact'

src/helpers/utils.js

@@ -859,3 +859,25 @@ export function timeago(ms, locale = TIMEAGO_LOCALE_EN) {
 
   return locale.never;
 }
+
+export function getAvatar(c) {
+  let initials = c?.info?.name?.
+    split(' ').map(n => n[0]).join('') || ''
+
+  if (!initials) {
+    initials = (c?.alias || c?.info?.preferred_username)?.[0] || ''
+  }
+
+  let avStr = `<div class="avatar" style="`
+
+  if (c?.info?.picture) {
+    avStr += `color:transparent;background-image:url(${c.info.picture});`
+  }
+
+  // Gravatar
+  // if (c.info.email) {
+  //   avStr += `color:transparent;background-image:url(${c.info.email});`
+  // }
+
+  return `${avStr}">${initials}</div>`
+}

src/index.css

@@ -146,6 +146,28 @@ figure h4 {
 .ta-justify {
   text-align: justify;
 }
+.va-baseline {
+  vertical-align: baseline;
+}
+
+.fs-1 {
+  font-size: .25rem;
+}
+.fs-2 {
+  font-size: .5rem;
+}
+.fs-3 {
+  font-size: .75rem;
+}
+.fs-4 {
+  font-size: 1rem;
+}
+.fs-5 {
+  font-size: 1.25rem;
+}
+.fs-6 {
+  font-size: 1.5rem;
+}
 
 .px-0 {
   padding-left: 0;
@@ -218,6 +240,9 @@ figure h4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.no-brdr {
+  border: 1px solid transparent;
+}
 
 /* main > header + form,
 main > header + section {