@ledgerhq/ptx-ui

This package provides an internal React component library for Consumer Services live apps. PTX refers to Payment Transactions and includes Buy & Sell, Swap, Earn and Recover.

It can serve as a layer between @ledgerhq/react-ui and the live apps so it's important to note that the components in this lib may rely on being wrapped (by the consumer) in <StyleProvider /> from @ledgerhq/react-ui in order to have access to the theme.

Installation

npm install @ledgerhq/ptx-ui

Usage example

import { ExampleComponent } from '@ledgerhq/ptx-ui';

const Page = () => {
  return (
    <>
      ...
      <ExampleComponent text="some text" />
      ...
    </>
  )
}

Contributing

Develop directly in Storybook where you can easily switch between themes and breakpoints:

pnpm storybook

Test local changes within live apps before releasing by running the link-pkg script to create and link a package bundle:

pnpm link-pkg

# Give the file permission to execute if needed:
chmod +x link-pkg.sh

Pipeline checks:

• New components and changes should be covered with Jest tests, with at least 80% code coverage.

• SonarCloud analysis will highlight issues with code and test coverage. Some issues may be minor and will allow the Quality Gate to pass but it's good practice to fix those as they show up before merging.

• Chromatic publishes the Storybook and runs visual regression tests requiring any changes to be reviewed and approved. The PR Storybook and test build can be accessed through the related Github checks.

• Accessibility tests based on standard WCAG guidelines using @storybook/addon-a11y