@stake-sdk/ui

Stake UI SDK for React Native (Expo): AccountWidget and CreditBuilderWidget, plus shared Stake runtime helpers. Theming uses Material Design 3 via react-native-paper.

Installation

npm install @stake-sdk/ui react-native-paper @tanstack/react-query axios
# or
yarn add @stake-sdk/ui react-native-paper @tanstack/react-query axios

Peer dependencies (must be present in your app): react (≥18), react-native (≥0.70), react-native-paper (≥5).

Other runtime deps used by this package: @tanstack/react-query, axios. The CreditBuilderWidget also uses @expo/vector-icons (standard in Expo apps).

Setup

Call Stake.open once (e.g. in a root layout or screen useEffect) before widgets that hit Stake APIs:

import { Stake } from "@stake-sdk/ui";

await Stake.open({
  environment: "development", // or your supported environment key
  clientId: "<client-id>",
  clientSecret: "<client-secret>",
  googlePlacesApiKey: process.env.EXPO_PUBLIC_GOOGLE_PLACES_API_KEY,
});

For Request paper check address autocomplete, use the Google Maps API key, enable Maps JavaScript API and Places API (legacy) in Google Cloud, then set EXPO_PUBLIC_GOOGLE_PLACES_API_KEY in your Expo app(react-native app) (e.g. .env.local). Pass the same value into Stake.open as googlePlacesApiKey, or pass googlePlacesApiKey on AccountWidget to override.

Usage

The SDK exposes two consumer-facing widgets: AccountWidget and CreditBuilderWidget. Both require an MD3Theme and a residentId.

Account widget

import { AccountWidget } from "@stake-sdk/ui";
import { useTheme } from "react-native-paper";

function MyScreen() {
  const theme = useTheme();
  return (
    <AccountWidget
      theme={theme}
      residentId="<resident-id>"
      googlePlacesApiKey={process.env.EXPO_PUBLIC_GOOGLE_PLACES_API_KEY}
    />
  );
}

Or with withTheme:

import { AccountWidget } from "@stake-sdk/ui";
import { withTheme } from "react-native-paper";
import type { MD3Theme } from "react-native-paper";

function MyScreen({ theme }: { theme: MD3Theme }) {
  return <AccountWidget theme={theme} residentId="<resident-id>" />;
}

export default withTheme(MyScreen);

googlePlacesApiKey is optional and only powers address autocomplete in the Request paper check flow. When omitted, the value passed to Stake.open is used.

Credit builder widget

import { CreditBuilderWidget } from "@stake-sdk/ui";
import { useTheme } from "react-native-paper";

function MyScreen() {
  const theme = useTheme();
  return <CreditBuilderWidget theme={theme} residentId="<resident-id>" />;
}

Theming helpers

import { StakeLightTheme, StakeDarkTheme } from "@stake-sdk/ui";

Exports

| Export | Description | | ------------------------------------ | ------------------------------------------------------------ | | Stake | Stake.open(config) — initialize SDK / auth for the session | | StakeConfig | Type for Stake.open configuration | | AccountWidget | Account UI: balance, activity, and paper-check flow | | CreditBuilderWidget | Credit builder UI: eligibility, opt-in/out, and tracker | | StakeLightTheme / StakeDarkTheme | Paper-compatible theme objects |

Props

AccountWidget

| Prop | Type | Required | Description | | -------------------- | ---------- | -------- | ----------------------------------------------------------------------------- | | theme | MD3Theme | Yes | Material Design 3 theme from react-native-paper | | residentId | string | Yes | Resident identifier for API calls | | googlePlacesApiKey | string | No | Overrides the Stake.open key for Request paper check address autocomplete |

CreditBuilderWidget

| Prop | Type | Required | Description | | ------------ | ---------- | -------- | ------------------------------------------------- | | theme | MD3Theme | Yes | Material Design 3 theme from react-native-paper | | residentId | string | Yes | Resident identifier for API calls |

Publishing (for maintainers)

Package name: @stake-sdk/ui. Source lives under packages/stake-sdk/.

From the monorepo root:

| Script | Description | | --------------------------- | -------------------------------------------------------------------------- | | npm run build:packages | Build the UI package (output in packages/stake-sdk/dist/). | | npm run version:sdk:patch | Bump patch version. Creates a git commit and tag in the workspace package. | | npm run version:sdk:minor | Bump minor version. | | npm run version:sdk:major | Bump major version. | | npm run publish:sdk | Build and publish the current version to npm. | | npm run release:sdk:patch | Build, bump patch, then publish. | | npm run release:sdk:minor | Build, bump minor, then publish. | | npm run release:sdk:major | Build, bump major, then publish. |

From packages/stake-sdk:

npm run build
npm run publish:package   # npm publish --access public

One-step release from root (example — patch):

npm run release:sdk:patch

Ensure you are logged in (npm login) with publish access to the @stake-sdk scope, and use --access public for the first scoped publish. To change the npm name or scope, edit name in packages/stake-sdk/package.json.