Getting Started in React

Welcome to the MoonChute integration guide for React applications. Here, we will walk you through the steps required to seamlessly integrate MoonChute into your React project. Ensure you have access to your MoonChute Dashboard to retrieve your API key.

While you can utilize any React app template, for the purpose of this guide, we'll employ the "create next app" template.

Note

If you don't have an MoonChute APP yet, please refer to this tutorial and visit the dashboard to create one.

Setup Steps

1. Installing the MoonChute Package.

   Use your preferred package manager to install the MoonChute library:

   yarn add moonchute wagmi viem

   where wagmi and viem are foundational libraries that facilitate interactions with blockchain.

   Configuring Wagmi

   MoonChute leverages wagmi for its extensive hooks and utilities that simplify blockchain interactions. Configure wagmi to connect to blockchain as shown below:

   import { createConfig, configureChains, polygon } from 'wagmi';
   import { publicProvider } from 'wagmi/providers/public';
   
   const { chains, publicClient, webSocketPublicClient } = configureChains(
     [polygon],
     [publicProvider()]
   );
   
   const config = createConfig({
     publicClient,
     webSocketPublicClient,
   });

   For more configuration setup, please refer to the wagmi documentation.

2. Importing Required Modules

   In your main application file (e.g., App.tsx), import createMoonChuteConfig and MoonChuteConfig:

   import { MoonChuteConfig, createMoonChuteConfig } from 'moonchute';

3. Configuring MoonChute with your APP_ID Key

   Replace <YOUR_MOONCHUTE_APP_ID> with your actual MoonChute Application ID:

   const config = createMoonChuteConfig({ appId: YOUR_MOONCHUTE_APP_ID });

4. Integrating into your App Component

   Your updated App.tsx should resemble the structure below:

   import { MoonChuteConfig, createMoonChuteConfig } from 'moonchute';
   import { configureChains, createConfig, WagmiConfig, polygon } from 'wagmi';
   import { publicProvider } from 'wagmi/providers/public';
   
   const { chains, publicClient, webSocketPublicClient } = configureChains(
     [polygon],
     [publicProvider()]
   );
   
   const wagmiConfig = createConfig({
     publicClient,
     webSocketPublicClient,
   });
   
   const config = createMoonChuteConfig({
     appId: YOUR_MOONCHUTE_APP_ID,
   });
   
   function App() {
     return (
       <WagmiConfig config={wagmiConfig}>
         <MoonChuteConfig config={config}>
           <MyComponent />
         </MoonChuteConfig>
       </WagmiConfig>
     );
   }
   
   export default App;

Prepare and Send User Operations

Use MoonChute hooks to manage user operations in your components:

• Retrieve Accounts: Get smart accounts with useSmartAccounts hook.
• Prepare Operations: Set up user operations with usePrepareUserOperation.
• Send Operations: Execute operations using useSendUserOperation.

Here's a quick component example:

import {
  useAccount,
  usePrepareUserOperation,
  useSendUserOperation,
} from 'moonchute';

export default function MyComponent() {
  const { data: accounts } = useSmartAccounts({
    address: YOUR_ADDRESS,
    chainId: CHAIN_ID,
  });

  const { config } = usePrepareUserOperation({
    address: YOUR_ADDRESS,
    account: accounts.smartAccount[0].address,
    abi: NFT_ABI,
    functionName: 'mint',
    args: [address],
  });

  const { data: userOpHash, write } = useSendUserOperation(config);

  return (
    <div>
      <button onClick={() => write()} disabled={!config}>
        Mint NFT
      </button>
      {userOpHash && <p>Transaction Hash: {userOpHash}</p>}
    </div>
  );
}

Launching the Development Server

Initiate your development server using the command below:

yarn dev

Following these steps should set you up effectively, enabling you to leverage MoonChute hooks within your application. If you encounter any challenges, please refer back to this documentation or seek assistance from the MoonChute community.

Additionally, we've constructed an example app incorporating the MoonChute SDK. You're encouraged to check it out for reference and insights!