@superfluid-finance/sdk-redux NPM

📖 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

SDK-Core
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 {
    allRpcEndpoints,
    allSubgraphEndpoints,
    createApiWithReactHooks,
    initializeRpcApiSlice,
    initializeSubgraphApiSlice,
    initializeTransactionTrackerSlice
} from "@superfluid-finance/sdk-redux";

Create the Redux slices:

export const rpcApi = initializeRpcApiSlice(createApiWithReactHooks).injectEndpoints(allRpcEndpoints);
export const subgraphApi = initializeSubgraphApiSlice(createApiWithReactHooks).injectEndpoints(allSubgraphEndpoints);
export const transactionTracker = initializeTransactionTrackerSlice();

Plug in the slices to the Redux store:

export const store = configureStore({
    reducer: {
        [rpcApi.reducerPath]: rpcApi.reducer,
        [subgraphApi.reducerPath]: subgraphApi.reducer
        [transactionTracker.reducerPath]: transactionTracker.reducer,
    }
});

Add the middlewares (important to add for both rpcApi & subgraphApi):

export const store = configureStore({
    reducer: {
        [rpcApi.reducerPath]: rpcApi.reducer,
        [subgraphApi.reducerPath]: subgraphApi.reducer
        [transactionTracker.reducerPath]: transactionTracker.reducer,
    },
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(rpcApi.middleware).concat(subgraphApi.middleware),
});

Somewhere in your code, give instructions to the sdkReduxConfig to locate Framework:

import { setFrameworkForSdkRedux } from "@superfluid-finance/sdk-redux";

setFrameworkForSdkRedux(chainId, sdkCoreFramework);

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,
} = sfSubgraph.useStreamsQuery({
    chainId: queryChainId,
    filter: {
      token: superTokenAddress,
      sender: senderAddress
    },
    pagination: {
        skip: (page - 1) * pageSize,
        take: pageSize
    },
    ordering: {
      orderBy: "currentFlowRate",
      orderDirection: "desc"
    }
}, {
    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 rpcApi.createFlow({
    signer,
    chainId,
    senderAddress: senderAddress,
    receiverAddress: receiver,
    flowRateWei: flowRate,
    superTokenAddress: superToken
}).unwrap();

Transaction Tracking

All mutations trigger tracking for transaction progress (stored in transactionTrackerSlice) 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.

graphql-request lodash promise-retry

@everything-registry/sub-chunk-882 geo-web-cadastre

9 days ago

10 days ago

10 days ago

10 days ago

10 days ago

16 days ago

18 days ago

21 days ago

22 days ago

28 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

6 months ago

6 months ago

5 months ago

6 months ago

7 months ago

9 months ago

7 months ago

10 months ago

8 months ago

8 months ago

9 months ago

7 months ago

6 months ago

8 months ago

6 months ago

10 months ago

10 months ago

8 months ago

9 months ago

9 months ago

10 months ago

9 months ago

8 months ago

8 months ago

9 months ago

8 months ago

10 months ago

9 months ago

9 months ago

8 months ago

8 months ago

7 months ago

10 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

7 months ago

10 months ago

8 months ago

10 months ago

6 months ago

8 months ago

7 months ago

9 months ago

10 months ago

8 months ago

8 months ago

10 months ago

8 months ago

9 months ago

10 months ago

10 months ago

10 months ago

8 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

10 months ago

10 months ago

9 months ago

10 months ago

8 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

9 months ago

10 months ago

8 months ago

9 months ago

7 months ago

7 months ago

9 months ago

7 months ago

8 months ago

9 months ago

8 months ago

8 months ago

10 months ago

9 months ago

7 months ago

8 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

12 months ago

1 year ago

12 months ago

12 months ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

2 years ago

1 year ago

2 years ago

1 year ago

2 years ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

@superfluid-finance/sdk-redux v0.6.0

🏠 Homepage

✨ Superfluid App

📖 Docs

Introduction

Important Disclaimer

Features

Notable Used Technologies

Requirements

Getting Started

Plugging Into Redux Store

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

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

Transaction Tracking

Examples