Merge pull request #184 from tloncorp/t/gear

gear: migrate from deprecated packages + use gear

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "landscape",
-  "version": "0.0.0",
+  "version": "1.11.0",
   "private": true,
   "engines": {
     "node": "^16.0.0"
@@ -18,6 +18,8 @@
     "tsc": "tsc --noEmit"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.348.0",
+    "@aws-sdk/s3-request-presigner": "^3.348.0",
     "@fingerprintjs/fingerprintjs": "^3.3.3",
     "@radix-ui/react-checkbox": "^0.1.5",
     "@radix-ui/react-dialog": "^1.0.2",
@@ -35,7 +37,7 @@
     "@tlon/sigil-js": "^1.4.4",
     "@tloncorp/mock-http-api": "^1.2.0",
     "@types/lodash": "^4.14.172",
-    "@urbit/api": "^2.2.0",
+    "@urbit/aura": "^1.0.0",
     "@urbit/http-api": "^2.4.5-debug",
     "big-integer": "^1.6.48",
     "browser-cookies": "^1.2.0",
@@ -59,9 +61,9 @@
     "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.3",
     "react-hook-form": "^7.38.0",
+    "react-image-size": "^2.0.2",
     "react-router-dom": "^5.2.0",
     "slugify": "^1.6.0",
-    "urbit-ob": "^5.0.1",
     "zustand": "^3.7.2"
   },
   "devDependencies": {

ui/src/components/AppInfo.tsx

@@ -1,4 +1,4 @@
-import { chadIsRunning, Pike, Treaty } from '@urbit/api';
+import { chadIsRunning, Pike, Treaty } from '@/gear';
 import clipboardCopy from 'clipboard-copy';
 import React, { FC, useCallback, useState } from 'react';
 import cn from 'classnames';

ui/src/components/Avatar.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
 import { sigil, reactRenderer } from '@tlon/sigil-js';
-import { deSig } from '@urbit/api';
+import { deSig } from '@urbit/aura';
 import { darken, lighten, parseToHsla } from 'color2k';
 import { useCurrentTheme } from '../state/local';
 import { normalizeUrbitColor } from '@/logic/utils';
 import { useContact } from '../state/contact';
-import { Contact } from '@/types/contact';
+import { Contact } from '@/gear';
 
 export type AvatarSizes = 'xs' | 'small' | 'nav' | 'default';
 

ui/src/components/DocketImage.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Docket } from '@urbit/api';
+import { Docket } from '@/gear';
 import cn from 'classnames';
 import { useTileColor } from '../tiles/useTileColor';
 

ui/src/components/PikeMeta.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Pike } from '@urbit/api';
+import { Pike } from '@/gear';
 
 import { Attribute } from './Attribute';
 

ui/src/components/ProviderLink.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import React from 'react';
 import { Link, LinkProps } from 'react-router-dom';
-import { Provider } from '@urbit/api';
+import { Provider } from '@/gear';
 import { ShipName } from './ShipName';
 import { Avatar, AvatarSizes } from './Avatar';
-import { Contact } from '@/types/contact';
+import { Contact } from '@/gear';
 
 export type ProviderLinkProps = Omit<LinkProps, 'to'> & {
   provider: { shipName: string } & Contact;

ui/src/components/ProviderList.tsx

@@ -1,10 +1,10 @@
 import React, { MouseEvent, useCallback } from 'react';
-import { Provider } from '@urbit/api';
+import { Provider } from '@/gear';
 import classNames from 'classnames';
 import { MatchItem } from '../nav/Nav';
 import { useRecentsStore } from '../nav/search/Home';
 import { ProviderLink, ProviderLinkProps } from './ProviderLink';
-import { Contact } from '@/types/contact';
+import { Contact } from '@/gear';
 
 export type ProviderListProps = {
   providers: ({ shipName: string } & Contact)[];

ui/src/components/ShipName.tsx

@@ -1,4 +1,4 @@
-import { cite } from '@urbit/api';
+import { cite } from '@urbit/aura';
 import React, { HTMLAttributes } from 'react';
 import { useCalm } from '../state/settings';
 import { useContact } from '../state/contact';

ui/src/components/TreatyMeta.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { daToDate, Treaty } from '@urbit/api';
+import { daToUnix, parseDa } from '@urbit/aura'
+import { Treaty } from '@/gear';
 
 import moment from 'moment';
 import { Attribute } from './Attribute';
@@ -15,7 +16,7 @@ export function TreatyMeta(props: { treaty: Treaty }) {
         {ship}/{desk}
       </Attribute>
       <Attribute title="Last Software Update" attr="case">
-        {moment(daToDate(cass.da)).format('YYYY.MM.DD')}
+        {moment(daToUnix(parseDa(cass.da))).format('YYYY.MM.DD')}
       </Attribute>
       {meta.map((d) => (
         <Attribute key={d} attr={d}>

ui/src/constants.ts

@@ -1,3 +1,8 @@
+export const storageVersion = parseInt(
+  import.meta.env.VITE_STORAGE_VERSION,
+  10
+);
+
 export const SECTIONS = {
   SELECTS: 'Tlon Selects',
   PALS: 'Powered by Pals',

ui/src/types/contact.ts → ui/src/gear/contacts/contact.ts

@@ -1,4 +1,4 @@
-import { Flag } from './hark';
+import { Flag } from "@/gear";
 
 export interface Contact {
   nickname: string;

ui/src/gear/contacts/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './lib';

ui/src/gear/contacts/lib.ts

@@ -0,0 +1,124 @@
+import { useCallback, useMemo } from 'react';
+import _ from 'lodash';
+import api from '@/api';
+import { BaseState, createState } from '@/state/base';
+import {
+  ContactAnon,
+  ContactEdit,
+  ContactEditField,
+  ContactHeed,
+  ContactNews,
+  ContactRolodex,
+} from '@/gear';
+import { Patp } from '@urbit/http-api';
+import { preSig } from '@urbit/aura'; 
+import produce from 'immer';
+
+export interface BaseContactState {
+  contacts: ContactRolodex;
+  nackedContacts: Set<Patp>;
+  edit: (fields: ContactEditField[]) => Promise<void>;
+  /** removes our profile */
+  anon: () => Promise<void>;
+  /** subscribes to profile updates */
+  heed: (ships: string[]) => Promise<void>;
+  fetchAll: () => Promise<void>;
+  start: () => void;
+  [ref: string]: unknown;
+}
+
+type ContactState = BaseContactState & BaseState<BaseContactState>;
+
+function contactAction<T>(data: T) {
+  return {
+    app: 'contacts',
+    mark: 'contact-action',
+    json: data,
+  };
+}
+
+const useContactState = createState<BaseContactState>(
+  'Contact',
+  (set, get) => ({
+    contacts: {},
+    nackedContacts: new Set(),
+    fetchAll: async () => {
+      const contacts = await api.scry<ContactRolodex>({
+        app: 'contacts',
+        path: '/all',
+      });
+
+      set(
+        produce((draft: BaseContactState) => {
+          draft.contacts = {
+            ...draft.contacts,
+            ...contacts,
+          };
+        })
+      );
+    },
+    edit: async (contactFields) => {
+      await api.poke<ContactEdit>(contactAction({ edit: contactFields }));
+    },
+    anon: async () => {
+      await api.poke<ContactAnon>(contactAction({ anon: null }));
+    },
+    heed: async (ships) => {
+      await api.poke<ContactHeed>(contactAction({ heed: ships }));
+    },
+    start: () => {
+      get().fetchAll();
+
+      api.subscribe({
+        app: 'contacts',
+        path: '/news',
+        event: (event: ContactNews) => {
+          set(
+            produce((draft: ContactState) => {
+              if (event.con) {
+                draft.contacts[event.who] = event.con;
+              } else {
+                delete draft.contacts[event.who];
+              }
+            })
+          );
+        },
+      });
+    },
+  }),
+  {
+    partialize: ({ contacts }) => ({ contacts }),
+  },
+  []
+);
+
+export const emptyContact = {
+  nickname: '',
+  bio: '',
+  status: '',
+  color: '0x0',
+  avatar: null,
+  cover: null,
+  groups: [] as string[],
+};
+
+const selContacts = (s: ContactState) => s.contacts;
+export function useContacts() {
+  return useContactState(selContacts);
+}
+
+export function useMemoizedContacts() {
+  return useMemo(() => useContactState.getState().contacts, []);
+}
+
+export function useContact(ship: string) {
+  return useContactState(
+    useCallback((s) => s.contacts[preSig(ship)] || emptyContact, [ship])
+  );
+}
+
+export function useOurContact() {
+  return useContact(window.our);
+}
+
+export default useContactState;

ui/src/gear/contacts/types.ts

@@ -0,0 +1,50 @@
+import { Flag } from "@/gear";
+
+export interface Contact {
+  nickname: string;
+  bio: string;
+  status: string;
+  color: string;
+  avatar: string | null;
+  cover: string | null;
+  groups: string[];
+}
+
+export interface ContactAddGroup {
+  'add-group': Flag;
+}
+
+export interface ContactDelGroup {
+  'del-group': Flag;
+}
+
+export type ContactEditField =
+  | Pick<Contact, 'nickname'>
+  | Pick<Contact, 'bio'>
+  | Pick<Contact, 'status'>
+  | Pick<Contact, 'color'>
+  | Pick<Contact, 'avatar'>
+  | Pick<Contact, 'cover'>
+  | ContactAddGroup
+  | ContactDelGroup;
+
+export type ContactsAction = ContactAnon | ContactEdit | ContactHeed;
+
+export interface ContactAnon {
+  anon: null;
+}
+
+export interface ContactEdit {
+  edit: ContactEditField[];
+}
+
+export interface ContactHeed {
+  heed: string[];
+}
+
+export type ContactRolodex = Record<string, Contact | null>;
+
+export interface ContactNews {
+  who: string;
+  con: Contact | null;
+}

ui/src/gear/docket/index.ts

@@ -0,0 +1,2 @@
+export * from './lib';
+export * from './types';

ui/src/gear/docket/lib.ts

@@ -0,0 +1,65 @@
+import { Poke, Scry } from '@urbit/http-api';
+import { Chad } from './types';
+
+export function chadIsRunning(chad: Chad) {
+  return 'glob' in chad || 'site' in chad;
+}
+
+export const scryCharges: Scry = {
+  app: 'docket',
+  path: '/charges'
+};
+
+export const scryDockets: Scry = {
+  app: 'docket',
+  path: '/dockets'
+};
+
+export const scryTreaties: Scry = {
+  app: 'treaty',
+  path: '/treaties'
+};
+
+export const scryDefaultAlly: Scry = {
+  app: 'treaty',
+  path: '/default-ally'
+};
+
+export const scryAllies: Scry = {
+  app: 'treaty',
+  path: '/allies'
+};
+
+export const scryAllyTreaties = (ship: string): Scry => ({
+  app: 'treaty',
+  path: `/treaties/${ship}`
+});
+
+/**
+ * Uninstall a desk, and remove docket
+ */
+export function docketUninstall(desk: string): Poke<string> {
+  return {
+    app: 'docket',
+    mark: 'docket-uninstall',
+    json: desk
+  };
+}
+
+export function docketInstall(ship: string, desk: string): Poke<any> {
+  return {
+    app: 'docket',
+    mark: 'docket-install',
+    json: `${ship}/${desk}`
+  };
+}
+
+export function allyShip(ship: string): Poke<any> {
+  return {
+    app: 'treaty',
+    mark: 'ally-update-0',
+    json: {
+      add: ship
+    }
+  };
+}