Are you looking to integrate digital wallets into your decentralized application (Dapp)? Look no further! In this guide, we’ll walk you through the installation and usage of the WebExtension Wallet, enhancing your Dapp experience like never before.

1. Installation Steps

To get started, you need to install the WebExtension Wallet. Follow these simple steps:

1. Visit the Chrome Web Store.
2. Search for “WebExtension Wallet” and click to install it.
3. If you plan to test local HTML files, ensure you toggle on the “Allow access to file URLs” option in the extension management page.

2. A Brief Introduction to Using Our Extension Wallet

The WebExtension Wallet offers a variety of features designed to help you manage your digital assets with ease:

• In the “New Wallet” tab, create a wallet and download your keystore files.
• In the “Send TX” tab, import your keystore file to store your account securely in the extension.
• Once your account is set up, you can send NAS to other accounts effortlessly.
• After sending a transaction, the transaction hash will be displayed at the bottom of the extension page for your reference.
• Simply click on the transaction hash in the “Send TX” tab to view its status.
• Alternatively, you can copy the transaction hash and use the “check-TX” feature to get detailed results.

3. Instructions for Using NasExtWallet in Your Web App

Integrating the NasExtWallet into your web application can be achieved in two primary ways:

3.1 Using NebPay SDK

To facilitate communication between your Dapp page and the WebExtension Wallet, you can utilize the NebPay SDK. Here’s how:

To call a SmartContract through the extension wallet, utilize the following format:

nebPay.call(to, value, callFunction, callArgs, 
    qrcode: true,
    listener: cbCallDapp
);

The callback function cbCallDapp allows you to handle the transaction results elegantly:

function cbCallDapp(resp) {
    console.log("response: " + JSON.stringify(resp));
}

3.2 Using PostMessage

Alternatively, the postMessage API provides an easy way to communicate with the ExtensionWallet:

window.postMessage({
        target: 'contentscript',
        data: {
            to: to,
            value: 0,
            contract: contract,
            function: func,
            args: para,
        },
        method: 'neb_sendTransaction',
});

To capture the returned message, simply add an event listener like so:

window.addEventListener('message', function(e) {
    console.log("message received, msg.data: " + JSON.stringify(e.data));
    if (!!e.data.data.txhash) {
        console.log("Transaction hash: " + JSON.stringify(e.data.data.txhash, null, 2));
    }
});

4. How to Get the Account Address

If your Dapp needs to fetch the current account address from the extension, take note of the following methods:

Method 1:

var userAddress;
function getUserAddress() {
    console.log("********* get account ************");
    window.postMessage({
        target: 'contentscript',
        data: {},
        method: 'getAccount',
    });
}
window.addEventListener('message', function(e) {
    if (e.detail) {
        console.log("received by page: " + e + ", e.data: " + JSON.stringify(e.data));
        if (!!e.data.data && !!e.data.data.account) {
            userAddress = e.data.data.account;
        }
    }
});

Method 2:

In case the NasExtWallet module is injected, here’s how to get the user account:

var userAddress;
NasExtWallet.getUserAddress(function(addr) {
    userAddress = addr;
    console.log("user address is: " + addr);
});

Example Testing Page

You can use exampleTestPage.html to conduct a trial run of your Dapp and its integration with the wallet.

Troubleshooting Tips

If you experience any issues with the installation or usage of the WebExtension Wallet, here are some troubleshooting ideas:

• Ensure that your browser is up to date to avoid compatibility issues.
• Check your Internet connection, as a stable connection is required for most operations.
• If you’re facing problems sending transactions, verify that you’ve imported the correct keystore file and that your account has sufficient funds.
• Always refer to the latest documentation for any updates or changes in features.
• For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.