LLM:PostOnboarding

Adding a feature to the post onboarding hub

General explanation.

The post onboarding hub is a new screen that will appear after onboarding a device.

It will display a list of optional actions to be completed by the users.

The list of actions can differ for each device. This guide's main purpose is to help you implement a new action for one or several device models.

Specificities:

• The list of post onboarding actions can be different for each DeviceModelId.
• Each post onboarding action can be linked to a feature flag which will determine whether or not the action appears in the list of actions (depending on the enabled value of the feature flag).

Auto triggering of the post onboarding.

The post onboarding will be automatically triggered when setting up a new device through the onboarding flow.

Steps

1. Creating a new PostOnboardingActionId

In libs/ledger-live-common/src/postOnboarding/types.ts:

Add the id of the new post onboarding action to the enum PostOnboardingActionId:

export enum PostOnboardingActionId {
  /* ... */
+ myPostOnboardingAction = "myPostOnboardingAction",
}

2. Creating a PostOnboardingAction

In apps/ledger-live-mobile/src/logic/postOnboarding/index.tsx:

Create a PostOnboardingAction object:

const myPostOnboardingAction: PostOnboardingAction = {
  id: PostOnboardingActionId.myPostOnboardingAction,
  featureFlagId: "aFeatureFlag",
  icon: Icons.GiftCardMedium,
  title: "Claim my NFT",
  description: "A special NFT for you.",
  tagLabel: "Free",
  actionCompletedPopupLabel: "NFT claimed",
  actionCompletedHubTitle: "Kickstart your Web3 journey.",
  navigationParams: [
    NavigatorName.PostOnboarding,
    {
      screen: ScreenName.PostOnboardingMockActionScreen,
      params: {
        id: PostOnboardingActionId.claimMock,
        title: PostOnboardingActionId.claimMock,
      },
    },
  ],
};

3. Registering the new PostOnboardingAction

In apps/ledger-live-mobile/src/logic/postOnboarding/index.tsx:

/**
 * All implemented post onboarding actions.
 */
const postOnboardingActions: Record<
  PostOnboardingActionId,
  PostOnboardingAction
> = {
  /*...*/
+ myPostOnboardingAction,  
};

4. Adding this action for each device model.

In apps/ledger-live-mobile/src/logic/postOnboarding/index.tsx:

/**
 * Returns the list of post onboarding actions for a given device.
 */
export function getPostOnboardingActionsForDevice(
  deviceModelId: DeviceModelId,
  mock = false,
): PostOnboardingAction[] {
  switch (deviceModelId) {
    case DeviceModelId.nanoS:
      /** Set here the list of actions for the post onboarding of the Nano S */
+     return [myPostOnboardingAction];
    case DeviceModelId.nanoSP:
      /** Set here the list of actions for the post onboarding of the Nano SP */
+     return [myPostOnboardingAction];
    case DeviceModelId.nanoX:
      /** Set here the list of actions for the post onboarding of the Nano X */
+     return [myPostOnboardingAction];
    default:
      return [];
  }
}

Useful hooks/actions

In libs/ledger-live-common/src/postOnboarding/actions

• setPostOnboardingActionCompleted: it's crucial that you use this action as there is no other way to mark a post onboarding action as "completed".

Example:

import { useDispatch } from "react-redux";
import { setPostOnboardingActionCompleted } from "@ledgerhq/live-common/postOnboarding/actions";

const MyComponent() = () => {
  const { id } = params;
  const dispatch = useDispatch();
  const navigateToHub = useNavigateToPostOnboardingHubCallback();
  const action = getPostOnboardingAction(id);

  const completeAction = useCallback(
    () => dispatch(setPostOnboardingActionCompleted({ actionId: id })),
    [dispatch, id],
  );
  /** ... */
}

• useNavigateToPostOnboardingHubCallback: use this if you need to integrate navigation to the post onboarding hub in your flow.

/**
 *
 * @returns a function that can be called to navigate to the post
 * onboarding hub.
 */
export function useNavigateToPostOnboardingHubCallback() {/*...*/}