Installing the widgets

Install the Brinkninja Widget npm package:

npm install @brinkninja/widgets

or

yarn install @brinkninja/widgets

or

pnpm add @brinkninja/widgets

Adding widget to React application

After installing the npm package as outlined in , add the widget into your React app:

import { RecurringSwapWidget } from '@brinkninja/widgets'
// ...

<RecurringSwapWidget
  apiKey="apiKey"
  apiKeyName="apiKeyName"
  appName="apiKeyName"
  // other config options
/>

Widget customization

To customize the widget's theme interactively, visit the Brink Widget Studio. Copy paste the config code snippet into your code via Copy React Snippet button

or

check our widgets docs @TODO.

Customization example

  import { RecurringSwapWidget } from '@brinkninja/widgets'

  <RecurringSwapWidget
    apiKey="apiKey"
    axiosBaseUrl="axiosBaseUrl"
    apiKeyName="apiKeyName"
    appName="appName"
    theme={{
      mode: 'light',
      shape: {
        roundedBtn: '100px',
        roundedBox: '0px',
        roundedFormField: '12px'
      },
      config: {
        syncFieldColorWithText: true
      },
      slot: {
        tabsInContainer: true
      },
      component: {
        message: {
          outline: '2px solid #000000',
          backgroundColor: 'white'
        }
      },
      colors: {
        primary: {
          '100': '#fff5fc',
          '200': '#e4b2d0',
          '300': '#d993bd',
          '400': '#c864a0',
          main: '#c864a0',
          '500': '#bd448d',
          '600': '#843063',
          '700': '#732956'
        },
        secondary: {
          '100': '#FAF0FF',
          '200': '#A251D7',
          '300': '#8C2CC6',
          '400': '#6A00A3',
          main: '#BE33FF',
          '500': '#590073',
          '600': '#3E0050',
          '700': '#360046'
        },
        neutral: {
          '100': '#ffffff',
          '200': '#f6f6f6',
          '300': '#ededed',
          '400': '#a5a5a5',
          main: '#a5a5a5',
          '500': '#7e7e7e',
          '600': '#535353',
          '700': '#222222'
        },
        informative: {
          '100': '#e6eff9',
          '200': '#96bfe5',
          '300': '#6ba4da',
          '400': '#2b7dca',
          main: '#2b7dca',
          '500': '#0062bf',
          '600': '#004586',
          '700': '#003c75'
        },
        error: {
          '100': '#f5d6d6',
          '200': '#ebbaba',
          '300': '#e29e9e',
          '400': '#d67474',
          main: '#d67474',
          '500': '#ce5757',
          '600': '#903d3d',
          '700': '#7d3535'
        },
        success: {
          '100': '#ecf9f2',
          '200': '#b2e4c9',
          '300': '#93d9b2',
          '400': '#64c991',
          main: '#64c991',
          '500': '#44bd7c',
          '600': '#308556',
          '700': '#29744b'
        },
        warning: {
          '100': '#fcf3e6',
          '200': '#f3cd96',
          '300': '#eeb96b',
          '400': '#e69b2b',
          main: '#e69b2b',
          '500': '#e08600',
          '600': '#9e5e00',
          '700': '#895200'
        },
        text: {
          primary: '#000000',
          secondary: '#7F7F7F',
          disabled: '#A5A5A5'
        }
      }
    }}
  />