JSPM – @perawallet/connect@0.1.2

Package Exports

@perawallet/connect
@perawallet/connect/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@perawallet/connect) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@perawallet/connect

JavaScript SDK for integrating Pera Wallet to web applications.

Getting Started

Try it out using CodeSandbox

Learn how to integrate with your JavaScript application

Learn how to Sign Transactions

Example Applications

Using React Hooks

Using Vue3

Guide

Let's start with installing @perawallet/connect

npm install --save @perawallet/connect

Using React Hooks

import {PeraWalletConnect} from "@perawallet/connect";

// Create the PeraWalletConnect instance outside of the component
const peraWallet = new PeraWalletConnect();

function App() {
  const [accountAddress, setAccountAddress] = useState<string | null>(null);
  const isConnectedToPeraWallet = !!accountAddress;

  useEffect(() => {
    // Reconnect to the session when the component is mounted
    peraWallet.reconnectSession().then((accounts) => {
      // Setup the disconnect event listener
      peraWallet.connector?.on("disconnect", handleDisconnectWalletClick);

      if (accounts.length) {
        setAccountAddress(accounts[0]);
      }
    });
  }, []);

  return (
    <button
      onClick={
        isConnectedToPeraWallet ? handleDisconnectWalletClick : handleConnectWalletClick
      }>
      {isConnectedToPeraWallet ? "Disconnect" : "Connect to Pera Wallet"}
    </button>
  );

  function handleConnectWalletClick() {
    peraWallet
      .connect()
      .then((newAccounts) => {
        // Setup the disconnect event listener
        peraWallet.connector?.on("disconnect", handleDisconnectWalletClick);

        setAccountAddress(newAccounts[0]);
      })
      .reject((error) => {
        // You MUST handle the reject because once the user closes the modal, peraWallet.connect() promise will be rejected.
        // For the async/await syntax you MUST use try/catch
      });
  }

  function handleDisconnectWalletClick() {
    peraWallet.disconnect();

    setAccountAddress(null);
  }
}

Sign Transaction

@perawallet/connect also allows signing transactions using the Pera Wallet application. Once the signTransaction method is triggered if the user is on a mobile browser, the Pera Wallet app will be launched automatically, if the browser blocks the redirection there's also a popup that links to the Pera Wallet app.

signTransaction accepts SignerTransaction[][] the type can be found here

To see more details & working examples please visit here

// Setting up algosdk client
const algod = new algosdk.Algodv2("", "https://node.testnet.algoexplorerapi.io/", 443);

// Setting up Transactions
const suggestedParams = await algod.getTransactionParams().do();
const optInTxn = algosdk.makeAssetTransferTxnWithSuggestedParamsFromObject({
  from: FROM_ADDRESS,
  to: FROM_ADDRESS,
  assetIndex: ASSET_ID,
  amount: 0,
  suggestedParams
});
const optInTxn2 = algosdk.makeAssetTransferTxnWithSuggestedParamsFromObject({
  from: FROM_ADDRESS,
  to: FROM_ADDRESS,
  assetIndex: ASSET_ID,
  amount: 0,
  suggestedParams
});

// Mapping `Transaction` to `SignerTransaction[]`
const singleTxnGroups = [{txn: optInTxn, signers: [FROM_ADDRESS]}];
const multipleTxnGroups = [
  {txn: optInTxn, signers: [FROM_ADDRESS]},
  {txn: optInTxn2, signers: [FROM_ADDRESS]}
];

// Single Transaction
try {
  const signedTxn = await peraWallet.signTransaction([singleTxnGroups]);
} catch (error) {
  console.log("Couldn't sign Opt-in txns", error);
}

// Group Transaction
try {
  const signedTxns = await peraWallet.signTransaction([multipleTxnGroups]);
} catch (error) {
  console.log("Couldn't sign Opt-in txns", error);
}

Your app name on Pera Wallet

By default, the connect wallet drawer on Pera Wallet gets the app name from document.title.

In some cases, you may want to customize it. You can achieve this by adding a meta tag to your HTML between the head tag.

<meta name="name" content="My dApp" />