Skip to main content

Supported Connectors

This section provides guidance on integrating different library connectors to facilitate wallet connectivity in your application. We support connectors for web3react/v6, wagmi, and 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

web3react/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

To install the web3react/v6 connector, run the following command:

If you're using NPM

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

If you're using NPM

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

Example Usage

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

wagmi is a set of React Hooks for Ethereum, which simplifies the process of connecting to Ethereum networks and smart contracts.

Installation

To install the wagmi connector, run the following command:

If you're using NPM

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

If you're using NPM

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

Example Usage

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

The 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.

Installation

To install the react hooks connector, run the following command:

If you're using NPM

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

If you're using NPM

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

Example Usage

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

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

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

Contents