useWallet

useWallet is a collection of React Hooks containing everything you need to start working with Casper Network.

npm i @casperdash/usewallet

Get Started · GitHub Repository (opens in a new tab)

Overview

Connect a Casper Wallet likes 👻 speed.

import {
	CasperProvider,
	createClient,
	CasperDashConnector,
	CasperSignerConnector
} from '@casperdash/usewallet';
 
const client = createClient({
  connectors: [new CasperSignerConnector(), new CasperDashConnector()],
  autoConnect: true,
});
 
function App() {
  return (
    <CasperProvider client={client}>
      <WalletProfile />
    </CasperProvider>
  )
}

import {
	useAccount,
	useDisconnect,
	useConnect,
	CasperSignerConnector,
	CasperDashConnector
} from '@casperdash/usewallet';
 
function WalletProfile() {
  const { publicKey } = useAccount();
  const { disconnect } = useDisconnect();
 
  const { connect: connectWithCasperSigner } = useConnect({
    connector: new CasperSignerConnector(),
  });
 
  const { connect: connectWithCasperDash } = useConnect({
    connector: new CasperDashConnector(),
  });
 
  if (publicKey)
    return (
      <div>
        Connected to {publicKey}
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    )
 
  return (
    <div>
      <button onClick={() => connectWithCasperSigner()}>Connect with Casper Signer</button>
      <br/>
      <button onClick={() => connectWithCasperDash()}>Connect with CasperDash</button>
    </div>
  )
}

In the above snippet, we create a useWallet client and pass it to the CasperProvider React Context. The client is set up to use the Casper Wallet Default Provider and automatically connect to previously connected wallets.

Next, we use the useConnect hook to connect injected supporting wallets (Casper Signer and CasperDash) to the app. Finally, we show the connected account's public key with useAccount and allow them to disconnect with useDisconnect.

Features

💼 In-app support for CasperDash and CasperSigner Wallet
👟 Optimized with caching and duplicated request elimination
🌀 Automatic data updates during account switches and disconnections
🦄 TypeScript compatibility included

... and a lot more.