@le-space/ui 0.6.0 → 0.6.2

package/svelte/SponsorRelayFab.svelte

@@ -9,9 +9,10 @@
   import './styles/theme.css'
 
   export let manifestUrl = './rootfs-manifest.json'
-  export let manifestJson = ''
-  export let sshPublicKey = ''
+export let manifestJson = ''
+export let sshPublicKey = ''
 export let instanceName = 'sponsor-relay'
+  export let ucanStoreBootstrap = undefined
 export let showInstances = true
 export let openByDefault = false
 export let launcherMode = 'floating'
@@ -26,6 +27,7 @@ export let apiHost = undefined
     manifestJson,
     sshPublicKey,
     instanceName,
+    ucanStoreBootstrap,
     showInstances,
   openByDefault,
   launcherMode,
@@ -42,13 +44,38 @@ export let apiHost = undefined
     : ''
   const pollingStages = new Set(['waiting-for-aleph', 'deployment-confirmed', 'publishing-bootstrap', 'refreshing-instances'])
 
+  function deploymentProfile() {
+    return state.manifest?.profile === 'ucan-store' ? 'ucan-store' : 'relay'
+  }
+
+  function deploymentTitle() {
+    return deploymentProfile() === 'ucan-store' ? 'Sponsor Service' : 'Sponsor Relay'
+  }
+
+  function deploymentInstanceFallbackLabel() {
+    return deploymentProfile() === 'ucan-store' ? 'service' : 'relay'
+  }
+
+  function deploymentButtonLabel() {
+    return deploymentProfile() === 'ucan-store' ? 'Deploy Service' : 'Deploy Relay'
+  }
+
+  function bootstrapUiEnabled() {
+    return deploymentProfile() !== 'ucan-store'
+  }
+
   $: pollingActive = state.busy.refreshing || pollingStages.has(state.deploymentProgress.stage)
+  $: isServiceProfile = deploymentProfile() === 'ucan-store'
   $: pollingLabel = state.busy.refreshing
-    ? 'Checking relay state'
-    : (state.deploymentProgress.label || 'Polling relay state')
+    ? (isServiceProfile ? 'Checking deployment state' : 'Checking relay state')
+    : (state.deploymentProgress.label || (isServiceProfile ? 'Polling deployment state' : 'Polling relay state'))
   $: pollingDetail = state.busy.refreshing
-    ? (state.statusText || 'Refreshing relay sponsor data from Aleph and the selected CRN.')
-    : (state.deploymentProgress.detail || state.statusText || 'Waiting for the next confirmed relay state from Aleph.')
+    ? (state.statusText || (isServiceProfile
+      ? 'Refreshing service deployment data from Aleph and the selected CRN.'
+      : 'Refreshing relay deployment data from Aleph and the selected CRN.'))
+    : (state.deploymentProgress.detail || state.statusText || (isServiceProfile
+      ? 'Waiting for the next confirmed deployment state from Aleph.'
+      : 'Waiting for the next confirmed relay state from Aleph.'))
   $: confirmedRegistrationByInstanceHash = new Map(
     (state.bootstrapRegistrations ?? [])
       .filter((entry) => entry.confirmed && entry.instanceItemHash)
@@ -86,7 +113,7 @@ export let apiHost = undefined
             <span class="eyebrow-version">{versionLabel}</span>
           {/if}
         </p>
-        <h2>Sponsor Relay</h2>
+        <h2>{deploymentTitle()}</h2>
       </div>
       <button class="refresh" type="button" on:click={() => controller.refresh()} disabled={state.busy.refreshing}>
         {state.busy.refreshing ? 'Syncing' : 'Refresh'}
@@ -165,6 +192,50 @@ export let apiHost = undefined
             <textarea rows="7" on:input={(event) => controller.setManifestJson(event.currentTarget.value)}>{state.manifestJson}</textarea>
           </label>
         </AccordionSection>
+
+        {#if deploymentProfile() === 'ucan-store'}
+          <AccordionSection title="UCAN Store Bootstrap" open={true}>
+            <label class="field wide">
+              <span>Admin DID</span>
+              <input value={state.ucanStoreBootstrap.adminDid} on:input={(event) => controller.setUcanStoreBootstrapField('adminDid', event.currentTarget.value)} />
+            </label>
+            <label class="field wide">
+              <span>Service DID Override</span>
+              <input value={state.ucanStoreBootstrap.serviceDid} on:input={(event) => controller.setUcanStoreBootstrapField('serviceDid', event.currentTarget.value)} />
+            </label>
+            <label class="field wide">
+              <span>Space DID</span>
+              <input value={state.ucanStoreBootstrap.spaceDid} on:input={(event) => controller.setUcanStoreBootstrapField('spaceDid', event.currentTarget.value)} />
+            </label>
+            <label class="field wide">
+              <span>Root Delegation Proof</span>
+              <textarea rows="5" on:input={(event) => controller.setUcanStoreBootstrapField('rootDelegationProof', event.currentTarget.value)}>{state.ucanStoreBootstrap.rootDelegationProof}</textarea>
+            </label>
+            <label class="field wide">
+              <span>Allowed Capabilities</span>
+              <textarea rows="4" on:input={(event) => controller.setUcanStoreBootstrapField('allowedCapabilities', event.currentTarget.value)}>{state.ucanStoreBootstrap.allowedCapabilities}</textarea>
+            </label>
+            <div class="grid">
+              <label class="field">
+                <span>Default Expiration</span>
+                <input value={state.ucanStoreBootstrap.defaultUserDelegationExpiration} on:input={(event) => controller.setUcanStoreBootstrapField('defaultUserDelegationExpiration', event.currentTarget.value)} />
+              </label>
+              <label class="field">
+                <span>Max Expiration</span>
+                <input value={state.ucanStoreBootstrap.maxUserDelegationExpiration} on:input={(event) => controller.setUcanStoreBootstrapField('maxUserDelegationExpiration', event.currentTarget.value)} />
+              </label>
+            </div>
+            <label class="field wide">
+              <span>PWA Origin Override</span>
+              <input value={state.ucanStoreBootstrap.pwaOrigin} on:input={(event) => controller.setUcanStoreBootstrapField('pwaOrigin', event.currentTarget.value)} />
+            </label>
+            <label class="field wide">
+              <span>Service Origin Override</span>
+              <input value={state.ucanStoreBootstrap.serviceOrigin} on:input={(event) => controller.setUcanStoreBootstrapField('serviceOrigin', event.currentTarget.value)} />
+            </label>
+            <small>Operator address comes from the connected MetaMask account. If service origin is empty, the runtime proxy URL is used during guest configuration.</small>
+          </AccordionSection>
+        {/if}
       </div>
     </details>
 
@@ -194,7 +265,7 @@ export let apiHost = undefined
     <div class="actions">
       {#if state.wallet.connected}
         <button class="primary" type="button" on:click={() => controller.deploy()} disabled={state.busy.deploying || state.rootfsHealth.tone !== 'ok'}>
-          {state.busy.deploying ? 'Deploying…' : 'Deploy Relay'}
+          {state.busy.deploying ? 'Deploying…' : deploymentButtonLabel()}
         </button>
       {:else}
         <button class="primary" type="button" on:click={() => controller.connectWallet()} disabled={state.busy.connectingWallet}>
@@ -225,7 +296,7 @@ export let apiHost = undefined
         {/if}
 
         {#each state.instances as entry}
-          <AccordionSection title={`${entry.instance.content?.metadata?.name ?? 'relay'} · ${shortHash(entry.instance.item_hash)}`} open={true}>
+          <AccordionSection title={`${entry.instance.content?.metadata?.name ?? deploymentInstanceFallbackLabel()} · ${shortHash(entry.instance.item_hash)}`} open={true}>
             {@const confirmedRegistration = confirmedRegistrationByInstanceHash.get(entry.instance.item_hash)}
             <div class="instance-topline">
               <div class="chip-row">
@@ -233,7 +304,7 @@ export let apiHost = undefined
                 {#if entry.details.crnUrl}
                   <span class="chip">{entry.details.crnUrl.replace(/^https?:\/\//, '')}</span>
                 {/if}
-                {#if confirmedRegistration}
+                {#if bootstrapUiEnabled() && confirmedRegistration}
                   <span class="chip chip-confirmed">
                     <span class="chip-dot-confirmed"></span>
                     Aleph bootstrap registered
@@ -280,7 +351,7 @@ export let apiHost = undefined
               <strong>{joinMappedPorts(entry.details.mappedPorts)}</strong>
             </div>
 
-            {#if confirmedRegistration}
+            {#if bootstrapUiEnabled() && confirmedRegistration}
               <div class="mono-block">
                 <span>Bootstrap Registration</span>
                 <strong>{shortHash(confirmedRegistration.messageHash ?? confirmedRegistration.content?.registrationId ?? 'confirmed', 14, 8)}</strong>
@@ -302,7 +373,7 @@ export let apiHost = undefined
           </AccordionSection>
         {/each}
 
-        {#if orphanRegistrations.length > 0}
+        {#if bootstrapUiEnabled() && orphanRegistrations.length > 0}
           <div class="orphan-box">
             <div class="orphan-head">
               <strong>Orphan bootstrap registrations</strong>