@casperdash/usewallet NPM

useWallet

useWallet is a library/react component which designed for DApp to interact with CasperDash/Casper Signer on the Casper network.

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.

Documentation

Installation

Install @casperdash/usewallet and Casper dependency.

npm install @casperdash/usewallet casper-js-sdk

Quick Start

Connect a Casper Wallet likes 👻 speed.

import {
  CasperDashConnector,
  CasperSignerConnector,
  CasperProvider,
  createClient
} 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.