End up first cleaning phase

example/App.svelte

@@ -4,7 +4,7 @@
   import Profile from "./components/Profile";
   import Dapp from "../src";
   import { dapp } from "../src";
-  import { infra, profile, settings, wallet } from "../src/stores";
+  import { infra, isLoggedIn, profile, settings, wallet } from "../src/stores";
   import { fly } from "svelte/transition";
 
   let isLogging = false;
@@ -14,6 +14,11 @@
     console.log(_infra);
   });
 
+  isLoggedIn.subscribe(_isLoggedIn => {
+    console.log("[isLoggedIn:update]");
+    console.log(_isLoggedIn);
+  });
+
   profile.subscribe(_profile => {
     console.log("[profile:update]");
     console.log(_profile);
@@ -65,8 +70,8 @@
     <Login on:close={() => (isLogging = false)} />
   {/if}
   <main>
-    {#if $profile}
-      <Profile profile={$profile} />
+    {#if $isLoggedIn}
+      <Profile on:logout={() => dapp.logout()} />
     {:else}
       <section class="hero" transition:fly>
         <svg height="10" width="10">

example/components/Button.svelte → example/components/Button/components/Button.svelte

@@ -1,4 +1,5 @@
 <script>
+  import Loader from "./Loader";
   import { createEventDispatcher } from "svelte";
 
   export let _class = "";
@@ -78,5 +79,9 @@
   {type}
   {_class}"
   on:click={handleClick}>
-  <slot />
+  {#if disabled}
+    <Loader />
+  {:else}
+    <slot />
+  {/if}
 </div>

example/components/Button/components/Loader.svelte

@@ -0,0 +1,45 @@
+<style>
+  .lds-facebook {
+    display: inline-block;
+    position: relative;
+    width: 16px;
+    height: 8px;
+  }
+  .lds-facebook div {
+    display: inline-block;
+    position: absolute;
+    left: 0px;
+    width: 4px;
+    background: #fff;
+    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+  }
+  .lds-facebook div:nth-child(1) {
+    left: 0px;
+    animation-delay: -0.24s;
+  }
+  .lds-facebook div:nth-child(2) {
+    left: 6px;
+    animation-delay: -0.12s;
+  }
+  .lds-facebook div:nth-child(3) {
+    left: 12px;
+    animation-delay: 0;
+  }
+  @keyframes lds-facebook {
+    0% {
+      top: 0px;
+      height: 8px;
+    }
+    50%,
+    100% {
+      top: 4px;
+      height: 4px;
+    }
+  }
+</style>
+
+<div class="lds-facebook">
+  <div />
+  <div />
+  <div />
+</div>

example/components/Button/index.js

@@ -0,0 +1,3 @@
+import Button from "./components/Button.svelte";
+
+export default Button;

example/components/Profile/components/Profile.svelte

@@ -1,14 +1,47 @@
 <script>
+  import Button from "../../Button";
   import Input from "./Input";
   import Section from "./Section";
+  import { dapp } from "../../../../src";
+  import { isLoggedIn, profile } from "../../../../src/stores";
   import { fly } from "svelte/transition";
+  import { createEventDispatcher } from "svelte";
 
-  export let profile;
-
-  let name = "Olivier Sarrouy";
+  let loading = false;
+  let avatar = "";
+  let name = "";
   let motto = "";
   let nickname = "";
   let ship = "";
+
+  isLoggedIn.subscribe(async _isLoggedIn => {
+    if (_isLoggedIn && $profile) {
+      avatar = $profile.avatar;
+      name = $profile.name;
+      nickname = await dapp.profile.get("nickname");
+      ship = await dapp.storage.get("ship");
+      motto = await dapp.storage.get("motto");
+    }
+  });
+
+  const dispatch = createEventDispatcher();
+
+  const logout = () => {
+    dispatch("logout");
+  };
+
+  const submit = async () => {
+    loading = true;
+    try {
+      await dapp.profile.set("name", name);
+      await dapp.profile.set("nickname", nickname);
+      await dapp.storage.set("motto", motto);
+      await dapp.storage.set("ship", ship);
+    } catch (e) {
+      console.log(e);
+    }
+    loading = false;
+  };
 </script>
 
 <style lang="scss">
@@ -28,13 +61,22 @@
       top: -25px;
       left: 1rem;
     }
+
+    .action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 1rem;
+
+      .logout {
+        margin-left: 1rem;
+      }
+    }
   }
 </style>
 
 <section class="profile" transition:fly>
-  <img
-    src="https://ipfs.infura.io/ipfs/Qmav5SF9Ji5ZAmc5MNH3958aocrELn4meX5McPYAzGcmiq"
-    alt="avatar" />
+  <img src={avatar} alt="avatar" />
   <Section
     title="Profile"
     explanation="These fields are saved to your shared 3Box profile">
@@ -51,4 +93,12 @@
       bind:value={motto}
       placeholder="All State Sailors Are Bastards" />
   </Section>
+  <section class="action">
+    <Button disabled={loading} on:click={submit}>save</Button>
+    <p class="logout">
+      or
+      <a href="#" on:click={logout}>logout</a>
+    </p>
+  </section>
+
 </section>