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.

web3

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

etherjs

import { ethers } from 'ethers';
const etherProvider = new ethers.providers.Web3Provider(window.ethereum);

2. Get access to the UP address in use.

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

web3

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

etherjs

const accountsRequest: string[] = await etherProvider.send(
  'eth_requestAccounts',
  [],
);
const signer = etherProvider.getSigner();
await signer.getAddress(); //should also yield the same address

raw

const accountsRequest: string[] = await window.ethereum.request({
  method: 'eth_requestAccounts',
  params: [],
});
const accounts: string[] = await window.ethereum.request({
  method: 'eth_accounts',
  params: [],
}); //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).

web3

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

etherjs

await signer.sendTransaction({
  from: UP_ADDRESS,
  to: RECIPIENT_ADDRESS,
  value: 100,
  gas: 5_000_000,
  gasPrice: '1000000000',
});

raw

await window.ethereum.request({
  method: 'eth_sendTransaction',
  params: [
    {
      from: UP_ADDRESS,
      to: RECIPIENT_ADDRESS,
      value: '0xB1A2BC2EC50000',
      gas: '0x76c0',
      gasPrice: '0x9184e72a000',
    },
  ],
});

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

Sign a message

web3

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

etherjs

await signer.signMessage('message');

raw

await window.ethereum.request({
  method: 'eth_sign',
  params: [UP_ADDRESS, '0xdeadbeaf'],
});

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

• Check the LUKSO Test dApp for more examples in the browser.
• Check the Repository for code snippets.