Skip to content

sdk-redux 0.1.1-PR562.e294d0e.0

Install from the command line:
Learn more about npm packages
$ npm install @superfluid-finance/sdk-redux@0.1.1-PR562.e294d0e.0
Install via package.json:
"@superfluid-finance/sdk-redux": "0.1.1-PR562.e294d0e.0"

About this version

sdk-redux

🏠 Homepage

✨ Superfluid App

📖 Docs

Introduction

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

More specifically, SDK-Redux is a wrapper library around @superfluid-finance/sdk-core which adds state management to Superfluid 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 Superfluid SDK-Redux parts.

Import the following function:

import {
    initializeSfApiSlice,
    initializeSfTransactionSlice,
    createApiWithReactHooks
} from "@superfluid-finance/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 "@superfluid-finance/sdk-redux";

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

That should be it! You should now be able to dispatch messages to Superfluid 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.

Details

Assets

  • sdk-redux-0.1.1-PR562.e294d0e.0-npm.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all