Getting Started

@dustlabs/profiles/core is a library containing everything you need to start working with de[id]. It makes it easy to "Sign In," display profile and holdings information, interact with de[id], and much more.

Installation

Install @dustlabs/profiles and its @dustlabs/web (opens in a new tab) and framer-motion (opens in a new tab) peer dependencies.

yarn add @dustlabs/profiles @dustlabs/web framer-motion

Configure projects

First, choose the projects that you want to get the holdings of for de[id]. This uses an array of ProjectMetadata objects, which are defined as:

interface ProjectMetadata {
  /**
   * The project's ID.
   */
  id: string;
  /**
   * The project's name.
   */
  label: string;
  /**
   * The project's list of smart contracts (multiple if exist over multiple chains).
   */
  contracts: string[];
}

Below is an example using all of Dust Labs projects.

import { ProjectMetadata } from "@dustlabs/profiles/types";
 
const DEGODS_CONTRACT = "0x8821BeE2ba0dF28761AffF119D66390D594CD280";
const Y00TS_CONTRACT = "0x670fd103b1a08628e9557cD66B87DeD841115190";
const BTC_DEGODS_CONTRACT = "BTC DeGods";
 
const PROJECTS: ProjectMetadata[] = [
  {
    id: "degods",
    label: "DeGods",
    contracts: [DEGODS_CONTRACT],
  },
  {
    id: "y00ts",
    label: "y00ts",
    contracts: [Y00TS_CONTRACT],
  },
  {
    id: "btc-degods",
    label: "BTC DeGods",
    contracts: [BTC_DEGODS_CONTRACT],
  },
];

This example uses a project that already set up EVM using wagmi and viem, you will need to then add the EVM de[id] adapter, which will enable the de[id] context to be aware of wallet connect states that is used for querying and mutations.

import { DeIdProvider } from "@dustlabs/profiles/core";
import { DeIdEvm } from "@dustlabs/profiles/evm";
 
function App() {
  return (
    <DeIdEvm api="https://your.de.id.backend.endpoint">
      {(providerProps) => (
        <DeIdProvider {...providerProps} projects={PROJECTS}>
            {/** ... */} 
        </DeIdProvider>
      )}
    </DeIdEvm>
  )
}

You're good to go!

Use hooks! You can now import and use hooks throughout your app.

import { useUpdateProfile } from '@dustlabs/profiles/core'
 
const { updateProfile, loading: isLoadingUpdateProfile } = useUpdateProfile();

Want to learn more? Continue on reading the documentation.

Interfaces