Update flow (#2018)

* Rwender slot

* Add target prop

* Add auth pages

* Fix style

packages/experiments/src/routes/test/Virtu.svelte

@@ -7,7 +7,7 @@ export let index: number
 
 let show = index < 3
 
-const checkToShow = debounce(750, async (activeIndex: number) => {
+const checkToShow = debounce(200, async (activeIndex: number) => {
   await tick()
   setTimeout(() => {
     show = index > activeIndex - 4 && index < activeIndex + 4
@@ -18,6 +18,4 @@ $: checkToShow(activeIndex)
 $: console.log(index, show)
 </script>
 
-{#if show}
-  <slot {show} />
-{/if}
+<slot {show} />

packages/web-client/src/components/button/Button.svelte

@@ -5,6 +5,7 @@ export let type: 'primary' | 'secondary' = 'primary'
 export let disabled = false
 export let href = ''
 export let preload = false
+export let target: string | undefined = undefined
 export { exportClass as class }
 let exportClass: any = ''
 
@@ -24,11 +25,11 @@ $: classes = c(
 </script>
 
 {#if href && !preload}
-  <a {href} class={classes}>
+  <a {target} {href} class={classes}>
     <slot />
   </a>
 {:else if href && preload}
-  <a data-sveltekit-preload-data="tap" {href} class={classes}>
+  <a {target} data-sveltekit-preload-data="tap" {href} class={classes}>
     <slot />
   </a>
 {:else}

packages/web-client/src/routes/(feed)/menu/auth/+page.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+import Button from '$components/button/Button.svelte'
+import LoginButton from '$components/login/LoginButton.svelte'
+import { authState } from '$stores/auth'
+import userProfile from '$stores/userProfile'
+</script>
+
+<div
+  class="flex h-full w-full flex-col justify-between space-y-16 overflow-hidden overflow-y-auto px-8 py-20">
+  <div class="flex w-full shrink-0 flex-col space-y-10">
+    {#if $authState.isLoggedIn}
+      <div class="sticky flex w-full items-center space-x-4 pb-2">
+        <img
+          alt="profile"
+          class="h-24 w-24 rounded-full object-cover"
+          src={$userProfile.profile_picture_url} />
+        <div class="flex flex-col space-y-1">
+          <div class="text-xl">
+            {$userProfile.display_name}
+          </div>
+        </div>
+      </div>
+      <div>Please login again to connect your account to our dApp.</div>
+      <Button href="/menu/reauth" target="_blank">Take me there</Button>
+    {:else}
+      <div class="flex items-center justify-center">
+        <LoginButton />
+      </div>
+    {/if}
+
+    <div class="flex flex-col items-center justify-center space-y-4">
+      <div class="text-sm text-white/50">What is this?</div>
+      <div>
+        Lorem Ipsum is simply dummy text of the printing and typesetting
+        industry. Lorem Ipsum has been the industry's standard dummy text ever
+        since the 1500s, when an unknown printer took a galley of type and
+        scrambled it to make a type specimen book. It has survived not only five
+        centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release
+        of Letraset sheets containing Lorem Ipsum passages, and more recently
+        with desktop publishing software like Aldus PageMaker including versions
+        of Lorem Ipsum.
+      </div>
+    </div>
+  </div>
+</div>

packages/web-client/src/routes/(feed)/menu/reauth/+page.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+import Button from '$components/button/Button.svelte'
+import Icon from '$components/icon/Icon.svelte'
+import LoginButton from '$components/login/LoginButton.svelte'
+import { authState } from '$stores/auth'
+import userProfile from '$stores/userProfile'
+
+let loggedIn = false
+</script>
+
+<div
+  class="flex h-full w-full flex-col justify-between space-y-16 overflow-hidden overflow-y-auto px-8 py-20">
+  <div class="flex w-full shrink-0 flex-col space-y-10">
+    {#if loggedIn}
+      <div class="text-3xl font-bold">Success!</div>
+      <Icon name="checkmark" class="h-10 w-10"></Icon>
+      <div>You have succesfully migrated your hot or not profile.</div>
+      <div class="text-sm">
+        Please, also migrate all of your profiles (if you have any)
+      </div>
+
+      <Button on:click={() => window.close()}>Take me back!</Button>
+    {:else}
+      <div class="flex flex-col items-center justify-center space-y-4">
+        <div class="text-3xl font-bold">Success!</div>
+        <div>You are reaunticating your profile to connect to our dapp</div>
+        <div>Make sure this is your profile for the same:</div>
+        <div class="flex items-center space-x-2 py-4">
+          <img
+            alt="profile"
+            class="h-12 w-12 rounded-full object-cover"
+            src={$userProfile.profile_picture_url} />
+          <div class="flex flex-col space-y-1">
+            <div class="text-xl">
+              {$userProfile.display_name}
+            </div>
+          </div>
+        </div>
+
+        <Button on:click={() => (loggedIn = true)}>Re-authneticate</Button>
+      </div>
+    {/if}
+
+    <div class="flex flex-col items-center justify-center space-y-4">
+      <div class="text-sm text-white/50">What is this?</div>
+      <div>
+        We are migrating our platform so we need you to reautnticate.
+        <br />
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+        when an unknown printer took a galley of type and scrambled it to make a
+        type specimen book. It has survived not only five centuries, but also the
+        leap into electronic typesetting, remaining essentially unchanged. It was
+        popularised in the 1960s with the release of Letraset sheets containing Lorem
+        Ipsum passages, and more recently with desktop publishing software like Aldus
+        PageMaker including versions of Lorem Ipsum.
+      </div>
+    </div>
+  </div>
+</div>