Skip to main content

Interact with a dApp

danger

The UP Browser Extenstion is currently in the development alpha version. DO NOT use this in production!

note

If you have MetaMask installed, right click on both MetaMask and UP Extension and select "This Can Read and Change Site Data > When you Click the Extension". This was you can select per tab, which extension can read your site. By closing the tab you can reset this.

Setup

The extension injects an ethereum object into a web page as window.ethereum to interact with the extension.

1. Initialize a blockchain provider.

import Web3 from 'web3';
const web3 = new Web3(window.ethereum);

2. Get access to the UP address in use.

A call to requestAccounts will open an extension popup to authorize an account.

const accountsRequest: string[] = await web3.eth.requestAccounts();
const accounts: string[] = await web3.eth.getAccounts(); //should also yield the same address

Operations

Each operation will open an extension popup window for a user to confirm the transaction or sign the message.

note

If you don't have funds on your EOA, the application will use the relayer service by default to pay the gas fees (thus ignoring gas properties).

Send a transaction

You can send any transaction (a value transfer or a smart contract interaction with or without a value).

await web3.eth.sendTransaction({
from: UP_ADDRESS,
to: RECIPIENT_ADDRESS,
value: 100,
data: '0x',
gas: 5_000_000,
gasPrice: '1000000000',
});

You can also add a chainId parameter, i.e., chaidId: '0x16', to ensure the transaction will run on the specified network.

Sign a message

await web3.eth.sign('message', UP_ADDRESS);

Interact with your universal profile

  npm install @lukso/lsp-smart-contracts
import UniversalProfile from "@lukso/universalprofile-smart-contracts/artifacts/UniversalProfile.json";

const contract = new web3.eth.Contract(
UniversalProfile.abi as unknown, UP_ADDRESS, {
gas: 5_000_000,
gasPrice: '1000000000',
})

Example: Using the setData functionality:

await contract.methods
["setData(bytes32,bytes)"](key, value)
.send({
from: UP_ADDRESS,
})
.on("receipt", (receipt: TransactionReceipt) => {
...
})
.once("sending", (payload: unknown) => {
...
})
);

Events

Example: Listening for accounts changed event:

window.ethereum.on('accountsChanged', (addresses: string[]) => {
const newAddress = addresses[0];
...
}

Sample dApp