LogoLogo
Manifold for Developers
Manifold for Developers
  • Introduction
  • Shopify Merch Bridge
    • Overview
    • Tutorial
      • Step 1: Product Gate Setup
        • 1.1: Configure the Product
        • 1.2: Install Manifold Merch Bridge
        • 1.2: Create a New Product Gate
        • 1.3: Link a Product to the Gate
        • 1.4: Add Rules
      • Step 2: Store Theme Setup
        • 2.1 The Theme Editor
        • 2.2 Product Page Setup
        • 2.3 Cart Page Setup
    • Advanced Configuration
    • FAQ / Error Help
    • Reference
      • Product and Gate Configuration
        • Shopify Products
        • Product Gates
          • Gate Products
          • Rules
      • Custom Themes
      • Updating to the Latest Version
      • UI Configuration Options
      • Advanced Usage
      • Common Issues
  • Guides
    • Getting Started
    • HTML
    • React
    • NextJS
    • Vue
    • Wix
    • Squarespace
      • Simple Squarespace Site
      • Customised Squarespace Template
  • Resources
    • Apps
      • Grant Types
    • Widgets
      • Directory
      • Manifold CSS Variables
        • Scheme Utility Classes
        • List of Manifold CSS Variables
      • Connect Widget
        • Blockchain Interaction
        • Wallet Authentication
        • Data Client
          • NFT Information Retrieval
            • getNFT
            • getNFTsOfOwner
            • ownerHasNFT
            • getCollectors
          • Data Storage and Retrieval
        • Advanced Configuration
        • Customization & Styling
        • Automatic Error Handling
      • Campaign Widget
        • Campaign Creation
          • Questionnaire
        • Campaign Progress
        • Customization & Styling
      • Curation Widget
      • Marketplace Widgets
        • Widgets
          • Data Attributes
          • Layout Widgets
          • Card Widgets
          • Listing Widgets
        • Window Events
        • Troubleshooting
        • Customization & Styling
        • Version Change Notes
          • 3.2.1 - CSS Selector Changes
          • 3.1.1 - CSS Selector Changes
      • Claim Widgets
        • Widgets
          • Data Attributes
          • Complete Claim Widget
          • Buy Button Only Widget
          • Mint Count Widget
        • Troubleshooting
        • Customization & Styling
        • Version Change Notes
          • 1.7.0, 1.7.1 - CSS Selector Changes
      • Restricted Token Widget
        • Customization & Styling
      • Wallet Identity Widget
        • Customization & Styling
      • Subscription Widget
      • 6551 Display Widget
    • Manifold Ethereum Provider
  • Tools and APIs
    • Merkle Tree Tool
    • Snapshot Tool
    • Discord Tools
    • Server-Side Session Authentication
      • Signature Grant
      • Authorization Code Grant
  • Smart Contracts
    • Manifold Creator
      • Contracts
        • Creator Core
          • Common Functions
          • ERC721 Functions
          • ERC1155 Functions
        • Extensions
          • Extensions Functions
          • Extensions Examples
          • Extensions Deployment Guide
            • Dynamic NFT Extension
            • Lazy Mint Extension ERC1155
            • Lazy Mint Extension ERC721
        • Mint Permissions
          • Mint Permissions Functions
      • Prior Versions
        • 1.0.x
          • Creator Core
            • Common Functions
            • ERC721 Functions
            • ERC1155 Functions
          • Extensions
            • Extensions Functions
            • Extensions Examples
            • Extensions Deployment Guide
              • Dynamic NFT Extension
              • Lazy Mint Extension ERC1155
              • Lazy Mint Extension ERC721
          • Mint Permissions
            • Mint Permissions Functions
        • 2.0.x
          • Creator Core
            • Common Functions
            • ERC721 Functions
            • ERC1155 Functions
          • Extensions
            • Extensions Functions
            • Extensions Examples
            • Extensions Deployment Guide
              • Dynamic NFT Extension
              • Lazy Mint Extension ERC1155
              • Lazy Mint Extension ERC721
          • Mint Permissions
            • Mint Permissions Functions
    • Marketplace
      • Identity Verifier
    • Royalty Registry
  • Contact Us
Powered by GitBook
On this page
  • Connection Options
  • Network Restrictions
  • Single Network
  • Multiple Networks
  • No Network Restrictions
  • Wallet Connect
  • Automatic Wallet Reconnection
  • Fallback Provider
  • Single Network
  • Multiple Networks
  • Limitations​
  • Delaying Authentication
  • CodePen

Was this helpful?

  1. Resources
  2. Widgets
  3. Connect Widget

Advanced Configuration

Last updated 1 year ago

Was this helpful?

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.

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.

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>

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.

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.

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>

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.

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

<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

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.

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 .

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 and Wallet Connect will not work.

data-network: See

data-wallet-connect-project-id: Follow instructions to register for one

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 .

NOTE: Only websocket providers are currently supported.

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 .

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 ).

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 ). If you would like to avoid automatically triggering the authentication message signing request, you can use the data-delay-auth prop.

true - Delay authentication until your website explicitly asks for authentication via the and the calling 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 and the calling 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.

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

This will result in a being populated with the data client, as well as an event being emitted with the data client.

Metamask
Coinbase Wallet
Wallet Connect
Manifold Studio
Data Client
here
​
Alchemy
QuickNode
Infura
​
Data Client
Marketplace
window object
m-authenticated
Network Restrictions
Fallback Provider
data-network prop
Manifold Ethereum Provider
Manifold Ethereum Provider
Data Client APIs
Connect Widget v3 - Open in a new window for easier inspection
getOAuth
getOAuth
getOAuth