D
D
DappFactory
Search…
⌃K

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;