How to Generate Randomness Using Chainlink with the Hyperverse
Chainlink is one of the most popular oracles in the ecosystem, and one of the most important features it allows us to implement is Randomness. But, Randomness is not possible to do on-chain without an oracle. Enter the Hyperverse - now, you can implement the Random Pick Smart Module within your Dapp. Learn how!
What is Chainlink and why should I care?
Chainlink is one of the most popular oracles in the ecosystem. Oracles are entities that connect blockchains to external systems, enabling smart contracts to access real-world data. Essentially, an oracle provides a bridge between on-chain and off-chain data to view stock/crypto prices, weather, sporting event scores, etc. One of the most important features it allows us to implement is randomness. Randomness is not possible to do on-chain without an oracle since the blockchain is deterministic by nature. So I will be showing you how to implement the random pick smart module within your Dapp to choose a random number!
let { data: randomNumberPick, isLoading: loadingWinner } = GetRandomPick(requestId);
randomMutate function takes in an array of integers which will set off the request to Chainlink
randomNumberPick will hold the value of the returned random number
Step 4: Set up the random number winner structure
Add these lines before the return:
const [winner, setWinner] = useState<any>(null);
const isLoading = randomNumber || loadingWinner;
We will be using winner to display the random number that was chosen and we will be using isLoading to display to the user that we are waiting for the function to return a random number
If you have done all the steps so far, this is what your index.tsx file should look like:
import { useEthereum } from "@decentology/hyperverse-ethereum";
import { useRandomPick } from "@decentology/hyperverse-ethereum-randompick";
Here we are using HTML to build a button that says “Start Random Picker” when isLoading is false and otherwise shows “Processing...” We are also disabling the user from clicking the button unless they have connected their wallet to the Dapp.
Add this function before the return:
const fetchNFTs = async () => {
setWinner(null);
randomMutate([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
};
This function simply sets the winner to null and calls the randomMutate function passing in 10 integers.
Step 6: Show the random number
Add this before the fetchNFTs function:
useEffect(() => {
if (randomNumberPick) {
setWinner(randomNumberPick);
}
}, [randomNumberPick]);
This sets the winner to the random number that is returned from GetRandomPick()
No we can simply add this line of code after the button we created above to show the random number if it exists:
{winner || null}
Step 7: Run yarn dev to see it in action!
Note: Make sure you are on the Rinkeby Test Network for it to work
The end result code should look something like this:
import { useEthereum } from "@decentology/hyperverse-ethereum";
import { useRandomPick } from "@decentology/hyperverse-ethereum-randompick";