@boostxyz/widgets

Boost Widgets

• 🛠️ Test-driven
• 🌎 I18n-ready
• 🤲 WAI-ARIA compliant

Start

pnpm install -r
pnpm run test --watch
pnpm run dev

Internals

• RewardKitProvider -> data layer & controls side-effects (modals, i18n, etc)
• Proxy -> base widget class to enable instrumentation
• ClaimWidget -> pure component instance of RewardKit using RewardKitContext

flowchart TD
    %% Define subgraphs
    subgraph s1["core"]
        n1["RewardKitProvider"]
        n11["<Proxy>"]
    end

    subgraph s2["components"]
        n2["<ClaimWidget>"]
        n9["<ClaimWidgetRenderer>"]
        n10["renders"]
    end

    subgraph s3["locales"]
        n6["I18nProvider"]
        n8["<I18n />"]
    end

    %% Define connections
    n2 --> n10
    n10 --> n9
    n1 --> n3["exposes"]
    n3 --> n4["RewardKitProvider"]
    s3 --- s1
    s2 --> n5["extends"]
    n5 --> n11
    n4 --> s2

    %% Define node styles
    n2@{ shape: rounded}
    n9@{ shape: rounded}
    n10@{ shape: text}
    n6@{ shape: rounded}
    n3@{ shape: text}
    n4@{ shape: rounded}
    n5@{ shape: text}

Usage

Include our provider up in the render hierarchy:

...
  <RewardKitProvider locale={locale}>
    {children}
  </RewardKitProvider>
...

import { ClaimWidget, type ClaimWidgetProps } from '@boostxyz/widgets';
...
  const claimWidgetProps: ClaimWidgetProps = {
    // ...
  }
  return <ClaimWidget {...claimWidgetProps} />;
...

RYO (Roll Your Own)

import * as React from 'react';
import { useRewardKit } from '@boostxyz/widgets/RewardKitProvider';

const App = ({
  id,
  children,
  className,
  ...rest
}: AppProps): JSX.Element => {
  const {
    claimReward,
    clearId,
    error,
    id,
    isLoading,
    rewards,
    setId,
  } = useRewardKit();

  return (
    <div className={className} {...rest}>
      {children}
      <button onClick={() => claimReward('something')}>
      <span>{JSON.stringify(rewards)}</span>
    </div>
  );
};

export { App };
export type { AppProps };