DEV Community

Cover image for Estrategias Anti-Ballenas para proteger tu Token
Ahmed Castro
Ahmed Castro

Posted on • Edited on

Estrategias Anti-Ballenas para proteger tu Token

#blockchain #solidity #ethereum #web3

¿Cómo protegemos un lanzamiento de un token con fuertes inversionistas iniciales? Cuando realizamos una presale de token ERC-20, usualmente el precio que se dá a los inversionistas mayoritarios es menor al del precio en el lanzamiento público al momento de proveer liquidez en un DEX. Por eso es muy importante acompañar el presale con un contrato de timelock. Esto no solo suavisará los primeros momentos del token en el mercado sino que también te dará control al momento de proveer liquidez en los DEXes. En este video veremos cómo crear un contrato con Timelocks para estrategias de Vesting.

Dependencias

Para este tutorial ocuparás NodeJs que recomiendo descargarlo en Linux via NVM, y finalmente Metamask con fondos de Rinkeby Testnet que puedes conseguir desde el Faucet.

1. Lanza el smart contract

Primero lanzaremos un contrato de un token ERC20 como ejemplo.

// SPDX-License-Identifier: MIT
pragma solidity 0.8.11;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract MyERC20 is ERC20 {
  constructor () ERC20("My Token", "TKN") {
    _mint(msg.sender, 1000000 ether);
  }
}
Enter fullscreen mode Exit fullscreen mode

Luego lanzamos el contrato del Timelock, recuerda reemplalzar el la dirección 0x0000000000000000000000000000000000000000 por la del token recién lanzado.

// SPDX-License-Identifier: MIT

pragma solidity 0.8.11;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract TokenTimelock is Ownable {
  ERC20 public token;
  uint public ENTRY_PRICE = 0.1 ether;
  uint public AMOUNT_PER_UNLOCK = 10 ether;
  uint public UNLOCK_COUNT = 3;

  mapping(uint8 => uint256) public unlock_time;
  mapping(address => bool) public is_beneficiary;
  mapping(address => mapping(uint => bool)) public beneficiary_has_claimed;

  constructor()
  {
    token = ERC20(0x0000000000000000000000000000000000000000);

    unlock_time[0] = 1642052293;
    unlock_time[1] = 1642052293;
    unlock_time[2] = 1642052293;
  }

  function claim(uint8 unlock_number) public {
    require(unlock_number < UNLOCK_COUNT, "Must be below unlock count.");
    require(block.timestamp >= unlock_time[unlock_number], "Must have reached unlock time.");
    require(is_beneficiary[msg.sender], "Beneficiary must has bought.");
    require(beneficiary_has_claimed[msg.sender][unlock_number] == false, "Beneficiary should not have claimed.");

    beneficiary_has_claimed[msg.sender][unlock_number] = true;

    token.transfer(msg.sender, AMOUNT_PER_UNLOCK);
  }

  function buy() public payable
  {
    require(msg.value == ENTRY_PRICE, "Must pay the entry price.");
    is_beneficiary[msg.sender] = true;
  }

  function withdraw() public
  {
    (bool sent, bytes memory data) = address(owner()).call{value: address(this).balance}("");
    require(sent, "Failed to send Ether");
    data;
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Construye el frontend

Estos son los archivos que necesitas para tener un frontend funcional:

  1. El archivo HTML index.html
  2. El archivo Javascript que te permite comunicarte con web3 en este caso yo lo llamé blockchain_stuff.js
  3. El Json ABI que puedes obtener desde remix ContractABI.json

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <p id="web3_message"></p>
  <input type="button" value="Buy" onclick="buy()"></input>
  <div id="claim_buttons"></div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.3.5/web3.min.js"></script>
  <script type="text/javascript" src="blockchain_stuff.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

blockchain_stuff.js

const NETWORK_ID = 4
const CONTRACT_ADDRESS = "0x03E59E35BC96060D0a4565Ebd307a3102d5627e1"
const JSON_CONTRACT_ABI_PATH = "./ContractABI.json"
var contract
var accounts
var web3
var ENTRY_PRICE

function metamaskReloadCallback() {
  window.ethereum.on('accountsChanged', (accounts) => {
    document.getElementById("web3_message").textContent="Se cambió el account, refrescando...";
    window.location.reload()
  })
  window.ethereum.on('networkChanged', (accounts) => {
    document.getElementById("web3_message").textContent="Se el network, refrescando...";
    window.location.reload()
  })
}

const getWeb3 = async () => {
  return new Promise((resolve, reject) => {
    if(document.readyState=="complete")
    {
      if (window.ethereum) {
        const web3 = new Web3(window.ethereum)
        window.location.reload()
        resolve(web3)
      } else {
        reject("must install MetaMask")
        document.getElementById("web3_message").textContent="Error: Porfavor conéctate a Metamask";
      }
    }else
    {
      window.addEventListener("load", async () => {
        if (window.ethereum) {
          const web3 = new Web3(window.ethereum)
          resolve(web3)
        } else {
          reject("must install MetaMask")
          document.getElementById("web3_message").textContent="Error: Please install Metamask";
        }
      });
    }
  });
};

const getContract = async (web3) => {
  const response = await fetch(JSON_CONTRACT_ABI_PATH);
  const data = await response.json();

  const netId = await web3.eth.net.getId();
  contract = new web3.eth.Contract(
    data,
    CONTRACT_ADDRESS
    );
  return contract
}

async function loadDapp() {
  metamaskReloadCallback()
  document.getElementById("web3_message").textContent="Please connect to Metamask"
  var awaitWeb3 = async function () {
    web3 = await getWeb3()
    web3.eth.net.getId((err, netId) => {
      if (netId == NETWORK_ID) {
        var awaitContract = async function () {
          contract = await getContract(web3);
          await window.ethereum.request({ method: "eth_requestAccounts" })
          accounts = await web3.eth.getAccounts()
          document.getElementById("web3_message").textContent="You are connected to Metamask"
          onContractInitCallback()
        };
        awaitContract();
      } else {
        document.getElementById("web3_message").textContent="Please connect to Rinkeby";
      }
    });
  };
  awaitWeb3();
}

const onContractInitCallback = async () => {
  AMOUNT_PER_UNLOCK = await contract.methods.AMOUNT_PER_UNLOCK().call()
  UNLOCK_COUNT = await contract.methods.UNLOCK_COUNT().call()
  ENTRY_PRICE = await contract.methods.ENTRY_PRICE().call()
  user_is_beneficiary = await contract.methods.is_beneficiary(accounts[0]).call()

  var parent = document.getElementById("claim_buttons")
  if(user_is_beneficiary)
  {
    for(i=0; i<UNLOCK_COUNT; i++)
    {
      var unlock_h = document.createElement("h3")
      unlock_h.innerHTML = "Unlock #" + (i+1)
      parent.appendChild(unlock_h)

      user_has_claimed = await contract.methods.beneficiary_has_claimed(accounts[0],i).call()
      if(!user_has_claimed)
      {
        timestamp = await contract.methods.unlock_time(i).call()
        current_time = Math.round(Date.now() / 1000)
        if(parseInt(timestamp) < current_time)
        {
          if(parseInt(timestamp) != 0)
          {
            var btn = document.createElement("button")
            btn.innerHTML = "Claim!"
            btn.unlock_number = i
            btn.onclick = function (e, e, x) {
              claim(this.unlock_number)
            }
            parent.appendChild(btn)
            parent.appendChild(document.createElement("br"))
          }else
          {
            claimed_p = document.createElement("p")
            claimed_p.innerHTML = "This timelock is still not set"
            parent.appendChild(claimed_p)
          }
        }else
        {
          claimed_p = document.createElement("p")
          claimed_p.innerHTML = "Please claim " + web3.utils.fromWei(AMOUNT_PER_UNLOCK) + " tokens on " + new Date(timestamp * 1000)
          parent.appendChild(claimed_p)
        }
      }else
      {
        claimed_p = document.createElement("p")
        claimed_p.innerHTML = "Claimed"
        parent.appendChild(claimed_p)
      }
    }
  }else
  {
    claimed_p = document.createElement("p")
    claimed_p.innerHTML = "No timelocks found for this account"
    parent.appendChild(claimed_p)
  }
}


//// PUBLIC FUNCTIONS ////

/*
await claim(3)
*/
const claim = async (unlock_number) => {
  const result = await contract.methods.claim(unlock_number)
  .send({ from: accounts[0], gas: 0, value: 0 })
  .on('transactionHash', function(hash){
    document.getElementById("web3_message").textContent="Claiming...";
  })
  .on('receipt', function(receipt){
    document.getElementById("web3_message").textContent="Success.";    })
  .catch((revertReason) => {
    console.log("ERROR! Transaction reverted: " + revertReason.receipt.transactionHash)
  });
}

/*
await buy()
*/
const buy = async (unlock_number) => {
  const result = await contract.methods.buy()
  .send({ from: accounts[0], gas: 0, value: ENTRY_PRICE })
  .on('transactionHash', function(hash){
    document.getElementById("web3_message").textContent="Buying...";
  })
  .on('receipt', function(receipt){
    document.getElementById("web3_message").textContent="Success.";    })
  .catch((revertReason) => {
    console.log("ERROR! Transaction reverted: " + revertReason.receipt.transactionHash)
  });
}

/*
await withdraw()
*/
const withdraw = async (unlock_number) => {
  const result = await contract.methods.withdraw()
  .send({ from: accounts[0], gas: 0, value: 0 })
  .on('transactionHash', function(hash){
    document.getElementById("web3_message").textContent="Withdrawing...";
  })
  .on('receipt', function(receipt){
    document.getElementById("web3_message").textContent="Success.";    })
  .catch((revertReason) => {
    console.log("ERROR! Transaction reverted: " + revertReason.receipt.transactionHash)
  });
}

loadDapp()
Enter fullscreen mode Exit fullscreen mode

3. Probar la dapp

Instalamos un servidor local.

npm i -g lite-server
Enter fullscreen mode Exit fullscreen mode

Y lo lanzamos.

lite-server
Enter fullscreen mode Exit fullscreen mode

Ahora podemos interactuar con la dapp en nuestro browser en localhost:3000.

Bono: Timelock editable y con whitelist 

// SPDX-License-Identifier: MIT

pragma solidity 0.8.11;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract TokenTimelock is Ownable {
  ERC20 public token;
  uint public ENTRY_PRICE;
  uint public AMOUNT_PER_UNLOCK;
  uint public UNLOCK_COUNT;

  mapping(uint8 => uint256) public unlock_time;
  mapping(address => bool) public is_beneficiary;
  mapping(address => mapping(uint => bool)) public beneficiary_has_claimed;

  mapping(address => bool) public whitelist;

  constructor()
  {
    token = ERC20(0x0000000000000000000000000000000000000000);
  }

  function claim(uint8 unlock_number) public {
    require(unlock_number < UNLOCK_COUNT, "Must be below unlock count.");
    require(block.timestamp >= unlock_time[unlock_number], "Must have reached unlock time.");
    require(is_beneficiary[msg.sender], "Beneficiary must has bought.");
    require(beneficiary_has_claimed[msg.sender][unlock_number] == false, "Beneficiary should not have claimed.");
    require(whitelist[msg.sender],"Sender must be whitelisted");

    beneficiary_has_claimed[msg.sender][unlock_number] = true;

    token.transfer(msg.sender, AMOUNT_PER_UNLOCK);
  }

  function buy() public payable
  {
    require(msg.value == ENTRY_PRICE, "Must pay the entry price.");
    is_beneficiary[msg.sender] = true;
  }

  function withdraw() public
  {
    (bool sent, bytes memory data) = address(owner()).call{value: address(this).balance}("");
    require(sent, "Failed to send Ether");
    data;
  }

  // Admin functions

  function setEntryPrice(uint entry_price) public onlyOwner
  {
    ENTRY_PRICE = entry_price;
  }

  function setAmountPerUnlock(uint amount_per_unlock) public onlyOwner
  {
    AMOUNT_PER_UNLOCK = amount_per_unlock;
  }

  function setUnlockCount(uint unlock_count) public onlyOwner
  {
    UNLOCK_COUNT = unlock_count;
  }

  function setUnlockTimes(uint[] memory unlock_times) public onlyOwner
  {
    setEntryPrice(unlock_times.length);
    for(uint8 i; i<unlock_times.length; i++)
    {
      unlock_time[i] = unlock_times[i];
    }
  }

  function editWhitelist(address[] memory addresses, bool value) public onlyOwner {
    for(uint i; i < addresses.length; i++){
      whitelist[addresses[i]] = value;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

¡Gracias por ver este tutorial!

Sígueme en dev.to y en Youtube para todo lo relacionado al desarrollo en Blockchain en Español.

Top comments (4)

Collapse
 
koreander profile image
Koreander •

Pregunta : como es posible hacer una funcionalidad como la de coingeko por ejemplo de agregar el token al metamask desde web3, he tratado de averiguarlo pero se me escapa estoy aun un poco novato con esto, es decir como hacer que tenga la imagen en metamask y que ademas se agregue al hacer click el token etc.. podrias compartir esto gracias!!

Question : how is it possible to make a functionality such as coingeko for example to add the token to the metamask from web3, I have tried to find out but it escapes me I am still a little newbie with this, that is to say how to make it have the image in metamask and that it is also added when clicking the token etc. you could share this thanks!!

Collapse
 
turupawn profile image
Ahmed Castro •

Nunca lo he probado pero veo que metamask tiene documentación al respecto. Te paso este link, hay poca documentación pero me he fijado que diferentes aplicaciones pueden tener diferentes mecanismos para agregar imágenes porque lastimosamente esto no es parte del standard ERC-20. chttps://docs.metamask.io/guide/registering-your-token.html#code-free-example

Collapse
 
bashman profile image
José Luis Regalado •

Hola @turupawn , saludos. Cómo podría contactar contigo?. Necesito un pequeño desarrollo. Gracias.

Collapse
 
turupawn profile image
Ahmed Castro •

Hola, te mando el link para que te unas al server de discord.
discord.gg/s2gKtVqA

Read next

lordghostx profile image

Understanding Starknet Data with Dune Dashboards

LordGhostX -

bytesupreme profile image

Building a Decentralized Identity Management System with Hyperledger Indy and React

Byte Supreme -

shanu001x profile image

Best Programming Language for Web3 in 2024

Shanu -

ceasermikes002 profile image

Understanding the Difference Between memory and storage in Solidity

ceasermikes -