Argent
Search
K

Web Wallet with starknet-react

To help you easily integrate web wallet with starknet-react, we created the @argent/starknet-react-webwallet-connector package.
@argent/starknet-react-webwallet-connector is a convenient package for integrating Argent's Web Wallet with StarkNet applications using the starknet-react library. This connector enables you to easily connect to the Argent Web Wallet for user authentication and StarkNet-based transactions.

installation

To install the @argent/starknet-react-webwallet-connector, use the following command:
npm install @argent/starknet-react-webwallet-connector

imports

Next up we need to import the following components:
import { WebWalletConnector } from "@argent/starknet-react-webwallet-connector";
import { StarknetConfig } from "@starknet-react/core";

Establishing a connection

Add the WebWalletConnector to your existing connectors array, specifying the wallet URL:
const connectors = [
// ...your other connectors
new WebWalletConnector({
url: "https://web.argent.xyz",
}),
];
Wrap your app component with the StarknetConfig component, providing the connectors array:
function App({ Component, pageProps }) {
return (
<StarknetConfig autoConnect connectors={connectors}>
<Component {...pageProps} />
</StarknetConfig>
);
}
With these changes, your application will now be able to connect to Argent's Web Wallet for user authentication and StarkNet-based transactions.
It's important to note that web wallet is only available for users on mainnet. If as a dApp for integration and testing purposes, you need access to an internal testnet environment, please contact Argent privately.