Components within the Loyalty Wallet SDK can be customized via the KigoContext to apply additional branding, support links, and messaging to your application.

Defaults

The code below illustrates setting the KigoContext with the default values for the components:

const kigoContext = {
  components: {
    ApplyClaimCode: {
      defaultProps: {
        supportUrl: "",
      },
    },
    KigoErrorSnackbar: {
      defaultProps: {
        actionText: "",
        actionUrl: "",
      },
    },
    SwipeClaim: {
      defaultProps: {
        brandImgSrc: "",
      },
    },
    WalletEmptyState: {
      defaultProps: {
        brandImgSrc: "",
        descriptionText: "",
      },
    },
    WalletHeader: {
      defaultProps: {
        walletLabelPosition: "left",
      },
    },
  },
};

Each component has a set of defaultProps that define its initial behavior and appearance. These properties can be customized through the KigoContext to better align with your specific application needs. Below is a breakdown of the defaultProps available for each component.

Components Properties

ApplyClaimCode defaultProps

• supportUrl - URL for the "Contact Support" text displayed when the user is on the Apply a Claim Code form.
  • Default: undefined - If set to undefined, the support link will be omitted.
  • Valid values: string
  • Example:
    JavaScript

    supportUrl: "https://support.example.com/contact"
    

  • Storybook Link: View Apply Claim Code in Storybook

KigoErrorSnackbar defaultProps

• actionText - The text displayed on the action button, e.g., "Contact Support".
  • Default: undefined - If set to undefined, no button will be displayed.
  • Valid values: string
  • Example:
    JavaScript

    actionText: "Contact Support"
    

  • Storybook Link: View KigoErrorSnackbar in Storybook

SwipeClaim defaultProps

• brandImgSrc - Image source URL used as an icon in the Swipe input.
  • Default: undefined - If set to undefined, a Kigo-branded image will be used.
  • Valid values: string
  • Example:
    JavaScript

    brandImgSrc: "https://example.com/image.png"
    

  • Storybook Link: View SwipeClaim in Storybook

WalletEmptyState defaultProps

• descriptionText - Custom message displayed when no tokens are present, and the Wallet is considered empty.
  • Default: "" - If set to "", a default message instructing the user to select "Apply Claim Code" from the menu in the top right will be shown.
  • Valid values: string
  • Example:
    JavaScript

    descriptionText: "Your wallet is empty. Please apply a claim code to proceed."
    

  • Storybook Link: View WalletEmptyState in Storybook

WalletHeader defaultProps

• walletLabelPosition - Determines the horizontal positioning of the walletLabel within the WalletHeader.
  • Default: "left"
  • Valid values: "left" | "center"
  • Example:
    JavaScript

    walletLabelPosition: "center"
    

  • Storybook Link: View WalletHeader in Storybook

Additional Components

Other components, such as the Button, IconCircle, and Loadings, are also affected by the KigoContext, particularly through theme settings like primary and secondary colors.

• Button: The appearance of buttons can be customized via theme colors.

  • Storybook Link: View Buttons in Storybook

• IconCircle: This component's styling is influenced by the theme settings.

  • Storybook Link: View IconCircle in Storybook

• Loadings: The loading indicators can be styled according to the theme.

  • Storybook Link: View Loadings in Storybook

This is just a subset of the components available. You can find many more detailed in Storybook.

Locale Customization

Locale changes, such as locale.walletLabel.singular, affect many components across the application. For more details on how to customize locale settings, visit our Locale Customization page.

For example, the Wallet Archive screen can be customized to reflect these locale settings.

• Wallet Archive: The screen's labels and messages can be adjusted based on locale settings.
  • Storybook Link: View Wallet Archive in Storybook

By utilizing the KigoContext, you can ensure that all components are styled and localized consistently with your application's branding and language requirements.