@maticnetwork/wallet-widget

wallet-widget

Wallet widget is a javascript library for Polygon wallet. It can be embedded in any sites for executing transaction on Polygon.

Every widget is identified by an id which you can get from Widget dashboard

Widget dashboard

Widget can be created from the widget dashboard page in the wallet application. It allows the user to create a new widget with some customisable options.

Once the widget is created, You can copy code snippet and add it in your application or only get the id and configure by yourself.

Install

npm i @maticnetwork/wallet-widget

Examples

All examples for different framework and tools are present in examples folder of this Repo.

How to use

// Create instance of widget with some configuration

var widget = new MaticWidget({
    appId: "<your app id>", //appId from dashboard
    target: '#btnMaticWidget', // element selector for showing widget on click
});

// Create widget whenever you are ready. It is best to call create function after document is loaded.

widget.create();

Configuration

Configuration can be supplied in Widget constructor.

Available configuration are

• target : string - CSS selector for showing widget on click of element. For example, "#btnMaticWidget" will be the target in the code below.

<button id="btnMaticWidget">Matic widget</button>

• width : number - Width of the widget
• height : number - Height of the widget
• autoShowTime : number - Auto show widget after specified time in millisecond
• appId : string - ID of your app, this can be retrieved on widget dashboard.
• position : string - Sets the position of the widget. The available options are -
  • center
  • bottom-right
  • bottom-left
• amount : string - Prefill the amount in text box

Events

Widget emits some events which can be used to know what is happening inside the application.

Subscribe to events

widget.on('load',()=>{
  console.log('widget is loaded');
})

Unsubscribe to events

widget.off('load',<callback>)

// note - callback should be same what was used to subscribe the event. So its better to store the callback in a variable.

List of events:

• load - Widget is loaded

• close - Widget is closed

• approveInit - Approval transaction is initialized

• approveComplete - Approval transaction is completed

• approveError - Approval transaction failed due to some error, or the user denied the transaction on Metamask

• depositInit - Deposit transaction is initialized

• depositComplete - Deposit transaction is completed

• depositError - Deposit transaction failed due to some error, or the user denied the deposit complete transaction on Metamask

• burnInit - Withdrawal burn transaction is initialized

• burnComplete - Withdrawal burn transaction is completed

• confirmWithdrawInit - Withdrawal is checkpointed and confirm transaction is initialized

• confirmWithdrawComplete - Withdrawal confirm transaction in completed

• confirmWithdrawError - Withdrawal confirm transaction failed due to some error, or the user denied the withdrawal confirm transaction on Metamask

• exitInit - Withdrawal exit transaction is initialized

• exitComplete - Withdrawal exit transaction is completed

• exitError - Withdrawal exit transaction failed due to some error, or the user denied the withdrawal exit transaction on Metamask

APIS

show

show the widget

widget.show()

hide

hide the widget

widget.hide()

withdrawExit

Complete withdrawal confirm and exit transactions by passing the TX details as payload.

NOTE: withdrawConfirmTxHash is not required for PoS transaction.

payload = {
  burnTxHash: '0xXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  withdrawConfirmTxHash: '0xXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  isPoS: true/false,
  amount: 'XXXXX',
  token: {
    childAddress: '0xXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  },
}

widget.withdrawExit(payload)