@perawallet/connect-beta
v2.0.21
Published
Beta version of Pera Wallet Connect
Downloads
923
Readme
@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
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.