Comment on page
Advanced Configuration
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.
You have the ability limit the networks a user can connect to with the Connect Widget.
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>
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.
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>
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.
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>
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.
If you do not have a provider already, you can get one from one of the following sites:
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>
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>
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).
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 immediatelytrue- 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>
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"));
This CodePen provides a sandbox for testing out the various configuration options in real time for Connect Widget v3.
Connect Widget v3 - Open in a new window for easier inspection
Last modified 4mo ago