diff --git a/ui/src/components/Permissions.tsx b/ui/src/components/Permissions.tsx
index f0a9607a..93996a2c 100644
--- a/ui/src/components/Permissions.tsx
+++ b/ui/src/components/Permissions.tsx
@@ -14,6 +14,7 @@ export const Permissions = () => {
installStatus,
passport,
pike,
+ presentableSeal,
ship,
} = usePermissions();
@@ -40,6 +41,7 @@ export const Permissions = () => {
- {/* TODO: use real seal from scry; style to match wireframe */} - {fakeSeal} ++) diff --git a/ui/src/permissions/usePermissions.ts b/ui/src/permissions/usePermissions.ts index 9bedfdfa..cf35c938 100644 --- a/ui/src/permissions/usePermissions.ts +++ b/ui/src/permissions/usePermissions.ts @@ -3,6 +3,9 @@ import { useCharge, useTreaty, useRemoteDesk, useInstallStatus } from "@/state/d import { usePike } from "@/state/kiln"; import { useParams } from "react-router-dom"; import usePassport from "./usePassport"; +import { useCallback, useEffect, useState } from "react"; +import api from "@/api"; +import { scrySeal } from "@/gear"; export default function usePermissions() { const { host, desk } = useParams<{ desk: string, host: string }>(); @@ -14,6 +17,16 @@ export default function usePermissions() { const { passport } = usePassport(); // TODO: pass in desk const [ship,] = useRemoteDesk(docket, pike, treaty?.ship); const installStatus = useInstallStatus(docket); + const [presentableSeal, setPresentableSeal] = useState+ {presentableSeal?.map((s) => `${s}\n`)}(null); + + const fetchSeal = useCallback(async () => { + const seal = await api.scry (scrySeal(ship, desk)); + setPresentableSeal(seal); + }, []); + + useEffect(() => { + fetchSeal(); + }, []); return { appName, @@ -24,6 +37,7 @@ export default function usePermissions() { installStatus, passport, pike, + presentableSeal, ship, treaty, } diff --git a/ui/src/stories/PermissionsDialog.stories.tsx b/ui/src/stories/PermissionsDialog.stories.tsx index ad1f8100..7d4a7d50 100644 --- a/ui/src/stories/PermissionsDialog.stories.tsx +++ b/ui/src/stories/PermissionsDialog.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { PermissionsDialogInner } from '@/permissions/PermissionsDialog'; import { Dialog, DialogContent } from '@/components/Dialog'; -import { fakePassport } from '@/permissions/temp'; +import { fakePassport, fakeSeal } from '@/permissions/temp'; import type { Meta, StoryObj } from '@storybook/react'; const meta: Meta = { @@ -32,6 +32,7 @@ export const Default: Story = { args: { appName: 'Some Cool App', passport: fakePassport, + presentableSeal: fakeSeal.split('\n'), onInstall: () => { }, }, };