Lista de contactos

Una característica central de BasicPay es una lista de contactos que contiene el nombre de un usuario y las direcciones Stellar asociadas.

Experiencia del usuario

Hay varias formas para que un usuario interactúe con la lista de contactos. Una forma es que pueden añadir un usuario y una dirección en la página /dashboard/contacts (que también verifica si la clave pública es válida!).

Velo en acción aquí: https://basicpay.pages.dev/dashboard/contacts

Implementación de código

Crearemos un store de Svelte para hacer un seguimiento de la lista de contactos de un usuario.

Creando el store de contacts

Al igual que con el resto de nuestros datos de usuario, la lista de contactos vivirá en el localStorage del navegador. Estamos usando el paquete svelt-local-storage-store para facilitar esto. Creamos un store de Svelte para contener los datos, y añadimos varias funciones personalizadas para gestionar la lista: empty, remove, add, favorite y lookup.

nota

Este código tutorial está simplificado para mostrarlo aquí. El código está completamente tipado, documentado y comentado en el repositorio de código fuente.

/src/lib/stores/contactsStore.js

import { v4 as uuidv4 } from "uuid";
import { persisted } from "svelte-local-storage-store";
import { StrKey } from "stellar-sdk";
import { error } from "@sveltejs/kit";
import { get } from "svelte/store";

// We are wrapping this store in its own function which will allow us to write
// and customize our own store functions to maintain consistent behavior
// wherever the actions need to take place.
function createContactsStore() {
  // Make a `persisted` store that will hold our entire contact list.
  const { subscribe, set, update } = persisted("bpa:contactList", []);

  return {
    subscribe,

    // Erases all contact entries from the list and creates a new, empty contact list.
    empty: () => set([]),

    // Removes the specified contact entry from the list.
    remove: (id) =>
      update((list) => list.filter((contact) => contact.id !== id)),

    // Adds a new contact entry to the list with the provided details.
    add: (contact) =>
      update((list) => {
        if (StrKey.isValidEd25519PublicKey(contact.address)) {
          return [...list, { ...contact, id: uuidv4() }];
        } else {
          throw error(400, { message: "invalid public key" });
        }
      }),

    // Toggles the "favorite" field on the specified contact.
    favorite: (id) =>
      update((list) => {
        const i = list.findIndex((contact) => contact.id === id);
        if (i >= 0) {
          list[i].favorite = !list[i].favorite;
        }
        return list;
      }),

    // Searches the contact list for an entry with the specified address.
    lookup: (address) => {
      let list = get(contacts);
      let i = list.findIndex((contact) => contact.address === address);
      if (i >= 0) {
        return list[i].name;
      } else {
        return false;
      }
    },
  };
}

// We export `contacts` as the variable that can be used to interact with the contacts store.
export const contacts = createContactsStore();

Fuente: https://github.com/stellar/basic-payment-app/blob/main/src/lib/stores/contactsStore.js

Usando el contacts store

En la página /dashboard/contacts

También tenemos una página dedicada a gestionar contactos. La página /dashboard/contacts permitirá al usuario recopilar y gestionar una lista de entradas de contacto que almacena el nombre del contacto y la dirección Stellar. El contacto también puede ser marcado o desmarcado como un contacto "favorito" que se mostrará en la página principal /dashboard.

/src/routes/dashboard/contacts/+page.svelte

<script>
  // We import things from external packages that will be needed
  import { Trash2Icon, UserPlusIcon } from "svelte-feather-icons";

  // We import any Svelte components we will need
  import TruncatedKey from "$lib/components/TruncatedKey.svelte";

  // We import any stores we will need to read and/or write
  import { contacts } from "$lib/stores/contactsStore";

  // We declare a _reactive_ component variable that will hold information for
  // a user-created contact entry, which can be added to the contacts store.
  $: newContact = {
    name: "",
    address: "",
    favorite: false,
    id: "",
  };
</script>

<!-- HTML has been omitted from this tutorial. Please check the source file -->

Fuente: https://github.com/stellar/basic-payment-app/blob/main/src/routes/dashboard/contacts/+page.svelte

En la página /dashboard

El contacts store ahora se exporta desde este archivo y puede ser accedido y utilizado dentro de una página o componente de Svelte. Aquí tienes cómo hemos implementado un componente de "contactos favoritos" para mostrarlo en el panel principal de BasicPay.

/src/routes/dashboard/components/FavoriteContacts.svelte

<script>
  // We import the `contacts` store into our Svelte component
  import { contacts } from "$lib/stores/contactsStore";
  import TruncatedKey from "$lib/components/TruncatedKey.svelte";

  // `$:` makes a Svelte variable reactive, so it will be re-computed any time
  // the `$contacts` store is modified. We access a Svelte store by adding `$`
  // to the beginning of the variable name.
  $: favoriteContacts = $contacts?.filter((contact) => contact.favorite);
</script>

<!-- HTML has been omitted from this tutorial. Please check the source file -->

Fuente: https://github.com/stellar/basic-payment-app/blob/main/src/routes/dashboard/components/FavoriteContacts.svelte