Getting started

Installation

You can type this command into Command Prompt, PowerShell, Terminal, or any other integrated terminal of your code editor.

npm install @cryption/dapp-factory-sdk

or

yarn add @cryption/dapp-factory-assdk

Getting Started

Wrap your app with the DappFactory Provider and pass the DappFactory Reducers into your redux store.

In your store pass the dappfactoryReducers:

src/state/index.ts

import { configureStore } from "@reduxjs/toolkit";
import { save, load } from "redux-localstorage-simple";
import {
  dappfactoryReducers,
  DF_PERSISTED_KEYS,
} from "@cryption/dapp-factory-sdk";

// OPTIONAL: set the dapp factory persisted keys
// If don't use `redux-localstorage-simple` you can skip this step and only set the reducers

const PERSISTED_KEYS: string[] = [...DF_PERSISTED_KEYS];

const store = configureStore({
  reducer: {
    // Pass the dapp factory reducers
    ...dappfactoryReducers,
  },
  middleware: [save({ states: PERSISTED_KEYS, debounce: 1000 })],
  preloadedState: load({ states: PERSISTED_KEYS }),
});

export default store;

In your main file wrap your app with DappFactoryProvider:

src/index.tsx

import React, { useContext } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { DappFactoryProvider } from "@cryption/dapp-factory-sdk";
import { useActiveWeb3React } from "./hooks";
import Providers from "./Providers";
import App from "./App";
import { ThemeContext } from "./ThemeContext";

declare const window: any;

if ("ethereum" in window) {
  (window && (window.ethereum as any)).autoRefreshOnNetworkChange = false;
}

function DappFactory({ children }: { children?: React.ReactNode }) {
  const { library, chainId, account } = useActiveWeb3React();
  const { isDark } = useContext(ThemeContext);
  const accountString = account ? account : "";

  return (
    <DappFactoryProvider
      provider={library}
      chainId={chainId}
      account={accountString}
      useDarkMode={isDark}
    >
      {children}
    </DappFactoryProvider>
  );
}

window.addEventListener("error", () => {
  localStorage?.removeItem("redux_localstorage_simple_lists");
});
ReactDOM.render(
  <React.StrictMode>
    <DappFactory>
      <Providers>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Providers>
    </DappFactory>
  </React.StrictMode>,
  document.getElementById("root")
);

Usage

You can directly import any DappFactory service either as a button or a form.

Check out this example of importing the Farm component both as a Button as well as a Form:

src/views/Farm.tsx

import React from "react";
import { CreateFarm, CreateFarmButton } from "@cryption/dapp-factory-sdk";

const Farm = () => {
  return (
    <>
      <CreateFarmButton title="Add Farm" /> // Button
      <CreateFarm />                        // Form
    </>
  );
};
export default Farm;