fix: add agree-to-terms step to install page (#81)

Users must now accept a disclaimer before proceeding with canister
creation. Adds a new "Agree to Terms" step as the first step in the
install flow with an MIT-style "as-is" no-warranty disclaimer.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Web3NL

canisters/my-canister-app/src/lib/components/install/AgreeTermsCard.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { Card, Checkbox } from '@dfinity/gix-components';
+
+  export let onAgree: () => void;
+  export let dappName: string | null = null;
+
+  let checked = false;
+</script>
+
+<Card>
+  <h3>Terms &amp; Disclaimer</h3>
+
+  <p>
+    {#if dappName}
+      You are about to install <strong>{dappName}</strong> as an Internet Computer
+      canister.
+    {:else}
+      You are about to install a custom dapp as an Internet Computer canister.
+    {/if}
+    Please read and accept the following disclaimer before proceeding.
+  </p>
+
+  <div class="disclaimer">
+    <p>
+      This software is provided <strong>&ldquo;as is&rdquo;</strong>, without
+      warranty of any kind, express or implied, including but not limited to the
+      warranties of merchantability, fitness for a particular purpose, and
+      noninfringement.
+    </p>
+    <p>
+      In no event shall the authors, contributors, or copyright holders be
+      liable for any claim, damages, or other liability, whether in an action of
+      contract, tort, or otherwise, arising from, out of, or in connection with
+      the software or the use or other dealings in the software.
+    </p>
+    <p>By proceeding, you acknowledge that:</p>
+    <ul>
+      <li>
+        You are solely responsible for any ICP tokens spent during canister
+        creation.
+      </li>
+      <li>
+        The installed dapp code is provided without any guarantee of
+        correctness, security, or fitness for any purpose.
+      </li>
+      <li>
+        You assume all risks associated with installing and running this
+        canister on the Internet Computer.
+      </li>
+    </ul>
+  </div>
+
+  <div class="agree-checkbox">
+    <Checkbox
+      inputId="agree-terms"
+      {checked}
+      on:nnsChange={() => (checked = !checked)}
+    >
+      I have read and agree to the terms and disclaimer
+    </Checkbox>
+  </div>
+
+  <button class="primary" on:click={onAgree} disabled={!checked}>
+    Continue
+  </button>
+</Card>
+
+<style>
+  .disclaimer {
+    margin: 1rem 0;
+    padding: 1rem;
+    border: 1px solid var(--input-border-color, #ccc);
+    border-radius: var(--border-radius, 4px);
+    background: var(--input-background, rgba(0, 0, 0, 0.05));
+    font-size: 0.9rem;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .disclaimer ul {
+    padding-left: 1.5rem;
+    margin: 0.5rem 0;
+  }
+
+  .disclaimer li {
+    margin-bottom: 0.5rem;
+  }
+
+  .agree-checkbox {
+    margin: 1rem 0 1.5rem 0;
+  }
+</style>

canisters/my-canister-app/src/routes/(authed)/install/+page.svelte

@@ -24,6 +24,7 @@
   import GoodNewsCard from '$lib/components/install/GoodNewsCard.svelte';
   import ConnectIICard from '$lib/components/install/ConnectIICard.svelte';
   import FundAccountCard from '$lib/components/install/FundAccountCard.svelte';
+  import AgreeTermsCard from '$lib/components/install/AgreeTermsCard.svelte';
   import { goto, beforeNavigate } from '$app/navigation';
   import { fetchWasmModule, type WasmSource } from '$lib/utils/fetch';
 
@@ -91,7 +92,7 @@
       if (requiredBalanceE8s > 0n) {
         if (currentBalance >= requiredBalanceE8s) {
           stopBalanceTimer();
-          advanceToStep(2);
+          advanceToStep(3);
         } else if (!lowDepositWarnShown) {
           showWarnToast('Balance too low.');
           lowDepositWarnShown = true;
@@ -129,10 +130,15 @@
   });
 
   let steps: [ProgressStep, ...ProgressStep[]] = [
+    {
+      step: 'agree',
+      text: 'Agree to Terms',
+      state: 'in_progress',
+    },
     {
       step: 'fund',
       text: 'Fund Account',
-      state: 'in_progress',
+      state: 'next',
     },
     {
       step: 'create',
@@ -154,12 +160,17 @@
   $: currentStep =
     steps.findIndex(step => step.state === 'in_progress') + 1 || steps.length;
 
-  function advanceToStep(targetStep: 2 | 3 | 4) {
-    // targetStep is 1-based for the step the user is entering (or completing if 4)
+  function handleAgreeToTerms() {
+    advanceToStep(2);
+    startBalanceTimer();
+  }
+
+  function advanceToStep(targetStep: 2 | 3 | 4 | 5) {
+    // targetStep is 1-based for the step the user is entering (or completing if 5)
     steps = steps.map((s, idx) => {
       const stepIndex = idx + 1; // 1-based
       let state: ProgressStep['state'];
-      if (targetStep === 4) {
+      if (targetStep === 5) {
         // All steps completed
         state = 'completed';
       } else if (stepIndex < targetStep) {
@@ -193,11 +204,11 @@
   function retryFailedStep() {
     if (lastFailedStep === 'create') {
       clearFailedState();
-      advanceToStep(2);
+      advanceToStep(3);
       createCanister();
     } else if (lastFailedStep === 'connect-ii') {
       clearFailedState();
-      advanceToStep(3);
+      advanceToStep(4);
       takeControlOfCanister();
     }
   }
@@ -220,7 +231,7 @@
         localStorage.setItem(CANISTER_STORAGE_KEY, canisterPrincipal.toText());
       }
 
-      advanceToStep(3);
+      advanceToStep(4);
     } catch (err) {
       console.error('Failed to create canister', err);
       setFailed('create');
@@ -257,7 +268,7 @@
         localStorage.removeItem(CANISTER_STORAGE_KEY);
       }
 
-      advanceToStep(4);
+      advanceToStep(5);
     } catch (err) {
       console.error('Failed to install code / connect II', err);
       setFailed('connect-ii');
@@ -323,20 +334,24 @@
       if (pendingFromInstall) {
         canisterPrincipal = pendingFromInstall;
         recoveredCanister = true;
-        // Stay on step 2 to retry - createNewCanister will detect and retry install
-        advanceToStep(2);
+        // Stay on step 3 to retry - createNewCanister will detect and retry install
+        advanceToStep(3);
       } else {
         // Check for pending canister from successful create (waiting for II connect)
         const storedCanisterId = localStorage.getItem(CANISTER_STORAGE_KEY);
         if (storedCanisterId != null) {
           canisterPrincipal = Principal.fromText(storedCanisterId);
           recoveredCanister = true;
-          advanceToStep(3);
+          advanceToStep(4);
         }
       }
     }
 
-    startBalanceTimer();
+    // Only start balance timer immediately when recovering a previous install
+    // Otherwise, it starts when the user agrees to terms via handleAgreeToTerms()
+    if (recoveredCanister) {
+      startBalanceTimer();
+    }
   });
 
   onDestroy(() => {
@@ -406,7 +421,9 @@
     </p>
     <button class="primary" on:click={retryFailedStep}>Retry</button>
   </div>
-{:else if currentStep === 1 || currentStep === 2}
+{:else if currentStep === 1}
+  <AgreeTermsCard onAgree={handleAgreeToTerms} dappName={dappNameText} />
+{:else if currentStep === 2 || currentStep === 3}
   <FundAccountCard
     {principalText}
     {minimumBalance}
@@ -418,9 +435,9 @@
     onCreate={createCanister}
     onRefreshBalance={loadBalance}
   />
-{:else if currentStep === 3}
+{:else if currentStep === 4}
   <ConnectIICard onConnect={takeControlOfCanister} />
-{:else if currentStep === 4 && canisterPrincipal}
+{:else if currentStep === 5 && canisterPrincipal}
   <GoodNewsCard
     frontPageUrl={createFrontpageUrl(canisterPrincipal.toText())}
     dashboardUrl={createDashboardUrl(canisterPrincipal.toText())}

tests/my-canister-app/install-dapp.spec.ts

@@ -62,6 +62,11 @@ test('My Canister App E2E Suite', async ({ page }) => {
     .waitFor({ state: 'visible' });
   await helloWorldCard.getByRole('button', { name: 'Install' }).click();
 
+  // Accept terms and disclaimer
+  await page.locator('[data-tid="checkbox"]').waitFor({ state: 'visible' });
+  await page.locator('[data-tid="checkbox"]').click();
+  await page.getByRole('button', { name: 'Continue' }).click();
+
   // Wait until minimum deposit amount (number) is loaded instead of placeholder '...'
   const depositLocator = page
     .locator('p')