update: wizard with endpoints.

src/lib/layout/wizard.svelte

@@ -201,7 +201,7 @@
             <div class="u-z-index-5 form-footer">
                 <div class="u-flex u-main-end u-gap-12">
                     {#if !isLastStep && currentStep?.optional}
-                        <Button text on:click={() => dispatch('finish')}>
+                        <Button text on:click={() => dispatch('finish', { skipped: true })}>
                             Skip optional steps
                         </Button>
                     {/if}

src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte

@@ -1,20 +1,12 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { invalidate } from '$app/navigation';
-    import { wizard } from '$lib/stores/wizard';
-    import { createPlatform } from './wizard/store';
-    import { Dependencies } from '$lib/constants';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Step1 from './wizard/android/step1.svelte';
     import Step2 from './wizard/android/step2.svelte';
     import Step3 from './wizard/android/step3.svelte';
     import Step4 from './wizard/step4.svelte';
 
-    async function onFinish() {
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
-        createPlatform.reset();
-        wizard.hide();
-    }
+    import Skipped, { onPlatformSetupFinish } from './wizard/skipped.svelte';
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
@@ -41,6 +33,8 @@
 <Wizard
     title="Add an Android platform"
     steps={stepsComponents}
-    on:finish={onFinish}
-    on:exit={onFinish}
+    on:finish={onPlatformSetupFinish}
+    on:exit={onPlatformSetupFinish}
     finalAction="Go to dashboard" />
+
+<Skipped />

src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte

@@ -1,21 +1,12 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { invalidate } from '$app/navigation';
-    import { wizard } from '$lib/stores/wizard';
-    import { createPlatform } from './wizard/store';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Step1 from './wizard/apple/step1.svelte';
     import Step2 from './wizard/apple/step2.svelte';
     import Step3 from './wizard/apple/step3.svelte';
     import Step4 from './wizard/step4.svelte';
-    import { Dependencies } from '$lib/constants';
 
-    async function onFinish() {
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
-
-        createPlatform.reset();
-        wizard.hide();
-    }
+    import Skipped, { onPlatformSetupFinish } from './wizard/skipped.svelte';
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
@@ -42,6 +33,8 @@
 <Wizard
     title="Add an Apple platform"
     steps={stepsComponents}
-    on:finish={onFinish}
-    on:exit={onFinish}
+    on:finish={onPlatformSetupFinish}
+    on:exit={onPlatformSetupFinish}
     finalAction="Go to dashboard" />
+
+<Skipped />

src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte

@@ -1,21 +1,12 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { invalidate } from '$app/navigation';
-    import { wizard } from '$lib/stores/wizard';
-    import { createPlatform } from './wizard/store';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Step1 from './wizard/flutter/step1.svelte';
     import Step2 from './wizard/flutter/step2.svelte';
     import Step3 from './wizard/flutter/step3.svelte';
     import Step4 from './wizard/step4.svelte';
-    import { Dependencies } from '$lib/constants';
 
-    async function onFinish() {
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
-
-        createPlatform.reset();
-        wizard.hide();
-    }
+    import Skipped, { onPlatformSetupFinish } from './wizard/skipped.svelte';
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
@@ -42,6 +33,8 @@
 <Wizard
     title="Add a Flutter platform"
     steps={stepsComponents}
-    on:finish={onFinish}
-    on:exit={onFinish}
+    on:finish={onPlatformSetupFinish}
+    on:exit={onPlatformSetupFinish}
     finalAction="Go to dashboard" />
+
+<Skipped />

src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte

@@ -1,21 +1,12 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { invalidate } from '$app/navigation';
-    import { wizard } from '$lib/stores/wizard';
-    import { createPlatform } from './wizard/store';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Step1 from './wizard/react-native/step1.svelte';
     import Step2 from './wizard/react-native/step2.svelte';
     import Step3 from './wizard/react-native/step3.svelte';
     import Step4 from './wizard/step4.svelte';
-    import { Dependencies } from '$lib/constants';
 
-    async function onFinish() {
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
-
-        createPlatform.reset();
-        wizard.hide();
-    }
+    import Skipped, { onPlatformSetupFinish } from './wizard/skipped.svelte';
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
@@ -42,6 +33,8 @@
 <Wizard
     title="Add a React Native platform"
     steps={stepsComponents}
-    on:finish={onFinish}
-    on:exit={onFinish}
+    on:finish={onPlatformSetupFinish}
+    on:exit={onPlatformSetupFinish}
     finalAction="Go to dashboard" />
+
+<Skipped />

src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte

@@ -1,21 +1,12 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { invalidate } from '$app/navigation';
-    import { wizard } from '$lib/stores/wizard';
-    import { createPlatform } from './wizard/store';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Step1 from './wizard/web/step1.svelte';
     import Step2 from './wizard/web/step2.svelte';
     import Step3 from './wizard/web/step3.svelte';
     import Step4 from './wizard/step4.svelte';
-    import { Dependencies } from '$lib/constants';
 
-    async function onFinish() {
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
-
-        createPlatform.reset();
-        wizard.hide();
-    }
+    import Skipped, { onPlatformSetupFinish } from './wizard/skipped.svelte';
 
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
@@ -42,6 +33,8 @@
 <Wizard
     title="Add a web platform"
     steps={stepsComponents}
-    on:finish={onFinish}
-    on:exit={onFinish}
+    on:finish={onPlatformSetupFinish}
+    on:exit={onPlatformSetupFinish}
     finalAction="Go to dashboard" />
+
+<Skipped />

src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/android/step3.svelte

@@ -1,24 +1,18 @@
 <script lang="ts">
-    import { Code } from '$lib/components';
-    import Id from '$lib/components/id.svelte';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { isCloud } from '$lib/system';
     import { page } from '$app/stores';
+    import { WizardStep } from '$lib/layout';
+    import { Code, Id } from '$lib/components';
+    import { getProjectEndpoint } from '$lib/helpers/project';
 
-    const { endpoint, project } = sdk.forProject($page.params.region, $page.params.project).client
-        .config;
+    const project = $page.params.project;
     const code = `import io.appwrite.Client
 import io.appwrite.services.Account
 
-${
-    isCloud
-        ? `val client = Client(context).setProject("${project}")`
-        : `val client = Client(context)
-    .setEndpoint("${endpoint}")
+val client = Client(context)
+    .setEndpoint("${getProjectEndpoint()}")
     .setProject("${project}")
-    .setSelfSigned(status: true) // For self signed certificates, only use for development`
-}`;
+    .setSelfSigned(status: true) // For self signed certificates, only use for development
+`;
 </script>
 
 <WizardStep>

src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/apple/step3.svelte

@@ -1,23 +1,18 @@
 <script lang="ts">
-    import { Alert, Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-    import { isCloud } from '$lib/system';
-    import { sdk } from '$lib/stores/sdk';
     import { page } from '$app/stores';
-    import Id from '$lib/components/id.svelte';
+    import { isCloud } from '$lib/system';
+    import { WizardStep } from '$lib/layout';
+    import { Alert, Code, Id } from '$lib/components';
+    import { getProjectEndpoint } from '$lib/helpers/project';
 
-    const { endpoint, project } = sdk.forProject($page.params.region, $page.params.project).client
-        .config;
+    const project = $page.params.project;
     const code = `import Appwrite
 
-${
-    isCloud
-        ? `let client = Client().setProject("${project}")`
-        : `let client = Client()
-    .setEndpoint("${endpoint}")
+let client = Client()
+    .setEndpoint("${getProjectEndpoint()}")
     .setProject("${project}")
-    .setSelfSigned(true) // For self signed certificates, only use for development`
-}`;
+    .setSelfSigned(true) // For self signed certificates, only use for development
+`;
 
     let showAlert = true;
 </script>

src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/flutter/step3.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
-    import { Alert, Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-    import { isCloud } from '$lib/system';
-    import { sdk } from '$lib/stores/sdk';
     import { page } from '$app/stores';
-    import Id from '$lib/components/id.svelte';
+    import { isCloud } from '$lib/system';
+    import { WizardStep } from '$lib/layout';
+    import { Alert, Code, Id } from '$lib/components';
 
-    const { endpoint, project } = sdk.forProject($page.params.region, $page.params.project).client
-        .config;
+    const project = $page.params.project;
     const code = `import 'package:appwrite/appwrite.dart';
 
 Client client = Client();

src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/react-native/step3.svelte

@@ -1,22 +1,16 @@
 <script lang="ts">
-    import { Alert, Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-    import { isCloud } from '$lib/system';
-    import { sdk } from '$lib/stores/sdk';
-    import { createPlatform } from '../store';
     import { page } from '$app/stores';
-    import Id from '$lib/components/id.svelte';
+    import { isCloud } from '$lib/system';
+    import { WizardStep } from '$lib/layout';
+    import { createPlatform } from '../store';
+    import { Alert, Code, Id } from '$lib/components';
+    import { getProjectEndpoint } from '$lib/helpers/project';
 
-    const { endpoint, project } = sdk.forProject($page.params.region, $page.params.project).client
-        .config;
-    const code = `import { Client, Account, ID } from 'react-native-appwrite';
+    const project = $page.params.project;
+    const code = `import { Client, Account } from 'react-native-appwrite';
 
-const client = new Client()${
-        isCloud
-            ? ''
-            : `
-    .setEndpoint('${endpoint}')`
-    }
+const client = new Client()
+    .setEndpoint('${getProjectEndpoint()}')
     .setProject('${project}')
     .setPlatform('${$createPlatform.key}');
 `;

src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/skipped.svelte

@@ -0,0 +1,56 @@
+<script context="module" lang="ts">
+    import { createPlatform } from './store';
+    import { wizard } from '$lib/stores/wizard';
+    import { get, writable } from 'svelte/store';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    const showSkippedModal = writable(false);
+    const skippedModalOnSubmit = () => wizard.hide();
+
+    export async function onPlatformSetupFinish(event: CustomEvent): Promise<void> {
+        showSkippedModal.set(event.detail?.skipped ?? false);
+
+        createPlatform.reset();
+        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
+
+        if (!get(showSkippedModal)) {
+            wizard.hide();
+        }
+    }
+</script>
+
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { CopyInput, Modal } from '$lib/components';
+    import { Button, FormList } from '$lib/elements/forms';
+    import { getProjectEndpoint } from '$lib/helpers/project';
+
+    const project = $page.params.project;
+    $: {
+        console.log($showSkippedModal);
+    }
+</script>
+
+<div style:background="deeppink">
+    <Modal
+        headerDivider={false}
+        bind:show={$showSkippedModal}
+        onSubmit={skippedModalOnSubmit}
+        title="Skipping optional steps">
+        <FormList>
+            <p>
+                The platform will be added to your project. Use the Project ID and API endpoint in
+                your project to get started:
+            </p>
+
+            <CopyInput label="Project ID" showLabel={true} value={project} />
+            <CopyInput label="Endpoint" showLabel={true} value={getProjectEndpoint()} />
+        </FormList>
+
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => ($showSkippedModal = false)}>Cancel</Button>
+            <Button submit>Go to dashboard</Button>
+        </svelte:fragment>
+    </Modal>
+</div>

src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/step4.svelte

@@ -1,19 +1,28 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { WizardStep } from '$lib/layout';
+    import { CopyInput } from '$lib/components';
+    import { FormList } from '$lib/elements/forms';
+    import { getProjectEndpoint } from '$lib/helpers/project';
 
+    const project = $page.params.project;
     $: isFirstProject = $page.data.platforms.total === 0;
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">All set</svelte:fragment>
-    <p>
-        {#if isFirstProject}
-            Congratulations on adding the first platform to your project! Start exploring by
-            creating users, adding a database to your project, or uploading files to a bucket.
-        {:else}
-            Congratulations on adding another platform to your project! Start building by adding a
-            database, uploading files to a bucket and more via your dashboard.
-        {/if}
-    </p>
+    <svelte:fragment slot="title">All set! Your project is ready to go</svelte:fragment>
+    <FormList gap={16}>
+        <p>
+            {#if isFirstProject}
+                Congratulations on adding the first platform to your project!
+            {:else}
+                Congratulations on adding another platform to your project!
+            {/if}
+
+            Use the Project ID and API endpoint in your project to get started:
+        </p>
+
+        <CopyInput label="Project ID" showLabel={true} value={project} />
+        <CopyInput label="Endpoint" showLabel={true} value={getProjectEndpoint()} />
+    </FormList>
 </WizardStep>

src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/web/step3.svelte

@@ -1,21 +1,15 @@
 <script lang="ts">
-    import { Code } from '$lib/components';
-    import Id from '$lib/components/id.svelte';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { isCloud } from '$lib/system';
     import { page } from '$app/stores';
+    import { WizardStep } from '$lib/layout';
+    import { Code, Id } from '$lib/components';
+    import { getProjectEndpoint } from '$lib/helpers/project';
+
+    const project = $page.params.project;
 
-    const { endpoint, project } = sdk.forProject($page.params.region, $page.params.project).client
-        .config;
     const code = `const client = new Client();
-${
-    isCloud
-        ? `client.setProject('${project}');`
-        : `client
-    .setEndpoint('${endpoint}')
-    .setProject('${project}');`
-}`;
+client
+    .setEndpoint('${getProjectEndpoint()}')
+    .setProject('${project}');`;
 </script>
 
 <WizardStep>