React Components

import { WidgetComponentProps } from '@opencx/widget-react-headless';

type AccountBalancePayload = {
  balance: number;
  currency: string;
};

export function AccountBalanceCard({
  data,
}: WidgetComponentProps<AccountBalancePayload>) {
  const result = data?.action?.data;

  if (!result) {
    return <div>Balance details are not available right now.</div>;
  }

  return (
    <div>
      <strong>Available balance</strong>
      <div>
        {result.balance} {result.currency}
      </div>
    </div>
  );
}

import { Widget } from '@opencx/widget-react';
import { AccountBalanceCard } from './AccountBalanceCard';

export function WidgetWrapper() {
  return (
    <Widget
      options={{
        token: '<WIDGET_TOKEN>',
      }}
      components={[
        {
          key: 'getAccountBalance',
          component: AccountBalanceCard,
        },
      ]}
    />
  );
}