Advanced Configuration
You can enable Wallet Connect by adding the
data-multi prop and setting it to true.<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's chain id>"
></div>
This will enable the ability for your user to connect to your website using the detected browser provider, or Wallet Connect.
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.
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>
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:
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.<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 use this option and still want to use the Data Client APIs, you will need to manually trigger authentication by using the Manifold Ethereum Provider and calling getOAuth. After retrieving an authentication from getOAuth, you will need to emit an
m-reauthenticate event so that the Data Client will be created.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"));
You should ONLY use this configuration if your app supports the ability to connect to multiple blockchains. An example of this is type of app is Manifold Studioâ
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 or add a fallback provider.
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>
This CodePen provides a sandbox for testing out the various configuration options in real time.
Open in a new window for eaiser inspection
Last modified 4d ago