de[id] Modal

The profile modal (also referred to as de[id] modal) is provided by the <DeIdModalProvider /> core provider. This provider takes in profile modal options that will allow you to customize the look and feel of the profile modal.

💡

Out of the box, <DeIdProvider /> includes the <DeIdModalProvider />, and the options for the modal provider is passed through the props of <DeIdProvider /> via the deIdModalProviderProps field. Typically in your project, it is recommended to use <DeIdProvider /> directly and not use <DeIdModalProvider /> as a standalone component.

The following below will outline the specific configurations of the <DeIdModalProvider />, passed via the props of <DeIdProvider />.

Usage

Through <DeIdProvider />

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

Props

import { DeIdModalOptions } from "@dustlabs/profiles/types";

lightMode (optional)

boolean

This boolean will determine if the profile modal will be in light mode or dark mode. Defaults to false, the profile modal will be in dark mode.

import { DeIdProvider } from "@dustlabs/profiles/core";
import { DeIdEvm } from "@dustlabs/profiles/evm";
import { DeIdModalOptions } from "@dustlabs/profiles/types";
 
const options: DeIdModalOptions = {
  lightMode: true,
};
 
function App() {
  return (
    <DeIdEvm api="https://your.de.id.backend.endpoint">
      {(providerProps) => (
        <DeIdProvider 
          {...providerProps} 
          deIdModalProviderProps={{ options }}
        >
            {/** ... */} 
        </DeIdProvider>
      )}
    </DeIdEvm>
  )
}

icon (optional)

ReactNode

Provide an icon that will be used in the top left of the profile modal.

import { DeIdProvider } from "@dustlabs/profiles/core";
import { DeIdEvm } from "@dustlabs/profiles/evm";
import { DeIdModalOptions } from "@dustlabs/profiles/types";
 
const options: DeIdModalOptions = {
  icon: <div>Custom Modal Icon</div>,
};
 
function App() {
  return (
    <DeIdEvm api="https://your.de.id.backend.endpoint">
      {(providerProps) => (
        <DeIdProvider 
          {...providerProps} 
          deIdModalProviderProps={{ options }}
        >
            {/** ... */} 
        </DeIdProvider>
      )}
    </DeIdEvm>
  )
}

socialDescription (optional)

SocialDescription

type SocialDescription = {
  [key in IdentityProviderName]?: string;
}

Provide a description that will be reflected in the socials tab of the profile modal.

This is indexed by the key value of the object of type IdentityProviderName.

import { DeIdProvider } from "@dustlabs/profiles/core";
import { DeIdEvm } from "@dustlabs/profiles/evm";
import { DeIdModalOptions } from "@dustlabs/profiles/types";
 
const options: DeIdModalOptions = {
  socialDescription: {
    TWITTER: "Custom Twitter Description",
  },
};
 
function App() {
  return (
    <DeIdEvm api="https://your.de.id.backend.endpoint">
      {(providerProps) => (
        <DeIdProvider 
          {...providerProps} 
          deIdModalProviderProps={{ options }}
        >
            {/** ... */} 
        </DeIdProvider>
      )}
    </DeIdEvm>
  )
}

modalClassName (optional)

HTMLAttributes<HTMLDivElement>["className"]

Class name that will be passed to the modal element itself. Used for styling and custom tailwind classes.

import { DeIdProvider } from "@dustlabs/profiles/core";
import { DeIdEvm } from "@dustlabs/profiles/evm";
import { DeIdModalOptions } from "@dustlabs/profiles/types";
 
const options: DeIdModalOptions = {
  className: "bg-black",
};
 
function App() {
  return (
    <DeIdEvm api="https://your.de.id.backend.endpoint">
      {(providerProps) => (
        <DeIdProvider 
          {...providerProps} 
          deIdModalProviderProps={{ options }}
        >
            {/** ... */} 
        </DeIdProvider>
      )}
    </DeIdEvm>
  )
}

addWalletNetworks (optional)

AddWalletNetwork[]

interface AddWalletNetwork {
  network: ProfileWalletNetwork;
  addWalletButton: (
    deId: DeIdContext,
    addWalletButtonOptions: AddWalletButtonOptions
  ) => ReactNode;
}

You can add additional networks to the profile modal. These networks will appear in the edit wallet tab of the profile modal, allowing the user to add wallets from another chain.

The network object consists of both a network enum and a add wallet button component.

import { DeIdProvider } from "@dustlabs/profiles/core";
import { DeIdEvm } from "@dustlabs/profiles/evm";
import { DeIdModalOptions, ProfileWalletNetwork } from "@dustlabs/profiles/types";
import { AddBtcWalletButton, BtcWalletProvider } from "@dustlabs/profiles/btc";
 
const options: DeIdModalOptions = {
  addWalletNetworks: [
    {
      network: ProfileWalletNetwork.BITCOIN,
      addWalletButton: (deId, options) => (
        <BtcWalletProvider>
          <AddBtcWalletButton
            deId={deId}
            options={options}
          />
        </BtcWalletProvider>
      ),
    },
  ],
};
 
function App() {
  return (
    <DeIdEvm api="https://your.de.id.backend.endpoint">
      {(providerProps) => (
        <DeIdProvider 
          {...providerProps} 
          deIdModalProviderProps={{ options }}
        >
            {/** ... */} 
        </DeIdProvider>
      )}
    </DeIdEvm>
  )
}

addWalletOptions (optional)

ModalAddWalletOptions

interface ModalAddWalletOptions {
  addWalletCallback?: () => void;
  failOnConnectedWallet?: AddWalletOptions["failOnConnectedWallet"];
  onFailAddWallet?: (
    error: ApolloError,
    lastUsedCredentials: CredentialInput | null,
    callback: (failOnConnectedWallet?: boolean) => Promise<void>
  ) => void;
}

This parameter exposes some callbacks associated with adding wallets. This will be useful when you are prompting the user to add wallet via this modal, and these callbacks can be used to update the states of your application upon this action.

addWalletCallback (optional)

This callback will be called when the user successfully adds a wallet.

failOnConnectedWallet (optional)

This boolean will determine if the wallet add will fail if the user tries to add a wallet that is already associated to a de[id]. If set to false, then this wallet will be moved to the signed in de[id] instead.

onFailAddWallet (optional)

This callback will be called when the user fails to add a wallet. It contains paramters that can be used to determine how your application will handle this case.

error: ApolloError, the error that was thrown when trying to add the wallet.
lastUsedCredentials: WalletCredentials, the credentials that were used to try to add the wallet.
callback: (failOnConnectedWallet?: boolean) => Promise<void>, a callback that contains the logic that adds the wallet, if you want to call it again to retry. You can set failOnConnectedWallet to false to ensure the wallet gets added via transfer from another de[id].

import { DeIdProvider } from "@dustlabs/profiles/core";
import { DeIdEvm } from "@dustlabs/profiles/evm";
import { DeIdModalOptions, ProfileWalletNetwork } from "@dustlabs/profiles/types";
import { AddBtcWalletButton, BtcWalletProvider } from "@dustlabs/profiles/btc";
 
const options: DeIdModalOptions = {
  addWalletOptions: {
    addWalletCallback: () => console.log("Wallet Added"),
    failOnConnectedWallet: true,
    onFailAddWallet: (error, lastUsedCredentials, callback) => console.log(error.message),
  },
};
 
function App() {
  return (
    <DeIdEvm api="https://your.de.id.backend.endpoint">
      {(providerProps) => (
        <DeIdProvider 
          {...providerProps} 
          deIdModalProviderProps={{ options }}
        >
            {/** ... */} 
        </DeIdProvider>
      )}
    </DeIdEvm>
  )
}

Standalone Usage

If you were to use the <DeIdModalProvider /> directly as a standalone provider, the above configurations still apply, but you will pass them directly as props to the provider component.

🚫

This implementation usage is not recommended, as the modal component reads from the DeIdProvider React context. You will need to provide an instance of DeIdProvider somewhere in the parent of your component tree for the standalone usage to work.

import { DeIdModalProvider } from "@dustlabs/profiles/core";
import { DeIdModalOptions } from "@dustlabs/profiles/types";
 
const options: DeIdModalOptions = {
  // your options here
};
 
function App() {
  return (
    <DeIdModalProvider {...options}>
      {/** ... */} 
    </DeIdModalProvider>
  )
}

DeIdProvider DeIdAvatar