@blockshake/defly-connect

JavaScript SDK for integrating Defly Wallet to web applications. For more detailed information, please check our Defly Manual.

This is a fork of the Pera connect JavaScript SDK. For more details, visit Pera connect on GitHub.

---

Table of Contents

1. Quick Start
2. Connecting Defly and Pera Wallets
3. Balance Check
4. Handling Fees
5. Payment Request
6. Clawback Withdrawal
7. Options
8. Methods
9. Customizing Style
10. Your App Name on Defly Wallet
11. Contributing

---

Quick Start

Let's start with installing @blockshake/defly-connect:

npm install --save @blockshake/defly-connect

// Connect handler deflyWallet .connect() .then((newAccounts) => { // Set up the disconnect event listener deflyWallet.connector?.on("disconnect", handleDisconnectWalletClick);

setAccountAddress(newAccounts[0]);

}) .catch((error) => { // Handle the rejection when the user closes the modal if (error?.data?.type !== "CONNECT_MODAL_CLOSED") { console.error("Connection error:", error); } });

// On every page refresh
deflyWallet.reconnectSession().then((accounts) => {
  // Set up the disconnect event listener
  deflyWallet.connector?.on("disconnect", handleDisconnectWalletClick);

  if (accounts.length) {
    setAccountAddress(accounts[0]);
  }
});
// Single Transaction
try {
  const signedTxn = await deflyWallet.signTransaction([singleTxnGroups]);
  console.log("Transaction signed successfully", signedTxn);
} catch (error) {
  console.error("Couldn't sign transaction", error);
}
// Set up an event listener to handle wallet disconnection.
### Connecting Defly and Pera Wallets

#### Defly Wallet
```jsx
// Connect Defly Wallet
deflyWallet.connect().then((accounts) => {
  console.log("Connected accounts:", accounts);
}).catch((error) => {
  console.error("Error connecting Defly Wallet:", error);
});
// Connect Pera Wallet
peraWallet.connect().then((accounts) => {
  console.log("Connected accounts:", accounts);
}).catch((error) => {
  console.error("Error connecting Pera Wallet:", error);
});
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.

---

### **Step 2: Add a Section for Balance Check**
**Location:** Add this section after the "Connecting Defly and Pera Wallets" section.  
**Current Line:** Insert after the newly added connection code (line **39** if the above section is added).

**Code to Add:**
```markdown
### Balance Check
```jsx
// Check account balance
async function getAccountBalance(accountAddress) {
  const algodClient = new AlgodClient("https://testnet-algorand.api.purestake.io/ps2", "Your-API-Token");
  const accountInfo = await algodClient.accountInformation(accountAddress).do();
  console.log("Account balance:", accountInfo.amount);
}

---

### **Step 3: Add a Section for Fees**
**Location:** Add this section after the "Balance Check" section.  
**Current Line:** Insert after the newly added balance check code (line **46** if the above section is added).

**Code to Add:**
```markdown
### Fees
```jsx
// Specify transaction fees
const fee = 1000; // in microAlgos
const txnParams = {
  fee: fee,
  flatFee: true,
  firstRound: 10000,
  lastRound: 10100,
  genesisID: "testnet-v1.0",
  genesisHash: "Your-Genesis-Hash",
  sender: "Your-Address",
  receiver: "Recipient-Address",
  amount: 1000000, // 1 Algo
  note: new Uint8Array(Buffer.from("Transaction Note")),
};

---

### **Step 4: Add a Section for Payment Request**
**Location:** Add this section after the "Fees" section.  
**Current Line:** Insert after the newly added fees code (line **56** if the above section is added).

**Code to Add:**
```markdown
### Payment Request
```jsx
// Construct and sign a payment transaction
const paymentTxn = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
  from: "Your-Address",
  to: "Recipient-Address",
  amount: 1000000, // 1 Algo
  note: new Uint8Array(Buffer.from("Payment Note")),
  suggestedParams: txnParams,
});

const signedTxn = await deflyWallet.signTransaction([paymentTxn]);
await algodClient.sendRawTransaction(signedTxn).do();
console.log("Payment sent successfully");

---

### **Step 5: Add a Section for Clawback Withdrawal**
**Location:** Add this section after the "Payment Request" section.  
**Current Line:** Insert after the newly added payment request code (line **66** if the above section is added).

**Code to Add:**
```markdown
### Clawback Withdrawal
```jsx
// Clawback transaction example
const clawbackTxn = algosdk.makeAssetTransferTxnWithSuggestedParamsFromObject({
  from: "Clawback-Address",
  to: "Recipient-Address",
  assetIndex: 123456, // Replace with your asset ID
  amount: 100000, // Amount to withdraw
  revocationTarget: "Revoked-Address",
  suggestedParams: txnParams,
});

const signedClawbackTxn = await deflyWallet.signTransaction([clawbackTxn]);
await algodClient.sendRawTransaction(signedClawbackTxn).do();
console.log("Clawback transaction executed successfully");
```jsx
deflyWallet.connect().then((accounts) => {
  console.log("Connected accounts:", accounts);
});

.defly-wallet-connect-modal { // The default value of z-index is 10. You can lower and raise it as much as you want. z-index: 11; } After that you can sign transaction with this way

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

Options

option	default	value
chainId	4160	416001, 416002, 416003 , 4160	optional
shouldShowSignTxnToast	true	boolean	optional

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:

Methods

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

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

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

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

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

Disconnects from the wallet and resets the related storage items.

DeflyWalletConnect.platform: DeflyWalletPlatformType

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

DeflyWalletConnect.isConnected: boolean

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

DeflyWalletConnect.signTransaction(txGroups: SignerTransaction[][], signerAddress?: string): Promise<Uint8Array[]>

Starts the sign process and returns the signed transaction in Uint8Array

Customizing Style

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

.defly-wallet-connect-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 Defly Wallet

By default, the connect wallet drawer on Defly 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.