grid: AppInfo consumes pike

ui/src/components/AppInfo.tsx

@@ -1,4 +1,4 @@
-import { chadIsRunning, Treaty, Vat } from '@urbit/api';
+import { chadIsRunning, Pike, Treaty } from '@urbit/api';
 import clipboardCopy from 'clipboard-copy';
 import React, { FC, useCallback, useState } from 'react';
 import cn from 'classnames';
@@ -6,7 +6,7 @@ import { Button, PillButton } from './Button';
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from './Dialog';
 import { DocketHeader } from './DocketHeader';
 import { Spinner } from './Spinner';
-import { VatMeta } from './VatMeta';
+import { PikeMeta } from './PikeMeta';
 import useDocketState, { ChargeWithDesk, useTreaty } from '../state/docket';
 import { getAppHref, getAppName } from '../state/util';
 import { addRecentApp } from '../nav/search/Home';
@@ -17,7 +17,7 @@ type InstallStatus = 'uninstalled' | 'installing' | 'installed';
 type App = ChargeWithDesk | Treaty;
 interface AppInfoProps {
   docket: App;
-  vat?: Vat;
+  pike?: Pike;
   className?: string;
 }
 
@@ -34,10 +34,9 @@ function getInstallStatus(docket: App): InstallStatus {
   return 'uninstalled';
 }
 
-function getRemoteDesk(docket: App, vat?: Vat) {
+function getRemoteDesk(docket: App, pike?: Pike) {
-  if (vat && vat.arak.rail) {
+  if (pike && pike.sync) {
-    const { ship, desk } = vat.arak.rail;
+    return [pike.sync.ship, pike.sync.desk];
-    return [ship, desk];
   }
   if ('chad' in docket) {
     return ['', docket.desk];
@@ -46,10 +45,10 @@ function getRemoteDesk(docket: App, vat?: Vat) {
   return [ship, desk];
 }
 
-export const AppInfo: FC<AppInfoProps> = ({ docket, vat, className }) => {
+export const AppInfo: FC<AppInfoProps> = ({ docket, pike, className }) => {
   const installStatus = getInstallStatus(docket);
-  const [ship, desk] = getRemoteDesk(docket, vat);
+  const [ship, desk] = getRemoteDesk(docket, pike);
-  const publisher = vat?.arak?.rail?.publisher ?? ship;
+  const publisher = pike?.sync?.ship ?? ship;
   const [copied, setCopied] = useState(false);
   const treaty = useTreaty(ship, desk);
 
@@ -136,10 +135,10 @@ export const AppInfo: FC<AppInfoProps> = ({ docket, vat, className }) => {
         </div>
       </DocketHeader>
       <div className="space-y-6">
-        {vat ? (
+        {pike ? (
           <>
             <hr className="-mx-5 sm:-mx-8 border-gray-50" />
-            <VatMeta vat={vat} />
+            <PikeMeta pike={pike} />
           </>
         ) : null}
         {!treaty ? null : (

ui/src/components/PikeMeta.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Pike } from '@urbit/api';
+
+import { Attribute } from './Attribute';
+
+export function PikeMeta(props: { pike: Pike }) {
+  const { pike } = props;
+
+  const pluralUpdates = pike.wefts?.length !== 1;
+  return (
+    <div className="mt-5 sm:mt-8 space-y-5 sm:space-y-8">
+      <Attribute title="Desk Hash" attr="hash">
+        {pike.hash}
+      </Attribute>
+      <Attribute title="Installed into" attr="local-desk">
+        %{pike.sync?.desk}
+      </Attribute>
+      {pike.wefts && pike.wefts.length > 0 ? (
+        <Attribute attr="next" title="Pending Updates">
+          {pike.wefts.length} update{pluralUpdates ? 's are' : ' is'} pending a System Update
+        </Attribute>
+      ) : null}
+    </div>
+  );
+}

ui/src/components/VatMeta.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Vat } from '@urbit/api';
-
-import { Attribute } from './Attribute';
-
-export function VatMeta(props: { vat: Vat }) {
-  const { vat } = props;
-  const { desk, arak, cass, hash } = vat;
-
-  const { desk: foreignDesk, ship, next } = arak.rail || {};
-  const pluralUpdates = next?.length !== 1;
-  return (
-    <div className="mt-5 sm:mt-8 space-y-5 sm:space-y-8">
-      <Attribute title="Desk Hash" attr="hash">
-        {hash}
-      </Attribute>
-      <Attribute title="Installed into" attr="local-desk">
-        %{desk}
-      </Attribute>
-      {next && next.length > 0 ? (
-        <Attribute attr="next" title="Pending Updates">
-          {next.length} update{pluralUpdates ? 's are' : ' is'} pending a System Update
-        </Attribute>
-      ) : null}
-    </div>
-  );
-}

ui/src/tiles/TileInfo.tsx

@@ -3,13 +3,13 @@ import { useHistory, useParams } from 'react-router-dom';
 import { Dialog, DialogContent } from '../components/Dialog';
 import { AppInfo } from '../components/AppInfo';
 import { useCharge } from '../state/docket';
-import { useVat } from '../state/kiln';
+import { usePike } from '../state/kiln';
 
 export const TileInfo = () => {
   const { desk } = useParams<{ desk: string }>();
   const { push } = useHistory();
   const charge = useCharge(desk);
-  const vat = useVat(desk);
+  const pike = usePike(desk);
 
   if (!charge) {
     return null;
@@ -18,7 +18,7 @@ export const TileInfo = () => {
   return (
     <Dialog open onOpenChange={(open) => !open && push('/')}>
       <DialogContent>
-        <AppInfo vat={vat} docket={charge} />
+        <AppInfo pike={pike} docket={charge} />
       </DialogContent>
     </Dialog>
   );