Merge branch 'release/next-js' into james/chatmessage

bin/solid.pill

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ec58605002fafbe6f3a5988fe1db4bd31e2fd40370b30e96db64a98c8f7da0ea
+oid sha256:9433e0a7f1edbdcc6c8ac3e70c9516061d35218e5a1dc3192b2189dfb28cdc88
-size 9474412
+size 9539470

pkg/arvo/app/glob.hoon

@@ -5,7 +5,7 @@
 /-  glob
 /+  default-agent, verb, dbug
 |%
-++  hash  0v7.iotki.j1ptb.mk9vm.borai.jfcr1
+++  hash  0v5.pmklm.qttdl.n8bs0.0tnc4.gg633
 +$  state-0  [%0 hash=@uv glob=(unit (each glob:glob tid=@ta))]
 +$  all-states
   $%  state-0

pkg/arvo/app/graph-push-hook.hoon

@@ -221,7 +221,6 @@
     (node-to-indexed-post node)
   =/  =permission-level:store
     (get-permission permissions is-admin writers)
-  ~&  permission-level
   ?-  permission-level
       %yes  %.y
       %no   %.n
@@ -238,7 +237,7 @@
   |=  [=resource:res indices=(set index:store)]
   ^-  ?
   %-  (bond |.(%.n))
-  %+  biff  (get-roles-writers-variation)
+  %+  biff  (get-roles-writers-variation resource)
   |=  [is-admin=? writers=(set ship) vip=vip-metadata:metadata]
   %-  some  
   %+  levy  ~(tap by indices)

pkg/arvo/app/group-push-hook.hoon

@@ -42,7 +42,7 @@
   |^
   ?.  =(mark %sane)
     (on-poke:def mark vase)
-  [sane this]
+  [(sane !<(?(%check %fix) vase)) this]
   ::
   ++  scry-sharing
     .^  (set resource)
@@ -54,7 +54,12 @@
     ==
   ::
   ++  sane
+    |=  input=?(%check %fix)
     ^-  (list card)
+    =;  cards=(list card)
+      ?:  =(%check input)
+        ~&(cards ~)
+      cards
     %+  murn
       ~(tap in scry-sharing)
     |=  rid=resource
@@ -67,7 +72,7 @@
     =/  subs=(set ship)
       (get-subscribers-for-group rid)
     =/  to-remove=(set ship)
-      (~(dif in members.group) subs)
+      (~(dif in members.group) (~(gas in subs) our.bowl ~))
     ?~  to-remove  ~
     `(poke-store %remove-members rid to-remove)
   ::

pkg/arvo/app/group-store.hoon

@@ -30,7 +30,7 @@
 ::
 ::
 /-  *group
-/+  store=group-store, default-agent, verb, dbug, resource, *migrate
+/+  store=group-store, default-agent, verb, dbug, resource, *migrate, agentio
 |%
 +$  card  card:agent:gall
 ::
@@ -111,6 +111,8 @@
     ?>  (team:title our.bowl src.bowl)
     =^  cards  state
       ?+    mark  (on-poke:def mark vase)
+        %sane  (poke-sane:gc !<(?(%check %fix) vase))
+      ::
           ?(%group-update %group-action)
         (poke-group-update:gc !<(update:store vase))
       ::
@@ -189,6 +191,7 @@
   --
 ::
 |_  bol=bowl:gall
++*  io  ~(. agentio bol)
 ++  peek-group
   |=  rid=resource
   ^-  (unit group)
@@ -213,6 +216,27 @@
       (~(has in ban-ranks.policy) (clan:title ship))
     ==
   ==
+++  poke-sane
+  |=  input=?(%check %fix)
+  ^-  (quip card _state)
+  =;  cards=(list card)
+    ?:  =(%check input)
+      ~&  cards
+      `state
+    [cards state]
+  %+  roll  ~(tap in ~(key by groups))
+  |=  [rid=resource out=(list card)]
+  ?.  ?&  =(entity.rid our.bol)
+          !(~(has in members:(~(got by groups) rid)) our.bol)
+      ==
+    out
+  =/  =wire
+    sane+(en-path:resource rid)
+  =*  poke-self  ~(poke-self pass:io wire)
+  %+  weld  out
+  :~  (poke-self group-update+!>([%add-members rid (silt our.bol ~)]))
+      (poke-self group-update+!>([%add-tag rid %admin (silt our.bol ~)]))
+  ==
 ::
 ++  poke-import
   |=  arc=*

pkg/arvo/app/group-view.hoon

@@ -3,13 +3,24 @@
     resource, dbug, grpl=group, conl=contact, verb
 |%
 ++  card  card:agent:gall
+::
++$   base-state
+  joining=(map rid=resource [=ship =progress:view])
+::
 +$  state-zero
-  $:  %0
+  [%0 base-state]
-      joining=(map rid=resource [=ship =progress:view])
+::
++$  state-one
+  [%1 base-state]
+::
++$  versioned-state
+  $%  state-zero
+      state-one
   ==
+::
 ++  view  view-sur
 --
-=|  state-zero
+=|  state-one
 =*  state  -
 ::
 %-  agent:dbug
@@ -28,13 +39,21 @@
 ::
 ++  on-load
   |=  =vase
-  =+  !<(old=state-zero vase)
+  =+  !<(old=versioned-state vase)
-  `this(state old)
+  =|  cards=(list card)
+  |-
+  ?:  ?=(%1 -.old)
+    `this(state old)
+  $(-.old %1, cards :_(cards (poke-self:pass:io noun+!>(%cleanup))))
 ::
 ++  on-poke
   |=  [=mark =vase]
   ^-  (quip card _this)
-  ?.  ?=(?(%group-view-action %noun) mark)
+  ?:  ?=(%noun mark)
+    =^  cards  state
+      poke-noun:gc
+    [cards this]
+  ?.  ?=(%group-view-action mark)
     (on-poke:def mark vase)
   =+  !<(=action:view vase)
   ?>  ?=(%join -.action)
@@ -79,6 +98,21 @@
 ++  io   ~(. agentio bowl)
 ++  con  ~(. conl bowl)
 ::
+++  has-joined
+  |=  rid=resource
+  =-  ?=(^ -)
+  ?~  grp=(peek-group:met %groups rid)
+    (peek-group:met %graph rid)
+  grp
+::
+++  poke-noun
+  ^-  (quip card _state)
+  =;  new-joining=(map resource [ship progress:view])
+    `state(joining new-joining)
+  %+  roll  ~(tap by joining)
+  |=  [[rid=resource =ship =progress:view] out=_joining]
+  ?.  (has-joined rid)  out
+  (~(del by out) rid)
 ::
 ++  join
   |_  [rid=resource =ship cards=(list card)]
@@ -127,10 +161,7 @@
       (~(put by joining) rid [ship %start])
     =.  jn-core
       (jn-abed rid)
-    =/  maybe-group
+    ?<  ~|("already joined {<rid>}" (has-joined rid)) 
-       (peek-group:met %groups rid)
-    ?^  maybe-group
-      ~|("already joined group {<rid>}" !!)
     =.  jn-core
       %-  emit
       %+  poke:(jn-pass-io /add)

pkg/arvo/app/hark-store.hoon

@@ -661,8 +661,7 @@
         unreads-each    (~(run by unreads-each) _~)      
         notifications  (~(run by notifications) _~)
       ==
-    =>  rebuild-cache
+    (give:seen:rebuild-cache %read-all ~)
-    seen
   ::
   ++  set-dnd
     |=  d=?

pkg/arvo/app/landscape/index.html

@@ -24,6 +24,6 @@
     <div id="portal-root"></div>
     <script src="/~landscape/js/channel.js"></script>
     <script src="/~landscape/js/session.js"></script>
-    <script src="/~landscape/js/bundle/index.096bb7cb32b754071b13.js"></script>
+    <script src="/~landscape/js/bundle/index.ee4aea08fefb9c47dcfd.js"></script>
   </body>
 </html>

pkg/arvo/app/metadata-push-hook.hoon

@@ -64,7 +64,7 @@
   =/  role=(unit (unit role-tag))
     (role-for-ship:grp group.update src.bowl)
   =/  =metadatum:store
-    (need (peek-metadatum:met %contacts group.update))
+    (need (peek-metadatum:met %groups group.update))
   ?~  role  %.n
   ?^  u.role  
     ?=(?(%admin %moderator) u.u.role)

pkg/arvo/gen/metadata-store/remove.hoon

@@ -9,12 +9,12 @@
 ::  and looking for the entry with an app-path that is similar to the
 ::  title of the channel
 ::  
-/-  *metadata-store
+/-  metadata=metadata-store
 /+  resource
 :-  %say
 |=  $:  [now=@da eny=@uvJ =beak]
-        [[group=term app=term =path ~] ~]
+        [[group=term app=term rid=resource ~] ~]
     ==
 :-  %metadata-action
-^-  metadata-action
+^-  action:metadata
-[%remove (en-path:resource [p.beak group]) app path]
+[%remove [p.beak group] app rid]

pkg/arvo/ted/sane.hoon

@@ -3,15 +3,16 @@
 =>  
 |%
 ++  strand  strand:spider
++$  input  ?(%fix %check)
 ::
 ++  supported-apps
   ^-  (list term)
-  :~  %graph-pull-hook
+  :~  %group-push-hook
-      %group-pull-hook
+      %group-store
-      %group-push-hook
   ==
 ::
 ++  poke-all-sane
+  |=  =input
   =/  m  (strand ,~)
   ^-  form:m
   =/  apps  supported-apps
@@ -19,13 +20,14 @@
   ?~  apps
     (pure:m ~)
   =*  app  i.apps
-  ;<  ~   bind:m  (poke-our app sane+!>(%sane))
+  ;<  ~   bind:m  (poke-our app sane+!>(input))
   loop(apps t.apps)
 --
 ::
 ^-  thread:spider
-|=  vase
+|=  vas=vase
 =/  m  (strand ,vase)
-;<  ~  bind:m  poke-all-sane 
+=+  !<([~ in=input] vas)
-;<  ~  bind:m  (poke-our %sane noun+!>(%fix))
+;<  ~  bind:m  (poke-all-sane in)
+;<  ~  bind:m  (poke-our %sane noun+!>(in))
 (pure:m !>("Done"))

pkg/interface/.eslintrc.js

@@ -1,186 +1,3 @@
-const env = {
-  "browser": true,
-  "es6": true,
-  "node": true
-};
-
-const rules = {
-  "array-bracket-spacing": ["error", "never"],
-  "arrow-parens": [
-    "error",
-    "as-needed",
-    {
-      "requireForBlockBody": true
-    }
-  ],
-  "arrow-spacing": "error",
-  "block-spacing": ["error", "always"],
-  "brace-style": ["error", "1tbs"],
-  "camelcase": [
-    "error",
-    {
-      "properties": "never"
-    }
-  ],
-  "comma-dangle": ["error", "never"],
-  "eol-last": ["error", "always"],
-  "func-name-matching": "error",
-  "indent": [
-    "off",
-    2,
-    {
-      "ArrayExpression": "off",
-      "SwitchCase": 1,
-      "CallExpression": {
-        "arguments": "off"
-      },
-      "FunctionDeclaration": {
-        "parameters": "off"
-      },
-      "FunctionExpression": {
-        "parameters": "off"
-      },
-      "MemberExpression": "off",
-      "ObjectExpression": "off",
-      "ImportDeclaration": "off"
-    }
-  ],
-  "handle-callback-err": "off",
-  "linebreak-style": ["error", "unix"],
-  "max-lines": [
-    "error",
-    {
-      "max": 300,
-      "skipBlankLines": true,
-      "skipComments": true
-    }
-  ],
-  "max-lines-per-function": [
-    "warn",
-    {
-      "skipBlankLines": true,
-      "skipComments": true
-    }
-  ],
-  "max-statements-per-line": [
-    "error",
-    {
-      "max": 1
-    }
-  ],
-  "new-cap": [
-    "error",
-    {
-      "newIsCap": true,
-      "capIsNew": false
-    }
-  ],
-  "new-parens": "error",
-  "no-buffer-constructor": "error",
-  "no-console": "off",
-  "no-extra-semi": "off",
-  "no-fallthrough": "off",
-  "no-func-assign": "off",
-  "no-implicit-coercion": "error",
-  "no-multi-assign": "error",
-  "no-multiple-empty-lines": [
-    "error",
-    {
-      "max": 1
-    }
-  ],
-  "no-nested-ternary": "error",
-  "no-param-reassign": "off",
-  "no-return-assign": "error",
-  "no-return-await": "off",
-  "no-shadow-restricted-names": "error",
-  "no-tabs": "error",
-  "no-trailing-spaces": "error",
-  "no-unused-vars": [
-    "error",
-    {
-      "vars": "all",
-      "args": "none",
-      "ignoreRestSiblings": false
-    }
-  ],
-  "no-use-before-define": [
-    "error",
-    {
-      "functions": false,
-      "classes": false
-    }
-  ],
-  "no-useless-escape": "off",
-  "no-var": "error",
-  "nonblock-statement-body-position": ["error", "below"],
-  "object-curly-spacing": ["error", "always"],
-  "padded-blocks": ["error", "never"],
-  "prefer-arrow-callback": "error",
-  "prefer-const": [
-    "error",
-    {
-      "destructuring": "all",
-      "ignoreReadBeforeAssign": true
-    }
-  ],
-  "prefer-template": "off",
-  "quotes": ["error", "single"],
-  "semi": ["error", "always"],
-  "spaced-comment": [
-    "error",
-    "always",
-    {
-      "exceptions": ["!"]
-    }
-  ],
-  "space-before-blocks": "error",
-  "unicode-bom": ["error", "never"],
-  "valid-jsdoc": "error",
-  "wrap-iife": ["error", "inside"],
-  "react/jsx-closing-bracket-location": 1,
-  "react/jsx-tag-spacing": 1,
-  "react/jsx-max-props-per-line": ["error", { "maximum": 2, "when": "multiline" }],
-  "react/prop-types": 0
-};
-
 module.exports = {
-  "env": env,
+  extends: "@urbit"
-  "extends": [
+};
-    "plugin:react/recommended",
-    "eslint:recommended",
-  ],
-  "settings": {
-    "react": {
-      "version": "^16.5.2"
-    }
-  },
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaVersion": 10,
-    "requireConfigFile": false,
-    "sourceType": "module"
-  },
-  "root": true,
-  "rules": rules,
-  "overrides": [
-    {
-      "files": ["**/*.ts", "**/*.tsx"],
-      "env": env,
-      "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/eslint-recommended",
-        "plugin:@typescript-eslint/recommended"
-      ],
-      "parser": "@typescript-eslint/parser",
-      "parserOptions": {
-        "ecmaFeatures": { "jsx": true },
-        "ecmaVersion": 10,
-        "requireConfigFile": false,
-        "sourceType": "module"
-      },
-      "plugins": ["@typescript-eslint"],
-      "rules": rules
-    }
-  ]
-};

pkg/interface/package.json

@@ -12,6 +12,7 @@
     "@tlon/indigo-light": "^1.0.6",
     "@tlon/indigo-react": "1.2.17",
     "@tlon/sigil-js": "^1.4.3",
+    "@urbit/api": "file:../npm/api",
     "aws-sdk": "^2.830.0",
     "big-integer": "^1.6.48",
     "classnames": "^2.2.6",
@@ -63,15 +64,15 @@
     "@types/styled-components": "^5.1.7",
     "@types/styled-system": "^5.1.10",
     "@types/yup": "^0.29.11",
-    "@typescript-eslint/eslint-plugin": "^3.10.1",
+    "@typescript-eslint/eslint-plugin": "^4.15.0",
-    "@typescript-eslint/parser": "^3.10.1",
+    "@urbit/eslint-config": "file:../npm/eslint-config",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-root-import": "^6.6.0",
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.3",
-    "eslint": "^6.8.0",
+    "eslint": "^7.19.0",
     "eslint-plugin-react": "^7.22.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.1",
@@ -85,7 +86,7 @@
     "webpack-dev-server": "^3.11.2"
   },
   "scripts": {
-    "lint": "eslint ./src/**/*.{js,ts,tsx}",
+    "lint": "eslint ./src/**/*.{ts,tsx}",
     "lint-file": "eslint",
     "tsc": "tsc",
     "tsc:watch": "tsc --watch",

pkg/interface/src/logic/api/base.ts

@@ -1,6 +1,5 @@
-import _ from "lodash";
+import _ from 'lodash';
-import { uuid } from "../lib/util";
+import { Patp, Path } from '@urbit/api';
-import { Patp, Path } from "~/types/noun";
 import BaseStore from '../store/base';
 
 export default class BaseApi<S extends object = {}> {
@@ -26,8 +25,8 @@ export default class BaseApi<S extends object = {}> {
           data: event,
           from: {
             ship,
-            path,
+            path
-          },
+          }
         });
       },
       (qui) => {
@@ -50,8 +49,12 @@ export default class BaseApi<S extends object = {}> {
         appl,
         mark,
         data,
-        (json) => { resolve(json); },
+        (json) => {
-        (err) => { reject(err); }
+ resolve(json);
+},
+        (err) => {
+ reject(err);
+}
       );
     });
   }
@@ -69,5 +72,4 @@ export default class BaseApi<S extends object = {}> {
 
     return res.json();
   }
-
 }

pkg/interface/src/logic/api/contacts.ts

@@ -1,8 +1,7 @@
 import BaseApi from './base';
 import { StoreState } from '../store/type';
-import { Patp, Path, Enc } from '~/types/noun';
+import { Patp } from '@urbit/api';
-import { Contact, ContactEdit } from '~/types/contact-update';
+import { ContactEdit } from '@urbit/api/contacts';
-import { GroupPolicy, Resource } from '~/types/group-update';
 
 export default class ContactsApi extends BaseApi<StoreState> {
   add(ship: Patp, contact: any) {
@@ -31,7 +30,7 @@ export default class ContactsApi extends BaseApi<StoreState> {
         ship,
         'edit-field': editField,
         timestamp: Date.now()
-      },
+      }
     });
   }
 
@@ -62,7 +61,7 @@ export default class ContactsApi extends BaseApi<StoreState> {
     return this.action(
       'contact-push-hook',
       'contact-share',
-      { share: recipient },
+      { share: recipient }
     );
   }
 
@@ -85,7 +84,7 @@ export default class ContactsApi extends BaseApi<StoreState> {
   }
 
   private storeAction(action: any): Promise<any> {
-    return this.action('contact-store', 'contact-update', action)
+    return this.action('contact-store', 'contact-update', action);
   }
 
   private viewAction(threadName: string, action: any) {

pkg/interface/src/logic/api/global.ts

@@ -1,4 +1,4 @@
-import { Patp } from '~/types/noun';
+import { Patp } from '@urbit/api';
 import BaseApi from './base';
 import { StoreState } from '../store/type';
 import GlobalStore from '../store/store';
@@ -10,7 +10,7 @@ import GroupsApi from './groups';
 import LaunchApi from './launch';
 import GraphApi from './graph';
 import S3Api from './s3';
-import {HarkApi} from './hark';
+import { HarkApi } from './hark';
 import SettingsApi from './settings';
 
 export default class GlobalApi extends BaseApi<StoreState> {

pkg/interface/src/logic/api/graph.ts

@@ -1,14 +1,14 @@
 import BaseApi from './base';
 import { StoreState } from '../store/type';
-import { Patp, Path, PatpNoSig } from '~/types/noun';
+import { Patp, Path } from '@urbit/api';
 import _ from 'lodash';
-import {makeResource, resourceFromPath} from '../lib/group';
+import { makeResource, resourceFromPath } from '../lib/group';
-import {GroupPolicy, Enc, Post, NodeMap, Content, Resource} from '~/types';
+import { GroupPolicy, Enc, Post, Content } from '@urbit/api';
 import { numToUd, unixToDa, decToUd, deSig, resourceAsPath } from '~/logic/lib/util';
 
 export const createBlankNodeWithChildPost = (
-  parentIndex: string = '',
+  parentIndex = '',
-  childIndex: string = '',
+  childIndex = '',
   contents: Content[]
 ) => {
   const date = unixToDa(Date.now()).toString();
@@ -37,11 +37,11 @@ export const createBlankNodeWithChildPost = (
       signatures: []
     },
     children: childGraph
-  };  
+  };
 };
 
 function markPending(nodes: any) {
-  _.forEach(nodes, node => {
+  _.forEach(nodes, (node) => {
     node.post.author = deSig(node.post.author);
     node.post.pending = true;
     markPending(node.children || {});
@@ -50,8 +50,8 @@ function markPending(nodes: any) {
 
 export const createPost = (
   contents: Content[],
-  parentIndex: string = '',
+  parentIndex = '',
-  childIndex:string = 'DATE_PLACEHOLDER'
+  childIndex = 'DATE_PLACEHOLDER'
 ) => {
   if (childIndex === 'DATE_PLACEHOLDER') {
     childIndex = unixToDa(Date.now()).toString();
@@ -80,11 +80,10 @@ function moduleToMark(mod: string): string | undefined {
 }
 
 export default class GraphApi extends BaseApi<StoreState> {
-
   joiningGraphs = new Set<string>();
 
   private storeAction(action: any): Promise<any> {
-    return this.action('graph-store', 'graph-update', action)
+    return this.action('graph-store', 'graph-update', action);
   }
 
   private viewAction(threadName: string, action: any) {
@@ -106,12 +105,12 @@ export default class GraphApi extends BaseApi<StoreState> {
     const resource = makeResource(`~${window.ship}`, name);
 
     return this.viewAction('graph-create', {
-      "create": {
+      'create': {
         resource,
         title,
         description,
         associated,
-        "module": mod,
+        'module': mod,
         mark: moduleToMark(mod)
       }
     });
@@ -127,12 +126,12 @@ export default class GraphApi extends BaseApi<StoreState> {
     const resource = makeResource(`~${window.ship}`, name);
 
     return this.viewAction('graph-create', {
-      "create": {
+      'create': {
         resource,
         title,
         description,
         associated: { policy },
-        "module": mod,
+        'module': mod,
         mark: moduleToMark(mod)
       }
     });
@@ -148,9 +147,9 @@ export default class GraphApi extends BaseApi<StoreState> {
     return this.viewAction('graph-join', {
       join: {
         resource,
-        ship,
+        ship
       }
-    }).then(res => {
+    }).then((res) => {
       this.joiningGraphs.delete(rid);
       return res;
     });
@@ -159,7 +158,7 @@ export default class GraphApi extends BaseApi<StoreState> {
   deleteGraph(name: string) {
     const resource = makeResource(`~${window.ship}`, name);
     return this.viewAction('graph-delete', {
-      "delete": {
+      'delete': {
         resource
       }
     });
@@ -168,7 +167,7 @@ export default class GraphApi extends BaseApi<StoreState> {
   leaveGraph(ship: Patp, name: string) {
     const resource = makeResource(ship, name);
     return this.viewAction('graph-leave', {
-      "leave": {
+      'leave': {
         resource
       }
     });
@@ -203,7 +202,7 @@ export default class GraphApi extends BaseApi<StoreState> {
   }
 
   addPost(ship: Patp, name: string, post: Post) {
-    let nodes = {};
+    const nodes = {};
     nodes[post.index] = {
       post,
       children: null
@@ -212,7 +211,7 @@ export default class GraphApi extends BaseApi<StoreState> {
   }
 
   addNode(ship: Patp, name: string, node: Object) {
-    let nodes = {};
+    const nodes = {};
     nodes[node.post.index] = node;
 
     return this.addNodes(ship, name, nodes);
@@ -300,7 +299,6 @@ export default class GraphApi extends BaseApi<StoreState> {
     this.store.handleEvent({ data });
   }
 
-
   getGraphSubset(ship: string, resource: string, start: string, end: string) {
     return this.scry<any>(
       'graph-store',

pkg/interface/src/logic/api/groups.ts

@@ -1,14 +1,14 @@
 import BaseApi from './base';
 import { StoreState } from '../store/type';
-import { Path, Patp, Enc } from '~/types/noun';
+import { Path, Patp, Enc } from '@urbit/api';
 import {
   GroupAction,
   GroupPolicy,
   Resource,
   Tag,
-  GroupPolicyDiff,
+  GroupPolicyDiff
-} from '~/types/group-update';
+} from '@urbit/api/groups';
-import {makeResource} from '../lib/group';
+import { makeResource } from '../lib/group';
 
 export default class GroupsApi extends BaseApi<StoreState> {
   remove(resource: Resource, ships: Patp[]) {
@@ -38,7 +38,7 @@ export default class GroupsApi extends BaseApi<StoreState> {
   join(ship: string, name: string) {
     const resource = makeResource(ship, name);
 
-    return this.viewAction({ join: { resource, ship }});
+    return this.viewAction({ join: { resource, ship } });
   }
 
   create(name: string, policy: Enc<GroupPolicy>, title: string, description: string) {
@@ -76,7 +76,6 @@ export default class GroupsApi extends BaseApi<StoreState> {
         description
       }
     });
-
   }
 
   private proxyAction(action: GroupAction) {
@@ -93,6 +92,5 @@ export default class GroupsApi extends BaseApi<StoreState> {
 
   private viewAction(action: any) {
     return this.action('group-view', 'group-view-action', action);
-
   }
 }

pkg/interface/src/logic/api/hark.ts

@@ -1,24 +1,23 @@
-import BaseApi from "./base";
+import BaseApi from './base';
-import { StoreState } from "../store/type";
+import { StoreState } from '../store/type';
-import { dateToDa, decToUd } from "../lib/util";
+import { dateToDa, decToUd } from '../lib/util';
-import {NotifIndex, IndexedNotification, Association, GraphNotifDescription} from "~/types";
+import { NotifIndex, IndexedNotification, Association, GraphNotifDescription } from '@urbit/api';
 import { BigInteger } from 'big-integer';
-import {getParentIndex} from "../lib/notification";
+import { getParentIndex } from '../lib/notification';
 
 export class HarkApi extends BaseApi<StoreState> {
   private harkAction(action: any): Promise<any> {
-    return this.action("hark-store", "hark-action", action);
+    return this.action('hark-store', 'hark-action', action);
   }
 
   private graphHookAction(action: any) {
-    return this.action("hark-graph-hook", "hark-graph-hook-action", action);
+    return this.action('hark-graph-hook', 'hark-graph-hook-action', action);
   }
 
   private groupHookAction(action: any) {
-    return this.action("hark-group-hook", "hark-group-hook-action", action);
+    return this.action('hark-group-hook', 'hark-group-hook-action', action);
   }
 
-
   private actOnNotification(frond: string, intTime: BigInteger, index: NotifIndex) {
     const time = decToUd(intTime.toString());
     return this.harkAction({
@@ -74,12 +73,10 @@ export class HarkApi extends BaseApi<StoreState> {
         module: association.metadata.module,
         description,
         index: parent
-      } },
+      } }
     });
   }
 
-
-
   markEachAsRead(association: Association, parent: string, child: string, description: GraphNotifDescription, mod: string) {
     return this.harkAction({
       'read-each': {
@@ -116,7 +113,7 @@ export class HarkApi extends BaseApi<StoreState> {
   mute(notif: IndexedNotification) {
     if('graph' in notif.index && 'graph' in notif.notification.contents) {
       const { index } = notif;
-      const parentIndex = getParentIndex(index.graph, notif.notification.contents.graph)
+      const parentIndex = getParentIndex(index.graph, notif.notification.contents.graph);
       if(!parentIndex) {
         return Promise.resolve();
       }
@@ -132,7 +129,7 @@ export class HarkApi extends BaseApi<StoreState> {
   unmute(notif: IndexedNotification) {
     if('graph' in notif.index && 'graph' in notif.notification.contents) {
       const { index } = notif;
-      const parentIndex = getParentIndex(index.graph, notif.notification.contents.graph)
+      const parentIndex = getParentIndex(index.graph, notif.notification.contents.graph);
       if(!parentIndex) {
         return Promise.resolve();
       }
@@ -147,7 +144,7 @@ export class HarkApi extends BaseApi<StoreState> {
   ignoreGroup(group: string) {
     return this.groupHookAction({
       ignore: group
-    })
+    });
   }
 
   ignoreGraph(graph: string, index: string) {
@@ -156,13 +153,13 @@ export class HarkApi extends BaseApi<StoreState> {
         graph,
         index
       }
-    })
+    });
   }
 
   listenGroup(group: string) {
     return this.groupHookAction({
       listen: group
-    })
+    });
   }
 
   listenGraph(graph: string, index: string) {
@@ -171,7 +168,7 @@ export class HarkApi extends BaseApi<StoreState> {
         graph,
         index
       }
-    })
+    });
   }
 
   async getMore(): Promise<boolean> {
@@ -183,16 +180,16 @@ export class HarkApi extends BaseApi<StoreState> {
 
   async getSubset(offset:number, count:number, isArchive: boolean) {
     const where = isArchive ? 'archive' : 'inbox';
-    const data = await this.scry("hark-store", `/recent/${where}/${offset}/${count}`);
+    const data = await this.scry('hark-store', `/recent/${where}/${offset}/${count}`);
     this.store.handleEvent({ data });
   }
 
   async getTimeSubset(start?: Date, end?: Date) {
-    const s = start ? dateToDa(start) : "-";
+    const s = start ? dateToDa(start) : '-';
-    const e = end ? dateToDa(end) : "-";
+    const e = end ? dateToDa(end) : '-';
-    const result = await this.scry("hark-hook", `/recent/${s}/${e}`);
+    const result = await this.scry('hark-hook', `/recent/${s}/${e}`);
     this.store.handleEvent({
-      data: result,
+      data: result
     });
   }
 }

pkg/interface/src/logic/api/invite.ts

@@ -1,6 +1,6 @@
-import BaseApi from "./base";
+import BaseApi from './base';
-import { StoreState } from "../store/type";
+import { StoreState } from '../store/type';
-import { Serial, Path } from "~/types/noun";
+import { Serial, Path } from '@urbit/api';
 
 export default class InviteApi extends BaseApi<StoreState> {
   accept(app: string, uid: Serial) {

pkg/interface/src/logic/api/launch.ts

@@ -2,7 +2,7 @@ import BaseApi from './base';
 import { StoreState } from '../store/type';
 
 export default class LaunchApi extends BaseApi<StoreState> {
-  add(name: string, tile = { basic : { title: '', linkedUrl: '', iconUrl: '' }}) {
+  add(name: string, tile = { basic : { title: '', linkedUrl: '', iconUrl: '' } }) {
     return this.launchAction({ add: { name, tile } });
   }
 
@@ -15,7 +15,7 @@ export default class LaunchApi extends BaseApi<StoreState> {
   }
 
   changeIsShown(name: string, isShown = true) {
-    return this.launchAction({ 'change-is-shown': { name, isShown }});
+    return this.launchAction({ 'change-is-shown': { name, isShown } });
   }
 
   weather(location: string) {

pkg/interface/src/logic/api/local.ts

@@ -1,9 +1,9 @@
-import BaseApi from "./base";
+import BaseApi from './base';
-import { StoreState } from "../store/type";
+import { StoreState } from '../store/type';
 
 export default class LocalApi extends BaseApi<StoreState> {
   getBaseHash() {
-    this.scry<string>('file-server', '/clay/base/hash').then(baseHash => {
+    this.scry<string>('file-server', '/clay/base/hash').then((baseHash) => {
       this.store.handleEvent({ data: { local: { baseHash } } });
     });
   }
@@ -11,5 +11,4 @@ export default class LocalApi extends BaseApi<StoreState> {
   dehydrate() {
     this.store.dehydrate();
   }
-
 }

pkg/interface/src/logic/api/metadata.ts

@@ -1,12 +1,10 @@
 
 import BaseApi from './base';
 import { StoreState } from '../store/type';
-import { Path, Patp, Association, Metadata, MetadataUpdatePreview } from '~/types';
+import { Path, Patp, Association, Metadata, MetadataUpdatePreview } from '@urbit/api';
-import {uxToHex} from '../lib/util';
+import { uxToHex } from '../lib/util';
 
 export default class MetadataApi extends BaseApi<StoreState> {
-
-
   metadataAdd(appName: string, resource: Path, group: Path, title: string, description: string, dateCreated: string, color: string, moduleName: string) {
     const creator = `~${this.ship}`;
     return this.metadataAction({
@@ -44,9 +42,9 @@ export default class MetadataApi extends BaseApi<StoreState> {
   }
 
   update(association: Association, newMetadata: Partial<Metadata>) {
-    const metadata = {...association.metadata, ...newMetadata };
+    const metadata = { ...association.metadata, ...newMetadata };
     metadata.color = uxToHex(metadata.color);
-    return this.metadataAction({ 
+    return this.metadataAction({
       add: {
         group: association.group,
         resource: {
@@ -69,10 +67,10 @@ export default class MetadataApi extends BaseApi<StoreState> {
         }
         done = true;
         tempChannel.delete();
-        reject(new Error("offline"))
+        reject(new Error('offline'));
       }, 15000);
 
-      tempChannel.subscribe(window.ship, "metadata-pull-hook", `/preview${group}`,
+      tempChannel.subscribe(window.ship, 'metadata-pull-hook', `/preview${group}`,
         (err) => {
           console.error(err);
           reject(err);
@@ -88,24 +86,22 @@ export default class MetadataApi extends BaseApi<StoreState> {
           } else {
             done = true;
             tempChannel.delete();
-            reject(new Error("no-permissions"));
+            reject(new Error('no-permissions'));
           }
         },
         (quit) => {
           tempChannel.delete();
           if(!done) {
-            reject(new Error("offline"))
+            reject(new Error('offline'));
           }
         },
         (a) => {
           console.log(a);
         }
       );
-    })
+    });
   }
 
-
-
   private metadataAction(data) {
     return this.action('metadata-push-hook', 'metadata-update', data);
   }

pkg/interface/src/logic/api/s3.ts

@@ -1,10 +1,8 @@
 import BaseApi from './base';
 import { StoreState } from '../store/type';
-import {S3Update} from '../../types/s3-update';
+import { S3Update } from '../../types/s3-update';
-
 
 export default class S3Api extends BaseApi<StoreState> {
-
   setCurrentBucket(bucket: string) {
     return this.s3Action({ 'set-current-bucket': bucket });
   }
@@ -32,6 +30,5 @@ export default class S3Api extends BaseApi<StoreState> {
   private s3Action(data: any) {
     return this.action('s3-store', 's3-action', data);
   }
-
 }
 

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

@@ -1,13 +1,9 @@
 import BaseApi from './base';
 import { StoreState } from '../store/type';
-import {
+import { Key,
-  SettingsUpdate,
-  SettingsData,
-  Key,
   Value,
-  Bucket,
+  Bucket
-} from '~/types/settings';
+} from '@urbit/api/settings';
-
 
 export default class SettingsApi extends BaseApi<StoreState> {
   private storeAction(action: SettingsEvent): Promise<any> {
@@ -16,59 +12,59 @@ export default class SettingsApi extends BaseApi<StoreState> {
 
   putBucket(key: Key, bucket: Bucket) {
     this.storeAction({
-      "put-bucket": {
+      'put-bucket': {
-        "bucket-key": key,
+        'bucket-key': key,
-        "bucket": bucket,
+        'bucket': bucket
       }
     });
   }
 
   delBucket(key: Key) {
     this.storeAction({
-      "del-bucket": {
+      'del-bucket': {
-        "bucket-key": key,
+        'bucket-key': key
       }
     });
   }
 
   putEntry(buc: Key, key: Key, val: Value) {
     return this.storeAction({
-      "put-entry": {
+      'put-entry': {
-        "bucket-key": buc,
+        'bucket-key': buc,
-        "entry-key": key,
+        'entry-key': key,
-        "value": val,
+        'value': val
       }
     });
   }
 
   delEntry(buc: Key, key: Key) {
     this.storeAction({
-      "put-entry": {
+      'put-entry': {
-        "bucket-key": buc,
+        'bucket-key': buc,
-        "entry-key": key,
+        'entry-key': key
       }
     });
   }
 
   async getAll() {
-    const data = await this.scry("settings-store", "/all");
+    const data = await this.scry('settings-store', '/all');
-    this.store.handleEvent({data: {"settings-data": data.all}});
+    this.store.handleEvent({ data: { 'settings-data': data.all } });
   }
 
   async getBucket(bucket: Key) {
     const data = await this.scry('settings-store', `/bucket/${bucket}`);
-    this.store.handleEvent({data: {"settings-data": {
+    this.store.handleEvent({ data: { 'settings-data': {
-      "bucket-key": bucket,
+      'bucket-key': bucket,
-      "bucket": data.bucket,
+      'bucket': data.bucket
-    }}});
+    } } });
   }
 
   async getEntry(bucket: Key, entry: Key) {
     const data = await this.scry('settings-store', `/entry/${bucket}/${entry}`);
-    this.store.handleEvent({data: {"settings-data": {
+    this.store.handleEvent({ data: { 'settings-data': {
-      "bucket-key": bucket,
+      'bucket-key': bucket,
-      "entry-key": entry,
+      'entry-key': entry,
-      "entry": data.entry,
+      'entry': data.entry
-    }}});
+    } } });
   }
 }

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

@@ -1,4 +1,4 @@
-import bigInt, { BigInteger } from "big-integer";
+import bigInt, { BigInteger } from 'big-integer';
 
 interface NonemptyNode<V> {
   n: [BigInteger, V];
@@ -14,7 +14,7 @@ type MapNode<V> = NonemptyNode<V> | null;
  */
 export class BigIntOrderedMap<V> implements Iterable<[BigInteger, V]> {
   private root: MapNode<V> = null;
-  size: number = 0;
+  size = 0;
 
   constructor(initial: [BigInteger, V][] = []) {
     initial.forEach(([key, val]) => {
@@ -48,13 +48,12 @@ export class BigIntOrderedMap<V> implements Iterable<[BigInteger, V]> {
    *  Put an item by a key
    */
   set(key: BigInteger, value: V): void {
-    
     const inner = (node: MapNode<V>) => {
       if (!node) {
         return {
           n: [key, value],
           l: null,
-          r: null,
+          r: null
         };
       }
       const [k] = node.n;
@@ -62,22 +61,22 @@ export class BigIntOrderedMap<V> implements Iterable<[BigInteger, V]> {
         this.size--;
         return {
           ...node,
-          n: [k, value],
+          n: [k, value]
         };
       }
       if (key.gt(k)) {
         const l = inner(node.l);
         if (!l) {
-          throw new Error("invariant violation");
+          throw new Error('invariant violation');
         }
         return {
           ...node,
-          l,
+          l
         };
       }
       const r = inner(node.r);
       if (!r) {
-        throw new Error("invariant violation");
+        throw new Error('invariant violation');
       }
 
       return { ...node, r };
@@ -133,8 +132,8 @@ export class BigIntOrderedMap<V> implements Iterable<[BigInteger, V]> {
           bool,
           {
             ...node,
-            l,
+            l
-          },
+          }
         ];
       }
 
@@ -143,8 +142,8 @@ export class BigIntOrderedMap<V> implements Iterable<[BigInteger, V]> {
         bool,
         {
           ...node,
-          r,
+          r
-        },
+        }
       ];
     };
     const [ret, newRoot] = inner(this.root);
@@ -165,12 +164,12 @@ export class BigIntOrderedMap<V> implements Iterable<[BigInteger, V]> {
       }
       return {
         ...node.l,
-        r: inner(node.r),
+        r: inner(node.r)
       };
     };
     return inner(nod);
   }
-  
+
   peekLargest(): [BigInteger, V] | undefined {
     const inner = (node: MapNode<V>) => {
       if(!node) {
@@ -180,7 +179,7 @@ export class BigIntOrderedMap<V> implements Iterable<[BigInteger, V]> {
         return inner(node.l);
       }
       return node.n;
-    }
+    };
     return inner(this.root);
   }
 
@@ -193,7 +192,7 @@ export class BigIntOrderedMap<V> implements Iterable<[BigInteger, V]> {
         return inner(node.r);
       }
       return node.n;
-    }
+    };
     return inner(this.root);
   }
 
@@ -208,7 +207,7 @@ export class BigIntOrderedMap<V> implements Iterable<[BigInteger, V]> {
   }
 
   [Symbol.iterator](): IterableIterator<[BigInteger, V]> {
-    let result: [BigInteger, V][] = [];
+    const result: [BigInteger, V][] = [];
     const inner = (node: MapNode<V>) => {
       if (!node) {
         return;
@@ -227,7 +226,7 @@ export class BigIntOrderedMap<V> implements Iterable<[BigInteger, V]> {
           return { value: result[idx++], done: false };
         }
         return { done: true, value: null };
-      },
+      }
     };
   }
 }

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

@@ -1,7 +1,6 @@
 
 export class OrderedMap<V> extends Map<number, V>
   implements Iterable<[number, V]> {
-
   [Symbol.iterator](): IterableIterator<[number, V]> {
     const sorted = Array.from(super[Symbol.iterator]()).sort(
       ([a], [b]) => b - a
@@ -15,7 +14,7 @@ export class OrderedMap<V> extends Map<number, V>
         } else {
           return { done: true, value: null };
         }
-      },
+      }
     };
   }
 }

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

@@ -1,4 +1,4 @@
-import bigInt, { BigInteger } from "big-integer";
+import bigInt, { BigInteger } from 'big-integer';
 
 export function max(a: BigInteger, b: BigInteger) {
   return a.gt(b) ? a : b;

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

@@ -1,7 +1,7 @@
-import _ from "lodash";
+import _ from 'lodash';
-import { roleTags, RoleTags, Group, Resource } from "~/types/group-update";
+import { roleTags, RoleTags, Group, Resource } from '@urbit/api/groups';
-import { PatpNoSig, Path } from "~/types/noun";
+import { PatpNoSig, Path } from '@urbit/api';
-import {deSig} from "./util";
+import { deSig } from './util';
 
 export function roleForShip(
   group: Group,
@@ -14,7 +14,7 @@ export function roleForShip(
 }
 
 export function resourceFromPath(path: Path): Resource {
-  const [, , ship, name] = path.split("/");
+  const [, , ship, name] = path.split('/');
   return { ship, name };
 }
 
@@ -25,7 +25,7 @@ export function makeResource(ship: string, name: string) {
 export function isWriter(group: Group, resource: string) {
   const writers: Set<string> | undefined = _.get(
     group,
-    ["tags", "graph", resource, "writers"],
+    ['tags', 'graph', resource, 'writers'],
     undefined
   );
   const admins = group?.tags?.role?.admin ?? new Set();
@@ -36,18 +36,18 @@ export function isWriter(group: Group, resource: string) {
   }
 }
 
-export function isChannelAdmin(group: Group, resource: string, ship: string = `~${window.ship}`) {
+export function isChannelAdmin(group: Group, resource: string, ship = `~${window.ship}`) {
   const role = roleForShip(group, ship.slice(1));
 
   return (
     isHost(resource, ship) ||
-    role === "admin" ||
+    role === 'admin' ||
-    role === "moderator"
+    role === 'moderator'
   );
 }
 
-export function isHost(resource: string, ship: string = `~${window.ship}`) {
+export function isHost(resource: string, ship = `~${window.ship}`) {
-  const [, , host] = resource.split("/");
+  const [, , host] = resource.split('/');
 
   return ship === host;
 }

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

@@ -1,6 +1,6 @@
-import bigInt, { BigInteger } from "big-integer";
+import bigInt, { BigInteger } from 'big-integer';
-import f from "lodash/fp";
+import f from 'lodash/fp';
-import { Unreads } from "~/types";
+import { Unreads } from '@urbit/api';
 
 export function getLastSeen(
   unreads: Unreads,
@@ -8,10 +8,10 @@ export function getLastSeen(
   index: string
 ): BigInteger | undefined {
   const lastSeenIdx = unreads.graph?.[path]?.[index]?.unreads;
-  if (!(typeof lastSeenIdx === "string")) {
+  if (!(typeof lastSeenIdx === 'string')) {
     return bigInt.zero;
   }
-  return f.flow(f.split("/"), f.last, (x) => (!!x ? bigInt(x) : undefined))(
+  return f.flow(f.split('/'), f.last, x => (x ? bigInt(x) : undefined))(
     lastSeenIdx
   );
 }

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

@@ -1,19 +1,19 @@
-import { GraphNotifIndex, GraphNotificationContents } from "~/types";
+import { GraphNotifIndex, GraphNotificationContents } from '@urbit/api';
 
 export function getParentIndex(
   idx: GraphNotifIndex,
   contents: GraphNotificationContents
 ) {
-  const origIndex = contents[0].index.slice(1).split("/");
+  const origIndex = contents[0].index.slice(1).split('/');
-  const ret = (i: string[]) => `/${i.join("/")}`;
+  const ret = (i: string[]) => `/${i.join('/')}`;
   switch (idx.description) {
-    case "link":
+    case 'link':
-      return "/";
+      return '/';
-    case "comment":
+    case 'comment':
       return ret(origIndex.slice(0, 1));
-    case "note":
+    case 'note':
-      return "/";
+      return '/';
-    case "mention":
+    case 'mention':
       return undefined;
     default:
       return undefined;

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

@@ -1,4 +1,4 @@
-import { Post, GraphNode } from "~/types";
+import { Post, GraphNode } from '@urbit/api';
 
 export const buntPost = (): Post => ({
   author: '',
@@ -10,7 +10,7 @@ export const buntPost = (): Post => ({
 });
 
 export function makeNodeMap(posts: Post[]): Record<string, GraphNode> {
-  let nodes = {};
+  const nodes = {};
   posts.forEach((p) => {
     nodes[p.index] = { children: { empty: null }, post: p };
   });

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

@@ -1,8 +1,8 @@
-import { Post, GraphNode, TextContent, Graph, NodeMap } from "~/types";
+import { Post, GraphNode, TextContent, Graph, NodeMap } from '@urbit/api';
 import { buntPost } from '~/logic/lib/post';
-import { unixToDa } from "~/logic/lib/util";
+import { unixToDa } from '~/logic/lib/util';
-import {BigIntOrderedMap} from "./BigIntOrderedMap";
+import { BigIntOrderedMap } from './BigIntOrderedMap';
-import bigInt, {BigInteger} from 'big-integer';
+import bigInt, { BigInteger } from 'big-integer';
 
 export function newPost(
   title: string,
@@ -12,20 +12,20 @@ export function newPost(
   const nowDa = unixToDa(now);
   const root: Post = {
     author: `~${window.ship}`,
-    index: "/" + nowDa.toString(),
+    index: '/' + nowDa.toString(),
-    "time-sent": now,
+    'time-sent': now,
     contents: [],
     hash: null,
-    signatures: [],
+    signatures: []
   };
 
-  const revContainer: Post = { ...root, index: root.index + "/1" };
+  const revContainer: Post = { ...root, index: root.index + '/1' };
-  const commentsContainer = { ...root, index: root.index + "/2" };
+  const commentsContainer = { ...root, index: root.index + '/2' };
 
   const firstRevision: Post = {
     ...revContainer,
-    index: revContainer.index + "/1",
+    index: revContainer.index + '/1',
-    contents: [{ text: title }, { text: body }],
+    contents: [{ text: title }, { text: body }]
   };
 
   const nodes = {
@@ -37,16 +37,16 @@ export function newPost(
             children: {
               1: {
                 post: firstRevision,
-                children: null,
+                children: null
-              },
+              }
-            },
+            }
           },
           2: {
             post: commentsContainer,
             children: null
-          },
+          }
-      },
+      }
-    },
+    }
   };
 
   return [nowDa, nodes];
@@ -57,15 +57,15 @@ export function editPost(rev: number, noteId: BigInteger, title: string, body: s
   const newRev: Post = {
     author: `~${window.ship}`,
     index: `/${noteId.toString()}/1/${rev}`,
-    "time-sent": now,
+    'time-sent': now,
     contents: [{ text: title }, { text: body }],
     hash: null,
-    signatures: [],
+    signatures: []
   };
   const nodes = {
     [newRev.index]: {
       post: newRev,
-      children: null 
+      children: null
     }
   };
 
@@ -74,7 +74,7 @@ export function editPost(rev: number, noteId: BigInteger, title: string, body: s
 
 export function getLatestRevision(node: GraphNode): [number, string, string, Post] {
   const revs = node.children.get(bigInt(1));
-  const empty = [1, "", "", buntPost()] as [number, string, string, Post];
+  const empty = [1, '', '', buntPost()] as [number, string, string, Post];
   if(!revs) {
     return empty;
   }
@@ -98,17 +98,16 @@ export function getLatestCommentRevision(node: GraphNode): [number, Post] {
   return [revNum.toJSNumber(), rev.post];
 }
 
-
 export function getComments(node: GraphNode): GraphNode {
   const comments = node.children.get(bigInt(2));
   if(!comments) {
-    return { post: buntPost(), children: new BigIntOrderedMap() }
+    return { post: buntPost(), children: new BigIntOrderedMap() };
   }
   return comments;
 }
 
 export function getSnippet(body: string) {
   const start = body.slice(0, body.indexOf('\n', 2));
-  return (start === body || start.startsWith("![")) ? start : `${start}...`;
+  return (start === body || start.startsWith('![')) ? start : `${start}...`;
 }
 

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

@@ -1,16 +1,16 @@
-import _ from "lodash";
+import _ from 'lodash';
 
-export const alignY = ["top", "bottom"] as const;
+export const alignY = ['top', 'bottom'] as const;
 export type AlignY = typeof alignY[number];
-export const alignX = ["left", "right"] as const;
+export const alignX = ['left', 'right'] as const;
 export type AlignX = typeof alignX[number];
 
 export function getRelativePosition(
   relativeTo: HTMLElement | null,
   alignX: AlignX | AlignX[],
   alignY: AlignY | AlignY[],
-  offsetX: number = 0,
+  offsetX = 0,
-  offsetY: number = 0
+  offsetY = 0
 ) {
   const rect = relativeTo?.getBoundingClientRect();
   if (!rect) {
@@ -20,7 +20,7 @@ export function getRelativePosition(
     top: rect.top - offsetY,
     left: rect.left - offsetX,
     bottom: document.documentElement.clientHeight - rect.bottom - offsetY,
-    right: document.documentElement.clientWidth - rect.right - offsetX,
+    right: document.documentElement.clientWidth - rect.right - offsetX
   };
   const alignXArr = _.isArray(alignX) ? alignX : [alignX];
   const alignYArr = _.isArray(alignY) ? alignY : [alignY];
@@ -34,7 +34,7 @@ export function getRelativePosition(
           [...Array(idx), `${bounds[a]}px`],
           acc[a] || [],
           (a, b) => a || b || null
-        ),
+        )
       }),
       {}
     ),
@@ -46,10 +46,10 @@ export function getRelativePosition(
           [...Array(idx), `${bounds[a]}px`],
           acc[a] || [],
           (a, b) => a || b || null
-        ),
+        )
       }),
       {}
-    ),
+    )
   } as Record<AlignY | AlignX, string[]>;
 }
 

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

@@ -1,6 +1,6 @@
-import { TutorialProgress, Associations } from "~/types";
+import { TutorialProgress, Associations } from '@urbit/api';
-import { AlignX, AlignY } from "~/logic/lib/relativePosition";
+import { AlignX, AlignY } from '~/logic/lib/relativePosition';
-import { Direction } from "~/views/components/Triangle";
+import { Direction } from '~/views/components/Triangle';
 
 export const MODAL_WIDTH = 256;
 export const MODAL_HEIGHT = 256;
@@ -43,7 +43,7 @@ export const getTrianglePosition = (dir: Direction) => {
       return {
         top: midY,
         left: '-32px'
-      }
+      };
     case 'North':
       return {
         top: '-32px',
@@ -55,117 +55,117 @@ export const getTrianglePosition = (dir: Direction) => {
         left: midX
       };
   }
-}
+};
 
 export const progressDetails: Record<TutorialProgress, StepDetail> = {
   hidden: {} as any,
   exit: {} as any,
   done: {
-    title: "End",
+    title: 'End',
     description:
-      "This tutorial is finished. Would you like to leave Beginner Island?",
+      'This tutorial is finished. Would you like to leave Beginner Island?',
-    url: "/",
+    url: '/',
-    alignX: "right",
+    alignX: 'right',
-    alignY: "top",
+    alignY: 'top',
     offsetX: MODAL_WIDTH + 8,
-    offsetY: 0,
+    offsetY: 0
   },
   start: {
-    title: "New Group added",
+    title: 'New Group added',
     description:
-      "We just added you to the Beginner island group to show you around. This group is public, but other groups can be private",
+      'We just added you to the Beginner island group to show you around. This group is public, but other groups can be private',
-    url: "/",
+    url: '/',
-    alignX: "right",
+    alignX: 'right',
-    alignY: "top",
+    alignY: 'top',
-    arrow: "West",
+    arrow: 'West',
     offsetX: MODAL_WIDTH + 24,
-    offsetY: 64,
+    offsetY: 64
   },
-  "group-desc": {
+  'group-desc': {
-    title: "What's a group",
+    title: 'What\'s a group',
     description:
-      "A group contains members and tends to be centered around a topic or multiple topics.",
+      'A group contains members and tends to be centered around a topic or multiple topics.',
     url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
-    alignX: "left",
+    alignX: 'left',
-    alignY: "top",
+    alignY: 'top',
-    arrow: "East",
+    arrow: 'East',
     offsetX: MODAL_WIDTH + 24,
-    offsetY: MODAL_HEIGHT / 2 - 8,
+    offsetY: MODAL_HEIGHT / 2 - 8
   },
   channels: {
-    title: "Channels",
+    title: 'Channels',
     description:
-      "Inside a group you have three types of Channels: Chat, Collection, or Notebook. Mix and match these depending on your group context!",
+      'Inside a group you have three types of Channels: Chat, Collection, or Notebook. Mix and match these depending on your group context!',
     url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
-    alignY: "top",
+    alignY: 'top',
-    alignX: "right",
+    alignX: 'right',
-    arrow: "West",
+    arrow: 'West',
     offsetX: MODAL_WIDTH + 24,
-    offsetY: -8,
+    offsetY: -8
   },
   chat: {
-    title: "Chat",
+    title: 'Chat',
     description:
-      "Chat channels are for messaging within your group. Direct Messages are also supported, and are accessible from the “DMs” tile on the homescreen",
+      'Chat channels are for messaging within your group. Direct Messages are also supported, and are accessible from the “DMs” tile on the homescreen',
     url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/chat/ship/${TUTORIAL_HOST}/${TUTORIAL_CHAT}`,
-    alignY: "top",
+    alignY: 'top',
-    arrow: "North",
+    arrow: 'North',
-    alignX: "right",
+    alignX: 'right',
     offsetY: -56,
-    offsetX: -8,
+    offsetX: -8
   },
   link: {
-    title: "Collection",
+    title: 'Collection',
     description:
-      "A collection is where you can share and view links, images, and other media within your group. Every item in a Collection can have it’s own comment thread.",
+      'A collection is where you can share and view links, images, and other media within your group. Every item in a Collection can have it’s own comment thread.',
     url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/link/ship/${TUTORIAL_HOST}/${TUTORIAL_LINKS}`,
-    alignY: "top",
+    alignY: 'top',
-    alignX: "right",
+    alignX: 'right',
-    arrow: "North",
+    arrow: 'North',
     offsetX: -8,
-    offsetY: -56,
+    offsetY: -56
   },
   publish: {
-    title: "Notebook",
+    title: 'Notebook',
     description:
-      "Notebooks are for creating long-form content within your group. Use markdown to create rich posts with headers, lists and images.",
+      'Notebooks are for creating long-form content within your group. Use markdown to create rich posts with headers, lists and images.',
     url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/publish/ship/${TUTORIAL_HOST}/${TUTORIAL_BOOK}`,
-    alignY: "top",
+    alignY: 'top',
-    alignX: "right",
+    alignX: 'right',
-    arrow: "North",
+    arrow: 'North',
     offsetX: -8,
-    offsetY: -56,
+    offsetY: -56
   },
   notifications: {
-    title: "Notifications",
+    title: 'Notifications',
-    description: "You will get updates from subscribed channels and mentions here. You can access Notifications through Leap.",
+    description: 'You will get updates from subscribed channels and mentions here. You can access Notifications through Leap.',
     url: '/~notifications',
-    alignY: "top",
+    alignY: 'top',
-    alignX: "left",
+    alignX: 'left',
-    arrow: "North",
+    arrow: 'North',
     offsetX: (MODAL_WIDTH / 2) - 16,
-    offsetY: -48,
+    offsetY: -48
   },
   profile: {
-    title: "Profile",
+    title: 'Profile',
     description:
-      "Your profile is customizable and can be shared with other ships. Enter as much or as little information as you’d like.",
+      'Your profile is customizable and can be shared with other ships. Enter as much or as little information as you’d like.',
     url: `/~profile/~${window.ship}`,
-    alignY: "top",
+    alignY: 'top',
-    alignX: "right",
+    alignX: 'right',
-    arrow: "South",
+    arrow: 'South',
     offsetX: -300 + MODAL_WIDTH / 2,
-    offsetY: -120 + MODAL_HEIGHT / 2,
+    offsetY: -120 + MODAL_HEIGHT / 2
   },
   leap: {
-    title: "Leap",
+    title: 'Leap',
     description:
-      "Leap allows you to go to a specific channel, message, collection, profile or group simply by typing in a command or selecting a shortcut from the dropdown menu.",
+      'Leap allows you to go to a specific channel, message, collection, profile or group simply by typing in a command or selecting a shortcut from the dropdown menu.',
     url: `/~profile/~${window.ship}`,
-    alignY: "top",
+    alignY: 'top',
-    alignX: "left",
+    alignX: 'left',
-    arrow: "North",
+    arrow: 'North',
     offsetX: 0.3 *MODAL_HEIGHT,
-    offsetY: -48,
+    offsetY: -48
-  },
+  }
 };

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from "react";
+import { useState, useCallback, useMemo, useEffect } from 'react';
 
 function validateDragEvent(e: DragEvent): FileList | File[] | true | null {
   const files: File[] = [];
@@ -8,8 +8,8 @@ function validateDragEvent(e: DragEvent): FileList | File[] | true | null {
   }
   if (e.dataTransfer?.items) {
     Array.from(e.dataTransfer.items || [])
-      .filter((i) => i.kind === 'file')
+      .filter(i => i.kind === 'file')
-      .forEach(f => {
+      .forEach((f) => {
         valid = true; // Valid if file exists, but on DragOver, won't reveal its contents for security
         const data = f.getAsFile();
         if (data) {
@@ -89,14 +89,14 @@ export function useFileDrag(dragged: (f: FileList | File[], e: DragEvent) => voi
     document.body.addEventListener('mouseout', mouseleave);
     return () => {
       document.body.removeEventListener('mouseout', mouseleave);
-    }
+    };
   }, []);
 
   const bind = {
     onDragLeave,
     onDragOver,
     onDrop,
-    onDragEnter,
+    onDragEnter
   };
 
   return { bind, dragging };

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useCallback } from "react";
+import { useState, useEffect, useMemo, useCallback } from 'react';
 
 export function useDropdown<C>(
   candidates: C[],
@@ -12,10 +12,10 @@ export function useDropdown<C>(
     (s: string) => {
       const exactMatch = isExact(s);
       const exact = exactMatch ? [exactMatch] : [];
-      const opts = [...new Set([...exact, ...candidates.filter((c) => searchPred(s, c))])];
+      const opts = [...new Set([...exact, ...candidates.filter(c => searchPred(s, c))])];
       setOptions(opts);
       if (selected) {
-        const idx = opts.findIndex((c) => key(c) === key(selected));
+        const idx = opts.findIndex(c => key(c) === key(selected));
         if (idx < 0) {
           setSelected(undefined);
         }
@@ -29,9 +29,11 @@ export function useDropdown<C>(
       const select = (idx: number) => {
         setSelected(options[idx]);
       };
-      if(!selected) { select(0); return false; }
+      if(!selected) {
+ select(0); return false;
+}
 
-      const idx = options.findIndex((c) => key(c) === key(selected));
+      const idx = options.findIndex(c => key(c) === key(selected));
       if (
         idx === -1 ||
         (options.length - 1 <= idx && !backward)
@@ -55,6 +57,6 @@ export function useDropdown<C>(
     back,
     search,
     selected,
-    options,
+    options
   };
 }

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

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import {useLocation} from "react-router-dom";
+import { useLocation } from 'react-router-dom';
-
 
 export function useHashLink() {
   const location = useLocation();
@@ -10,8 +9,5 @@ export function useHashLink() {
       return;
     }
     document.querySelector(location.hash)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
   }, [location.hash]);
-
-
 }

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

@@ -1,6 +1,6 @@
-import { useEffect, RefObject, useRef, useState } from "react";
+import { useEffect, RefObject, useRef, useState } from 'react';
-import _ from "lodash";
+import _ from 'lodash';
-import usePreviousValue from "./usePreviousValue";
+import usePreviousValue from './usePreviousValue';
 
 export function distanceToBottom(el: HTMLElement) {
   const { scrollTop, scrollHeight, clientHeight } = el;
@@ -40,7 +40,6 @@ export function useLazyScroll(
     }
   }, [count]);
 
-
   useEffect(() => {
     if (!ref.current) {
       return;
@@ -54,13 +53,12 @@ export function useLazyScroll(
       loadUntil(el);
     };
 
-    ref.current.addEventListener("scroll", onScroll, { passive: true });
+    ref.current.addEventListener('scroll', onScroll, { passive: true });
 
     return () => {
-      ref.current?.removeEventListener("scroll", onScroll);
+      ref.current?.removeEventListener('scroll', onScroll);
     };
   }, [ref?.current, count]);
-  
 
   return { isDone, isLoading };
 }

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect } from 'react';
 
 function retrieve<T>(key: string, initial: T): T {
   const s = localStorage.getItem(key);
@@ -25,7 +25,7 @@ export function useLocalStorageState<T>(key: string, initial: T) {
 
   const setState = useCallback(
     (s: SetState<T>) => {
-      const updated = typeof s === "function" ? s(state) : s;
+      const updated = typeof s === 'function' ? s(state) : s;
       _setState(updated);
       localStorage.setItem(key, JSON.stringify(updated));
     },

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

@@ -5,15 +5,15 @@ import React, {
   SyntheticEvent,
   useMemo,
   useEffect,
-  useRef,
+  useRef
-} from "react";
+} from 'react';
 
-import { Box } from "@tlon/indigo-react";
+import { Box } from '@tlon/indigo-react';
-import { useOutsideClick } from "./useOutsideClick";
+import { useOutsideClick } from './useOutsideClick';
-import { ModalOverlay } from "~/views/components/ModalOverlay";
+import { ModalOverlay } from '~/views/components/ModalOverlay';
-import {Portal} from "~/views/components/Portal";
+import { Portal } from '~/views/components/Portal';
-import {ModalPortal} from "~/views/components/ModalPortal";
+import { ModalPortal } from '~/views/components/ModalPortal';
-import {PropFunc} from "~/types";
+import { PropFunc } from '@urbit/api';
 
 type ModalFunc = (dismiss: () => void) => JSX.Element;
 interface UseModalProps {
@@ -42,7 +42,7 @@ export function useModal(props: UseModalProps & PropFunc<typeof Box>): UseModalR
     () =>
       !modalShown
         ? null
-        : typeof modal === "function"
+        : typeof modal === 'function'
         ? modal(dismiss)
         : modal,
     [modalShown, modal, dismiss]
@@ -59,7 +59,7 @@ export function useModal(props: UseModalProps & PropFunc<typeof Box>): UseModalR
           bg="white"
           borderRadius={2}
           border={[0, 1]}
-          borderColor={["washedGray", "washedGray"]}
+          borderColor={['washedGray', 'washedGray']}
           display="flex"
           alignItems="stretch"
           flexDirection="column"
@@ -76,6 +76,6 @@ export function useModal(props: UseModalProps & PropFunc<typeof Box>): UseModalR
 
   return {
     showModal,
-    modal: modalComponent,
+    modal: modalComponent
   };
 }

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

@@ -1,8 +1,8 @@
-import { useEffect, RefObject } from "react";
+import { useEffect, RefObject } from 'react';
 
 export function useOutsideClick(
   ref: RefObject<HTMLElement | null | undefined>,
-  onClick: () => void,
+  onClick: () => void
 ) {
   useEffect(() => {
     function handleClick(event: MouseEvent) {
@@ -16,17 +16,16 @@ export function useOutsideClick(
     }
 
     function handleKeyDown(ev) {
-      if(ev.key === "Escape") {
+      if(ev.key === 'Escape') {
         onClick();
-
       }
     }
-    document.addEventListener("mousedown", handleClick);
+    document.addEventListener('mousedown', handleClick);
-    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener('mousedown', handleClick);
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener('keydown', handleKeyDown);
     };
   }, [ref.current, onClick]);
 }

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

@@ -1,7 +1,5 @@
-import { useRef } from "react";
+import { useRef } from 'react';
-import { Primitive } from "~/types";
+import { Primitive } from '@urbit/api';
-
-
 
 export default function usePreviousValue<T extends Primitive>(value: T): T {
   const prev = useRef<T | null>(null);

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

@@ -1,5 +1,5 @@
-import { useMemo, useCallback } from "react";
+import { useMemo, useCallback } from 'react';
-import { useLocation } from "react-router-dom";
+import { useLocation } from 'react-router-dom';
 import _ from 'lodash';
 
 export function useQuery() {
@@ -25,6 +25,6 @@ export function useQuery() {
 
   return {
     query,
-    appendQuery,
+    appendQuery
   };
 }

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

@@ -1,7 +1,7 @@
-import { useCallback, useMemo, useEffect, useRef, useState } from "react";
+import { useCallback, useMemo, useEffect, useRef, useState } from 'react';
-import { S3State } from "../../types/s3-update";
+import { S3State } from '../../types/s3-update';
-import S3 from "aws-sdk/clients/s3";
+import S3 from 'aws-sdk/clients/s3';
-import { dateToDa, deSig } from "./util";
+import { dateToDa, deSig } from './util';
 
 export interface IuseS3 {
   canUpload: boolean;
@@ -28,14 +28,14 @@ const useS3 = (s3: S3State, { accept = '*' } = { accept: '*' }): IuseS3 => {
 
   const canUpload = useMemo(
     () =>
-      (client && s3.credentials && s3.configuration.currentBucket !== "") || false,
+      (client && s3.credentials && s3.configuration.currentBucket !== '') || false,
     [s3.credentials, s3.configuration.currentBucket, client]
   );
 
   const upload = useCallback(
     async (file: File, bucket: string) => {
       if (!client.current) {
-        throw new Error("S3 not ready");
+        throw new Error('S3 not ready');
       }
 
       const fileParts = file.name.split('.');
@@ -47,8 +47,8 @@ const useS3 = (s3: S3State, { accept = '*' } = { accept: '*' }): IuseS3 => {
         Bucket: bucket,
         Key: `${window.ship}/${timestamp}-${fileName}.${fileExtension}`,
         Body: file,
-        ACL: "public-read",
+        ACL: 'public-read',
-        ContentType: file.type,
+        ContentType: file.type
       };
 
       setUploading(true);
@@ -63,8 +63,8 @@ const useS3 = (s3: S3State, { accept = '*' } = { accept: '*' }): IuseS3 => {
   );
 
   const uploadDefault = useCallback(async (file: File) => {
-    if (s3.configuration.currentBucket === "") {
+    if (s3.configuration.currentBucket === '') {
-      throw new Error("current bucket not set");
+      throw new Error('current bucket not set');
     }
     return upload(file, s3.configuration.currentBucket);
   }, [s3]);
@@ -84,11 +84,10 @@ const useS3 = (s3: S3State, { accept = '*' } = { accept: '*' }): IuseS3 => {
           }
           uploadDefault(files[0]).then(resolve);
           document.body.removeChild(fileSelector);
-        })
+        });
         document.body.appendChild(fileSelector);
         fileSelector.click();
-      })
+      });
-
     },
     [uploadDefault]
   );
@@ -96,4 +95,4 @@ const useS3 = (s3: S3State, { accept = '*' } = { accept: '*' }): IuseS3 => {
   return { canUpload, upload, uploadDefault, uploading, promptUpload };
 };
 
-export default useS3;
+export default useS3;

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

@@ -1,23 +1,23 @@
-import { MouseEvent, useCallback, useState, useEffect } from "react";
+import { MouseEvent, useCallback, useState, useEffect } from 'react';
-export type AsyncClickableState = "waiting" | "error" | "loading" | "success";
+export type AsyncClickableState = 'waiting' | 'error' | 'loading' | 'success';
 
 export function useStatelessAsyncClickable(
   onClick: (e: MouseEvent) => Promise<void>,
   name: string
 ) {
-  const [state, setState] = useState<ButtonState>("waiting");
+  const [state, setState] = useState<ButtonState>('waiting');
   const handleClick = useCallback(
     async (e: MouseEvent) => {
       try {
-        setState("loading");
+        setState('loading');
         await onClick(e);
-        setState("success");
+        setState('success');
       } catch (e) {
         console.error(e);
-        setState("error");
+        setState('error');
       } finally {
         setTimeout(() => {
-          setState("waiting");
+          setState('waiting');
         }, 3000);
       }
     },
@@ -26,7 +26,7 @@ export function useStatelessAsyncClickable(
 
   // When name changes, reset button
   useEffect(() => {
-    setState("waiting");
+    setState('waiting');
   }, [name]);
 
   return { buttonState: state, onClick: handleClick };

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

@@ -1,12 +1,11 @@
 import { useState, useEffect, useCallback } from 'react';
 
-
+export function useWaitForProps<P>(props: P, timeout = 0) {
-export function useWaitForProps<P>(props: P, timeout: number = 0) {
   const [resolve, setResolve] = useState<() => void>(() => () => {});
   const [ready, setReady] = useState<(p: P) => boolean | undefined>();
 
   useEffect(() => {
-    if (typeof ready === "function" && ready(props)) {
+    if (typeof ready === 'function' && ready(props)) {
       resolve();
     }
   }, [props, ready, resolve]);
@@ -26,7 +25,7 @@ export function useWaitForProps<P>(props: P, timeout: number = 0) {
         setResolve(() => resolve);
         if(timeout > 0) {
           setTimeout(() => {
-            reject(new Error("Timed out"));
+            reject(new Error('Timed out'));
           }, timeout);
         }
       });

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

@@ -1,27 +1,27 @@
 import { useEffect, useState } from 'react';
-import _ from "lodash";
+import _ from 'lodash';
-import f, { memoize } from "lodash/fp";
+import f, { memoize } from 'lodash/fp';
-import bigInt, { BigInteger } from "big-integer";
+import bigInt, { BigInteger } from 'big-integer';
-import { Contact } from '~/types';
+import { Contact } from '@urbit/api';
 import useLocalState from '../state/local';
 
 export const MOBILE_BROWSER_REGEX = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i;
 
 export const MOMENT_CALENDAR_DATE = {
-  sameDay: "[Today]",
+  sameDay: '[Today]',
-  nextDay: "[Tomorrow]",
+  nextDay: '[Tomorrow]',
-  nextWeek: "dddd",
+  nextWeek: 'dddd',
-  lastDay: "[Yesterday]",
+  lastDay: '[Yesterday]',
-  lastWeek: "[Last] dddd",
+  lastWeek: '[Last] dddd',
-  sameElse: "~YYYY.M.D",
+  sameElse: '~YYYY.M.D'
 };
 
 export const getModuleIcon = (mod: string) => {
- if (mod === "link") {
+ if (mod === 'link') {
-    return "Collection";
+    return 'Collection';
   }
   return _.capitalize(mod);
-}
+};
 
 export function wait(ms: number) {
   return new Promise((resolve, reject) => {
@@ -37,8 +37,8 @@ export function parentPath(path: string) {
   return _.dropRight(path.split('/'), 1).join('/');
 }
 
-const DA_UNIX_EPOCH = bigInt("170141184475152167957503069145530368000"); // `@ud` ~1970.1.1
+const DA_UNIX_EPOCH = bigInt('170141184475152167957503069145530368000'); // `@ud` ~1970.1.1
-const DA_SECOND = bigInt("18446744073709551616"); // `@ud` ~s1
+const DA_SECOND = bigInt('18446744073709551616'); // `@ud` ~s1
 export function daToUnix(da: BigInteger) {
   // ported from +time:enjs:format in hoon.hoon
   const offset = DA_SECOND.divide(bigInt(2000));
@@ -59,20 +59,20 @@ export function makePatDa(patda: string) {
 }
 
 export function udToDec(ud: string): string {
-  return ud.replace(/\./g, "");
+  return ud.replace(/\./g, '');
 }
 
 export function decToUd(str: string): string {
   return _.trimStart(
     f.flow(
-      f.split(""),
+      f.split(''),
       f.reverse,
       f.chunk(3),
-      f.map(f.flow(f.reverse, f.join(""))),
+      f.map(f.flow(f.reverse, f.join(''))),
       f.reverse,
-      f.join(".")
+      f.join('.')
     )(str),
-    "0."
+    '0.'
   );
 }
 
@@ -86,12 +86,12 @@ export function clamp(x: number, min: number, max: number) {
 // color is a #000000 color
 export function adjustHex(color: string, amount: number): string {
   return f.flow(
-    f.split(""),
+    f.split(''),
     f.chunk(2), // get RGB channels
-    f.map((c) => parseInt(c.join(""), 16)), // as hex
+    f.map(c => parseInt(c.join(''), 16)), // as hex
-    f.map((c) => clamp(c + amount, 0, 255).toString(16)), // adjust
+    f.map(c => clamp(c + amount, 0, 255).toString(16)), // adjust
-    f.join(""),
+    f.join(''),
-    (res) => `#${res}` //format
+    res => `#${res}` // format
   )(color.slice(1));
 }
 
@@ -101,12 +101,12 @@ export function resourceAsPath(resource: any) {
 }
 
 export function uuid() {
-  let str = "0v";
+  let str = '0v';
-  str += Math.ceil(Math.random() * 8) + ".";
+  str += Math.ceil(Math.random() * 8) + '.';
   for (let i = 0; i < 5; i++) {
     let _str = Math.ceil(Math.random() * 10000000).toString(32);
-    _str = ("00000" + _str).substr(-5, 5);
+    _str = ('00000' + _str).substr(-5, 5);
-    str += _str + ".";
+    str += _str + '.';
   }
 
   return str.slice(0, -1);
@@ -120,11 +120,11 @@ export function uuid() {
 */
 export function daToDate(st: string) {
   const dub = function (n: string) {
-    return parseInt(n) < 10 ? "0" + parseInt(n) : n.toString();
+    return parseInt(n) < 10 ? '0' + parseInt(n) : n.toString();
   };
-  const da = st.split("..");
+  const da = st.split('..');
-  const bigEnd = da[0].split(".");
+  const bigEnd = da[0].split('.');
-  const lilEnd = da[1].split(".");
+  const lilEnd = da[1].split('.');
   const ds = `${bigEnd[0].slice(1)}-${dub(bigEnd[1])}-${dub(bigEnd[2])}T${dub(
     lilEnd[0]
   )}:${dub(lilEnd[1])}:${dub(lilEnd[2])}Z`;
@@ -138,9 +138,9 @@ export function daToDate(st: string) {
     ~2018.7.17..23.15.09..5be5    // urbit @da
 */
 
-export function dateToDa(d: Date, mil: boolean = false) {
+export function dateToDa(d: Date, mil = false) {
   const fil = function (n: number) {
-    return n >= 10 ? n : "0" + n;
+    return n >= 10 ? n : '0' + n;
   };
   return (
     `~${d.getUTCFullYear()}.` +
@@ -149,7 +149,7 @@ export function dateToDa(d: Date, mil: boolean = false) {
     `${fil(d.getUTCHours())}.` +
     `${fil(d.getUTCMinutes())}.` +
     `${fil(d.getUTCSeconds())}` +
-    `${mil ? "..0000" : ""}`
+    `${mil ? '..0000' : ''}`
   );
 }
 
@@ -157,16 +157,16 @@ export function deSig(ship: string) {
   if (!ship) {
     return null;
   }
-  return ship.replace("~", "");
+  return ship.replace('~', '');
 }
 
 export function uxToHex(ux: string) {
-  if (ux.length > 2 && ux.substr(0, 2) === "0x") {
+  if (ux.length > 2 && ux.substr(0, 2) === '0x') {
-    const value = ux.substr(2).replace(".", "").padStart(6, "0");
+    const value = ux.substr(2).replace('.', '').padStart(6, '0');
     return value;
   }
 
-  const value = ux.replace(".", "").padStart(6, "0");
+  const value = ux.replace('.', '').padStart(6, '0');
   return value;
 }
 
@@ -187,13 +187,13 @@ export function writeText(str: string) {
 
     let success = false;
     function listener(e) {
-      e.clipboardData.setData("text/plain", str);
+      e.clipboardData.setData('text/plain', str);
       e.preventDefault();
       success = true;
     }
-    document.addEventListener("copy", listener);
+    document.addEventListener('copy', listener);
-    document.execCommand("copy");
+    document.execCommand('copy');
-    document.removeEventListener("copy", listener);
+    document.removeEventListener('copy', listener);
 
     document?.getSelection()?.removeAllRanges();
 
@@ -206,21 +206,21 @@ export function writeText(str: string) {
 // trim patps to match dojo, chat-cli
 export function cite(ship: string) {
   let patp = ship,
-    shortened = "";
+    shortened = '';
-  if (patp === null || patp === "") {
+  if (patp === null || patp === '') {
     return null;
   }
-  if (patp.startsWith("~")) {
+  if (patp.startsWith('~')) {
     patp = patp.substr(1);
   }
   // comet
   if (patp.length === 56) {
-    shortened = "~" + patp.slice(0, 6) + "_" + patp.slice(50, 56);
+    shortened = '~' + patp.slice(0, 6) + '_' + patp.slice(50, 56);
     return shortened;
   }
   // moon
   if (patp.length === 27) {
-    shortened = "~" + patp.slice(14, 20) + "^" + patp.slice(21, 27);
+    shortened = '~' + patp.slice(14, 20) + '^' + patp.slice(21, 27);
     return shortened;
   }
   return `~${patp}`;
@@ -232,7 +232,6 @@ export function alphabeticalOrder(a: string, b: string) {
 
 export function lengthOrder(a: string, b: string) {
   return b.length - a.length;
-
 }
 
 //  TODO: deprecated
@@ -244,13 +243,13 @@ export function alphabetiseAssociations(associations: any) {
       let bName = b.substr(1);
       if (associations[a].metadata && associations[a].metadata.title) {
         aName =
-          associations[a].metadata.title !== ""
+          associations[a].metadata.title !== ''
             ? associations[a].metadata.title
             : a.substr(1);
       }
       if (associations[b].metadata && associations[b].metadata.title) {
         bName =
-          associations[b].metadata.title !== ""
+          associations[b].metadata.title !== ''
             ? associations[b].metadata.title
             : b.substr(1);
       }
@@ -266,41 +265,42 @@ export function alphabetiseAssociations(associations: any) {
 // for example, 'some Chars!' becomes '~.some.~43.hars~21.'
 //
 export function stringToTa(str: string) {
-  let out = "";
+  let out = '';
   for (let i = 0; i < str.length; i++) {
     const char = str[i];
-    let add = "";
+    let add = '';
     switch (char) {
-      case " ":
+      case ' ':
-        add = ".";
+        add = '.';
         break;
-      case ".":
+      case '.':
-        add = "~.";
+        add = '~.';
         break;
-      case "~":
+      case '~':
-        add = "~~";
+        add = '~~';
         break;
       default:
         const charCode = str.charCodeAt(i);
         if (
           (charCode >= 97 && charCode <= 122) || // a-z
           (charCode >= 48 && charCode <= 57) || // 0-9
-          char === "-"
+          char === '-'
         ) {
           add = char;
         } else {
           // TODO behavior for unicode doesn't match +wood's,
           //     but we can probably get away with that for now.
-          add = "~" + charCode.toString(16) + ".";
+          add = '~' + charCode.toString(16) + '.';
         }
     }
     out = out + add;
   }
-  return "~." + out;
+  return '~.' + out;
 }
 
 export function amOwnerOfGroup(groupPath: string) {
-  if (!groupPath) return false;
+  if (!groupPath)
+return false;
   const groupOwner = /(\/~)?\/~([a-z-]{3,})\/.*/.exec(groupPath)?.[2];
   return window.ship === groupOwner;
 }
@@ -308,18 +308,18 @@ export function amOwnerOfGroup(groupPath: string) {
 export function getContactDetails(contact: any) {
   const member = !contact;
   contact = contact || {
-    nickname: "",
+    nickname: '',
     avatar: null,
-    color: "0x0",
+    color: '0x0'
   };
-  const nickname = contact.nickname || "";
+  const nickname = contact.nickname || '';
-  const color = uxToHex(contact.color || "0x0");
+  const color = uxToHex(contact.color || '0x0');
   const avatar = contact.avatar || null;
   return { nickname, color, member, avatar };
 }
 
 export function stringToSymbol(str: string) {
-  let result = "";
+  let result = '';
   for (let i = 0; i < str.length; i++) {
     const n = str.charCodeAt(i);
     if ((n >= 97 && n <= 122) || (n >= 48 && n <= 57)) {
@@ -327,19 +327,17 @@ export function stringToSymbol(str: string) {
     } else if (n >= 65 && n <= 90) {
       result += String.fromCharCode(n + 32);
     } else {
-      result += "-";
+      result += '-';
     }
   }
-  result = result.replace(/^[\-\d]+|\-+/g, "-");
+  result = result.replace(/^[\-\d]+|\-+/g, '-');
-  result = result.replace(/^\-+|\-+$/g, "");
+  result = result.replace(/^\-+|\-+$/g, '');
-  if (result === "") {
+  if (result === '') {
     return dateToDa(new Date());
   }
   return result;
 }
 
-
-
 /**
  * Formats a numbers as a `@ud` inserting dot where needed
  */
@@ -351,23 +349,24 @@ export function numToUd(num: number) {
     f.reverse,
     f.map(s => s.join('')),
     f.join('.')
-  )(num.toString())
+  )(num.toString());
 }
 
-export function usePreventWindowUnload(shouldPreventDefault: boolean, message = "You have unsaved changes. Are you sure you want to exit?") {
+export function usePreventWindowUnload(shouldPreventDefault: boolean, message = 'You have unsaved changes. Are you sure you want to exit?') {
   useEffect(() => {
-    if (!shouldPreventDefault) return;
+    if (!shouldPreventDefault)
-    const handleBeforeUnload = event => {
+return;
+    const handleBeforeUnload = (event) => {
       event.preventDefault();
       return message;
-    }
+    };
-    window.addEventListener("beforeunload", handleBeforeUnload);
+    window.addEventListener('beforeunload', handleBeforeUnload);
     window.onbeforeunload = handleBeforeUnload;
     return () => {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
+      window.removeEventListener('beforeunload', handleBeforeUnload);
       // @ts-ignore
       window.onbeforeunload = undefined;
-    }
+    };
   }, [shouldPreventDefault]);
 }
 
@@ -378,7 +377,7 @@ export function pluralize(text: string, isPlural = false, vowel = false) {
 // Hide is an optional second parameter for when this function is used in class components
 export function useShowNickname(contact: Contact | null, hide?: boolean): boolean {
   const hideNicknames = typeof hide !== 'undefined' ? hide : useLocalState(state => state.hideNicknames);
-  return !!(contact && contact.nickname && !hideNicknames);
+  return Boolean(contact && contact.nickname && !hideNicknames);
 }
 
 interface useHoveringInterface {
@@ -406,7 +405,6 @@ export function getItemTitle(association: Association) {
       return cite(`~${name.slice(4)}`);
     }
     return cite(ship);
-
   }
-  return association.metadata.title || association.resource
+  return association.metadata.title || association.resource;
-};
+}

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

@@ -1,24 +1,24 @@
-import { Associations, Workspace } from "~/types";
+import { Associations, Workspace } from '@urbit/api';
 
 export function getTitleFromWorkspace(
   associations: Associations,
   workspace: Workspace
 ) {
   switch (workspace.type) {
-    case "home":
+    case 'home':
-      return "My Channels";
+      return 'My Channels';
-    case "messages":
+    case 'messages':
-      return "Messages";
+      return 'Messages';
-    case "group":
+    case 'group':
       const association = associations.groups[workspace.group];
-      return association?.metadata?.title || "";
+      return association?.metadata?.title || '';
   }
 }
 
 export function getGroupFromWorkspace(
   workspace: Workspace
 ): string | undefined {
-  if (workspace.type === "group") {
+  if (workspace.type === 'group') {
     return workspace.group;
   }
 

pkg/interface/src/logic/reducers/contact-update.ts

@@ -1,8 +1,8 @@
 import _ from 'lodash';
 import { StoreState } from '../../store/type';
 import { Cage } from '~/types/cage';
-import { ContactUpdate } from '~/types/contact-update';
+import { ContactUpdate } from '@urbit/api/contacts';
-import {resourceAsPath} from '../lib/util';
+import { resourceAsPath } from '../lib/util';
 
 type ContactState  = Pick<StoreState, 'contacts'>;
 
@@ -78,4 +78,3 @@ const setPublic = (json: ContactUpdate, state: S) => {
   state.isContactPublic = data;
 };
 
-

pkg/interface/src/logic/reducers/group-update.ts

@@ -10,9 +10,9 @@ import {
   OpenPolicyDiff,
   OpenPolicy,
   InvitePolicyDiff,
-  InvitePolicy,
+  InvitePolicy
-} from '~/types/group-update';
+} from '@urbit/api/groups';
-import { Enc, PatpNoSig } from '~/types/noun';
+import { Enc, PatpNoSig } from '@urbit/api';
 import { resourceAsPath } from '../lib/util';
 
 type GroupState = Pick<StoreState, 'groups' | 'groupKeys'>;
@@ -23,7 +23,7 @@ function decodeGroup(group: Enc<Group>): Group {
     ...group,
     members,
     tags: decodeTags(group.tags),
-    policy: decodePolicy(group.policy),
+    policy: decodePolicy(group.policy)
   };
   return res;
 }
@@ -35,7 +35,7 @@ function decodePolicy(policy: Enc<GroupPolicy>): GroupPolicy {
   } else {
     const { open } = policy;
     return {
-      open: { banned: new Set(open.banned), banRanks: new Set(open.banRanks) },
+      open: { banned: new Set(open.banned), banRanks: new Set(open.banRanks) }
     };
   }
 }
@@ -98,7 +98,7 @@ export default class GroupReducer<S extends GroupState> {
         members: new Set(),
         tags: { role: { admin: new Set([window.ship]) } },
         policy: decodePolicy(policy),
-        hidden,
+        hidden
       };
     }
   }
@@ -189,7 +189,6 @@ export default class GroupReducer<S extends GroupState> {
     }
   }
 
-
   private inviteChangePolicy(diff: InvitePolicyDiff, policy: InvitePolicy) {
     if ('addInvites' in diff) {
       const { addInvites } = diff;

pkg/interface/src/logic/reducers/group-view.ts

@@ -1,25 +1,24 @@
-import { resourceAsPath } from "~/logic/lib/util";
+import { resourceAsPath } from '~/logic/lib/util';
-
 
 const initial = (json: any, state: any) => {
   const data = json.initial;
   if(data) {
     state.pendingJoin = data;
   }
-}
+};
 
 const progress = (json: any, state: any) => {
   const data = json.progress;
   if(data) {
     const { progress, resource } = data;
-    state.pendingJoin = {...state.pendingJoin, [resource]: progress };
+    state.pendingJoin = { ...state.pendingJoin, [resource]: progress };
     if(progress === 'done') {
       setTimeout(() => {
         delete state.pendingJoin[resource];
       }, 10000);
     }
   }
-}
+};
 
 export const GroupViewReducer = (json: any, state: any) => {
   const data = json['group-view-update'];
@@ -27,4 +26,4 @@ export const GroupViewReducer = (json: any, state: any) => {
     progress(data, state);
     initial(data, state);
   }
-}
+};

pkg/interface/src/logic/reducers/hark-update.ts

@@ -3,22 +3,21 @@ import {
   NotifIndex,
   NotificationGraphConfig,
   GroupNotificationsConfig,
-  UnreadStats,
+  UnreadStats
-} from "~/types";
+} from '@urbit/api';
-import { makePatDa } from "~/logic/lib/util";
+import { makePatDa } from '~/logic/lib/util';
-import _ from "lodash";
+import _ from 'lodash';
-import {StoreState} from "../store/type";
+import { StoreState } from '../store/type';
 import { BigIntOrderedMap } from '../lib/BigIntOrderedMap';
 
-type HarkState = Pick<StoreState, "notifications" | "notificationsGraphConfig" | "notificationsGroupConfig" | "unreads" >;
+type HarkState = Pick<StoreState, 'notifications' | 'notificationsGraphConfig' | 'notificationsGroupConfig' | 'unreads' >;
-
 
 export const HarkReducer = (json: any, state: HarkState) => {
-  const data = _.get(json, "harkUpdate", false);
+  const data = _.get(json, 'harkUpdate', false);
   if (data) {
     reduce(data, state);
   }
-  const graphHookData = _.get(json, "hark-graph-hook-update", false);
+  const graphHookData = _.get(json, 'hark-graph-hook-update', false);
   if (graphHookData) {
     graphInitial(graphHookData, state);
     graphIgnore(graphHookData, state);
@@ -26,7 +25,7 @@ export const HarkReducer = (json: any, state: HarkState) => {
     graphWatchSelf(graphHookData, state);
     graphMentions(graphHookData, state);
   }
-  const groupHookData = _.get(json, "hark-group-hook-update", false);
+  const groupHookData = _.get(json, 'hark-group-hook-update', false);
   if (groupHookData) {
     groupInitial(groupHookData, state);
     groupListen(groupHookData, state);
@@ -35,31 +34,31 @@ export const HarkReducer = (json: any, state: HarkState) => {
 };
 
 function groupInitial(json: any, state: HarkState) {
-  const data = _.get(json, "initial", false);
+  const data = _.get(json, 'initial', false);
   if (data) {
     state.notificationsGroupConfig = data;
   }
 }
 
 function graphInitial(json: any, state: HarkState) {
-  const data = _.get(json, "initial", false);
+  const data = _.get(json, 'initial', false);
   if (data) {
     state.notificationsGraphConfig = data;
   }
 }
 
 function graphListen(json: any, state: HarkState) {
-  const data = _.get(json, "listen", false);
+  const data = _.get(json, 'listen', false);
   if (data) {
     state.notificationsGraphConfig.watching = [
       ...state.notificationsGraphConfig.watching,
-      data,
+      data
     ];
   }
 }
 
 function graphIgnore(json: any, state: HarkState) {
-  const data = _.get(json, "ignore", false);
+  const data = _.get(json, 'ignore', false);
   if (data) {
     state.notificationsGraphConfig.watching = state.notificationsGraphConfig.watching.filter(
       ({ graph, index }) => !(graph === data.graph && index === data.index)
@@ -68,30 +67,30 @@ function graphIgnore(json: any, state: HarkState) {
 }
 
 function groupListen(json: any, state: HarkState) {
-  const data = _.get(json, "listen", false);
+  const data = _.get(json, 'listen', false);
   if (data) {
     state.notificationsGroupConfig = [...state.notificationsGroupConfig, data];
   }
 }
 
 function groupIgnore(json: any, state: HarkState) {
-  const data = _.get(json, "ignore", false);
+  const data = _.get(json, 'ignore', false);
   if (data) {
     state.notificationsGroupConfig = state.notificationsGroupConfig.filter(
-      (n) => n !== data
+      n => n !== data
     );
   }
 }
 
 function graphMentions(json: any, state: HarkState) {
-  const data = _.get(json, "set-mentions", undefined);
+  const data = _.get(json, 'set-mentions', undefined);
   if (!_.isUndefined(data)) {
     state.notificationsGraphConfig.mentions = data;
   }
 }
 
 function graphWatchSelf(json: any, state: HarkState) {
-  const data = _.get(json, "set-watch-on-self", undefined);
+  const data = _.get(json, 'set-watch-on-self', undefined);
   if (!_.isUndefined(data)) {
     state.notificationsGraphConfig.watchOnSelf = data;
   }
@@ -112,6 +111,14 @@ function reduce(data: any, state: HarkState) {
   unreadEach(data, state);
   seenIndex(data, state);
   removeGraph(data, state);
+  readAll(data, state);
+}
+
+function readAll(json: any, state: HarkState) {
+  const data = _.get(json, 'read-all');
+  if(data) { 
+    clearState(state);
+  }
 }
 
 function removeGraph(json: any, state: HarkState) {
@@ -131,14 +138,14 @@ function seenIndex(json: any, state: HarkState) {
 function readEach(json: any, state: HarkState) {
   const data = _.get(json, 'read-each');
   if(data) {
-    updateUnreads(state, data.index, u => u.delete(data.target))
+    updateUnreads(state, data.index, u => u.delete(data.target));
   }
 }
 
 function readSince(json: any, state: HarkState) {
   const data = _.get(json, 'read-count');
   if(data) {
-    updateUnreadCount(state, data, () => 0)
+    updateUnreadCount(state, data, () => 0);
   }
 }
 
@@ -152,7 +159,7 @@ function unreadSince(json: any, state: HarkState) {
 function unreadEach(json: any, state: HarkState) {
   const data = _.get(json, 'unread-each');
   if(data) {
-    updateUnreads(state, data.index, us => us.add(data.target))
+    updateUnreads(state, data.index, us => us.add(data.target));
   }
 }
 
@@ -175,15 +182,15 @@ function unreads(json: any, state: HarkState) {
   }
 }
 
-function clearState(state){
+function clearState(state) {
-  let initialState = {
+  const initialState = {
     notifications: new BigIntOrderedMap<Timebox>(),
     archivedNotifications: new BigIntOrderedMap<Timebox>(),
     notificationsGroupConfig: [],
     notificationsGraphConfig: {
       watchOnSelf: false,
       mentions: false,
-      watching: [],
+      watching: []
     },
     unreads: {
       graph: {},
@@ -192,7 +199,7 @@ function clearState(state){
     notificationsCount: 0
   };
 
-  Object.keys(initialState).forEach(key => {
+  Object.keys(initialState).forEach((key) => {
     state[key] = initialState[key];
   });
 }
@@ -203,7 +210,7 @@ function updateUnreadCount(state: HarkState, index: NotifIndex, count: (c: numbe
   }
   const property = [index.graph.graph, index.graph.index, 'unreads'];
   const curr = _.get(state.unreads.graph, property, 0);
-  const newCount = count(curr)
+  const newCount = count(curr);
   _.set(state.unreads.graph, property, newCount);
 }
 
@@ -218,7 +225,6 @@ function updateUnreads(state: HarkState, index: NotifIndex, f: (us: Set<string>)
   _.set(state.unreads.graph, [index.graph.graph, index.graph.index, 'unreads'], unreads);
 }
 
-
 function updateNotificationStats(state: HarkState, index: NotifIndex, statField: 'notifications' | 'unreads' | 'last', f: (x: number) => number) {
     if(statField === 'notifications') {
       state.notificationsCount = f(state.notificationsCount);
@@ -233,13 +239,13 @@ function updateNotificationStats(state: HarkState, index: NotifIndex, statField:
 }
 
 function added(json: any, state: HarkState) {
-  const data = _.get(json, "added", false);
+  const data = _.get(json, 'added', false);
   if (data) {
     const { index, notification } = data;
     const time = makePatDa(data.time);
     const timebox = state.notifications.get(time) || [];
 
-    const arrIdx = timebox.findIndex((idxNotif) =>
+    const arrIdx = timebox.findIndex(idxNotif =>
       notifIdxEqual(index, idxNotif.index)
     );
     if (arrIdx !== -1) {
@@ -256,14 +262,14 @@ function added(json: any, state: HarkState) {
 }
 
 const dnd = (json: any, state: HarkState) => {
-  const data = _.get(json, "set-dnd", undefined);
+  const data = _.get(json, 'set-dnd', undefined);
   if (!_.isUndefined(data)) {
     state.doNotDisturb = data;
   }
 };
 
 const timebox = (json: any, state: HarkState) => {
-  const data = _.get(json, "timebox", false);
+  const data = _.get(json, 'timebox', false);
   if (data) {
     const time = makePatDa(data.time);
     if (!data.archive) {
@@ -273,21 +279,21 @@ const timebox = (json: any, state: HarkState) => {
 };
 
 function more(json: any, state: HarkState) {
-  const data = _.get(json, "more", false);
+  const data = _.get(json, 'more', false);
   if (data) {
-    _.forEach(data, (d) => reduce(d, state));
+    _.forEach(data, d => reduce(d, state));
   }
 }
 
 function notifIdxEqual(a: NotifIndex, b: NotifIndex) {
-  if ("graph" in a && "graph" in b) {
+  if ('graph' in a && 'graph' in b) {
     return (
       a.graph.graph === b.graph.graph &&
       a.graph.group === b.graph.group &&
       a.graph.module === b.graph.module &&
       a.graph.description === b.graph.description
     );
-  } else if ("group" in a && "group" in b) {
+  } else if ('group' in a && 'group' in b) {
     return (
       a.group.group === b.group.group &&
       a.group.description === b.group.description
@@ -305,14 +311,14 @@ function setRead(
   const patDa = makePatDa(time);
   const timebox = state.notifications.get(patDa);
   if (_.isNull(timebox)) {
-    console.warn("Modifying nonexistent timebox");
+    console.warn('Modifying nonexistent timebox');
     return;
   }
-  const arrIdx = timebox.findIndex((idxNotif) =>
+  const arrIdx = timebox.findIndex(idxNotif =>
     notifIdxEqual(index, idxNotif.index)
   );
   if (arrIdx === -1) {
-    console.warn("Modifying nonexistent index");
+    console.warn('Modifying nonexistent index');
     return;
   }
   timebox[arrIdx].notification.read = read;
@@ -320,7 +326,7 @@ function setRead(
 }
 
 function read(json: any, state: HarkState) {
-  const data = _.get(json, "read-note", false);
+  const data = _.get(json, 'read-note', false);
   if (data) {
     const { time, index } = data;
     updateNotificationStats(state, index, 'notifications', x => x-1);
@@ -329,7 +335,7 @@ function read(json: any, state: HarkState) {
 }
 
 function unread(json: any, state: HarkState) {
-  const data = _.get(json, "unread-note", false);
+  const data = _.get(json, 'unread-note', false);
   if (data) {
     const { time, index } = data;
     updateNotificationStats(state, index, 'notifications', x => x+1);
@@ -338,16 +344,16 @@ function unread(json: any, state: HarkState) {
 }
 
 function archive(json: any, state: HarkState) {
-  const data = _.get(json, "archive", false);
+  const data = _.get(json, 'archive', false);
   if (data) {
     const { index } = data;
     const time = makePatDa(data.time);
     const timebox = state.notifications.get(time);
     if (!timebox) {
-      console.warn("Modifying nonexistent timebox");
+      console.warn('Modifying nonexistent timebox');
       return;
     }
-    const [archived, unarchived] = _.partition(timebox, (idxNotif) =>
+    const [archived, unarchived] = _.partition(timebox, idxNotif =>
       notifIdxEqual(index, idxNotif.index)
     );
     if(unarchived.length === 0) {
@@ -357,6 +363,6 @@ function archive(json: any, state: HarkState) {
       state.notifications.set(time, unarchived);
     }
     const newlyRead = archived.filter(x => !x.notification.read).length;
-    updateNotificationStats(state, index, 'notifications', (x) => x - newlyRead);
+    updateNotificationStats(state, index, 'notifications', x => x - newlyRead);
   }
 }

pkg/interface/src/logic/reducers/invite-update.ts

@@ -1,10 +1,9 @@
 import _ from 'lodash';
 import { StoreState } from '../../store/type';
 import { Cage } from '~/types/cage';
-import { InviteUpdate } from '~/types/invite-update';
+import { InviteUpdate } from '@urbit/api/invite';
-
-type InviteState = Pick<StoreState, "invites">;
 
+type InviteState = Pick<StoreState, 'invites'>;
 
 export default class InviteReducer<S extends InviteState> {
   reduce(json: Cage, state: S) {

pkg/interface/src/logic/reducers/launch-update.ts

@@ -51,12 +51,11 @@ export default class LaunchReducer<S extends LaunchState> {
   changeIsShown(json: LaunchUpdate, state: S) {
     const data = _.get(json, 'changeIsShown', false);
     if (data) {
-      let tile = state.launch.tiles[data.name];
+      const tile = state.launch.tiles[data.name];
       console.log(tile);
       if (tile) {
         tile.isShown = data.isShown;
       }
     }
   }
-
 }

pkg/interface/src/logic/reducers/metadata-update.ts

@@ -2,14 +2,14 @@ import _ from 'lodash';
 
 import { StoreState } from '../../store/type';
 
-import { MetadataUpdate } from '~/types/metadata-update';
+import { MetadataUpdate } from '@urbit/api/metadata';
 import { Cage } from '~/types/cage';
 
 type MetadataState = Pick<StoreState, 'associations'>;
 
 export default class MetadataReducer<S extends MetadataState> {
   reduce(json: Cage, state: S) {
-    let data = json['metadata-update']
+    const data = json['metadata-update'];
     if (data) {
       console.log(data);
       this.associations(data, state);
@@ -29,13 +29,13 @@ export default class MetadataReducer<S extends MetadataState> {
   }
 
   associations(json: MetadataUpdate, state: S) {
-    let data = _.get(json, 'associations', false);
+    const data = _.get(json, 'associations', false);
     if (data) {
-      let metadata = state.associations;
+      const metadata = state.associations;
       Object.keys(data).forEach((key) => {
-        let val = data[key];
+        const val = data[key];
-        let appName = val['app-name'];
+        const appName = val['app-name'];
-        let rid = val.resource;
+        const rid = val.resource;
         if (!(appName in metadata)) {
           metadata[appName] = {};
         }
@@ -50,11 +50,11 @@ export default class MetadataReducer<S extends MetadataState> {
   }
 
   add(json: MetadataUpdate, state: S) {
-    let data = _.get(json, 'add', false);
+    const data = _.get(json, 'add', false);
     if (data) {
-      let metadata = state.associations;
+      const metadata = state.associations;
-      let appName = data['app-name'];
+      const appName = data['app-name'];
-      let appPath = data.resource;
+      const appPath = data.resource;
 
       if (!(appName in metadata)) {
         metadata[appName] = {};
@@ -69,11 +69,11 @@ export default class MetadataReducer<S extends MetadataState> {
   }
 
   update(json: MetadataUpdate, state: S) {
-    let data = _.get(json, 'update-metadata', false);
+    const data = _.get(json, 'update-metadata', false);
     if (data) {
-      let metadata = state.associations;
+      const metadata = state.associations;
-      let appName = data['app-name'];
+      const appName = data['app-name'];
-      let rid = data.resource;
+      const rid = data.resource;
 
       if (!(appName in metadata)) {
         metadata[appName] = {};
@@ -88,11 +88,11 @@ export default class MetadataReducer<S extends MetadataState> {
   }
 
   remove(json: MetadataUpdate, state: S) {
-    let data = _.get(json, 'remove', false);
+    const data = _.get(json, 'remove', false);
     if (data) {
-      let metadata = state.associations;
+      const metadata = state.associations;
-      let appName = data['app-name'];
+      const appName = data['app-name'];
-      let rid = data.resource;
+      const rid = data.resource;
 
       if (appName in metadata && rid in metadata[appName]) {
         delete metadata[appName][rid];

pkg/interface/src/logic/reducers/settings-update.ts

@@ -1,21 +1,21 @@
 import _ from 'lodash';
 import { StoreState } from '../../store/type';
 import {
-  SettingsUpdate,
+  SettingsUpdate
-} from '~/types/settings';
+} from '@urbit/api/settings';
 
 type SettingsState = Pick<StoreState, 'settings'>;
 
-export default class SettingsReducer<S extends SettingsState>{
+export default class SettingsReducer<S extends SettingsState> {
   reduce(json: Cage, state: S) {
-    let data = json["settings-event"];
+    let data = json['settings-event'];
     if (data) {
       this.putBucket(data, state);
       this.delBucket(data, state);
       this.putEntry(data, state);
       this.delEntry(data, state);
     }
-    data = json["settings-data"];
+    data = json['settings-data'];
     if (data) {
       this.getAll(data, state);
       this.getBucket(data, state);
@@ -26,31 +26,31 @@ export default class SettingsReducer<S extends SettingsState>{
   putBucket(json: SettingsUpdate, state: S) {
     const data = _.get(json, 'put-bucket', false);
     if (data) {
-      state.settings[data["bucket-key"]] = data.bucket;
+      state.settings[data['bucket-key']] = data.bucket;
     }
   }
 
   delBucket(json: SettingsUpdate, state: S) {
     const data = _.get(json, 'del-bucket', false);
     if (data) {
-      delete state.settings[data["bucket-key"]];
+      delete state.settings[data['bucket-key']];
     }
   }
 
   putEntry(json: SettingsUpdate, state: S) {
     const data = _.get(json, 'put-entry', false);
     if (data) {
-      if (!state.settings[data["bucket-key"]]) {
+      if (!state.settings[data['bucket-key']]) {
-        state.settings[data["bucket-key"]] = {};
+        state.settings[data['bucket-key']] = {};
       }
-      state.settings[data["bucket-key"]][data["entry-key"]] = data.value;
+      state.settings[data['bucket-key']][data['entry-key']] = data.value;
     }
   }
 
   delEntry(json: SettingsUpdate, state: S) {
     const data = _.get(json, 'del-entry', false);
     if (data) {
-      delete state.settings[data["bucket-key"]][data["entry-key"]];
+      delete state.settings[data['bucket-key']][data['entry-key']];
     }
   }
 

pkg/interface/src/logic/state/local.tsx

@@ -1,10 +1,9 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode } from 'react';
 import f from 'lodash/fp';
 import create, { State }  from 'zustand';
 import { persist } from 'zustand/middleware';
 import produce from 'immer';
-import { BackgroundConfig, RemoteContentPolicy, TutorialProgress, tutorialProgress } from "~/types/local-update";
+import { BackgroundConfig, RemoteContentPolicy, TutorialProgress, tutorialProgress } from '~/types/local-update';
-
 
 export interface LocalState extends State {
   hideAvatars: boolean;
@@ -22,8 +21,8 @@ export interface LocalState extends State {
   suspendedFocus?: HTMLElement;
   toggleOmnibox: () => void;
   set: (fn: (state: LocalState) => void) => void
-};
+}
-export const selectLocalState = 
+export const selectLocalState =
   <K extends keyof LocalState>(keys: K[]) => f.pick<LocalState, K>(keys);
 
 const useLocalState = create<LocalState>(persist((set, get) => ({
@@ -33,21 +32,21 @@ const useLocalState = create<LocalState>(persist((set, get) => ({
   hideNicknames: false,
   tutorialProgress: 'hidden',
   tutorialRef: null,
-  setTutorialRef: (el: HTMLElement | null) => set(produce(state => {
+  setTutorialRef: (el: HTMLElement | null) => set(produce((state) => {
     state.tutorialRef = el;
   })),
-  hideTutorial: () => set(produce(state => {
+  hideTutorial: () => set(produce((state) => {
     state.tutorialProgress = 'hidden';
     state.tutorialRef = null;
   })),
-  nextTutStep: () => set(produce(state => {
+  nextTutStep: () => set(produce((state) => {
-    const currIdx = tutorialProgress.findIndex(p => p === state.tutorialProgress)
+    const currIdx = tutorialProgress.findIndex(p => p === state.tutorialProgress);
     if(currIdx < tutorialProgress.length) {
       state.tutorialProgress = tutorialProgress[currIdx + 1];
     }
   })),
-  prevTutStep: () => set(produce(state => {
+  prevTutStep: () => set(produce((state) => {
-    const currIdx = tutorialProgress.findIndex(p => p === state.tutorialProgress)
+    const currIdx = tutorialProgress.findIndex(p => p === state.tutorialProgress);
     if(currIdx > 0) {
       state.tutorialProgress = tutorialProgress[currIdx - 1];
     }
@@ -56,11 +55,11 @@ const useLocalState = create<LocalState>(persist((set, get) => ({
     imageShown: true,
     audioShown: true,
     videoShown: true,
-    oembedShown: true,
+    oembedShown: true
   },
   omniboxShown: false,
   suspendedFocus: undefined,
-  toggleOmnibox: () => set(produce(state => {
+  toggleOmnibox: () => set(produce((state) => {
     state.omniboxShown = !state.omniboxShown;
     if (typeof state.suspendedFocus?.focus === 'function') {
       state.suspendedFocus.focus();
@@ -86,7 +85,7 @@ function withLocalState<P, S extends keyof LocalState>(Component: any, stateMemb
         (object, key) => ({ ...object, [key]: state[key] }), {}
       )
     ): useLocalState();
-    return <Component ref={ref} {...localState} {...props} />
+    return <Component ref={ref} {...localState} {...props} />;
   });
 }
 

pkg/interface/src/logic/store/base.ts

@@ -19,7 +19,7 @@ export default class BaseStore<S extends object> {
 
   clear() {
     this.handleEvent({
-      data: { clear: true },
+      data: { clear: true }
     });
   }
 
@@ -30,7 +30,7 @@ export default class BaseStore<S extends object> {
       return;
     }
 
-    if ("clear" in json && json.clear) {
+    if ('clear' in json && json.clear) {
       this.setState(this.initialState());
       return;
     }

pkg/interface/src/logic/store/store.ts

@@ -6,7 +6,7 @@ import MetadataReducer from '../reducers/metadata-update';
 import LocalReducer from '../reducers/local';
 
 import { StoreState } from './type';
-import { Timebox } from '~/types';
+import { Timebox } from '@urbit/api';
 import { Cage } from '~/types/cage';
 import S3Reducer from '../reducers/s3-update';
 import { GraphReducer } from '../reducers/graph-update';
@@ -16,10 +16,9 @@ import GroupReducer from '../reducers/group-update';
 import LaunchReducer from '../reducers/launch-update';
 import ConnectionReducer from '../reducers/connection';
 import SettingsReducer from '../reducers/settings-update';
-import {OrderedMap} from '../lib/OrderedMap';
+import { OrderedMap } from '../lib/OrderedMap';
 import { BigIntOrderedMap } from '../lib/BigIntOrderedMap';
-import {GroupViewReducer} from '../reducers/group-view';
+import { GroupViewReducer } from '../reducers/group-view';
-
 
 export default class GlobalStore extends BaseStore<StoreState> {
   inviteReducer = new InviteReducer();
@@ -58,7 +57,7 @@ export default class GlobalStore extends BaseStore<StoreState> {
       invites: {},
       associations: {
         groups: {},
-        graph: {},
+        graph: {}
       },
       groups: {},
       groupKeys: new Set(),
@@ -67,7 +66,7 @@ export default class GlobalStore extends BaseStore<StoreState> {
       launch: {
         firstTime: false,
         tileOrdering: [],
-        tiles: {},
+        tiles: {}
       },
       weather: {},
       userLocation: null,
@@ -87,7 +86,7 @@ export default class GlobalStore extends BaseStore<StoreState> {
       notificationsGraphConfig: {
         watchOnSelf: false,
         mentions: false,
-        watching: [],
+        watching: []
       },
       unreads: {
         graph: {},
@@ -95,7 +94,7 @@ export default class GlobalStore extends BaseStore<StoreState> {
       },
       notificationsCount: 0,
       settings: {},
-      pendingJoin: {},
+      pendingJoin: {}
     };
   }
 

pkg/interface/src/logic/store/type.ts

@@ -1,20 +1,20 @@
-import { Path } from '~/types/noun';
+import { Path } from '@urbit/api';
-import { Invites } from '~/types/invite-update';
+import { Invites } from '@urbit/api/invite';
-import { Associations } from '~/types/metadata-update';
+import { Associations } from '@urbit/api/metadata';
-import { Rolodex } from '~/types/contact-update';
+import { Rolodex } from '@urbit/api/contacts';
-import { Groups } from '~/types/group-update';
+import { Groups } from '@urbit/api/groups';
 import { S3State } from '~/types/s3-update';
 import { LaunchState, WeatherState } from '~/types/launch-update';
 import { ConnectionStatus } from '~/types/connection';
-import {Graphs} from '~/types/graph-update';
+import { Graphs } from '@urbit/api/graph';
 import {
   Notifications,
-  NotificationGraphConfig, 
+  NotificationGraphConfig,
   GroupNotificationsConfig,
   Unreads,
   JoinRequests,
   Patp
-} from "~/types";
+} from '@urbit/api';
 
 export interface StoreState {
   // local state
@@ -35,7 +35,6 @@ export interface StoreState {
   graphs: Graphs;
   graphKeys: Set<string>;
 
-
   // App specific states
   //  launch state
   launch: LaunchState;

pkg/interface/src/logic/subscription/base.ts

@@ -1,6 +1,6 @@
-import BaseStore from "../store/base";
+import BaseStore from '../store/base';
-import BaseApi from "../api/base";
+import BaseApi from '../api/base';
-import { Path } from "~/types/noun";
+import { Path } from '@urbit/api';
 
 export default class BaseSubscription<S extends object> {
   private errorCount = 0;
@@ -19,24 +19,24 @@ export default class BaseSubscription<S extends object> {
 
   // Exists to allow subclasses to hook
   restart() {
-    this.handleEvent({ data: { connection: 'reconnecting' }});
+    this.handleEvent({ data: { connection: 'reconnecting' } });
     this.start();
   }
 
   onChannelOpen(e: any) {
     this.errorCount = 0;
-    this.handleEvent({ data: { connection: 'connected' }});
+    this.handleEvent({ data: { connection: 'connected' } });
   }
 
   onChannelError(err) {
     console.error('event source error: ', err);
     this.errorCount++;
     if(this.errorCount >= 5) {
-      console.error("bailing out, too many retries");
+      console.error('bailing out, too many retries');
-      this.handleEvent({ data: { connection: 'disconnected' }});
+      this.handleEvent({ data: { connection: 'disconnected' } });
       return;
     }
-    this.handleEvent({ data: { connection: 'reconnecting' }});
+    this.handleEvent({ data: { connection: 'reconnecting' } });
     setTimeout(() => {
       this.restart();
     }, Math.pow(2,this.errorCount - 1) * 750);

pkg/interface/src/logic/subscription/global.ts

@@ -1,9 +1,8 @@
 import BaseSubscription from './base';
 import { StoreState } from '../store/type';
-import { Path } from '~/types/noun';
+import { Path } from '@urbit/api';
 import _ from 'lodash';
 
-
 /**
  * Path to subscribe on and app to subscribe to
  */
@@ -68,7 +67,7 @@ export default class GlobalSubscription extends BaseSubscription<StoreState> {
   }
 
   stopApp(app: AppName) {
-    this.openSubscriptions[app].map(id => this.unsubscribe(id))
+    this.openSubscriptions[app].map(id => this.unsubscribe(id));
     this.openSubscriptions[app] = [];
   }
 }

pkg/interface/src/types/cage.ts

@@ -1,21 +1,17 @@
-import { ContactUpdate } from "./contact-update";
+import { LocalUpdate } from './local-update';
-import { InviteUpdate } from "./invite-update";
+import { LaunchUpdate, WeatherState } from './launch-update';
-import { LocalUpdate } from "./local-update";
+import { ConnectionStatus } from './connection';
-import { MetadataUpdate } from "./metadata-update";
+import { ContactUpdate, GroupUpdate, InviteUpdate, MetadataUpdate } from '@urbit/api';
-import { GroupUpdate } from "./group-update";
+import { SettingsUpdate } from '@urbit/api/settings';
-import { LaunchUpdate, WeatherState } from "./launch-update";
-import { ConnectionStatus } from "./connection";
-import { SettingsUpdate } from "./settings";
 
 interface MarksToTypes {
   readonly json: any;
-  readonly "contact-update": ContactUpdate;
+  readonly 'contact-update': ContactUpdate;
-  readonly "invite-update": InviteUpdate;
+  readonly 'invite-update': InviteUpdate;
-  readonly "metadata-update": MetadataUpdate;
+  readonly 'metadata-update': MetadataUpdate;
   readonly groupUpdate: GroupUpdate;
-  readonly "launch-update": LaunchUpdate;
+  readonly 'launch-update': LaunchUpdate;
-  readonly "link-listen-update": LinkListenUpdate;
+  readonly 'settings-event': SettingsUpdate;
-  readonly "settings-event": SettingsUpdate;
   // not really marks but w/e
   readonly 'local': LocalUpdate;
   readonly 'weather': WeatherState | {};

pkg/interface/src/types/connection.ts

@@ -1,2 +1 @@
-
 export type ConnectionStatus = 'reconnecting' | 'disconnected' | 'connected';

pkg/interface/src/types/contact-update.ts

@@ -1,85 +0,0 @@
-import { Path, Patp } from "./noun";
-
-export type ContactUpdate =
-  | ContactUpdateCreate
-  | ContactUpdateDelete
-  | ContactUpdateAdd
-  | ContactUpdateRemove
-  | ContactUpdateEdit
-  | ContactUpdateInitial
-  | ContactUpdateContacts;
-
-interface ContactUpdateCreate {
-  create: Path;
-}
-
-interface ContactUpdateDelete {
-  delete: Path;
-}
-
-interface ContactUpdateAdd {
-  add: {
-    path: Path;
-    ship: Patp;
-    contact: Contact;
-  };
-}
-
-interface ContactUpdateRemove {
-  remove: {
-    path: Path;
-    ship: Patp;
-  };
-}
-
-interface ContactUpdateEdit {
-  edit: {
-    path: Path;
-    ship: Patp;
-    "edit-field": ContactEdit;
-  };
-}
-
-interface ContactUpdateInitial {
-  initial: Rolodex;
-}
-
-interface ContactUpdateContacts {
-  contacts: {
-    path: Path;
-    contacts: Contacts;
-  };
-}
-
-//
-
-type ContactAvatar = ContactAvatarUrl | ContactAvatarOcts;
-
-export type Rolodex = {
-  [p in Path]: Contacts;
-};
-
-export type Contacts = {
-  [p in Patp]: Contact;
-};
-
-interface ContactAvatarUrl {
-  url: string;
-}
-
-interface ContactAvatarOcts {
-  octs: string;
-}
-export interface Contact {
-  nickname: string;
-  email: string;
-  phone: string;
-  website: string;
-  notes: string;
-  color: string;
-  avatar: string | null;
-}
-
-export type ContactEdit = {
-  [k in keyof Contact]: Contact[k];
-};

pkg/interface/src/types/global.ts

@@ -1,4 +1,4 @@
-import { PatpNoSig } from "./noun";
+import { PatpNoSig } from '@urbit/api';
 
 declare global {
   interface Window {

pkg/interface/src/types/index.ts

@@ -1,16 +1,8 @@
 export * from './cage';
 export * from './connection';
-export * from './contact-update';
 export * from './global';
-export * from './group-update';
-export * from './group-view';
-export * from './graph-update';
-export * from './hark-update';
-export * from './invite-update';
 export * from './launch-update';
 export * from './local-update';
-export * from './metadata-update';
-export * from './noun';
 export * from './s3-update';
 export * from './workspace';
 export * from './util';

pkg/interface/src/types/launch-update.ts

@@ -1,11 +1,9 @@
-
 export type LaunchUpdate =
   LaunchUpdateInitial
 | LaunchUpdateFirstTime
 | LaunchUpdateOrder
 | LaunchUpdateIsShown;
 
-
 interface LaunchUpdateInitial {
   initial: LaunchState;
 }

pkg/interface/src/types/s3-update.ts

@@ -1,6 +1,4 @@
-
+export interface S3Credentials {
-
- export interface S3Credentials {
    endpoint: string;
    accessKeyId: string;
    secretAccessKey: string;
@@ -51,7 +49,6 @@ interface S3UpdateSecretAccessKey {
   setSecretAccessKey: string;
 }
 
-
 export type S3Update =
   S3UpdateCredentials
 | S3UpdateConfiguration

pkg/interface/src/types/util.ts

@@ -1,4 +1,4 @@
-import { Icon } from "@tlon/indigo-react";
+import { Icon } from '@tlon/indigo-react';
 export type PropFunc<T extends (...args: any[]) => any> = Parameters<T>[0];
 
 export type Primitive = string | number | undefined | symbol | null | boolean;

pkg/interface/src/types/workspace.ts

@@ -1,5 +1,3 @@
-
-
 interface GroupWorkspace {
   type: 'group';
   group: string;

pkg/interface/src/views/apps/chat/ChatResource.tsx

@@ -3,7 +3,7 @@ import { RouteComponentProps } from 'react-router-dom';
 import { Col } from '@tlon/indigo-react';
 import _ from 'lodash';
 
-import { Association } from '~/types/metadata-update';
+import { Association } from '@urbit/api/metadata';
 import { StoreState } from '~/logic/store/type';
 import { useFileDrag } from '~/logic/lib/useDrag';
 import ChatWindow from './components/ChatWindow';
@@ -127,14 +127,13 @@ export function ChatResource(props: ChatResourceProps) {
 
       setHasLoadedAllowed(true);
     })();
-
   }, [groupPath]);
 
   if(!graph) {
     return <Loading />;
   }
 
-  var modifiedContacts = { ...contacts };
+  const modifiedContacts = { ...contacts };
   delete  modifiedContacts[`~${window.ship}`];
 
   return (
@@ -148,7 +147,7 @@ export function ChatResource(props: ChatResourceProps) {
         setShowBanner={setShowBanner}
         group={group}
         groupPath={groupPath}
-       />
+      />
       {dragging && <SubmitDragger />}
       <ChatWindow
         history={props.history}

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

@@ -7,7 +7,7 @@ import { createPost } from '~/logic/api/graph';
 import tokenizeMessage, { isUrl } from '~/logic/lib/tokenizeMessage';
 import GlobalApi from '~/logic/api/global';
 import { Envelope } from '~/types/chat-update';
-import { Contacts, Content } from '~/types';
+import { Contacts, Content } from '@urbit/api';
 import { Row, BaseImage, Box, Icon, LoadingSpinner } from '@tlon/indigo-react';
 import withS3 from '~/views/components/withS3';
 import { withLocalState } from '~/logic/state/local';
@@ -15,12 +15,12 @@ import { withLocalState } from '~/logic/state/local';
 type ChatInputProps = IuseS3 & {
   api: GlobalApi;
   numMsgs: number;
-  station: any;
+  station: unknown;
-  ourContact: any;
+  ourContact: unknown;
   envelopes: Envelope[];
   contacts: Contacts;
   onUnmount(msg: string): void;
-  s3: any;
+  s3: unknown;
   placeholder: string;
   message: string;
   deleteMessage(): void;
@@ -67,14 +67,14 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
         inCodeMode: false
       }, async () => {
         const output = await props.api.graph.eval(text);
-        const contents: Content[] = [{ code: { output, expression: text }}];
+        const contents: Content[] = [{ code: { output, expression: text } }];
         const post = createPost(contents);
         props.api.graph.addPost(ship, name, post);
       });
       return;
     }
 
-    const post = createPost(tokenizeMessage((text)))
+    const post = createPost(tokenizeMessage((text)));
 
     props.deleteMessage();
 
@@ -110,7 +110,7 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
     if (!this.props.canUpload) {
       return;
     }
-    Array.from(files).forEach(file => {
+    Array.from(files).forEach((file) => {
       this.props.uploadDefault(file)
         .then(this.uploadSuccess)
         .catch(this.uploadError);
@@ -178,7 +178,7 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
                 width="16"
                 height="16"
                 onClick={() => this.props.promptUpload().then(this.uploadSuccess)}
-              />
+                />
             : null
           }
         </Box>
@@ -200,4 +200,4 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
   }
 }
 
-export default withLocalState(withS3(ChatInput, {accept: 'image/*'}), ['hideAvatars']);
+export default withLocalState(withS3(ChatInput, { accept: 'image/*' }), ['hideAvatars']);

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

@@ -32,6 +32,7 @@ import RemoteContent from '~/views/components/RemoteContent';
 import { Mention } from '~/views/components/MentionText';
 import styled from 'styled-components';
 import useLocalState from '~/logic/state/local';
+import Timestamp from '~/views/components/Timestamp';
 
 export const DATESTAMP_FORMAT = '[~]YYYY.M.D';
 
@@ -87,12 +88,12 @@ interface ChatMessageProps {
   contacts: Contacts;
   className?: string;
   isPending: boolean;
-  style?: any;
+  style?: unknown;
   scrollWindow: HTMLDivElement;
   isLastMessage?: boolean;
   unreadMarkerRef: React.RefObject<HTMLDivElement>;
-  history: any;
+  history: unknown;
-  api: any;
+  api: GlobalApi;
   highlighted?: boolean;
   renderSigil?: boolean;
 }
@@ -254,7 +255,7 @@ export const MessageAuthor = ({
   const [showOverlay, setShowOverlay] = useState(false);
 
   const toggleOverlay = () => {
-    setShowOverlay((value) => !value);
+    setShowOverlay(value => !value);
   };
 
   const showCopyNotice = () => {

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

@@ -4,6 +4,7 @@ import _ from 'lodash';
 import bigInt, { BigInteger } from 'big-integer';
 
 import { Col } from '@tlon/indigo-react';
+import { Patp, Contacts, Association, Associations, Group, Groups, Graph } from '@urbit/api';
 
 import GlobalApi from '~/logic/api/global';
 import { Patp, Path } from '~/types/noun';
@@ -13,6 +14,7 @@ import { Group, Groups } from '~/types/group-update';
 import { Envelope, IMessage } from '~/types/chat-update';
 import { Graph } from '~/types';
 
+
 import VirtualScroller from '~/views/components/VirtualScroller';
 
 import ChatMessage, { MessagePlaceholder } from './ChatMessage';
@@ -170,8 +172,10 @@ export default class ChatWindow extends Component<
 
   dismissUnread() {
     const { association } = this.props;
-    if (this.state.fetchPending) return;
+    if (this.state.fetchPending)
-    if (this.props.unreadCount === 0) return;
+return;
+    if (this.props.unreadCount === 0)
+return;
     this.props.api.hark.markCountAsRead(association, '/', 'message');
     this.props.api.hark.markCountAsRead(association, '/', 'mention');
   }
@@ -220,10 +224,13 @@ export default class ChatWindow extends Component<
   }
 
   dismissIfLineVisible() {
-    if (this.props.unreadCount === 0) return;
+    if (this.props.unreadCount === 0)
-    if (!this.unreadMarkerRef.current || !this.virtualList?.window) return;
+return;
+    if (!this.unreadMarkerRef.current || !this.virtualList?.window)
+return;
     const parent = this.unreadMarkerRef.current.parentElement?.parentElement;
-    if (!parent) return;
+    if (!parent)
+return;
     const { scrollTop, scrollHeight, offsetHeight } = this.virtualList.window;
     if (
       scrollHeight - parent.offsetTop > scrollTop &&
@@ -249,7 +256,6 @@ export default class ChatWindow extends Component<
     } = this.props;
 
     const unreadMarkerRef = this.unreadMarkerRef;
-
     const messageProps = {
       association,
       group,
@@ -260,7 +266,6 @@ export default class ChatWindow extends Component<
       groups,
       associations
     };
-
     const keys = graph.keys().reverse();
     const unreadIndex = graph.keys()[this.props.unreadCount];
     const unreadMsg = unreadIndex && graph.get(unreadIndex);
@@ -294,7 +299,8 @@ export default class ChatWindow extends Component<
           size={graph.size}
           renderer={({ index, measure, scrollWindow }) => {
             const msg = graph.get(index)?.post;
-            if (!msg) return null;
+            if (!msg)
+return null;
             if (!this.state.initialized) {
               return (
                 <MessagePlaceholder
@@ -312,7 +318,6 @@ export default class ChatWindow extends Component<
             const graphIdx = keys.findIndex((idx) => idx.eq(index));
             const prevIdx = keys[graphIdx + 1];
             const nextIdx = keys[graphIdx - 1];
-
             const isLastRead: boolean = this.state.unreadIndex.eq(index);
             const props = {
               measure,

pkg/interface/src/views/apps/chat/components/content/code.js

@@ -23,7 +23,7 @@ export default class CodeContent extends Component {
           style={{ whiteSpace: 'pre' }}
           backgroundColor='washedGray'
         >
-          {content.code.output[0].join('\n')}
+          {content.code.output.join('\n')}
         </Text>
       ) : null;
 

pkg/interface/src/views/apps/chat/components/content/text.js

@@ -2,7 +2,6 @@ import React, { Component, useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 import RemarkDisableTokenizers from 'remark-disable-tokenizers';
-import RemarkBreaks from 'remark-breaks';
 import urbitOb from 'urbit-ob';
 import { Text } from '@tlon/indigo-react';
 import { GroupLink } from '~/views/components/GroupLink';

pkg/interface/src/views/apps/chat/components/unread-notice.js

@@ -2,12 +2,16 @@ import React from 'react';
 import moment from 'moment';
 import { Box, Text } from '@tlon/indigo-react';
 
+import Timestamp from '~/views/components/Timestamp';
+
 export const UnreadNotice = (props) => {
   const { unreadCount, unreadMsg, dismissUnread, onClick } = props;
 
   if (!unreadMsg || (unreadCount === 0)) {
     return null;
   }
+  
+  const stamp = moment.unix(unreadMsg.post['time-sent'] / 1000);
 
   let datestamp = moment.unix(unreadMsg.post['time-sent'] / 1000).format('YYYY.M.D');
   const timestamp = moment.unix(unreadMsg.post['time-sent'] / 1000).format('HH:mm');
@@ -34,14 +38,9 @@ export const UnreadNotice = (props) => {
         borderRadius='1'
         border='1'
         borderColor='blue'>
-        <Text flexShrink='1' textOverflow='ellipsis' whiteSpace='pre' overflow='hidden' display='block' cursor='pointer' onClick={onClick}>
+        <Text flexShrink='1' textOverflow='ellipsis' whiteSpace='pre' overflow='hidden' display='flex' cursor='pointer' onClick={onClick}>
           {unreadCount} new message{unreadCount > 1 ? 's' : ''} since{' '}
-          {datestamp && (
+          <Timestamp stamp={stamp} color='blue' date={true} />
-            <>
-              <Text color='blue'>~{datestamp}</Text> at{' '}
-            </>
-          )}
-          <Text color='blue'>{timestamp}</Text>
         </Text>
         <Text
           ml='4'

pkg/interface/src/views/apps/launch/components/Groups.tsx

@@ -1,14 +1,14 @@
-import React, {useRef} from "react";
+import React, { useRef } from 'react';
-import { Box, Text, Col } from "@tlon/indigo-react";
+import { Box, Text, Col } from '@tlon/indigo-react';
-import f from "lodash/fp";
+import f from 'lodash/fp';
-import _ from "lodash";
+import _ from 'lodash';
 
-import { Associations, Association, Unreads, UnreadStats } from "~/types";
+import { Associations, Association, Unreads, UnreadStats } from '@urbit/api';
-import { alphabeticalOrder } from "~/logic/lib/util";
+import { alphabeticalOrder } from '~/logic/lib/util';
-import { getUnreadCount, getNotificationCount } from "~/logic/lib/hark";
+import { getUnreadCount, getNotificationCount } from '~/logic/lib/hark';
-import Tile from "../components/tiles/tile";
+import Tile from '../components/tiles/tile';
-import { useTutorialModal } from "~/views/components/useTutorialModal";
+import { useTutorialModal } from '~/views/components/useTutorialModal';
-import {TUTORIAL_HOST, TUTORIAL_GROUP} from "~/logic/lib/tutorialModal";
+import { TUTORIAL_HOST, TUTORIAL_GROUP } from '~/logic/lib/tutorialModal';
 
 interface GroupsProps {
   associations: Associations;
@@ -17,7 +17,6 @@ interface GroupsProps {
 const sortGroupsAlph = (a: Association, b: Association) =>
   alphabeticalOrder(a.metadata.title, b.metadata.title);
 
-
 const getGraphUnreads = (associations: Associations, unreads: Unreads) => (path: string) =>
   f.flow(
     f.pickBy((a: Association) => a.group === path),
@@ -34,12 +33,11 @@ const getGraphNotifications = (associations: Associations, unreads: Unreads) =>
     f.reduce(f.add, 0)
   )(associations.graph);
 
-
 export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
   const { associations, unreads, inbox, ...boxProps } = props;
 
   const groups = Object.values(associations?.groups || {})
-    .filter((e) => e?.group in props.groups)
+    .filter(e => e?.group in props.groups)
     .sort(sortGroupsAlph);
   const graphUnreads = getGraphUnreads(associations || {}, unreads);
   const graphNotifications = getGraphNotifications(associations || {}, unreads);
@@ -48,7 +46,7 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
     <>
       {groups.map((group, index) => {
         const path = group?.group;
-        const unreadCount = graphUnreads(path)
+        const unreadCount = graphUnreads(path);
         const notCount = graphNotifications(path);
 
         return (

pkg/interface/src/views/apps/launch/components/ModalButton.tsx

@@ -1,38 +1,33 @@
-import React  from "react"
+import React from 'react';
-import { Box, Button, Icon, Text } from "@tlon/indigo-react"
+import { Box, Button, Icon, Text } from '@tlon/indigo-react';
-import {useModal} from "~/logic/lib/useModal";
+import { useModal } from '~/logic/lib/useModal';
 
 const ModalButton = (props) => {
-  const {
+  const { children, icon, text, bg, color, ...rest } = props;
-    children,
-    icon,
-    text,
-    bg,
-    color,
-    ...rest
-  } = props;
   const { modal, showModal } = useModal({ modal: props.children });
 
-
   return (
     <>
       {modal}
       <Button
         onClick={showModal}
-        display="flex"
+        display='flex'
-        alignItems="center"
+        alignItems='center'
-        cursor="pointer"
+        cursor='pointer'
         bg={bg}
         p={2}
         borderRadius={2}
-        boxShadow="0 0 0px 1px inset"
+        boxShadow='0 0 0px 1px inset'
-        color="scales.black20"
+        color='scales.black20'
         {...rest}
       >
-        <Icon icon={props.icon} mr={2} color={color}></Icon><Text color={color}>{props.text}</Text>
+        <Icon icon={props.icon} mr={2} color={color}></Icon>
+        <Text color={color} whiteSpace='nowrap'>
+          {props.text}
+        </Text>
       </Button>
     </>
   );
-}
+};
 
 export default ModalButton;

pkg/interface/src/views/apps/links/LinkResource.tsx

@@ -1,19 +1,18 @@
-import React, { useEffect, useCallback } from "react";
+import React, { useEffect } from 'react';
-import { Box, Row, Col, Center, LoadingSpinner, Text } from "@tlon/indigo-react";
+import { Box, Col, Center, LoadingSpinner, Text } from '@tlon/indigo-react';
-import { Switch, Route, Link } from "react-router-dom";
+import { Switch, Route, Link } from 'react-router-dom';
 import bigInt from 'big-integer';
 
-import GlobalApi from "~/logic/api/global";
+import GlobalApi from '~/logic/api/global';
-import { StoreState } from "~/logic/store/type";
+import { StoreState } from '~/logic/store/type';
-import { uxToHex } from '~/logic/lib/util';
+import { RouteComponentProps } from 'react-router-dom';
-import { RouteComponentProps } from "react-router-dom";
 
-import { LinkItem } from "./components/LinkItem";
+import { LinkItem } from './components/LinkItem';
-import { LinkPreview } from "./components/link-preview";
+import { LinkWindow } from './LinkWindow';
-import { LinkWindow } from "./LinkWindow";
+import { Comments } from '~/views/components/Comments';
-import { Comments } from "~/views/components/Comments";
 
-import "./css/custom.css";
+import './css/custom.css';
+import { Association } from '@urbit/api/metadata';
 
 const emptyMeasure = () => {};
 
@@ -38,11 +37,11 @@ export function LinkResource(props: LinkResourceProps) {
     history
   } = props;
 
-  const rid = association.resource; 
+  const rid = association.resource;
 
   const relativePath = (p: string) => `${baseUrl}/resource/link${rid}${p}`;
 
-  const [, , ship, name] = rid.split("/");
+  const [, , ship, name] = rid.split('/');
   const resourcePath = `${ship.slice(1)}/${name}`;
   const resource = associations.graph[rid]
     ? associations.graph[rid]
@@ -58,7 +57,7 @@ export function LinkResource(props: LinkResourceProps) {
 
   const resourceUrl = `${baseUrl}/resource/link${rid}`;
   if (!graph) {
-    return <Center width='100%' height='100%'><LoadingSpinner/></Center>;
+    return <Center width='100%' height='100%'><LoadingSpinner /></Center>;
   }
 
   return (
@@ -66,7 +65,7 @@ export function LinkResource(props: LinkResourceProps) {
       <Switch>
         <Route
           exact
-          path={relativePath("")}
+          path={relativePath('')}
           render={(props) => {
             return (
               <LinkWindow
@@ -86,7 +85,7 @@ export function LinkResource(props: LinkResourceProps) {
           }}
         />
         <Route
-          path={relativePath("/:index(\\d+)/:commentId?")}
+          path={relativePath('/:index(\\d+)/:commentId?')}
           render={(props) => {
             const index = bigInt(props.match.params.index);
             const editCommentId = props.match.params.commentId || null;
@@ -95,7 +94,7 @@ export function LinkResource(props: LinkResourceProps) {
               return <div>Malformed URL</div>;
             }
 
-            const node = !!graph ? graph.get(index) : null;
+            const node = graph ? graph.get(index) : null;
 
             if (!node) {
               return <Box>Not found</Box>;
@@ -106,7 +105,7 @@ export function LinkResource(props: LinkResourceProps) {
             return (
               <Col alignItems="center" overflowY="auto" width="100%">
               <Col width="100%" p={3} maxWidth="768px">
-                <Link to={resourceUrl}><Text px={3} bold>{"<- Back"}</Text></Link>
+                <Link to={resourceUrl}><Text px={3} bold>{'<- Back'}</Text></Link>
                 <LinkItem
                   contacts={contacts}
                   key={node.post.index}

pkg/interface/src/views/apps/links/LinkWindow.tsx

@@ -1,21 +1,21 @@
-import React, { useRef, useCallback, useEffect, useMemo } from "react";
+import React, { useRef, useCallback, useEffect, useMemo } from 'react';
-import { Col } from "@tlon/indigo-react";
+
+import { Col, Text } from '@tlon/indigo-react';
 import bigInt from 'big-integer';
 import {
   Association,
   Graph,
-  Contacts,
   Unreads,
-  LocalUpdateRemoteContentPolicy,
   Group,
   Rolodex,
-  S3State,
+} from '@urbit/api';
-} from "~/types";
+
-import GlobalApi from "~/logic/api/global";
+import GlobalApi from '~/logic/api/global';
-import VirtualScroller from "~/views/components/VirtualScroller";
+import VirtualScroller from '~/views/components/VirtualScroller';
-import { LinkItem } from "./components/LinkItem";
+import { LinkItem } from './components/LinkItem';
-import LinkSubmit from "./components/LinkSubmit";
+import LinkSubmit from './components/LinkSubmit';
-import {isWriter} from "~/logic/lib/group";
+import { isWriter } from '~/logic/lib/group';
+import { S3State } from '~/types/s3-update';
 
 interface LinkWindowProps {
   association: Association;
@@ -33,8 +33,6 @@ interface LinkWindowProps {
 }
 export function LinkWindow(props: LinkWindowProps) {
   const { graph, api, association } = props;
-  const loadedNewest = useRef(true);
-  const loadedOldest = useRef(false);
   const virtualList = useRef<VirtualScroller>();
   const fetchLinks = useCallback(
     async (newer: boolean) => {
@@ -44,18 +42,19 @@ export function LinkWindow(props: LinkWindowProps) {
 
   useEffect(() => {
     const list = virtualList?.current;
-    if(!list) return;
+    if(!list)
+return;
     list.calculateVisibleItems();
   }, [graph.size]);
 
   const first = graph.peekLargest()?.[0];
   const [,,ship, name] = association.resource.split('/');
-  const canWrite = isWriter(props.group, association.resource)
+  const canWrite = isWriter(props.group, association.resource);
 
     const style = useMemo(() =>
     ({
-      height: "100%",
+      height: '100%',
-      width: "100%",
+      width: '100%',
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center'
@@ -76,7 +75,7 @@ export function LinkWindow(props: LinkWindowProps) {
 
   return (
     <VirtualScroller
-      ref={(l) => (virtualList.current = l ?? undefined)}
+      ref={l => (virtualList.current = l ?? undefined)}
       origin="top"
       style={style}
       onStartReached={() => {}}
@@ -86,11 +85,12 @@ export function LinkWindow(props: LinkWindowProps) {
       renderer={({ index, measure, scrollWindow }) => {
         const node = graph.get(index);
         const post = node?.post;
-        if (!node || !post) return null;
+        if (!node || !post)
+return null;
         const linkProps = {
           ...props,
           node,
-          measure,
+          measure
         };
         if(canWrite && index.eq(first ?? bigInt.zero)) {
           return (
@@ -100,7 +100,7 @@ export function LinkWindow(props: LinkWindowProps) {
             </Col>
               <LinkItem {...linkProps} />
             </React.Fragment>
-          )
+          );
         }
         return <LinkItem key={index.toString()} {...linkProps} />;
       }}

pkg/interface/src/views/apps/links/components/LinkItem.tsx

@@ -1,12 +1,12 @@
-import React, { useState, useEffect, useRef, useCallback }  from 'react';
+import React, { useState, useEffect, useRef, useCallback, ReactElement }  from 'react';
 import { Link } from 'react-router-dom';
+
 import { Row, Col, Anchor, Box, Text, Icon, Action } from '@tlon/indigo-react';
+import { GraphNode, Group, Rolodex, Unreads } from '@urbit/api';
 
 import { writeText } from '~/logic/lib/util';
 import Author from '~/views/components/Author';
-
 import { roleForShip } from '~/logic/lib/group';
-import { Contacts, GraphNode, Group, Rolodex, Unreads } from '~/types';
 import GlobalApi from '~/logic/api/global';
 import { Dropdown } from '~/views/components/Dropdown';
 import RemoteContent from '~/views/components/RemoteContent';
@@ -22,7 +22,7 @@ interface LinkItemProps {
   measure: (el: any) => void;
 }
 
-export const LinkItem = (props: LinkItemProps) => {
+export const LinkItem = (props: LinkItemProps): ReactElement => {
   const {
     node,
     resource,
@@ -46,7 +46,7 @@ export const LinkItem = (props: LinkItemProps) => {
       // FF will only update on next tick
       setTimeout(() => {
         console.log(remoteRef.current);
-        if(document.activeElement instanceof HTMLIFrameElement 
+        if(document.activeElement instanceof HTMLIFrameElement
           && remoteRef?.current?.containerRef?.contains(document.activeElement)) {
           markRead();
         }
@@ -55,8 +55,7 @@ export const LinkItem = (props: LinkItemProps) => {
     window.addEventListener('blur', onBlur);
     return () => {
       window.removeEventListener('blur', onBlur);
-    }
+    };
-
   }, [markRead]);
 
   const URLparser = new RegExp(
@@ -94,11 +93,9 @@ export const LinkItem = (props: LinkItemProps) => {
   const commColor = (props.unreads.graph?.[appPath]?.[`/${index}`]?.unreads ?? 0) > 0 ? 'blue' : 'gray';
   const isUnread = props.unreads.graph?.[appPath]?.['/']?.unreads?.has(node.post.index);
 
-
-
   const onMeasure = useCallback(() => {
     ref.current && measure(ref.current);
-  }, [ref.current, measure])
+  }, [ref.current, measure]);
 
   useEffect(() => {
     onMeasure();
@@ -119,8 +116,10 @@ export const LinkItem = (props: LinkItemProps) => {
         overflow="hidden"
         onClick={markRead}
       >
+        <Text p={2}>{contents[0].text}</Text>
         <RemoteContent
-          ref={r => { remoteRef.current = r}}
+          ref={r => { remoteRef.current = r }}
+          renderUrl={false}
           url={contents[1].url}
           text={contents[0].text}
           unfold={true}
@@ -143,7 +142,8 @@ export const LinkItem = (props: LinkItemProps) => {
             alignSelf: 'center',
             style: { textOverflow: 'ellipsis', whiteSpace: 'pre', width: '100%' },
             p: 2
-          }} />
+          }}
+        />
         <Text color="gray" p={2} flexShrink={0}>
           <Anchor  target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }} href={contents[1].url}>
             <Box display='flex'>
@@ -189,7 +189,7 @@ export const LinkItem = (props: LinkItemProps) => {
             }
           </Col>
         }
-        >
+      >
         <Icon ml="2" display="block" icon="Ellipsis" color="gray" />
       </Dropdown>
 

pkg/interface/src/views/apps/links/components/LinkSubmit.tsx

@@ -1,22 +1,22 @@
-import { BaseInput, Box, Button, LoadingSpinner, Text } from "@tlon/indigo-react";
+import { BaseInput, Box, Button, LoadingSpinner, Text } from '@tlon/indigo-react';
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState } from 'react';
-import GlobalApi from "~/logic/api/global";
+import GlobalApi from '~/logic/api/global';
-import { useFileDrag } from "~/logic/lib/useDrag";
+import { useFileDrag } from '~/logic/lib/useDrag';
-import useS3 from "~/logic/lib/useS3";
+import useS3 from '~/logic/lib/useS3';
-import { S3State } from "~/types";
+import { S3State } from '@urbit/api';
-import SubmitDragger from "~/views/components/SubmitDragger";
+import SubmitDragger from '~/views/components/SubmitDragger';
-import { createPost } from "~/logic/api/graph";
+import { createPost } from '~/logic/api/graph';
-import { hasProvider } from "oembed-parser";
+import { hasProvider } from 'oembed-parser';
 
 interface LinkSubmitProps {
   api: GlobalApi;
   s3: S3State;
   name: string;
   ship: string;
-};
+}
 
 const LinkSubmit = (props: LinkSubmitProps) => {
-  let { canUpload, uploadDefault, uploading, promptUpload } = useS3(props.s3);
+  const { canUpload, uploadDefault, uploading, promptUpload } = useS3(props.s3);
 
   const [submitFocused, setSubmitFocused] = useState(false);
   const [urlFocused, setUrlFocused] = useState(false);
@@ -100,7 +100,7 @@ const LinkSubmit = (props: LinkSubmitProps) => {
 
   const onLinkChange = (linkValue: string) => {
     setLinkValueHook(linkValue);
-    const link = validateLink(linkValue)
+    const link = validateLink(linkValue);
     setLinkValid(link);
   };
 
@@ -133,7 +133,7 @@ const LinkSubmit = (props: LinkSubmitProps) => {
     px={2}
     pt={2}
     style={{ pointerEvents: 'none' }}
-  >{canUpload
+                      >{canUpload
     ? <>
       Drop or{' '}
       <Text
@@ -169,7 +169,7 @@ const LinkSubmit = (props: LinkSubmitProps) => {
           zIndex={9}
           alignItems="center"
           justifyContent="center"
-        >
+                      >
           <LoadingSpinner />
         </Box>}
         {dragging && <SubmitDragger />}
@@ -223,4 +223,4 @@ const LinkSubmit = (props: LinkSubmitProps) => {
   );
 };
 
-export default LinkSubmit;
+export default LinkSubmit;

pkg/interface/src/views/apps/notifications/graph.tsx

@@ -4,11 +4,9 @@ import { Row, Box, Col, Text, Anchor, Icon, Action } from '@tlon/indigo-react';
 import { Link, useHistory } from 'react-router-dom';
 import _ from 'lodash';
 import {
-  Post,
   GraphNotifIndex,
   GraphNotificationContents,
   Associations,
-  Content,
   Rolodex,
   Groups
 } from '~/types';
@@ -34,11 +32,11 @@ const FilterBox = styled(Box)`
   background: linear-gradient(
     to bottom,
     transparent,
-    ${(p) => p.theme.colors.white}
+    ${p => p.theme.colors.white}
   );
 `;
 
-function describeNotification(description: string, plural: boolean) {
+function describeNotification(description: string, plural: boolean): string {
   switch (description) {
     case 'link':
       return `added ${pluralize('new link', plural)} to`;
@@ -190,9 +188,7 @@ const GraphNode = ({
   read,
   onRead,
   showContact = false,
-  remoteContentPolicy
+}): ReactElement => {
-}) => {
-  const { contents } = post;
   author = deSig(author);
   const history = useHistory();
 

pkg/interface/src/views/apps/notifications/group.tsx

@@ -1,44 +1,34 @@
-import React, { ReactNode, useCallback } from "react";
+import React, { ReactElement, useCallback } from 'react';
-import moment from "moment";
+import _ from 'lodash';
-import { Row, Box, Col, Text, Anchor, Icon, Action } from "@tlon/indigo-react";
+
-import _ from "lodash";
+import { Col } from '@tlon/indigo-react';
-import { NotificationProps } from "./types";
 import {
-  Post,
-  GraphNotifIndex,
-  GraphNotificationContents,
   Associations,
-  Content,
-  IndexedNotification,
   GroupNotificationContents,
   GroupNotifIndex,
   GroupUpdate,
-  Rolodex,
+  Rolodex
-} from "~/types";
+} from '@urbit/api';
-import { Header } from "./header";
-import { cite, deSig } from "~/logic/lib/util";
-import { Sigil } from "~/logic/lib/sigil";
-import RichText from "~/views/components/RichText";
-import GlobalApi from "~/logic/api/global";
-import { StatelessAsyncAction } from "~/views/components/StatelessAsyncAction";
 
+import { Header } from './header';
+import GlobalApi from '~/logic/api/global';
 
 function describeNotification(description: string, plural: boolean) {
   switch (description) {
-    case "add-members":
+    case 'add-members':
-      return "joined";
+      return 'joined';
-    case "remove-members":
+    case 'remove-members':
-      return "left";
+      return 'left';
     default:
       return description;
   }
 }
 
-function getGroupUpdateParticipants(update: GroupUpdate) {
+function getGroupUpdateParticipants(update: GroupUpdate): string[] {
-  if ("addMembers" in update) {
+  if ('addMembers' in update) {
     return update.addMembers.ships;
   }
-  if ("removeMembers" in update) {
+  if ('removeMembers' in update) {
     return update.removeMembers.ships;
   }
   return [];
@@ -56,7 +46,7 @@ interface GroupNotificationProps {
   api: GlobalApi;
 }
 
-export function GroupNotification(props: GroupNotificationProps) {
+export function GroupNotification(props: GroupNotificationProps): ReactElement {
   const { contents, index, read, time, api, timebox, associations } = props;
 
   const authors = _.flatten(_.map(contents, getGroupUpdateParticipants));
@@ -68,7 +58,7 @@ export function GroupNotification(props: GroupNotificationProps) {
     if (props.archived) {
       return;
     }
-    const func = read ? "unread" : "read";
+    const func = read ? 'unread' : 'read';
     return api.hark[func](timebox, { group: index });
   }, [api, timebox, index, read]);
 

pkg/interface/src/views/apps/notifications/header.tsx

@@ -1,17 +1,20 @@
-import React from "react";
+import React, { ReactElement } from 'react';
-import { Text as NormalText, Row, Icon, Rule, Box } from "@tlon/indigo-react";
+import f from 'lodash/fp';
-import f from "lodash/fp";
+import _ from 'lodash';
-import _ from "lodash";
+import moment from 'moment';
-import moment from "moment";
+
-import { PropFunc } from "~/types/util";
+import { Text as NormalText, Row, Icon, Rule } from '@tlon/indigo-react';
-import { getContactDetails, useShowNickname } from "~/logic/lib/util";
+import { Associations, Contact, Contacts, Rolodex } from '@urbit/api';
-import { Associations, Contact, Contacts, Rolodex } from "~/types";
+
+import { PropFunc } from '~/types/util';
+import { useShowNickname } from '~/logic/lib/util';
+import Timestamp from '~/views/components/Timestamp';
 
 const Text = (props: PropFunc<typeof Text>) => (
   <NormalText fontWeight="500" {...props} />
 );
 
-function Author(props: { patp: string; contacts: Contacts; last?: boolean }) {
+function Author(props: { patp: string; contacts: Contacts; last?: boolean }): ReactElement {
   const contact: Contact | undefined = props.contacts?.[props.patp];
 
   const showNickname = useShowNickname(contact);
@@ -20,7 +23,7 @@ function Author(props: { patp: string; contacts: Contacts; last?: boolean }) {
   return (
     <Text mono={!showNickname}>
       {name}
-      {!props.last && ", "}
+      {!props.last && ', '}
     </Text>
   );
 }
@@ -36,7 +39,7 @@ export function Header(props: {
   time: number;
   read: boolean;
   associations: Associations;
-} & PropFunc<typeof Row> ) {
+} & PropFunc<typeof Row> ): ReactElement {
   const { description, channel, group, moduleIcon, read } = props;
   const contacts = props.contacts[group] || {};
 
@@ -50,17 +53,17 @@ export function Header(props: {
       const last = lent - 1 === parseInt(idx, 10);
       return <Author key={idx} contacts={contacts} patp={p} last={last} />;
     }),
-    (auths) => (
+    auths => (
       <React.Fragment>
         {auths}
 
         {authors.length > 3 &&
-          ` and ${authors.length - 3} other${authors.length === 4 ? "" : "s"}`}
+          ` and ${authors.length - 3} other${authors.length === 4 ? '' : 's'}`}
       </React.Fragment>
     )
   )(authors);
 
-  const time = moment(props.time).format("HH:mm");
+  const time = moment(props.time).format('HH:mm');
   const groupTitle =
     props.associations.groups?.[props.group]?.metadata?.title;
 
@@ -84,8 +87,8 @@ export function Header(props: {
         {authorDesc}
       </Text>
       <Text mr="1">{description}</Text>
-      {!!moduleIcon && <Icon icon={moduleIcon as any} mr={1} />}
+      {Boolean(moduleIcon) && <Icon icon={moduleIcon as any} mr={1} />}
-      {!!channel && <Text fontWeight="500" mr={1}>{channelTitle}</Text>}
+      {Boolean(channel) && <Text fontWeight="500" mr={1}>{channelTitle}</Text>}
       <Rule vertical height="12px" mr={1} />
       {groupTitle &&
          <>
@@ -93,9 +96,7 @@ export function Header(props: {
           <Rule vertical height="12px" mr={1} />
         </>
       }
-      <Text fontWeight="regular" color="lightGray">
+      <Timestamp stamp={moment(props.time)} color="lightGray" date={false} />
-        {time}
-      </Text>
     </Row>
   );
 }

pkg/interface/src/views/apps/notifications/inbox.tsx

@@ -1,22 +1,28 @@
-import React, { useEffect, useCallback, useRef, useState } from "react";
+import React, { useEffect, useCallback, useRef } from 'react';
-import f from "lodash/fp";
+import f from 'lodash/fp';
-import _ from "lodash";
+import _ from 'lodash';
-import { Icon, Col, Center, Row, Box, Text, Anchor, Rule, LoadingSpinner } from "@tlon/indigo-react";
+import moment from 'moment';
-import moment from "moment";
+import { BigInteger } from 'big-integer';
-import { Notifications, Rolodex, Timebox, IndexedNotification, Groups, joinProgress, JoinRequests, GroupNotificationsConfig, NotificationGraphConfig } from "~/types";
+
-import { MOMENT_CALENDAR_DATE, daToUnix, resourceAsPath } from "~/logic/lib/util";
+import { Col, Center, Box, Text, LoadingSpinner } from '@tlon/indigo-react';
-import { BigInteger } from "big-integer";
+import {
-import GlobalApi from "~/logic/api/global";
+  Associations,
-import { Notification } from "./notification";
+  Notifications,
-import { Associations } from "~/types";
+  Rolodex,
-import { InviteItem } from '~/views/components/Invite';
+  Timebox,
-import { useWaitForProps } from "~/logic/lib/useWaitForProps";
+  IndexedNotification,
-import { useHistory } from "react-router-dom";
+  Groups,
-import {useModal} from "~/logic/lib/useModal";
+  JoinRequests,
-import {JoinGroup} from "~/views/landscape/components/JoinGroup";
+  GroupNotificationsConfig,
-import {JoiningStatus} from "./joining";
+  NotificationGraphConfig,
-import {Invites} from "./invites";
+  Invites as InviteType
-import {useLazyScroll} from "~/logic/lib/useLazyScroll";
+} from '@urbit/api';
+
+import { MOMENT_CALENDAR_DATE, daToUnix } from '~/logic/lib/util';
+import GlobalApi from '~/logic/api/global';
+import { Notification } from './notification';
+import { Invites } from './invites';
+import { useLazyScroll } from '~/logic/lib/useLazyScroll';
 
 type DatedTimebox = [BigInteger, Timebox];
 
@@ -25,12 +31,12 @@ function filterNotification(associations: Associations, groups: string[]) {
     return () => true;
   }
   return (n: IndexedNotification) => {
-    if ("graph" in n.index) {
+    if ('graph' in n.index) {
       const { group } = n.index.graph;
-      return groups.findIndex((g) => group === g) !== -1;
+      return groups.findIndex(g => group === g) !== -1;
-    } else if ("group" in n.index) {
+    } else if ('group' in n.index) {
       const { group } = n.index.group;
-      return groups.findIndex((g) => group === g) !== -1;
+      return groups.findIndex(g => group === g) !== -1;
     }
     return true;
   };
@@ -46,7 +52,7 @@ export default function Inbox(props: {
   associations: Associations;
   contacts: Rolodex;
   filter: string[];
-  invites: any;
+  invites: InviteType;
   pendingJoin: JoinRequests;
   notificationsGroupConfig: GroupNotificationsConfig;
   notificationsGraphConfig: NotificationGraphConfig;
@@ -70,30 +76,30 @@ export default function Inbox(props: {
   const calendar = {
     ...MOMENT_CALENDAR_DATE, sameDay: function (now) {
       if (this.subtract(6, 'hours').isBefore(now)) {
-        return "[Earlier Today]";
+        return '[Earlier Today]';
       } else {
         return MOMENT_CALENDAR_DATE.sameDay;
       }
     }
   };
 
-  let notificationsByDay = f.flow(
+  const notificationsByDay = f.flow(
     f.map<DatedTimebox, DatedTimebox>(([date, nots]) => [
       date,
-      nots.filter(filterNotification(associations, props.filter)),
+      nots.filter(filterNotification(associations, props.filter))
     ]),
     f.groupBy<DatedTimebox>(([d]) => {
       const date = moment(daToUnix(d));
       if (moment().subtract(6, 'hours').isBefore(date)) {
         return 'latest';
       } else {
-        return date.format("YYYYMMDD");
+        return date.format('YYYYMMDD');
       }
-    }),
+    })
   )(notifications);
 
   const notificationsByDayMap = new Map<string, DatedTimebox[]>(
-    Object.keys(notificationsByDay).map(timebox => {
+    Object.keys(notificationsByDay).map((timebox) => {
       return [timebox, notificationsByDay[timebox]];
     })
   );
@@ -105,13 +111,12 @@ export default function Inbox(props: {
   }, [api]);
 
   const { isDone, isLoading } = useLazyScroll(
-    scrollRef, 
+    scrollRef,
     0.2,
     _.flatten(notifications).length,
     loadMore
   );
 
-
   return (
     <Col ref={scrollRef} position="relative" height="100%" overflowY="auto">
       <Invites groups={props.groups} pendingJoin={props.pendingJoin} invites={invites} api={api} associations={associations} />
@@ -123,7 +128,7 @@ export default function Inbox(props: {
             label={day === 'latest' ? 'Today' : moment(day).calendar(null, calendar)}
             timeboxes={timeboxes}
             contacts={props.contacts}
-            archive={!!props.showArchive}
+            archive={Boolean(props.showArchive)}
             associations={props.associations}
             api={api}
             groups={props.groups}
@@ -142,7 +147,7 @@ export default function Inbox(props: {
           <LoadingSpinner />
         </Center>
       )}
-   
+
     </Col>
   );
 }
@@ -167,9 +172,8 @@ function DaySection({
   associations,
   api,
   groupConfig,
-  graphConfig,
+  graphConfig
 }) {
-
   const lent = timeboxes.map(([,nots]) => nots.length).reduce(f.add, 0);
   if (lent === 0 || timeboxes.length === 0) {
     return null;

pkg/interface/src/views/apps/notifications/invites.tsx

@@ -1,15 +1,12 @@
-import React, { useCallback, useState } from "react";
+import React, { ReactElement } from 'react';
 import _ from 'lodash';
-import { Box, Row, Col } from "@tlon/indigo-react";
+
-import GlobalApi from "~/logic/api/global";
+import { Col } from '@tlon/indigo-react';
-import { Invites as IInvites, Associations, Invite, JoinRequests, Groups, Contacts, AppInvites, JoinProgress } from "~/types";
+import { Invites as IInvites, Associations, Invite, JoinRequests, Groups, Contacts, AppInvites, JoinProgress } from '@urbit/api';
-import { resourceAsPath, alphabeticalOrder } from "~/logic/lib/util";
+
-import { useHistory } from "react-router-dom";
+import GlobalApi from '~/logic/api/global';
-import { useWaitForProps } from "~/logic/lib/useWaitForProps";
+import { resourceAsPath, alphabeticalOrder } from '~/logic/lib/util';
-import InviteItem from "~/views/components/Invite";
+import InviteItem from '~/views/components/Invite';
-import {JoiningStatus} from "./joining";
-import {useModal} from "~/logic/lib/useModal";
-import {JoinGroup} from "~/views/landscape/components/JoinGroup";
 
 interface InvitesProps {
   api: GlobalApi;
@@ -26,50 +23,18 @@ interface InviteRef {
   invite: Invite;
 }
 
-export function Invites(props: InvitesProps) {
+export function Invites(props: InvitesProps): ReactElement {
   const { api, invites, pendingJoin } = props;
-  const [selected, setSelected] = useState<[string, string, Invite] | undefined>()
-
-  const acceptInvite = (
-    app: string,
-    uid: string,
-    invite: Invite
-  ) => async () => {
-    setSelected([app, uid, invite]);
-    showModal();
-  };
-
-  const declineInvite = useCallback(
-    (app: string, uid: string) => () => api.invite.decline(app, uid),
-    [api]
-  );
-
-  const { modal, showModal } = useModal({ modal: () => {
-    const [app, uid, invite] = selected!;
-    const autojoin = `~${invite.resource.ship}/${invite.resource.name}`;
-    return (
-    <JoinGroup
-      groups={props.groups}
-      associations={props.associations}
-      api={api}
-      autojoin={autojoin}
-      inviteUid={uid}
-      inviteApp={app}
-    />
-    )}});
 
   const inviteArr: InviteRef[] = _.reduce(invites, (acc: InviteRef[], val: AppInvites, app: string) => {
     const appInvites = _.reduce(val, (invs: InviteRef[], invite: Invite, uid: string) => {
       return [...invs, { invite, uid, app }];
-
     }, []);
     return [...acc, ...appInvites];
   }, []);
 
-  const invitesAndStatus: { [rid: string]: JoinProgress | InviteRef } = 
+  const invitesAndStatus: { [rid: string]: JoinProgress | InviteRef } =
-    {..._.keyBy(inviteArr, ({ invite }) => resourceAsPath(invite.resource)), ...props.pendingJoin };
+    { ..._.keyBy(inviteArr, ({ invite }) => resourceAsPath(invite.resource)), ...props.pendingJoin };
-
-
 
   return (
     <Col
@@ -83,7 +48,7 @@ export function Invites(props: InvitesProps) {
      { Object
          .keys(invitesAndStatus)
          .sort(alphabeticalOrder)
-         .map(resource => {
+         .map((resource) => {
            const inviteOrStatus = invitesAndStatus[resource];
           if(typeof inviteOrStatus === 'string') {
            return (
@@ -93,10 +58,10 @@ export function Invites(props: InvitesProps) {
                groups={props.groups}
                associations={props.associations}
                resource={resource}
-               pendingJoin={pendingJoin} 
+               pendingJoin={pendingJoin}
-               api={api} />
+               api={api}
-          )
+             />
-
+          );
         } else {
           const { app, uid, invite } = inviteOrStatus;
           console.log(inviteOrStatus);
@@ -107,13 +72,13 @@ export function Invites(props: InvitesProps) {
               invite={invite}
               app={app}
               uid={uid}
-              pendingJoin={pendingJoin} 
+              pendingJoin={pendingJoin}
               resource={resource}
               contacts={props.contacts}
               groups={props.groups}
               associations={props.associations}
             />
-            )
+            );
         }
      })}
     </Col>

pkg/interface/src/views/apps/notifications/joining.tsx

@@ -1,35 +1,32 @@
-import React, { useState, useEffect } from "react";
+import React from 'react';
-import { Col, Row, Text, SegmentedProgressBar, Box } from "@tlon/indigo-react";
+import { Row, Text, SegmentedProgressBar, Box } from '@tlon/indigo-react';
-import GlobalApi from "~/logic/api/global";
 import {
   JoinProgress,
   joinProgress,
-  MetadataUpdatePreview,
+  joinError
-  joinError,
+} from '@urbit/api';
-} from "~/types";
-import { clamp } from "~/logic/lib/util";
 
 interface JoiningStatusProps {
   status: JoinProgress;
 }
 
 const description: string[] = [
-  "Attempting to contact host",
+  'Attempting to contact host',
-  "Retrieving data",
+  'Retrieving data',
-  "Finished join",
+  'Finished join',
-  "Unable to join, you do not have the correct permissions",
+  'Unable to join, you do not have the correct permissions',
-  "Internal error, please file an issue",
+  'Internal error, please file an issue'
 ];
 
 export function JoiningStatus(props: JoiningStatusProps) {
   const { status } = props;
 
   const current = joinProgress.indexOf(status);
-  const desc = description?.[current] || "";
+  const desc = description?.[current] || '';
   const isError = joinError.indexOf(status as any) !== -1;
   return (
     <Row
-      display={["flex-column", "flex"]}
+      display={['flex-column', 'flex']}
       alignItems="center"
       px="4"
       gapX="4"
@@ -37,7 +34,7 @@ export function JoiningStatus(props: JoiningStatusProps) {
       <Box flexGrow={1} maxWidth="400px">
         <SegmentedProgressBar current={current + 1} segments={3} />
       </Box>
-      <Text display="block" flexShrink={0} color={isError ? "red" : "gray"}>
+      <Text display="block" flexShrink={0} color={isError ? 'red' : 'gray'}>
         {desc}
       </Text>
     </Row>

pkg/interface/src/views/apps/notifications/metadata.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React from 'react';
-import { Box } from "@tlon/indigo-react";
+import { Box } from '@tlon/indigo-react';
 
-import { MetadataBody, NotificationProps } from "./types";
+import { MetadataBody, NotificationProps } from './types';
-import { Header } from "./header";
+import { Header } from './header';
 
 function getInvolvedUsers(body: MetadataBody) {
   return [];
@@ -10,22 +10,22 @@ function getInvolvedUsers(body: MetadataBody) {
 
 function getDescription(body: MetadataBody) {
   const b = body.metadata;
-  if ("new" in b) {
+  if ('new' in b) {
-    return "created";
+    return 'created';
-  } else if ("changedTitle" in b) {
+  } else if ('changedTitle' in b) {
-    return "changed the title to";
+    return 'changed the title to';
-  } else if ("changedDescription" in b) {
+  } else if ('changedDescription' in b) {
-    return "changed the description to";
+    return 'changed the description to';
-  } else if ("changedColor" in b) {
+  } else if ('changedColor' in b) {
-    return "changed the color to";
+    return 'changed the color to';
-  } else if ("deleted" in b) {
+  } else if ('deleted' in b) {
-    return "deleted";
+    return 'deleted';
   } else {
-    throw new Error("bad metadata frond");
+    throw new Error('bad metadata frond');
   }
 }
 
-export function MetadataNotification(props: NotificationProps<"metadata">) {
+export function MetadataNotification(props: NotificationProps<'metadata'>) {
   const { unread } = props;
   const description = getDescription(unread.unreads[0].body);