Comment on page
Usage
How to use NEOPIN Connect Web
Create a connector by putting the wallet connect bridge URL as 'bridge' props and attach an event to the connector.
import NeopinConnect from "nptconnect-client";
import QRCodeModal from "nptconnect-qrcode-modal";
// Create a connector object.
const connector = new NeopinConnect({
bridge: "https://bridge.walletconnect.org", // Required
qrcodeModal: QRCodeModal
});
// Session created after connection. > Open the QRCodeModal passed to the connector param.
if (!connector.connected) {
connector.createSession();
}
const { accounts, chainId } = await connector.connect();
After a connection is established (asynchronous), events are registered in the connector.
connector.on("session_update", (error, payload) => {
if (error) {
throw error;
}
// Get updated accounts and chainId
const { accounts, chainId } = payload.params[0];
});
connector.on("disconnect", (error, payload) => {
if (error) {
throw error;
}
// Delete connector
});
Accounts and chainID in the connector drop their values when they connect to the bridge server.
...
const {accounts, chainId} = connector ;
// accounts is array
const address = accounts[0];
console.log(chainId)
...
You can customize PeerMeta (ClientMeta) data.
The appID of PeerMeta data is issued when registering an affiliate, and the issued appID value must be used.
const clientMeta = {
description: string;
url: string;
icons: string[];
name: string;
appId?: string;
}
// When creating a connector object, pass it as clientMeta param
const connector = new NeopinConnect({
bridge: "https://bridge.walletconnect.org", // Required
qrcodeModal: QRCodeModal,
clientMeta // IClientMeta
});
// Type information of ClientMeta of nptconnect-types
export interface IClientMeta {
description: string;
url: string;
icons: string[];
name: string;
appId?: string;
}
This is a method that creates and sends a transaction.
This is a method that can be executed when there is a value in the accounts of the connector (when a connection is established).
// to, nonce, gasPrice, gas, value, data are random data.
// Each must be modified to suit its purpose.
const tx = {
from: "0xbc28Ea04101F03aA7a94C1379bc3AB32E65e62d3", // Required
to: "0x89D24A7b4cCB1b6fAA2625Fe562bDd9A23260359", // Required (for non contract deployments)
data: "0x", // Required
chainId: "8217", // Required
gasPrice: "0x02540be400", // Optional
gasLimit: "0x9c40", // Optional
value: "0x00", // Optional
nonce: "0x0114", // Optional
};
// Send transaction
connector
.sendTransaction(tx)
.then(result => {
// Returns transaction id (hash)
console.log(result);
})
.catch(error => {
// Error returned when rejected
console.error(error);
});
// Draft transaction
const tx = {
from: "0xbc28Ea04101F03aA7a94C1379bc3AB32E65e62d3", // Required
to: "0x89D24A7b4cCB1b6fAA2625Fe562bDd9A23260359", // Required (for non contract deployments)
data: "0x", // Required
gasPrice: "0x02540be400", // Optional
gasLimit: "0x9c40", // Optional
value: "0x00", // Optional
nonce: "0x0114", // Optional
};
// Sign transaction
connector
.signTransaction(tx)
.then(result => {
// Returns signed transaction
console.log(result);
})
.catch(error => {
// Error returned when rejected
console.error(error);
});
Last modified 9mo ago