Introduction

SDK-Redux is an application framework for building front-end applications that interact with the StreamPay

More specifically, SDK-Redux is a wrapper library around @streampay/sdk-core which adds state management to StreamPay related queries and operations. Under the hood, SDK-Redux leverages popular Redux libraries Redux Toolkit & RTK Query.

Important Disclaimer

SDK-Redux is in early active development and can have breaking releases without warning and without consideration for semantic versioning.

Features

• Tracking loading state in order to show UI spinners
• Avoiding duplicate requests for the same data
• Managing cache lifetimes as the user interacts with the UI
• Tracking blockchain transactions produced by user interactions

Notable Used Technologies

• TypeScript
• Redux
• Redux Toolkit
• RTK Query
• Ethers

Requirements

• Redux store & Redux Toolkit
• React* (The SDK-Redux generates React Hooks which are recommended but not strictly necessary to use. The SDK-Redux is UI-framework agnostic but we currently have example only for React)

Getting Started

Plugging Into Redux Store

Requirements:

A brand-new scaffolded Redux store configuration looks something like this:

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {
  },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

We need to plug in the streampay SDK-Redux parts.

Import the following function:

import {
    initializeSfApiSlice,
    initializeSfTransactionSlice,
    createApiWithReactHooks
} from "@streampay/sdk-redux";

Create the Redux slices:

export const { sfApi } = initializeSfApiSlice(createApiWithReactHooks);
export const { sfTransactions } = initializeSfTransactionSlice();

Plug in the slices to the Redux store:

export const store = configureStore({
    reducer: {
        "sfApi": sfApi.reducer,
        "sfTransactions": sfTransactions.reducer,
    }
});

Add the middleware:

export const store = configureStore({
    reducer: {
        "sfApi": sfApi.reducer,
        "sfTransactions": sfTransactions.reducer,
    },
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(sfApi.middleware),
});

Somewhere in your code, give instructions to the superfluidContext to locate Framework and Signer:

import { setFrameworkForSdkRedux, setSignerForSdkRedux } from "@streampay/sdk-redux";

setFrameworkForSdkRedux(chainId, sdkCoreFramework);
setSignerForSdkRedux(chainId, ethersWeb3Provider.getSigner());

That should be it! You should now be able to dispatch messages to Streampay reducers & use the React hooks.

Using Queries (i.e. "read" operations)

Read about RTK-Query queries here: https://redux-toolkit.js.org/rtk-query/usage/queries

Example using React Hook:

const {
    data: pagedStreams,
    isUninitialized,
    isFetching,
    isLoading,
    isError,
    error,
    refetch,
} = sfApi.useListStreamsQuery({
    chainId: queryChainId,
    senderAddress,
    receiverAddress,
    superTokenAddress,
    skip: (page - 1) * pageSize,
    take: pageSize,
}, {
    pollingInterval: 5000 // Not necessary to use but nice-to-have additional option by RTK-Query.
});

Using Mutations (i.e. "write" operations)

Read about RTK-Query queries here: https://redux-toolkit.js.org/rtk-query/usage/mutations

Example using React Hook:

const tx = await sfApi.createFlow({
    senderAddress: signerAddress,
    receiverAddress: receiver,
    flowRateWei: flowRate,
    chainId,
    superTokenAddress: superToken,
    waitForConfirmation,
}).unwrap();

Transaction Tracking

All mutations trigger tracking for transaction progress (stored in transactionSlice) and transaction monitoring for re-orgs (all cached data is re-fetched in case of a re-org).

Examples

Check out the extensive demo here: examples/sdk-redux-react-typescript.