Advanced Configuration

Connection Options

You can provide users with different connect options by adding the data-multi prop and setting it to true.

The wallets we currently support are:

For Wallet Connect, we are limiting connection options to Rainbow Wallet, Ledger Live and Trust Wallet. The list of wallets may increase in the future.

Make sure you are on the latest version of your mobile wallet, to ensure they properly handle Wallet Connect 2.0.

Network Restrictions

You have the ability limit the networks a user can connect to with the Connect Widget.

Single Network

You can force a user to connect to a specific network by setting the data-network prop to the chain id of the network. If the user is not connected to the appropriate network, the Connect Widget will not be clickable and will show "Wrong Network".

The following example requires the user to connect on Ethereum Mainnet:

<div  
    data-widget="m-connect"  
    data-client-id="<your app client id>"  
    data-app-name="<your app name>"
    data-network="1"
></div>

Multiple Networks

Requires Connect Widget 3.0.0 or above.

You can specify the data-network as a comma-separated list of chain IDs for the networks you wish to allow the user to connect to. An example of an app that does this is Manifold Studio.

The following example requires the user to connect on Ethereum Mainnet and Optimism Mainnet:

<div  
    data-widget="m-connect"  
    data-client-id="<your app client id>"  
    data-app-name="<your app name>"
    data-network="1,10"
></div>

Starting with Connect Widget version 3.1.0, you can indicate support for optional networks in your application using the data-optional-network attribute.

<div  
    data-widget="m-connect"  
    data-client-id="<your app client id>"  
    data-app-name="<your app name>"
    data-network="1"
    data-optional-network="5,10" // Optionally support Goerli and Optimism network
></div>

Optional networks enhance your application's compatibility by enabling connections with wallets that do not inherently support these networks, while also enabling network switching functionality in wallets that do.

No Network Restrictions

You should ONLY use this configuration if your app supports the ability to connect to multiple blockchains AND you DO NOT use Wallet Connect.

You can use the connect widget with websites that are intended to interact with multiple blockchains. However, you will not be able to use the Data Client and Wallet Connect will not work.

To do this, simply remove the data-network prop.

<div  
    data-widget="m-connect"  
    data-client-id="<your app client id>"  
    data-app-name="<your app name>"
></div>

Wallet Connect

Requires Connect Widget 3.0.0 or above.

To enable Wallet Connect, you MUST specify the following props:

<div  
    data-widget="m-connect"  
    data-client-id="<your app client id>"
    data-app-name="<your app name>"  
    data-multi="true"
    data-network="<your desired network chain id(s)>"
    data-wallet-connect-project-id="<your walletconnect project id>"
></div>

If you wish to allow a user to use Wallet Connect to read blockchain data when they do not have an integrated browser provider (e.g. mobile devices without a wallet installed), please specify a Fallback Provider.

Automatic Wallet Reconnection

By default, the Connect Widget will automatically reconnect a wallet if a person was previously connected. To disable this, add the data-auto-reconnect="false" prop.

<div
  data-widget="m-connect"
  data-auto-reconnect="false>"
  data-client-id="<your app client id>"
  data-app-name="<your app name>"
></div>

Fallback Provider

By default, the Connect Widget will reference the user's default browser provider (e.g. MetaMask, Coinbase Wallet, Brave). However, there are situations where a browser does not have a built in provider (e.g. mobile devices or those that have not installed a wallet). In this case, you may wish to supply a fallback provider so your website or application can still access the blockchain.

NOTE: Only websocket providers are currently supported.​

If you do not have a provider already, you can get one from one of the following sites:

Single Network

Configure a fallback provider by adding the data-fallback-provider and data-network props with your provider websocket uri and network.

<div
  data-widget="m-connect"
  data-fallback-provider="wss://<your websocket provider>"
  data-network="<your fallback provider's network chain id>"
  data-client-id="<your app client id>"
  data-app-name="<your app name>"
></div>

Multiple Networks

Requires Connect Widget 3.0.0 or above.

To configure a fallback provider for multiple networks, add a data-fallback-provider prop that contains a comma separated list of websocket providers that correspond to your data-network prop.

The following example shows how you would add support for Ethereum Mainnet and Optimism

<div
  data-widget="m-connect"
  data-network="1,10"
  data-fallback-provider="wss://mainnet.infura.io/XXX,wss://optimism.infura.io/XXX"
  data-client-id="<your app client id>"
  data-app-name="<your app name>"
></div>

Starting with Connect Widget version 3.1.0, if you specify data-optional-network, then data-fallback-provider must correspond and match both data-network and data-optional-network in the same order.

<div
  data-widget="m-connect"
  data-network="1"
  data-optional-network="5,10"
  data-fallback-provider="wss://mainnet.infura.io/XXX,wss://goerli.infura.io/XXX,wss://optimism.infura.io/XXX"
  data-client-id="<your app client id>"
  data-app-name="<your app name>"
></div>

Limitations​

Accessing the blockchain via the fallback provider will only occur if the user does not have an installed wallet. This means that you will only be able to read smart contract information if the fallback provider is in use, and you will not be able to perform any authenticated actions (e.g. signing a message, or using the Data Client).

Delaying Authentication

By default, when a user clicks the 'Connect' button, they will be asked to grant your website access to their wallet, as well as authenticate their wallet address by signing a message.

In some cases, you may not need the user to be authenticated to access some parts of your website (e.g. if you are building a Marketplace). If you would like to avoid automatically triggering the authentication message signing request, you can use the data-delay-auth prop.

The data-delay-auth prop can take one of 3 values:

  • false (default) - Do NOT delay authentication. The user is asked to authenticate with your website by signing a message immediately after they click connect. You will get access to the Data Client immediately

  • true - Delay authentication until your website explicitly asks for authentication via the Manifold Ethereum Provider and the calling getOAuth method. Note: if the end-user is authenticated and switches their wallet, they will immediately be asked to re-authenticate.

  • always (available in v2.2.1 or later) - Delay authentication until your website explicitly asks for authentication via the Manifold Ethereum Provider and the calling getOAuth method. Note: unlike 'true', end-users will NOT be asked to re-authenticate if they switch their wallet, and will simply be disconnected if they have not previously authenticated with the new wallet.

<div  
    data-widget="m-connect"  
    data-client-id="<your app client id>"  
    data-app-name="<your app name>"  
    data-delay-auth="true"
    data-network="<your desired network's chain id>"
></div>

Using the Data Client APIs with delayed authentication

If you are delaying authentication by setting data-delay-auth to true or always, and still want to use the Data Client APIs, you will need to emit an m-reauthenticate event after getOAuth returns.

This will result in a window object being populated with the data client, as well as an m-authenticated event being emitted with the data client.

Example code:

await window.ManifoldEthereumProvider.getOAuth({
    appName: "<your app name>",
    clientId: "<your app client id>"
});
window.dispatchEvent(new CustomEvent("m-reauthenticate"));

CodePen

This CodePen provides a sandbox for testing out the various configuration options in real time for Connect Widget v3.

Last updated