Merge pull request #3951 from urbit/mp/landscape/share-contact

landscape: fix broken sharing of contact information, prefill with root identity

pkg/interface/src/logic/lib/util.ts

@@ -155,18 +155,14 @@ export function uxToHex(ux: string) {
   return value;
 }
 
-export const hexToUx: (hex: string) => string = f.flow(
-  f.split(""),
-  f.chunk(4),
-  f.map(
-    f.flow(
-      f.dropWhile((y) => y === 0),
-      f.join
-    )
-  ),
-  f.join("."),
-  (x) => `0x${x}`
-);
+export const hexToUx = (hex) => {
+  const ux = f.flow(
+    f.chunk(4),
+    f.map(x => _.dropWhile(x, y => y === 0).join('')),
+    f.join('.')
+  )(hex.split(''));
+  return `0x${ux}`;
+};
 
 export function writeText(str: string) {
   return new Promise<void>((resolve, reject) => {

pkg/interface/src/views/apps/profile/profile.tsx

@@ -112,12 +112,15 @@ export default function ProfileScreen(props: any) {
                 {view === "settings" && <Settings {...props} />}
 
                 {view === "identity" && (
+                  <>
+                  <Text display='block' gray px='3' pt='3'>Your identity provides the default information you can optionally share with groups in the group settings panel.</Text>
                   <ContactCard
                     contact={contact}
                     path="/~/default"
                     api={props.api}
                     s3={props.s3}
                   />
+                  </>
                 )}
               </Box>
             </Box>

pkg/interface/src/views/components/ColorInput.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { useField } from "formik";
-import styled from "styled-components";
 import {
   Col,
   Label,
@@ -22,7 +21,7 @@ export function ColorInput(props: ColorInputProps) {
   const { id, label, caption, disabled, ...rest } = props;
   const [{ value, onBlur }, meta, { setValue }] = useField(id);
 
-  const hex = value.replace('#', '').substr(2).replace(".", "");
+  const hex = value.replace('#', '').replace("0x","").replace(".", "");
   const padded = hex.padStart(6, "0");
 
   const onChange = (e: any) => {
@@ -36,7 +35,7 @@ export function ColorInput(props: ColorInputProps) {
     const result = hexToUx(newValue);
     setValue(result);
   };
-  
+
 
   return (
     <Box display="flex" flexDirection="column" {...rest}>

pkg/interface/src/views/landscape/components/ContactCard.tsx

@@ -24,6 +24,7 @@ interface ContactCardProps {
   path: string;
   api: GlobalApi;
   s3: S3State;
+  rootIdentity: Contact;
 }
 
 const formSchema = Yup.object({
@@ -63,13 +64,13 @@ const emptyContact = {
   nickname: '',
   email: '',
   phone: '',
-  website: '', 
+  website: '',
   notes: ''
 };
 
 export function ContactCard(props: ContactCardProps) {
   const us = `~${window.ship}`;
-  const { contact } = props;
+  const { contact, rootIdentity } = props;
   const onSubmit = async (values: Contact, actions: FormikHelpers<Contact>) => {
     try {
       if(!contact) {
@@ -112,7 +113,7 @@ export function ContactCard(props: ContactCardProps) {
     <Box p={4} height="100%" overflowY="auto">
       <Formik
         validationSchema={formSchema}
-        initialValues={contact || emptyContact}
+        initialValues={contact || rootIdentity || emptyContact}
         onSubmit={onSubmit}
       >
         <Form
@@ -141,7 +142,7 @@ export function ContactCard(props: ContactCardProps) {
           <Input id="website" label="Website" />
           <Input id="notes" label="Notes" />
           <AsyncButton primary loadingText="Updating..." border>
-            Save
+            {(contact) ? "Save" : "Share Contact"}
           </AsyncButton>
         </Form>
       </Formik>

pkg/interface/src/views/landscape/components/GroupsPane.tsx

@@ -39,6 +39,7 @@ export function GroupsPane(props: GroupsPaneProps) {
   const groupPath = getGroupFromWorkspace(workspace);
 
   const groupContacts = (groupPath && contacts[groupPath]) || undefined;
+  const rootIdentity = contacts?.["/~/default"]?.[window.ship];
   const groupAssociation =
     (groupPath && associations.contacts[groupPath]) || undefined;
   const group = (groupPath && groups[groupPath]) || undefined;
@@ -62,6 +63,7 @@ export function GroupsPane(props: GroupsPaneProps) {
      ( <>
         {groupPath && ( <PopoverRoutes
           contacts={groupContacts || {}}
+          rootIdentity={rootIdentity}
           association={groupAssociation!}
           group={group!}
           api={api}

pkg/interface/src/views/landscape/components/PopoverRoutes.tsx

@@ -3,7 +3,7 @@ import { Route, Switch, RouteComponentProps, Link } from "react-router-dom";
 import { Box, Row, Col, Icon, Text } from "@tlon/indigo-react";
 import { useOutsideClick } from "~/logic/lib/useOutsideClick";
 import { HoverBoxLink } from "~/views/components/HoverBox";
-import { Contacts } from "~/types/contact-update";
+import { Contacts, Contact } from "~/types/contact-update";
 import { Group } from "~/types/group-update";
 import { Association } from "~/types/metadata-update";
 import GlobalApi from "~/logic/api/global";
@@ -13,7 +13,6 @@ import { ContactCard } from "./ContactCard";
 import { GroupSettings } from "./GroupSettings/GroupSettings";
 import { Participants } from "./Participants";
 
-
 const SidebarItem = ({ selected, icon, text, to }) => {
   return (
     <HoverBoxLink
@@ -42,6 +41,7 @@ export function PopoverRoutes(
     hideAvatars: boolean;
     hideNicknames: boolean;
     notificationsGroupConfig: GroupNotificationsConfig;
+    rootIdentity: Contact;
   } & RouteComponentProps
 ) {
   const relativeUrl = (url: string) => `${props.baseUrl}/popover${url}`;
@@ -142,6 +142,7 @@ export function PopoverRoutes(
                     {view === "profile" && (
                       <ContactCard
                         contact={props.contacts[window.ship]}
+                        rootIdentity={props.rootIdentity}
                         api={props.api}
                         path={props.association["group-path"]}
                         s3={props.s3}