Chainlink Fullstack Demo App

LIVE DEMO

End-to-end implementation of the following Chainlink features using Hardhat development environment and Next.js frontend framework:

• Request & Receive data
• Chainlink Price Feeds
• Chainlink VRF

Built with:

• Next.js
• TypeScript
• Hardhat
• TypeChain
• Ethers.js
• useDApp
• Chakra UI
• Linting with ESLint
• Formatting with Prettier

Requirements

• Node
• Yarn
• Git

In order to use the frontend portion of the demo application you will need

• A crypto wallet such as Metamask or Coinbase Wallet
• Test $LINK for the relevant testnet. You can get some at the Chainlink Faucets page.
• Test $ETH to pay for gas costs. You can get some at the Chainlink Faucets page.

Quick Start

Clone the repo and install all dependencies:

git clone https://github.com/hackbg/chainlink-fullstack
cd chainlink-fullstack

git submodule init
git submodule update

yarn install

Start up the local Hardhat network and deploy all contracts:

yarn chain

In a second terminal start up the local development server run the front-end app:

yarn dev

To interact with the local network, follow this step-by-step guide on how to use MetaMask with a Hardhat node.

If you've set the mnemonic from MetaMask the first 20 accounts will be funded with ETH.

Environment Variables

To make setting environment variables easier there are .env.example files in the hardhat and frontend workspaces. You can copy them to new .env files and replace the values with your own.

Hardhat

Name	Description
NETWORK_RPC_URL	Required to deploy to public networks. Obtain from Infura's site.
MNEMONIC	Used to derive accounts from wallet seed phrase, ie Metamask. The first account must have enough ETH to deploy the contracts, as well as LINK which can be obtained from Chainlink's faucets.
PRIVATE_KEY	Alternative to using mnemonic. Some changes are required in hardhat.config.js
ETHERSCAN_API_KEY	Verify contract code on Etherscan.

Front-end

Name	Description
NEXT_PUBLIC_INFURA_KEY	Read-only mode and WalletConnect.

Deploy Contracts

This will run the deploy scripts to a local Hardhat network:

yarn deploy

To deploy on a public network:

yarn deploy --network kovan

Auto-Funding

The Hardhat project will attempt to auto-fund any newly deployed contract that uses Any-API or VRF, which otherwise has to be done manually.

The amount in LINK to send as part of this process can be modified in this Hardhat Config, and are configurable per network.

Parameter	Description	Default Value
fundAmount	Amount of LINK to transfer when funding contracts	1 LINK

If you wish to deploy the smart contracts without performing the auto-funding, run the following command when doing your deployment:

yarn deploy --tags main

Test

If the test command is executed without a specified network it will run locally and only perform the unit tests:

yarn test:contracts

Integration tests must be run on a public testnet that has Chainlink oracles responding:

yarn test:contracts --network kovan

For coverage report:

yarn coverage:contracts

Verify on Etherscan

You'll need an ETHERSCAN_API_KEY environment variable. You can get one from the Etherscan API site.

npx hardhat verify --network <NETWORK> <CONTRACT_ADDRESS> <CONSTRUCTOR_PARAMETERS>

example:

npx hardhat verify --network kovan 0x9279791897f112a41FfDa267ff7DbBC46b96c296 "0x9326BFA02ADD2366b30bacB125260Af641031331"

Format

Fix formatting according to prettier config in the respective workspace:

yarn format:frontend
yarn format:hardhat

Lint

yarn lint:frontend

Testnet Contracts

This repo includes deployed and verified contracts on Kovan and Rinkeby so the front-end can run without the need to deploy them.

Once the deploy command is executed on any network the contracts config will be overwritten and you can start from scratch with your own deployments.

Kovan

Name	Address
PriceConsumerV3	0x01E2C7cA6D6A82D059287Cb0bC43a39Cd0ff4B00
FeedRegistryConsumer	0xB9ebb63D4820c45a2Db09d71cefA24daBd047b50
APIConsumer	0x14005AB90bc520E20Ffd7815Cae64372abb6b04d
RandomNumberConsumer	0xF9556187bf86823Cf0D7081625F97391642Fc242
RandomSVG	0xb4Bac68d9Fa99D2852E5dFb124be74de2E8c4F76

Rinkeby

Name	Address
PriceConsumerV3	0x4998Bd433216bBc56976BCb4Fe5AA240bA766763
APIConsumer	0x43a87559277fd5F6F1AdC6e6331998899634e9Aa
RandomNumberConsumer	0xA0e617aaA36Ff4A6bf61C4Ce2Ed66822B1e24726
RandomSVG	0xeC6CcE025e538D12E52D8C90181849B099a776A3

References

• Chainlink Docs
• Chainlink Hardhat Box
• Scaffold ETH