From 1a3bbe4ec93f82cc6e4d7071c1363e488ba3075a Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Wed, 5 May 2021 21:20:34 -0700
Subject: [PATCH 1/3] interface: cleaning up typescript errors

---
 pkg/interface/src/logic/api/graph.ts          |  5 +-
 pkg/interface/src/logic/lib/hark.ts           |  3 +-
 pkg/interface/src/logic/lib/permalinks.ts     |  5 +-
 pkg/interface/src/logic/lib/publish.ts        |  4 +-
 pkg/interface/src/logic/lib/useModal.tsx      | 10 +--
 .../src/logic/lib/{util.ts => util.tsx}       |  9 ++-
 pkg/interface/src/logic/lib/withState.tsx     | 12 +--
 .../src/logic/reducers/graph-update.ts        |  7 +-
 .../src/logic/reducers/hark-update.ts         | 12 ++-
 pkg/interface/src/logic/state/base.ts         |  8 +-
 .../views/apps/chat/components/ChatEditor.tsx | 20 +++--
 .../views/apps/chat/components/ChatInput.tsx  |  2 +-
 .../apps/chat/components/ChatMessage.tsx      | 76 +++++++++----------
 .../views/apps/chat/components/ChatPane.tsx   |  6 +-
 .../views/apps/chat/components/ChatWindow.tsx | 16 ++--
 .../apps/chat/components/UnreadNotice.tsx     | 10 +--
 pkg/interface/src/views/apps/graph/App.tsx    |  5 +-
 pkg/interface/src/views/apps/launch/App.tsx   | 32 ++++----
 .../views/apps/launch/components/Groups.tsx   |  8 +-
 .../views/apps/launch/components/tiles.tsx    |  6 +-
 .../apps/launch/components/tiles/basic.tsx    |  2 +-
 .../apps/launch/components/tiles/clock.tsx    | 37 ++++++++-
 .../apps/launch/components/tiles/custom.tsx   |  2 +-
 .../apps/launch/components/tiles/tile.tsx     | 17 ++++-
 .../apps/launch/components/tiles/weather.tsx  | 53 +++++++------
 .../src/views/apps/links/LinkWindow.tsx       | 13 +++-
 .../views/apps/links/components/LinkItem.tsx  | 25 +++---
 .../src/views/apps/notifications/graph.tsx    | 33 +++-----
 .../src/views/apps/notifications/group.tsx    |  3 +-
 .../src/views/apps/notifications/header.tsx   | 12 +--
 .../src/views/apps/notifications/inbox.tsx    | 16 ++--
 .../src/views/apps/notifications/joining.tsx  |  8 +-
 .../src/views/apps/notifications/metadata.tsx | 12 +--
 .../views/apps/notifications/notification.tsx | 10 +--
 .../apps/notifications/notifications.tsx      | 12 +--
 .../views/apps/permalinks/TranscludedNode.tsx | 42 +++++-----
 .../src/views/apps/permalinks/app.tsx         |  4 +-
 .../src/views/apps/permalinks/embed.tsx       | 22 +++---
 .../src/views/apps/permalinks/graphIndex.tsx  |  4 +-
 .../apps/profile/components/EditProfile.tsx   | 22 +++---
 .../views/apps/profile/components/Profile.tsx | 24 +++---
 .../apps/profile/components/ViewProfile.tsx   |  6 +-
 .../src/views/apps/profile/profile.tsx        |  2 +-
 .../apps/publish/components/EditPost.tsx      |  5 +-
 .../publish/components/MarkdownEditor.tsx     |  9 +--
 .../apps/publish/components/MarkdownField.tsx |  2 +-
 .../views/apps/publish/components/Note.tsx    | 13 ++--
 .../publish/components/NoteNavigation.tsx     |  6 +-
 .../apps/publish/components/NotePreview.tsx   | 12 +--
 .../apps/publish/components/NoteRoutes.tsx    |  3 +-
 .../apps/publish/components/Notebook.tsx      |  4 +-
 .../views/apps/publish/components/Writers.tsx | 10 +--
 .../settings/components/lib/BackButton.tsx    |  2 +-
 .../components/lib/BackgroundPicker.tsx       | 14 ++--
 .../settings/components/lib/BucketList.tsx    | 16 ++--
 .../apps/settings/components/lib/CalmPref.tsx |  8 +-
 .../apps/settings/components/lib/Debug.tsx    |  8 +-
 .../settings/components/lib/DisplayForm.tsx   | 10 +--
 .../components/lib/GroupChannelPicker.tsx     | 16 ++--
 .../settings/components/lib/LeapSettings.tsx  | 16 ++--
 .../components/lib/NotificationPref.tsx       | 14 ++--
 .../apps/settings/components/lib/S3Form.tsx   | 18 ++---
 .../apps/settings/components/lib/Security.tsx | 16 ++--
 .../apps/settings/components/settings.tsx     | 14 ++--
 .../src/views/apps/settings/settings.tsx      |  6 +-
 pkg/interface/src/views/apps/term/api.tsx     |  5 +-
 pkg/interface/src/views/apps/term/app.tsx     | 15 ++--
 .../views/apps/term/components/history.tsx    |  4 +-
 .../src/views/apps/term/components/input.tsx  | 12 +--
 .../src/views/apps/term/components/line.tsx   |  2 +-
 pkg/interface/src/views/apps/term/store.tsx   |  4 +
 .../src/views/apps/term/subscription.tsx      |  8 +-
 pkg/interface/src/views/components/Author.tsx |  5 +-
 .../src/views/components/ChipInput.tsx        | 40 +++++-----
 .../src/views/components/ColorInput.tsx       | 14 ++--
 .../src/views/components/CommentItem.tsx      | 17 +++--
 .../src/views/components/Comments.tsx         |  4 +-
 .../src/views/components/Dropdown.tsx         |  6 +-
 .../src/views/components/DropdownSearch.tsx   | 18 ++---
 pkg/interface/src/views/components/Error.tsx  |  2 +-
 .../src/views/components/FormGroup.tsx        | 10 +--
 .../src/views/components/FormSubmit.tsx       |  4 +-
 .../src/views/components/GroupLink.tsx        | 11 +--
 .../src/views/components/GroupSearch.tsx      | 22 +++---
 .../src/views/components/IconRadio.tsx        | 14 ++--
 .../src/views/components/ImageInput.tsx       |  4 +-
 .../src/views/components/Invite/Group.tsx     | 21 +++--
 .../components/Invite/InviteSkeleton.tsx      |  6 +-
 .../views/components/Invite/JoinSkeleton.tsx  |  2 +-
 .../src/views/components/Loading.tsx          |  2 +-
 .../src/views/components/MentionText.tsx      |  2 +-
 .../src/views/components/OverlaySigil.tsx     | 19 +++--
 .../src/views/components/ProfileOverlay.tsx   | 53 +++++++------
 .../src/views/components/ReconnectButton.tsx  |  4 +-
 .../src/views/components/RemoteContent.tsx    | 13 ++--
 .../src/views/components/RichText.tsx         | 21 ++++-
 .../src/views/components/ShipSearch.tsx       | 20 ++---
 .../src/views/components/ShuffleFields.tsx    | 12 +--
 .../src/views/components/Spinner.tsx          |  4 +-
 .../views/components/StatelessAsyncToggle.tsx |  2 +-
 .../src/views/components/StatusBar.tsx        | 20 ++---
 .../src/views/components/SubmitDragger.tsx    | 10 +--
 .../src/views/components/UnjoinedResource.tsx | 12 +--
 .../src/views/components/VirtualScroller.tsx  | 12 +--
 .../src/views/components/leap/Omnibox.tsx     | 16 ++--
 .../views/components/leap/OmniboxInput.tsx    |  6 +-
 .../views/components/leap/OmniboxResult.tsx   | 24 +++---
 .../ChannelPermissions.tsx                    | 22 +++---
 .../ChannelPopoverRoutes/Details.tsx          | 12 +--
 .../ChannelPopoverRoutes/Notifications.tsx    |  6 +-
 .../ChannelPopoverRoutes/Sidebar.tsx          | 12 +--
 .../components/ChannelPopoverRoutes/index.tsx | 38 +++++-----
 .../components/ChannelWritePerms.tsx          |  6 +-
 .../landscape/components/DeleteGroup.tsx      | 12 +--
 .../components/Graph/GraphContent.tsx         | 76 ++++++++-----------
 .../components/Graph/content/code.js          | 18 ++---
 .../components/Graph/content/text.js          | 24 +++---
 .../components/GroupSettings/Admin.tsx        | 12 +--
 .../components/GroupSettings/Channels.tsx     | 16 ++--
 .../components/GroupSettings/GroupFeed.tsx    |  8 +-
 .../GroupSettings/GroupSettings.tsx           |  6 +-
 .../components/GroupSettings/Personal.tsx     | 12 +--
 .../landscape/components/GroupSummary.tsx     | 14 ++--
 .../landscape/components/GroupSwitcher.tsx    | 22 +++---
 .../landscape/components/GroupifyForm.tsx     |  2 +-
 .../components/Home/AddFeedBanner.tsx         |  6 +-
 .../components/Home/EmptyGroupHome.tsx        |  2 +-
 .../components/Home/EnableGroupFeed.tsx       | 10 +--
 .../components/Home/GroupFeedHeader.tsx       | 16 ++--
 .../landscape/components/Home/GroupHome.tsx   |  8 +-
 .../components/Home/Post/GroupFeedPerms.tsx   |  6 +-
 .../components/Home/Post/PostFeed.tsx         | 24 +++++-
 .../components/Home/Post/PostInput.tsx        | 16 ++--
 .../Home/Post/PostItem/PostContent.tsx        |  8 +-
 .../Home/Post/PostItem/PostHeader.tsx         |  6 +-
 .../Home/Post/PostItem/PostItem.tsx           | 65 ++++++++++------
 .../components/Home/Post/PostReplies.tsx      | 15 ++--
 .../components/Home/Post/PostTimeline.tsx     | 48 +++++++-----
 .../landscape/components/InvitePopover.tsx    |  8 +-
 .../views/landscape/components/JoinGroup.tsx  | 32 ++++----
 .../landscape/components/MessageInvite.tsx    | 17 +++--
 .../landscape/components/MetadataIcon.tsx     |  2 +-
 .../views/landscape/components/NewChannel.tsx | 27 +++----
 .../views/landscape/components/NewGroup.tsx   | 11 +--
 .../landscape/components/Participants.tsx     | 34 ++++-----
 .../landscape/components/PopoverRoutes.tsx    |  8 +-
 .../landscape/components/ResourceSkeleton.tsx | 24 +++---
 .../landscape/components/Sidebar/Sidebar.tsx  |  4 +-
 .../components/Sidebar/SidebarItem.tsx        |  4 +-
 .../components/Sidebar/SidebarListHeader.tsx  | 14 ++--
 .../landscape/components/SidebarItem.tsx      |  6 +-
 .../landscape/components/TutorialModal.tsx    | 34 ++++-----
 pkg/npm/api/hark/types.ts                     |  4 +-
 pkg/npm/api/metadata/types.ts                 |  6 +-
 154 files changed, 1151 insertions(+), 993 deletions(-)
 rename pkg/interface/src/logic/lib/{util.ts => util.tsx} (97%)

diff --git a/pkg/interface/src/logic/api/graph.ts b/pkg/interface/src/logic/api/graph.ts
index 95ca69ac2f..12fffce3a7 100644
--- a/pkg/interface/src/logic/api/graph.ts
+++ b/pkg/interface/src/logic/api/graph.ts
@@ -1,4 +1,5 @@
 import { Content, Enc, GraphNode, GroupPolicy, Path, Patp, Post, Resource } from '@urbit/api';
+import BigIntOrderedMap from '@urbit/api/lib/BigIntOrderedMap';
 import _ from 'lodash';
 import { decToUd, deSig, resourceAsPath, unixToDa } from '~/logic/lib/util';
 import { makeResource, resourceFromPath } from '../lib/group';
@@ -9,7 +10,7 @@ export const createBlankNodeWithChildPost = (
   parentIndex = '',
   childIndex = '',
   contents: Content[]
-) => {
+): GraphNode => {
   const date = unixToDa(Date.now()).toString();
   const nodeIndex = parentIndex + '/' + date;
 
@@ -35,7 +36,7 @@ export const createBlankNodeWithChildPost = (
       hash: null,
       signatures: []
     },
-    children: childGraph
+    children: childGraph as BigIntOrderedMap<GraphNode>
   };
 };
 
diff --git a/pkg/interface/src/logic/lib/hark.ts b/pkg/interface/src/logic/lib/hark.ts
index f410e88d31..a5fe5883ea 100644
--- a/pkg/interface/src/logic/lib/hark.ts
+++ b/pkg/interface/src/logic/lib/hark.ts
@@ -1,5 +1,6 @@
 import { IndexedNotification, NotificationGraphConfig, Unreads } from '@urbit/api';
 import bigInt, { BigInteger } from 'big-integer';
+import _ from 'lodash';
 import f from 'lodash/fp';
 
 export function getLastSeen(
@@ -31,7 +32,7 @@ export function getNotificationCount(
 ): number {
   const unread = unreads.graph?.[path] || {};
   return Object.keys(unread)
-    .map(index => unread[index]?.notifications?.length || 0)
+    .map(index => _.get(unread[index], 'notifications.length', 0))
     .reduce(f.add, 0);
 }
 
diff --git a/pkg/interface/src/logic/lib/permalinks.ts b/pkg/interface/src/logic/lib/permalinks.ts
index c6e0905495..d225dc317b 100644
--- a/pkg/interface/src/logic/lib/permalinks.ts
+++ b/pkg/interface/src/logic/lib/permalinks.ts
@@ -20,12 +20,13 @@ function getPermalinkForAssociatedGroup(group: string) {
 
 type Permalink = GraphPermalink | GroupPermalink;
 
-interface GroupPermalink {
+export interface GroupPermalink {
   type: 'group';
   group: string;
   link: string;
 }
-interface GraphPermalink {
+
+export interface GraphPermalink {
   type: 'graph';
   link: string;
   graph: string;
diff --git a/pkg/interface/src/logic/lib/publish.ts b/pkg/interface/src/logic/lib/publish.ts
index 487fcdfd3f..c6478bbd7a 100644
--- a/pkg/interface/src/logic/lib/publish.ts
+++ b/pkg/interface/src/logic/lib/publish.ts
@@ -1,4 +1,4 @@
-import { GraphNode, Post, TextContent } from '@urbit/api';
+import { Content, GraphNode, Post } from '@urbit/api';
 import BigIntOrderedMap from '@urbit/api/lib/BigIntOrderedMap';
 import bigInt, { BigInteger } from 'big-integer';
 import { buntPost } from '~/logic/lib/post';
@@ -118,7 +118,7 @@ export function getComments(node: GraphNode): GraphNode {
   return comments;
 }
 
-export function getSnippet(body: any) {
+export function getSnippet(body: string | Content[]) {
   const firstContent = Object.values(body[0])[0];
   const newlineIdx = firstContent.indexOf('\n', 2);
   const end = newlineIdx > -1 ? newlineIdx : firstContent.length;
diff --git a/pkg/interface/src/logic/lib/useModal.tsx b/pkg/interface/src/logic/lib/useModal.tsx
index 95adb05706..9edbf011ab 100644
--- a/pkg/interface/src/logic/lib/useModal.tsx
+++ b/pkg/interface/src/logic/lib/useModal.tsx
@@ -1,9 +1,9 @@
 import { Box } from '@tlon/indigo-react';
 import React, {
-  ReactNode,
-  useCallback,
-  useMemo,
-  useRef, useState
+    ReactNode,
+    useCallback,
+    useMemo,
+    useRef, useState
 } from 'react';
 import { PropFunc } from '~/types';
 import { ModalOverlay } from '~/views/components/ModalOverlay';
@@ -57,7 +57,7 @@ export function useModal(props: UseModalProps & PropFunc<typeof Box>): UseModalR
           display="flex"
           alignItems="stretch"
           flexDirection="column"
-          spacing="2"
+          spacing={2}
           dismiss={dismiss}
           {...rest}
         >
diff --git a/pkg/interface/src/logic/lib/util.ts b/pkg/interface/src/logic/lib/util.tsx
similarity index 97%
rename from pkg/interface/src/logic/lib/util.ts
rename to pkg/interface/src/logic/lib/util.tsx
index 2b20c7047e..9d5911c4b4 100644
--- a/pkg/interface/src/logic/lib/util.ts
+++ b/pkg/interface/src/logic/lib/util.tsx
@@ -5,7 +5,7 @@ import bigInt, { BigInteger } from 'big-integer';
 import { enableMapSet } from 'immer';
 import _ from 'lodash';
 import f from 'lodash/fp';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { IconRef } from '~/types';
 import useSettingsState from '../state/settings';
 
@@ -423,6 +423,13 @@ export const useHovering = (): useHoveringInterface => {
   return useMemo(() => ({ hovering, bind }), [hovering, bind]);
 };
 
+export function withHovering<T>(Component: React.ComponentType<T>) {
+  const { hovering, bind } = useHovering();
+  return (props: T) => (
+    <Component hovering={hovering} {...bind} {...props} />
+  )
+}
+
 const DM_REGEX = /ship\/~([a-z]|-)*\/dm--/;
 export function getItemTitle(association: Association): string {
   if (DM_REGEX.test(association.resource)) {
diff --git a/pkg/interface/src/logic/lib/withState.tsx b/pkg/interface/src/logic/lib/withState.tsx
index 1ccd661468..80fdce4c15 100644
--- a/pkg/interface/src/logic/lib/withState.tsx
+++ b/pkg/interface/src/logic/lib/withState.tsx
@@ -19,12 +19,14 @@ const withStateo = <
   });
 };
 
-const withState = <
-  StateType extends BaseState<StateType>,
-  stateKey extends keyof StateType
-  >(
+interface StatePicker extends Array<any> {
+  0: UseStore<any>;
+  1?: string[];
+}
+
+const withState = (
     Component: any,
-    stores: ([UseStore<StateType>, stateKey[]])[]
+    stores: StatePicker[]
 ) => {
   return React.forwardRef((props, ref) => {
     const stateProps: unknown = {};
diff --git a/pkg/interface/src/logic/reducers/graph-update.ts b/pkg/interface/src/logic/reducers/graph-update.ts
index 1bb7632787..b049119131 100644
--- a/pkg/interface/src/logic/reducers/graph-update.ts
+++ b/pkg/interface/src/logic/reducers/graph-update.ts
@@ -1,3 +1,4 @@
+import { GraphNode } from '@urbit/api';
 import BigIntOrderedMap from '@urbit/api/lib/BigIntOrderedMap';
 import bigInt, { BigInteger } from 'big-integer';
 import produce from 'immer';
@@ -52,14 +53,14 @@ const keys = (json, state: GraphState): GraphState => {
 const processNode = (node) => {
   //  is empty
   if (!node.children) {
-    return produce(node, (draft) => {
+    return produce<GraphNode>(node, (draft: GraphNode) => {
       draft.children = new BigIntOrderedMap();
     });
   }
 
   //  is graph
-  return produce(node, (draft) => {
-    draft.children = new BigIntOrderedMap()
+  return produce<GraphNode>(node, (draft: GraphNode) => {
+    draft.children = new BigIntOrderedMap<GraphNode>()
       .gas(_.map(draft.children, (item, idx) =>
         [bigInt(idx), processNode(item)] as [BigInteger, any]
       ));
diff --git a/pkg/interface/src/logic/reducers/hark-update.ts b/pkg/interface/src/logic/reducers/hark-update.ts
index f40b9f2854..50978b4e3a 100644
--- a/pkg/interface/src/logic/reducers/hark-update.ts
+++ b/pkg/interface/src/logic/reducers/hark-update.ts
@@ -64,11 +64,19 @@ function calculateCount(json: any, state: HarkState) {
   let count = 0;
   _.forEach(state.unreads.graph, (graphs) => {
     _.forEach(graphs, (graph) => {
-      count += (graph?.notifications || []).length;
+      if (typeof graph?.notifications === 'object') {
+        count += graph?.notifications.length;
+      } else {
+        count += 0;
+      }
     });
   });
   _.forEach(state.unreads.group, (group) => {
-    count += (group?.notifications || []).length;
+    if (typeof group?.notifications === 'object') {
+      count += group?.notifications.length;
+    } else {
+      count += 0;
+    }
   });
   state.notificationsCount = count;
   return state;
diff --git a/pkg/interface/src/logic/state/base.ts b/pkg/interface/src/logic/state/base.ts
index 4286d2dcd1..c987df77a7 100644
--- a/pkg/interface/src/logic/state/base.ts
+++ b/pkg/interface/src/logic/state/base.ts
@@ -44,13 +44,13 @@ export interface BaseState<StateType> extends State {
   set: (fn: (state: StateType) => void) => void;
 }
 
-export const createState = <T extends {}>(
+export const createState = <T extends BaseState<T>>(
   name: string,
-  properties: T,
+  properties: { [K in keyof Omit<T, 'set'>]: T[K] },
   blacklist: string[] = []
-): UseStore<T & BaseState<T>> => create(persist((set, get) => ({
+): UseStore<T> => create(persist((set, get) => ({
   set: fn => stateSetter(fn, set),
-  ...properties
+  ...properties as any
 }), {
   blacklist,
   name: stateStorageKey(name),
diff --git a/pkg/interface/src/views/apps/chat/components/ChatEditor.tsx b/pkg/interface/src/views/apps/chat/components/ChatEditor.tsx
index 3a805fc439..2f7a0b99d6 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatEditor.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatEditor.tsx
@@ -108,8 +108,18 @@ interface ChatEditorState {
   message: string;
 }
 
+interface CodeMirrorShim {
+  setValue: (string) => void;
+  setOption: (option: string, property: any) => void;
+  focus: () => void;
+  execCommand: (string) => void;
+  getValue: () => string;
+  getInputField: () => HTMLInputElement;
+  element: HTMLElement;
+}
+
 export default class ChatEditor extends Component<ChatEditorProps, ChatEditorState> {
-  editor: ProxyHandler<unknown> | null;
+  editor: CodeMirrorShim;
   constructor(props: ChatEditorProps) {
     super(props);
 
@@ -222,7 +232,7 @@ export default class ChatEditor extends Component<ChatEditorProps, ChatEditorSta
       <Row
         backgroundColor='white'
         alignItems='center'
-        flexGrow='1'
+        flexGrow={1}
         height='100%'
         paddingTop={MOBILE_BROWSER_REGEX.test(navigator.userAgent) ? '16px' : '0'}
         paddingBottom={MOBILE_BROWSER_REGEX.test(navigator.userAgent) ? '16px' : '0'}
@@ -235,7 +245,7 @@ export default class ChatEditor extends Component<ChatEditorProps, ChatEditorSta
         {MOBILE_BROWSER_REGEX.test(navigator.userAgent)
           ? <MobileBox
               data-value={this.state.message}
-              fontSize="1"
+              fontSize={1}
               lineHeight="tall"
               onClick={(event) => {
                 if (this.editor) {
@@ -245,7 +255,7 @@ export default class ChatEditor extends Component<ChatEditorProps, ChatEditorSta
             >
             <BaseTextArea
               fontFamily={inCodeMode ? 'Source Code Pro' : 'Inter'}
-              fontSize="1"
+              fontSize={1}
               lineHeight="tall"
               rows={1}
               style={{ width: '100%', background: 'transparent', color: 'currentColor' }}
@@ -254,7 +264,7 @@ export default class ChatEditor extends Component<ChatEditorProps, ChatEditorSta
                 this.messageChange(null, null, event.target.value)
               }
               onKeyDown={event =>
-                this.messageChange(null, null, event.target.value)
+                this.messageChange(null, null, (event.target as any).value)
               }
               ref={(input) => {
                 if (!input)
diff --git a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
index 2f443fec2b..5d0524ed43 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx
@@ -29,7 +29,7 @@ interface ChatInputState {
   currentInput: string;
 }
 
-class ChatInput extends Component<ChatInputProps, ChatInputState> {
+export class ChatInput extends Component<ChatInputProps, ChatInputState> {
   private chatEditor: React.RefObject<ChatEditor>;
 
   constructor(props) {
diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index e41212abfd..74e53d2470 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable max-lines-per-function */
 import { BaseImage, Box, Col, Icon, Row, Rule, Text } from '@tlon/indigo-react';
-import { Contact, Post } from '@urbit/api';
+import { Contact, MentionContent, Post } from '@urbit/api';
 import bigInt from 'big-integer';
 import moment from 'moment';
 import React, {
+  Ref,
   useEffect,
   useMemo, useState
 } from 'react';
@@ -22,13 +23,13 @@ import useLocalState from '~/logic/state/local';
 import useSettingsState, { selectCalmState } from '~/logic/state/settings';
 import { Dropdown } from '~/views/components/Dropdown';
 import ProfileOverlay from '~/views/components/ProfileOverlay';
-import { GraphContent} from  '~/views/landscape/components/Graph/GraphContent';
+import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 
 
 export const DATESTAMP_FORMAT = '[~]YYYY.M.D';
 
 interface DayBreakProps {
-  when: string;
+  when: string | number;
   shimTop?: boolean;
 }
 
@@ -57,7 +58,7 @@ export const DayBreak = ({ when, shimTop = false }: DayBreakProps) => (
 );
 
 export const UnreadMarker = React.forwardRef(
-  ({ dismissUnread }: any, ref) => {
+  ({ dismissUnread }: any, ref: Ref<HTMLDivElement>) => {
     const [visible, setVisible] = useState(false);
     const idling = useIdlingState();
 
@@ -115,7 +116,7 @@ const MessageActionItem = (props) => {
   );
 };
 
-const MessageActions = ({ api, onReply, onDelete, association, msg, isAdmin, permalink }) => {
+const MessageActions = ({ onReply, onDelete, msg, isAdmin, permalink }) => {
   const isOwn = () => msg.author === window.ship;
   const { doCopy, copyDisplay } = useCopy(permalink, 'Copy Message Link');
 
@@ -189,7 +190,7 @@ const MessageWrapper = (props) => {
   const showHover = (props.transcluded === 0) && hovering && !props.hideHover;
   return (
     <Box
-      py='1'
+      py={1}
       backgroundColor={props.highlighted
         ? showHover ? 'lightBlue' : 'washedBlue'
         : showHover ? 'washedGray' : 'transparent'
@@ -207,14 +208,14 @@ interface ChatMessageProps {
   msg: Post;
   previousMsg?: Post;
   nextMsg?: Post;
-  isLastRead: boolean;
-  permalink: string;
+  isLastRead?: boolean;
+  permalink?: string;
   transcluded?: number;
   className?: string;
-  isPending: boolean;
+  isPending?: boolean;
   style?: unknown;
   isLastMessage?: boolean;
-  dismissUnread: () => void;
+  dismissUnread?: () => void;
   api: GlobalApi;
   highlighted?: boolean;
   renderSigil?: boolean;
@@ -222,27 +223,24 @@ interface ChatMessageProps {
   innerRef: (el: HTMLDivElement | null) => void;
   onReply?: (msg: Post) => void;
   showOurContact: boolean;
+  onDelete?: () => void;
 }
 
 function ChatMessage(props: ChatMessageProps) {
   let { highlighted } = props;
   const {
     msg,
-    previousMsg,
     nextMsg,
-    isLastRead,
-    group,
-    association,
+    isLastRead = false,
     className = '',
-    isPending,
+    isPending = false,
     style,
     isLastMessage,
     api,
     showOurContact,
-    fontSize,
     hideHover,
-    dismissUnread,
-    permalink
+    dismissUnread = () => null,
+    permalink = ''
   } = props;
 
   if (typeof msg === 'string' || !msg) {
@@ -259,7 +257,7 @@ function ChatMessage(props: ChatMessageProps) {
         msg.number === 1
     );
 
-    const ourMention = msg?.contents?.some((e) => {
+    const ourMention = msg?.contents?.some((e: MentionContent) => {
       return e?.mention && e?.mention === window.ship;
     });
 
@@ -293,12 +291,10 @@ function ChatMessage(props: ChatMessageProps) {
   const messageProps = {
     msg,
     timestamp,
-    association,
     isPending,
     showOurContact,
     api,
     highlighted,
-    fontSize,
     hideHover,
     transcluded,
     onReply,
@@ -423,7 +419,7 @@ export const MessageAuthor = ({
       </Box>
     );
   return (
-    <Box pb="1" display='flex' alignItems='flex-start'>
+    <Box pb={1} display='flex' alignItems='flex-start'>
       <Box
        height={24}
         pr={2}
@@ -495,7 +491,7 @@ export const Message = React.memo(({
           position='absolute'
           width='36px'
           textAlign='right'
-          left='0'
+          left={0}
           top='3px'
           fontSize={0}
           gray
@@ -528,10 +524,10 @@ export const MessagePlaceholder = ({
 }) => (
   <Box
     width='100%'
-    fontSize='2'
-    pl='3'
-    pt='4'
-    pr='3'
+    fontSize={2}
+    pl={3}
+    pt={4}
+    pr={3}
     display='flex'
     lineHeight='tall'
     className={className}
@@ -539,7 +535,7 @@ export const MessagePlaceholder = ({
     {...props}
   >
     <Box
-      pr='3'
+      pr={3}
       verticalAlign='top'
       backgroundColor='white'
       style={{ float: 'left' }}
@@ -562,20 +558,20 @@ export const MessagePlaceholder = ({
     >
       <Box
         className='hide-child'
-        paddingTop='4'
+        paddingTop={4}
         style={{ visibility: index % 5 == 0 ? 'initial' : 'hidden' }}
       >
         <Text
           display='inline-block'
           verticalAlign='middle'
-          fontSize='0'
+          fontSize={0}
           color='washedGray'
           cursor='default'
         >
           <Text maxWidth='32rem' display='block'>
             <Text
               backgroundColor='washedGray'
-              borderRadius='2'
+              borderRadius={2}
               display='block'
               width='100%'
               height='100%'
@@ -586,12 +582,12 @@ export const MessagePlaceholder = ({
           display='inline-block'
           mono
           verticalAlign='middle'
-          fontSize='0'
-          washedGray
+          fontSize={0}
+          color='washedGray'
         >
           <Text
             background='washedGray'
-            borderRadius='2'
+            borderRadius={2}
             display='block'
             height='1em'
             style={{ width: `${((index % 3) + 1) * 3}em` }}
@@ -600,16 +596,16 @@ export const MessagePlaceholder = ({
         <Text
           mono
           verticalAlign='middle'
-          fontSize='0'
-          ml='2'
-          washedGray
-          borderRadius='2'
+          fontSize={0}
+          ml={2}
+          color='washedGray'
+          borderRadius={2}
           display={['none', 'inline-block']}
           className='child'
         >
           <Text
             backgroundColor='washedGray'
-            borderRadius='2'
+            borderRadius={2}
             display='block'
             width='100%'
             height='100%'
@@ -619,7 +615,7 @@ export const MessagePlaceholder = ({
       <Text
         display='block'
         backgroundColor='washedGray'
-        borderRadius='2'
+        borderRadius={2}
         height='1em'
         style={{ width: `${(index % 5) * 20}%` }}
       ></Text>
diff --git a/pkg/interface/src/views/apps/chat/components/ChatPane.tsx b/pkg/interface/src/views/apps/chat/components/ChatPane.tsx
index ed283c3340..dd6ebf46fb 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatPane.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatPane.tsx
@@ -11,7 +11,7 @@ import useGraphState from '~/logic/state/graph';
 import ShareProfile from '~/views/apps/chat/components/ShareProfile';
 import { Loading } from '~/views/components/Loading';
 import SubmitDragger from '~/views/components/SubmitDragger';
-import ChatInput from './ChatInput';
+import ChatInput, { ChatInput as NakedChatInput } from './ChatInput';
 import ChatWindow from './ChatWindow';
 
 interface ChatPaneProps {
@@ -82,14 +82,14 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
   } = props;
   const graphTimesentMap = useGraphState(state => state.graphTimesentMap);
   const ourContact = useOurContact();
-  const chatInput = useRef<ChatInput>();
+  const chatInput = useRef<NakedChatInput>();
 
   const onFileDrag = useCallback(
     (files: FileList | File[]) => {
       if (!chatInput.current) {
         return;
       }
-      chatInput.current?.uploadFiles(files);
+      (chatInput.current as NakedChatInput)?.uploadFiles(files);
     },
     [chatInput.current]
   );
diff --git a/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx b/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx
index b7ca5a39c5..b721601665 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx
@@ -16,7 +16,7 @@ type ChatWindowProps = {
   unreadCount: number;
   graph: Graph;
   graphSize: number;
-  station: unknown;
+  station?: unknown;
   fetchMessages: (newer: boolean) => Promise<boolean>;
   api: GlobalApi;
   scrollTo?: BigInteger;
@@ -36,6 +36,11 @@ interface ChatWindowState {
   unreadIndex: BigInteger;
 }
 
+interface RendererProps {
+  index: bigInt.BigInteger;
+  scrollWindow: any;
+}
+
 const virtScrollerStyle = { height: '100%' };
 
 class ChatWindow extends Component<
@@ -99,11 +104,12 @@ class ChatWindow extends Component<
     });
   }
 
-  dismissedInitialUnread(): void {
+  dismissedInitialUnread(): boolean {
     const { unreadCount, graph } = this.props;
 
-    return this.state.unreadIndex.eq(bigInt.zero) ? unreadCount > graph.size :
-    this.state.unreadIndex.neq(graph.keys()?.[unreadCount]?.[0] ?? bigInt.zero);
+    return this.state.unreadIndex.eq(bigInt.zero)
+      ? unreadCount > graph.size
+      : this.state.unreadIndex.neq(graph.keys()?.[unreadCount]?.[0] ?? bigInt.zero);
   }
 
   handleWindowBlur(): void {
@@ -173,7 +179,7 @@ class ChatWindow extends Component<
     }
   }
 
-  renderer = React.forwardRef(({ index, scrollWindow }, ref) => {
+  renderer = React.forwardRef(({ index, scrollWindow }: RendererProps, ref) => {
     const {
       api,
       showOurContact,
diff --git a/pkg/interface/src/views/apps/chat/components/UnreadNotice.tsx b/pkg/interface/src/views/apps/chat/components/UnreadNotice.tsx
index ac5a34f89c..a81acf014b 100644
--- a/pkg/interface/src/views/apps/chat/components/UnreadNotice.tsx
+++ b/pkg/interface/src/views/apps/chat/components/UnreadNotice.tsx
@@ -22,16 +22,16 @@ const UnreadNotice = (props): ReactElement | null => {
       className='unread-notice'
     >
       <Center>
-        <Box backgroundColor='white' borderRadius='3' overflow='hidden'>
+        <Box backgroundColor='white' borderRadius={3} overflow='hidden'>
           <Box
             backgroundColor='washedBlue'
             display='flex'
             alignItems='center'
-            p='2'
-            fontSize='0'
+            p={2}
+            fontSize={0}
             justifyContent='space-between'
-            borderRadius='3'
-            border='1'
+            borderRadius={3}
+            border={1}
             borderColor='lightBlue'
           >
             <Text
diff --git a/pkg/interface/src/views/apps/graph/App.tsx b/pkg/interface/src/views/apps/graph/App.tsx
index 7acd9ac16e..9cb22a7158 100644
--- a/pkg/interface/src/views/apps/graph/App.tsx
+++ b/pkg/interface/src/views/apps/graph/App.tsx
@@ -1,4 +1,5 @@
 import { Center, Text } from '@tlon/indigo-react';
+import { GraphConfig } from '@urbit/api';
 import React, { ReactElement } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
@@ -40,8 +41,8 @@ const GraphApp = (props: GraphAppProps): ReactElement => {
 
           if(!graphKeys.has(resource)) {
             autoJoin();
-          } else if(Boolean(association) && 'graph' in association.config) {
-            history.push(`/~landscape/home/resource/${association.metadata.config.graph}${path}`);
+          } else if(Boolean(association) && 'graph' in association.metadata.config) {
+            history.push(`/~landscape/home/resource/${(association.metadata.config as GraphConfig).graph}${path}`);
           }
           return (
             <Center width="100%" height="100%">
diff --git a/pkg/interface/src/views/apps/launch/App.tsx b/pkg/interface/src/views/apps/launch/App.tsx
index 791a42402b..0d7b783fe6 100644
--- a/pkg/interface/src/views/apps/launch/App.tsx
+++ b/pkg/interface/src/views/apps/launch/App.tsx
@@ -6,13 +6,13 @@ import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
 import GlobalApi from '~/logic/api/global';
 import {
-  hasTutorialGroup,
+    hasTutorialGroup,
 
-  TUTORIAL_BOOK,
-  TUTORIAL_CHAT, TUTORIAL_GROUP,
-  TUTORIAL_HOST,
+    TUTORIAL_BOOK,
+    TUTORIAL_CHAT, TUTORIAL_GROUP,
+    TUTORIAL_HOST,
 
-  TUTORIAL_LINKS
+    TUTORIAL_LINKS
 } from '~/logic/lib/tutorialModal';
 import { useModal } from '~/logic/lib/useModal';
 import { useQuery } from '~/logic/lib/useQuery';
@@ -67,8 +67,8 @@ export const LaunchApp = (props: LaunchAppProps): ReactElement | null => {
   const hashBox = (
     <Box
       position={['relative', 'absolute']}
-      left="0"
-      bottom="0"
+      left={0}
+      bottom={0}
       backgroundColor="white"
       ml={3}
       mb={3}
@@ -120,28 +120,28 @@ export const LaunchApp = (props: LaunchAppProps): ReactElement | null => {
         dismiss();
       };
       return exitingTut ? (
-        <Col maxWidth="350px" p="3">
+        <Col maxWidth="350px" p={3}>
           <Icon icon="Info" fill="black"></Icon>
-          <Text my="3" lineHeight="tall">
+          <Text my={3} lineHeight="tall">
             You can always restart the tutorial by typing &ldquo;tutorial&rdquo; in Leap
           </Text>
-          <Row gapX="2" justifyContent="flex-end">
+          <Row gapX={2} justifyContent="flex-end">
             <Button primary onClick={onDismiss}>Ok</Button>
           </Row>
         </Col>
       ) : (
-        <Col maxWidth="350px" p="3">
+        <Col maxWidth="350px" p={3}>
           <Box position="absolute" left="-16px" top="-16px">
             <StarIcon width="32px" height="32px" color="blue" display="block" />
           </Box>
-          <Text mb="3" lineHeight="tall" fontWeight="medium">Welcome</Text>
-          <Text mb="3" lineHeight="tall">
+          <Text mb={3} lineHeight="tall" fontWeight="medium">Welcome</Text>
+          <Text mb={3} lineHeight="tall">
                         You have been invited to use Landscape, an interface to chat
             and interact with communities
             <br />
             Would you like a tour of Landscape?
           </Text>
-          <Row gapX="2" justifyContent="flex-end">
+          <Row gapX={2} justifyContent="flex-end">
             <Button
               backgroundColor="washedGray"
               onClick={() => setExitingTut(true)}
@@ -181,7 +181,7 @@ export const LaunchApp = (props: LaunchAppProps): ReactElement | null => {
       <ScrollbarLessBox height='100%' overflowY='scroll' display="flex" flexDirection="column">
         {modal}
         <Box
-          mx='2'
+          mx={2}
           display='grid'
           gridTemplateColumns='repeat(auto-fill, minmax(128px, 1fr))'
           gridGap={3}
@@ -208,7 +208,7 @@ export const LaunchApp = (props: LaunchAppProps): ReactElement | null => {
                   color="black"
                   icon="Home"
                 />
-                <Text ml="2" mt='1px' color="black">My Channels</Text>
+                <Text ml={2} mt='1px' color="black">My Channels</Text>
               </Row>
             </Box>
           </Tile>
diff --git a/pkg/interface/src/views/apps/launch/components/Groups.tsx b/pkg/interface/src/views/apps/launch/components/Groups.tsx
index 97f500884f..7656895893 100644
--- a/pkg/interface/src/views/apps/launch/components/Groups.tsx
+++ b/pkg/interface/src/views/apps/launch/components/Groups.tsx
@@ -47,8 +47,8 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
   const groups = Object.values(associations?.groups || {})
     .filter(e => e?.group in groupState)
     .sort(sortGroupsAlph);
-  const graphUnreads = getGraphUnreads(associations || {}, unreads);
-  const graphNotifications = getGraphNotifications(associations || {}, unreads);
+  const graphUnreads = getGraphUnreads(associations || {} as Associations, unreads);
+  const graphNotifications = getGraphNotifications(associations || {} as Associations, unreads);
 
   return (
     <>
@@ -82,7 +82,7 @@ interface GroupProps {
 const selectJoined = (s: SettingsState) => s.tutorial.joined;
 function Group(props: GroupProps) {
   const { path, title, unreads, updates, first = false } = props;
-  const anchorRef = useRef<HTMLElement>(null);
+  const anchorRef = useRef<HTMLDivElement>(null);
   const isTutorialGroup = path === `/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`;
   useTutorialModal(
     'start',
@@ -104,7 +104,7 @@ function Group(props: GroupProps) {
             (<Text>{days} day{days !== 1 && 's'} remaining</Text>)
           }
           {updates > 0 &&
-            (<Text mt="1" color="blue">{updates} update{updates !== 1 && 's'} </Text>)
+            (<Text mt={1} color="blue">{updates} update{updates !== 1 && 's'} </Text>)
           }
           {unreads > 0 &&
             (<Text color="lightGray">{unreads}</Text>)
diff --git a/pkg/interface/src/views/apps/launch/components/tiles.tsx b/pkg/interface/src/views/apps/launch/components/tiles.tsx
index ef9140279b..377e0d2674 100644
--- a/pkg/interface/src/views/apps/launch/components/tiles.tsx
+++ b/pkg/interface/src/views/apps/launch/components/tiles.tsx
@@ -1,17 +1,18 @@
 import React, { ReactElement } from 'react';
 import GlobalApi from '~/logic/api/global';
 import useLaunchState from '~/logic/state/launch';
+import { WeatherState } from '~/types';
 import BasicTile from './tiles/basic';
 import ClockTile from './tiles/clock';
 import CustomTile from './tiles/custom';
 import WeatherTile from './tiles/weather';
 
-interface TileProps {
+export interface TileProps {
   api: GlobalApi;
 }
 
 const Tiles = (props: TileProps): ReactElement => {
-  const weather = useLaunchState(state => state.weather);
+  const weather = useLaunchState(state => state.weather) as WeatherState;
   const tileOrdering = useLaunchState(state => state.tileOrdering);
   const tileState = useLaunchState(state => state.tiles);
   const tiles = tileOrdering.filter((key) => {
@@ -26,7 +27,6 @@ const Tiles = (props: TileProps): ReactElement => {
         <BasicTile
           key={key}
           title={basic.title}
-          iconUrl={basic.iconUrl}
           linkedUrl={basic.linkedUrl}
         />
       );
diff --git a/pkg/interface/src/views/apps/launch/components/tiles/basic.tsx b/pkg/interface/src/views/apps/launch/components/tiles/basic.tsx
index 4020cf72a2..7aa6aec34e 100644
--- a/pkg/interface/src/views/apps/launch/components/tiles/basic.tsx
+++ b/pkg/interface/src/views/apps/launch/components/tiles/basic.tsx
@@ -21,7 +21,7 @@ const BasicTile = (props: BasicTileProps): ReactElement => (
           display='inline-block'
           verticalAlign='top'
           mt='5px'
-          mr='2'
+          mr={2}
           />
         : null
       }{props.title}
diff --git a/pkg/interface/src/views/apps/launch/components/tiles/clock.tsx b/pkg/interface/src/views/apps/launch/components/tiles/clock.tsx
index eef2943b5e..d9b48c2840 100644
--- a/pkg/interface/src/views/apps/launch/components/tiles/clock.tsx
+++ b/pkg/interface/src/views/apps/launch/components/tiles/clock.tsx
@@ -120,7 +120,11 @@ const SvgArc = ({ start, end, ...rest }) => {
   return <path d={d} {...rest} />;
 };
 
-class ClockText extends React.Component<ClockTextProps, ClockTextState> {
+interface ClockTextState {
+  time: number;
+}
+
+class ClockText extends React.Component<{}, ClockTextState> {
   interval?: NodeJS.Timeout;
   constructor(props) {
     super(props);
@@ -176,7 +180,34 @@ class ClockText extends React.Component<ClockTextProps, ClockTextState> {
   }
 }
 
-class Clock extends React.PureComponent {
+interface ClockProps {
+  data: {
+    latitude?: number;
+    longitude?: number;
+  }
+}
+
+interface ClockState {
+  time: number;
+  lat: number;
+  lon: number;
+  geolocationSuccess: boolean;
+  sunrise: number;
+  sunsetStart: number;
+  sunset: number;
+  sunriseEnd: number;
+  dusk: number;
+  dawn: number;
+  night: number;
+  nightEnd: number;
+  nauticalDawn: number;
+  nauticalDusk: number;
+}
+
+class Clock extends React.PureComponent<ClockProps, ClockState> {
+  angle: number;
+  referenceTime: moment.Moment;
+  interval: NodeJS.Timeout;
   constructor(props) {
     super(props);
     this.angle = 0;
@@ -188,7 +219,7 @@ class Clock extends React.PureComponent {
       geolocationSuccess: false,
       sunrise: 0,
       sunsetStart: 0,
-      sunset:0,
+      sunset: 0,
       sunriseEnd: 0,
       dusk: 0,
       dawn: 0,
diff --git a/pkg/interface/src/views/apps/launch/components/tiles/custom.tsx b/pkg/interface/src/views/apps/launch/components/tiles/custom.tsx
index e44476593f..0699c9fb44 100644
--- a/pkg/interface/src/views/apps/launch/components/tiles/custom.tsx
+++ b/pkg/interface/src/views/apps/launch/components/tiles/custom.tsx
@@ -13,7 +13,7 @@ export default class CustomTile extends React.PureComponent {
           backgroundColor='white'
           border='1px solid'
           borderColor='lightGray'
-          borderRadius='2'
+          borderRadius={2}
         >
           <BaseImage
             position='absolute'
diff --git a/pkg/interface/src/views/apps/launch/components/tiles/tile.tsx b/pkg/interface/src/views/apps/launch/components/tiles/tile.tsx
index 16a3e7a201..bc7a64306f 100644
--- a/pkg/interface/src/views/apps/launch/components/tiles/tile.tsx
+++ b/pkg/interface/src/views/apps/launch/components/tiles/tile.tsx
@@ -1,7 +1,8 @@
-import { Box } from '@tlon/indigo-react';
-import React from 'react';
+import { Box, BoxProps } from '@tlon/indigo-react';
+import React, { RefObject } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import { PaddingProps } from 'styled-system';
 import defaultApps from '~/logic/lib/default-apps';
 
 const SquareBox = styled(Box)`
@@ -20,7 +21,17 @@ const SquareBox = styled(Box)`
 `;
 const routeList = defaultApps.map(a => `/~${a}`);
 
-const Tile = React.forwardRef((props, ref) => {
+type TileProps = BoxProps & {
+  bg?: string;
+  to?: string;
+  href?: string;
+  p?: PaddingProps;
+  children: any;
+  gridColumnStart?: number;
+  color?: string;
+}
+
+const Tile = React.forwardRef((props: TileProps, ref: RefObject<HTMLDivElement>) => {
   const { bg, to, href, p, boxShadow, gridColumnStart, ...rest } = props;
 
   let childElement = (
diff --git a/pkg/interface/src/views/apps/launch/components/tiles/weather.tsx b/pkg/interface/src/views/apps/launch/components/tiles/weather.tsx
index 67698cf2a6..9fa4f59329 100644
--- a/pkg/interface/src/views/apps/launch/components/tiles/weather.tsx
+++ b/pkg/interface/src/views/apps/launch/components/tiles/weather.tsx
@@ -1,6 +1,7 @@
 import { BaseInput, Box, Icon, Text } from '@tlon/indigo-react';
 import moment from 'moment';
 import React from 'react';
+import GlobalApi from '~/logic/api/global';
 import withState from '~/logic/lib/withState';
 import useLaunchState from '~/logic/state/launch';
 import ErrorBoundary from '~/views/components/ErrorBoundary';
@@ -36,8 +37,20 @@ const imperialCountries = [
   'Liberia',
 ];
 
-class WeatherTile extends React.Component {
-  constructor(props) {
+interface WeatherTileProps {
+  weather: any;
+  api: GlobalApi;
+  location: string;
+}
+
+interface WeatherTileState {
+  location: string;
+  manualEntry: boolean;
+  error: boolean;
+}
+
+class WeatherTile extends React.Component<WeatherTileProps, WeatherTileState> {
+  constructor(props: WeatherTileProps) {
     super(props);
     this.state = {
       location: '',
@@ -50,11 +63,7 @@ class WeatherTile extends React.Component {
   locationSubmit() {
     navigator.geolocation.getCurrentPosition((res) => {
       const location = `${res.coords.latitude},${res.coords.longitude}`;
-      this.setState({
-        location
-      }, (err) => {
-        console.log(err);
-      }, { maximumAge: Infinity, timeout: 10000 });
+      this.setState({ location });
       this.props.api.launch.weather(location);
       this.setState({ manualEntry: !this.state.manualEntry });
     });
@@ -62,10 +71,8 @@ class WeatherTile extends React.Component {
 
   manualLocationSubmit(event) {
     event.preventDefault();
-    const location = document.getElementById('location').value;
-    this.setState({ location }, (err) => {
-      console.log(err);
-      }, { maximumAge: Infinity, timeout: 10000 });
+    const location = (document.getElementById('location') as HTMLInputElement).value;
+    this.setState({ location });
       this.props.api.launch.weather(location);
       this.setState({ manualEntry: !this.state.manualEntry });
   }
@@ -91,7 +98,7 @@ class WeatherTile extends React.Component {
     let secureCheck;
     let error;
     if (this.state.error === true) {
-      error = <Text display='block' color='red' pt='1'>Please try again.</Text>;
+      error = <Text display='block' color='red' pt={1}>Please try again.</Text>;
     }
     if (location.protocol === 'https:') {
       secureCheck = (
@@ -128,15 +135,15 @@ class WeatherTile extends React.Component {
           {locationName ? ` Current location is near ${locationName}.` : ''}
         </Text>
         {error}
-        <Box mt='auto' display='flex' marginBlockEnd='0'>
+        <Box mt='auto' display='flex' marginBlockEnd={0}>
           <BaseInput
             id="location"
-            size="10"
+            size={10}
             width='100%'
             color='black'
-            fontSize='0'
+            fontSize={0}
             backgroundColor='transparent'
-            border='0'
+            border={0}
             type="text"
             autoFocus
             placeholder="GPS, ZIP, City"
@@ -150,10 +157,10 @@ class WeatherTile extends React.Component {
             backgroundColor='transparent'
             color='black'
             cursor='pointer'
-            flexShrink='0'
-            pl='1'
-            fontSize='0'
-            border='0'
+            flexShrink={0}
+            pl={1}
+            fontSize={0}
+            border={0}
             type="submit"
             onClick={this.manualLocationSubmit.bind(this)}
             value="->"
@@ -173,7 +180,7 @@ class WeatherTile extends React.Component {
         onClick={() => this.setState({ manualEntry: !this.state.manualEntry })}
       >
         <Box>
-          <Icon icon='Weather' display='inline-block' verticalAlign='top' mt='3px' mr='2' />
+          <Icon icon='Weather' display='inline-block' verticalAlign='top' mt='3px' mr={2} />
           <Text>Weather</Text>
         </Box>
         <Text style={{ cursor: 'pointer' }}>
@@ -219,7 +226,7 @@ class WeatherTile extends React.Component {
         title={`${locationName} Weather`}
       >
         <Text>
-          <Icon icon='Weather' display='inline' mr='2' style={{ position: 'relative', top: '.3em' }} />
+          <Icon icon='Weather' display='inline' mr={2} style={{ position: 'relative', top: '.3em' }} />
             <Text
               cursor='pointer'
               onClick={() =>
@@ -269,7 +276,7 @@ class WeatherTile extends React.Component {
           flexDirection="column"
           justifyContent="flex-start"
         >
-          <Text><Icon icon='Weather' color='black' display='inline' mr='2' style={{ position: 'relative', top: '.3em' }} /> Weather</Text>
+          <Text><Icon icon='Weather' color='black' display='inline' mr={2} style={{ position: 'relative', top: '.3em' }} /> Weather</Text>
           <Text width='100%' display='flex' flexDirection='column' mt={1}>
             Loading, please check again later...
           </Text>
diff --git a/pkg/interface/src/views/apps/links/LinkWindow.tsx b/pkg/interface/src/views/apps/links/LinkWindow.tsx
index 9ffdb065dc..0da5d9bbcc 100644
--- a/pkg/interface/src/views/apps/links/LinkWindow.tsx
+++ b/pkg/interface/src/views/apps/links/LinkWindow.tsx
@@ -2,7 +2,7 @@ import { Box, Col, Text } from '@tlon/indigo-react';
 import { Association, Graph, Group } from '@urbit/api';
 import bigInt from 'big-integer';
 import React, {
-  Component
+  Component, ReactNode
 } from 'react';
 import GlobalApi from '~/logic/api/global';
 import { isWriter } from '~/logic/lib/group';
@@ -31,6 +31,11 @@ const style = {
   alignItems: 'center'
 };
 
+interface RendererProps {
+  index: BigInteger;
+  children?: ReactNode;
+}
+
 class LinkWindow extends Component<LinkWindowProps, {}> {
   fetchLinks = async () => true;
 
@@ -39,7 +44,7 @@ class LinkWindow extends Component<LinkWindowProps, {}> {
     return isWriter(group, association.resource);
   }
 
-  renderItem = React.forwardRef<HTMLDivElement>(({ index, scrollWindow }, ref) => {
+  renderItem = React.forwardRef<HTMLDivElement>(({ index }: RendererProps, ref) => {
     const { props } = this;
     const { association, graph, api } = props;
     const [, , ship, name] = association.resource.split('/');
@@ -60,7 +65,7 @@ class LinkWindow extends Component<LinkWindowProps, {}> {
             ref={ref}
             key={index.toString()}
             mx="auto"
-            mt="4"
+            mt={4}
             maxWidth="768px"
             width="100%"
             flexShrink={0}
@@ -96,7 +101,7 @@ class LinkWindow extends Component<LinkWindowProps, {}> {
         <Col
           key={0}
           mx="auto"
-          mt="4"
+          mt={4}
           maxWidth="768px"
           width="100%"
           flexShrink={0}
diff --git a/pkg/interface/src/views/apps/links/components/LinkItem.tsx b/pkg/interface/src/views/apps/links/components/LinkItem.tsx
index d3f09ec843..034d65438e 100644
--- a/pkg/interface/src/views/apps/links/components/LinkItem.tsx
+++ b/pkg/interface/src/views/apps/links/components/LinkItem.tsx
@@ -1,6 +1,6 @@
 import { Action, Anchor, Box, Col, Icon, Row, Rule, Text } from '@tlon/indigo-react';
-import { Association, GraphNode, Group } from '@urbit/api';
-import React, { ReactElement, useCallback, useEffect, useRef } from 'react';
+import { Association, GraphNode, Group, TextContent, UrlContent } from '@urbit/api';
+import React, { ReactElement, RefObject, useCallback, useEffect, useRef } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
 import { roleForShip } from '~/logic/lib/group';
@@ -15,8 +15,13 @@ import { PermalinkEmbed } from '../../permalinks/embed';
 interface LinkItemProps {
   node: GraphNode;
   association: Association;
-  resource: string; api: GlobalApi; group: Group; path: string; }
-export const LinkItem = React.forwardRef((props: LinkItemProps, ref): ReactElement => {
+  resource: string;
+  api: GlobalApi;
+  group: Group;
+  path: string;
+  baseUrl: string;
+}
+export const LinkItem = React.forwardRef((props: LinkItemProps, ref: RefObject<HTMLDivElement>): ReactElement => {
   const {
     association,
     node,
@@ -61,7 +66,7 @@ export const LinkItem = React.forwardRef((props: LinkItemProps, ref): ReactEleme
 
   const author = node.post.author;
   const size = node.children ? node.children.size : 0;
-  const contents = node.post.contents;
+  const contents = node.post.contents as [TextContent, UrlContent];
   const hostname = URLparser.exec(contents[1].url) ? URLparser.exec(contents[1].url)[4] : null;
   const href = URLparser.exec(contents[1].url) ? contents[1].url : `http://${contents[1].url}`;
 
@@ -130,8 +135,8 @@ export const LinkItem = React.forwardRef((props: LinkItemProps, ref): ReactEleme
         <>
         <RemoteContent
           ref={(r) => {
- remoteRef.current = r;
-}}
+            remoteRef.current = r;
+          }}
           renderUrl={false}
           url={href}
           text={contents[0].text}
@@ -166,14 +171,14 @@ export const LinkItem = React.forwardRef((props: LinkItemProps, ref): ReactEleme
         </>
       )}
       </Box>
-      <Row minWidth='0' flexShrink={0} width="100%" justifyContent="space-between" py={3} bg="white">
+      <Row minWidth={0} flexShrink={0} width="100%" justifyContent="space-between" py={3} bg="white">
       <Author
         showImage
         isRelativeTime
         ship={author}
         date={node.post['time-sent']}
         group={group}
-        lineHeight="1"
+        lineHeight={1}
       />
       <Box ml="auto">
         <Link
@@ -208,7 +213,7 @@ export const LinkItem = React.forwardRef((props: LinkItemProps, ref): ReactEleme
           </Col>
         }
       >
-        <Icon ml="2" display="block" icon="Ellipsis" color="gray" />
+        <Icon ml={2} display="block" icon="Ellipsis" color="gray" />
       </Dropdown>
 
     </Row>
diff --git a/pkg/interface/src/views/apps/notifications/graph.tsx b/pkg/interface/src/views/apps/notifications/graph.tsx
index e8f8e80450..1498c01cb7 100644
--- a/pkg/interface/src/views/apps/notifications/graph.tsx
+++ b/pkg/interface/src/views/apps/notifications/graph.tsx
@@ -1,5 +1,5 @@
 import { Anchor, Box, Col, Icon, Row, Text } from '@tlon/indigo-react';
-import { Association, Group, Post } from '@urbit/api';
+import { Association, GraphNotificationContents, GraphNotifIndex, Post } from '@urbit/api';
 import { BigInteger } from 'big-integer';
 import _ from 'lodash';
 import React, { useCallback } from 'react';
@@ -15,9 +15,6 @@ import {
   useAssocForGraph,
   useAssocForGroup
 } from '~/logic/state/metadata';
-import {
-  GraphNotificationContents, GraphNotifIndex
-} from '~/types';
 import Author from '~/views/components/Author';
 import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 import { PermalinkEmbed } from '../permalinks/embed';
@@ -84,9 +81,9 @@ const GraphUrl = ({ contents, api }) => {
     );
   }
   return (
-    <Box borderRadius="2" p="2" bg="scales.black05">
+    <Box borderRadius={2} p={2} bg="scales.black05">
       <Anchor underline={false} target="_blank" color="black" href={link.url}>
-        <Icon verticalAlign="bottom" mr="2" icon="ArrowExternal" />
+        <Icon verticalAlign="bottom" mr={2} icon="ArrowExternal" />
         {text}
       </Anchor>
     </Box>
@@ -97,17 +94,17 @@ function ContentSummary({ icon, name, author, to }) {
   return (
     <Link to={to}>
       <Col
-        gapY="1"
+        gapY={1}
         flexDirection={['column', 'row']}
         alignItems={['flex-start', 'center']}
       >
         <Row
           alignItems="center"
-          gapX="2"
-          p="1"
+          gapX={2}
+          p={1}
           width="fit-content"
-          borderRadius="2"
-          border="1"
+          borderRadius={2}
+          border={1}
           borderColor="lightGray"
         >
           <Icon display="block" icon={icon} />
@@ -116,7 +113,7 @@ function ContentSummary({ icon, name, author, to }) {
           </Text>
         </Row>
         <Row ml={[0, 1]} alignItems="center">
-          <Text lineHeight="1" fontWeight="medium" mr="1">
+          <Text lineHeight={1} fontWeight="medium" mr={1}>
             by
           </Text>
           <Author
@@ -193,11 +190,7 @@ interface PostsByAuthor {
 }
 const GraphNodes = (props: {
   posts: Post[];
-  graph: string;
   hideAuthors?: boolean;
-  group?: Group;
-  groupPath: string;
-  description: string;
   index: string;
   mod: string;
   association: Association;
@@ -208,7 +201,6 @@ const GraphNodes = (props: {
     mod,
     hidden,
     index,
-    description,
     hideAuthors = false,
     association
   } = props;
@@ -242,7 +234,7 @@ const GraphNodes = (props: {
                 date={time}
               />
             )}
-            <Col gapY="2" py={hideAuthors ? 0 : 2} width="100%">
+            <Col gapY={2} py={hideAuthors ? 0 : 2} width="100%">
               {_.map(posts, post => (
                 <GraphNodeContent
                   key={post.index}
@@ -328,18 +320,17 @@ export function GraphNotification(props: {
         groupTitle={groupTitle}
         content
       />
-      <Col onClick={onClick} gapY="2" flexGrow={1} width="100%" gridArea="main">
+      <Col onClick={onClick} gapY={2} flexGrow={1} width="100%" gridArea="main">
         <GraphNodes
           hideAuthors={hideAuthors}
           posts={contents.slice(0, 4)}
           mod={index.module}
-          description={index.description}
           index={contents?.[0].index}
           association={association}
           hidden={groups[association?.group]?.hidden}
         />
         {contents.length > 4 && (
-          <Text mb="2" gray>
+          <Text mb={2} gray>
             + {contents.length - 4} more
           </Text>
         )}
diff --git a/pkg/interface/src/views/apps/notifications/group.tsx b/pkg/interface/src/views/apps/notifications/group.tsx
index 6f3cf45393..68c54e445e 100644
--- a/pkg/interface/src/views/apps/notifications/group.tsx
+++ b/pkg/interface/src/views/apps/notifications/group.tsx
@@ -4,6 +4,7 @@ import {
   GroupNotifIndex,
   GroupUpdate
 } from '@urbit/api';
+import bigInt from 'big-integer';
 import _ from 'lodash';
 import React, { ReactElement } from 'react';
 import GlobalApi from '~/logic/api/global';
@@ -37,7 +38,7 @@ interface GroupNotificationProps {
   archived: boolean;
   read: boolean;
   time: number;
-  timebox: BigInteger;
+  timebox: bigInt.BigInteger;
   api: GlobalApi;
 }
 
diff --git a/pkg/interface/src/views/apps/notifications/header.tsx b/pkg/interface/src/views/apps/notifications/header.tsx
index a763d83495..54df7d43d4 100644
--- a/pkg/interface/src/views/apps/notifications/header.tsx
+++ b/pkg/interface/src/views/apps/notifications/header.tsx
@@ -32,7 +32,7 @@ export function Header(
   return (
     <Row
       flexDirection={['column-reverse', 'row']}
-      minHeight="4"
+      minHeight={4}
       mb={content ? 2 : 0}
       onClick={props.onClick}
       flexWrap="wrap"
@@ -40,7 +40,7 @@ export function Header(
       gridArea="header"
       overflow="hidden"
     >
-      <Row gapX="1" overflow="hidden" alignItems="center">
+      <Row gapX={1} overflow="hidden" alignItems="center">
         {authors.length > 0 && (
           <>
             <Author
@@ -58,15 +58,15 @@ export function Header(
           </>
         )}
         <Box whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
-          <Text lineHeight="tall" mr="1">
+          <Text lineHeight="tall" mr={1}>
             {description} {channelTitle}
           </Text>
         </Box>
       </Row>
-      <Row ml={[0, 1]} mb={[1, 0]} gapX="1" alignItems="center">
+      <Row ml={[0, 1]} mb={[1, 0]} gapX={1} alignItems="center">
         {groupTitle && (
           <>
-            <Text lineHeight="tall" fontSize="1" gray>
+            <Text lineHeight="tall" fontSize={1} gray>
               {groupTitle}
             </Text>
             <Dot color="gray" />
@@ -75,7 +75,7 @@ export function Header(
         {time && (
           <Timestamp
             lineHeight="tall"
-            fontSize="1"
+            fontSize={1}
             relative
             stamp={moment(time)}
             color="gray"
diff --git a/pkg/interface/src/views/apps/notifications/inbox.tsx b/pkg/interface/src/views/apps/notifications/inbox.tsx
index c76adbee31..4be6a5c758 100644
--- a/pkg/interface/src/views/apps/notifications/inbox.tsx
+++ b/pkg/interface/src/views/apps/notifications/inbox.tsx
@@ -1,10 +1,10 @@
 import { Box, Center, Col, LoadingSpinner, Text } from '@tlon/indigo-react';
 import {
-  IndexedNotification,
+    IndexedNotification,
 
-  JoinRequests, Notifications,
+    JoinRequests, Notifications,
 
-  Timebox
+    Timebox
 } from '@urbit/api';
 import { BigInteger } from 'big-integer';
 import _ from 'lodash';
@@ -113,7 +113,7 @@ export default function Inbox(props: {
   );
 
   return (
-    <Col p="1" ref={scrollRef} position="relative" height="100%" overflowY="auto" overflowX="hidden">
+    <Col p={1} ref={scrollRef} position="relative" height="100%" overflowY="auto" overflowX="hidden">
       <Invites pendingJoin={props.pendingJoin} api={api} />
       {[...notificationsByDayMap.keys()].sort().reverse().map((day, index) => {
         const timeboxes = notificationsByDayMap.get(day)!;
@@ -129,15 +129,15 @@ export default function Inbox(props: {
         );
       })}
       {isDone ? (
-        <Center mt="2" borderTop={notifications.length !== 0 ? 1 : 0} borderTopColor="lightGray" width="100%" height="96px">
-          <Text gray fontSize="1">No more notifications</Text>
+        <Center mt={2} borderTop={notifications.length !== 0 ? 1 : 0} borderTopColor="lightGray" width="100%" height="96px">
+          <Text gray fontSize={1}>No more notifications</Text>
         </Center>
     )  : isLoading ? (
-        <Center mt="2" borderTop={notifications.length !== 0 ? 1 : 0} borderTopColor="lightGray" width="100%" height="96px">
+        <Center mt={2} borderTop={notifications.length !== 0 ? 1 : 0} borderTopColor="lightGray" width="100%" height="96px">
           <LoadingSpinner />
         </Center>
     ) : (
-      <Box mt="2" height="96px" />
+      <Box mt={2} height="96px" />
     )}
 
     </Col>
diff --git a/pkg/interface/src/views/apps/notifications/joining.tsx b/pkg/interface/src/views/apps/notifications/joining.tsx
index b502b51b95..49cddc95ee 100644
--- a/pkg/interface/src/views/apps/notifications/joining.tsx
+++ b/pkg/interface/src/views/apps/notifications/joining.tsx
@@ -1,8 +1,8 @@
 import { Box, Row, SegmentedProgressBar, Text } from '@tlon/indigo-react';
 import {
-  joinError, joinProgress,
+    joinError, joinProgress,
 
-  JoinRequest
+    JoinRequest
 } from '@urbit/api';
 import React, { useCallback } from 'react';
 import GlobalApi from '~/logic/api/global';
@@ -34,8 +34,8 @@ export function JoiningStatus(props: JoiningStatusProps) {
     <Row
       display={['flex-column', 'flex']}
       alignItems="center"
-      px="4"
-      gapX="4"
+      px={4}
+      gapX={4}
     >
       <Box flexGrow={1} maxWidth="400px">
         <SegmentedProgressBar current={current + 1} segments={3} />
diff --git a/pkg/interface/src/views/apps/notifications/metadata.tsx b/pkg/interface/src/views/apps/notifications/metadata.tsx
index 70ca91e29c..f2e127f2fa 100644
--- a/pkg/interface/src/views/apps/notifications/metadata.tsx
+++ b/pkg/interface/src/views/apps/notifications/metadata.tsx
@@ -1,13 +1,9 @@
 import { Box } from '@tlon/indigo-react';
+import { Metadata } from '@urbit/api';
 import React from 'react';
 import { Header } from './header';
-import { MetadataBody, NotificationProps } from './types';
 
-function getInvolvedUsers(body: MetadataBody) {
-  return [];
-}
-
-function getDescription(body: MetadataBody) {
+function getDescription(body: { metadata: Metadata}) {
   const b = body.metadata;
   if ('new' in b) {
     return 'created';
@@ -24,12 +20,12 @@ function getDescription(body: MetadataBody) {
   }
 }
 
-export function MetadataNotification(props: NotificationProps<'metadata'>) {
+export function MetadataNotification(props: any) {
   const { unread } = props;
   const description = getDescription(unread.unreads[0].body);
 
   return (
-    <Box p="2">
+    <Box p={2}>
       <Header
         authors={[]}
         description={description}
diff --git a/pkg/interface/src/views/apps/notifications/notification.tsx b/pkg/interface/src/views/apps/notifications/notification.tsx
index 80c2561290..b74629388b 100644
--- a/pkg/interface/src/views/apps/notifications/notification.tsx
+++ b/pkg/interface/src/views/apps/notifications/notification.tsx
@@ -22,7 +22,7 @@ import { SwipeMenu } from '~/views/components/SwipeMenu';
 import { GraphNotification } from './graph';
 import { GroupNotification } from './group';
 
-interface NotificationProps {
+export interface NotificationProps {
   notification: IndexedNotification;
   time: BigInteger;
   api: GlobalApi;
@@ -40,7 +40,7 @@ function getMuted(
     if (!('graph' in notification.contents)) {
       throw new Error();
     }
-    const parent = getParentIndex(index.graph, notification.contents.graph);
+    const parent = getParentIndex(idxNotif.index.graph, notification.contents.graph);
 
     return (
       _.findIndex(
@@ -102,7 +102,7 @@ export function NotificationWrapper(props: {
       menuWidth={100}
       disabled={!isMobile}
       menu={
-        <Button onClick={onArchive} ml="2" height="100%" width="92px" primary destructive>
+        <Button onClick={onArchive} ml={2} height="100%" width="92px" primary destructive>
           Remove
         </Button>
       }
@@ -125,7 +125,7 @@ export function NotificationWrapper(props: {
         {children}
         <Row
           alignItems="flex-start"
-          gapX="2"
+          gapX={2}
           gridArea="actions"
           justifyContent="flex-end"
           opacity={[0, hovering ? 1 : 0]}
@@ -147,7 +147,7 @@ export function NotificationWrapper(props: {
 }
 
 export function Notification(props: NotificationProps) {
-  const { notification, associations, archived } = props;
+  const { notification, archived } = props;
   const { read, contents, time } = notification.notification;
 
   const wrapperProps = {
diff --git a/pkg/interface/src/views/apps/notifications/notifications.tsx b/pkg/interface/src/views/apps/notifications/notifications.tsx
index c28ef05aa9..bfef8998e3 100644
--- a/pkg/interface/src/views/apps/notifications/notifications.tsx
+++ b/pkg/interface/src/views/apps/notifications/notifications.tsx
@@ -23,7 +23,7 @@ const HeaderLink = React.forwardRef((
 
   return (
     <Link to={to}>
-      <Text ref={ref} px="2" {...textProps} gray={!active} />
+      <Text ref={ref} px={2} {...textProps} gray={!active} />
     </Link>
   );
 });
@@ -67,21 +67,21 @@ export default function NotificationsScreen(props: any): ReactElement {
               <Body>
                 <Col overflowY="hidden" height="100%">
                   <Row
-                    p="3"
+                    p={3}
                     alignItems="center"
                     height="48px"
                     justifyContent="space-between"
                     width="100%"
-                    borderBottom="1"
+                    borderBottom={1}
                     borderBottomColor="lightGray"
                   >
 
-                  <Text fontWeight="bold" fontSize="2" lineHeight="1" ref={anchorRef}>
+                  <Text fontWeight="bold" fontSize={2} lineHeight={1} ref={anchorRef}>
                     Notifications
                   </Text>
                     <Row
                       justifyContent="space-between"
-                      gapX="3"
+                      gapX={3}
                     >
                       <StatelessAsyncAction
                         overflow="hidden"
@@ -93,7 +93,7 @@ export default function NotificationsScreen(props: any): ReactElement {
                       </StatelessAsyncAction>
                       <Link to="/~settings#notifications">
                         <Box>
-                          <Icon lineHeight="1" icon="Adjust" />
+                          <Icon lineHeight={1} icon="Adjust" />
                         </Box>
                       </Link>
                     </Row>
diff --git a/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx b/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
index c5047e60ad..1dba297736 100644
--- a/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
+++ b/pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx
@@ -1,5 +1,5 @@
 import { Anchor, Box, Col, Icon, Row, Text } from '@tlon/indigo-react';
-import { Association, GraphNode, Group, Post } from '@urbit/api';
+import { Association, GraphConfig, GraphNode, Group, Post, ReferenceContent, TextContent, UrlContent } from '@urbit/api';
 import bigInt from 'big-integer';
 import React from 'react';
 import GlobalApi from '~/logic/api/global';
@@ -28,20 +28,21 @@ function TranscludedLinkNode(props: {
 
   switch (idx.length) {
     case 1:
-    const [{ text }, link] = node.post.contents;
+      const [{ text }, link] = node.post.contents as [TextContent, UrlContent | ReferenceContent];
       if('reference' in link) {
         const permalink = referenceToPermalink(link).link;
         return <PermalinkEmbed transcluded={transcluded + 1} api={api} link={permalink} association={assoc} />;
       }
 
       return (
-        <Box borderRadius="2" p="2" bg="scales.black05">
+        <Box borderRadius={2} p={2} bg="scales.black05">
           <Anchor underline={false} target="_blank" color="black" href={link.url}>
-            <Icon verticalAlign="bottom" mr="2" icon="ArrowExternal" />
+            <Icon verticalAlign="bottom" mr={2} icon="ArrowExternal" />
             {text}
           </Anchor>
         </Box>
       );
+
     case 2:
       return (
         <TranscludedComment
@@ -74,13 +75,13 @@ function TranscludedComment(props: {
   return (
     <Col>
       <Author
-        p="2"
+        p={2}
         showImage
         ship={comment.post.author}
         date={comment.post?.['time-sent']}
         group={group}
       />
-      <Box p="2">
+      <Box p={2}>
         <GraphContent
           api={api}
           transcluded={transcluded}
@@ -112,18 +113,18 @@ function TranscludedPublishNode(props: {
         ?.get(bigInt.one)
         ?.children?.peekLargest()?.[1]!;
       return (
-        <Col color="black" gapY="2">
+        <Col color="black" gapY={2}>
           <Author
-            px="2"
+            px={2}
             showImage
             ship={post.post.author}
             date={post.post?.['time-sent']}
             group={group}
           />
-          <Text px="2" fontSize="2" fontWeight="medium">
-            {post.post.contents[0]?.text}
+          <Text px={2} fontSize={2} fontWeight="medium">
+            {(post.post.contents[0] as TextContent)?.text}
           </Text>
-          <Box p="2">
+          <Box p={2}>
             <NotePreviewContent
               snippet={getSnippet(post?.post.contents.slice(1))}
             />
@@ -160,13 +161,13 @@ export function TranscludedPost(props: {
   return (
     <Col>
       <Author
-        p="2"
+        p={2}
         showImage
         ship={post.author}
         date={post?.['time-sent']}
         group={group}
       />
-      <Box p="2">
+      <Box p={2}>
         <MentionText
           api={api}
           transcluded={transcluded}
@@ -185,26 +186,21 @@ export function TranscludedNode(props: {
   api: GlobalApi;
   showOurContact?: boolean;
 }) {
-  const { node, showOurContact, assoc, transcluded } = props;
+  const { node, showOurContact, assoc, transcluded, api } = props;
   const group = useGroupForAssoc(assoc)!;
-  switch (assoc.metadata.config.graph) {
+  switch ((assoc.metadata.config as GraphConfig).graph) {
     case 'chat':
       return (
         <Row width="100%" flexShrink={0} flexGrow={1} flexWrap="wrap">
           <ChatMessage
-            width="100%"
             renderSigil
             transcluded={transcluded + 1}
-            containerClass="items-top cf hide-child"
+            className="items-top cf hide-child"
             association={assoc}
-            group={group}
-            groups={{}}
             msg={node.post}
-            fontSize="0"
-            ml="0"
-            mr="0"
+            fontSize={0}
             showOurContact={showOurContact}
-            pt="2"
+            api={api}
           />
         </Row>
       );
diff --git a/pkg/interface/src/views/apps/permalinks/app.tsx b/pkg/interface/src/views/apps/permalinks/app.tsx
index cfbd8b82ca..3e29a7e5c6 100644
--- a/pkg/interface/src/views/apps/permalinks/app.tsx
+++ b/pkg/interface/src/views/apps/permalinks/app.tsx
@@ -1,4 +1,4 @@
-import { Association } from '@urbit/api';
+import { Association, GraphConfig } from '@urbit/api';
 import React, { useCallback } from 'react';
 import {
   Redirect, Route, Switch
@@ -82,7 +82,7 @@ function GroupRoutes(props: { group: string; url: string }) {
               return <Redirect
                 to={toQuery(
                   { auto: 'y', redir: location.pathname },
-                  `${groupUrl}/join/${association.metadata.config.graph}${path}`
+                  `${groupUrl}/join/${(association.metadata.config as GraphConfig).graph}${path}`
                 )}
                      />;
             }
diff --git a/pkg/interface/src/views/apps/permalinks/embed.tsx b/pkg/interface/src/views/apps/permalinks/embed.tsx
index ac21851c46..cb4203f935 100644
--- a/pkg/interface/src/views/apps/permalinks/embed.tsx
+++ b/pkg/interface/src/views/apps/permalinks/embed.tsx
@@ -3,14 +3,14 @@ import {
 
   Col, Icon, Row, Text
 } from '@tlon/indigo-react';
-import { Association, GraphNode, resourceFromPath } from '@urbit/api';
+import { Association, GraphConfig, GraphNode, resourceFromPath } from '@urbit/api';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
 import {
   getPermalinkForGraph, GraphPermalink as IGraphPermalink, parsePermalink
 } from '~/logic/lib/permalinks';
-import { getModuleIcon } from '~/logic/lib/util';
+import { getModuleIcon, GraphModule } from '~/logic/lib/util';
 import { useVirtualResizeProp } from '~/logic/lib/virtualContext';
 import useGraphState from '~/logic/state/graph';
 import useMetadataState from '~/logic/state/metadata';
@@ -23,9 +23,9 @@ function GroupPermalink(props: { group: string; api: GlobalApi }) {
     <GroupLink
       resource={group}
       api={api}
-      pl="2"
-      border="1"
-      borderRadius="2"
+      pl={2}
+      border={1}
+      borderRadius={2}
       borderColor="lightGray"
     />
   );
@@ -79,13 +79,13 @@ function GraphPermalink(
       maxWidth={full ? null : '500px'}
       border={full ? null : '1'}
       borderColor="lightGray"
-      borderRadius="2"
+      borderRadius={2}
       onClick={(e) => {
  e.stopPropagation();
 }}
     >
       {showTransclusion && index && (
-        <Box p="2">
+        <Box p={2}>
           <TranscludedNode
             api={api}
             transcluded={transcluded + 1}
@@ -99,7 +99,7 @@ function GraphPermalink(
         <PermalinkDetails
           known
           showTransclusion={showTransclusion}
-          icon={getModuleIcon(association.metadata.config.graph)}
+          icon={getModuleIcon((association.metadata.config as GraphConfig).graph as GraphModule)}
           title={association.metadata.title}
           permalink={permalink}
         />
@@ -136,10 +136,10 @@ function PermalinkDetails(props: {
       alignItems="center"
       justifyContent="space-between"
       width="100%"
-      px="2"
-      py="1"
+      px={2}
+      py={1}
     >
-      <Row gapX="2" alignItems="center">
+      <Row gapX={2} alignItems="center">
         <Icon icon={icon} />
         <Text lineHeight="20px" mono={!known}>
           {title}
diff --git a/pkg/interface/src/views/apps/permalinks/graphIndex.tsx b/pkg/interface/src/views/apps/permalinks/graphIndex.tsx
index 714731e0b3..3d40197ffc 100644
--- a/pkg/interface/src/views/apps/permalinks/graphIndex.tsx
+++ b/pkg/interface/src/views/apps/permalinks/graphIndex.tsx
@@ -1,4 +1,4 @@
-import { Association, Group } from '@urbit/api';
+import { Association, GraphConfig, Group } from '@urbit/api';
 import _ from 'lodash';
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
@@ -8,7 +8,7 @@ export function getGraphPermalink(
   group: Group,
   index: string
 ) {
-  const mod = assoc.metadata.config.graph;
+  const mod = (assoc.metadata.config as GraphConfig).graph;
   const groupPath = group.hidden
     ? '/~landscape/home'
     : `/~landscape${assoc.group}`;
diff --git a/pkg/interface/src/views/apps/profile/components/EditProfile.tsx b/pkg/interface/src/views/apps/profile/components/EditProfile.tsx
index 2225fa25a0..7705c649c1 100644
--- a/pkg/interface/src/views/apps/profile/components/EditProfile.tsx
+++ b/pkg/interface/src/views/apps/profile/components/EditProfile.tsx
@@ -1,8 +1,8 @@
 import {
-  Button, Col, ManagedCheckboxField as Checkbox, ManagedForm as Form,
-  ManagedTextInputField as Input,
+    Button, Col, ManagedCheckboxField as Checkbox, ManagedForm as Form,
+    ManagedTextInputField as Input,
 
-  Row, Text
+    Row, Text
 } from '@tlon/indigo-react';
 import { Formik } from 'formik';
 import _ from 'lodash';
@@ -18,9 +18,9 @@ import { ColorInput } from '~/views/components/ColorInput';
 import GroupSearch from '~/views/components/GroupSearch';
 import { ImageInput } from '~/views/components/ImageInput';
 import {
-  ProfileControls, ProfileHeader,
+    ProfileControls, ProfileHeader,
 
-  ProfileImages, ProfileStatus
+    ProfileImages, ProfileStatus
 } from './Profile';
 
 const formSchema = Yup.object({
@@ -61,7 +61,7 @@ export function ProfileHeaderImageEdit(props: any): ReactElement {
             <ImageInput id='cover' marginTop='-8px' width='288px' />
           ) : (
             <Row>
-              <Button mr='2' onClick={() => setEditCover(true)}>
+              <Button mr={2} onClick={() => setEditCover(true)}>
                 Replace Header
               </Button>
               <Button onClick={e => handleClear(e)}>
@@ -148,16 +148,16 @@ export function EditProfile(props: any): ReactElement {
                     cursor='pointer'
                     fontWeight='500'
                     color='blue'
-                    pl='0'
-                    pr='0'
-                    border='0'
+                    pl={0}
+                    pr={0}
+                    border={0}
                     style={{ appearance: 'none', background: 'transparent' }}
                   >
                     Save Edits
                   </Button>
                   <Text
-                    py='2'
-                    ml='3'
+                    py={2}
+                    ml={3}
                     fontWeight='500'
                     cursor='pointer'
                     onClick={() => {
diff --git a/pkg/interface/src/views/apps/profile/components/Profile.tsx b/pkg/interface/src/views/apps/profile/components/Profile.tsx
index 03151887d2..41c73d7784 100644
--- a/pkg/interface/src/views/apps/profile/components/Profile.tsx
+++ b/pkg/interface/src/views/apps/profile/components/Profile.tsx
@@ -16,7 +16,7 @@ export function ProfileHeader(props: any): ReactElement {
     <Box
       border='1px solid'
       borderColor='lightGray'
-      borderRadius='3'
+      borderRadius={3}
       overflow='hidden'
       marginBottom='calc(64px + 2rem)'
     >
@@ -27,7 +27,7 @@ export function ProfileHeader(props: any): ReactElement {
 
 export function ProfileImages(props: any): ReactElement {
   const { hideAvatars } = useSettingsState(selectCalmState);
-  const { contact, hideCover, ship } = { ...props };
+  const { contact, hideCover, ship } = props;
   const hexColor = contact?.color ? `#${uxToHex(contact.color)}` : '#000000';
 
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -76,7 +76,7 @@ export function ProfileImages(props: any): ReactElement {
       <Box
         height='128px'
         width='128px'
-        borderRadius='3'
+        borderRadius={3}
         overflow='hidden'
         position='absolute'
         left='50%'
@@ -91,18 +91,18 @@ export function ProfileImages(props: any): ReactElement {
 
 export function ProfileControls(props: any): ReactElement {
   return (
-    <Row alignItems='center' justifyContent='space-between' px='3'>
+    <Row alignItems='center' justifyContent='space-between' px={3}>
       {props.children}
     </Row>
   );
 }
 
 export function ProfileStatus(props: any): ReactElement {
-  const { contact } = { ...props };
+  const { contact } = props;
   return (
     <RichText
-      mb='0'
-      py='2'
+      mb={0}
+      py={2}
       disableRemoteContent
       maxWidth='18rem'
       overflowX='hidden'
@@ -120,14 +120,14 @@ export function ProfileStatus(props: any): ReactElement {
 }
 
 export function ProfileActions(props: any): ReactElement {
-  const { ship, isPublic, contact, api } = { ...props };
+  const { ship, isPublic, contact, api } = props;
   const history = useHistory();
   return (
     <Row>
       {ship === `~${window.ship}` ? (
         <>
           <Text
-            py='2'
+            py={2}
             cursor='pointer'
             fontWeight='500'
             onClick={() => {
@@ -145,8 +145,8 @@ export function ProfileActions(props: any): ReactElement {
           </Text>
           <SetStatusBarModal
             isControl
-            py='2'
-            ml='3'
+            py={2}
+            ml={3}
             api={api}
             ship={`~${window.ship}`}
             contact={contact}
@@ -155,7 +155,7 @@ export function ProfileActions(props: any): ReactElement {
       ) : (
         <>
           <Text
-            py='2'
+            py={2}
             cursor='pointer'
             fontWeight='500'
             onClick={() => history.push(`/~landscape/dm/${ship.substring(1)}`)}
diff --git a/pkg/interface/src/views/apps/profile/components/ViewProfile.tsx b/pkg/interface/src/views/apps/profile/components/ViewProfile.tsx
index f63a45927c..7c1122f9fb 100644
--- a/pkg/interface/src/views/apps/profile/components/ViewProfile.tsx
+++ b/pkg/interface/src/views/apps/profile/components/ViewProfile.tsx
@@ -45,15 +45,15 @@ export function ViewProfile(props: any): ReactElement {
           </Text>
         </Center>
       </Row>
-      <Col pb={2} mt='3' alignItems='center' justifyContent='center' width='100%'>
+      <Col pb={2} mt={3} alignItems='center' justifyContent='center' width='100%'>
         <Center flexDirection='column' maxWidth='32rem'>
-          <RichText width='100%' disableRemoteContent>
+          <RichText api={props.api} width='100%' disableRemoteContent>
             {contact?.bio ? contact.bio : ''}
           </RichText>
         </Center>
       </Col>
       {(contact?.groups || []).length > 0 && (
-        <Col gapY='3' mb='3' mt='6' alignItems='flex-start'>
+        <Col gapY={3} mb={3} mt={6} alignItems='flex-start'>
           <Text gray>Pinned Groups</Text>
           <Col>
             {contact?.groups.slice().sort(lengthOrder).map(g => (
diff --git a/pkg/interface/src/views/apps/profile/profile.tsx b/pkg/interface/src/views/apps/profile/profile.tsx
index ea73638086..3e1faf914b 100644
--- a/pkg/interface/src/views/apps/profile/profile.tsx
+++ b/pkg/interface/src/views/apps/profile/profile.tsx
@@ -36,7 +36,7 @@ export default function ProfileScreen(props: any) {
                 border={1}
                 borderColor='lightGray'
                 overflowY='auto'
-                flexGrow
+                flexGrow={1}
               >
                 <Box>
                   <Profile
diff --git a/pkg/interface/src/views/apps/publish/components/EditPost.tsx b/pkg/interface/src/views/apps/publish/components/EditPost.tsx
index 61c7955af7..b7585fd110 100644
--- a/pkg/interface/src/views/apps/publish/components/EditPost.tsx
+++ b/pkg/interface/src/views/apps/publish/components/EditPost.tsx
@@ -1,17 +1,18 @@
 import { GraphNode } from '@urbit/api';
+import bigInt from 'big-integer';
 import { FormikHelpers } from 'formik';
 import _ from 'lodash';
 import React, { ReactElement } from 'react';
 import { RouteComponentProps, useLocation } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
+import { referenceToPermalink } from '~/logic/lib/permalinks';
 import { editPost, getLatestRevision } from '~/logic/lib/publish';
 import { useWaitForProps } from '~/logic/lib/useWaitForProps';
-import { referenceToPermalink } from '~/logic/lib/permalinks';
 import { PostForm, PostFormSchema } from './NoteForm';
 
 interface EditPostProps {
   ship: string;
-  noteId: number;
+  noteId: bigInt.BigInteger;
   note: GraphNode;
   api: GlobalApi;
   book: string;
diff --git a/pkg/interface/src/views/apps/publish/components/MarkdownEditor.tsx b/pkg/interface/src/views/apps/publish/components/MarkdownEditor.tsx
index d346bb406d..57dc260e93 100644
--- a/pkg/interface/src/views/apps/publish/components/MarkdownEditor.tsx
+++ b/pkg/interface/src/views/apps/publish/components/MarkdownEditor.tsx
@@ -93,7 +93,6 @@ export function MarkdownEditor(
 
   return (
     <Box
-      height="100%"
       position="relative"
       className="publish"
       p={1}
@@ -111,10 +110,10 @@ export function MarkdownEditor(
         value={value}
         options={options}
         onChange={handleChange}
-        onDragLeave={(editor, e) => bind.onDragLeave(e)}
-        onDragOver={(editor, e) => bind.onDragOver(e)}
-        onDrop={(editor, e) => bind.onDrop(e)}
-        onDragEnter={(editor, e) => bind.onDragEnter(e)}
+        onDragLeave={(editor, e: DragEvent) => bind.onDragLeave(e)}
+        onDragOver={(editor, e: DragEvent) => bind.onDragOver(e)}
+        onDrop={(editor, e: DragEvent) => bind.onDrop(e)}
+        onDragEnter={(editor, e: DragEvent) => bind.onDragEnter(e)}
       />
       {dragging && <SubmitDragger />}
     </Box>
diff --git a/pkg/interface/src/views/apps/publish/components/MarkdownField.tsx b/pkg/interface/src/views/apps/publish/components/MarkdownField.tsx
index 36708880e0..f779b1c6a4 100644
--- a/pkg/interface/src/views/apps/publish/components/MarkdownField.tsx
+++ b/pkg/interface/src/views/apps/publish/components/MarkdownField.tsx
@@ -36,7 +36,7 @@ export const MarkdownField = ({
         value={value}
         onChange={setValue}
       />
-      <ErrorLabel mt="2" hasError={Boolean(error && touched)}>
+      <ErrorLabel mt={2} hasError={Boolean(error && touched)}>
         {error}
       </ErrorLabel>
     </Box>
diff --git a/pkg/interface/src/views/apps/publish/components/Note.tsx b/pkg/interface/src/views/apps/publish/components/Note.tsx
index 34ead4b28e..f609c63af1 100644
--- a/pkg/interface/src/views/apps/publish/components/Note.tsx
+++ b/pkg/interface/src/views/apps/publish/components/Note.tsx
@@ -1,18 +1,18 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Text, Col, Anchor, Row, Action } from '@tlon/indigo-react';
+import { Action, Anchor, Box, Col, Row, Text } from '@tlon/indigo-react';
+import { Association, Graph, GraphNode, Group } from '@urbit/api';
 import bigInt from 'big-integer';
+import React, { useEffect, useState } from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
 import { roleForShip } from '~/logic/lib/group';
-import { Contacts, GraphNode, Graph, Association, Unreads, Group, Post } from '@urbit/api';
 import { getPermalinkForGraph } from '~/logic/lib/permalinks';
-import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 import { getComments, getLatestRevision } from '~/logic/lib/publish';
 import { useCopy } from '~/logic/lib/useCopy';
 import { useQuery } from '~/logic/lib/useQuery';
 import Author from '~/views/components/Author';
 import { Comments } from '~/views/components/Comments';
 import { Spinner } from '~/views/components/Spinner';
+import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 import { NoteNavigation } from './NoteNavigation';
 import { Redirect } from 'react-router-dom';
 
@@ -117,7 +117,7 @@ export function Note(props: NoteProps & RouteComponentProps) {
             date={post?.['time-sent']}
             group={group}
           >
-            <Row px="2" gapX="2" alignItems="flex-end" height="14px">
+            <Row px={2} gapX={2} alignItems="flex-end" height="14px">
               <Action bg="white" onClick={doCopy}>{copyDisplay}</Action>
               {adminLinks}
             </Row>
@@ -128,8 +128,7 @@ export function Note(props: NoteProps & RouteComponentProps) {
       <NoteNavigation
         notebook={notebook}
         noteId={noteId}
-        ship={props.ship}
-        book={props.book}
+        baseUrl={baseUrl}
       />
       <Comments
         ship={ship}
diff --git a/pkg/interface/src/views/apps/publish/components/NoteNavigation.tsx b/pkg/interface/src/views/apps/publish/components/NoteNavigation.tsx
index 5b4a0a9ff9..caf0c99ab0 100644
--- a/pkg/interface/src/views/apps/publish/components/NoteNavigation.tsx
+++ b/pkg/interface/src/views/apps/publish/components/NoteNavigation.tsx
@@ -29,7 +29,7 @@ function NavigationItem(props: {
         <Timestamp
           stamp={moment(props.date)}
           time={false}
-          fontSize="1"
+          fontSize={1}
           justifyContent={props.prev ? 'flex-start' : 'flex-end'}
         />
       </Link>
@@ -48,12 +48,12 @@ function getAdjacentId(
   return target?.[0] || null;
 }
 
-function makeNoteUrl(noteId: number) {
+function makeNoteUrl(noteId: BigInteger) {
   return noteId.toString();
 }
 
 interface NoteNavigationProps {
-  noteId: number;
+  noteId: BigInteger;
   notebook: Graph;
   baseUrl: string;
 }
diff --git a/pkg/interface/src/views/apps/publish/components/NotePreview.tsx b/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
index fd6178e99f..2e6ebe74b1 100644
--- a/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
+++ b/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
@@ -6,9 +6,9 @@ import ReactMarkdown from 'react-markdown';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import {
-  getComments,
-  getLatestRevision,
-  getSnippet
+    getComments,
+    getLatestRevision,
+    getSnippet
 } from '~/logic/lib/publish';
 import useHarkState from '~/logic/state/hark';
 import Author from '~/views/components/Author';
@@ -37,7 +37,7 @@ export function NotePreviewContent({ snippet }) {
             style={{ backgroundSize: 'cover',
               backgroundPosition: 'center' }}
           >
-            <Image src={props.src} opacity="0" maxHeight="300px" />
+            <Image src={props.src} opacity={0} maxHeight="300px" />
           </Box>
         )
       }}
@@ -86,7 +86,7 @@ export function NotePreview(props: NotePreviewProps) {
           borderRadius={2}
           alignItems='flex-start'
           overflow='hidden'
-          p='2'
+          p={2}
         >
           <WrappedBox mb={2}><Text bold>{title}</Text></WrappedBox>
           <WrappedBox>
@@ -96,7 +96,7 @@ export function NotePreview(props: NotePreviewProps) {
           </WrappedBox>
         </Col>
       </Link>
-      <Row minWidth='0' flexShrink={0} width="100%" justifyContent="space-between" py={3} bg="white">
+      <Row minWidth={0} flexShrink={0} width="100%" justifyContent="space-between" py={3} bg="white">
         <Author
           showImage
           ship={post?.author}
diff --git a/pkg/interface/src/views/apps/publish/components/NoteRoutes.tsx b/pkg/interface/src/views/apps/publish/components/NoteRoutes.tsx
index 19c0907675..80fc38bea5 100644
--- a/pkg/interface/src/views/apps/publish/components/NoteRoutes.tsx
+++ b/pkg/interface/src/views/apps/publish/components/NoteRoutes.tsx
@@ -1,4 +1,5 @@
 import { Association, Graph, GraphNode, Group } from '@urbit/api';
+import bigInt from 'big-integer';
 import React from 'react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
@@ -9,7 +10,7 @@ interface NoteRoutesProps {
   ship: string;
   book: string;
   note: GraphNode;
-  noteId: number;
+  noteId: bigInt.BigInteger;
   notebook: Graph;
   api: GlobalApi;
   association: Association;
diff --git a/pkg/interface/src/views/apps/publish/components/Notebook.tsx b/pkg/interface/src/views/apps/publish/components/Notebook.tsx
index 09c6eba30d..00b4401b66 100644
--- a/pkg/interface/src/views/apps/publish/components/Notebook.tsx
+++ b/pkg/interface/src/views/apps/publish/components/Notebook.tsx
@@ -40,7 +40,7 @@ export function Notebook(props: NotebookProps & RouteComponentProps): ReactEleme
   }
 
   return (
-    <Col gapY="4" pt={4} mx="auto" px={3} maxWidth="768px">
+    <Col gapY={4} pt={4} mx="auto" px={3} maxWidth="768px">
       <Row justifyContent="space-between">
         <Box>
           <Text display='block'>{association.metadata?.title}</Text>
@@ -50,7 +50,7 @@ export function Notebook(props: NotebookProps & RouteComponentProps): ReactEleme
           </Text>
         </Box>
       </Row>
-      <Box borderBottom="1" borderBottomColor="lightGray" />
+      <Box borderBottom={1} borderBottomColor="lightGray" />
       <NotebookPosts
         graph={graph}
         host={ship}
diff --git a/pkg/interface/src/views/apps/publish/components/Writers.tsx b/pkg/interface/src/views/apps/publish/components/Writers.tsx
index c536f9dbee..affb8e8ea9 100644
--- a/pkg/interface/src/views/apps/publish/components/Writers.tsx
+++ b/pkg/interface/src/views/apps/publish/components/Writers.tsx
@@ -38,7 +38,7 @@ export const Writers = (props: WritersProps): ReactElement => {
     return (
       <Box maxWidth='512px'>
         <Text display='block'>Writers</Text>
-        <Text display='block' mt='2' gray>Add additional writers to this notebook</Text>
+        <Text display='block' mt={2} gray>Add additional writers to this notebook</Text>
         <Formik
           initialValues={{ ships: [] }}
           onSubmit={onSubmit}
@@ -49,16 +49,16 @@ export const Writers = (props: WritersProps): ReactElement => {
               label=""
               maxLength={undefined}
             />
-            <AsyncButton width='100%' mt='3' primary>
+            <AsyncButton width='100%' mt={3} primary>
             Submit
             </AsyncButton>
           </Form>
         </Formik>
         {writers.length > 0 ? <>
-        <Text display='block' mt='2'>Current writers:</Text>
-        <Text mt='2' display='block' mono>{writers}</Text>
+        <Text display='block' mt={2}>Current writers:</Text>
+        <Text mt={2} display='block' mono>{writers}</Text>
         </> :
-          <Text display='block' mt='2'>
+          <Text display='block' mt={2}>
             All group members can write to this channel
           </Text>
         }
diff --git a/pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx b/pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx
index 88145ebf8f..6218bcd58d 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx
@@ -7,7 +7,7 @@ export function BackButton(props: {}) {
     <Link to='/~settings'>
       <Text
         display={['block', 'none']}
-        fontSize='2'
+        fontSize={2}
         fontWeight='medium'
         p={4}
         pb={0}
diff --git a/pkg/interface/src/views/apps/settings/components/lib/BackgroundPicker.tsx b/pkg/interface/src/views/apps/settings/components/lib/BackgroundPicker.tsx
index 7173e82073..ebb4163c08 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/BackgroundPicker.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/BackgroundPicker.tsx
@@ -32,10 +32,10 @@ export function BackgroundPicker({
       <Label>Landscape Background</Label>
       <Row flexWrap="wrap" {...rowSpace}>
         <Col {...colProps}>
-          <Radio mb="1" name="bgType" label="Image" id="url" />
-          <Text ml="5" gray>Set an image background</Text>
+          <Radio mb={1} name="bgType" label="Image" id="url" />
+          <Text ml={5} gray>Set an image background</Text>
           <ImageInput
-            ml="5"
+            ml={5}
             api={api}
             id="bgUrl"
             placeholder="Drop or upload a file, or paste a link here"
@@ -46,13 +46,13 @@ export function BackgroundPicker({
       </Row>
       <Row {...rowSpace}>
         <Col {...colProps}>
-          <Radio mb="1" label="Color" id="color" name="bgType" />
-          <Text ml="5" gray>Set a hex-based background</Text>
-          <ColorInput placeholder="FFFFFF" ml="5" id="bgColor" />
+          <Radio mb={1} label="Color" id="color" name="bgType" />
+          <Text ml={5} gray>Set a hex-based background</Text>
+          <ColorInput placeholder="FFFFFF" ml={5} id="bgColor" />
         </Col>
       </Row>
       <Radio
-        my="3"
+        my={3}
         caption="Your home screen will simply render as its respective day/night mode color"
         name="bgType"
         label="None"
diff --git a/pkg/interface/src/views/apps/settings/components/lib/BucketList.tsx b/pkg/interface/src/views/apps/settings/components/lib/BucketList.tsx
index 2a8fc22e68..e1bd736ae7 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/BucketList.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/BucketList.tsx
@@ -1,13 +1,13 @@
 import {
-  Box,
-  Button, ManagedForm as Form, ManagedTextInputField as Input,
+    Box,
+    Button, ManagedForm as Form, ManagedTextInputField as Input,
 
-  Menu,
-  MenuButton,
+    Menu,
+    MenuButton,
 
-  MenuItem, MenuList,
+    MenuItem, MenuList,
 
-  Row, Text
+    Row, Text
 } from '@tlon/indigo-react';
 import { Formik, FormikHelpers } from 'formik';
 import React, { ReactElement, useCallback, useState } from 'react';
@@ -95,12 +95,12 @@ export function BucketList({
         {adding && (
           <Input
             placeholder="Enter your new bucket"
-            mt="2"
+            mt={2}
             label="New Bucket"
             id="newBucket"
           />
         )}
-        <Row gapX="3" mt="3">
+        <Row gapX={3} mt={3}>
           <Button type="button" onClick={() => setAdding(false)}>
             Cancel
           </Button>
diff --git a/pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx b/pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx
index a3ab0d61dc..b676499160 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx
@@ -1,7 +1,7 @@
 import {
-  Col, ManagedToggleSwitchField as Toggle,
+    Col, ManagedToggleSwitchField as Toggle,
 
-  Text
+    Text
 } from '@tlon/indigo-react';
 import { Form, Formik, FormikHelpers } from 'formik';
 import React, { useCallback } from 'react';
@@ -75,8 +75,8 @@ export function CalmPrefs(props: {
     <Formik initialValues={initialValues} onSubmit={onSubmit}>
       <Form>
         <BackButton />
-        <Col borderBottom="1" borderBottomColor="washedGray" p="5" pt="4" gapY="5">
-          <Col gapY="1" mt="0">
+        <Col borderBottom={1} borderBottomColor="washedGray" p={5} pt={4} gapY={5}>
+          <Col gapY={1} mt={0}>
             <Text color="black" fontSize={2} fontWeight="medium">
               CalmEngine
             </Text>
diff --git a/pkg/interface/src/views/apps/settings/components/lib/Debug.tsx b/pkg/interface/src/views/apps/settings/components/lib/Debug.tsx
index 66ec23c013..e6b6171721 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/Debug.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/Debug.tsx
@@ -52,7 +52,7 @@ const StoreDebugger = (props: StoreDebuggerProps) => {
           backgroundColor='white'
           color='black'
           border='1px solid transparent'
-          borderRadius='2'
+          borderRadius={2}
           fontSize={1}
           placeholder="Drill Down"
           width="100%"
@@ -65,7 +65,7 @@ const StoreDebugger = (props: StoreDebuggerProps) => {
             }
           }}
         />
-        <Text mono p='1' borderRadius='1' display='block' overflow='auto' backgroundColor='washedGray' style={{ whiteSpace: 'pre', wordWrap: 'break-word' }}>{text}</Text>
+        <Text mono p={1} borderRadius={1} display='block' overflow='auto' backgroundColor='washedGray' style={{ whiteSpace: 'pre', wordWrap: 'break-word' }}>{text}</Text>
       </Box>}
     </Box>
   );
@@ -75,8 +75,8 @@ const DebugPane = () => {
   return (
     <>
       <BackButton />
-      <Col borderBottom="1" borderBottomColor="washedGray" p="5" pt="4" gapY="5">
-        <Col gapY="1" mt="0">
+      <Col borderBottom={1} borderBottomColor="washedGray" p={5} pt={4} gapY={5}>
+        <Col gapY={1} mt={0}>
           <Text color="black" fontSize={2} fontWeight="medium">
             Debug Menu
           </Text>
diff --git a/pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx b/pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx
index 534e5a6192..e7b16009b8 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx
@@ -1,8 +1,8 @@
 import {
-  Col,
+    Col,
 
-  Label,
-  ManagedRadioButtonField as Radio, Text
+    Label,
+    ManagedRadioButtonField as Radio, Text
 } from '@tlon/indigo-react';
 import { Form, Formik } from 'formik';
 import React from 'react';
@@ -89,8 +89,8 @@ export default function DisplayForm(props: DisplayFormProps) {
       {props => (
         <Form>
           <BackButton />
-          <Col p="5" pt="4" gapY="5">
-              <Col gapY="1" mt="0">
+          <Col p={5} pt={4} gapY={5}>
+              <Col gapY={1} mt={0}>
               <Text color="black" fontSize={2} fontWeight="medium">
                 Display Preferences
               </Text>
diff --git a/pkg/interface/src/views/apps/settings/components/lib/GroupChannelPicker.tsx b/pkg/interface/src/views/apps/settings/components/lib/GroupChannelPicker.tsx
index 59ce838743..3ec7a3c96d 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/GroupChannelPicker.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/GroupChannelPicker.tsx
@@ -5,12 +5,12 @@ import {
 
   StatelessToggleSwitchField, Text
 } from '@tlon/indigo-react';
-import { Association, resourceFromPath } from '@urbit/api';
+import { Association, GraphConfig, resourceFromPath } from '@urbit/api';
 import { useField } from 'formik';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { isWatching } from '~/logic/lib/hark';
-import { getModuleIcon } from '~/logic/lib/util';
+import { getModuleIcon, GraphModule } from '~/logic/lib/util';
 import useGraphState from '~/logic/state/graph';
 import useHarkState from '~/logic/state/hark';
 import useMetadataState, { useGraphsForGroup } from '~/logic/state/metadata';
@@ -20,7 +20,7 @@ export function GroupChannelPicker(props: {}) {
   const associations = useMetadataState(s => s.associations);
 
   return (
-    <Col gapY="3">
+    <Col gapY={3}>
       {_.map(associations.groups, (assoc: Association, group: string) => (
         <GroupWithChannels key={group} association={assoc} />
       ))}
@@ -62,7 +62,7 @@ function GroupWithChannels(props: { association: Association }) {
       display="grid"
       gridTemplateColumns="24px 24px 1fr 24px 24px"
       gridTemplateRows="auto"
-      gridGap="2"
+      gridGap={2}
       gridTemplateAreas="'arrow icon title graphToggle groupToggle'"
     >
       {Object.keys(joinedGroupGraphs).length > 0 && (
@@ -112,17 +112,17 @@ function Channel(props: { association: Association }) {
     setValue(!value);
   };
 
-  const icon = getModuleIcon(metadata.config?.graph);
+  const icon = getModuleIcon((metadata.config as GraphConfig)?.graph as GraphModule);
 
   return (
     <>
-      <Center gridColumn="2">
+      <Center gridColumn={2}>
         <Icon icon={icon} />
       </Center>
-      <Box gridColumn="3">
+      <Box gridColumn={3}>
         <Text> {metadata.title}</Text>
       </Box>
-      <Box gridColumn="4">
+      <Box gridColumn={4}>
         <StatelessToggleSwitchField selected={value} onChange={onChange} />
       </Box>
     </>
diff --git a/pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx b/pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx
index d628c4aa42..5f3c616cda 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/LeapSettings.tsx
@@ -1,7 +1,7 @@
 import {
-  Col,
+    Col,
 
-  ManagedCheckboxField, Text
+    ManagedCheckboxField, Text
 } from '@tlon/indigo-react';
 import { Form, useField, useFormikContext } from 'formik';
 import _ from 'lodash';
@@ -9,8 +9,8 @@ import React from 'react';
 import GlobalApi from '~/logic/api/global';
 import useSettingsState, { selectSettingsState } from '~/logic/state/settings';
 import {
-  LeapCategories,
-  leapCategories
+    LeapCategories,
+    leapCategories
 } from '~/types';
 import { FormikOnBlur } from '~/views/components/FormikOnBlur';
 import { ShuffleFields } from '~/views/components/ShuffleFields';
@@ -73,9 +73,9 @@ export function LeapSettings(props: { api: GlobalApi; }) {
   return (
     <>
     <BackButton />
-    <Col p="5" pt="4" gapY="5">
-      <Col gapY="1" mt="0">
-        <Text fontSize="2" fontWeight="medium">
+    <Col p={5} pt={4} gapY={5}>
+      <Col gapY={1} mt={0}>
+        <Text fontSize={2} fontWeight="medium">
           Leap
         </Text>
         <Text gray>
@@ -84,7 +84,7 @@ export function LeapSettings(props: { api: GlobalApi; }) {
       </Col>
       <FormikOnBlur initialValues={initialValues} onSubmit={onSubmit}>
         <Form>
-          <Col gapY="4">
+          <Col gapY={4}>
             <Text fontWeight="medium">
               Customize default Leap sections
             </Text>
diff --git a/pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx b/pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx
index abed89bb11..2cecbf9da7 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx
@@ -1,7 +1,7 @@
 import {
-  Col,
+    Col,
 
-  ManagedToggleSwitchField as Toggle, Text
+    ManagedToggleSwitchField as Toggle, Text
 } from '@tlon/indigo-react';
 import { Form, Formik, FormikHelpers } from 'formik';
 import _ from 'lodash';
@@ -72,9 +72,9 @@ export function NotificationPreferences(props: {
   return (
     <>
     <BackButton />
-    <Col p="5" pt="4" gapY="5">
-      <Col gapY="1" mt="0">
-        <Text fontSize="2" fontWeight="medium">
+    <Col p={5} pt={4} gapY={5}>
+      <Col gapY={1} mt={0}>
+        <Text fontSize={2} fontWeight="medium">
           Notification Preferences
         </Text>
         <Text gray>
@@ -84,7 +84,7 @@ export function NotificationPreferences(props: {
       </Col>
       <Formik initialValues={initialValues} onSubmit={onSubmit}>
         <Form>
-          <Col gapY="4">
+          <Col gapY={4}>
             <Toggle
               label="Do not disturb"
               id="dnd"
@@ -100,7 +100,7 @@ export function NotificationPreferences(props: {
               id="mentions"
               caption="Notify me if someone mentions my @p in a channel I've joined"
             />
-            <Col gapY="3">
+            <Col gapY={3}>
               <Text lineHeight="tall">
                 Activity
               </Text>
diff --git a/pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx b/pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx
index 4e2b00ce4f..cf07907be5 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx
@@ -1,7 +1,7 @@
 import {
-  Anchor, Col, ManagedForm as Form, ManagedTextInputField as Input,
+    Anchor, Col, ManagedForm as Form, ManagedTextInputField as Input,
 
-  Text
+    Text
 } from '@tlon/indigo-react';
 import { Formik, FormikHelpers } from 'formik';
 import React, { ReactElement, useCallback } from 'react';
@@ -47,7 +47,7 @@ export default function S3Form(props: S3FormProps): ReactElement {
   return (
     <>
       <BackButton />
-      <Col p='5' pt='4' borderBottom='1' borderBottomColor='washedGray'>
+      <Col p={5} pt={4} borderBottom={1} borderBottomColor='washedGray'>
         <Formik
           initialValues={
             {
@@ -61,8 +61,8 @@ export default function S3Form(props: S3FormProps): ReactElement {
           onSubmit={onSubmit}
         >
           <Form>
-            <Col maxWidth='600px' gapY='5'>
-              <Col gapY='1' mt='0'>
+            <Col maxWidth='600px' gapY={5}>
+              <Col gapY={1} mt={0}>
                 <Text color='black' fontSize={2} fontWeight='medium'>
                   S3 Storage Setup
                 </Text>
@@ -72,8 +72,8 @@ export default function S3Form(props: S3FormProps): ReactElement {
                   <Anchor
                     target='_blank'
                     style={{ textDecoration: 'none' }}
-                    borderBottom='1'
-                    ml='1'
+                    borderBottom={1}
+                    ml={1}
                     href='https://urbit.org/using/os/s3/'
                   >
                     Learn more
@@ -94,8 +94,8 @@ export default function S3Form(props: S3FormProps): ReactElement {
           </Form>
         </Formik>
       </Col>
-      <Col maxWidth='600px' p='5' gapY='4'>
-        <Col gapY='1'>
+      <Col maxWidth='600px' p={5} gapY={4}>
+        <Col gapY={1}>
           <Text color='black' mb={4} fontSize={2} fontWeight='medium'>
             S3 Buckets
           </Text>
diff --git a/pkg/interface/src/views/apps/settings/components/lib/Security.tsx b/pkg/interface/src/views/apps/settings/components/lib/Security.tsx
index 9ad5d06063..1cb273557b 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/Security.tsx
+++ b/pkg/interface/src/views/apps/settings/components/lib/Security.tsx
@@ -1,7 +1,7 @@
 import {
-  Button,
-  Col,
-  StatelessCheckboxField, Text
+    Button,
+    Col,
+    StatelessCheckboxField, Text
 } from '@tlon/indigo-react';
 import React, { useState } from 'react';
 import GlobalApi from '~/logic/api/global';
@@ -16,8 +16,8 @@ export default function SecuritySettings({ api }: SecuritySettingsProps) {
   return (
     <>
     <BackButton />
-    <Col gapY="5" p="5" pt="4">
-      <Col gapY="1" mt="0">
+    <Col gapY={5} p={5} pt={4}>
+      <Col gapY={1} mt={0}>
         <Text fontSize={2} fontWeight="medium">
           Security Preferences
         </Text>
@@ -25,17 +25,17 @@ export default function SecuritySettings({ api }: SecuritySettingsProps) {
           Manage sessions, login credentials and Landscape access
         </Text>
       </Col>
-      <Col gapY="1">
+      <Col gapY={1}>
         <Text color="black">
           Log out of this session
         </Text>
-        <Text mb="3" gray>
+        <Text mb={3} gray>
           {allSessions
             ? 'You will be logged out of all browsers that have currently logged into your Urbit.'
             : 'You will be logged out of your Urbit on this browser.'}
         </Text>
         <StatelessCheckboxField
-          mb="3"
+          mb={3}
           selected={allSessions}
           onChange={() => setAllSessions(s => !s)}
         >
diff --git a/pkg/interface/src/views/apps/settings/components/settings.tsx b/pkg/interface/src/views/apps/settings/components/settings.tsx
index 158cdef78b..769702e130 100644
--- a/pkg/interface/src/views/apps/settings/components/settings.tsx
+++ b/pkg/interface/src/views/apps/settings/components/settings.tsx
@@ -10,14 +10,14 @@ export function SettingsItem(props: {
   const { to, title, description } = props;
   return (
     <Link to={`/~settings/${to}`}>
-      <Row alignItems="center" gapX="3">
+      <Row alignItems="center" gapX={3}>
         <Box
-          borderRadius="2"
+          borderRadius={2}
           backgroundColor="blue"
           width="64px"
           height="64px"
         />
-        <Col gapY="2">
+        <Col gapY={2}>
           <Text>{title}</Text>
           <Text gray>{description}</Text>
         </Col>
@@ -28,9 +28,9 @@ export function SettingsItem(props: {
 
 export default function Settings(props: {}) {
   return (
-    <Col gapY="5" p="5">
-      <Col gapY="1">
-        <Text fontSize="2">System Preferences</Text>
+    <Col gapY={5} p={5}>
+      <Col gapY={1}>
+        <Text fontSize={2}>System Preferences</Text>
         <Text gray>Configure and customize Landscape</Text>
       </Col>
       <Box
@@ -38,7 +38,7 @@ export default function Settings(props: {}) {
         width="100%"
         height="100%"
         gridTemplateColumns={['100%', '1fr 1fr']}
-        gridGap="3"
+        gridGap={3}
       >
         <SettingsItem
           to="notifications"
diff --git a/pkg/interface/src/views/apps/settings/settings.tsx b/pkg/interface/src/views/apps/settings/settings.tsx
index c36e2cadd8..aca97fbdbc 100644
--- a/pkg/interface/src/views/apps/settings/settings.tsx
+++ b/pkg/interface/src/views/apps/settings/settings.tsx
@@ -60,7 +60,7 @@ function SettingsItem(props: { children: ReactNode }) {
   const { children } = props;
 
   return (
-    <Box borderBottom='1' borderBottomColor='lightGray'>
+    <Box borderBottom={1} borderBottomColor='lightGray'>
       {children}
     </Box>
   );
@@ -94,13 +94,13 @@ return;
       <Skeleton>
         <Col
           height='100%'
-          borderRight='1'
+          borderRight={1}
           borderRightColor='lightGray'
           display={hash === '' ? 'flex' : ['none', 'flex']}
           width='100%'
           overflowY='auto'
         >
-          <Text display='block' mt='4' mb='3' mx='3' fontSize='2' fontWeight='700'>
+          <Text display='block' mt={4} mb={3} mx={3} fontSize={2} fontWeight='700'>
             System Preferences
           </Text>
           <Col>
diff --git a/pkg/interface/src/views/apps/term/api.tsx b/pkg/interface/src/views/apps/term/api.tsx
index 8216a771dc..077263efc3 100644
--- a/pkg/interface/src/views/apps/term/api.tsx
+++ b/pkg/interface/src/views/apps/term/api.tsx
@@ -1,6 +1,9 @@
 import _ from 'lodash';
 
 export default class Api {
+  ship: any;
+  channel: any;
+  bindPaths: any[];
   constructor(ship, channel) {
     this.ship = ship;
     this.channel = channel;
@@ -10,7 +13,7 @@ export default class Api {
   bind(path, method, ship = this.ship, appl = 'herm', success, fail) {
     this.bindPaths = _.uniq([...this.bindPaths, path]);
 
-    window.subscriptionId = this.channel.subscribe(ship, appl, path,
+    (window as any).subscriptionId = this.channel.subscribe(ship, appl, path,
       (err) => {
         fail(err);
       },
diff --git a/pkg/interface/src/views/apps/term/app.tsx b/pkg/interface/src/views/apps/term/app.tsx
index 58f1a0cbaa..cd0ba942f1 100644
--- a/pkg/interface/src/views/apps/term/app.tsx
+++ b/pkg/interface/src/views/apps/term/app.tsx
@@ -12,6 +12,11 @@ import Store from './store';
 import Subscription from './subscription';
 
 class TermApp extends Component {
+  store: Store;
+  api: any;
+  subscription: any;
+  props: any;
+  state: any;
   constructor(props) {
     super(props);
     this.store = new Store();
@@ -27,7 +32,7 @@ class TermApp extends Component {
 
   componentDidMount() {
     this.resetControllers();
-    const channel = new window.channel();
+    const channel = new (window as any).channel();
     this.api = new Api(this.props.ship, channel);
     this.store.api = this.api;
 
@@ -61,13 +66,13 @@ class TermApp extends Component {
                   display='flex'
                 >
                   <Col
-                    p='3'
+                    p={3}
                     backgroundColor='white'
                     width='100%'
-                    minHeight='0'
-                    minWidth='0'
+                    minHeight={0}
+                    minWidth={0}
                     color='lightGray'
-                    borderRadius='2'
+                    borderRadius={2}
                     mx={['0','3']}
                     mb={['0','3']}
                     border={['0','1']}
diff --git a/pkg/interface/src/views/apps/term/components/history.tsx b/pkg/interface/src/views/apps/term/components/history.tsx
index c5f0c5c3e6..9d011998f6 100644
--- a/pkg/interface/src/views/apps/term/components/history.tsx
+++ b/pkg/interface/src/views/apps/term/components/history.tsx
@@ -11,8 +11,8 @@ export class History extends Component {
     return (
       <Box
         height='100%'
-        minHeight='0'
-        minWidth='0'
+        minHeight={0}
+        minWidth={0}
         display='flex'
         flexDirection='column-reverse'
         overflowY='scroll'
diff --git a/pkg/interface/src/views/apps/term/components/input.tsx b/pkg/interface/src/views/apps/term/components/input.tsx
index 295b8b4893..b2f9dc26ef 100644
--- a/pkg/interface/src/views/apps/term/components/input.tsx
+++ b/pkg/interface/src/views/apps/term/components/input.tsx
@@ -2,6 +2,8 @@ import { BaseInput, Box, Row } from '@tlon/indigo-react';
 import React, { Component } from 'react';
 
 export class Input extends Component {
+  inputRef: React.RefObject<unknown>;
+  props: any;
   constructor(props) {
     super(props);
     this.state = {};
@@ -69,7 +71,7 @@ belt = { met: 'bac' };
   }
 
   paste(e) {
-    const clipboardData = e.clipboardData || window.clipboardData;
+    const clipboardData = e.clipboardData || (window as any).clipboardData;
     const clipboardText = clipboardData.getData('Text');
     this.props.api.belt({ txt: [...clipboardText] });
     e.preventDefault();
@@ -94,18 +96,18 @@ belt = { met: 'bac' };
       }
     }
     return (
-      <Row flexGrow='1' position='relative'>
-        <Box flexShrink='0' width='100%' color='black' fontSize='0'>
+      <Row flexGrow={1} position='relative'>
+        <Box flexShrink={0} width='100%' color='black' fontSize={0}>
           <BaseInput
             autoFocus
             autoCorrect="off"
             autoCapitalize="off"
             color='black'
-            minHeight='0'
+            minHeight={0}
             display='inline-block'
             width='100%'
             spellCheck="false"
-            tabindex="0"
+            tabindex={0}
             wrap="off"
             className="mono"
             id="term"
diff --git a/pkg/interface/src/views/apps/term/components/line.tsx b/pkg/interface/src/views/apps/term/components/line.tsx
index 3a22cfb50f..3852984f8e 100644
--- a/pkg/interface/src/views/apps/term/components/line.tsx
+++ b/pkg/interface/src/views/apps/term/components/line.tsx
@@ -57,7 +57,7 @@ export default React.memo(({ line }) => {
   //
   return (
     <Text mono display='flex'
-fontSize='0'
+fontSize={0}
     style={{ overflowWrap: 'break-word', whiteSpace: 'pre-wrap' }}
     >
       {text}
diff --git a/pkg/interface/src/views/apps/term/store.tsx b/pkg/interface/src/views/apps/term/store.tsx
index ebc1bce730..d2166083a4 100644
--- a/pkg/interface/src/views/apps/term/store.tsx
+++ b/pkg/interface/src/views/apps/term/store.tsx
@@ -2,6 +2,9 @@ import { saveAs } from 'file-saver';
 import bel from '../../../logic/lib/bel';
 
 export default class Store {
+  state: any;
+  api: any;
+  setState: any;
   constructor() {
     this.state = this.initialState();
   }
@@ -69,6 +72,7 @@ return h;
         break;
       case 'sag':
         blit.sav = blit.sag;
+        break;
       case 'sav':
         const name = blit.sav.path.split('/').slice(-2).join('.');
         const buff = new Buffer(blit.sav.file, 'base64');
diff --git a/pkg/interface/src/views/apps/term/subscription.tsx b/pkg/interface/src/views/apps/term/subscription.tsx
index c75c679ae1..178246e43f 100644
--- a/pkg/interface/src/views/apps/term/subscription.tsx
+++ b/pkg/interface/src/views/apps/term/subscription.tsx
@@ -1,4 +1,8 @@
 export default class Subscription {
+  store: any;
+  api: any;
+  channel: any;
+  firstRoundComplete: boolean;
   constructor(store, api, channel) {
     this.store = store;
     this.api = api;
@@ -51,13 +55,13 @@ return;
     console.error('event source error: ', err);
     console.log('initiating new channel');
     this.firstRoundComplete = false;
-    setTimeout(2000, () => {
+    setTimeout(() => {
       this.store.handleEvent({
         data: { clear : true }
       });
 
       this.start();
-    });
+    }, 2000);
   }
 
   subscribe(path, app) {
diff --git a/pkg/interface/src/views/components/Author.tsx b/pkg/interface/src/views/components/Author.tsx
index 58b3abc157..761a5b9853 100644
--- a/pkg/interface/src/views/components/Author.tsx
+++ b/pkg/interface/src/views/components/Author.tsx
@@ -2,6 +2,7 @@ import { BaseImage, Box, Row } from '@tlon/indigo-react';
 import moment from 'moment';
 import React, { ReactElement, ReactNode, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import GlobalApi from '~/logic/api/global';
 import { Sigil } from '~/logic/lib/sigil';
 import { useCopy } from '~/logic/lib/useCopy';
 import { cite, deSig, useShowNickname, uxToHex } from '~/logic/lib/util';
@@ -20,7 +21,7 @@ interface AuthorProps {
   unread?: boolean;
   api?: GlobalApi;
   size?: number;
-  lineHeight?: string;
+  lineHeight?: string | number;
 }
 
 // eslint-disable-next-line max-lines-per-function
@@ -106,7 +107,7 @@ export default function Author(props: AuthorProps & PropFunc<typeof Box>): React
       <Box
         ml={showImage ? 2 : 0}
         color='black'
-        fontSize='1'
+        fontSize={1}
         cursor='pointer'
         lineHeight={lineHeight}
         fontFamily={showNickname ? 'sans' : 'mono'}
diff --git a/pkg/interface/src/views/components/ChipInput.tsx b/pkg/interface/src/views/components/ChipInput.tsx
index 6b374394cc..bc075d86f2 100644
--- a/pkg/interface/src/views/components/ChipInput.tsx
+++ b/pkg/interface/src/views/components/ChipInput.tsx
@@ -1,18 +1,18 @@
 import {
-  Col,
+    Col,
 
-  ErrorLabel, Label,
-  Row,
+    ErrorLabel, Label,
+    Row,
 
-  StatelessTextInput as Input
+    StatelessTextInput as Input
 } from '@tlon/indigo-react';
 import { useField } from 'formik';
 import Mousetrap from 'mousetrap';
 import React, {
-  ReactElement, ReactNode, useCallback,
+    ReactElement, ReactNode, useCallback,
 
-  useEffect,
-  useRef, useState
+    useEffect,
+    useRef, useState
 } from 'react';
 
 function Chip(props: { children: ReactNode }): ReactElement {
@@ -20,9 +20,9 @@ function Chip(props: { children: ReactNode }): ReactElement {
     <Row
       alignItems="center"
       height="24px"
-      borderRadius="1"
-      my="1"
-      p="1"
+      borderRadius={1}
+      my={1}
+      p={1}
       bg="blue"
       color="white"
     >
@@ -93,15 +93,15 @@ export function ChipInput(props: ChipInputProps): ReactElement {
   }, [inputRef.current, addNewChip, newChip]);
 
   return (
-    <Col gapY="2">
+    <Col gapY={2}>
       <Label htmlFor={id}>{label}</Label>
       {caption && <Label gray>{caption}</Label>}
       <Row
-        border="1"
+        border={1}
         borderColor="washedGray"
-        borderRadius="1"
-        pl="2"
-        gapX="2"
+        borderRadius={1}
+        pl={2}
+        gapX={2}
         width="100%"
         flexWrap="wrap"
         minHeight="32px"
@@ -114,18 +114,18 @@ export function ChipInput(props: ChipInputProps): ReactElement {
           height="24px"
           flexShrink={1}
           flexGrow={1}
-          pl="0"
+          pl={0}
           ref={inputRef}
           onChange={onChange}
           value={newChip}
           onBlur={onBlur}
           placeholder={placeholder}
-          border="0"
-          my="1"
-          py="1"
+          border={0}
+          my={1}
+          py={1}
         />
       </Row>
-      <ErrorLabel mt="2" hasError={Boolean(meta.touched && meta.error)}>
+      <ErrorLabel mt={2} hasError={Boolean(meta.touched && meta.error)}>
         {meta.error}
       </ErrorLabel>
 
diff --git a/pkg/interface/src/views/components/ColorInput.tsx b/pkg/interface/src/views/components/ColorInput.tsx
index c947ee9d01..cf68ca0e5d 100644
--- a/pkg/interface/src/views/components/ColorInput.tsx
+++ b/pkg/interface/src/views/components/ColorInput.tsx
@@ -1,10 +1,10 @@
 import {
-  Box, Col,
+    Box, Col,
 
-  ErrorLabel, Label,
-  Row,
+    ErrorLabel, Label,
+    Row,
 
-  StatelessTextInput as Input
+    StatelessTextInput as Input
 } from '@tlon/indigo-react';
 import { useField } from 'formik';
 import React, { FormEvent } from 'react';
@@ -40,11 +40,11 @@ export function ColorInput(props: ColorInputProps) {
     <Box display='flex' flexDirection='column' {...rest}>
       <Label htmlFor={id}>{label}</Label>
       {caption ? (
-        <Label mt='2' gray>
+        <Label mt={2} gray>
           {caption}
         </Label>
       ) : null}
-      <Row mt='2' alignItems='flex-end'>
+      <Row mt={2} alignItems='flex-end'>
         <Input
           id={id}
           borderTopRightRadius={0}
@@ -79,7 +79,7 @@ export function ColorInput(props: ColorInputProps) {
           />
         </Box>
       </Row>
-      <ErrorLabel mt='2' hasError={Boolean(meta.touched && meta.error)}>
+      <ErrorLabel mt={2} hasError={Boolean(meta.touched && meta.error)}>
         {meta.error}
       </ErrorLabel>
     </Box>
diff --git a/pkg/interface/src/views/components/CommentItem.tsx b/pkg/interface/src/views/components/CommentItem.tsx
index cb2caa2f98..de8ebd88ab 100644
--- a/pkg/interface/src/views/components/CommentItem.tsx
+++ b/pkg/interface/src/views/components/CommentItem.tsx
@@ -11,8 +11,8 @@ import { getPermalinkForGraph } from '~/logic/lib/permalinks';
 import { getLatestCommentRevision } from '~/logic/lib/publish';
 import { useCopy } from '~/logic/lib/useCopy';
 import useMetadataState from '~/logic/state/metadata';
-import { GraphContent } from '../landscape/components/Graph/GraphContent';
 import Author from '~/views/components/Author';
+import { GraphContent } from '../landscape/components/Graph/GraphContent';
 
 const ClickBox = styled(Box)`
   cursor: pointer;
@@ -60,8 +60,9 @@ export function CommentItem(props: CommentItemProps) {
   };
 
   const ourMention = post?.contents?.some((e) => {
-      return e?.mention && e?.mention === window.ship;
-    });
+    if (!('mention' in e)) return false;
+    return e?.mention && e?.mention === window.ship;
+  });
 
   if (!highlighted) {
     if (ourMention) {
@@ -118,7 +119,7 @@ export function CommentItem(props: CommentItemProps) {
 
   return (
     <Box ref={ref} mb={4} opacity={post?.pending ? '60%' : '100%'}>
-      <Row px="1" my={3}>
+      <Row px={1} my={3}>
         <Author
           showImage
           ship={post?.author}
@@ -127,16 +128,16 @@ export function CommentItem(props: CommentItemProps) {
           group={group}
           isRelativeTime
         >
-          <Row px="2" gapX="2" height="18px">
+          <Row px={2} gapX={2} height="18px">
             <Action bg="white" onClick={doCopy}>{copyDisplay}</Action>
             {adminLinks}
           </Row>
         </Author>
       </Row>
       <GraphContent
-        borderRadius="1"
-        p="1"
-        mb="1"
+        borderRadius={1}
+        p={1}
+        mb={1}
         backgroundColor={highlighted ? 'washedBlue' : 'white'}
         transcluded={0}
         api={api}
diff --git a/pkg/interface/src/views/components/Comments.tsx b/pkg/interface/src/views/components/Comments.tsx
index 99d75adfe5..c9e0a6060b 100644
--- a/pkg/interface/src/views/components/Comments.tsx
+++ b/pkg/interface/src/views/components/Comments.tsx
@@ -82,7 +82,7 @@ export function Comments(props: CommentsProps & PropFunc<typeof Col>) {
       const post = createPost(
         content,
         commentNode.post.index,
-        parseInt(idx + 1, 10)
+        parseInt((idx + 1).toString(), 10).toString()
       );
       await api.graph.addPost(ship, name, post);
       history.push(baseUrl);
@@ -128,7 +128,7 @@ export function Comments(props: CommentsProps & PropFunc<typeof Col>) {
   const canComment = isWriter(group, association.resource) || association.metadata.vip === 'reader-comments';
 
   return (
-    <Col {...rest} minWidth='0'>
+    <Col {...rest} minWidth={0}>
       {( !editCommentId && canComment ? <CommentInput onSubmit={onSubmit} /> : null )}
       {( editCommentId ? (
         <CommentInput
diff --git a/pkg/interface/src/views/components/Dropdown.tsx b/pkg/interface/src/views/components/Dropdown.tsx
index fbbfa5b315..0e0d8b4ca1 100644
--- a/pkg/interface/src/views/components/Dropdown.tsx
+++ b/pkg/interface/src/views/components/Dropdown.tsx
@@ -1,8 +1,8 @@
 import { Box } from '@tlon/indigo-react';
 import React, {
-  ReactElement, ReactNode,
+    ReactElement, ReactNode,
 
-  useCallback, useEffect, useRef, useState
+    useCallback, useEffect, useRef, useState
 } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
@@ -84,7 +84,7 @@ export function Dropdown(props: DropdownProps): ReactElement {
   }, []);
 
   return (
-    <Box flexShrink={flexShrink} position={open ? 'relative' : 'static'} minWidth='0' width={props?.width ? props.width : 'auto'}>
+    <Box flexShrink={flexShrink} position={open ? 'relative' : 'static'} minWidth={0} width={props?.width ? props.width : 'auto'}>
       <ClickBox width='100%' ref={anchorRef} onClick={onOpen}>
         {children}
       </ClickBox>
diff --git a/pkg/interface/src/views/components/DropdownSearch.tsx b/pkg/interface/src/views/components/DropdownSearch.tsx
index 7beda190c8..9141b41d24 100644
--- a/pkg/interface/src/views/components/DropdownSearch.tsx
+++ b/pkg/interface/src/views/components/DropdownSearch.tsx
@@ -1,14 +1,14 @@
 import {
-  Box,
-  StatelessTextInput as Input
+    Box,
+    StatelessTextInput as Input
 } from '@tlon/indigo-react';
 import _ from 'lodash';
 import Mousetrap from 'mousetrap';
 import React, {
-  ChangeEvent,
-  ReactElement, useCallback,
-  useEffect, useMemo, useRef,
-  useState
+    ChangeEvent,
+    ReactElement, useCallback,
+    useEffect, useMemo, useRef,
+    useState
 } from 'react';
 import { useDropdown } from '~/logic/lib/useDropdown';
 import { PropFunc } from '~/types/util';
@@ -140,9 +140,9 @@ export function DropdownSearch<C>(props: DropdownSearchProps<C>): ReactElement {
       />
       {dropdown.length !== 0 && query.length !== 0 && (
         <Box
-          mt="1"
-          border="1"
-          borderRadius="1"
+          mt={1}
+          border={1}
+          borderRadius={1}
           borderColor="washedGray"
           bg="white"
           width="100%"
diff --git a/pkg/interface/src/views/components/Error.tsx b/pkg/interface/src/views/components/Error.tsx
index 8fee3564eb..5b59a73c8c 100644
--- a/pkg/interface/src/views/components/Error.tsx
+++ b/pkg/interface/src/views/components/Error.tsx
@@ -29,7 +29,7 @@ class ErrorComponent extends Component<ErrorProps> {
       body =`\`\`\`%0A${error.stack?.replaceAll('\n', '%0A')}%0A\`\`\``;
     }
     return (
-      <Col alignItems="center" justifyContent="center" height="100%" p="4" backgroundColor="white" maxHeight="100%">
+      <Col alignItems="center" justifyContent="center" height="100%" p={4} backgroundColor="white" maxHeight="100%">
         <Box mb={4}>
           <Text fontSize={3}>
            {code ? code : 'Error'}
diff --git a/pkg/interface/src/views/components/FormGroup.tsx b/pkg/interface/src/views/components/FormGroup.tsx
index 6d82ee84a8..84a5cc0910 100644
--- a/pkg/interface/src/views/components/FormGroup.tsx
+++ b/pkg/interface/src/views/components/FormGroup.tsx
@@ -2,9 +2,9 @@ import { Box, Button, Row } from '@tlon/indigo-react';
 import { useFormikContext } from 'formik';
 import _ from 'lodash';
 import React, {
-  useCallback, useEffect,
+    useCallback, useEffect,
 
-  useMemo, useState
+    useMemo, useState
 } from 'react';
 import { Prompt } from 'react-router-dom';
 import { FormGroupContext, SubmitHandler } from '~/logic/lib/formGroup';
@@ -152,10 +152,10 @@ export function FormGroup(props: { onReset?: () => void; } & PropFunc<typeof Box
         width="100%"
         position="sticky"
         bottom="0px"
-        p="3"
-        gapX="2"
+        p={3}
+        gapX={2}
         backgroundColor="white"
-        borderTop="1"
+        borderTop={1}
         borderTopColor="washedGray"
       >
         <Button onClick={resetAll}>Cancel</Button>
diff --git a/pkg/interface/src/views/components/FormSubmit.tsx b/pkg/interface/src/views/components/FormSubmit.tsx
index 22f3320f29..ad53f6b3f0 100644
--- a/pkg/interface/src/views/components/FormSubmit.tsx
+++ b/pkg/interface/src/views/components/FormSubmit.tsx
@@ -22,10 +22,10 @@ export function FormSubmit<T = unknown>(props: FormSubmitProps): ReactElement {
 
   return (
     <Row
-      p="2"
+      p={2}
       bottom="0px"
       justifyContent={props.start ? 'flex-start' : 'flex-end'}
-      gapX="2"
+      gapX={2}
       alignItems="center"
     >
       {dirty && !isSubmitting && (
diff --git a/pkg/interface/src/views/components/GroupLink.tsx b/pkg/interface/src/views/components/GroupLink.tsx
index 7716823d64..8388b82740 100644
--- a/pkg/interface/src/views/components/GroupLink.tsx
+++ b/pkg/interface/src/views/components/GroupLink.tsx
@@ -1,4 +1,5 @@
 import { Box, Col, Row, Text } from '@tlon/indigo-react';
+import { MetadataUpdatePreview } from '@urbit/api';
 import React, { ReactElement, useEffect, useLayoutEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
@@ -56,20 +57,20 @@ onClick={(e) => {
         width="fit-content"
         flexShrink={1}
         alignItems="center"
-        py="2"
-        pr="2"
+        py={2}
+        pr={2}
         onClick={
           joined ? () => history.push(`/~landscape/ship/${name}`) : showModal
         }
         cursor='pointer'
         opacity={preview ? '1' : '0.6'}
       >
-        <MetadataIcon height={6} width={6} metadata={preview ? preview.metadata : { 'color': '0x0' }} />
+        <MetadataIcon height={6} width={6} metadata={preview ? preview.metadata : { color: '0x0' , picture: ''}} />
           <Col>
-          <Text ml="2" fontWeight="medium" mono={!preview}>
+          <Text ml={2} fontWeight="medium" mono={!preview}>
             {preview ? preview.metadata.title : name}
           </Text>
-          <Text pt='1' ml='2'>{preview ? `${preview.members} members` : 'Fetching member count'}</Text>
+          <Text pt={1} ml={2}>{preview ? `${preview.members} members` : 'Fetching member count'}</Text>
         </Col>
       </Row>
     </Box>
diff --git a/pkg/interface/src/views/components/GroupSearch.tsx b/pkg/interface/src/views/components/GroupSearch.tsx
index 0675a73da4..eb4c77f744 100644
--- a/pkg/interface/src/views/components/GroupSearch.tsx
+++ b/pkg/interface/src/views/components/GroupSearch.tsx
@@ -1,10 +1,10 @@
 import {
-  Box,
+    Box,
 
-  Col,
+    Col,
 
-  ErrorLabel, Icon, Label,
-  Row, Text
+    ErrorLabel, Icon, Label,
+    Row, Text
 } from '@tlon/indigo-react';
 import { Association } from '@urbit/api/metadata';
 import { FieldArray, useFormikContext } from 'formik';
@@ -132,12 +132,12 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
           <Col>
             <Label htmlFor={id}>{label}</Label>
             {caption && (
-              <Label gray mt="2">
+              <Label gray mt={2}>
                 {caption}
               </Label>
             )}
               <DropdownSearch<Association>
-                mt="2"
+                mt={2}
                 candidates={groups}
                 placeholder="Search for groups..."
                 disabled={props.maxLength ? value.length >= props.maxLength : false}
@@ -156,16 +156,16 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
                   return (
                     <Row
                       key={e}
-                      borderRadius="1"
-                      mt="2"
+                      borderRadius={1}
+                      mt={2}
                       width="fit-content"
-                      border="1"
+                      border={1}
                       borderColor="gray"
                       height="32px"
-                      px="2"
+                      px={2}
                       alignItems="center"
                     >
-                      <Text mr="2">{title || e}</Text>
+                      <Text mr={2}>{title || e}</Text>
                       <Icon onClick={() => onRemove(idx)} icon="X" />
                     </Row>
                   );
diff --git a/pkg/interface/src/views/components/IconRadio.tsx b/pkg/interface/src/views/components/IconRadio.tsx
index f32cbc48a1..ec1d318ca0 100644
--- a/pkg/interface/src/views/components/IconRadio.tsx
+++ b/pkg/interface/src/views/components/IconRadio.tsx
@@ -1,9 +1,9 @@
 import {
-  BaseLabel, Box,
+    BaseLabel, Box,
 
-  Col, Icon,
+    Col, Icon,
 
-  Label, Row
+    Label, Row
 } from '@tlon/indigo-react';
 import { useField } from 'formik';
 import React, { useCallback, useMemo } from 'react';
@@ -86,7 +86,7 @@ return indicator.state.offError;
   }, [selected, disabled, hasError]);
 
   return (
-    <Box borderRadius="1" border="1" {...rest} {...style}>
+    <Box borderRadius={1} border={1} {...rest} {...style}>
       {children}
     </Box>
   );
@@ -121,10 +121,10 @@ export function IconRadio(props: IconRadioProps) {
           hasError={meta.touched && meta.error !== undefined}
           selected={field.checked}
           disabled={disabled}
-          mr="2"
+          mr={2}
         >
           <Icon
-            m="2"
+            m={2}
             color={field.checked ? 'white' : 'black'}
             icon={icon as any}
           />
@@ -132,7 +132,7 @@ export function IconRadio(props: IconRadioProps) {
         <Col justifyContent="space-around">
           <Label color={field.checked ? 'blue' : 'black'}>{label}</Label>
           {caption ? (
-            <Label gray mt="2">
+            <Label gray mt={2}>
               {caption}
             </Label>
           ) : null}
diff --git a/pkg/interface/src/views/components/ImageInput.tsx b/pkg/interface/src/views/components/ImageInput.tsx
index 210d60625f..71e27a0def 100644
--- a/pkg/interface/src/views/components/ImageInput.tsx
+++ b/pkg/interface/src/views/components/ImageInput.tsx
@@ -139,11 +139,11 @@ export function ImageInput(props: ImageInputProps): ReactElement {
     <Box display="flex" flexDirection="column" {...props}>
       <Label htmlFor={id}>{label}</Label>
       {caption ? (
-        <Label mt="2" gray>
+        <Label mt={2} gray>
           {caption}
         </Label>
       ) : null}
-      <Row mt="2" alignItems="flex-end" position='relative' width='100%'>
+      <Row mt={2} alignItems="flex-end" position='relative' width='100%'>
         {prompt(field, uploading, meta, clickUploadButton)}
         {clearButton(field, uploading, clearEvt)}
         {uploadingStatus(uploading, meta)}
diff --git a/pkg/interface/src/views/components/Invite/Group.tsx b/pkg/interface/src/views/components/Invite/Group.tsx
index 899e6f5966..0a8476c245 100644
--- a/pkg/interface/src/views/components/Invite/Group.tsx
+++ b/pkg/interface/src/views/components/Invite/Group.tsx
@@ -2,18 +2,15 @@ import { css } from '@styled-system/css';
 import {
   Box,
   Icon,
-
   LoadingSpinner, Row, Text
 } from '@tlon/indigo-react';
 import {
   Invite, joinProgress,
-
   JoinRequest,
-
   Metadata, MetadataUpdatePreview,
-
   resourceFromPath
 } from '@urbit/api';
+import { GraphConfig } from '@urbit/api/dist';
 import _ from 'lodash';
 import React, { ReactElement, ReactNode, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
@@ -81,10 +78,10 @@ function inviteUrl(hidden: boolean, resource: string, metadata?: Metadata) {
     return `/~landscape${resource}`;
   }
 
-  if (metadata?.config.graph === 'chat') {
-    return `/~landscape/messages/resource/${metadata?.config?.graph}${resource}`;
+  if ((metadata?.config as GraphConfig).graph === 'chat') {
+    return `/~landscape/messages/resource/${(metadata?.config as GraphConfig)?.graph}${resource}`;
   } else {
-    return `/~landscape/home/resource/${metadata?.config?.graph}${resource}`;
+    return `/~landscape/home/resource/${(metadata?.config as GraphConfig)?.graph}${resource}`;
   }
 }
 function InviteMetadata(props: {
@@ -99,7 +96,7 @@ function InviteMetadata(props: {
   }
 
   const container = (children: ReactNode) => (
-    <Row overflow="hidden" height="4" gapX="2" alignItems="center">
+    <Row overflow="hidden" height={4} gapX={2} alignItems="center">
       {children}
     </Row>
   );
@@ -137,7 +134,7 @@ function InviteStatus(props: { status?: JoinRequest }) {
   const current = status && joinProgress.indexOf(status.progress);
   const desc = _.isNumber(current) && description[current];
   return (
-    <Row gapX="1" alignItems="center" height={4}>
+    <Row gapX={1} alignItems="center" height={4}>
       { status.progress === 'done' ? <Icon icon="Checkmark" /> : <LoadingSpinner dark /> }
       <Text gray>{desc}</Text>
     </Row>
@@ -226,7 +223,7 @@ function InviteActions(props: {
       return null;
     }
     return (
-      <Row gapX="2" alignItems="center" height={4}>
+      <Row gapX={2} alignItems="center" height={4}>
         <StatelessAsyncButton
           height={4}
           backgroundColor="white"
@@ -239,7 +236,7 @@ function InviteActions(props: {
   }
 
   return (
-    <Row gapX="2" alignItems="center" height={4}>
+    <Row gapX={2} alignItems="center" height={4}>
       <StatelessAsyncButton
         color="blue"
         height={4}
@@ -298,7 +295,7 @@ export function GroupInvite(props: GroupInviteProps): ReactElement {
     <NotificationWrapper api={api}>
       <Header content {...headerProps} />
       <Row onClick={onClick} height={[null, 4]} alignItems="flex-start" gridArea="main">
-        <Elbow mx="2" />
+        <Elbow mx={2} />
         <ResponsiveRow
           gapXY={[1, 2]}
           height={[null, 4]}
diff --git a/pkg/interface/src/views/components/Invite/InviteSkeleton.tsx b/pkg/interface/src/views/components/Invite/InviteSkeleton.tsx
index d298776daf..7d8f355f13 100644
--- a/pkg/interface/src/views/components/Invite/InviteSkeleton.tsx
+++ b/pkg/interface/src/views/components/Invite/InviteSkeleton.tsx
@@ -24,15 +24,15 @@ export function InviteSkeleton(
   } = props;
   return (
     <>
-      <Col width="100%" p="1" {...rest}>
+      <Col width="100%" p={1} {...rest}>
         {children}
-        <Row px="4" gapX="4">
+        <Row px={4} gapX={4}>
           <StatelessAsyncAction
             name="accept"
             bg="transparent"
             onClick={onAccept}
             color="blue"
-            mr="2"
+            mr={2}
           >
             {acceptDesc}
           </StatelessAsyncAction>
diff --git a/pkg/interface/src/views/components/Invite/JoinSkeleton.tsx b/pkg/interface/src/views/components/Invite/JoinSkeleton.tsx
index 1531d0b5bc..c6f1730f24 100644
--- a/pkg/interface/src/views/components/Invite/JoinSkeleton.tsx
+++ b/pkg/interface/src/views/components/Invite/JoinSkeleton.tsx
@@ -16,7 +16,7 @@ export function JoinSkeleton(props: JoinSkeletonProps): ReactElement {
   const { api, resource, children, status, ...rest } = props;
   return (
     <>
-      <Col p="1" {...rest}>
+      <Col p={1} {...rest}>
         {children}
         <JoiningStatus api={api} resource={resource} status={status} />
       </Col>
diff --git a/pkg/interface/src/views/components/Loading.tsx b/pkg/interface/src/views/components/Loading.tsx
index 0d42e90feb..b305f13da3 100644
--- a/pkg/interface/src/views/components/Loading.tsx
+++ b/pkg/interface/src/views/components/Loading.tsx
@@ -7,7 +7,7 @@ interface LoadingProps {
 }
 export function Loading({ text }: LoadingProps) {
   return (
-    <Body border="0">
+    <Body border={0}>
       <Center height="100%">
         <LoadingSpinner />
         {Boolean(text) && <Text ml={4}>{text}</Text>}
diff --git a/pkg/interface/src/views/components/MentionText.tsx b/pkg/interface/src/views/components/MentionText.tsx
index fbe68f4d14..746e9a1ff3 100644
--- a/pkg/interface/src/views/components/MentionText.tsx
+++ b/pkg/interface/src/views/components/MentionText.tsx
@@ -40,7 +40,7 @@ export function MentionText(props: MentionTextProps) {
 export function Mention(props: {
   ship: string;
   first?: boolean;
-  api: any;
+  api: GlobalApi;
 }) {
   const { ship, first, api, ...rest } = props;
   const contact = useContact(`~${deSig(ship)}`);
diff --git a/pkg/interface/src/views/components/OverlaySigil.tsx b/pkg/interface/src/views/components/OverlaySigil.tsx
index 9fbc3091d8..5b90e8ae75 100644
--- a/pkg/interface/src/views/components/OverlaySigil.tsx
+++ b/pkg/interface/src/views/components/OverlaySigil.tsx
@@ -1,17 +1,20 @@
 import { Box, ColProps } from '@tlon/indigo-react';
 import { Contact, Group } from '@urbit/api';
+import { History } from 'history';
 import React, { useEffect, useRef, useState } from 'react';
+import GlobalApi from '~/logic/api/global';
 import ProfileOverlay, { OVERLAY_HEIGHT } from './ProfileOverlay';
 
 type OverlaySigilProps = ColProps & {
-  api: any;
+  api: GlobalApi;
   className: string;
   color: string;
   contact?: Contact;
   group?: Group;
-  history: any;
+  history: History;
   scrollWindow?: HTMLElement;
   ship: string;
+  onDismiss: () => void;
 };
 
 interface OverlaySigilState {
@@ -36,8 +39,8 @@ export const OverlaySigil = (props: OverlaySigilProps) => {
     ...rest
   } = { ...props };
   const containerRef = useRef(null);
-  const [visible, setVisible] = useState<OverlaySigilState.visible>();
-  const [space, setSpace] = useState<OverlaySigilState.space>({
+  const [visible, setVisible] = useState<OverlaySigilState['visible']>();
+  const [space, setSpace] = useState<OverlaySigilState['space']>({
     top: 'auto',
     bottom: 'auto'
   });
@@ -86,14 +89,10 @@ export const OverlaySigil = (props: OverlaySigilProps) => {
     >
       <ProfileOverlay
         api={api}
-        bottomSpace={space.bottom}
+        bottom={space.bottom}
         color={color}
-        contact={contact}
-        group={group}
-        history={history}
-        onDismiss={onDismiss}
         ship={ship}
-        topSpace={space.top}
+        top={space.top}
         {...rest}
       />
     </Box>
diff --git a/pkg/interface/src/views/components/ProfileOverlay.tsx b/pkg/interface/src/views/components/ProfileOverlay.tsx
index 51c714cd28..266242b7b2 100644
--- a/pkg/interface/src/views/components/ProfileOverlay.tsx
+++ b/pkg/interface/src/views/components/ProfileOverlay.tsx
@@ -1,29 +1,34 @@
-import React, { useCallback, useEffect, useRef, useState, useMemo, ReactNode } from 'react';
-import { uxToHex, cite } from '@urbit/api';
-import { useShowNickname } from '~/logic/lib/util';
+import {
+  BaseImage, Box,
+
+
+
+
+
+  BoxProps,
+  Center, Col,
+
+
+  Icon, Row,
+
+  Text
+} from '@tlon/indigo-react';
+import { cite, uxToHex } from '@urbit/api';
 import _ from 'lodash';
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import VisibilitySensor from 'react-visibility-sensor';
 import styled from 'styled-components';
 import { getRelativePosition } from '~/logic/lib/relativePosition';
 import { Sigil } from '~/logic/lib/sigil';
-import {
-  Box,
-  Row,
-  Col,
-  Text,
-  BaseImage,
-  Icon,
-  BoxProps,
-  Center
-} from '@tlon/indigo-react';
-import RichText from './RichText';
-import { ProfileStatus } from './ProfileStatus';
-import useSettingsState from '~/logic/state/settings';
-import { useOutsideClick } from '~/logic/lib/useOutsideClick';
 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 from '~/logic/state/settings';
 import { Portal } from './Portal';
+import { ProfileStatus } from './ProfileStatus';
+import RichText from './RichText';
 
 export const OVERLAY_HEIGHT = 250;
 const FixedOverlay = styled(Col)`
@@ -37,7 +42,7 @@ const FixedOverlay = styled(Col)`
 type ProfileOverlayProps = BoxProps & {
   ship: string;
   api: any;
-  children: ReactNode;
+  children?: ReactNode;
   color?: string;
 };
 
@@ -143,7 +148,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
         borderColor='lightGray'
         boxShadow='0px 0px 0px 3px'
         zIndex={3}
-        fontSize='0'
+        fontSize={0}
         height='250px'
         width='250px'
         padding={3}
@@ -172,7 +177,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
         <Col
           position='absolute'
           overflow='hidden'
-          minWidth='0'
+          minWidth={0}
           width='100%'
           padding={3}
           bottom={0}
@@ -185,7 +190,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
               textOverflow='ellipsis'
               overflow='hidden'
               whiteSpace='pre'
-              marginBottom='0'
+              marginBottom={0}
               cursor='pointer'
               display={didCopy ? 'none' : 'block'}
               onClick={doCopy}
@@ -194,7 +199,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
             </Text>
             <Text
               fontWeight='600'
-              marginBottom='0'
+              marginBottom={0}
             >
               {copyDisplay}
             </Text>
@@ -209,11 +214,11 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
             <RichText
               display='inline-block'
               width='100%'
-              minWidth='0'
+              minWidth={0}
               textOverflow='ellipsis'
               overflow='hidden'
               whiteSpace='pre'
-              marginBottom='0'
+              marginBottom={0}
               disableRemoteContent
               gray
               title={contact?.status ? contact.status : ''}
diff --git a/pkg/interface/src/views/components/ReconnectButton.tsx b/pkg/interface/src/views/components/ReconnectButton.tsx
index 2e105f4e6a..725506ce46 100644
--- a/pkg/interface/src/views/components/ReconnectButton.tsx
+++ b/pkg/interface/src/views/components/ReconnectButton.tsx
@@ -7,14 +7,14 @@ const ReconnectButton = ({ connection, subscription }) => {
 
   if (connectedStatus === 'disconnected') {
     return (
-      <Button onClick={reconnect} borderColor='red' px='2'>
+      <Button onClick={reconnect} borderColor='red' px={2}>
         <Text display={['none', 'inline']} textAlign='middle' color='red'>Reconnect</Text>
         <Text color='red'> ↻</Text>
       </Button>
     );
   } else if (connectedStatus === 'reconnecting') {
     return (
-      <Button borderColor='yellow' px='2' onClick={() => {}} cursor='default'>
+      <Button borderColor='yellow' px={2} onClick={() => {}} cursor='default'>
         <LoadingSpinner pr={['0','2']} foreground='scales.yellow60' background='scales.yellow30' />
         <Text display={['none', 'inline']} textAlign='middle' color='yellow'>Reconnecting</Text>
       </Button>
diff --git a/pkg/interface/src/views/components/RemoteContent.tsx b/pkg/interface/src/views/components/RemoteContent.tsx
index 304c917741..712eb0187c 100644
--- a/pkg/interface/src/views/components/RemoteContent.tsx
+++ b/pkg/interface/src/views/components/RemoteContent.tsx
@@ -21,6 +21,7 @@ type RemoteContentProps = VirtualContextProps & {
   textProps?: any;
   style?: any;
   transcluded?: any;
+  className?: string;
 }
 
 interface RemoteContentState {
@@ -132,15 +133,15 @@ return;
   wrapInLink(contents, textOnly = false, unfold = false, unfoldEmbed = null, embedContainer = null, flushPadding = false, noOp = false) {
     const { style } = this.props;
     return (
-      <Box borderRadius="1" backgroundColor="washedGray" maxWidth="min(100%, 20rem)">
+      <Box borderRadius={1} backgroundColor="washedGray" maxWidth="min(100%, 20rem)">
       <Row
         alignItems="center"
-        gapX="1"
+        gapX={1}
       >
-        { textOnly && (<Icon ml="2" display="block" icon="ArrowExternal" />)}
+        { textOnly && (<Icon ml={2} display="block" icon="ArrowExternal" />)}
         { !textOnly && unfoldEmbed && (
           <Icon
-            ml='2'
+            ml={2}
             display='block'
             onClick={unfoldEmbed}
             icon={unfold ? 'TriangleSouth' : 'TriangleEast'}
@@ -156,7 +157,7 @@ return;
           whiteSpace="nowrap"
           overflow="hidden"
           textOverflow="ellipsis"
-          minWidth="0"
+          minWidth={0}
           width={textOnly ? 'calc(100% - 24px)' : 'fit-content'}
           maxWidth="min(500px, 100%)"
           style={{ color: 'inherit', textDecoration: 'none', ...style }}
@@ -318,7 +319,7 @@ return;
       }
      const renderEmbed = !(this.state.embed !== 'error' && this.state.embed?.html);
      const embed = <Box
-            mb='2'
+            mb={2}
             width='100%'
             flexShrink={0}
             display={this.state.unfold ? 'block' : 'none'}
diff --git a/pkg/interface/src/views/components/RichText.tsx b/pkg/interface/src/views/components/RichText.tsx
index 460d937f31..3134464ac8 100644
--- a/pkg/interface/src/views/components/RichText.tsx
+++ b/pkg/interface/src/views/components/RichText.tsx
@@ -1,8 +1,10 @@
 import { Anchor, Text } from '@tlon/indigo-react';
+import { Contact, Group } from '@urbit/api';
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, { ReactMarkdownProps } from 'react-markdown';
 import RemarkDisableTokenizers from 'remark-disable-tokenizers';
 import { isValidPatp } from 'urbit-ob';
+import GlobalApi from '~/logic/api/global';
 import { deSig } from '~/logic/lib/util';
 import { PermalinkEmbed } from '~/views/apps/permalinks/embed';
 import { Mention } from '~/views/components/MentionText';
@@ -21,7 +23,20 @@ const DISABLED_BLOCK_TOKENS = [
 
 const DISABLED_INLINE_TOKENS = [];
 
-const RichText = React.memo(({ disableRemoteContent, api, ...props }) => (
+type RichTextProps = ReactMarkdownProps & {
+  api: GlobalApi;
+  disableRemoteContent?: boolean;
+  contact?: Contact;
+  group?: Group;
+  pending?: boolean;
+  transcluded?: number;
+  inline?: boolean;
+  color?: string;
+  children?: any;
+  width?: string;
+}
+
+const RichText = React.memo(({ disableRemoteContent = false, api, ...props }: RichTextProps) => (
   <ReactMarkdown
     {...props}
     renderers={{
@@ -80,7 +95,7 @@ const RichText = React.memo(({ disableRemoteContent, api, ...props }) => (
         );
       },
       paragraph: (paraProps) => {
-        return <Text display={props.inline ? 'inline' : 'block'} mb='2' {...props}>{paraProps.children}</Text>;
+        return <Text display={props.inline ? 'inline' : 'block'} mb={2} {...props}>{paraProps.children}</Text>;
       }
     }}
     plugins={[[
diff --git a/pkg/interface/src/views/components/ShipSearch.tsx b/pkg/interface/src/views/components/ShipSearch.tsx
index f3a569c05f..da7791262e 100644
--- a/pkg/interface/src/views/components/ShipSearch.tsx
+++ b/pkg/interface/src/views/components/ShipSearch.tsx
@@ -1,18 +1,18 @@
 import {
-  Col,
-  ErrorLabel, Icon, Label,
+    Col,
+    ErrorLabel, Icon, Label,
 
-  Row, Text
+    Row, Text
 } from '@tlon/indigo-react';
 import { Groups, Rolodex } from '@urbit/api';
 import { FieldArray, useFormikContext } from 'formik';
 import _ from 'lodash';
 import React, {
-  ChangeEvent,
+    ChangeEvent,
 
-  ReactElement, useCallback, useMemo,
+    ReactElement, useCallback, useMemo,
 
-  useRef
+    useRef
 } from 'react';
 import ob from 'urbit-ob';
 import * as Yup from 'yup';
@@ -181,13 +181,13 @@ export function ShipSearch<I extends string, V extends Value<I>>(
           <Col>
             <Label htmlFor={id}>{label}</Label>
             {caption && (
-              <Label gray mt="2">
+              <Label gray mt={2}>
                 {caption}
               </Label>
             )}
 
             <DropdownSearch<string>
-              mt="2"
+              mt={2}
               isExact={isExact}
               placeholder="Search for ships"
               candidates={peers}
@@ -210,7 +210,7 @@ export function ShipSearch<I extends string, V extends Value<I>>(
                   py={1}
                   px={2}
                   color="black"
-                  borderRadius="2"
+                  borderRadius={2}
                   bg="washedGray"
                   fontSize={0}
                   mt={2}
@@ -226,7 +226,7 @@ export function ShipSearch<I extends string, V extends Value<I>>(
                 </Row>
               ))}
             </Row>
-            <ErrorLabel mt="3" hasError={error.length > 0}>
+            <ErrorLabel mt={3} hasError={error.length > 0}>
               {error.join(', ')}
             </ErrorLabel>
           </Col>
diff --git a/pkg/interface/src/views/components/ShuffleFields.tsx b/pkg/interface/src/views/components/ShuffleFields.tsx
index 7c1ecfb60f..40498a6229 100644
--- a/pkg/interface/src/views/components/ShuffleFields.tsx
+++ b/pkg/interface/src/views/components/ShuffleFields.tsx
@@ -1,9 +1,9 @@
 import { Box, Icon } from '@tlon/indigo-react';
 import {
-  FieldArray,
-  FieldArrayRenderProps,
+    FieldArray,
+    FieldArrayRenderProps,
 
-  useFormikContext
+    useFormikContext
 } from 'formik';
 import React, { ReactNode, useMemo } from 'react';
 
@@ -38,11 +38,11 @@ export function ShuffleFields<N extends string, T, F extends Value<N, T>>(
           }
         };
         return (
-          <Box gridColumnGap="2" gridRowGap="3" display="grid" gridAutoRows="auto" gridTemplateColumns="32px 32px 1fr">
+          <Box gridColumnGap={2} gridRowGap={3} display="grid" gridAutoRows="auto" gridTemplateColumns="32px 32px 1fr">
             {fields.map((field, i) => (
               <React.Fragment key={i}>
-                <Icon width="3" height="3" icon="ChevronNorth" onClick={goUp(i)} />
-                <Icon width="3" height="3" icon="ChevronSouth" onClick={goDown(i)} />
+                <Icon width={3} height={3} icon="ChevronNorth" onClick={goUp(i)} />
+                <Icon width={3} height={3} icon="ChevronSouth" onClick={goDown(i)} />
                 {children(i, arrayHelpers)}
               </React.Fragment>
             ))}
diff --git a/pkg/interface/src/views/components/Spinner.tsx b/pkg/interface/src/views/components/Spinner.tsx
index 69e18ed396..929435ca71 100644
--- a/pkg/interface/src/views/components/Spinner.tsx
+++ b/pkg/interface/src/views/components/Spinner.tsx
@@ -6,13 +6,13 @@ const Spinner = ({
   text = '',
   awaiting = false
 }) => awaiting ? (
-  <Text zIndex='2' display='flex' className={classes}>
+  <Text zIndex={2} display='flex' className={classes}>
     <LoadingSpinner
       foreground='black'
       background='gray'
       style={{ flexShrink: 0 }}
     />
-    <Text display='inline-block' ml='2' verticalAlign='middle' flexShrink='0'>{text}</Text>
+    <Text display='inline-block' ml={2} verticalAlign='middle' flexShrink={0}>{text}</Text>
   </Text>
 ) : null;
 
diff --git a/pkg/interface/src/views/components/StatelessAsyncToggle.tsx b/pkg/interface/src/views/components/StatelessAsyncToggle.tsx
index 749fac67ce..50fed53fce 100644
--- a/pkg/interface/src/views/components/StatelessAsyncToggle.tsx
+++ b/pkg/interface/src/views/components/StatelessAsyncToggle.tsx
@@ -26,7 +26,7 @@ export function StatelessAsyncToggle({
   ) : state === 'loading' ? (
     <LoadingSpinner foreground={'white'} background="gray" />
   ) : state === 'success' ? (
-    <Text mx="2">Done</Text>
+    <Text mx={2}>Done</Text>
   ) : (
     <Toggle onClick={handleClick} {...rest} />
   );
diff --git a/pkg/interface/src/views/components/StatusBar.tsx b/pkg/interface/src/views/components/StatusBar.tsx
index 50a5d696e8..11adb07cac 100644
--- a/pkg/interface/src/views/components/StatusBar.tsx
+++ b/pkg/interface/src/views/components/StatusBar.tsx
@@ -67,16 +67,16 @@ const StatusBar = (props) => {
       width='100%'
       gridTemplateRows='30px'
       gridTemplateColumns='3fr 1fr'
-      py='3'
-      px='3'
-      pb='3'
+      py={3}
+      px={3}
+      pb={3}
     >
       <Row collapse>
         <Button
           width='32px'
           borderColor='lightGray'
-          mr='2'
-          px='2'
+          mr={2}
+          px={2}
           onClick={() => history.push('/')}
           {...props}
         >
@@ -103,13 +103,13 @@ const StatusBar = (props) => {
       </Row>
       <Row justifyContent='flex-end' collapse>
         <StatusBarItem
-          mr='2'
+          mr={2}
           backgroundColor='yellow'
           display={
             process.env.LANDSCAPE_STREAM === 'development' ? 'flex' : 'none'
           }
           justifyContent='flex-end'
-          flexShrink='0'
+          flexShrink={0}
           onClick={() =>
             window.open(
               'https://github.com/urbit/landscape/issues/new' +
@@ -132,7 +132,7 @@ const StatusBar = (props) => {
           width='auto'
           alignY='top'
           alignX='right'
-          flexShrink={'0'}
+          flexShrink={0}
           offsetY={-48}
           options={
             <Col
@@ -167,7 +167,7 @@ const StatusBar = (props) => {
                 System Preferences
               </Row>
               <Row px={3} pt={2} pb={1} flexDirection='column'>
-                <Text color='gray' fontWeight='500' mb='1'>
+                <Text color='gray' fontWeight='500' mb={1}>
                   Set Status:
                 </Text>
                 <ProfileStatus
@@ -182,7 +182,7 @@ const StatusBar = (props) => {
           <StatusBarItem
             px={xPadding}
             width='32px'
-            flexShrink='0'
+            flexShrink={0}
             backgroundColor={bgColor}
           >
             {profileImage}
diff --git a/pkg/interface/src/views/components/SubmitDragger.tsx b/pkg/interface/src/views/components/SubmitDragger.tsx
index ebb9ebee89..a7df5e3090 100644
--- a/pkg/interface/src/views/components/SubmitDragger.tsx
+++ b/pkg/interface/src/views/components/SubmitDragger.tsx
@@ -3,10 +3,10 @@ import React, { ReactElement } from 'react';
 
 const SubmitDragger = (): ReactElement => (
   <Box
-    top='0'
-    bottom='0'
-    left='0'
-    right='0'
+    top={0}
+    bottom={0}
+    left={0}
+    right={0}
     position='absolute'
     backgroundColor='white'
     height='100%'
@@ -16,7 +16,7 @@ const SubmitDragger = (): ReactElement => (
     justifyContent='center'
     style={{ pointerEvents: 'none', zIndex: 999 }}
   >
-      <Text fontSize='1' color='black'>
+      <Text fontSize={1} color='black'>
         Drop a file to upload
       </Text>
     </Box>
diff --git a/pkg/interface/src/views/components/UnjoinedResource.tsx b/pkg/interface/src/views/components/UnjoinedResource.tsx
index 61b83863ef..c2bfe3989e 100644
--- a/pkg/interface/src/views/components/UnjoinedResource.tsx
+++ b/pkg/interface/src/views/components/UnjoinedResource.tsx
@@ -1,5 +1,5 @@
 import { Box, Center, Col, Text } from '@tlon/indigo-react';
-import { Association } from '@urbit/api/metadata';
+import { Association, GraphConfig } from '@urbit/api/metadata';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
@@ -19,7 +19,7 @@ interface UnjoinedResourceProps {
 
 function isJoined(path: string) {
   return function (
-    props: Pick<UnjoinedResourceProps, 'graphKeys'>
+    props: { graphKeys: Set<string> }
   ) {
     const graphKey = path.substr(7);
     return props.graphKeys.has(graphKey);
@@ -38,7 +38,7 @@ export function UnjoinedResource(props: UnjoinedResourceProps) {
 
   const [loading, setLoading] = useState(false);
   const waiter = useWaitForProps({ ...props, graphKeys });
-  const app = useMemo(() => config.graph || appName, [props.association]);
+  const app = useMemo(() => (config as GraphConfig).graph || appName, [props.association]);
 
   const onJoin = async () => {
     const [, , ship, name] = rid.split('/');
@@ -71,14 +71,14 @@ export function UnjoinedResource(props: UnjoinedResourceProps) {
         p={4}
         border={1}
         borderColor="lightGray"
-        borderRadius="1"
-        gapY="3"
+        borderRadius={1}
+        gapY={3}
       >
         <Box>
           <Text>{title}</Text>
         </Box>
         <Box>
-          <RichText color="gray">{description}</RichText>
+          <RichText color="gray" api={api}>{description}</RichText>
         </Box>
         <StatelessAsyncButton
           name={rid}
diff --git a/pkg/interface/src/views/components/VirtualScroller.tsx b/pkg/interface/src/views/components/VirtualScroller.tsx
index f490a39fbc..f976f38177 100644
--- a/pkg/interface/src/views/components/VirtualScroller.tsx
+++ b/pkg/interface/src/views/components/VirtualScroller.tsx
@@ -107,7 +107,7 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
   /**
    * A reference to our scroll container
    */
-  private window: HTMLDivElement | null = null;
+  window: HTMLDivElement | null = null;
   /**
    * A map of child refs, used to calculate scroll position
    */
@@ -133,7 +133,7 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
    */
   private saveDepth = 0;
 
-  private scrollLocked = true;
+  scrollLocked = true;
 
   private pageSize = 50;
 
@@ -541,18 +541,18 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
 
     return (
       <>
-        {!IS_IOS && (<Box borderRadius="3" top ={isTop ? '0' : undefined}
+        {!IS_IOS && (<Box borderRadius={3} top ={isTop ? '0' : undefined}
 bottom={!isTop ? '0' : undefined} ref={(el) => {
  this.scrollRef = el;
 }}
-right="0" height="50px"
+right={0} height="50px"
 position="absolute" width="4px"
 backgroundColor="lightGray"
                      />)}
 
       <ScrollbarLessBox overflowY='scroll' ref={this.setWindow} onScroll={this.onScroll} style={{ ...style, ...{ transform }, 'WebkitOverflowScrolling': 'auto' }}>
         <Box style={{ transform, width: 'calc(100% - 4px)' }}>
-          {(isTop ? !atStart : !atEnd) && (<Center height="5">
+          {(isTop ? !atStart : !atEnd) && (<Center height={5}>
             <LoadingSpinner />
           </Center>)}
           <VirtualContext.Provider value={this.shiftLayout}>
@@ -567,7 +567,7 @@ backgroundColor="lightGray"
             ))}
           </VirtualContext.Provider>
           {(!isTop ? !atStart : !atEnd) &&
-            (<Center height="5">
+            (<Center height={5}>
               <LoadingSpinner />
             </Center>)}
         </Box>
diff --git a/pkg/interface/src/views/components/leap/Omnibox.tsx b/pkg/interface/src/views/components/leap/Omnibox.tsx
index 28cbe4c55d..d13e0eeaf6 100644
--- a/pkg/interface/src/views/components/leap/Omnibox.tsx
+++ b/pkg/interface/src/views/components/leap/Omnibox.tsx
@@ -266,10 +266,10 @@ export function Omnibox(props: OmniboxProps): ReactElement {
   );
 
   useEffect(() => {
-    const flattenedResultLinks = Array.from(results.values())
+    const flattenedResultLinks: [string, string][] = Array.from(results.values())
       .flat()
       .map(result => [result.app, result.link]);
-    if (!flattenedResultLinks.includes(selected)) {
+    if (!flattenedResultLinks.includes(selected as [string, string])) {
       setSelected(flattenedResultLinks[0] || []);
     }
   }, [results]);
@@ -302,8 +302,8 @@ export function Omnibox(props: OmniboxProps): ReactElement {
         maxHeight={['200px', '400px']}
         overflowY='auto'
         overflowX='hidden'
-        borderBottomLeftRadius='2'
-        borderBottomRightRadius='2'
+        borderBottomLeftRadius={2}
+        borderBottomRightRadius={2}
       >
         {SEARCHED_CATEGORIES.map(category =>
           Object({ category, categoryResults: results.get(category) })
@@ -312,7 +312,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
           .map(({ category, categoryResults }, i) => {
             const categoryTitle =
               category === 'other' ? null : (
-                <Row pl='2' height='5' alignItems='center' bg='washedGray'>
+                <Row pl={2} height={5} alignItems='center' bg='washedGray'>
                   <Text gray bold>
                     {category.charAt(0).toUpperCase() + category.slice(1)}
                   </Text>
@@ -349,8 +349,8 @@ export function Omnibox(props: OmniboxProps): ReactElement {
         width='100%'
         height='100%'
         position='absolute'
-        top='0'
-        right='0'
+        top={0}
+        right={0}
         zIndex={11}
         display={props.show ? 'block' : 'none'}
       >
@@ -359,7 +359,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
             mt={['10vh', '20vh']}
             width='max(50vw, 300px)'
             maxWidth='600px'
-            borderRadius='2'
+            borderRadius={2}
             backgroundColor='white'
             ref={(el) => {
               omniboxRef.current = el;
diff --git a/pkg/interface/src/views/components/leap/OmniboxInput.tsx b/pkg/interface/src/views/components/leap/OmniboxInput.tsx
index 79e5638a38..77f5419837 100644
--- a/pkg/interface/src/views/components/leap/OmniboxInput.tsx
+++ b/pkg/interface/src/views/components/leap/OmniboxInput.tsx
@@ -21,13 +21,13 @@ export class OmniboxInput extends Component<OmniboxInputProps> {
           }
         }}
         width='100%'
-        p='2'
+        p={2}
         backgroundColor='white'
         color='black'
         border='1px solid transparent'
-        borderRadius='2'
+        borderRadius={2}
         maxWidth='calc(600px - 1.15rem)'
-        fontSize='1'
+        fontSize={1}
         style={{ boxSizing: 'border-box' }}
         placeholder='Search...'
         onKeyDown={props.control}
diff --git a/pkg/interface/src/views/components/leap/OmniboxResult.tsx b/pkg/interface/src/views/components/leap/OmniboxResult.tsx
index 7717127b74..7810ecc48e 100644
--- a/pkg/interface/src/views/components/leap/OmniboxResult.tsx
+++ b/pkg/interface/src/views/components/leap/OmniboxResult.tsx
@@ -87,7 +87,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
           display='inline-block'
           verticalAlign='middle'
           icon={icon}
-          mr='2'
+          mr={2}
           size='18px'
           color={iconFill}
         />
@@ -99,7 +99,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
             display='inline-block'
             verticalAlign='middle'
             icon='Notifications'
-            mr='2'
+            mr={2}
             size='18px'
             color={iconFill}
           />
@@ -119,7 +119,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
           display='inline-block'
           verticalAlign='middle'
           icon='LogOut'
-          mr='2'
+          mr={2}
           size='18px'
           color={iconFill}
         />
@@ -142,7 +142,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
           display='inline-block'
           verticalAlign='middle'
           icon='Home'
-          mr='2'
+          mr={2}
           size='18px'
           color={iconFill}
         />
@@ -153,7 +153,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
           display='inline-block'
           verticalAlign='middle'
           icon='Notifications'
-          mr='2'
+          mr={2}
           size='18px'
           color={iconFill}
         />
@@ -164,7 +164,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
           display='inline-block'
           verticalAlign='middle'
           icon='Messages'
-          mr='2'
+          mr={2}
           size='18px'
           color={iconFill}
         />
@@ -175,7 +175,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
           display='inline-block'
           verticalAlign='middle'
           icon='Tutorial'
-          mr='2'
+          mr={2}
           size='18px'
           color={iconFill}
         />
@@ -186,7 +186,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
           display='inline-block'
           icon='NullIcon'
           verticalAlign='middle'
-          mr='2'
+          mr={2}
           size='16px'
           color={iconFill}
         />
@@ -230,8 +230,8 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
 
     return (
       <Row
-        py='2'
-        px='2'
+        py={2}
+        px={2}
         cursor={cursor}
         onMouseMove={() => setSelection()}
         onMouseLeave={() => this.setHover(false)}
@@ -259,13 +259,13 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
             overflow='hidden'
             textOverflow='ellipsis'
             whiteSpace='pre'
-            mr='1'
+            mr={1}
           >
             {text.startsWith('~') ? cite(text) : text}
           </Text>
         </Box>
         <Text
-          pr='2'
+          pr={2}
           display='inline-block'
           verticalAlign='middle'
           color={this.state.hovered || selected === link ? 'white' : 'black'}
diff --git a/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/ChannelPermissions.tsx b/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/ChannelPermissions.tsx
index 3b13cfb3e2..75825181dd 100644
--- a/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/ChannelPermissions.tsx
+++ b/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/ChannelPermissions.tsx
@@ -1,9 +1,9 @@
 import {
-  Box,
-  Col, Label,
-  ManagedToggleSwitchField as Checkbox,
+    Box,
+    Col, Label,
+    ManagedToggleSwitchField as Checkbox,
 
-  Text
+    Text
 } from '@tlon/indigo-react';
 import { Association, Group, PermVariation } from '@urbit/api';
 import { Form, Formik } from 'formik';
@@ -36,10 +36,10 @@ function PermissionsSummary(props: {
 
   return (
     <Box
-      p="2"
-      border="1"
+      p={2}
+      border={1}
       borderColor="lightBlue"
-      borderRadius="1"
+      borderRadius={1}
       backgroundColor="washedBlue"
     >
       <Text>
@@ -159,9 +159,9 @@ export function GraphPermissions(props: GraphPermissionsProps) {
     >
       <Form style={{ display: 'contents' }}>
         <FormGroupChild id="permissions" />
-        <Col mx="4" mt="4" flexShrink={0} gapY="5">
-          <Col gapY="1" mt="0">
-            <Text id="permissions" fontWeight="bold" fontSize="2">
+        <Col mx={4} mt={4} flexShrink={0} gapY={5}>
+          <Col gapY={1} mt={0}>
+            <Text id="permissions" fontWeight="bold" fontSize={2}>
               Permissions
             </Text>
             <Text gray>
@@ -170,7 +170,7 @@ export function GraphPermissions(props: GraphPermissionsProps) {
             </Text>
           </Col>
           <Col>
-            <Label mb="2">Permissions Summary</Label>
+            <Label mb={2}>Permissions Summary</Label>
             <PermissionsSummary
               writersSize={writers.size}
               vip={association.metadata.vip}
diff --git a/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Details.tsx b/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Details.tsx
index b12d22d4d7..ce3a9312ec 100644
--- a/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Details.tsx
+++ b/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Details.tsx
@@ -1,8 +1,8 @@
 import {
-  Col,
-  Label, ManagedTextInputField as Input,
+    Col,
+    Label, ManagedTextInputField as Input,
 
-  Text
+    Text
 } from '@tlon/indigo-react';
 import { Association } from '@urbit/api';
 import { Form, Formik } from 'formik';
@@ -44,12 +44,12 @@ export function ChannelDetails(props: ChannelDetailsProps) {
     <Formik initialValues={initialValues} onSubmit={onSubmit}>
       <Form style={{ display: 'contents' }}>
         <FormGroupChild id="details" />
-        <Col mx="4" mb="4" flexShrink={0} gapY="4">
+        <Col mx={4} mb={4} flexShrink={0} gapY={4}>
           <Col mb={3}>
-            <Text id="details" fontSize="2" fontWeight="bold">
+            <Text id="details" fontSize={2} fontWeight="bold">
               Channel Details
             </Text>
-            <Label gray mt="2">
+            <Label gray mt={2}>
               Set the title, description and colour of the channel
             </Label>
           </Col>
diff --git a/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Notifications.tsx b/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Notifications.tsx
index e944ca9858..fd6256c79b 100644
--- a/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Notifications.tsx
+++ b/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Notifications.tsx
@@ -28,15 +28,15 @@ export function ChannelNotifications(props: ChannelNotificationsProps) {
   const anchorRef = useRef<HTMLElement | null>(null);
 
   return (
-    <Col mx="4" mb="6" gapY="4" flexShrink={0}>
-      <Text ref={anchorRef} id="notifications" fontSize="2" fontWeight="bold">
+    <Col mx={4} mb={6} gapY={4} flexShrink={0}>
+      <Text ref={anchorRef} id="notifications" fontSize={2} fontWeight="bold">
         Channel Notifications
       </Text>
       <BaseLabel display="flex" cursor="pointer">
         <StatelessAsyncToggle selected={isMuted} onClick={onChangeMute} />
         <Col>
           <Label>Mute this channel</Label>
-          <Label gray mt="1">
+          <Label gray mt={1}>
             Muting this channel will prevent it from sending updates to your
             inbox
           </Label>
diff --git a/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Sidebar.tsx b/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Sidebar.tsx
index ecc134ea8c..6d9dddbdb6 100644
--- a/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Sidebar.tsx
+++ b/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Sidebar.tsx
@@ -15,15 +15,15 @@ export function ChannelPopoverRoutesSidebar(props: {
     <Col
       display={['none', 'flex']}
       minWidth="200px"
-      borderRight="1"
+      borderRight={1}
       borderRightColor="washedGray"
-      py="5"
-      gapY="2"
+      py={5}
+      gapY={2}
     >
-      <Text mx="3" my="3" fontSize="1" fontWeight="medium">
+      <Text mx={3} my={3} fontSize={1} fontWeight="medium">
         Channel Settings
       </Text>
-      <Text mx="3" my="2" gray>
+      <Text mx={3} my={2} gray>
         Preferences
       </Text>
       <SidebarItem
@@ -41,7 +41,7 @@ export function ChannelPopoverRoutesSidebar(props: {
       )}
       {isAdmin && (
         <>
-          <Text mx="3" py="2" gray>
+          <Text mx={3} py={2} gray>
             Administration
           </Text>
           <SidebarItem
diff --git a/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/index.tsx b/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/index.tsx
index 2d286db269..a97ef76b41 100644
--- a/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/index.tsx
+++ b/pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/index.tsx
@@ -1,8 +1,8 @@
 import { Box, Col, Row, Text } from '@tlon/indigo-react';
 import {
-  Association,
+    Association,
 
-  Group
+    Group
 } from '@urbit/api';
 import React, { useCallback, useRef } from 'react';
 import { Link, useHistory } from 'react-router-dom';
@@ -64,15 +64,15 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
     >
       <Row
         flexDirection={['column', 'row']}
-        border="1"
+        border={1}
         borderColor="lightGray"
-        borderRadius="2"
+        borderRadius={2}
         bg="white"
         height="100%"
       >
-        <Box pt="4" px="4" display={['block', 'none']}>
+        <Box pt={4} px={4} display={['block', 'none']}>
           <Link to={props.baseUrl}>
-            <Text fontSize="1">{'<- Back'}</Text>
+            <Text fontSize={1}>{'<- Back'}</Text>
           </Link>
         </Box>
         <ChannelPopoverRoutesSidebar
@@ -80,19 +80,19 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
           isOwner={isOwner}
           baseUrl={props.baseUrl}
         />
-        <FormGroup onReset={onDismiss} height="100%" overflowY="auto" pt="5" flexGrow={1}>
+        <FormGroup onReset={onDismiss} height="100%" overflowY="auto" pt={5} flexGrow={1}>
           <ChannelNotifications {...props} />
           {!isOwner && (
-            <Col mx="4" mb="6" flexShrink={0}>
-              <Text id="unsubscribe" fontSize="2" fontWeight="bold">
+            <Col mx={4} mb={6} flexShrink={0}>
+              <Text id="unsubscribe" fontSize={2} fontWeight="bold">
                 Unsubscribe from Channel
               </Text>
-              <Text mt="1" maxWidth="450px" gray>
+              <Text mt={1} maxWidth="450px" gray>
                 Unsubscribing from a channel will revoke your ability to read
                 its contents. Any permissions set by the channel host will still
                 apply once you have left.
               </Text>
-              <Row mt="3">
+              <Row mt={3}>
                 <StatelessAsyncButton destructive onClick={handleUnsubscribe}>
                   Unsubscribe from {props.association.metadata.title}
                 </StatelessAsyncButton>
@@ -104,16 +104,16 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
               <ChannelDetails {...props} />
               <GraphPermissions {...props} />
               { isOwner ? (
-              <Col mx="4" mt="5" mb="6" flexShrink={0}>
-                <Text id="archive" fontSize="2" fontWeight="bold">
+              <Col mx={4} mt={5} mb={6} flexShrink={0}>
+                <Text id="archive" fontSize={2} fontWeight="bold">
                   Archive channel
                 </Text>
-                <Text mt="1" maxWidth="450px" gray>
+                <Text mt={1} maxWidth="450px" gray>
                   Archiving a channel will prevent further updates to the channel.
                   Users who are currently joined to the channel will retain a copy
                   of the channel.
                 </Text>
-                <Row mt="3">
+                <Row mt={3}>
                   <StatelessAsyncButton destructive onClick={handleArchive}>
                     Archive {props.association.metadata.title}
                   </StatelessAsyncButton>
@@ -121,16 +121,16 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
               </Col>
 
               ) : (
-              <Col mx="4" my="6" flexShrink={0}>
-              <Text id="remove" fontSize="2" fontWeight="bold">
+              <Col mx={4} my={6} flexShrink={0}>
+              <Text id="remove" fontSize={2} fontWeight="bold">
                 Remove channel from group
               </Text>
-              <Text mt="1" maxWidth="450px" gray>
+              <Text mt={1} maxWidth="450px" gray>
                 Removing a channel will prevent further updates to the channel.
                 Users who are currently joined to the channel will retain a copy
                 of the channel.
               </Text>
-              <Row mt="3">
+              <Row mt={3}>
                 <StatelessAsyncButton destructive onClick={handleRemove}>
                   Remove {props.association.metadata.title}
                 </StatelessAsyncButton>
diff --git a/pkg/interface/src/views/landscape/components/ChannelWritePerms.tsx b/pkg/interface/src/views/landscape/components/ChannelWritePerms.tsx
index 54c431314b..cc9231393a 100644
--- a/pkg/interface/src/views/landscape/components/ChannelWritePerms.tsx
+++ b/pkg/interface/src/views/landscape/components/ChannelWritePerms.tsx
@@ -1,7 +1,7 @@
 import {
-  Col, Label,
+    Col, Label,
 
-  ManagedRadioButtonField as Radio
+    ManagedRadioButtonField as Radio
 } from '@tlon/indigo-react';
 import { useFormikContext } from 'formik';
 import React from 'react';
@@ -22,7 +22,7 @@ export function ChannelWritePerms<
   const { values, errors } = useFormikContext<T>();
 
   return (
-    <Col gapY="3">
+    <Col gapY={3}>
       <Label> Write Access</Label>
       <Radio name="writePerms" id="everyone" label="All group members" />
       <Radio name="writePerms" id="self" label="Only host" />
diff --git a/pkg/interface/src/views/landscape/components/DeleteGroup.tsx b/pkg/interface/src/views/landscape/components/DeleteGroup.tsx
index 172ff82e86..9a7262df31 100644
--- a/pkg/interface/src/views/landscape/components/DeleteGroup.tsx
+++ b/pkg/interface/src/views/landscape/components/DeleteGroup.tsx
@@ -42,17 +42,17 @@ return;
         dismiss();
       };
       return (
-        <Col p="4">
+        <Col p={4}>
           <Label>{action} Group</Label>
-          <Label gray mt="2">
+          <Label gray mt={2}>
             {description}
           </Label>
-          <Row mt="2" justifyContent="flex-end">
+          <Row mt={2} justifyContent="flex-end">
             <Button onClick={onCancel}>Cancel</Button>
             <StatelessAsyncButton
               name={`delete-${props.association.group}`}
               onClick={onDelete}
-              ml="2"
+              ml={2}
               destructive
               primary
             >
@@ -63,9 +63,9 @@ return;
       );
     } });
   return (
-    <Row px="3" py="1" onClick={showModal} cursor="pointer">
+    <Row px={3} py={1} onClick={showModal} cursor="pointer">
       {modal}
-      <Icon icon={icon} color="red" mr="2" />
+      <Icon icon={icon} color="red" mr={2} />
       <Text color="red">
         {action} group
       </Text>
diff --git a/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx b/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
index b20b7af295..c7d11daa3d 100644
--- a/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
+++ b/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
@@ -1,37 +1,27 @@
-import React from 'react';
-import _ from 'lodash';
-import { Post, Content, ReferenceContent } from '@urbit/api';
 import {
-  Box,
-  Text,
-  Anchor,
-  H1,
+  Anchor, Box,
+  Col, H1,
   H2,
   H3,
-  H4,
-  Row,
-  Col,
+  H4, Text
 } from '@tlon/indigo-react';
-
-import GlobalApi from '~/logic/api/global';
-import TextContent from './content/text';
-import CodeContent from './content/code';
-import RemoteContent from '~/views/components/RemoteContent';
-import { Mention } from '~/views/components/MentionText';
-import { PermalinkEmbed } from '~/views/apps/permalinks/embed';
-import { referenceToPermalink } from '~/logic/lib/permalinks';
-import { GraphContentWide } from './GraphContentWide';
-import { PropFunc } from '~/types';
-import fromMarkdown from 'mdast-util-from-markdown';
-import Dot from '~/views/components/Dot';
+import { Content, ReferenceContent } from '@urbit/api';
+import _ from 'lodash';
 import {
-  Root,
-  Parent,
-  Content as AstContent,
-  BlockContent,
-} from '@types/mdast';
+  BlockContent, Content as AstContent, Parent, Root
+} from 'mdast';
+import React from 'react';
+import GlobalApi from '~/logic/api/global';
+import { referenceToPermalink } from '~/logic/lib/permalinks';
+import { PropFunc } from '~/types';
+import { PermalinkEmbed } from '~/views/apps/permalinks/embed';
+import Dot from '~/views/components/Dot';
+import { Mention } from '~/views/components/MentionText';
+import RemoteContent from '~/views/components/RemoteContent';
+import CodeContent from './content/code';
 import { parseTall, parseWide } from './parse';
 
+
 type StitchMode = 'merge' | 'block' | 'inline';
 
 // XX make better
@@ -239,7 +229,7 @@ const header = ({ children, depth, ...rest }) => {
       <H4 display='block'>{children}</H4>
     );
   return (
-    <Box {...rest}>
+    <Box {...rest} mt={2} mb={4}>
       {inner}
     </Box>
   );
@@ -257,9 +247,9 @@ const renderers = {
     return (
       <Text
         mono
-        p="1"
+        p={1}
         backgroundColor="washedGray"
-        fontSize="0"
+        fontSize={0}
         style={{ whiteSpace: 'pre-wrap' }}
       >
         {value}
@@ -275,7 +265,7 @@ const renderers = {
   },
   emphasis: ({ children }) => {
     return (
-    <Text fontStyle="italic" fontSize="1" lineHeight={'20px'}>
+    <Text fontStyle="italic" fontSize={1} lineHeight={'20px'}>
         {children}
     </Text>
     )
@@ -288,8 +278,8 @@ const renderers = {
         borderLeft="1px solid"
         color="black"
         paddingLeft={2}
-        py="1"
-        mb="1"
+        py={1}
+        mb={1} 
       >
         {children}
       </Text>
@@ -297,7 +287,7 @@ const renderers = {
   },
   paragraph: ({ children }) => {
     return (
-      <Text fontSize="1" lineHeight={'20px'}>
+      <Text fontSize={1} lineHeight={'20px'}>
         {children}
       </Text>
     );
@@ -309,11 +299,11 @@ const renderers = {
           top="7px"
           position="absolute"
           left="0px"
-          mr="1"
+          mr={1}
           height="20px"
           width="20px"
         />
-        <Box ml="2">{children}</Box>
+        <Box ml={2}>{children}</Box>
       </Box>
     );
   },
@@ -322,12 +312,12 @@ const renderers = {
     console.log(rest);
     const inner = (
       <Text
-        p="1"
+        p={1}
         className="clamp-message"
         display="block"
-        borderRadius="1"
+        borderRadius={1}
         mono
-        fontSize="0"
+        fontSize={0}
         backgroundColor="washedGray"
         overflowX="auto"
         style={{ whiteSpace: 'pre' }}
@@ -335,7 +325,7 @@ const renderers = {
         {value}
       </Text>
     );
-    return tall ? <Box mb="2">{inner}</Box> : inner;
+    return tall ? <Box mb={2}>{inner}</Box> : inner;
   },
   link: (props) => {
     return (
@@ -346,7 +336,7 @@ const renderers = {
   },
   list: ({ depth, children }) => {
     return (
-      <Col ml="3" gapY="2" my="2">
+      <Col ml={3} gapY={2} my={2}>
         {children}
       </Col>
     );
@@ -358,14 +348,14 @@ const renderers = {
     </Box>
   ),
   'graph-url': ({ url }) => (
-    <Box mt="1" mb="2" flexShrink={0}>
+    <Box mt={1} mb={2} flexShrink={0}>
       <RemoteContent key={url} url={url} />
     </Box>
   ),
   'graph-reference': ({ api, reference, transcluded }) => {
     const { link } = referenceToPermalink({ reference });
     return (
-      <Box mb="2" flexShrink={0}>
+      <Box mb={2} flexShrink={0}>
         <PermalinkEmbed
           api={api}
           link={link}
diff --git a/pkg/interface/src/views/landscape/components/Graph/content/code.js b/pkg/interface/src/views/landscape/components/Graph/content/code.js
index 1259584c5a..03d240e214 100644
--- a/pkg/interface/src/views/landscape/components/Graph/content/code.js
+++ b/pkg/interface/src/views/landscape/components/Graph/content/code.js
@@ -12,11 +12,11 @@ export default class CodeContent extends Component {
       (
         <Text
           display='block'
-          fontSize='0'
+          fontSize={0}
           mono
-          p='1'
-          my='0'
-          borderRadius='1'
+          p={1}
+          my={0}
+          borderRadius={1}
           overflow='auto'
           maxHeight='10em'
           maxWidth='100%'
@@ -28,17 +28,17 @@ export default class CodeContent extends Component {
       ) : null;
 
     return (
-      <Box my='2'>
+      <Box my={2}>
         <Text
           display='block'
           mono
-          my='0'
-          p='1'
-          borderRadius='1'
+          my={0}
+          p={1}
+          borderRadius={1}
           overflow='auto'
           maxHeight='10em'
           maxWidth='100%'
-          fontSize='0'
+          fontSize={0}
           style={{ whiteSpace: 'pre' }}
         >
           {content.code.expression}
diff --git a/pkg/interface/src/views/landscape/components/Graph/content/text.js b/pkg/interface/src/views/landscape/components/Graph/content/text.js
index 23dc375a0d..39f70c250b 100644
--- a/pkg/interface/src/views/landscape/components/Graph/content/text.js
+++ b/pkg/interface/src/views/landscape/components/Graph/content/text.js
@@ -28,9 +28,9 @@ const renderers = {
     return (
       <Text
         mono
-        p='1'
+        p={1}
         backgroundColor='washedGray'
-        fontSize='0'
+        fontSize={0}
         style={{ whiteSpace: 'preWrap' }}
       >
         {value}
@@ -52,7 +52,7 @@ const renderers = {
   },
   paragraph: ({ children }) => {
     return (
-      <Text fontSize='1' lineHeight={'20px'}>
+      <Text fontSize={1} lineHeight={'20px'}>
         {children}
       </Text>
     );
@@ -60,12 +60,12 @@ const renderers = {
   code: ({ language, value }) => {
     return (
       <Text
-        p='1'
+        p={1}
         className='clamp-message'
         display='block'
-        borderRadius='1'
+        borderRadius={1}
         mono
-        fontSize='0'
+        fontSize={0}
         backgroundColor='washedGray'
         overflowX='auto'
         style={{ whiteSpace: 'pre' }}
@@ -75,10 +75,10 @@ const renderers = {
     );
   },
   link: (props) => {
-    return <Anchor src={props.href} borderBottom="1" color="black">{props.children}</Anchor>
+    return <Anchor src={props.href} borderBottom={1} color="black">{props.children}</Anchor>
   },
   list: ({depth, children}) => {
-    return <Text my='2' display='block' fontSize='1' ml={depth ? (2 * depth) : 0} lineHeight={'20px'}>{children}</Text>
+    return <Text my={2} display='block' fontSize={1} ml={depth ? (2 * depth) : 0} lineHeight={'20px'}>{children}</Text>
   }
 };
 
@@ -166,10 +166,10 @@ export default function TextContent(props) {
       <GroupLink
         resource={resource}
         api={props.api}
-        pl='2'
-        my='2'
-        border='1'
-        borderRadius='2'
+        pl={2}
+        my={2}
+        border={1}
+        borderRadius={2}
         borderColor='washedGray'
       />
     );
diff --git a/pkg/interface/src/views/landscape/components/GroupSettings/Admin.tsx b/pkg/interface/src/views/landscape/components/GroupSettings/Admin.tsx
index 583b95c827..861a965164 100644
--- a/pkg/interface/src/views/landscape/components/GroupSettings/Admin.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupSettings/Admin.tsx
@@ -1,10 +1,10 @@
 import {
-  Box,
+    Box,
 
-  Col, ManagedTextInputField as Input,
-  ManagedToggleSwitchField as Checkbox,
+    Col, ManagedTextInputField as Input,
+    ManagedToggleSwitchField as Checkbox,
 
-  Text
+    Text
 } from '@tlon/indigo-react';
 import { Enc } from '@urbit/api';
 import { Group, GroupPolicy } from '@urbit/api/groups';
@@ -102,8 +102,8 @@ return null;
       onSubmit={onSubmit}
     >
       <Form>
-        <Box p="4" id="group-details"><Text fontWeight="600" fontSize="2">Group Details</Text></Box>
-        <Col pb="4" px="4" maxWidth="384px" gapY={4}>
+        <Box p={4} id="group-details"><Text fontWeight="600" fontSize={2}>Group Details</Text></Box>
+        <Col pb={4} px={4} maxWidth="384px" gapY={4}>
           <Input
             id="title"
             label="Group Name"
diff --git a/pkg/interface/src/views/landscape/components/GroupSettings/Channels.tsx b/pkg/interface/src/views/landscape/components/GroupSettings/Channels.tsx
index 4fffdc7068..6beb6cfa6d 100644
--- a/pkg/interface/src/views/landscape/components/GroupSettings/Channels.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupSettings/Channels.tsx
@@ -40,14 +40,14 @@ export function GroupChannelSettings(props: GroupChannelSettingsProps) {
     roleForShip(group, window.ship) !== 'admin';
   return (
     <Col maxWidth="384px" width="100%">
-      <Text p="4" id="channels" fontWeight="600" fontSize="2">
+      <Text p={4} id="channels" fontWeight="600" fontSize={2}>
         Channels
       </Text>
-      <Text pl='4' gray>Pinning a channel marks it as featured when joining or previewing a group.</Text>
-      <Col p="4" width="100%" gapY="3">
+      <Text pl={4} gray>Pinning a channel marks it as featured when joining or previewing a group.</Text>
+      <Col p={4} width="100%" gapY={3}>
         {channels.filter(({ metadata }) => !metadata.hidden).map(({ resource, metadata }) => (
           <Row justifyContent="space-between" width="100%" key={resource}>
-            <Row gapX="2">
+            <Row gapX={2}>
               <Icon
                 icon={getModuleIcon(
                   'graph' in metadata?.config
@@ -62,11 +62,11 @@ export function GroupChannelSettings(props: GroupChannelSettingsProps) {
                 options={
                   <Col
                     bg="white"
-                    border="1"
-                    borderRadius="1"
+                    border={1}
+                    borderRadius={1}
                     borderColor="lightGray"
-                    p="1"
-                    gapY="1"
+                    p={1}
+                    gapY={1}
                   >
                     <StatelessAsyncAction
                       bg="transparent"
diff --git a/pkg/interface/src/views/landscape/components/GroupSettings/GroupFeed.tsx b/pkg/interface/src/views/landscape/components/GroupSettings/GroupFeed.tsx
index b2e3256998..a89bc708a3 100644
--- a/pkg/interface/src/views/landscape/components/GroupSettings/GroupFeed.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupSettings/GroupFeed.tsx
@@ -7,7 +7,7 @@ import useMetadataState from '~/logic/state/metadata';
 import { FormSubmit } from '~/views/components/FormSubmit';
 import { StatelessAsyncToggle } from '~/views/components/StatelessAsyncToggle';
 import {
-  GroupFeedPermsInput
+    GroupFeedPermsInput
 } from '../Home/Post/GroupFeedPerms';
 
 interface FormSchema {
@@ -59,15 +59,15 @@ export function GroupFeedSettings(props: {
   return (
     <Formik initialValues={initialValues} onSubmit={onSubmit}>
       <Form>
-        <Col p="4" gapY="4">
-          <Text id="feed" fontSize="2" fontWeight="medium">
+        <Col p={4} gapY={4}>
+          <Text id="feed" fontSize={2} fontWeight="medium">
             Group Feed Settings
           </Text>
           <BaseLabel display="flex" cursor="pointer">
             <StatelessAsyncToggle selected={isEnabled} onClick={toggleFeed} />
             <Col>
               <Label>Enable Group Feed</Label>
-              <Label gray mt="1">
+              <Label gray mt={1}>
                 Disabling the Group Feed archives the content and is not
                 viewable to anyone
               </Label>
diff --git a/pkg/interface/src/views/landscape/components/GroupSettings/GroupSettings.tsx b/pkg/interface/src/views/landscape/components/GroupSettings/GroupSettings.tsx
index 866df3bc57..5b5e5d43a9 100644
--- a/pkg/interface/src/views/landscape/components/GroupSettings/GroupSettings.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupSettings/GroupSettings.tsx
@@ -40,12 +40,12 @@ export function GroupSettings(props: GroupSettingsProps) {
       <Col>
         <GroupPersonalSettings {...props} />
         <Section>
-          <Col p="4" maxWidth="384px">
-            <Text fontSize="2" fontWeight="600">
+          <Col p={4} maxWidth="384px">
+            <Text fontSize={2} fontWeight="600">
               Participants
             </Text>
             <Text gray>View list of all group participants and statuses</Text>
-            <Button primary mt="4" onClick={linkRelative('/participants')}>View List</Button>
+            <Button primary mt={4} onClick={linkRelative('/participants')}>View List</Button>
           </Col>
         </Section>
         { isAdmin && (
diff --git a/pkg/interface/src/views/landscape/components/GroupSettings/Personal.tsx b/pkg/interface/src/views/landscape/components/GroupSettings/Personal.tsx
index d9871316af..46c97d5669 100644
--- a/pkg/interface/src/views/landscape/components/GroupSettings/Personal.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupSettings/Personal.tsx
@@ -1,8 +1,8 @@
 import {
-  BaseLabel, Col,
-  Label,
+    BaseLabel, Col,
+    Label,
 
-  Text
+    Text
 } from '@tlon/indigo-react';
 import { Association } from '@urbit/api/metadata';
 import React from 'react';
@@ -26,8 +26,8 @@ export function GroupPersonalSettings(props: {
   };
 
   return (
-    <Col px="4" pb="4" gapY="4">
-      <Text pt="4" fontWeight="600" id="notifications" fontSize="2">Group Notifications</Text>
+    <Col px={4} pb={4} gapY={4}>
+      <Text pt={4} fontWeight="600" id="notifications" fontSize={2}>Group Notifications</Text>
       <BaseLabel
         htmlFor="asyncToggle"
         display="flex"
@@ -36,7 +36,7 @@ export function GroupPersonalSettings(props: {
         <StatelessAsyncToggle selected={watching} onClick={onClick} />
         <Col>
           <Label>Notify me on group activity</Label>
-          <Label mt="2" gray>Send me notifications when this group changes</Label>
+          <Label mt={2} gray>Send me notifications when this group changes</Label>
         </Col>
       </BaseLabel>
     </Col>
diff --git a/pkg/interface/src/views/landscape/components/GroupSummary.tsx b/pkg/interface/src/views/landscape/components/GroupSummary.tsx
index fc72c4a95f..0f44502f25 100644
--- a/pkg/interface/src/views/landscape/components/GroupSummary.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupSummary.tsx
@@ -24,8 +24,8 @@ export function GroupSummary(props: GroupSummaryProps & PropFunc<typeof Col>): R
     anchorRef
   );
   return (
-    <Col {...rest} ref={anchorRef} gapY="4" maxWidth={['100%', '288px']}>
-      <Row gapX="2" width="100%">
+    <Col {...rest} ref={anchorRef} gapY={4} maxWidth={['100%', '288px']}>
+      <Row gapX={2} width="100%">
         <MetadataIcon
           width="40px"
           height="40px"
@@ -34,16 +34,16 @@ export function GroupSummary(props: GroupSummaryProps & PropFunc<typeof Col>): R
         />
         <Col justifyContent="space-between" flexGrow={1} overflow="hidden">
           <Text
-            fontSize="1"
+            fontSize={1}
             textOverflow="ellipsis"
             whiteSpace="nowrap"
             overflow="hidden"
           >{metadata.title}</Text>
-          <Row gapX="4" >
-            <Text fontSize="1" gray>
+          <Row gapX={4} >
+            <Text fontSize={1} gray>
               {memberCount} participants
             </Text>
-            <Text fontSize="1" gray>
+            <Text fontSize={1} gray>
               {channelCount} channels
             </Text>
           </Row>
@@ -54,7 +54,7 @@ export function GroupSummary(props: GroupSummaryProps & PropFunc<typeof Col>): R
         <Text
             gray
             width="100%"
-            fontSize="1"
+            fontSize={1}
             textOverflow="ellipsis"
             overflow="hidden"
         >
diff --git a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
index fa84d8bafd..3d7750eda7 100644
--- a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
@@ -1,9 +1,9 @@
 import {
-  Box,
-  Col,
+    Box,
+    Col,
 
-  Icon, Row,
-  Text
+    Icon, Row,
+    Text
 } from '@tlon/indigo-react';
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -91,7 +91,7 @@ export function GroupSwitcher(props: {
       backgroundColor="white"
       position="sticky"
       top="0px"
-      pl='3'
+      pl={3}
       borderBottom='1px solid'
       borderColor='lightGray'
     >
@@ -138,11 +138,11 @@ export function GroupSwitcher(props: {
                   recent={props.recentGroups}
                 />
                 <GroupSwitcherItem to="/~landscape/new">
-                  <Icon mr="2" color="gray" icon="CreateGroup" />
+                  <Icon mr={2} color="gray" icon="CreateGroup" />
                   <Text> New Group</Text>
                 </GroupSwitcherItem>
                 <GroupSwitcherItem to="/~landscape/join">
-                  <Icon mr="2" color="gray" icon="Plus" />
+                  <Icon mr={2} color="gray" icon="Plus" />
                   <Text> Join Group</Text>
                 </GroupSwitcherItem>
                 {workspace.type === 'group' && (
@@ -176,12 +176,12 @@ export function GroupSwitcher(props: {
               </Col>
             }
           >
-            <Row flexGrow={1} alignItems="center" width='100%' minWidth='0' flexShrink={0}>
-              { metadata && <MetadataIcon flexShrink={0} mr="2" metadata={metadata} height="24px" width="24px" /> }
-              <Text flexShrink={1} lineHeight="1.1" fontSize='2' fontWeight="600" overflow='hidden' display='inline-block' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre' }}>{title}</Text>
+            <Row flexGrow={1} alignItems="center" width='100%' minWidth={0} flexShrink={0}>
+              { metadata && <MetadataIcon flexShrink={0} mr={2} metadata={metadata} height="24px" width="24px" /> }
+              <Text flexShrink={1} lineHeight="1.1" fontSize={2} fontWeight="600" overflow='hidden' display='inline-block' style={{ textOverflow: 'ellipsis', whiteSpace: 'pre' }}>{title}</Text>
               </Row>
           </Dropdown>
-          <Row pr='3' verticalAlign="middle">
+          <Row pr={3} verticalAlign="middle">
             {(workspace.type === 'group') && (
               <>
                 {isAdmin && (<Link to={navTo('/invites')}>
diff --git a/pkg/interface/src/views/landscape/components/GroupifyForm.tsx b/pkg/interface/src/views/landscape/components/GroupifyForm.tsx
index c88357f00f..0a0579d770 100644
--- a/pkg/interface/src/views/landscape/components/GroupifyForm.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupifyForm.tsx
@@ -70,7 +70,7 @@ export function GroupifyForm(props: GroupifyFormProps) {
       onSubmit={onGroupify}
     >
       <Form>
-        <Col flexShrink={0} gapY="4" maxWidth="512px">
+        <Col flexShrink={0} gapY={4} maxWidth="512px">
           <Box>
             <Text fontWeight="500">Groupify this channel</Text>
           </Box>
diff --git a/pkg/interface/src/views/landscape/components/Home/AddFeedBanner.tsx b/pkg/interface/src/views/landscape/components/Home/AddFeedBanner.tsx
index b75042d188..7b8978c972 100644
--- a/pkg/interface/src/views/landscape/components/Home/AddFeedBanner.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/AddFeedBanner.tsx
@@ -41,7 +41,7 @@ export const AddFeedBanner = (props) => {
       pl={2}
       pr={2}
     >
-      <Row gapX="2" flexShrink={1} minWidth='0'>
+      <Row gapX={2} flexShrink={1} minWidth={0}>
         { dismissing ? (
           <>
             <Icon icon="Info" />
@@ -58,7 +58,7 @@ export const AddFeedBanner = (props) => {
               textOverflow="ellipsis"
               overflow="hidden"
               whiteSpace="nowrap"
-              minWidth="0"
+              minWidth={0}
               flexShrink={1}
             >
               A central place to broadcast short posts with your group
@@ -66,7 +66,7 @@ export const AddFeedBanner = (props) => {
           </>
         )}
       </Row>
-      <Row gapX="2" flexShrink={0}>
+      <Row gapX={2} flexShrink={0}>
         { dismissing ? (
           <Button primary onClick={disableFeed}>
             OK
diff --git a/pkg/interface/src/views/landscape/components/Home/EmptyGroupHome.tsx b/pkg/interface/src/views/landscape/components/Home/EmptyGroupHome.tsx
index b13a553e28..8e8e1f8eaa 100644
--- a/pkg/interface/src/views/landscape/components/Home/EmptyGroupHome.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/EmptyGroupHome.tsx
@@ -28,7 +28,7 @@ export function EmptyGroupHome(props) {
           resource={groupAssociation.group}
         />
       ) : (
-        <Box p="4">
+        <Box p={4}>
           <Text color='gray'>
             Create or select a channel to get started
           </Text>
diff --git a/pkg/interface/src/views/landscape/components/Home/EnableGroupFeed.tsx b/pkg/interface/src/views/landscape/components/Home/EnableGroupFeed.tsx
index 21fb73aad7..5749ea1766 100644
--- a/pkg/interface/src/views/landscape/components/Home/EnableGroupFeed.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/EnableGroupFeed.tsx
@@ -16,7 +16,7 @@ interface FormSchema {
 
 export function EnableGroupFeed(props: {
   groupPath: string;
-  dismiss: () => void;
+  dismiss?: () => void;
   api: GlobalApi;
   baseUrl: string;
 }) {
@@ -44,9 +44,9 @@ export function EnableGroupFeed(props: {
     <ModalOverlay spacing={[3, 5, 7]} bg="white" dismiss={dismiss}>
       <Formik initialValues={initialValues} onSubmit={onSubmit}>
         <Form>
-          <Col gapY="3" p="3">
-            <Col gapY="1">
-              <Text fontWeight="medium" fontSize="2">
+          <Col gapY={3} p={3}>
+            <Col gapY={1}>
+              <Text fontWeight="medium" fontSize={2}>
                 Enable Feed
               </Text>
               <Text gray>
@@ -54,7 +54,7 @@ export function EnableGroupFeed(props: {
               </Text>
             </Col>
             <GroupFeedPermsInput id="permissions" />
-            <Row gapX="2">
+            <Row gapX={2}>
               <AsyncButton primary>Enable Feed</AsyncButton>
               <Button color="gray" onClick={dismiss}>Cancel</Button>
             </Row>
diff --git a/pkg/interface/src/views/landscape/components/Home/GroupFeedHeader.tsx b/pkg/interface/src/views/landscape/components/Home/GroupFeedHeader.tsx
index 45f84c7415..aee169a1fb 100644
--- a/pkg/interface/src/views/landscape/components/Home/GroupFeedHeader.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/GroupFeedHeader.tsx
@@ -43,18 +43,18 @@ export function GroupFeedHeader(props) {
 
   return (
     <Row
-      flexShrink="0"
+      flexShrink={0}
       width="100%"
       height="48px"
-      pl="2"
-      pr="2"
+      pl={2}
+      pr={2}
       alignItems="center"
       borderBottom={1}
       borderColor="lightGray"
     >
       <Box display='block'>
         { ( baseUrl !== historyLocation ) ? (
-            <Text pl="1" pr="1"
+            <Text pl={1} pr={1}
 cursor="pointer" onClick={() => {
               let loc =
                 history.location.pathname.replace(`${baseUrl}`, '').split('/');
@@ -68,13 +68,13 @@ cursor="pointer" onClick={() => {
       </Box>
       { isHome ? (
         <>
-          <Text bold fontSize="2" pl="1" pr="2">Group Feed</Text>
-          <Text fontSize="0" p="1" backgroundColor="washedGray">{permText}</Text>
+          <Text bold fontSize={2} pl={1} pr={2}>Group Feed</Text>
+          <Text fontSize={0} p={1} backgroundColor="washedGray">{permText}</Text>
         </>
       ) : ( !authorText ? null : (
         <>
-          <Text bold fontSize="2" pl="1" pr="2">Post by </Text>
-          <Text bold fontSize="2" mono>{`~${authorText}`}</Text>
+          <Text bold fontSize={2} pl={1} pr={2}>Post by </Text>
+          <Text bold fontSize={2} mono>{`~${authorText}`}</Text>
         </>
       ))}
     </Row>
diff --git a/pkg/interface/src/views/landscape/components/Home/GroupHome.tsx b/pkg/interface/src/views/landscape/components/Home/GroupHome.tsx
index b17c36cbc9..138ac229a2 100644
--- a/pkg/interface/src/views/landscape/components/Home/GroupHome.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/GroupHome.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@tlon/indigo-react';
-import { resourceFromPath } from '@urbit/api';
+import { GroupConfig, resourceFromPath } from '@urbit/api';
 import React from 'react';
 import { Route } from 'react-router-dom';
 import useGroupState from '~/logic/state/group';
@@ -33,10 +33,10 @@ function GroupHome(props) {
   const isFeedEnabled =
     metadata &&
     metadata.config &&
-    metadata.config.group &&
-    'resource' in metadata.config.group;
+    (metadata.config as GroupConfig).group &&
+    'resource' in (metadata.config as GroupConfig).group;
 
-  const graphPath = metadata?.config?.group?.resource;
+  const graphPath = (metadata.config as GroupConfig)?.group?.resource;
   const graphMetadata = associations?.graph[graphPath]?.metadata;
 
   return (
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/GroupFeedPerms.tsx b/pkg/interface/src/views/landscape/components/Home/Post/GroupFeedPerms.tsx
index 1e1956fedf..508d8f9a3f 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/GroupFeedPerms.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/GroupFeedPerms.tsx
@@ -1,7 +1,7 @@
 import {
-  Col, ManagedRadioButtonField as Radio,
+    Col, ManagedRadioButtonField as Radio,
 
-  Text
+    Text
 } from '@tlon/indigo-react';
 import React from 'react';
 import { PropFunc } from '~/types';
@@ -14,7 +14,7 @@ export function GroupFeedPermsInput(
   const { id, ...rest } = props;
 
   return (
-    <Col gapY="4" {...rest}>
+    <Col gapY={4} {...rest}>
       <Text fontWeight="medium">Permissions</Text>
       <Radio
         name={id}
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.tsx
index 861157835d..a9acc61943 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.tsx
@@ -1,6 +1,8 @@
-import { Box, Col, Text } from '@tlon/indigo-react';
+import { Box, Col } from '@tlon/indigo-react';
+import { Association, Graph, GraphNode, Group } from '@urbit/api';
 import bigInt from 'big-integer';
 import React from 'react';
+import GlobalApi from '~/logic/api/global';
 import { resourceFromPath } from '~/logic/lib/group';
 import VirtualScroller from '~/views/components/VirtualScroller';
 import PostItem from './PostItem/PostItem';
@@ -9,7 +11,22 @@ const virtualScrollerStyle = {
   height: '100%'
 };
 
-export class PostFeed extends React.Component {
+interface PostFeedProps {
+  graph: Graph;
+  graphPath: string;
+  api: GlobalApi;
+  history?: History;
+  baseUrl: string;
+  parentNode?: GraphNode;
+  grandparentNode?: GraphNode;
+  association: Association;
+  group: Group;
+  vip: string;
+  pendingSize: number;
+}
+
+export class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
+  isFetching: boolean;
   constructor(props) {
     super(props);
 
@@ -32,7 +49,6 @@ export class PostFeed extends React.Component {
       group,
       vip
     } = this.props;
-    const graphResource = resourceFromPath(graphPath);
     const node = graph.get(index);
     if (!node) {
       return null;
@@ -53,7 +69,7 @@ export class PostFeed extends React.Component {
           <Col
             key={index.toString()}
             ref={ref}
-            mb="3"
+            mb={3}
             width="100%"
             flexShrink={0}
           >
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostInput.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostInput.tsx
index 8d5a091789..155cfb7280 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostInput.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostInput.tsx
@@ -1,5 +1,5 @@
 import { BaseTextArea, Box, Button, Icon, LoadingSpinner, Row } from '@tlon/indigo-react';
-import { Content, Path } from '@urbit/api';
+import { Association, Content, Group, Path } from '@urbit/api';
 import React, {
   ReactElement, useCallback, useState
 } from 'react';
@@ -31,9 +31,11 @@ function canWrite(props) {
 
 interface PostInputProps {
   api: GlobalApi;
+  association: Association;
   graphPath: Path;
-  index: string;
-  submitCallback: () => void;
+  group: Group;
+  index?: string;
+  submitCallback?: () => void;
   vip: string;
 }
 
@@ -106,7 +108,7 @@ const PostInput = (props: PostInputProps): ReactElement | null => {
     <Box
       width="100%"
       minHeight="96px"
-      borderRadius="2"
+      borderRadius={2}
       border={1}
       borderColor="lightGray"
     >
@@ -133,7 +135,7 @@ const PostInput = (props: PostInputProps): ReactElement | null => {
         borderTopColor="lightGray"
         width="100%"
         height="32px"
-        pl="2"
+        pl={2}
         display="flex"
         justifyContent="space-between"
         alignItems="center"
@@ -164,8 +166,8 @@ const PostInput = (props: PostInputProps): ReactElement | null => {
           )}
         </Row>
         <Button
-          pl="2"
-          pr="2"
+          pl={2}
+          pr={2}
           height="31px"
           flexShrink={0}
           backgroundColor="transparent"
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx
index a69501e96e..3761e1f5a9 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx
@@ -1,11 +1,15 @@
-import { Col } from '@tlon/indigo-react';
+import { Col, ColProps } from '@tlon/indigo-react';
 import { Post } from '@urbit/api';
 import React, { ReactElement } from 'react';
 import styled from 'styled-components';
 import GlobalApi from '~/logic/api/global';
 import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 
-const TruncatedBox = styled(Col)`
+type TruncateProps = ColProps & {
+  truncate?: number;
+}
+
+const TruncatedBox = styled(Col)<TruncateProps>`
   display: -webkit-box;
   -webkit-line-clamp: ${p => p.truncate ?? 'unset'};
   -webkit-box-orient: vertical;
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostHeader.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostHeader.tsx
index 7b244da9e0..ba8d2945db 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostHeader.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostHeader.tsx
@@ -49,8 +49,8 @@ const PostHeader = (props: PostHeaderProps): ReactElement => {
       pr={2}
       justifyContent="space-between"
       onClick={(e) => {
- e.stopPropagation();
-}}
+        e.stopPropagation();
+      }}
     >
       <Author
         showImage
@@ -65,7 +65,7 @@ const PostHeader = (props: PostHeaderProps): ReactElement => {
         isRelativeTime={true}
         showTime={false}
         time={true}
-        lineHeight='1'
+        lineHeight={1}
       />
       <Dropdown
         dropWidth="100px"
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostItem.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostItem.tsx
index 15a1cf710e..502e7ed365 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostItem.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostItem.tsx
@@ -1,15 +1,40 @@
 import { Box, Col, Row, Text } from '@tlon/indigo-react';
-import React from 'react';
-import { isWriter, resourceFromPath } from '~/logic/lib/group';
-import { useHovering } from '~/logic/lib/util';
-import withState from '~/logic/lib/withState';
+import { Association, GraphNode, Group, Post } from '@urbit/api';
+import { History } from 'history';
+import React, { Ref } from 'react';
+import GlobalApi from '~/logic/api/global';
+import { isWriter } from '~/logic/lib/group';
+import { withHovering } from '~/logic/lib/util';
 import { Mention } from '~/views/components/MentionText';
 import PostInput from '../PostInput';
 import PostContent from './PostContent';
 import PostFooter from './PostFooter';
 import PostHeader from './PostHeader';
 
-class PostItem extends React.Component {
+export interface PostItemProps {
+  api: GlobalApi;
+  association: Association;
+  baseUrl: string
+  bind?: unknown;
+  graphPath: string;
+  group: Group;
+  history: History;
+  hovering?: boolean;
+  index: BigInt[];
+  innerRef?: Ref<HTMLDivElement>;
+  isParent?: boolean;
+  isRelativeTime?: boolean;
+  isReply?: boolean;
+  node: GraphNode;
+  parentPost?: Post;
+  vip: string;
+}
+
+interface PostItemState {
+  inReplyMode: boolean;
+}
+
+class PostItem extends React.Component<PostItemProps, PostItemState> {
   constructor(props) {
     super(props);
 
@@ -45,8 +70,8 @@ class PostItem extends React.Component {
   navigateToReplies() {
     const { history, baseUrl, index, isParent } = this.props;
     if (isParent) {
- return;
-}
+      return;
+    }
     let indexString = '';
 
     index.forEach((i) => {
@@ -68,16 +93,15 @@ class PostItem extends React.Component {
       association,
       index,
       innerRef,
-      isParent,
-      isReply,
-      isRelativeTime,
+      isParent = false,
+      isReply = false,
+      isRelativeTime = true,
       parentPost,
       vip,
       group,
       hovering,
       bind
     } = this.props;
-    const graphResource = resourceFromPath(graphPath);
 
     let indexString = '';
 
@@ -93,17 +117,17 @@ class PostItem extends React.Component {
     return (
       <Col
         ref={innerRef}
-        pl="1"
-        pr="1"
-        mb="3"
+        pl={1}
+        pr={1}
+        mb={3}
         width="100%"
         alignItems="center"
       >
         <Col
-          pt="2"
+          pt={2}
           border={1}
           borderColor={ isParent ? 'gray' : 'lightGray' }
-          borderRadius="2"
+          borderRadius={2}
           width="100%"
           maxWidth="600px"
           backgroundColor={ hovering ? 'washedGray' : 'transparent' }
@@ -122,7 +146,7 @@ class PostItem extends React.Component {
               { (isReply || (parentPost && index.length > 1 && isParent)) ? (
                 <Row width="100%" alignItems="center" mb="2" pl="2" pr="2">
                   <Text color="gray" pr="1">Replying to</Text>
-                  <Mention ship={parentPost?.author} />
+                  <Mention ship={parentPost?.author} api={api} />
                 </Row>
               ) : null }
               <PostContent
@@ -147,7 +171,7 @@ class PostItem extends React.Component {
         { inReplyMode ? (
           <Col width="100%" maxWidth="600px">
             <Box
-              ml="3"
+              ml={3}
               height="16px"
               borderLeft={1}
               borderLeftColor="lightGray"
@@ -168,7 +192,4 @@ class PostItem extends React.Component {
   }
 }
 
-export default withState(PostItem, [
-  [useHovering, ['hovering', 'bind']]
-]);
-
+export default withHovering<PostItemProps>(PostItem);
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostReplies.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostReplies.tsx
index 9773a9a493..6214914c2b 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostReplies.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostReplies.tsx
@@ -12,7 +12,6 @@ export default function PostReplies(props) {
     api,
     history,
     association,
-    groups,
     graphPath,
     group,
     vip,
@@ -20,14 +19,13 @@ export default function PostReplies(props) {
   } = props;
 
   const graphResource = resourceFromPath(graphPath);
-  const graphId = `${graphResource.ship.slice(1)}/${graphResource.name}`;
 
   let graph = props.graph;
   const shouldRenderFeed = Boolean(graph);
 
   if (!shouldRenderFeed) {
     return (
-      <Box height="100%" width="100%" alignItems="center" pl="1" pt="3">
+      <Box height="100%" width="100%" alignItems="center" pl={1} pt={3}>
         <Loading />
       </Box>
     );
@@ -68,7 +66,7 @@ export default function PostReplies(props) {
         height="100%"
         alignItems="center" overflowY="scroll"
       >
-        <Box mt="3" width="100%" alignItems="center">
+        <Box mt={3} width="100%" alignItems="center">
           <PostItem
             key={node.post.index}
             node={node}
@@ -85,13 +83,13 @@ export default function PostReplies(props) {
           />
         </Box>
         <Box
-          pl="2"
-          pr="2"
+          pl={2}
+          pr={2}
           width="100%"
           maxWidth="616px"
           alignItems="center"
         >
-          <Col bg="washedGray" width="100%" alignItems="center" p="3">
+          <Col bg="washedGray" width="100%" alignItems="center" p={3}>
             <Text textAlign="center" width="100%">
               No one has posted any replies yet.
             </Text>
@@ -102,7 +100,7 @@ export default function PostReplies(props) {
   }
 
   return (
-    <Box height="calc(100% - 48px)" width="100%" alignItems="center" pl="1" pt="3">
+    <Box height="calc(100% - 48px)" width="100%" alignItems="center" pl={1} pt={3}>
       <PostFeed
         key={locationUrl}
         graphPath={graphPath}
@@ -112,7 +110,6 @@ export default function PostReplies(props) {
         pendingSize={pendingSize}
         association={association}
         group={group}
-        groups={groups}
         vip={vip}
         api={api}
         history={history}
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.tsx
index 8ac9193f18..ac19f87813 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.tsx
@@ -1,15 +1,26 @@
 import { Box, Col, Text } from '@tlon/indigo-react';
-import React from 'react';
-import { resourceFromPath } from '~/logic/lib/group';
+import { Association, Graph, Group } from '@urbit/api';
+import React, { ReactElement } from 'react';
+import GlobalApi from '~/logic/api/global';
 import { Loading } from '~/views/components/Loading';
 import { PostFeed } from './PostFeed';
 import PostInput from './PostInput';
 
-export default function PostTimeline(props) {
+interface PostTimelineProps {
+  api: GlobalApi;
+  association: Association;
+  baseUrl: string;
+  graph: Graph;
+  graphPath: string;
+  group: Group;
+  pendingSize: number;
+  vip: string;
+}
+
+const PostTimeline = (props: PostTimelineProps): ReactElement => {
   const {
     baseUrl,
     api,
-    history,
     association,
     graphPath,
     group,
@@ -17,12 +28,11 @@ export default function PostTimeline(props) {
     pendingSize,
     vip
   } = props;
-  const graphResource = resourceFromPath(graphPath);
   const shouldRenderFeed = Boolean(graph);
 
   if (!shouldRenderFeed) {
     return (
-      <Box height="100%" pt="3" pb="3" width="100%" alignItems="center" pl="1">
+      <Box height="100%" pt={3} pb={3} width="100%" alignItems="center" pl={1}>
         <Loading />
       </Box>
     );
@@ -40,10 +50,10 @@ export default function PostTimeline(props) {
         <Col
           width="100%"
           maxWidth="616px"
-          pt="3"
-          pl="2"
-          pr="2"
-          mb="3"
+          pt={3}
+          pl={2}
+          pr={2}
+          mb={3}
           alignItems="center"
         >
           <PostInput
@@ -55,13 +65,13 @@ export default function PostTimeline(props) {
           />
         </Col>
         <Box
-          pl="2"
-          pr="2"
+          pl={2}
+          pr={2}
           width="100%"
           maxWidth="616px"
           alignItems="center"
         >
-          <Col bg="washedGray" width="100%" alignItems="center" p="3">
+          <Col bg="washedGray" width="100%" alignItems="center" p={3}>
             <Text textAlign="center" width="100%">
               No one has posted anything here yet.
             </Text>
@@ -76,10 +86,10 @@ export default function PostTimeline(props) {
       <Box
         width="100%"
         maxWidth="616px"
-        pt="3"
-        pl="2"
-        pr="2"
-        mb="3"
+        pt={3}
+        pl={2}
+        pr={2}
+        mb={3}
         flexDirection="column"
         alignItems="center"
       >
@@ -91,7 +101,7 @@ export default function PostTimeline(props) {
           graphPath={graphPath}
         />
       </Box>
-      <Box height="calc(100% - 176px)" width="100%" alignItems="center" pl="1">
+      <Box height="calc(100% - 176px)" width="100%" alignItems="center" pl={1}>
         <PostFeed
           key={graphPath}
           graphPath={graphPath}
@@ -101,7 +111,6 @@ export default function PostTimeline(props) {
           group={group}
           vip={vip}
           api={api}
-          history={history}
           baseUrl={baseUrl}
         />
       </Box>
@@ -109,3 +118,4 @@ export default function PostTimeline(props) {
   );
 }
 
+export default PostTimeline;
diff --git a/pkg/interface/src/views/landscape/components/InvitePopover.tsx b/pkg/interface/src/views/landscape/components/InvitePopover.tsx
index 83b0fcde5c..f1a6f3b263 100644
--- a/pkg/interface/src/views/landscape/components/InvitePopover.tsx
+++ b/pkg/interface/src/views/landscape/components/InvitePopover.tsx
@@ -1,9 +1,9 @@
 import {
-  Box,
+    Box,
 
-  Col, ManagedTextInputField as Input,
+    Col, ManagedTextInputField as Input,
 
-  Row, Text
+    Row, Text
 } from '@tlon/indigo-react';
 import { Association } from '@urbit/api/metadata';
 import { Form, Formik } from 'formik';
@@ -104,7 +104,7 @@ export function InvitePopover(props: InvitePopoverProps) {
               validateOnBlur
             >
               <Form>
-                <Col gapY="3" pt={3} px={3}>
+                <Col gapY={3} pt={3} px={3}>
                   <Box>
                     <Text>Invite to </Text>
                     <Text fontWeight="800">{title}</Text>
diff --git a/pkg/interface/src/views/landscape/components/JoinGroup.tsx b/pkg/interface/src/views/landscape/components/JoinGroup.tsx
index e01743383e..1b3d91db72 100644
--- a/pkg/interface/src/views/landscape/components/JoinGroup.tsx
+++ b/pkg/interface/src/views/landscape/components/JoinGroup.tsx
@@ -1,11 +1,11 @@
 import {
-  Box, Col,
+    Box, Col,
 
-  Icon,
+    Icon,
 
-  ManagedTextInputField as Input, Row,
+    ManagedTextInputField as Input, Row,
 
-  Text
+    Text
 } from '@tlon/indigo-react';
 import { MetadataUpdatePreview } from '@urbit/api';
 import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
@@ -140,14 +140,14 @@ export function JoinGroup(props: JoinGroupProps): ReactElement {
   );
 
   return (
-    <Col p="3">
+    <Col p={3}>
       <Box mb={3}>
-        <Text fontSize="2" fontWeight="bold">
+        <Text fontSize={2} fontWeight="bold">
           Join a Group
         </Text>
       </Box>
       {_.isString(preview) ? (
-        <Col width="100%" gapY="4">
+        <Col width="100%" gapY={4}>
           <Text>The host appears to be offline. Join anyway?</Text>
           <StatelessAsyncButton
             primary
@@ -166,23 +166,23 @@ export function JoinGroup(props: JoinGroupProps): ReactElement {
           >
             { Object.keys(preview.channels).length > 0 && (
               <Col
-                gapY="2"
-                p="2"
-                borderRadius="2"
-                border="1"
+                gapY={2}
+                p={2}
+                borderRadius={2}
+                border={1}
                 borderColor="washedGray"
                 bg="washedBlue"
                 maxHeight="300px"
                 overflowY="auto"
               >
-                <Text gray fontSize="1">
+                <Text gray fontSize={1}>
                   Channels
                 </Text>
                 <Box width="100%" flexShrink={0}>
                   {Object.values(preview.channels).map(({ metadata }: any) => (
                     <Row width="100%">
                       <Icon
-                        mr="2"
+                        mr={2}
                         color="blue"
                         icon={getModuleIcon(metadata?.config?.graph) as any}
                       />
@@ -203,7 +203,7 @@ export function JoinGroup(props: JoinGroupProps): ReactElement {
           </StatelessAsyncButton>
         </>
       ) : (
-        <Col width="100%" gapY="4">
+        <Col width="100%" gapY={4}>
           <Formik
             validationSchema={formSchema}
             initialValues={initialValues}
@@ -217,8 +217,8 @@ export function JoinGroup(props: JoinGroupProps): ReactElement {
                 caption="What group are you joining?"
                 placeholder="~sampel-palnet/test-group"
               />
-              <AsyncButton mt="4">Join Group</AsyncButton>
-              <FormError mt="4" />
+              <AsyncButton mt={4}>Join Group</AsyncButton>
+              <FormError mt={4} />
             </Form>
           </Formik>
         </Col>
diff --git a/pkg/interface/src/views/landscape/components/MessageInvite.tsx b/pkg/interface/src/views/landscape/components/MessageInvite.tsx
index 08d52284ae..b3a4b1f82d 100644
--- a/pkg/interface/src/views/landscape/components/MessageInvite.tsx
+++ b/pkg/interface/src/views/landscape/components/MessageInvite.tsx
@@ -1,20 +1,25 @@
+import { Box, Col, Text } from '@tlon/indigo-react';
+import { Form, Formik } from 'formik';
+import _ from 'lodash';
 import React from 'react';
-import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
-import { Col, Text, Box } from '@tlon/indigo-react';
-import { ShipSearch } from '~/views/components/ShipSearch';
 import { resourceFromPath } from '~/logic/lib/group';
 import { deSig } from '~/logic/lib/util';
 import { AsyncButton } from '~/views/components/AsyncButton';
+import { ShipSearch } from '~/views/components/ShipSearch';
 
-const formSchema = Yup.object({
+interface FormSchema {
+  ships: string[];
+}
+
+const formSchema = Yup.object<FormSchema>({
   ships: Yup.array(Yup.string()).min(1, 'Must invite at least one ship')
 });
 
 export const MessageInvite = (props) => {
-  const { association, api } = { ...props };
+  const { association, api } = props;
   const initialValues: FormSchema = { ships: [] };
-  const onSubmit = async ({ ships, description }: FormSchema, actions) => {
+  const onSubmit = async ({ ships }: FormSchema, actions) => {
     try {
       const { ship, name } = resourceFromPath(association.group);
       await api.groups.invite(
diff --git a/pkg/interface/src/views/landscape/components/MetadataIcon.tsx b/pkg/interface/src/views/landscape/components/MetadataIcon.tsx
index 171b36e892..834a43cd08 100644
--- a/pkg/interface/src/views/landscape/components/MetadataIcon.tsx
+++ b/pkg/interface/src/views/landscape/components/MetadataIcon.tsx
@@ -5,7 +5,7 @@ import { uxToHex } from '~/logic/lib/util';
 import { PropFunc } from '~/types/util';
 
 type MetadataIconProps = PropFunc<typeof Box> & {
-  metadata: Metadata;
+  metadata: Pick<Metadata, 'color' | 'picture'>;
 };
 
 export function MetadataIcon(props: MetadataIconProps) {
diff --git a/pkg/interface/src/views/landscape/components/NewChannel.tsx b/pkg/interface/src/views/landscape/components/NewChannel.tsx
index 591779b6eb..56b0e22b74 100644
--- a/pkg/interface/src/views/landscape/components/NewChannel.tsx
+++ b/pkg/interface/src/views/landscape/components/NewChannel.tsx
@@ -1,8 +1,7 @@
 import {
   Box,
-
-  Col, ManagedTextInputField as Input,
-
+  Col,
+  ManagedTextInputField as Input,
   Text
 } from '@tlon/indigo-react';
 import { Form, Formik } from 'formik';
@@ -15,6 +14,7 @@ import { resourceFromPath } from '~/logic/lib/group';
 import { useWaitForProps } from '~/logic/lib/useWaitForProps';
 import { deSig, parentPath, stringToSymbol } from '~/logic/lib/util';
 import useGroupState from '~/logic/state/group';
+import { PropFunc } from '~/types/util';
 import { Workspace } from '~/types/workspace';
 import { AsyncButton } from '~/views/components/AsyncButton';
 import { FormError } from '~/views/components/FormError';
@@ -44,7 +44,7 @@ type NewChannelProps = {
   group?: string;
   workspace: Workspace;
   baseUrl?: string;
-  existingMembers: string[];
+  existingMembers?: string[];
 } & PropFunc<typeof Col>;
 
 export function NewChannel(props: NewChannelProps): ReactElement {
@@ -127,7 +127,7 @@ export function NewChannel(props: NewChannelProps): ReactElement {
       {...rest}
     >
       <Box
-        pb='3'
+        pb={3}
         display={workspace?.type === 'messages' ? 'none' : ['block', 'none']}
         onClick={() => history.push(props?.baseUrl ?? '/')}
       >
@@ -152,16 +152,13 @@ export function NewChannel(props: NewChannelProps): ReactElement {
         }}
         onSubmit={onSubmit}
       >
-        <Form>
-          <Col maxWidth='348px' gapY='4'>
-            <Col
-              pt={4}
-              gapY='2'
-              display={workspace?.type === 'messages' ? 'none' : 'flex'}
-            >
-              <Box fontSize='1' color='black' mb={2}>
-                Channel Type
-              </Box>
+      <Form>
+          <Col
+          maxWidth="348px"
+          gapY={4}
+          >
+            <Col pt={4} gapY={2} display={(workspace?.type === 'messages') ? 'none' : 'flex'}>
+              <Box fontSize={1} color="black" mb={2}>Channel Type</Box>
               <IconRadio
                 display={!(workspace?.type === 'home') ? 'flex' : 'none'}
                 icon='Chat'
diff --git a/pkg/interface/src/views/landscape/components/NewGroup.tsx b/pkg/interface/src/views/landscape/components/NewGroup.tsx
index 99c0181ae6..7f39ed4383 100644
--- a/pkg/interface/src/views/landscape/components/NewGroup.tsx
+++ b/pkg/interface/src/views/landscape/components/NewGroup.tsx
@@ -6,7 +6,7 @@ import {
 import { Enc, GroupPolicy } from '@urbit/api';
 import { Form, Formik, FormikHelpers } from 'formik';
 import React, { ReactElement, useCallback } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import * as Yup from 'yup';
 import GlobalApi from '~/logic/api/global';
 import { useWaitForProps } from '~/logic/lib/useWaitForProps';
@@ -31,8 +31,9 @@ interface NewGroupProps {
   api: GlobalApi;
 }
 
-export function NewGroup(props: NewGroupProps & RouteComponentProps): ReactElement {
-  const { api, history } = props;
+export function NewGroup(props: NewGroupProps): ReactElement {
+  const { api } = props;
+  const history = useHistory();
   const initialValues: FormSchema = {
     title: '',
     description: '',
@@ -78,7 +79,7 @@ export function NewGroup(props: NewGroupProps & RouteComponentProps): ReactEleme
 
   return (
     <>
-      <Col overflowY="auto" p="3">
+      <Col overflowY="auto" p={3}>
         <Box mb={3}>
           <Text fontWeight="bold">New Group</Text>
         </Box>
@@ -88,7 +89,7 @@ export function NewGroup(props: NewGroupProps & RouteComponentProps): ReactEleme
           onSubmit={onSubmit}
         >
           <Form>
-            <Col gapY="4">
+            <Col gapY={4}>
               <Input
                 id="title"
                 label="Name"
diff --git a/pkg/interface/src/views/landscape/components/Participants.tsx b/pkg/interface/src/views/landscape/components/Participants.tsx
index 5acde00357..b852711224 100644
--- a/pkg/interface/src/views/landscape/components/Participants.tsx
+++ b/pkg/interface/src/views/landscape/components/Participants.tsx
@@ -1,10 +1,10 @@
 import {
-  Action, Box, Col,
+    Action, Box, Col,
 
-  Icon,
-  Image, Row,
+    Icon,
+    Image, Row,
 
-  StatelessTextInput as Input, Text
+    StatelessTextInput as Input, Text
 } from '@tlon/indigo-react';
 import { Contact, Contacts } from '@urbit/api/contacts';
 import { Group, RoleTags } from '@urbit/api/groups';
@@ -12,8 +12,8 @@ import { Association } from '@urbit/api/metadata';
 import _ from 'lodash';
 import f from 'lodash/fp';
 import React, {
-  ChangeEvent,
-  ReactElement, useCallback, useMemo, useState
+    ChangeEvent,
+    ReactElement, useCallback, useMemo, useState
 } from 'react';
 import { Link } from 'react-router-dom';
 import VisibilitySensor from 'react-visibility-sensor';
@@ -175,7 +175,7 @@ export function Participants(props: {
         zIndex={1}
         flexShrink={0}
       >
-        <Row mr="4" flexShrink={0}>
+        <Row mr={4} flexShrink={0}>
           <Tab
             selected={filter}
             setSelected={setFilter}
@@ -199,13 +199,13 @@ export function Participants(props: {
         </Row>
       </Row>
       <Col flexShrink={0} width="100%" height="fit-content">
-        <Row alignItems="center" bg="washedGray" borderRadius="1" px="2" my="2">
+        <Row alignItems="center" bg="washedGray" borderRadius={1} px={2} my={2}>
           <Icon color="gray" icon="Search" />
           <Input
             maxWidth="256px"
             color="gray"
             bg="transparent"
-            border="0"
+            border={0}
             placeholder="Search Participants"
             onChange={onSearchChange}
           />
@@ -312,12 +312,12 @@ function Participant(props: {
 
   return (
     <>
-      <Row flexDirection={['column', 'row']} gapX="2" alignItems={['flex-start', 'center']} width="100%" justifyContent="space-between" height={['96px', '60px']}>
-        <Row gapX="4" alignItems="center" height="100%">
+      <Row flexDirection={['column', 'row']} gapX={2} alignItems={['flex-start', 'center']} width="100%" justifyContent="space-between" height={['96px', '60px']}>
+        <Row gapX={4} alignItems="center" height="100%">
       <Box>{avatar}</Box>
-      <Col alignItems="self-start" justifyContent="center" gapY="1" height="100%" minWidth='0'>
+      <Col alignItems="self-start" justifyContent="center" gapY={1} height="100%" minWidth={0}>
         {hasNickname && (
-          <Row minWidth='0' flexShrink={1}>
+          <Row minWidth={0} flexShrink={1}>
           <TruncText title={contact.nickname} color="black">
             {contact.nickname}
           </TruncText>
@@ -332,10 +332,10 @@ function Participant(props: {
         justifyContent="space-between"
         width={['100%', '128px']}
         alignItems="center"
-        gapX="4"
+        gapX={4}
       >
         <Col>
-          <Text color="lightGray" mb="1">
+          <Text color="lightGray" mb={1}>
             Role
           </Text>
           <Text>{_.capitalize(role)}</Text>
@@ -346,8 +346,8 @@ function Participant(props: {
           options={
             <Col
               bg="white"
-              border="1"
-              borderRadius="1"
+              border={1}
+              borderRadius={1}
               borderColor="lightGray"
               gapY={2}
               p={2}
diff --git a/pkg/interface/src/views/landscape/components/PopoverRoutes.tsx b/pkg/interface/src/views/landscape/components/PopoverRoutes.tsx
index 089305ce90..952ef1008b 100644
--- a/pkg/interface/src/views/landscape/components/PopoverRoutes.tsx
+++ b/pkg/interface/src/views/landscape/components/PopoverRoutes.tsx
@@ -65,9 +65,9 @@ export function PopoverRoutes(
                   borderRight={1}
                   borderRightColor="washedGray"
                 >
-                  <Text my="4" mx="3" fontWeight="600" fontSize="2">Group Settings</Text>
-                  <Col gapY="2">
-                    <Text my="1" mx="3" gray>Group</Text>
+                  <Text my={4} mx={3} fontWeight="600" fontSize={2}>Group Settings</Text>
+                  <Col gapY={2}>
+                    <Text my={1} mx={3} gray>Group</Text>
                     <SidebarItem
                       icon='Notifications'
                       to={relativeUrl('/settings#notifications')}
@@ -82,7 +82,7 @@ export function PopoverRoutes(
                     </SidebarItem>
                     { admin && (
                       <>
-                        <Box pt="3" mb="1" mx="3">
+                        <Box pt={3} mb={1} mx={3}>
                           <Text gray>Administration</Text>
                         </Box>
                         <SidebarItem
diff --git a/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx b/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx
index aa9f1e1293..7f4107197c 100644
--- a/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx
+++ b/pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx
@@ -1,17 +1,17 @@
 import { Box, Col, Icon, Text } from '@tlon/indigo-react';
 import { Association } from '@urbit/api/metadata';
-import React, { ReactElement, ReactNode, useRef, useState, useCallback } from 'react';
+import React, { ReactElement, ReactNode, useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import urbitOb from 'urbit-ob';
-import { Dropdown } from '~/views/components/Dropdown';
 import GlobalApi from '~/logic/api/global';
 import { isWriter } from '~/logic/lib/group';
 import { getItemTitle } from '~/logic/lib/util';
 import useContactState from '~/logic/state/contact';
 import useGroupState from '~/logic/state/group';
-import { MessageInvite } from '~/views/landscape/components/MessageInvite';
+import { Dropdown } from '~/views/components/Dropdown';
 import RichText from '~/views/components/RichText';
+import { MessageInvite } from '~/views/landscape/components/MessageInvite';
 
 const TruncatedText = styled(RichText)`
   white-space: nowrap;
@@ -77,9 +77,9 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
       borderRight={1}
       borderRightColor='gray'
       pr={3}
-      fontSize='1'
+      fontSize={1}
       mr='12px'
-      my='1'
+      my={1}
       flexShrink={0}
       display={['block','none']}
     >
@@ -92,12 +92,12 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
   const Title = () => (
     <Text
       mono={urbitOb.isValidPatp(title)}
-      fontSize='2'
+      fontSize={2}
       fontWeight='600'
       textOverflow='ellipsis'
       overflow='hidden'
       whiteSpace='nowrap'
-      minWidth='0'
+      minWidth={0}
       maxWidth={association?.metadata?.description ? ['100%', '50%'] : 'none'}
       mr='2'
       ml='1'
@@ -112,8 +112,8 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
       display={['none','inline']}
       mono={workspace === '/messages' && !urbitOb.isValidPatp(title)}
       color='gray'
-      mb='0'
-      minWidth='0'
+      mb={0}
+      minWidth={0}
       maxWidth='50%'
       flexShrink={1}
       disableRemoteContent
@@ -166,7 +166,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
 
   const MenuControl = () => (
     <Link to={`${baseUrl}/settings`}>
-      <Icon icon='Menu' color='gray' pr='2' />
+      <Icon icon='Menu' color='gray' pr={2} />
     </Link>
   );
 
@@ -179,8 +179,8 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
       <Box
         flexShrink={0}
         height='48px'
-        py='2'
-        px='2'
+        py={2}
+        px={2}
         borderBottom={1}
         borderBottomColor='lightGray'
         display='flex'
diff --git a/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx b/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx
index dc215a73b9..eca22c971d 100644
--- a/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx
+++ b/pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx
@@ -1,5 +1,5 @@
 import {
-  Col
+    Col
 } from '@tlon/indigo-react';
 import React, { ReactElement, useRef } from 'react';
 import styled from 'styled-components';
@@ -62,7 +62,7 @@ export function Sidebar(props: SidebarProps): ReactElement | null {
       width="100%"
       gridRow="1/2"
       gridColumn="1/2"
-      borderTopLeftRadius='2'
+      borderTopLeftRadius={2}
       borderRight={1}
       borderRightColor="lightGray"
       overflowY="scroll"
diff --git a/pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx b/pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx
index 1473b4829b..7b90d23855 100644
--- a/pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx
+++ b/pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx
@@ -114,7 +114,7 @@ export function SidebarItem(props: {
       pr={3}
       selected={selected}
     >
-      <Row width='100%' alignItems="center" flex='1 auto' minWidth='0'>
+      <Row width='100%' alignItems="center" flex='1 auto' minWidth={0}>
         {hasNotification && <Text color='black' marginLeft={-2} width={2} display='flex' alignItems='center'>
           <Dot />
         </Text>}
@@ -130,7 +130,7 @@ export function SidebarItem(props: {
           <Text
             lineHeight="tall"
             display='inline-block'
-            flex='1'
+            flex={1}
             overflow='hidden'
             width='100%'
             mono={urbitOb.isValidPatp(title)}
diff --git a/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx b/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx
index 89df829438..6ca71b0c81 100644
--- a/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx
+++ b/pkg/interface/src/views/landscape/components/Sidebar/SidebarListHeader.tsx
@@ -1,11 +1,11 @@
 import {
-  Box,
+    Box,
 
-  Col, Icon,
+    Col, Icon,
 
-  ManagedCheckboxField as Checkbox, ManagedRadioButtonField as Radio, Row,
+    ManagedCheckboxField as Checkbox, ManagedRadioButtonField as Radio, Row,
 
-  Text
+    Text
 } from '@tlon/indigo-react';
 import { FormikHelpers } from 'formik';
 import React, { ReactElement, useCallback } from 'react';
@@ -91,7 +91,7 @@ export function SidebarListHeader(props: {
          <Text>
            Group Feed
          </Text>
-         <Text mr="1" color="blue">
+         <Text mr={1} color="blue">
            { unreadCount > 0 && unreadCount}
          </Text>
        </Row>
@@ -159,7 +159,7 @@ export function SidebarListHeader(props: {
           <FormikOnBlur initialValues={props.initialValues} onSubmit={onSubmit}>
             <Col bg="white" borderRadius={1} border={1} borderColor="lightGray">
               <Col
-                gapY="2"
+                gapY={2}
                 borderBottom={1}
                 borderBottomColor="washedGray"
                 p={2}
@@ -167,7 +167,7 @@ export function SidebarListHeader(props: {
                 <Box>
                   <Text color="gray">Sort Order</Text>
                 </Box>
-                <Radio mb="1" label="A -> Z" id="asc" name="sortBy" />
+                <Radio mb={1} label="A -> Z" id="asc" name="sortBy" />
                 <Radio label="Last Updated" id="lastUpdated" name="sortBy" />
               </Col>
               <Col px={2}>
diff --git a/pkg/interface/src/views/landscape/components/SidebarItem.tsx b/pkg/interface/src/views/landscape/components/SidebarItem.tsx
index 4945915f11..245fd9e00d 100644
--- a/pkg/interface/src/views/landscape/components/SidebarItem.tsx
+++ b/pkg/interface/src/views/landscape/components/SidebarItem.tsx
@@ -28,13 +28,13 @@ export const SidebarItem = ({
       bg="white"
       bgActive="washedGray"
       display="flex"
-      px="3"
-      py="2"
+      px={3}
+      py={2}
       justifyContent="space-between"
       {...rest}
     >
       <Row alignItems="center">
-        <Icon color={color} icon={icon as any} mr="2" />
+        <Icon color={color} icon={icon as any} mr={2} />
         <Text color={color}>{text}</Text>
       </Row>
       {children}
diff --git a/pkg/interface/src/views/landscape/components/TutorialModal.tsx b/pkg/interface/src/views/landscape/components/TutorialModal.tsx
index 94caa4de58..3d389f811c 100644
--- a/pkg/interface/src/views/landscape/components/TutorialModal.tsx
+++ b/pkg/interface/src/views/landscape/components/TutorialModal.tsx
@@ -5,9 +5,9 @@ import { useHistory } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
 import { getRelativePosition } from '~/logic/lib/relativePosition';
 import {
-  getTrianglePosition, MODAL_WIDTH_PX, progressDetails,
+    getTrianglePosition, MODAL_WIDTH_PX, progressDetails,
 
-  TUTORIAL_GROUP, TUTORIAL_HOST
+    TUTORIAL_GROUP, TUTORIAL_HOST
 } from '~/logic/lib/tutorialModal';
 import useLocalState, { selectLocalState } from '~/logic/state/local';
 import { tutorialProgress as progress } from '~/types';
@@ -132,20 +132,20 @@ export function TutorialModal(props: { api: GlobalApi }) {
   if (tutorialProgress === 'done') {
     return (
       <Portal>
-        <ModalOverlay dismiss={dismiss} borderRadius="2" maxWidth="270px" backgroundColor="white">
-          <Col p="3" bg="lightBlue">
-            <Col mb="3">
+        <ModalOverlay dismiss={dismiss} borderRadius={2} maxWidth="270px" backgroundColor="white">
+          <Col p={3} bg="lightBlue">
+            <Col mb={3}>
               <Text lineHeight="tall" fontWeight="bold">
                 Tutorial Finished
               </Text>
-              <Text fontSize="0" gray>
+              <Text fontSize={0} gray>
                 {progressIdx} of {progress.length - 2}
               </Text>
             </Col>
             <Text lineHeight="tall">
               This tutorial is finished. Would you like to leave Beginner Island?
             </Text>
-            <Row mt="3" gapX="2" justifyContent="flex-end">
+            <Row mt={3} gapX={2} justifyContent="flex-end">
               <Button backgroundColor="washedGray" onClick={dismiss}>
                 Later
               </Button>
@@ -165,9 +165,9 @@ export function TutorialModal(props: { api: GlobalApi }) {
 
   if(paused) {
     return (
-      <ModalOverlay dismiss={bailExit} borderRadius="2" maxWidth="270px" backgroundColor="white">
-        <Col p="3">
-          <Col mb="3">
+      <ModalOverlay dismiss={bailExit} borderRadius={2} maxWidth="270px" backgroundColor="white">
+        <Col p={3}>
+          <Col mb={3}>
             <Text lineHeight="tall" fontWeight="bold">
               End Tutorial Now?
             </Text>
@@ -175,7 +175,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
           <Text lineHeight="tall">
             You can always restart the tutorial by typing "tutorial" in Leap.
           </Text>
-          <Row mt="3" gapX="2" justifyContent="flex-end">
+          <Row mt={3} gapX={2} justifyContent="flex-end">
             <Button backgroundColor="washedGray" onClick={bailExit}>
               Cancel
             </Button>
@@ -203,15 +203,15 @@ export function TutorialModal(props: { api: GlobalApi }) {
         display="flex"
         flexDirection="column"
         width={['100%', MODAL_WIDTH_PX]}
-        borderRadius="2"
+        borderRadius={2}
       >
         <Col
           position="relative"
           justifyContent="space-between"
           height="100%"
           width="100%"
-          borderRadius="2"
-          p="3"
+          borderRadius={2}
+          p={3}
           bg="lightBlue"
 
         >
@@ -235,17 +235,17 @@ export function TutorialModal(props: { api: GlobalApi }) {
           >
             <Icon icon="X" />
           </Box>
-          <Col mb="3">
+          <Col mb={3}>
             <Text lineHeight="tall" fontWeight="bold">
               {title}
             </Text>
-            <Text fontSize="0" gray>
+            <Text fontSize={0} gray>
               {progressIdx} of {progress.length - 2}
             </Text>
           </Col>
 
           <Text lineHeight="tall">{description}</Text>
-          <Row gapX="2" mt="3" justifyContent="flex-end">
+          <Row gapX={2} mt={3} justifyContent="flex-end">
             { progressIdx > 1 && (
               <Button bg="washedGray" onClick={prev}>
                 Back
diff --git a/pkg/npm/api/hark/types.ts b/pkg/npm/api/hark/types.ts
index 180ec2ddca..aa4ea2ad4b 100644
--- a/pkg/npm/api/hark/types.ts
+++ b/pkg/npm/api/hark/types.ts
@@ -1,9 +1,9 @@
+import { BigInteger } from "big-integer";
 import { Post } from "../graph/types";
 import { GroupUpdate } from "../groups/types";
 import BigIntOrderedMap from "../lib/BigIntOrderedMap";
-import {BigInteger} from "big-integer";
 
-export type GraphNotifDescription = "link" | "comment" | "note" | "mention" | "message";
+export type GraphNotifDescription = "link" | "comment" | "note" | "mention" | "message" | "post";
 
 export interface UnreadStats {
   unreads: Set<string> | number;
diff --git a/pkg/npm/api/metadata/types.ts b/pkg/npm/api/metadata/types.ts
index 5c50a1f546..52863c95f4 100644
--- a/pkg/npm/api/metadata/types.ts
+++ b/pkg/npm/api/metadata/types.ts
@@ -73,12 +73,12 @@ export interface Metadata {
   vip: PermVariation;
 }
 
-type MetadataConfig = GroupConfig | GraphConfig;
+export type MetadataConfig = GroupConfig | GraphConfig;
 
-interface GroupConfig {
+export interface GroupConfig {
   group: null | Record<string, string> | Resource;
 }
-interface GraphConfig {
+export interface GraphConfig {
   graph: string;
 }
 

From 9471ce081509d4f980119f693c3845f44da37259 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Mon, 10 May 2021 07:36:07 -0700
Subject: [PATCH 2/3] hover

---
 pkg/interface/src/logic/lib/util.tsx                      | 8 ++++----
 .../src/views/landscape/components/Home/Post/PostFeed.tsx | 7 +++++--
 .../views/landscape/components/Home/Post/PostReplies.tsx  | 2 +-
 .../views/landscape/components/Home/Post/PostTimeline.tsx | 2 +-
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/pkg/interface/src/logic/lib/util.tsx b/pkg/interface/src/logic/lib/util.tsx
index 9d5911c4b4..1dc01f9cf2 100644
--- a/pkg/interface/src/logic/lib/util.tsx
+++ b/pkg/interface/src/logic/lib/util.tsx
@@ -424,10 +424,10 @@ export const useHovering = (): useHoveringInterface => {
 };
 
 export function withHovering<T>(Component: React.ComponentType<T>) {
-  const { hovering, bind } = useHovering();
-  return (props: T) => (
-    <Component hovering={hovering} {...bind} {...props} />
-  )
+  return React.forwardRef((props, ref) => {
+    const { hovering, bind } = useHovering();
+    return <Component ref={ref} hovering={hovering} bind={bind} {...props} />
+  })
 }
 
 const DM_REGEX = /ship\/~([a-z]|-)*\/dm--/;
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.tsx
index a9acc61943..7baa0a92c9 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostFeed.tsx
@@ -2,6 +2,7 @@ import { Box, Col } from '@tlon/indigo-react';
 import { Association, Graph, GraphNode, Group } from '@urbit/api';
 import bigInt from 'big-integer';
 import React from 'react';
+import { withRouter } from 'react-router';
 import GlobalApi from '~/logic/api/global';
 import { resourceFromPath } from '~/logic/lib/group';
 import VirtualScroller from '~/views/components/VirtualScroller';
@@ -15,7 +16,7 @@ interface PostFeedProps {
   graph: Graph;
   graphPath: string;
   api: GlobalApi;
-  history?: History;
+  history: History;
   baseUrl: string;
   parentNode?: GraphNode;
   grandparentNode?: GraphNode;
@@ -25,7 +26,7 @@ interface PostFeedProps {
   pendingSize: number;
 }
 
-export class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
+class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
   isFetching: boolean;
   constructor(props) {
     super(props);
@@ -187,3 +188,5 @@ export class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
     );
   }
 }
+
+export default withRouter(PostFeed);
\ No newline at end of file
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostReplies.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostReplies.tsx
index 6214914c2b..b5ba989dcf 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostReplies.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostReplies.tsx
@@ -3,7 +3,7 @@ import bigInt from 'big-integer';
 import React from 'react';
 import { resourceFromPath } from '~/logic/lib/group';
 import { Loading } from '~/views/components/Loading';
-import { PostFeed } from './PostFeed';
+import PostFeed from './PostFeed';
 import PostItem from './PostItem/PostItem';
 
 export default function PostReplies(props) {
diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.tsx
index ac19f87813..5fe1008db0 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.tsx
@@ -3,7 +3,7 @@ import { Association, Graph, Group } from '@urbit/api';
 import React, { ReactElement } from 'react';
 import GlobalApi from '~/logic/api/global';
 import { Loading } from '~/views/components/Loading';
-import { PostFeed } from './PostFeed';
+import PostFeed from './PostFeed';
 import PostInput from './PostInput';
 
 interface PostTimelineProps {

From 740a6efe7203fe4743f2e987aee1c8c77e67ca02 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Mon, 10 May 2021 20:25:57 -0400
Subject: [PATCH 3/3] interface: stringify number prop

0 is falsy.
---
 pkg/interface/src/views/components/Loading.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/components/Loading.tsx b/pkg/interface/src/views/components/Loading.tsx
index b305f13da3..0d42e90feb 100644
--- a/pkg/interface/src/views/components/Loading.tsx
+++ b/pkg/interface/src/views/components/Loading.tsx
@@ -7,7 +7,7 @@ interface LoadingProps {
 }
 export function Loading({ text }: LoadingProps) {
   return (
-    <Body border={0}>
+    <Body border="0">
       <Center height="100%">
         <LoadingSpinner />
         {Boolean(text) && <Text ml={4}>{text}</Text>}