interface: fix circular dependencies

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

@@ -4,14 +4,11 @@ import { patp2dec } from 'urbit-ob';
 import f  from 'lodash/fp';
 import { Association, Contact, Patp } from '@urbit/api';
 import { enableMapSet } from 'immer';
-import useSettingsState from '../state/settings';
 /* eslint-disable max-lines */
 import anyAscii from 'any-ascii';
 import { sigil as sigiljs, stringRenderer } from '@tlon/sigil-js';
 import bigInt, { BigInteger } from 'big-integer';
-import { foregroundFromBackground } from '~/logic/lib/sigil';
 import { IconRef, Workspace } from '~/types';
-import useContactState from '../state/contact';
 
 enableMapSet();
 
@@ -462,13 +459,6 @@ export function pluralize(text: string, isPlural = false, vowel = false) {
   return isPlural ? `${text}s` : `${vowel ? 'an' : 'a'} ${text}`;
 }
 
-// Hide is an optional second parameter for when this function is used in class components
-export function useShowNickname(contact: Contact | null, hide?: boolean): boolean {
-  const hideState = useSettingsState(state => state.calm.hideNicknames);
-  const hideNicknames = typeof hide !== 'undefined' ? hide : hideState;
-  return Boolean(contact && contact.nickname && !hideNicknames);
-}
-
 interface useHoveringInterface {
   hovering: boolean;
   bind: {
@@ -513,21 +503,6 @@ export const svgDataURL = svg => 'data:image/svg+xml;base64,' + btoa(svg);
 
 export const svgBlobURL = svg => URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }));
 
-export const favicon = () => {
-  let background = '#ffffff';
-  const contacts = useContactState.getState().contacts;
-  if (Object.prototype.hasOwnProperty.call(contacts, `~${window.ship}`)) {
-    background = `#${uxToHex(contacts[`~${window.ship}`].color)}`;
-  }
-  const foreground = foregroundFromBackground(background);
-  const svg = sigiljs({
-    patp: window.ship,
-    renderer: stringRenderer,
-    size: 16,
-    colors: [background, foreground]
-  });
-  return svg;
-};
 
 export function binaryIndexOf(arr: BigInteger[], target: BigInteger): number | undefined {
   let leftBound = 0;

pkg/interface/src/logic/state/contact.ts

@@ -1,4 +1,4 @@
-import { Contact, deSig, Patp, Rolodex } from '@urbit/api';
+import { Contact, deSig, Patp, Rolodex, uxToHex } from '@urbit/api';
 import { useCallback } from 'react';
 import _ from 'lodash';
 import { reduce, reduceNacks } from '../reducers/contact-update';
@@ -7,6 +7,8 @@ import {
   createSubscription,
   reduceStateN
 } from './base';
+import { sigil as sigiljs, stringRenderer } from '@tlon/sigil-js';
+import { foregroundFromBackground } from '~/logic/lib/sigil';
 
 export interface ContactState {
   contacts: Rolodex;
@@ -51,4 +53,21 @@ export function useOurContact() {
   return useContact(`~${window.ship}`);
 }
 
+export const favicon = () => {
+  let background = '#ffffff';
+  const contacts = useContactState.getState().contacts;
+  if (Object.prototype.hasOwnProperty.call(contacts, `~${window.ship}`)) {
+    background = `#${uxToHex(contacts[`~${window.ship}`].color)}`;
+  }
+  const foreground = foregroundFromBackground(background);
+  const svg = sigiljs({
+    patp: window.ship,
+    renderer: stringRenderer,
+    size: 16,
+    colors: [background, foreground]
+  });
+  return svg;
+};
+
+
 export default useContactState;

pkg/interface/src/logic/state/settings.ts

@@ -16,7 +16,7 @@ import {
 import { useCallback } from 'react';
 import { reduceUpdate } from '../reducers/settings-update';
 import airlock from '~/logic/api';
-import { getDeskSettings, Value } from '@urbit/api';
+import { Contact, getDeskSettings, Value } from '@urbit/api';
 import { putEntry } from '@urbit/api/settings';
 
 export interface ShortcutMapping {
@@ -139,4 +139,11 @@ export function useTheme() {
   return useSettingsState(selTheme);
 }
 
+// Hide is an optional second parameter for when this function is used in class components
+export function useShowNickname(contact: Contact | null, hide?: boolean): boolean {
+  const hideState = useSettingsState(state => state.calm.hideNicknames);
+  const hideNicknames = typeof hide !== 'undefined' ? hide : hideState;
+  return Boolean(contact && contact.nickname && !hideNicknames);
+}
+
 export default useSettingsState;

pkg/interface/src/views/apps/chat/components/ChatMessage.tsx

@@ -13,11 +13,11 @@ import { useIdlingState } from '~/logic/lib/idling';
 import { Sigil } from '~/logic/lib/sigil';
 import { useCopy } from '~/logic/lib/useCopy';
 import {
-  cite, daToUnix, useHovering, useShowNickname, uxToHex
+  cite, daToUnix, useHovering, uxToHex
 } from '~/logic/lib/util';
 import { useContact } from '~/logic/state/contact';
 import { useDark } from '~/logic/state/join';
-import useSettingsState, { selectCalmState } from '~/logic/state/settings';
+import useSettingsState, { selectCalmState, useShowNickname } from '~/logic/state/settings';
 import { Dropdown } from '~/views/components/Dropdown';
 import ProfileOverlay from '~/views/components/ProfileOverlay';
 import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';

pkg/interface/src/views/apps/publish/components/Notebook.tsx

@@ -2,9 +2,9 @@ import { Box, Button, Col, Row, Text } from '@tlon/indigo-react';
 import { Association, Graph, readGraph } from '@urbit/api';
 import React, { ReactElement, useCallback } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { useShowNickname } from '~/logic/lib/util';
 import useContactState from '~/logic/state/contact';
 import useGroupState from '~/logic/state/group';
+import { useShowNickname } from '~/logic/state/settings';
 import airlock from '~/logic/api';
 import { NotebookPosts } from './NotebookPosts';
 import useHarkState from '~/logic/state/hark';

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

@@ -3,10 +3,10 @@ import moment from 'moment';
 import React, { ReactElement, ReactNode } from 'react';
 import { Sigil } from '~/logic/lib/sigil';
 import { useCopy } from '~/logic/lib/useCopy';
-import { cite, useShowNickname, uxToHex } from '~/logic/lib/util';
+import { cite, uxToHex } from '~/logic/lib/util';
 import { useContact } from '~/logic/state/contact';
 import { useDark } from '~/logic/state/join';
-import useSettingsState, { selectCalmState } from '~/logic/state/settings';
+import useSettingsState, { selectCalmState, useShowNickname } from '~/logic/state/settings';
 import { PropFunc } from '~/types';
 import ProfileOverlay from './ProfileOverlay';
 import Timestamp from './Timestamp';

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

@@ -2,8 +2,9 @@ import { Text } from '@tlon/indigo-react';
 import { Contact, Content, Group } from '@urbit/api';
 import React from 'react';
 import { referenceToPermalink } from '~/logic/lib/permalinks';
-import { cite, deSig, useShowNickname } from '~/logic/lib/util';
+import { cite, deSig } from '~/logic/lib/util';
 import { useContact } from '~/logic/state/contact';
+import { useShowNickname } from '~/logic/state/settings';
 import { PropFunc } from '~/types';
 import ProfileOverlay from '~/views/components/ProfileOverlay';
 import RichText from '~/views/components/RichText';

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

@@ -19,9 +19,8 @@ import { getRelativePosition } from '~/logic/lib/relativePosition';
 import { Sigil } from '~/logic/lib/sigil';
 import { useCopy } from '~/logic/lib/useCopy';
 import { useOutsideClick } from '~/logic/lib/useOutsideClick';
-import { useShowNickname } from '~/logic/lib/util';
 import { useContact } from '~/logic/state/contact';
-import useSettingsState, { SettingsState } from '~/logic/state/settings';
+import useSettingsState, { SettingsState, useShowNickname } from '~/logic/state/settings';
 import { Portal } from './Portal';
 import { ProfileStatus } from './ProfileStatus';
 import RichText from './RichText';