DEV Community: Fabio Giolito

Web3 with Svelte and Moralis

Fabio Giolito — Tue, 05 Apr 2022 11:26:07 +0000

The goal of this app is to create a website where you can Sign In with an Ethereum Wallet using MetaMask, and create a profile. This should cover enough of how to use Svelte and Moralis so you can use as a starting point for your app.

Why Svelte (and not React)

Svelte is a Javascript framework for people who love HTML and CSS. React moves everything inside Javascript, making things unnecessarily complex, forcing you to re-learn how to do basic things. Svelte is much easier to understand, requires less code, and feels more like an extension of Javascript.

Why Moralis

Moralis is a Backend-as-a-service that also gives you simple APIs to work with multiple chains. Authentication, Database, Storage and Cloud functions are part of what you get out of the box. Having all that on the same place makes things faster to setup and develop.

Setting up the project

Let's jump straight into terminal and start a new SvelteKit project.

$ npm init svelte@next web3-starter
$ cd web3-starter
$ npx svelte-add tailwindcss
$ npm install
$ npm run dev -- --open

If you don't have NPM installed read this.
Adding Tailwind is optional of course, but I enjoy using it. I won't focus on styles to keep things brief.

Adding Moralis

You'll need to create an account on Moralis, then create a server. Add your server details to a .env.development file on the root of your project.

VITE_PUBLIC_MORALIS_APP_ID="paste your app id here"
VITE_PUBLIC_MORALIS_SERVER_URL="paste your server url here"

On terminal, stop the server with ctrl + c then restart it with $ npm run dev to pick up these variables.

Then add Moralis scripts to the head of your app.html.

  <!-- Moralis -->
  <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
  <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

Now to configure Moralis, go to __layout.svelte. We'll add a function to get our .env variables and start Moralis, then call this function when the initial layout is Mounted (loaded), then load the rest of the app once Moralis has started.

<script>
  import "../app.css";
  import { onMount } from 'svelte';

  let moralisStarted = false; // track if started

  function configureMoralis() {
    // Get Env variables
    const serverUrl = import.meta.env.VITE_PUBLIC_MORALIS_SERVER_URL;
    const appId = import.meta.env.VITE_PUBLIC_MORALIS_APP_ID;
    // Start Moralis
    Moralis.start({ serverUrl, appId });
    // Let the app know it's started
    moralisStarted = true;
  }

  // Call configuration function when mounted
  onMount(() => {
    configureMoralis();
  });
</script>

<!-- If started, page content is loaded in this slot -->
{#if moralisStarted}
  <slot />
{/if}

Using Svelte Stores

Svelte Stores are used to save information that you'll need to access from multiple areas of your application.

We'll create a currentUser store to track who's the current user logged in to our app.

Information on the User table in Moralis can only be accessed by the user themselves for privacy and security reasons. So we'll create a public profile table on our database to add public user details and use a Store to track that too.

// new file: /src/lib/stores.js

import { writable } from "svelte/store";

export const currentUser = writable('loading');
export const currentProfile = writable('loading');

These don't look like much, but they're super powerful. We can import these stores and access their values in any part of our application with a $ before the store name (eg: $currentUser), that way they update the UI automatically when values change.

I'm initializing both stores with the value 'loading' so we know if no data was found or if we're still waiting for data to load.

Sign in with Wallet

Time to create our Sign in button in /src/lib/ButtonSignIn.svelte

<script>
  import { currentUser, currentProfile } from "$lib/stores";

  // Sign in function
  async function handleSignIn() {
    if ($currentUser) return;

    // Authenticate with MetaMask (Moralis API)
    const user = await Moralis.authenticate({
      signingMessage: "Sign in with Ethereum"
    });

    // Update value of current user store
    $currentUser = user;
  }

  // Sign out function
  async function handleSignOut() {
    await Moralis.User.logOut();
    $currentUser = null;
    $currentProfile = null;
  }
</script>

<!-- Still waiting for user data -->
{#if $currentUser == 'loading'}
  <p>Loading user…</p>

<!-- User is logged in, check for profile -->
{:else if $currentUser}

  <!-- profile still loading -->
  {#if $currentProfile == 'loading'}
    <p>Loading profile…</p>

  <!-- has a profile -->
  {:else if $currentProfile}
    <p>User is {$currentProfile.get("username")}</p>
    <button on:click={handleSignOut}>Sign out</button>

  <!-- no profile found -->
  {:else}
    <p>Create profile (To do…)</p>
  {/if}

<!-- User is logged out, show Sign in button-->
{:else}
  <button on:click={handleSignIn}>
    Sign in with MetaMask
  </button>
{/if}

Here we're covering multiple states. We first look for the current user, then we look for that user's profile. If we have both, everything is fine and the user is fully logged in.

But we're stuck on loading. We still need to ask Moralis who's the current user (if there is one) when the page loads to know if we should show the log in button. This is something we need to happen on every page, so it should go on __layout.svelte.

<script>
  import "../app.css";
  import { onMount } from 'svelte';

  // Import stores
  import { currentUser, currentProfile } from "$lib/stores";

  // Import our sign in button
  import ButtonSignIn from "$lib/ButtonSignIn.svelte";

  let moralisStarted = false;

  // Get user when moralisStarted changes
  $: if (moralisStarted) getCurrentUser();

  // Get profile when value of $currentUser changes
  $: if ($currentUser) getCurrentProfile();

  async function configureMoralis() {...}

  // Check Moralis for current user
  async function getCurrentUser() {
    let user = Moralis.User.current();
    $currentUser = user;
    $currentProfile = 'loading';
  }

  // Check Moralis for current profile
  async function getCurrentProfile() {
    if ($currentUser == 'loading') return; // Ignore if still loading

    // Get Current Profile ID from Current User
    let id = $currentUser?.get("currentProfile")?.id;
    if (id) {

      // Get Profile from Moralis and update store
      const query = new Moralis.Query("Profile");
      $currentProfile = await query.get(id); // Profile or null

    } else {
      $currentProfile = null; // No profile created yet
    }
  }

  ...
</script>

{#if moralisStarted}

  <!-- Add sign in to top of the page -->
  <ButtonSignIn />
  <hr />

  <!-- Content for index.svelte and other pages will load here -->
  <slot />

{/if}

The $: indicates a reactive statement in Svelte. It means the piece of code will run any time values change.

Creating a profile

Now we need to let the user create a profile after signing in. So let's create a form for that in a new file /src/lib/ProfileCreate.svelte.

<script>
  import { currentUser, currentProfile } from "$lib/stores";

  // Any data we want in our profile
  let profileData = {
    username: "",
    bio: ""
  };

  async function handleCreateProfile() {

    // Get reference to Profile object from Moralis
    const Profile = Moralis.Object.extend("Profile");

    // Create a new profile object
    let profile = new Profile();

    // Add data to profile object
    profile.set("username", profileData.username.toLowerCase());
    profile.set("bio", bio);
    profile.set("user", $currentUser);

    // Save profile in Moralis
    await profile.save();

    // Update profile store
    $currentProfile = profile;

    // Save current profile on currentUser in Moralis
    $currentUser.set("currentProfile", profile);
    await $currentUser.save();
  }
</script>

<p>
  Welcome, {$currentUser.get("ethAddress")}. <br />
  Please create a profile.
</p>
<p>
  <input type="text"
    bind:value={profileData.username}
    placeholder="Username"
  />
</p>
<p>
  <textarea
    bind:value={profileData.username}
    placeholder="Bio (optional)"
  />
</p>
<p>
  <button
    on:click={handleCreateProfile}
    disabled={!profileData.username}
  >
    Create profile
  </button>
</p>

Svelte's data binding on the inputs mean the profileData variable is always in sync with what the user has typed in without any extra work. We're also disabling the button until the user adds some username.

Show profile creation

Now back in the ButtonSignIn component, we'll show the profile creation form when user is logged in but no profile has been found.

<script>
  import { currentUser, currentProfile } from "$lib/stores";

  // Import profile create form
  import ProfileCreate from "$lib/ProfileCreate.svelte";

  ...
</script>

{#if $currentUser == 'loading'}
  ...

{:else if $currentUser}

  {#if $currentProfile == 'loading'}
    ...

  {:else if $currentProfile}
    ...

  <!-- no profile found -->
  {:else}

    <!-- show create profile form -->
    <ProfileCreate />

  {/if}

{:else}
  ...
{/if}

This already covers a lot of concepts you can use for adding more features. To add new tables and read data copy what we did for Profiles. To access data across your app create a new store.

Check out Svelte and Moralis docs for other details.

Leave a comment if something was unclear, you have questions, or with what you're trying to build and I can add a part 2 to this article. Follow me here or on Twitter to see when I post new articles. 👋

Create portal slots in Svelte using actions

Fabio Giolito — Wed, 01 Sep 2021 20:57:26 +0000

Sometimes you want the content of a child component to live elsewhere in a parent. Django has template inheritance. Rails has content_for. Svelte has slots, but they send content from parent to child, not the other way around.

In this article we'll look into a solution for that.

The problem

Say you have a nice generic <Modal /> component that shows some content over the screen.

As you start creating multiple Modals across your app, you have to define them on the same component that triggers it to keep things readable, share state, have event listeners…

So this structure is not uncommon:

<!-- Home.svelte -->
<div class="content">
  <Main>...</Main>
  <Sidebar />
</div>

<!-- Sidebar.svelte -->
<div class="sidebar">
  <Banner />
</div>

<!-- Banner.svelte -->
<div class="banner">
  <button>View promotion</button>
</div>

<Modal>
   My custom promotion content in a modal
</Modal>

And so far that's all fine. Your modal is rendered inside the .sidebar div, but you're using position: fixed to make it "break out" and appear over everything, so doesn't really matter where it is in the Dom, right?

Well... If your sidebar has overflow: hidden or any transform set, then your modal will be clipped inside it, and that's not what you want.

So it does matter where the modal is in the Dom. Your modal should be all the way up in Home.svelte so nothing "contains" it, but Svelte slots don't work that way, and there's no way for to send that modal up to .

The solution

We still want to define our modal inside and take advantage of all that gives us, but have it be rendered outside the box.

We're talking about manipulating the Dom, and that made me look into Svelte Actions. If you're not familiar, an action is just a function that gets a Dom node to play with.

// actions.js

// Portal action
export function portal(node, name) {
  // find an element with this ID somewhere in the document
  let slot = document.getElementById(name);
  // move this node to that element
  slot?.appendChild(node);

  return {
    destroy() {
      // remove the node when component is destroyed
      node.remove()
    }
  }
}

<!-- Modal.svelte -->
<script>
  import { portal } from "./actions.js";
  export let isOpen = false;
</script>

{#if isOpen}

  <!-- Modal div with portal action -->
  <div use:portal={'modals'} class="modal">
    <slot></slot>
  </div>

{/if}

Whenever isOpen is true, our modal div is created and the portal action is called. Then we find an element with id="modals" in our layout and move the modal div to that element.

So we just need to have a #modals div all the way up in our Dom, let's put it in Home.svelte

<!-- Home.svelte -->
<div class="content">
  <Main>...</Main>
  <Sidebar />
</div>

<!-- Portal slot for Modals -->
<div id="modals"></div>

Does it work?

Yes! Surprisingly all Svelte features still work: Props, bindings, custom event listeners, lifetime cycle events, instance references…

We only moved the node, we didn't clone it or duplicate it, so Svelte's reference remains unchanged.

I admit this made me nervous at first, but I threw everything I could think of at it and it didn't break.

In any case let me know if I missed something and should not be doing this.

Multiple portals

Our portal action is generic, it takes a slot name as a parameter. This means we can use it with different slots in different parts of our app.

Here's a more extreme example:

<!-- Home.svelte -->
<Navbar id="navbar">
  <Logo />
  <Menu />
</Navbar>

<div class="container">
  <Main />
  <Sidebar>
    <div id="sidebar-logged-in-actions" />
    <RelatedContent />
  </Sidebar>
</div>

<LoggedInUser />

<!-- LoggedInUser.svelte -->
<script>
  ...
</script>

{#if isLoggedIn}

  <!-- append this to navbar -->
  <div use:portal={'navbar'}>
    <!-- Todo: logged in user avatar with dropdown options -->
  </div>

  <!-- actions only available for logged in users -->
  <div use:portal={'sidebar-logged-in-actions'}>
    <FeedbackForm />
  </div>

{/if}

Here's a Repl with some tests: https://svelte.dev/repl/2122ac70a8494ff4a6fca4ba61b512be?version=3.42.4

Update & Disclosure

After writing this article I found out that React has "Portals", which lead me to find the svelte-portal project that has pretty much the same solution but is already packaged and accounts for server-side rendering. Consider using it instead of hard-coding your own solution.

I renamed my action name from "Layout Slots" to "Portal" so people can find this article more easily and because it's a cooler name. Also updated article title to reflect the name change.

What to do with your parked domains?

Fabio Giolito — Tue, 25 May 2021 08:17:31 +0000

You know when you have an idea for a side-project, and you think "This time I'm actually going to do it" so you buy the domain, then a month goes by... I know you do, we've all been there.

What do you do with those domains? I used to just redirected them to my personal website, but that has also been neglected for quite a while it's embarrassing.

So I started looking into that. Here's what I wanted:

A very simple "Coming soon" page customized for each domain.
Proper meta tags and SEO means server-side rendering.
One server, one project, one deploy, for all domains.

The solution

I've been meaning to try Vercel.com to host projects, so I started a new project using their Next.js template. After a couple of clicks, it was added to my Github account and I cloned it on my computer.

In your Vercel project settings, you can add multiple domains. Perfect! I added them there and pointed them to Vercel's nameservers. My template project was now running on every domain.

I heard great things about Netlify too, so check them both out if you're looking to do something similar for your domains.

The code

So now I needed to change the page that gets displayed. And most importantly, I needed to get the current domain name from the server request to show on the page.

// index.js
import Head from 'next/head'

// Pass host as prop
export async function getServerSideProps(context) {
  return { props: { host: context.req.headers.host } }
}

export default function Home({host}) {
  return (
    <main>
      <Head>
        <title>{host}</title>
      </Head>

      <h1>{host}</h1>
      <p>Coming soon</p>
    </main>
  )
}

And I added some SEO tags, and Google analytics to <Head> as well.

<Head>
  <title>{host}</title>
  <meta name="description" content="Coming soon" />
  <link href="/favicon.png" rel="shortcut icon" type="image/x-icon"/>
  <link href="/touchicon.png" rel="apple-touch-icon"/>
  <meta content="width=device-width, initial-scale=1" name="viewport"/>
  <meta content={host} property="og:title"/>
  <meta content={host} property="twitter:title"/>
  <meta content="Coming soon" property="og:description"/>
  <meta content="Coming soon" property="twitter:description"/>

  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-[your-code]"/>
  <script
    dangerouslySetInnerHTML={{
      __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'UA-[your-code]', {
          'anonymize_ip': false
        });
      `,
    }}
  />
</Head>

With some CSS It was looking and working great. But I noticed Next.js was adding some javascript to the page, even though I didn't need any updates on the client-side.

I found this option which seems to disable the client-side javascript:

// index.js
export const config = { unstable_runtimeJS: false }

So now I have one project serving customized pages to each domain. With just a push to Github it's deployed to all domains.

Whenever I register a new domain I can just add them to the Vercel project and they're live, no need to touch the code.

Do you have a different solution? Let me know in the comments!

Create a color theme with these upcoming CSS features

Fabio Giolito — Mon, 05 Apr 2021 21:30:13 +0000

Safari Technology Preview added support to three new CSS color features that are coming soon to other browsers. To test the features mentioned in this article you need to enable them on the Develop menu.

Let's review them and see how they apply to creating a color theme.

CSS Relative color syntax

Relative color allows us to manipulate and convert any color to any format. We can use it to create a color palette from any chosen color.

:root {
  --theme-primary: #8832CC;
}

We want to create a color palette based on our primary color. Each step should have the same hue and saturation as the original, but a different lightness value, going from lighter to darker.

We'll convert our color to the HSL format (hue, saturation, lightness) and modify the lightness parameter using the new Relative color syntax with the from keyword.

Not only we converted our primary color from Hex to HSL, we also made it darker by changing its lightness value to 30%.

Using this, we can now create our palette:

.bg-primary-100 {
  background-color: hsl(from var(--theme-primary) h s 90%);
}
.bg-primary-200 {
  background-color: hsl(from var(--theme-primary) h s 80%);
}
.bg-primary-300 {
  background-color: hsl(from var(--theme-primary) h s 70%);
}
...

Because we're using CSS variables, if our --theme-primary color changes, all our .bg-primary-xxx classes will update automatically.

CSS Color-contrast

Our color palette and theme are looking great, and this might be just what we need. But sometimes that's not exactly what you want.

Say we want to allow the user to choose their background color, and have the rest of the colors to adapt to that background.

Here we're not looking to modify the original color, we need to modify our text and other elements to be light or dark depending on the chosen primary color. This is where the new color-contrast css function comes in handy.

.text-contrast-primary {
  color: color-contrast(var(--theme-primary) vs white, black);
}

Our .text-contrast-primary class will automatically compare our --theme-primary color to the specified options white or black and choose the one with the best contrast.

Similarly we can add a class for a contrast background. To take things further let's also support Tailwind's bg-opacity classes so we can fade our background color.

.bg-contrast-primary {
  /* get which color we should use (white or black) */
  --contrast-color: color-contrast(var(--theme-primary) vs white, black);
  --tw-bg-opacity: 1;
  /* converting white or black to rgba to support alpha */
  background-color: rgba(from var(--contrast-color) r g b var(tw-bg-opacity));
}

Our content section is done. The sidebar and navigation have the proper background color, but we can't use .text-contrast-primary on them since that's the same color as the background. We need the inverse of our contrast color.

So let's add this awkwardly long named class to fix that:

.text-contrast-primary-inverted {
  /* get contrast color */
  --contrast-color: color-contrast(var(--theme-primary) vs white, black);
  /* get the contrast color of that contrast color */
  color: color-contrast(var(--contrast-color) vs white, black);
}

And here's our html:

<body class="bg-primary">
  <nav class="bg-contrast-primary bg-opacity-70 text-contrast-primary-inverted">Navigation</nav>
  <main class="text-contrast-primary">Content</main>
  <aside class="bg-contrast-primary bg-opacity-70 text-contrast-primary-inverted">Sidebar</aside>
</body>

CSS color-mix

In our first example we made a color palette based on the Hue and Saturation of our primary color. If we apply that same code to this other color we get this:

Our original color doesn't appear in our palette. It falls somewhere between the second and third shade, not close to the middle. If we want our palette to be lighter and darker shades of our primary color we can use color-mix instead.

.text-primary-lightest {
  color: color-mix(var(--theme-primary), white, 30%);
}
.text-primary-dark {
  color: color-mix(var(--theme-primary), black 10%);
}
.text-primary-darker {
  color: color-mix(var(--theme-primary), black 20%);
}
...

You can mix any two colors this way, and specify different quantities, just like mixing real paint.

Now we have a color for error messages that matches better with our primary color.

.text-error {
 color: color-mix(var(--theme-primary), #FF0000 50%)
}

I hope you enjoyed this article. Comment which feature is your favorite and what other ways you can see yourself using them.

Facebook Reactions in SwiftUI

Fabio Giolito — Tue, 02 Jul 2019 19:22:02 +0000

About 60 Lines. I’d never guess you could do all that in so few lines. With those transitions and interruptible animations?

I spent the weeks following WWDC looking into Swift UI. At first I thought it was really basic and you couldn’t do much custom work. But when you start building components from scratch you get how flexible it is.

This is a prototype built in 1 hour before going to bed. I woke up to it blowing up on Twitter (at least for my engagement average).

And here’s the code, if you know some things about SwiftUI and programming it should be understandable. But here’s the overview:

UI is controlled by state. Am I dragging my finger from the Like Button? Then show/hide reactions. Which reaction is selected? Make that one bigger.

Then it’s just a matter of changing those states. When I start dragging, change the isDragging to true. Then based on how far I’ve dragged calculate which reaction is selected.

Code:
https://gist.github.com/fabiogiolito/424e1d68766fc054ad4bf6fd3506e9c3

Tweet:
https://twitter.com/fabiogiolito/status/1142226669471748096