Dogebox can use a Binary Cache

src/api/mocks.js

@@ -78,5 +78,5 @@ export const mocks = [
   deleteSSHPublicKeyResponse,
   addSSHPublicKeyResponse,
   updateSSHStateResponse,
-  getSSHStateResponse
+  getSSHStateResponse,
 ];

src/components/common/toggled-section.js

@@ -0,0 +1,32 @@
+import { css } from "/vendor/@lit/[email protected]/lit-all.min.js";
+
+/* Classic "Advanced Settings" styling for shoelace sl-details
+Use with sl-details by importing this chunk of css */
+
+export const toggledSectionStyles = css`
+  sl-details.advanced::part(base) {
+    border: none;
+    margin-bottom: 1em;
+  }
+
+  sl-details.advanced::part(header) {
+    padding-left: 0;
+    padding-right: 0;
+    font-size: var(--sl-button-font-size-medium);
+    color: var(--sl-color-primary-600);
+  }
+
+  sl-details.advanced::part(content) {
+    border-left: 1px solid var(--sl-panel-border-color);
+  }
+
+  sl-details.advanced::part(summary) {
+    flex: none;
+    margin-right: 5px;
+  }
+
+  sl-details.advanced::part(summary-icon) {
+    position: relative;
+    top: 1px;
+  }
+`

src/components/views/action-select-network/index.js

@@ -268,7 +268,8 @@ class SelectNetwork extends LitElement {
       initialSSHKey: state['ssh-key'],
       // Temporarily don't submit reflectorToken until the service is up and running.
       reflectorToken: this.reflectorToken,
-      reflectorHost: store.networkContext.reflectorHost
+      reflectorHost: store.networkContext.reflectorHost,
+      useFoundationPupBinaryCache: store.setupContext.useFoundationPupBinaryCache
     }).catch(() => { console.log('bootstrap called but no response returned')});
 
     // if (!finalSystemBootstrap) {

src/components/views/action-system-settings/index.js

@@ -12,8 +12,11 @@ import { renderBanner } from "./banner.js";
 // Store
 import { store } from "/state/store.js";
 
+// Components and styles
+import { toggledSectionStyles } from "/components/common/toggled-section.js";
+
 class SystemSettings extends LitElement {
-  static styles = css`
+  static styles = [toggledSectionStyles, css`
     :host {
       display: block;
     }
@@ -50,7 +53,9 @@ class SystemSettings extends LitElement {
       gap: 1em;
       margin-bottom: 2em;
     }
-  `;
+
+    h4 { margin: 0.5em 0; display: flex; align-items: center; }
+  `];
 
   static get properties() {
     return {
@@ -73,7 +78,8 @@ class SystemSettings extends LitElement {
     this._changes = {
       keymap: 'us',
       disk: '',
-      'device-name': ''
+      'device-name': '',
+      use_fdn_pup_binary_cache: true,
     };
     this._show_disk_size_warning = false;
     this._show_disk_size_in_use_warning = false;
@@ -123,7 +129,8 @@ class SystemSettings extends LitElement {
   async _attemptSubmit() {
     this._inflight = true;
 
-    const formFields = this.shadowRoot.querySelectorAll('sl-input, sl-select');
+    // Only input elements that have a name attribute are sent to backend.
+    const formFields = this.shadowRoot.querySelectorAll('sl-input[name], sl-select[name], sl-checkbox[name]');
     const hasInvalidField = Array.from(formFields).some(field => field.hasAttribute('data-invalid'));
 
     await asyncTimeout(2000);
@@ -136,6 +143,12 @@ class SystemSettings extends LitElement {
 
     let didSucceed = false
 
+    store.updateState({
+      setupContext: {
+        useFoundationPupBinaryCache: this._changes.use_fdn_pup_binary_cache,
+      },
+    });
+
     try {
       await setHostname({ hostname: this._changes['device-name'] });
       await setKeymap({ keymap: this._changes.keymap });
@@ -199,6 +212,7 @@ class SystemSettings extends LitElement {
           <div class="form-control">
             <sl-button class="label-button" variant="text" @click=${this._generateName}>Randomize</sl-button>
             <sl-input
+              name="device-name"
               required
               label="Set Device Name (for your local network)"
               ?disabled=${this._inflight}
@@ -212,6 +226,7 @@ class SystemSettings extends LitElement {
 
           <div class="form-control">
             <sl-select
+              name="keymap"
               required
               label="Select Keyboard Layout" 
               ?disabled=${this._inflight}
@@ -231,6 +246,7 @@ class SystemSettings extends LitElement {
 
           <div class="form-control">
             <sl-select
+              name="disk"
               required
               label="Select Mass Storage Disk"
               ?disabled=${this._inflight}
@@ -254,6 +270,37 @@ class SystemSettings extends LitElement {
             </sl-alert>
           </div>
 
+          <sl-details class="advanced" summary="Advanced Settings">
+            <h4>Binary Cache
+              <sl-tooltip>
+                <div slot="content">
+                  A binary cache stores pre-compiled packages to speed up installation and reduce build time. Instead of compiling everything from source code, the system can download ready-to-use binaries from the Dogecoin Foundation's cache: https://nix.dogecoin.org/
+                  </div>
+                <sl-icon-button name="question-circle" label="Binary cache explaination"></sl-icon-button></h4>
+              </sl-tooltip>
+            <div class="form-control">
+              <sl-checkbox
+                name="use_fdn_pup_binary_cache"
+                ?checked=${this._changes.use_fdn_pup_binary_cache}
+                .value=${this._changes.use_fdn_pup_binary_cache}
+                @sl-change=${(e) => { this._changes.use_fdn_pup_binary_cache = e.target.checked; this.requestUpdate(); }}
+                help-text="Uncheck to opt out of using the Dogecoin Foundation binary cache">
+                Use Dogecoin FDN binary cache
+              </sl-checkbox>
+            </div>
+
+            <sl-alert ?open=${this._changes.use_fdn_pup_binary_cache}>
+              <sl-icon slot="icon" name="info-circle"></sl-icon>
+              Using a binary cache saves time. Binaries are still validated for authenticity before installation.
+            </sl-alert>
+
+            <sl-alert variant="warning" ?open=${!this._changes.use_fdn_pup_binary_cache}>
+              <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
+              Just a heads up. You may experience longer Pup install times down the track (up to 30 minutes in some cases)
+            </sl-alert>
+
+          </sl-details>
+
           <sl-divider style="--spacing: 2rem;"></sl-divider>
 
           <sl-alert variant="warning" ?open=${this._changes.disk && !this._is_boot_media} style="margin: 1em 0em;">
@@ -285,4 +332,4 @@ class SystemSettings extends LitElement {
   }
 }
 
-customElements.define("x-action-system-settings", SystemSettings);
+customElements.define("x-action-system-settings", SystemSettings);

src/state/store.js

@@ -48,13 +48,14 @@ class Store {
       display: false,
       name: "transaction",
     };
-    (this.dialogContext = {
+    this.dialogContext = {
       name: null,
-    }),
-      (this.setupContext = {
-        hashedPassword: null,
-        view: null,
-      });
+    };
+    this.setupContext = {
+      hashedPassword: null,
+      view: null,
+      useFoundationPupBinaryCache: false,
+    };
 
     // Hydrate state from localStorage unless flush parameter is present.
     if (!isUnauthedRoute() && !hasFlushParam()) {