Enable Caching for Performance

A simple step to let elements cache some data.

We expose a function called initCachingLayer that enables the caching mechanism used in elements to reduce loading times for chains and assets data. This significantly improves the user experience.

import { initCachingLayer, AsyncIDBStorage } from '@leapwallet/elements'

// call it in top level code or put it inside a useEffect - your choice
initCachingLayer(AsyncIDBStorage)

We will not clear any storage keys expect for the ones we create.

We have also shipped 3 different storage options that you can directly use!

1. AsyncIDBStorage - uses IndexedDB (persists between sessions)

2. AsyncLocalStorage - uses localStorage (persists between sessions)

3. AsyncMapStorage - use a javascript Map object (no persistence between sessions)

We recommend you to use AsyncIDBStorage

Apart from these three options, it accepts any async storage option that satisfies the following interface.

interface IAsyncStorage {
  /**
   * Get the value for the given key.
   */
  getItem(key: string): Promise<string | null>
  /**
   * Set the value for the given key.
   */
  setItem(key: string, value: string): Promise<void>
  /**
   * Remove the value for the given key.
   */
  removeItem(key: string): Promise<void>
  /**
   * Clear all data for this storage.
   */
  clear(): Promise<void>
}