Top Section and Animation (#86)

# Description

Completed the top section of the page and the associated animation

- Closes #59 
- Closes #85 
- Part of #34 

Note: Some of those section margins end up quite large. We'll be
cleaning those up at the end so we can make sure the margins are
consistent.

src/components/Animations/Home.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { base } from '$app/paths';
+  import LottieWrapper from '$lib/vendor/LottieWrapper.svelte';
+</script>
+
+<LottieWrapper
+  class={$$restProps.class}
+  src="{base}/animation/home-dot.lottie"
+  autoplay
+  playOnVisible
+  speed="0.8"
+  layout={{ fit: 'fit-width', align: [0.5, 0.5] }}
+  renderConfig={{ autoResize: true }}
+/>

src/components/Sections/Mission/MissionItems.svelte

@@ -51,7 +51,9 @@
   {#each missionItems as item}
     <MissionItem>
       <span slot="icon"><img src={item.icon} alt={item.iconAlt} /></span>
-      <p slot="body" bind:innerHTML={item.body} contenteditable="true"></p>
+      <p slot="body">
+        {@html item.body}
+      </p>
     </MissionItem>
   {/each}
 </div>

src/components/Sections/Top/MsaCounter.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import { getMsaCount } from '$lib/metrics';
+
+  let msaCount = 1_333_820;
+  const msaCountAnimationMs = 300;
+  let updateIntervalMs = 5000;
+  let showMsaCount = false;
+  $: displayMsaCount = msaCount.toLocaleString();
+  // Make this as long as possible for the variable width font handling
+  $: widthMsaCount = displayMsaCount.replaceAll(/[0-9]/g, '8');
+
+  async function updateMsaCount(skipAnimation = false) {
+    const newMsaCount = await getMsaCount();
+    if (newMsaCount !== msaCount) {
+      // Toggle the animation classes so it is reapplied
+      showMsaCount = skipAnimation ? showMsaCount : false;
+      await tick();
+      await new Promise((r) => setTimeout(r, msaCountAnimationMs + 100));
+      msaCount = newMsaCount;
+      showMsaCount = true;
+    }
+  }
+
+  onMount(() => {
+    // Setup number and skip the animation first time
+    // Try to prevent showing the static number if we can get it in under 1000ms
+    const showStatic = setTimeout(() => {
+      if (!showMsaCount) showMsaCount = true;
+    }, 1000);
+    updateMsaCount(true);
+    const intervalId = setInterval(updateMsaCount, updateIntervalMs);
+    return () => {
+      clearTimeout(showStatic);
+      clearInterval(intervalId);
+    };
+  });
+</script>
+
+<div
+  class="bg-navy px-4 py-3 text-[40px] leading-none text-white sm:text-[50px] md:text-[calc(100vw/23)] xl:text-[75px]"
+>
+  {#if showMsaCount}
+    <div
+      in:fade={{ duration: msaCountAnimationMs }}
+      out:fade={{ duration: msaCountAnimationMs }}
+      class="absolute left-0 w-full px-4 text-right font-title tracking-wide"
+    >
+      {displayMsaCount}
+    </div>
+  {/if}
+  <div class="invisible font-title tracking-wide">
+    {widthMsaCount}
+  </div>
+  <div class="text-right text-[12px] font-semibold uppercase md:text-[0.25em]">New User Activations</div>
+</div>

src/components/Sections/Top/Top.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import SectionWrapper from './../SectionWrapper.svelte';
+  import SlideIn from '../../SlideIn.svelte';
+  import HomeAnimation from '../../Animations/Home.svelte';
+  import MsaCounter from './MsaCounter.svelte';
+
+  // top-[calc(255px-((100vw-1300px)*0.075))] !?!?!?!
+  // That's to be able to responsively handle the movement of the animation
+</script>
+
+<SectionWrapper class="freq-container flex flex-col pb-f64 md:flex-row md:items-center md:justify-center">
+  <div class="mb:h-[500px] relative mb-5 flex h-[300px] w-full self-stretch sm:h-[380px] md:mb-0 md:w-1/2 lg:h-[700px]">
+    <HomeAnimation />
+    <div
+      class="math absolute left-[20px] top-[25%] sm:left-[24%] md:left-[23%] md:top-[calc(85px-((100vw-1300px)*0.075))] lg:top-[calc(250px-((100vw-1300px)*0.075))] xl:top-[220px]"
+    >
+      <SlideIn>
+        <MsaCounter />
+      </SlideIn>
+    </div>
+  </div>
+  <div class="w-full sm:max-w-[260px] sm:pl-f32 md:w-1/2 md:max-w-[300px] md:pl-0 lg:max-w-[380px]">
+    <SlideIn>
+      <div class="title-70 w-full text-primary sm:text-left">Bringing</div>
+      <div class="title-70 relative w-full text-primary sm:text-right">Humanity</div>
+      <div class="w-full italic text-teal sm:text-[28px] lg:text-[32px]">to the</div>
+      <div class="title-70 w-full text-primary sm:text-left">People's</div>
+      <div class="title-70 w-full text-primary sm:text-right">Internet</div>
+    </SlideIn>
+  </div>
+</SectionWrapper>

src/components/Sections/Users/UsersItems.svelte

@@ -33,7 +33,9 @@
 <div class="mx-auto grid w-fit gap-f56 xs:grid-cols-1 lg:grid-cols-3">
   {#each userItems as { icon, iconAlt, title, body }}
     <UsersItem {icon} {iconAlt} {title}>
-      <div slot="body" bind:innerHTML={body} contenteditable="true" class="flex flex-col gap-f16"></div>
+      <div slot="body" class="flex flex-col gap-f16">
+        {@html body}
+      </div>
     </UsersItem>
   {/each}
 </div>

src/lib/metrics.ts

@@ -0,0 +1,29 @@
+const providerUriList = ['https://0.rpc.frequency.xyz', 'https://1.rpc.frequency.xyz'];
+
+function hexToBigEndian(input: string) {
+  const work = input.replace('0x', '');
+  const reversedString = [];
+  for (let i = 0; i < work.length; i += 2) {
+    reversedString.unshift(`${work[i]}${work[i + 1]}`);
+  }
+  return parseInt(reversedString.join(''), 16);
+}
+
+export async function getMsaCount() {
+  const request = {
+    jsonrpc: '2.0',
+    method: 'state_getStorage',
+    // This is the key for msa.currentMsaIdentifierMaximum
+    params: ['0x9f76716a68a582c703dd9e44700429b921c5be4bcc880b0f4de118246738f8c7'],
+    id: 1,
+  };
+  const options = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(request),
+  };
+  const response = await (await fetch(providerUriList[0], options)).json();
+  return hexToBigEndian(response.result);
+}

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Top from '../components/Sections/Top.svelte';
+  import Top from '../components/Sections/Top/Top.svelte';
   import Mission from '../components/Sections/Mission/Mission.svelte';
   import About from '../components/Sections/About.svelte';
   import Users from '../components/Sections/Users/Users.svelte';