@perawallet/connect is a JavaScript SDK for integrating to web applications. You can use this SDK to connect to a dApp, sign transactions, etc. using .
Quick Start
Let's look at how we can connect Pera Wallet to our dApp using **@perawallet/connect**. We will use React for these examples, but you can also use **@perawallet/connect** with other frameworks. For this, you can take a look at the example applications section. Let’s start!
First, install @perawallet/connect
npm install --save @perawallet/connect
-- or --
yarn add @perawallet/connect
After that you can import the SDK into your React app like this using:
import {PeraWalletConnect} from "@perawallet/connect"
2. Create the PeraWalletConnect instance:
const peraWallet = new PeraWalletConnect();
When creating a new instance, you can use different options:
type AlgorandChainIDs = 416001 | 416002 | 416003 | 4160;
const peraWallet = new PeraWalletConnect({
// Default chainId is "4160"
chainId: "416001"
});
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:
const peraWallet = new PeraWalletConnect({
shouldShowSignTxnToast: false
});
3. Create connect example button for wallet connection:
function App() {
// Store account address which is connected dApp with Pera Wallet
const [accountAddress, setAccountAddress] = (useState < string) | (null > null);
// Check app is connected with Pera Wallet
const isConnectedToPeraWallet = !!accountAddress;
return (
<button
onClick={
isConnectedToPeraWallet ? handleDisconnectWalletClick : handleConnectWalletClick
}>
{isConnectedToPeraWallet ? "Disconnect" : "Connect to Pera Wallet"}
</button>
);
}
4. Create handler methods for Pera Wallet connection:
handleWalletConnectClick()
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
}
});
}
handleDisconnectWalletClick()
function handleDisconnectWalletClick() {
peraWallet.disconnect();
setAccountAddress(null);
}
We use them in the onClick event of the button that we created in the previous step. If there is an account connected to the dApp, we use the handleDisconnectWalletClick() function, if there is no account connected, we use the handleWalletConnectClick() function.
5. If you don't want the user's account information to be lost by the dApp when the user closes the browser with with the wallet connection to the dApp, you need to handle the reconnect session status. You can do this in the following way:
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 (peraWallet.isConnected && accounts.length) {
setAccountAddress(accounts[0]);
}
}).catch(error) {
console.log(error);
};
}, []);
After these 5 steps, you can use your dApp making new transactions with Pera Wallet 🎊. Your App.tsx file will look like this.
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);
}
}
Using with React@18
When you want to use @perawallet/connect library with React 18, you need to make some changes. react-scripts stopped polyfilling some of the packages with the react-scripts@5.x version. After creating a new app with npx create-react-app my-app or in your react application, the following changes should be made.
2. After that you need to override some webpack features. Create the following file in the root directory of the project and copy the following code block into it.
Starts the sign process and returns the signed transaction in Uint8Array
Signing Transactions
@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. 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 find below:
import {Transaction} from "algosdk";
export interface SignerTransaction {
txn: Transaction;
/**
* Optional list of addresses that must sign the transactions.
* Wallet skips to sign this txn if signers is empty array.
* If undefined, wallet tries to sign it.
*/
signers?: string[];
}
You have to follow these steps to a sign transaction.
Set up algosdk client
const algod = new algosdk.Algodv2("", CLIENT_SERVER_URL, CLIENT_SERVER_PORT);
const optinTxGroups = await generateOptIntoAssetTxns({
assetID: 10458941,
initiatorAddr: accountAddress!
});
const transferTxGroups = await generateAssetTransferTxns({
to: "GD64YIY3TWGDMCNPP553DZPPR6LDUSFQOIJVFDPPXWEG3FVOJCCDBBHU5A",
assetID: 10458941,
initiatorAddr: accountAddress!
});
try {
const signedTxnGroups = await peraWallet.signTransaction([
optinTxGroups,
transferTxGroups
]);
console.log(signedTxnGroups);
// Sign every txn in the group
for (const signedTxnGroup of signedTxnGroups) {
const {txId} = await algod.sendRawTransaction(signedTxnGroup).do();
console.log(`txns signed successfully! - txID: ${txId}`);
}
} catch (error) {
console.log("Couldn't sign all txns",error);
}
Customization
@perawallet/connect lets you UI change a few things based on your dApp's needs.
Change Pera Wallet Connect Modalz-index to avoid conflicts
.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;
}
2. Remove Sign Guidance Toast
const peraWallet = new PeraWalletConnect({
shouldShowSignTxnToast: false
});
3. Close Sign Guidance Toast
import {closePeraWalletSignTxnToast} from "@perawallet/connect";
// ...Business logic
// Close the toast message
closePeraWalletSignTxnToast();
4. 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" />
Example Applications
Brand Guidelines
@perawallet/connect is maintained by the . For more detailed information you can read this document or the .
Check the guide before migrating to V1 or higher.
Please follow our brand guidelines when using @perawallet/connect in your dApp. To download our Media Kit that includes useful assets such as the official Pera logo, App images, roadmap, and official links, please visit our .