Want to let your users use Lilico for your dApp? Easy!

Prerequisite

Installed and configured fcl library in your dapp.

If you haven’t integrated with fcl library yet, please follow the official instructions:

https://github.com/onflow/fcl-js

Integration Steps

1. Make sure your fcl.js is upgraded to at least 1.0.0 ( We highly recommend upgrading it to 1.3.2 ).

Releases · onflow/fcl-js

1. Config your transport method, you can choose either the GRPC or HTTP method. Run the command line yarn add @onflow/transport-http or npm install @onflow/transport-http to add the new transport method to your project.

import {send as grpcSend} from "@onflow/transport-grpc"
import {send as httpSend} from "@onflow/transport-http"

// Configure SDK to use GRPC
sdk
  .config()
  .put("accessNode.api", "<https://access-testnet.onflow.org>")
  .put("sdk.transport", grpcSend)

// Configure SDK to use HTTP
sdk
  .config()
  .put("accessNode.api", "<https://rest-testnet.onflow.org>")
  .put("sdk.transport", httpSend)

1. Change your wallet discovery endpoint to Flow’s official one, instead of Blocto’s endpoint.

fcl.config({
	// Testnet
  // "discovery.wallet": "<https://fcl-discovery.onflow.org/testnet/authn>",
	// Mainnet
  "discovery.wallet": "<https://fcl-discovery.onflow.org/authn>",
})

// If you wanna skip the discovery ui to connect with lilico directly
fcl.config
.put("discovery.wallet.method", "EXT/RPC")
.put("discovery.wallet", "chrome-extension://hpclkefagolihohboafpheddmmgdffjm/popup.html")

1. Make sure that your dApp’s title and icon are there so that your dApp’s details appear in our wallet.

import * as fcl from "@onflow/fcl"

fcl.config()
.put("app.detail.title", "Test Harness")
.put("app.detail.icon", "<https://i.imgur.com/r23Zhvu.png>")

1. Done!

(Optional) Network change event

Since lilico extension have the ability to switch different network, you might face some network mismatch issues. To detect, which network the extension is, lilico will emit a window post message to the window when the page is loaded or the network got changed. Here is an example:

Add listener