Building a Token Exchange Platform with Web3 Technologies

Web3 technologies have opened up new possibilities for creating innovative applications. One such application is a token exchange platform, where users can buy and sell tokens. In this article, we will explore how to build a token exchange platform using Web3 technologies.

Prerequisites

• Working knowledge of React, Next.js, and Solidity
• Node.js installed
• A code editor (preferably Visual Studio Code)
• MetaMask extension installed with at least one wallet
• MetaMask connected to Polygon Mumbai testnet

Creating the Token Smart Contract

The first step in building a token exchange platform is to create a token smart contract. We will use OpenZeppelin contract templates to create an ERC-20 token. The contract will mint 10,000 tokens into the contract creator’s wallet.

“`solidity
pragma solidity ^0.8.0;

import “https://github.com/OpenZeppelin/openzeppelin-solidity/contracts/token/ERC20/SafeERC20.sol”;

contract TestToken {
// Mapping of user balances
mapping(address => uint256) public balances;

// Total supply of tokens
uint256 public totalSupply;

// Constructor function
constructor() public {
    // Initialize total supply
    totalSupply = 10000;

    // Mint tokens into the contract creator's wallet
    balances[msg.sender] = totalSupply;
}

// Function to transfer tokens
function transfer(address _to, uint256 _value) public {
    // Check if the sender has enough tokens
    require(balances[msg.sender] >= _value);

    // Subtract tokens from the sender's balance
    balances[msg.sender] -= _value;

    // Add tokens to the recipient's balance
    balances[_to] += _value;
}

}
“`

Creating the Vendor Smart Contract

The next step is to create a vendor smart contract that will facilitate buying and selling of tokens. The vendor contract will hold the tokens and manage the buying and selling process.

“`solidity
pragma solidity ^0.8.0;

import “https://github.com/OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol”;

contract TestTokenVendor {
// Mapping of user balances
mapping(address => uint256) public balances;

// Address of the token contract
address public tokenContractAddress;

// Price of tokens in MATIC
uint256 public tokensPerMatic;

// Constructor function
constructor(address _tokenContractAddress) public {
    // Initialize token contract address
    tokenContractAddress = _tokenContractAddress;

    // Initialize price of tokens
    tokensPerMatic = 10;
}

// Function to buy tokens
function buyTokens(uint256 _amount) public payable {
    // Check if the buyer has enough MATIC
    require(msg.value >= _amount * tokensPerMatic);

    // Calculate the number of tokens to buy
    uint256 tokensToBuy = _amount * tokensPerMatic;

    // Transfer tokens from the vendor contract to the buyer's wallet
    require(TestToken(tokenContractAddress).transfer(msg.sender, tokensToBuy));
}

// Function to sell tokens
function sellTokens(uint256 _amount) public {
    // Check if the seller has enough tokens
    require(TestToken(tokenContractAddress).balanceOf(msg.sender) >= _amount);

    // Calculate the amount of MATIC to send to the seller
    uint256 maticToSend = _amount / tokensPerMatic;

    // Transfer MATIC from the vendor contract to the seller's wallet
    msg.sender.transfer(maticToSend);
}

}
“`

Setting up the Next.js App

The next step is to set up a Next.js app that will interact with the smart contracts. We will use the @thirdweb-dev/sdk library to connect to the blockchain and interact with the smart contracts.

“`javascript
import { ThirdwebProvider } from ‘@thirdweb-dev/sdk’;
import { Web3Provider } from ‘@ethersproject/providers’;

function MyApp({ Component, pageProps }) {
return (


);
}

export default MyApp;
“`

Implementing Purchasing and Selling Functionality

The final step is to implement the purchasing and selling functionality in the Next.js app. We will use the @thirdweb-dev/sdk library to interact with the smart contracts and facilitate buying and selling of tokens.

“`javascript
import { useContract, useWeb3 } from ‘@thirdweb-dev/sdk’;

function Exchange() {
const { contract } = useContract(‘TestToken’);
const { contract: vendorContract } = useContract(‘TestTokenVendor’);
const { address, balance } = useWeb3();

const handleBuyTokens = async (amount) => {
const tx = await vendorContract.buyTokens(amount);
await tx.wait();
};

const handleSellTokens = async (amount) => {
const tx = await vendorContract.sellTokens(amount);
await tx.wait();
};

return (

);
}

export default Exchange;
“`

That’s it! We have now built a token exchange platform using Web3 technologies.