npm install truffle -g

npx create-react-app demoappblockchain --template typescript

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract Migrations {
  address public owner = msg.sender;
  uint public last_completed_migration;

  modifier restricted() {
    require(
      msg.sender == owner,
      "This function is restricted to the contract's owner"
    );
    _;
  }

  function setCompleted(uint completed) public restricted {
    last_completed_migration = completed;
  }
}

truffle compile

yarn add chai chai-as-promised chai-bignumber openzeppelin-solidity solidity-coverage truffle truffle-flattener truffle-hdwallet-provider truffle-hdwallet-provider-privkey web3

yarn add typescript ts-node typechain @typechain/truffle-v5 @typechain/web3-v1
yarn add @types/node @types/mocha @types/chai @types/chai-as-promised --save-dev 

require('ts-node').register({
  files: true,
  project: './tsconfig.truffle.json',
})

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "noEmit": false,
    "module": "CommonJS",
    "moduleResolution": "node",
    "strict": true
  },
  "include": ["./migrations-ts/*.ts", "./types/**/*.ts"]
}

"include": ["**/*.ts"]

"test:contracts": "npm run compile && truffle test",
"compile": "truffle compile && npm run generate-types",
"generate-types": "npx typechain --target=truffle-v5 'src/abis/*.json' && npx typechain --target=web3-v1 'src/abis/*.json'",
"postinstall": "npx truffle compile && npm run generate-types",
"migrate": "tsc -p ./tsconfig.truffle.json --outDir ./migrations && truffle migrate"

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "openzeppelin-solidity/contracts/utils/math/SafeMath.sol";

contract Token {
  using SafeMath for uint;
  string public name = "VNL Token";
  string public symbol = "VNL";
  uint256 public decimals = 18; //wei
  uint256 public totalSupply;

  //Events

  //indexed in solidity means we can subscribed to events only if we are there (either from or to)
  event Transfer(address indexed from, address indexed to, uint256 value);
  event Approval(address indexed owner, address indexed spender, uint256 value);
  //Track balances

  mapping(address => uint256) public balanceOf;
  // nested mapping. address of person who approves the tokens and multiple places where person approves allowance and how much to spend
  mapping(address => mapping(address => uint256)) public allowance;

  constructor() public {
    totalSupply = 1000000  * (10 ** decimals);
    balanceOf[msg.sender] = totalSupply;
  }
  // Send tokens

  function transfer(address _to, uint256 _value) public returns(bool success) {
    // Stops execution if error

    require(balanceOf[msg.sender] >= _value);
    _transfer(msg.sender, _to, _value);
    return true;
  }

  function _transfer(address _from, address _to, uint256 _value) internal {
    require(_to != address(0));
    balanceOf[_from] = balanceOf[_from].sub(_value);
    balanceOf[_to] = balanceOf[_to].add(_value);
    emit Transfer(_from, _to, _value);
  }

  function approve(address _spender, uint256 _value) public returns (bool success) {
    require(_spender != address(0));
    allowance[msg.sender][_spender] = _value;
    emit Approval(msg.sender, _spender, _value);
    return true;
  }

  function transferFrom(address _from, address _to, uint256 _value) public returns (bool success) {
    allowance[_from][msg.sender] = allowance[_from][msg.sender].sub(_value);
    _transfer(_from, _to, _value);
    return true;
  }





}

import { TokenContract } from "../types/truffle-contracts"

const Token = artifacts.require('Token')

module.exports = async function (deployer: { deploy: (arg0: TokenContract) => any }) {
  await deployer.deploy(Token)
}

// because of https://stackoverflow.com/questions/40900791/cannot-redeclare-block-scoped-variable-in-unrelated-files
export {}

yarn migrate

tsc -p ./tsconfig.truffle.json --outDir ./migrations && truffle migrate

function useWeb3Modal(config = {}) {
  const [provider, setProvider] = useState<Web3Provider>()
  const [singedInAddress, setSignedInAddress] = useState('')
  const web3Modal = new Web3Modal({
    network: 'private',
    cacheProvider: true,
    providerOptions: {
      walletconnect: {
        package: WalletConnectProvider,
        options: {
          infuraId: 'invalid_infura_key',
        },
      },
    },
  })
  const loadWeb3Modal = useCallback(async () => {
    const newProvider = await web3Modal.connect()
    setProvider(new Web3Provider(newProvider))
    setSignedInAddress(newProvider.selectedAddress)
  }, [web3Modal])

  const logout = useCallback(
    async function () {
      setSignedInAddress('')
      await web3Modal.clearCachedProvider()
      window.location.reload()
    },
    [web3Modal],
  )

  return {loadWeb3Modal, logout, provider, singedInAddress}
}