Getting Started

The easiest way to get started with integrating Panda Wallet into your React App is to check out the sample application we've put together. It contains a solid foundation that should make it easy to be up and running fast 🚀.

At its core, the sample app uses the provider npm package to wrap the application making it a breeze to setup.

1. Install the package

npm i panda-wallet-provider

2. Import the provider and wrap your app

//... other imports
import { PandaProvider } from "panda-wallet-provider";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <PandaProvider>
    <App />
  </PandaProvider>
);

3. Connect the wallet

import { usePandaWallet } from 'panda-wallet-provider';

function YourComponent() {
  const wallet = usePandaWallet();
  const [pubKey, setPubKey] = useState<string | undefined>();
  
  const handleConnect = async () => {
    const isReady = wallet?.isReady;
    if (!isReady) {
      window.open(
        "https://chromewebstore.google.com/detail/panda-wallet/mlbnicldlpdimbjdcncnklfempedeipj",
        "_blank"
      );
      return;
    };
    
  const identityPubKey = await wallet.connect();
  
  if (identityPubKey) {
    setPubKey(identityPubKey);
    console.log(identityPubKey);
    // 02a45894d4cc9424f779e4403f751cdce383d52a18b2f48fdf6467c097e5cdfc05
  };
};

  return (
    <Button onClick={handleConnect}>Connect Wallet</Button>
  );
}

Live Demo 🤩

https://panda-wallet-sample-app.vercel.app