> For the complete documentation index, see [llms.txt](https://docs.eniac.network/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.eniac.network/build/frontend-development/overview.md).

# Overview

Developing a frontend for a dApp on ENI involves connecting to wallets, interacting with the blockchain via RPC endpoints, and signing and broadcasting transactions. A dApp should choose either EVM or Cosmos as its connection method but can leverage interoperability features like precompiles and pointer contracts to support both environments.

#### Wallet Connection

Connecting to a wallet is a critical step in dApp development. Below are some recommended wallet connection libraries, each with its specific advantages:

#### EVM and EVM RPC dApps:

* **Wagmi**: A React-based library for Ethereum dApps that simplifies wallet connections and interactions. It provides hooks for interacting with Ethereum wallets and contracts, making it suitable for modern frontend libraries and frameworks.
  * [Wagmi Documentation](https://wagmi.sh/)
* **Viem**: A lightweight and flexible Ethereum development library.
  * [Viem Documentation](https://viem.sh/docs/getting-started)
* **Ethers.js**: A complete and compact library for interacting with the Ethereum blockchain and its ecosystem. Known for its simplicity and extensive functionality.
  * [Ethers.js Documentation](https://docs.ethers.io/v6/)

#### RPC Endpoints

dApps need to connect to RPC providers to broadcast transactions or query the chain. There are many free providers available on testnets and development networks, while mainnets have some rate-limited providers. For more information and links, refer to the RPC Providers section.

#### Polyfills Warning

When developing frontend applications for blockchain, it’s important to note that certain libraries may require polyfills, especially when used in a browser environment. For example, the `Buffer` class and other Node.js-specific features are not natively available in browsers and need to be polyfilled.

If you’re using Vite or another Rollup-based frontend library, you can add the following to your application’s entry point:

```tsx
import { Buffer } from 'buffer';

// Polyfill self for browsers, global for Node.js
const globalObject = typeof self !== 'undefined' ? self : global;

Object.assign(globalObject, {
  process: process,
  Buffer: Buffer
});
```

If you’re using a Webpack-based bundler, you can use the following plugin in your Webpack configuration:

```
yarn add -D node-polyfill-webpack-plugin
```

```tsx
import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';

... // The rest of your Webpack configuration
plugins: [
    ...
    new NodePolyfillPlugin(),
    ...
],
...
```

#### Advice for New Developers

1. **Understand Gas Fees**: Gas fees are essential for executing transactions on the blockchain. Ensure you understand how they work and how to optimize your contracts to minimize gas usage.
2. **Security Practices**: Always follow best security practices. Regularly audit your code and stay informed about the latest security vulnerabilities and patches.
3. **Testing**: Thoroughly test your dApps in different environments to ensure they function correctly. Use testnets and faucets to test transactions without spending real tokens.
4. **Documentation**: Leverage the extensive documentation available for each library and tool. Good documentation can significantly speed up your development process.
5. **Community and Support**: Join developer communities, forums, and chat groups. Engaging with other developers can provide valuable insights and help you resolve issues more efficiently.


---

# 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.eniac.network/build/frontend-development/overview.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.