> For the complete documentation index, see [llms.txt](https://docs.constellationnetwork.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.constellationnetwork.io/stargazer-wallet/guide/supported-connectors.md).

# Supported Connectors

This section provides guidance on integrating different library connectors to facilitate wallet connectivity in your application. We support connectors for [`web3react/v6`](https://github.com/Uniswap/web3-react/tree/v6), [`wagmi`](https://wagmi.sh/), and [`react hooks`](https://react.dev/reference/react/hooks). Each connector has its own set of configurations/features and is designed to simplify the process of connecting to the Stargazer Wallet.

#### Web3React[​](https://docs.constellationnetwork.io/stargazer/Guide/supportedConnectors#web3react) <a href="#web3react" id="web3react"></a>

[`web3react/v6`](https://github.com/Uniswap/web3-react/tree/v6) is a framework that allows you to interact with Ethereum blockchain and smart contracts. It provides a simple and flexible way to connect to different wallets.

**Installation**[**​**](https://docs.constellationnetwork.io/stargazer/Guide/supportedConnectors#installation)

To install the [`web3react/v6`](https://github.com/Uniswap/web3-react/tree/v6) connector, run the following command:

If you're using NPM

```typescript
npm install @stardust-collective/web3-react-stargazer-connector
```

If you're using NPM

```typescript
yarn add @stardust-collective/web3-react-stargazer-connector
```

**Example Usage**[**​**](https://docs.constellationnetwork.io/stargazer/Guide/supportedConnectors#example-usage)

```typescript
import { StargazerWeb3ReactConnector } from "@stardust-collective/web3-react-stargazer-connector";
import { useWeb3React } from "@web3-react/core";

const stargazerConnector = new StargazerWeb3ReactConnector({
  supportedChainIds: [1, 3],
});

function App() {
  const { activate, active } = useWeb3React();

  const connect = async () => {
    try {
      await activate(stargazerConnector);
    } catch (ex) {
      console.error(ex);
    }
  };

  return (
    <div>
      <button onClick={connect}>{active ? "Connected" : "Connect"}</button>
    </div>
  );
}

export default App;
```

#### Wagmi[​](https://docs.constellationnetwork.io/stargazer/Guide/supportedConnectors#wagmi) <a href="#wagmi" id="wagmi"></a>

[`wagmi`](https://wagmi.sh/) is a set of React Hooks for Ethereum, which simplifies the process of connecting to Ethereum networks and smart contracts.

**Installation**[**​**](https://docs.constellationnetwork.io/stargazer/Guide/supportedConnectors#installation-1)

To install the [`wagmi`](https://wagmi.sh/) connector, run the following command:

If you're using NPM

```typescript
npm install @stardust-collective/web3-react-stargazer-connector
```

If you're using NPM

```typescript
yarn add @stardust-collective/web3-react-stargazer-connector
```

**Example Usage**[**​**](https://docs.constellationnetwork.io/stargazer/Guide/supportedConnectors#example-usage-1)

```typescript
import {stargazerWalletWagmiConnector} from '@stardust-collective/web3-react-stargazer-connector';
import { mainnet, polygon } from 'wagmi/chains'
import { createConfig, http, useConnect } from 'wagmi'

const stargazerConnector = stargazerWalletWagmiConnector();

declare module 'wagmi' {
  interface Register {
    config: typeof config
  }
}

const config = createConfig({
  chains: [mainnet, polygon],
  transports: {
    [mainnet.id]: http('[your rpc endpoint url]'),
    [polygon.id]: http('[your rpc endpoint url]'),
  },
  connectors: [
    stargazerWalletWagmiConnector({}),
    ...other wallet connectors
  ],
})

function App() {
  const { connectors, connect } = useConnect()
  const { address } = useAccount();

  const doConnect = () => {
    for(const connector of connectors){
      if(connector.type === stargazerWalletWagmiConnector.type){
        connect(connector);
      }
    }
  }

  return (
    <div>
      <button onClick={doConnect}>Connect Wallet</button>
      {address && <p>Connected as {address}</p>}
    </div>
  );
}

export default App;
```

#### React Hooks[​](https://docs.constellationnetwork.io/stargazer/Guide/supportedConnectors#react-hooks) <a href="#react-hooks" id="react-hooks"></a>

The [`react hooks`](https://react.dev/reference/react/hooks) connector is a generic react hook that will enable your app to connect to the stargazer wallet on the constellation network, it will return a EIP-1193 compatible provider (among other properties), that will **only** connect to the constellation network (DAG) via RPC requests, the constellation RPC API reference can be found [here](https://docs.constellationnetwork.io/stargazer/APIReference/constellationRPCAPI/).

**Installation**[**​**](https://docs.constellationnetwork.io/stargazer/Guide/supportedConnectors#installation-2)

To install the [`react hooks`](https://react.dev/reference/react/hooks) connector, run the following command:

If you're using NPM

```typescript
npm install @stardust-collective/web3-react-stargazer-connector
```

If you're using NPM

```typescript
yarn add @stardust-collective/web3-react-stargazer-connector
```

**Example Usage**[**​**](https://docs.constellationnetwork.io/stargazer/Guide/supportedConnectors#example-usage-2)

```typescript
import {useStargazerWallet} from '@stardust-collective/web3-react-stargazer-connector';

function App() {
  const {activate, deactivate, ...state } = useStargazerWallet();

  const doConnect = async () => {
    await activate();
  };

  const doSignMessage = async () => {
    if(!state.active){
      return;
    }

    const signatureRequest = {
      content: 'Sign this message to confirm your participation in this project.',
      metadata: {
        field1: 'an-useful-value',
        field2: 1,
        field3: null /* ,
        field4: {
          // Nested fields are not supported
          prop:1
        } */
      }
    };

    // Encode the signature request - Base64 < JSON < Request
    const signatureRequestEnconded = window.btoa(JSON.stringify(signatureRequest));

    await state.request({
      method: 'dag_signMessage',
      params: [state.account, signatureRequestEnconded]
    });
  }

  return (
    <div>
      <span>Connected To: {state.active && state.account}</span>
      <button onClick={doConnect}>{state.active ? "Connected" : "Connect"}</button>
      <button onClick={doSignMessage}>Sign Message</button>
    </div>
  );
}

export default App;
```

#### New Connectors Support[​](https://docs.constellationnetwork.io/stargazer/Guide/supportedConnectors#new-connectors-support) <a href="#new-connectors-support" id="new-connectors-support"></a>

We are committed to expanding our support for library connectors to meet the evolving needs of our users. If you require a connector that is not currently supported, or have suggestions for new connectors, we are open to exploring these possibilities and integrating them into the wallet.

**Requesting New Connectors**[**​**](https://docs.constellationnetwork.io/stargazer/Guide/supportedConnectors#requesting-new-connectors)

To request the addition of new library connectors or suggest improvements, please reach out to us through the following channels:

* **GitHub Issues**: [StardustCollective/stargazer-wallet-connector](https://github.com/StardustCollective/stargazer-wallet-connector/issues)
* **Discord Channel**: [Constellation Discord](https://discord.gg/NKXD5ZJ5cq)


---

# 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.constellationnetwork.io/stargazer-wallet/guide/supported-connectors.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.