safe-react-components

This repository contains a @mui/material theming and a set of useful React components written in TypeScript.

These components and theming are being used to build the Safe web and desktop app.

As Safe allows to integrate third party applications ("Safe Apps"), these components can also be used to build Safe Apps with the following benefits:

• Native feel: Build your Safe Apps with a similar style as the one used by the Safe. This makes your Safe Apps feel almost like a native feature of the Safe.
• Blockchain-focused: Some components solve common blockchain-related problems like inputs for ETH addresses and bigNumbers, identicon images, and more.
• Save time: No need to build all components from scratch.

How to install

Yarn

   yarn add @safe-global/safe-react-components

npm

   npm install @safe-global/safe-react-components

Integration

This library makes use of @mui/material - 5.x.x as peer dependency, this means you must install it in your Safe App. Make sure to provide a compatible version as defined by peer dependencies.

Once everything is installed, you have to instantiate the SafeThemeProvider with the desired theme mode (light/dark) and with the generated safe theme return a ThemeProvider for the application.

import { ThemeProvider } from '@mui/material/styles';
import { SafeThemeProvider } from '@safe-global/safe-react-components';

import App from './App';

export default () => (
  <SafeThemeProvider mode="light">
    {(safeTheme: Theme) => (
      <ThemeProvider theme={safeTheme}>
        <App />
      </ThemeProvider>
    )}
  </SafeThemeProvider>
);

Using the components

You can import every component exported from @safe-global/safe-react-components in the same way.

import { EthHashInfo } from '@safe-global/safe-react-components';

const App = (account) => {
  return <EthHashInfo address={account} showCopyButton />;
};

export default App;

Adding the fonts

The fonts will be bundled on build and a fonts.css file will be provided as well for adding the corresponding font-face declarations

// from js/ts files
import '@safe-global/safe-react-components/dist/fonts.css'

// from css files
@import url(<path-to-node_modules>/@safe-global/safe-react-components/dist/fonts.css)

Storybook

You can find documentation and examples of all our components in this storybook.

Local development

To develop on your local machine, install the dependencies (including the peer dependencies):

yarn

Launch the Storybook:

yarn storybook

Testing

Snapshot tests are generated automatically from the Storybook stories using the StoryShots addon.

To run the tests locally:

yarn test

Alternatively, run yarn test --watch to re-run the tests for each modification you do. Before you commit your changes, you need to update the snapshots and commit them as well. To do so, run yarn test -u. When the command finishes, the resulting snapshots will be the new baseline.

If you want to add a new Jest test, make sure to put a file with the .test.tsx extension into the same directory as the corresponding component.

Examples

At Safe we have developed some example Safe Apps. Here is the repository.