Wallets

Connectors are used to connect the user's wallet to your dapp. If you dapp requires the user to submit a transaction or sign a message, you must provide a list of supported wallets to Starknet React.

Connectors

This in an alphabetical list of connectors supported by Starknet React.

Injected Connector

An injected connector is a wallet that injects itself in the web page. This type of wallets are also known as "browser wallets".

Configure a new injected wallet with the following properties:

• id (required): unique wallet id, used when injecting the wallet in the web page.
• name (optional): human friendly name.
• icon (optional): wallet icons, for both light and dark mode. Icons should be base 64 encoded svg images that developers can use as src properties on an img HTML tag.

useInjectedConnectors

Starknet React provides the useInjectedConnectors hook to discover injected wallets automatically. You can read more about this hook in the documentation.

Injected

This helper is useful to create a new connector with the provided id.

import { injected } from "@starknet-react/core";
 
const connector = injected({ id: "my-wallet" });

Argent X

The Argent X wallet is supported out of the box.

import { argent } from "@starknet-react/core";
 
const connectors = [
  argent()
];

Braavos

The Braavos wallet is supported out of the box.

import { braavos } from "@starknet-react/core";
 
const connectors = [
  braavos()
];

Cartridge Controller

The Cartridge Controller wallet is supported however, you need to install the @cartridge/connector package.

The Controller enables seamless use of Session Keys.

pnpm i @cartridge/connector

import React, { useCallback } from "react";
import { ControllerConnector } from "@cartridge/connector";
import { Connector } from "@starknet-react/core";
 
const rpc = useCallback(() => {
  return { nodeUrl: 'https://api.cartridge.gg/x/starknet/mainnet' };
}, []);
 
// Without Session Keys
const connectors = [
  new ControllerConnector({
    rpc: rpc().nodeUrl,
  }) as never as Connector,
];

import React, { useCallback } from "react";
import { ControllerConnector } from "@cartridge/connector";
import { Connector } from "@starknet-react/core";
 
const rpc = useCallback(() => {
  return { nodeUrl: 'https://api.cartridge.gg/x/starknet/mainnet' };
}, []);
 
// With Session Keys
const connectors = [
  new ControllerConnector({
    rpc: rpc().nodeUrl, 
    policies:[ 
      { 
        target: "0x3f96056436be253753351fe689110ced7d53f5db3fd98f13df3f19058311b95", 
        method: "create", 
      }, 
    ], 
  }) as never as Connector,
];