CSS attributes usage

If coding by React/Static html, copy/paste the following example into your website.

If using Webflow/Wix/Wordpress, know how to use these attribute, then go to configurations.

Add customized attributes in css elements to make css elements interact with blockchain.

Wallet connect

customized attribute name	value	description
connect-button	"true"	Turn this button to a connect wallet button

For example,

<button connect-button="true">
  Connect wallet
</button>

Read contract

Add a CSS element with customized attributtion function-name="<The view function name>"

For example, read contract name:

  <a function-name="name">
    Name
  </a>

If the read-only function needs inputs, add attribution function-name="<The view function name>" function-name-args-<The arg name>=<The value of args> For example, read token balance of address 0x5a3B85334612a18cCE4Eef4567c1DF543433AdC4:

  <h3 function-name="balanceOf" function-name-args-owner="0x5a3B85334612a18cCE4Eef4567c1DF543433AdC4">
    balanceOf
  </h3>

function-name-args-<The arg name>="--self-wallet" means the filed will use user's wallet address as input. For example,

  <h3 function-name="balanceOf" function-name-args-owner="--self-wallet">
    balanceOf
  </h3>

function-name-return>="" means only part of the return information will show after reading contract. function-name-output-type="" means the output format of the return value. For example, the saleConfig's output has two fileds, one of them is publicSaleStartTime. The text will only show the publicSaleStartTime in css element. The output type is time, means the publicSaleStartTime will show the local time in a time format.

  <h3 function-name="saleConfig" function-name-return="publicSaleStartTime" function-name-output-type="time">
    saleConfig
  </h3>

Write contract

Add a CSS element with customized attribution function-name="<The write function name>" If the function is payable, use attribution function-name-value-in-eth=""

For example, the following part means calling mint function with quantity 1 and paying 0.000001 eth for this transaction.

  <button function-name="mint" function-name-value-in-eth="0.000001" function-name-args-quantity="1">
    Mint 1 with fixed price
  </button>

After click the button, a dialog will pop up. If the argument has been assigned by attribution, user cannot change it, and input will be disabled.