Description

Fast, light, straightforward library for adding a suku connect button to any DApp supporting Wallet Connect.

Installation

$ npm install suku-connect-button

Quick Start Example

Start by installing the library with:

$ npm install suku-connect-button

Then, you will be able to create your custom EthereumProvider like:

import Provider from '@walletconnect/ethereum-provider'

// Create your custom provider with your DApp's metadata.
const sukuProvider = await Provider.init({
  projectId: 'xxx', // REQUIRED your projectId
  chains: [x, x, x], // REQUIRED chain ids
  showQrModal: false,
  methods: [xxx], // REQUIRED ethereum methods
  events: ['display_uri', xxx], // REQUIRED ethereum events
})

// Set your necessary events.
sukuProvider.on('connect', (payload) => {
  console.log(payload)
  setConnected(true)
  setUserAddress(sukuProvider.accounts[0])
  setChain(sukuProvider.chainId)
})

// Connect your provider with Suku Wallet.
await connectWithSukuWallet(sukuProvider)

You will also may want to check wether the Suku Wallet is installed or not. Here is a simple example:

useEffect(() => {
  const checkInstalled = async () => {
    const installed = await checkIfSukuWalletIsInstalled()
    setInstalled(installed)
  }

  checkInstalled()
}, [])

In case you want to integrate your own fallback for when the extension is not installed, we offer a redirect method:

useEffect(() => {
  const checkInstalled = async () => {
    const installed = await checkIfSukuWalletIsInstalled()
    setInstalled(installed)

    // Redirect to the instalation page.
    if (!installed) {
      openInstalationPage()
    }
  }

  checkInstalled()
}, [])

Expected Behaviours:

1. By default, if the Suku Wallet is not installed, but a connection is attempted, the Chrome Store website of the Wallet Extension will be opened so that the user is able to install the CE.

2. In the case of a successful connection, you will be able to keep using your provider as any conventional Wallet Connect provider.

Recomendations:

We highly recommend that the given provider that is passed in to the connectWithSukuWallet function has the following property set to false:

  showQrModal: false,

This will not create a visible Wallet Connect QR modal, and so the user won't get confused when having to accept the Session Request.

We also suggest that the provider supports the event 'display_uri'

This is so that we can detect when the connection uri is created, and pass it to the Wallet directly.