Webstudio
hero

Webstudio Component Documentation

References and tutorials for drag and drop and editor components to create decentralized applications without code

Web3 Connect Wallet Button

Streamlined wallet selection interface using Web3Modal and ethers library. Automatic detection of mobile, extension, desktop, and web app wallets, with all available options presented together for better usability.

Properties

Wallet Connect Project ID

Project ID obtained by creating an "app" in Wallet Connect Cloud. Follow the instructions in the link.

https://cloud.walletconnect.com/app

Modal Name

Title of the modal when users are prompted from their wallets to login to the app.

Modal Description

Brief description of the application displayed to the user when the wallet prompts for login.

Modal URL

Fingerstache flexitarian street art 8-bit waist co, subway tile poke farm.

Modal Icon

Icon displayed in the modal prompt when user logs in next to the name and description.

Theme Mode

Select between light and dark theme modals.


Default Network

List of supported EVM networks where the dApp will operate. Limited to one network for the time being with future support for multiple (Q2, 2024)

Web3 Form

HTML based form that allows you to call a smart contract method. You specify the ABI, method to call and then add internal input fields mapped to each of the attributes the method requires to be called.

Properties

Contract

The contract address 0x... This form will call t he smart contract with the given address on the network specified by the Web3 Connect Wallet Button so it needs to be present.

ABI

The JSON file with the interface of your smart contract. This file contains all the contract for each method and event within the smart contract.

Method

Once the ABI file is uploaded you should be able to see in this dropdown all methods available to call from the form when the submit button is clicked.

Web3 Token Gated Container

Add the capabilites of only showing certain elements of the dApp to users who actually own certain NFTs. You can either specify a contract or individual IDs for which to allow access to the content of the container.

Properties

Exclusive Rule

Checkbox to define if this container is subject to token gating rules.

Contract Type

Dropdown with the allowed contract types gating. As of today only NFTs with ERC721 and ERC1155 are supported.

Contract Address

The address of the NFT contract to verify 0x...

Token IDs

Optional field where you can specify IDs of token to be validated only. Left blank validates against any token within the contract.