ssyuan/web3cdn

Catchon WEB3 CDN

An awesome no code solution for web3 development!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

About The Project
Getting Started
- Prerequisites
- Intergration
Usage
Roadmap
Contributing
License
Contact
Acknowledgments

About The Project

"What is the easiest way to add web3 capabilities, such as connecting a wallet and interacting with contracts, to my website?"

Catchon CDN is a useful tool for:

Smart contract developers who don't want to build a website from scratch
UI-based web development tool users, such as those using Webflow, WIX, or WordPress, who want to add web3 functionality to their websites
Those who want to easily call a smart contract function from their website without having to deal with complicated web3 settings.

Catchon CDN is a web3 tool that enables low-code development for frontend engineers, smart contract engineers, and designers. It simplifies the process of interacting with blockchain technologies, allowing users to easily connect with the blockchain without needing to understand the detailed implementation of wallet and contract interactions. With a quick setup, Catchon CDN enables users to easily communicate with the blockchain.

(back to top)

Live example

Webflow

(back to top)

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

Get your website ready.

Your website can be developed using any of the following methods:

Coding (e.g. static HTML, React) PS: we only support React 17, react 18 will be supported in later version
No-code visual website builder (e.g. Webflow, Wix, SquareSpace, WordPress)

Get the contract ready

Smart Contract address (get the implemetation address if it's a proxy smart contract)
Smart Contract abi
Chain ID of the smart contract

Intergration

Copy and paste the following script into your website html

<script> CONTRACT_ADDRESS="<replace the contract address you want to use>"
LOGIC_ADDRESS="<replace the contract implemetation address if it's a proxy. Unless it's as same as CONTRACT_ADDRESS>"
CHAINID=<put the chainID that dapp wants to use>
ABI=<Put the contract abi here. It might be from etherscan>
</script> 
<script src="https://catchoncdn.vercel.app/main.js" type="text/javascript"></script>
<link href="https://catchoncdn.vercel.app/main.css" rel="stylesheet">

For example, the website wants to interact with smart contract 0x13BD972B0bfaefC9538a43c1FDA11D71C720cD47 in mainnet. It's not a proxy contract. And it's on etherum goerli testnet.

PS: In this example, we get ABI from an API call. But not all abi can be found from API call. Add ABI=[... put your own abi here] to make sure script work

<script> CONTRACT_ADDRESS="0xCA127e07Ce57c78eF0C739F268A437e76c66e0F1"
LOGIC_ADDRESS="0xCA127e07Ce57c78eF0C739F268A437e76c66e0F1"
CHAINID=5
</script> 
<script src="https://catchoncdn.vercel.app/main.js" type="text/javascript"></script>
<link href="https://catchoncdn.vercel.app/main.css" rel="stylesheet">

After inserting the script into html, the configuration is done.

(back to top)

Usage

Catchon CDN is using customized attribution to associate CSS elements (such as divs and buttons) with corresponding function calls in a smart contract.

How to add connect wallet button

Add a button with customized attribution connect-button

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

How to get information from 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>

How to interact with 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 arugment has been assigned by attribution, user cannot change it, and input will be disabled.

(back to top)

Roadmap

Baseline connect wallet, read, write ability
Add customized field for user to input
Add Additional framework support
Add Additional Templates w/ Examples
Add multi-chain support

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!