npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@perawallet/connect-beta

v2.0.21

Published

Beta version of Pera Wallet Connect

Downloads

782

Readme

Pera Connect Cover Image

@perawallet/connect-beta (Beta version of Pera Connect)

JavaScript SDK for integrating Pera Wallet to web applications. For more detailed information, please check our Pera Connect Docs.

Getting Started

Learn how to integrate with your JavaScript application

Learn how to Sign Transactions

Try it out using CodeSandbox

Example Applications

Quick Start

Let's start with installing @perawallet/connect-beta

npm install --save @perawallet/connect-beta
// Connect handler
const peraWallet = new PeraWalletConnect({
  projectId: <YOUR_PROJECT_ID>
});

peraWallet
  .connect()
  .then((newAccounts) => {
    // Setup the disconnect event listener
    peraWallet.client?.on("session_delete", 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
    }
  });

If you don't want the user's account information to be lost by the dApp when the user closes the browser with user’s wallet connected to the dApp, you need to handle the reconnect session status. You can do this in the following way.

// On the every page refresh
peraWallet.reconnectSession().then((accounts) => {
  // Setup the disconnect event listener
  peraWallet.client?.on("session_delete", handleDisconnectWalletClick);

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

After that you can sign transaction with this way

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

Options

| option | default | value | | | ------------------------ | ------- | ------------------------------------- | -------- | | projectId | | string | required | | chainId | 4160 | 416001, 416002, 416003 , 4160 | optional | | shouldShowSignTxnToast | true | boolean | optional | | compactMode | false | boolean | optional |

projectId (required)

Your project's unique identifier that can be obtained at Wallet Connect Cloud. Learn more on Wallet Connect Docs.

chainId

Determines which Algorand network your dApp uses.

MainNet: 416001

TestNet: 416002

BetaNet: 416003

All Networks: 4160

shouldShowSignTxnToast

It's enabled by default but in some cases, you may not need the toast message (e.g. you already have signing guidance for users). To disable it, use the shouldShowSignTxnToast option.

compactMode

It offers a compact UI optimized for smaller screens, with a minimum resolution of 400x400 pixels.

Methods

PeraWalletConnect.connect(): Promise<string[]>

Starts the initial connection flow and returns the array of account addresses.

PeraWalletConnect.reconnectSession(): Promise<string[]>

Reconnects to the wallet if there is any active connection and returns the array of account addresses.

PeraWalletConnect.disconnect(): Promise<void | undefined>

Disconnects from the wallet and resets the related storage items.

PeraWalletConnect.platform: PeraWalletPlatformType

Returns the platform of the active session. Possible responses: mobile | web | null

PeraWalletConnect.isConnected: boolean

Checks if there's any active session regardless of platform. Possible responses: true | false

PeraWalletConnect.signData(data: PeraWalletArbitraryData[], signer: string): Promise<Uint8Array[]>

Starts the signing process for arbitrary data signing and returns the signed data in Uint8Array. Uses signBytes method of algosdk behind the scenes. signer should be a valid Algorand address that exists in the user's wallet.

const signedData: Uint8Array[] = await peraWallet.signData([
  {
    data: new Uint8Array(Buffer.from(`timestamp//${Date.now()}`)),
    message: "Timestamp confirmation"
  },
  {
    data: new Uint8Array(Buffer.from(`agent//${navigator.userAgent}`)),
    message: "User agent confirmation"
  }
], "SAHBJDRHHRR72JHTWSXZR5VHQQUVC7S757TJZI656FWSDO3TZZWV3IGJV4");

Customizing Style

You can override the z-index using the .pera-wallet-modal class so that the modal does not conflict with another component on your application.

.pera-wallet-modal {
  // The default value of z-index is 10. You can lower and raise it as much as you want.
  z-index: 11;
}

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

Contributing

All contributions are welcomed! To get more information about the details, please read the contribution guide first.