JSPM – @perawallet/connect@0.1.6

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
        if (error?.data?.type !== "CONNECT_MODAL_CLOSED") {
          // log the necessary errors
        }
      });
  }

  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.

@perawallet/connect guides users with a toast message when the signTransaction is triggered on desktop. It's enabled by default but in some cases, you may not need to the toast message (e.g. you already have signing guidance for users). There's an option called shouldShowSignTxnToast to disable it, see the example below:

const peraWallet = new PeraWalletConnect({shouldShowSignTxnToast: false});

You can also call the closePeraWalletSignTxnToast function to hide the toast.

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

// ...Business logic

// Close the toast message
closePeraWalletSignTxnToast();

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" />