From 0f0a93c79c8e125b7bc516f41441c0cbde017215 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@gmail.com>
Date: Tue, 17 Nov 2020 23:09:39 -0500
Subject: [PATCH 1/2] landscape: fix initial contact color input

The rewrite of hexToUx in TypeScript returned a function script instead
of the expected string.

The previous write is put in its place, and instead of assuming "0x"
is always in the color input's initial value, we selectively remove it,
alleviating another bug where we would display a different color than we
submitted due to substringing the first 2 characters
of a value without "0x".

Fixes #3875.
---
 pkg/interface/src/logic/lib/util.ts           | 20 ++++++++-----------
 .../src/views/components/ColorInput.tsx       |  5 ++---
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/pkg/interface/src/logic/lib/util.ts b/pkg/interface/src/logic/lib/util.ts
index 53cd38c30..1ebe6e48b 100644
--- a/pkg/interface/src/logic/lib/util.ts
+++ b/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) => {
diff --git a/pkg/interface/src/views/components/ColorInput.tsx b/pkg/interface/src/views/components/ColorInput.tsx
index d2a445903..0ee279db1 100644
--- a/pkg/interface/src/views/components/ColorInput.tsx
+++ b/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}>

From f98509b8071858c9553961db275393bada6279e3 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@gmail.com>
Date: Tue, 17 Nov 2020 23:37:02 -0500
Subject: [PATCH 2/2] landscape: autofill contact with root identity first

---
 pkg/interface/src/views/apps/profile/profile.tsx         | 3 +++
 .../src/views/landscape/components/ContactCard.tsx       | 9 +++++----
 .../src/views/landscape/components/GroupsPane.tsx        | 2 ++
 .../src/views/landscape/components/PopoverRoutes.tsx     | 5 +++--
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/pkg/interface/src/views/apps/profile/profile.tsx b/pkg/interface/src/views/apps/profile/profile.tsx
index 4f7d879d2..7bcae36c7 100644
--- a/pkg/interface/src/views/apps/profile/profile.tsx
+++ b/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>
diff --git a/pkg/interface/src/views/landscape/components/ContactCard.tsx b/pkg/interface/src/views/landscape/components/ContactCard.tsx
index 7fd34c789..e167ea8a3 100644
--- a/pkg/interface/src/views/landscape/components/ContactCard.tsx
+++ b/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>
diff --git a/pkg/interface/src/views/landscape/components/GroupsPane.tsx b/pkg/interface/src/views/landscape/components/GroupsPane.tsx
index 9c65d10a2..2a47719af 100644
--- a/pkg/interface/src/views/landscape/components/GroupsPane.tsx
+++ b/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}
diff --git a/pkg/interface/src/views/landscape/components/PopoverRoutes.tsx b/pkg/interface/src/views/landscape/components/PopoverRoutes.tsx
index f04da00d6..9c5048730 100644
--- a/pkg/interface/src/views/landscape/components/PopoverRoutes.tsx
+++ b/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}