Would you like to start your very own crowdfunding campaign? Or collect some money for fixing a Github issue? Or would you accept some donations for your article? It’s super easy with crypto. In this article, we will build a crypto crowdfunding widget for accepting ERC-20 tokens or crypto on any Ethereum compatible network. The Theory Our widget will be a dynamically generated PNG that is generated from our Ethereum address and balance. You can embed this image anywhere where you can embed images by URL. You can add it to your GitHub readme or into the description of an issue, or you can embed it into your article, etc. The image will contain a QR code to your Ethereum address and an indicator that shows your balance, and how far is it from the target. When you start a new campaign, you have to create a new Ethereum account or a smart contract (ex.: an ICO contract) to accept the funds. The user can simply scan the QR code and send some crypto. It takes about 10 seconds. Sending crypto to a crowdfunding campaign has never been easier. The Code We’ll use JavaScript for the implementation and node-canvas for generating the resulting PNG image. First of all, we’ll create a gray canvas. const canvas = createCanvas(200, 270)
const ctx = canvas.getContext('2d')
ctx.fillStyle = "#aaaaaa"
ctx.fillRect(0, 0, canvas.width, canvas.height) Then paint the QR code onto it. We’ll use the library for this. qrcode let qrcode = new Image()
qrcode.src = await QRCode.toDataURL(config.ETH_ADDRESS)
ctx.drawImage(qrcode, 10, 10, 180, 180) The next step is querying the balance. We can easily do it by using the library. web3 const web3 = new Web3(config.PROVIDER_URL)
const balance = parseInt(await web3.eth.getBalance(config.ETH_ADDRESS)) The constructor of the Web3 class has a provider parameter. This is the URL of the endpoint. If you would use the Ethereum Mainnet, or one of the test networks then the best way is to use ConsenSys’s . MetaMask also uses this. If you want to accept payments on an alternative Ethereum compatible network like Polygon, or xDAI, etc. then you can . Ethereum JSON-RPC Infura find RPC endpoints here It is also possible to query your ERC20 balance if you want to accept token payments. const contract = new web3.eth.Contract(erc20_abi as AbiItem[], CONTRACT_ADDRESS)
const balance = await contract.methods.balanceOf(config.ETH_ADDRESS).call() The constructor of the Contract class has 2 parameters the interface definition (ABI) and the address of the ERC20 token contract. If the balance is known, calculating the percent is very easy. let percent = balance / (config.TARGET_VALUE * 10 ** 18);
if (percent > 1)
    percent = 1; It’s important that the balance is in wei so you have to divide it by 10^18. The full code looks like this: const web3 = new Web3(config.PROVIDER_URL)
const balance = parseInt(await web3.eth.getBalance(config.ETH_ADDRESS))

const canvas = createCanvas(200, 270)
const ctx = canvas.getContext('2d')
ctx.fillStyle = "#aaaaaa"
ctx.fillRect(0, 0, canvas.width, canvas.height)

let qrcode = new Image()
qrcode.src = await QRCode.toDataURL(config.ETH_ADDRESS)
ctx.drawImage(qrcode, 10, 10, 180, 180)

ctx.fillStyle = '#000000'
ctx.font = '12px Impact'
ctx.fillText(config.TEXT, 10, 210)
ctx.fillText(`${(balance / 10 ** 18).toFixed(2).toString()} ${config.SYMBOL} / ${config.TARGET_VALUE.toFixed(2).toString()} ${config.SYMBOL}`, 10, 230)

ctx.fillStyle = '#ffffff'
ctx.fillRect(10, 240, 180, 10)

let percent = balance / (config.TARGET_VALUE * 10 ** 18);
if (percent > 1)
    percent = 1;

ctx.fillStyle = '#037362'
ctx.fillRect(10, 240, Math.round(180 * percent), 10)

ctx.strokeStyle = '#000000'
ctx.lineWidth = 1
ctx.strokeRect(10, 240, 180, 10) 23 lines of code. As I wrote, it’s not a big deal. The full code is available on . (And I also have a .) GitHub PHP implementation The code can run on a minimal Lightsail instance (3,5$/mo), but if you don’t want to allocate a full EC2 instance to it, you can deploy it to AWS lambda. Everything is included in the GitHub repo. It’s a sample widget that collects xDAI (and by the way, if you like the article, or simply want to try how it works, you can send me some xDAI): Happy coding...

Polygon

ConsenSys

Super

Target

Create An EVM-Based NFT Contract without Programming Skills: A How-To Guide

Decentralized Uber: Here's How I Built It With Status.im, Waku, and Vue.js

Nominated for 2022 - HackerNoon Contributor of the Year - Neural Networks

Nominated for 2022 - HackerNoon Contributor of the Year - Proof Of Stake

Nominated for 2022 - HackerNoon Contributor of the Year - Dao

Nominated for 2022 - Ios Writer of the Year

Too Long; Didn't Read

Create a Crypto Crowdfunding Widget From a Few Lines of Code

Create a Crypto Crowdfunding Widget From a Few Lines of Code

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Brief History of Money: From the Economy of Favors to Bitcoin

10 Things in Engineering We Don't Spend Enough Time On

254 Stories To Learn About Amazon

193 Stories To Learn About AWS Lambda

17 of the Best Amazon Web Services (AWS) for Web Developers to Learn

3 Min Hack for Locally building a Native Extension

A Brief History of Money: From the Economy of Favors to Bitcoin

10 Things in Engineering We Don't Spend Enough Time On

254 Stories To Learn About Amazon

193 Stories To Learn About AWS Lambda

17 of the Best Amazon Web Services (AWS) for Web Developers to Learn

3 Min Hack for Locally building a Native Extension

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps