Catchon WEB3 CDN

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

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Getting Started
   • Prerequisites
   • Intergration
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. 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
• Static html

(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:

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

Get the contract ready

1. Smart Contract address (get the implemetation address if it's a proxy smart contract)
2. Smart Contract abi
3. 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 0xCA127e07Ce57c78eF0C739F268A437e76c66e0F1. 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">

If you want to have some membership page, you can use SIGN_PAGE_PATH. For example, you have a page "/blog", it shuold be a membership only page. Only NFT holder have access to view it. You can add following section. It required the wallet has NFT of 0xCA127e07Ce57c78eF0C739F268A437e76c66e0F1 to view the page. Help people create their own valuable informations.

<script> CONTRACT_ADDRESS="0xCA127e07Ce57c78eF0C739F268A437e76c66e0F1"
LOGIC_ADDRESS="0xCA127e07Ce57c78eF0C739F268A437e76c66e0F1"
CHAINID=5
SIGN_PAGE_PATH = "/blog"
...

If you add BUY_PASS_LINK, it will redirect user to buy page when they don't have access to membership only page. For example,

<script> CONTRACT_ADDRESS="0xCA127e07Ce57c78eF0C739F268A437e76c66e0F1"
LOGIC_ADDRESS="0xCA127e07Ce57c78eF0C739F268A437e76c66e0F1"
CHAINID=5
SIGN_PAGE_PATH = "/blog"
BUY_PASS_LINK = "/mint"

The page "/mint" is for buying membership pass.

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>

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>

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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Your Name - @catchonlabs - [email protected]

Project Link: https://github.com/nftblackmagic/web3cdn

(back to top)