@boostxyz/widgets
v0.1.0
Published
- 🛠️ Test-driven - 🌎 I18n-ready - 🤲 WAI-ARIA compliant
Downloads
67
Keywords
Readme
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
- ClaimWidgetRenderer ->
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>
{children}
</RewardKitProvider>
RTO (Ready To Go)
<RewardKitProvider>
<ClaimWidget />
</RewardKitProvider>
RYO (Roll Your Own)
<RewardKitProvider>
<ClaimWidget>
{({ t, onClaimStart, boostId, chainId, id, locale, onClaimError, onClaimSuccess, rewards, startClaim }) => (
<Button onClick={startClaim}>
{t('claim.button')}
</Button>
)}
</ClaimWidget>
</RewardKitProvider>
Hooks API
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 };