> For the complete documentation index, see [llms.txt](https://docs.usemoon.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usemoon.ai/getting-started-with-moon-916ac83bad5646adb704eeaf6bcde252/configuring-moonsdk-e55c9e70464c4515ae898ff3cc1a9a1d.md).

# Configuring MoonSDK

Configuring the Moon SDK involves setting up various modules and authentication parameters to ensure smooth communication with Moon APIs.

When leveraging React, the Moon SDK seamlessly integrates with a project's codebase through two primary interfaces:

1. **Moon SDK React Component:** A React Component that loads the SDK and manages state.
2. **useMoonHook:** a React Hook that returns the SDK's key methods and state variables.

## **MoonSDK React Component**

Import into a React project with the following import statement:

```jsx
import { MoonSDK } from '@moonup/moon-sdk';
```

The Moon SDK houses numerous modules for handling blockchain transactions, accounts, authentication, and specific blockchain protocols like Ethereum, Bitcoin, Solana, etc.

Below is an example MoonSDK initialization function showcasing authentication, storage, and network setup. It utilizes the Sepolia testnet, defined within the Chain array. The moonInstance variable, responsible for setting up the new MoonSDK, references this network configuration alongside authentication and storage parameters.

```tsx

const initialize = async () => {
	const moonInstance = new MoonSDK();

	setMoon(moonInstance);
	moonInstance.login();
};
```

## **useMoonHook**

The Moon SDK class defines methods for performing various tasks related to blockchain operations. These methods encompass functions for logging in, refreshing tokens, listing accounts, signing transactions/messages/typed data, sending transactions, and updating configurations.

The useMoonHook can utilize these functions from the SDK to import into various components of a project.

Below is an example of a useMoonHook that includes functions from the API library such as creating an account, listing accounts, updating tokens, etc.:

```jsx
export const useMoonHook = () => {

  const [moon, setMoon] = useState<MoonSDK | null>(null);

  const initialize = async () => {

    const moonInstance = new MoonSDK(;
    setMoon(moonInstance);
    moonInstance.login();
  };

  useEffect(() => {
    initialize();
  }, []);

  const updateToken = async (token: string, refreshToken: string) => {
    if (moon) {
      moon.updateToken(token);
      moon.updateRefreshToken(refreshToken);

      moon.connect();
    }
  };

  const createAccount = async () => {
    if (moon) {
      const data: CreateAccountInput = {};
      const newAccount = await moon?.getAccountsSDK().createAccount(data);
      return newAccount;
    }
  };

  const listAccounts = async () => {
    if (moon) {
      return moon.listAccounts();
    }
  };

    const disconnect = async () => {
      if (moon) {
        await moon.disconnect();
        setMoon(null);
      }
    };

    return {
      moon,
      initialize,
      updateToken,
      createAccount,
      listAccounts,
    }

  }
```

The useMoonHook can be imported into various components of the React project:

```jsx
import { useMoonHook } from '@moonup/react';

const { moon, updateToken, createAccount, listAccounts } = useMoonHook();
```

> 💡It's worth noting that while this guide focuses on integrating the Moon SDK within the React/Next.js Moon Create boilerplate environment, using TypeScript as a default language, there are numerous alternative methods for incorporating the SDK into projects.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.usemoon.ai/getting-started-with-moon-916ac83bad5646adb704eeaf6bcde252/configuring-moonsdk-e55c9e70464c4515ae898ff3cc1a9a1d.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.