Forem: Uigla

Fetching programmatically token addresses from coingecko - using NodeJs

Uigla — Sun, 02 Oct 2022 09:54:07 +0000

The objective is to extract the addresses of tokens.

We can use this data for several purpouse :
Ex. Ussually each token is deployed in more than one Chain with different contract address. Automatizating task of having to search for a token address manually.

Set-Up
To do this we will use "node" and "puppeteer"
library to scrape coingecko website.

npm init --y
npm install puppeteer

Step 1_ Fetching web's urls
We will study the DOM of Coingecko's web in order to automate the data extraction process.
For it, we will follow the following steps:

We will locate in which DOM elements the data we want to extract is stored. (using web inspector)

We're extracting each token url to extract smart contract's address.

Once located the DOM elements, we will look at the attributes (class, id, type...) to be able to extract them using the following commands:

First, wrap all the code inside an IIFE async function:

const fs = require("fs");
const puppeteer = require("puppeteer");

(async () => {

      Code...

}();

Create a new "page" object using "puppeteer" and go to https://www.coingecko.com/es
Use page objects built-in "evaluate" method to acces to the website DOM.
Use "querySelectorAll" pointing to the element "a" inside element with "coin-name" class.

const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto("https://www.coingecko.com/es");

  // Evaluating page's DOM elements and extracting data
  const duplicatedUrls = await page.evaluate(() => {
    // Extracting DOM elemets to an array // Contains href and ticker
    const _rawUrls = document.querySelectorAll(".coin-name a");

    // Looping to extract and filter data
    const _duplicatedUrls = [];
    for (let i = 0; i < _rawUrls.length; i++) {
      let _url = _rawUrls[i].href;
      _duplicatedUrls.push(_url);
    }

    return _duplicatedUrls;
  });

  // Deleting duplicated data from urls
  const urls = [...new Set(duplicatedUrls)];

@Dev: Coingecko website may be updated, the attributes of the extracted elements may change. In this case, you will have to re-write the logic to extract DOM elements.

Step 2_ Looping in each token url and fething data

For loop, wraps the logic that will take care of getting data, filtering, structuring, and returning to an array.

Use "evaluate" method to fetch DOM element using "querySelectorAll([data-address])" and use "getAttribute()" method to get token's data: symbol, chainId, address and decimals.

@notice Loop ends before step 5

// Fetching token addresses from urls, "addresses" will be final array
const addresses = [];

  for (let i = 0; i < urls.length; i++) {
    await page.goto(urls[i]);

    const tokenAddress = await page.evaluate(() => {
      /* 
        DATA FETCHING LOGIC
      */
      var _rawElement;
      try {
        _rawElement = document.querySelectorAll(`[data-address]`);
      } catch (error) {
        // Most coins, also have "data-address" atribute in DOM element
        console.log("Is a coin, has not an address"); // Logs are only visible in pupperteer opened browser
        return undefined;
      }
      // If is a coin, we don't search for an address, "_rawElement" will be false
      if (_rawElement) {
        // We will run code inside puppeteer's opened browser
        // Extracting raw data
        let _tokenAddress = [];

        for (let i = 0; i < _rawElement.length; i++) {
          _tokenAddress.push([
            _rawElement[i].getAttribute("data-symbol"),
            _rawElement[i].getAttribute("data-chain-id"),
            _rawElement[i].getAttribute("data-address"),
            _rawElement[i].getAttribute("data-decimals"),
            /* search for more INFO in DOM element */
          ]);
        }

Step 3_ Filtering data
When our logic checks Coin's data (not Token's) will return undefined. Usign following logic:
Check "data-address" if is equal to "0x" or not.
Check if "data-chain-id" is null or undefined or empty.

More info about differences between Coin and token
AGREGAR UN BLOG MIO DE DIFERENCIA ENTRE COIN Y TOKEN
https://www.outlookindia.com/business/demystified-the-difference-between-crypto-coins-and-crypto-tokens-read-here-for-details-news-197683

Use "[...new Set(_array)]" to delete duplicated data.
Use array.prototype.filter method to delete "null" variables.

// As mentioned before, we need to guarantee to return "undefined" if it is a Coin
        // 2 checks
        // Comparing "data-address" if starts with "0x"
        let isToken = false;
        // Checking if there is a "data-chain-id" value // In near future, maybe we'll need more filters
        let isChain = false;
        for (let i = 0; i < _rawElement.length; i++) {
          const addr = _rawElement[i]
            .getAttribute("data-address") // hasta en los tokens, puede veinr uno con un string
            .substring(0, 2);
          if (addr === "0x") {
            isToken = true;
            console.log("is a token"); // Logs are only visible in pupperteer opened browser
          }
          const chainTest = _rawElement[i].getAttribute("data-chain-id");
          if (chainTest) {
            isChain = true;
          }
        }
        if (!isToken || !isChain) return undefined;

        // Cleaning data
        const _elements = [...new Set(_tokenAddress)];

        // Checking duplicated arrays with null values to delete them
        const _tokenData = _elements.filter(
          (item) => item[0] !== null && item[1] !== null && item[2] !== null
        );

Step 4_ Structuring data
Create a new object and fill it in new properties (using filtered data). Thus, we're not trasfering any useless data.


        const tokenObject = {};
        // un objeto con su ticker para cada token
        tokenObject[`${_tokenData[0][0]}`] = {
          symbol: `${_tokenData[0][0]}`,
        };

        // Dividing in an array of chains where the token is deployed
        const chains = [];
        // Dividing in an array of addresses of the token
        const tokenAddressPerChain = [];
        // Dividing in an array token`s decimals
        const tokenDecimals = [];
        for (let i = 0; i < _tokenData.length; i++) {
          chains.push(_tokenData[i][1]);
          tokenAddressPerChain.push(_tokenData[i][2]);
          tokenDecimals.push(_tokenData[i][3]);
        }
        // Adding data to final object, overrides duplicated data
        for (let i = 0; i < chains.length; i++) {
          tokenObject[`${_tokenData[0][0]}`][`${chains[i]}`] = {
            address: [`${tokenAddressPerChain[i]}`],
            decimals: [`${tokenDecimals[i]}`],
            /* ADD more INFO to json*/
          };
        }

        return tokenObject;
      } else return undefined;
    }); 
// THE LOOP ENDS HERE

    await page.goBack();
    if (tokenAddress) {
      addresses.push(tokenAddress);
    }
  }

Step 5_ Create a json file

fs.writeFileSync("json/TokenAddresses.json", JSON.stringify(addresses));

  // Closing the browser
  await browser.close();

Final json pre-view

[
  {
    LEO: {
      1: {
        address: ["0x2af5d2ad76741191d15dfe7bf6ac92d4bd912ca3"],
        decimals: ["18"],
      },
      symbol: "LEO",
    },
  },
  {
    MATIC: {
      1: {
        address: ["0x7d1afa7b718fb893db30a3abc0cfc608aacfebb0"],
        decimals: ["18"],
      },
      56: {
        address: ["0xcc42724c6683b7e57334c4e856f4c9965ed682bd"],
        decimals: ["18"],
      },
      137: {
        address: ["0x0000000000000000000000000000000000001010"],
        decimals: ["18"],
      },
      1666600000: {
        address: ["0x301259f392b551ca8c592c9f676fcd2f9a0a84c5"],
        decimals: ["18"],
      },
      symbol: "MATIC",
    },
  },
...
]

I hope it has been helpful.

web3 - 3D Web3 serie

Uigla — Wed, 24 Aug 2022 15:41:00 +0000

3D web3 Series
This is the last post of 3D-web3 Series.

1 - Vite config and basic three.js
2 - Three.js (fiber & drei)
3 - Cannon physics
4 - 3D web - react-web3

The stable version is v6, and currently v8 is in beta.
Is developed by Uniswap Engineering Lead Noah Zinsmeister.

At a high level, web3-react is a state machine which ensures that certain key pieces of data (the user's current account, for example) relevant to your dApp are kept up-to-date. To this end, web3-react uses Context to efficiently store this data, and inject it wherever you need it in your application.

Web3-react v6 uses Context to efficiently store this data, and inject it wherever you need it in your application.

Useful links:
Uniswap/web3-react source code
Uniswap/web3-react documents
How to Use Web3React in Your Next Project

There are other several libraries to create a web3 enviroment as:
Rainbowkit || Wagmi || Scaffold-eth || useDApp || web3modal || Web3-UI

We are using Ethers.js behind the scene. In order to maintain context and connect with blockchain easily in our DApp. Also to connect different kind of blockchain provider, wallet or chain and to query blockchain more efficiently.

Anyway, It is possible to build directly entire DApp using ethers.

We'll be using:

MaskMask wallet on the user side
Ethereum web client libraries - "@web3-react", "ethersproject"

From "@web3-react": Web3ReactProvider, context, useWeb3React, hooks, InjectedConnector. To connect wallet and get data from blockchain. (built in top of "ethers")
From "@ethersproject": Contract, Web3Provider. To send transactions to the blockchain.
To listen broadcasted events from provider we're using "events" library.

npm i @web3-react/core @web3-react/injected-connector
npm i @ethersproject/contracts @ethersproject/providers
npm i events

In this demo, we are deploying same token to BSC testnet and Mumbai (Polygon testnet).

First, we need to have metamask, TrustWallet (WalletConnect)or coinbase extension installed in our browser

@Notice WalletConnect establishes an encrypted connection between your wallet and the DApp. Use it with Ex. with "Trust Wallet"

You can check all css details in git. This article focuses on the web3 connection.

Step 1_ Create a web3 context to all component childs

Add context provider

web3-react relies on the existence of a Web3ReactProvider at the root of your application.

It requires a single getLibrary prop which is responsible for instantiating a web3 convenience library object from a low-level provider.


import React, { useEffect } from 'react';
import { Web3ReactProvider } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'

function getLibrary(provider) {
    const library = new Web3Provider(provider)
    library.pollingInterval = 12000
    return library
}

function Web3ContextProvider({ children }) {

    return (
        <Web3ReactProvider getLibrary={getLibrary}>
            {children}
        </Web3ReactProvider>
    )
}

export default Web3ContextProvider

Add to App.jsx

import Web3ContextProvider from './web3/Web3ContextProvider';
import ConnectWallet from './web3/ConnectWallet';

return (
...
<Web3ContextProvider style={{ height: '15vh' }} className='header'>
                    <ConnectWallet />
</Web3ContextProvider>
...
)

Step 2_ Instantiate Web3 object and define methods

Create a ConnectWallet.jsx
Use "useWeb3React" to connect to blockchain using "InjectedConnector".
With MetaMask you can reach a provider by "windows.ethereum".

Provide a button to connect and disconnect wallet and another one to change current chain.

import { useEffect } from 'react'
import { useWeb3React } from '@web3-react/core'
import { InjectedConnector } from '@web3-react/injected-connector'
import "../App.css"
import "../Button.css"
import "../Select.css"
import { changeChainById } from "./transaction/chains"
import ClaimToken from "./ClaimToken"

const ConnectWallet = () => {

    const injectedConnector = new InjectedConnector({
        supportedChainIds: [1, 97, 80001],
    })

    const { chainId, account, activate, active, library, deactivate, connector } = useWeb3React()

    const activateWallet = () => {
        activate(injectedConnector)
    }
    const deactivateWallet = () => {
        deactivate(injectedConnector)
    }
    const changeChain = (_chainID) => {
        changeChainById(_chainID)
    }

    useEffect(() => {
        if (!chainId) return
        document.getElementById('select-form').value = chainId
    }, [chainId])

    return (
        <main className="web3-navbar">
            <h2 >Welcome to 3D web3 series</h2>
            <div className='connect-box'>
                <b>ChainId: {chainId}</b>
                <div>Account: {account}</div>
                {active ? (
                    <button type="button" className='button-4' onClick={deactivateWallet}>
                        Disconnect
                    </button>
                ) : (
                    <button type="button" className='button-3' onClick={activateWallet}>
                        Connect Wallet
                    </button>
                )}
            </div>
            <div className='box'>
                <select id='select-form' onChange={e => {
                    let _chainID = e.target.value
                    changeChain(_chainID)
                }}>
                    <option key={1} value={1}>Ethereum Chain</option>
                    <option key={97} value={97}>BSC testnet</option>
                    <option key={80001} value={80001}>Mumbai testnet</option>
                </select>
            </div>
            <div>
                <ClaimToken
                    account={account}
                    chainId={chainId}
                />
            </div>
        </main>
    )
}

export default ConnectWallet

Step 3_ Methods to add and change between Chains.

To switch between diferent blockchains we're using metamask RPC API's has built methods.

Call "wallet_switchEthereumChain" method to request user to change chain.

In case user hasn't that specific chain configured, we catch and call "wallet_addEthereumChain" method to request user to add selected chain.

@Notice. Use tryCatch. There are some recurrent errors to handle it here

In order to change/add chain, we have to provide chain info. Check in code.

export const changeChainById = async (chainID) => {
  if (!window.ethereum)
    return alert("install metamask extension in your browser");
  try {
    await ethereum.request({
      method: "wallet_switchEthereumChain",
      params: [{ chainId: chains[chainID].chainId }],
    });
  } catch (switchError) {
    // This error code indicates that the chain has not been added to MetaMask.
    if (switchError.code === 4902) {
      try {
        await ethereum.request({
          method: "wallet_addEthereumChain",
          params: [chains[chainID]],
        });
      } catch (addError) {
        console.log("error: ", addError);
        if (ex.code === 32002)
          return alert("already pending request from user in metamask");
        else
          return alert(
            "Disconnect wallet from metamask configuration and try again!"
          );
      }
    }
    // handle other "switch" errors
  }
  return;
};

const ETH = {
  name: "Ether",
  symbol: "ETH",
  decimals: 18,
};
const MATIC = {
  name: "Matic",
  symbol: "MATIC",
  decimals: 18,
};
const BNB = {
  name: "Binance",
  symbol: "BNB",
  decimals: 18,
};

const chains = {
  1: {
    chainId: "0x1",
    chainName: "Ethereum mainnet",
    nativeCurrency: ETH,
    rpcUrls: [
      import.meta.env.VITE_APP_INFURA_KEY
        ? `https://mainnet.infura.io/v3/${import.meta.env.VITE_APP_INFURA_KEY}`
        : undefined,
      import.meta.env.VITE_APP_ALCHEMY_KEY
        ? `https://eth-mainnet.alchemyapi.io/v2/${
            import.meta.env.VITE_APP_ALCHEMY_KEY
          }`
        : undefined,
      "https://cloudflare-eth.com",
    ].filter((url) => url !== undefined),
    blockExplorerUrls: ["https://etherscan.com/"],
  },
  97: {
    chainId: "0x61",
    chainName: "Binance Testnet",
    nativeCurrency: BNB,
    rpcUrls: [
      "https://data-seed-prebsc-1-s1.binance.org:8545/",
      "https://data-seed-prebsc-2-s1.binance.org:8545/",
      "http://data-seed-prebsc-1-s2.binance.org:8545/",
      "https://data-seed-prebsc-2-s3.binance.org:8545/",
    ],
    // rpcUrls: 'https://data-seed-prebsc-1-s1.binance.org:8545',
    blockExplorerUrls: ["https://testnet.bscscan.com/"],
  },
  80001: {
    chainId: "0x13881",
    chainName: "Polygon Mumbai",
    nativeCurrency: MATIC,
    rpcUrls: [
      import.meta.env.VITE_APP_INFURA_KEY
        ? `https://polygon-mumbai.infura.io/v3/${
            import.meta.env.VITE_APP_INFURA_KEY
          }`
        : undefined,
    ].filter((url) => url !== undefined),
    blockExplorerUrls: ["https://mumbai.polygonscan.com/"],
  },
};

Step 4_ Define transactions

Create a ClaimToken.jsx component to define UI.


import { burnToken, claimToken } from './transaction/transaction'
import "../App.css"

export default function TransactionMetaMask(props) {

    const claimTokenTx = () => {
        if (props.chainId === 97 || props.chainId === 80001) {
            claimToken(props.provider, props.account, props.chainId, 1)
        } else {
            scrollTo(0, 0)
            alert('Tokens are only available in BSC and Polygon testnets')
        }
    }
    const burnTokenTx = () => {
        if (props.chainId === 97 || props.chainId === 80001) {
            burnToken(props.provider, props.account, props.chainId, 1)
        } else {
            scrollTo(0, 0)
            alert('Tokens are only available in BSC and Polygon testnets')
        }
    }

    return (
        <div className='token-buttons'>
            <button type="button" className='button-3' onClick={claimTokenTx}>
                Claim Token
            </button>
            <button type="button" className='button-3' onClick={burnTokenTx}>
                Burn Token
            </button>
        </div>
    )
}

To be able to send a transaction to modify blockchain data, import a provider directly from "@ethersproject/providers" to be able to create "signer" object.

Now, using smart contract address, ABI and signer, create "Contract" object (ready to interact with contract methods)

import { Contract } from "@ethersproject/contracts";
import { Web3Provider } from "@ethersproject/providers";

// Same ABI for all SC living in EVM compatible networks
export const contractAbi = [...];

const contractsAddress = {
  80001: "0x41e6913ce749018910e45980996dac1f99012c96", // MUMBAI
  97: "0x6ec4c5ce6cc67729d89785f715e103e5981c9780", // BSC Test
};
// TODO
export const getContract = (chainId) => {
  // using ethersproject to set signer using default provider
  const provider = new Web3Provider(window.ethereum);
  const signer = provider.getSigner();

  const contractAddress = contractsAddress[chainId];

  const contract = new Contract(contractAddress, contractAbi, signer);
  return contract;
};

Last, send asyncronous RPC and catch all the errors.

import { getContract } from "./contract";

// writeToContractUsingWeb3React
const claimToken = async (account, chainId, amount) => {
  try {
    const myContract = getContract(chainId);
    // Metamask calculates gas, but, for walletConnect and coinbase we need to set gas limit
    const overrides = {
      gasLimit: 230000,
    };
    const txResponse = await myContract.mint(account, amount, overrides);
    const txReceipt = await txResponse.wait();
    console.log(txReceipt);
    // alert(txReceipt);
  } catch (ex) {
    console.log(ex);
    if (ex.code === 32002)
      return alert("already pending request from user in metamask");

    if (ex.code === 4001) return alert("User denied transaction signature");
    return alert('"Connect / Disconnect" your wallet and try again.');
  }
};

const burnToken = async (chainId, amount) => {
  try {
    const myContract = getContract(chainId);
    // Metamask calculates gas, but, for walletConnect and coinbase we need to set gas limit
    const overrides = {
      gasLimit: 230000,
    };
    const txResponse = await myContract.burn(amount, overrides);
    const txReceipt = await txResponse.wait();
    console.log(txReceipt);
    // alert(txReceipt);
  } catch (ex) {
    console.log(ex);
    if (ex.code === 32002)
      return alert("already pending request from user in metamask");
    if (ex.code === 4001) return alert("User denied transaction signature");
    return alert('"Connect / Disconnect" your wallet and try again.');
  }
};

export { claimToken, burnToken };

Now, fork git repo and try localy.

npm install

// add to .env.local
// VITE_APP_INFURA_KEY
// VITE_APP_ALCHEMY_KEY

npm run dev

Or check Code Sand Box demo.
RPC provider could be disabled time to time.
In this case, provide your own free RPC API from infura or alchemy

BSC testnet token address, bscscan
Mumbai token address, polygonscan

I hope it has been helpful.

Cannon physics - 3D web3 serie

Uigla — Fri, 19 Aug 2022 14:46:00 +0000

Hey Reader,

This is the 3rd post of 3D-web3 Series.

1 - Vite config and basic three.js
2 - Three.js (fiber & drei)
3 - 3D web - Cannon physics
4 - Web3

"Cannon" is the rigid body physics engine who includes simple collision detection, various body shapes, contacts, friction and constraints.

npm i @react-three/cannon

Simple steps to make it work:
1_ Import and Create a physics world

import { Physics, useBox, ... } from '@react-three/cannon'

<Physics>{/* Physics related objects in here please */}</Physics>

2_ Pick a shape that suits your objects contact surface, it could be a box, plane, sphere, etc. Give it a mass, too

const [ref, api] = useBox(() => ({ mass: 1 }))

3_ Take your object, it could be a mesh, line, gltf, anything, and tie it to the reference you have just received. It will now be affected by gravity and other objects inside the physics world.

<mesh ref={ref} geometry={...} material={...} />

4_ You can interact with it by using the api, which lets you apply positions, rotations, velocities, forces and impulses

useFrame(({ clock }) => api.position.set(Math.sin(clock.getElapsedTime()) * 5, 0, 0))

5_ You can use the body api to subscribe to properties to get updates on each frame

const velocity = useRef([0, 0, 0])
useEffect(() => {
  const unsubscribe = api.velocity.subscribe((v) => (velocity.current = v))
  return unsubscribe
}, [])

All the steps in "Box.jsx" component looks like:

import { Physics, useBox } from '@react-three/cannon'
import { useFrame } from '@react-three/fiber';

const Box = () => {

    const [ref, api] = useBox(() => ({ mass: 1 }))

    useFrame(({ clock }) => api.position.set(Math.sin(clock.getElapsedTime()) * 5, 0, 0))

    const velocity = useRef([0, 0, 0])
    useEffect(() => {
        const unsubscribe = api.velocity.subscribe((v) => (velocity.current = v))
        return unsubscribe
    }, [])

    return (
        <Physics>
            <mesh ref={ref}>
                <boxGeometry attach='geometry' args={[1, 1, 1]} />
                <meshStandardMaterial attach="material" color={'#000'} />
            </mesh>

        </Physics>
    )
}

export default Box

Let's apply this package to our repo.

App logic__

First check previous post if you haven't, to understand why we are not using in code-sand-box our gltf model
Instead, we are using a "yellow box" with an onClick method to change between two "camera modes"

Include the "ActivateSpawner" component which will be the parent of the other 3 components we need.

In camera RIG mode we'll see a "black box" with an onClick method to activate :

a) "Spawner" component: It creates "x" number of bubbles with "y" velocity. "Spawner" has "Bubble" component as child.

b) "PlayerBox" component: Mimics your movement and you've to avoid coming bubbles

Both components have a collider property. So, if "PlayerBox" collides with a "Bubble" component, game will be stoped

We'll be using (previous tutorial "objects/hooks" are not included):

From "Fiber": useThree, useFrame
From "Cannon": useBox, useSphere
From "Three": Vector3

Step_1 Create a "ActivateSpawner" component

Notice we're giving a "mass" of 0 to the box

import React from 'react'
import { useBox } from '@react-three/cannon';
import { useState } from 'react';

import Spawner from './Spawner';
import PlayerBox from './PlayerBox';

const ActivateSpawner = () => {

    const [play, setPlay] = useState(false);

    // This box is used to start the game
    const [ref] = useBox(() => ({
        mass: 0,
        position: [-5, 2, -10],
        type: 'Dynamic',
        args: [1, 1, 1],
    }));

    return (
        <group>
            <mesh
                ref={ref}
                onClick={() => {
                    console.log(!play)
                    setPlay(!play)
                }}
            >
                <boxGeometry attach='geometry' args={[1, 1, 1]} />
                <meshStandardMaterial attach="material" color={'#000'} />
            </mesh>
            {play && (<>
                <Spawner />
                <PlayerBox setPlay={setPlay} />
            </>
            )}
        </group>
    )
}

export default ActivateSpawner

Step_2 Create "Spawner" component

Get random data (position, delay, color) for each "bubble" using a for loop and "randomIntBetween(a,b)" & randomIntBetweenAlsoNegatives(a,b) functions

import { Vector3 } from 'three';
import Bubble from './Bubble';


const Spawner = () => {


    function randomIntBetween(min, max) { // min and max included 
        return Math.floor(Math.random() * (max - min + 1) + min)
    }

    function randomIntBetweenAlsoNegatives(min, max) { // min and max included 
        const math = Math.floor(Math.random() * (max - min + 1) + min)
        const random = Math.random()
        const zeroOrOne = Math.round(random)
        if (zeroOrOne) return -(math)
        return math
    }

    const attackersArray = [];

    for (let i = 0; i < 20; i++) {

        let position = new Vector3(
            randomIntBetweenAlsoNegatives(0, 2),
            randomIntBetweenAlsoNegatives(0, 2),
            0)

        let wait = randomIntBetween(1, 12) * 10

        let color = `#${Math.random().toString(16).substring(2, 8)}`

        const att = [position, wait, color]
        attackersArray.push(att)
    }

    return (
        <group>
            {attackersArray.map((attackers, key) => {
                return <Bubble
                    key={key}
                    pos={attackers[0]}
                    wait={attackers[1]}
                    color={attackers[2]}
                />
            })}
        </group>
    );
};

export default Spawner;

Step_3 Create "PlayerBox" component

Use "useThree" hook from '@react-three/fiber' to create a reference to our canvas "camera" object. Now we are able to give same value to our "PlayerBox" using "useFrame" hook

This hook calls you back every frame, which is good for running effects, updating controls, etc.

Add to our "Box" a "collisionFilterGroup" and "collisionFilterMask" properties.
The first defines in which group it is and the second which group it may collide with

import { useBox, } from '@react-three/cannon';
import { useFrame } from '@react-three/fiber';
import { useThree } from '@react-three/fiber'

const PlayerBox = (props) => {

    const { camera } = useThree()

    const [ref, api] = useBox(() => ({
        mass: 0,
        type: 'Dynamic',
        position: [0, 0, -5],
        args: [0.3, 0.3, 0.1], // collision box size
        collisionFilterGroup: 1,
        // 1 PlayerBox 2 Objetive 3 BulletBox 4 Attackers
        collisionFilterMask: 4,
        onCollide: (e) => {
            props.setPlay(false);
            console.log('game over')
        },
    }));

    // Tambien simula el movimiento de la camara (y por lo tnato el del objetivo), para poder tener un collider para el game over
    useFrame(() => {
        api.position.set(camera.position.x, camera.position.y, -2);
    });

    return (
        <>
            <mesh ref={ref}>
                <boxBufferGeometry attach='geometry' args={[0.1, 0.1, 0.1]} /> {/* box size */}
                <meshStandardMaterial attach="material" color={'#000'} />

            </mesh>
        </>
    );
};

export default PlayerBox;

Step_4 Create "Bubble" component

In order to use the same "bubble" object to run the same race "x" number of times, add "setTimeout" function to reset the bubble position inside for loop.

import { useSphere } from '@react-three/cannon';
import { useFrame } from '@react-three/fiber';

const Bubble = (props) => {

    let zMovement = -20;

    const [ref, api] = useSphere(() => ({
        mass: 0,
        position: [props.pos.x, props.pos.y, props.pos.z - 200],
        type: 'Dynamic',
        // args: [1, 1, 1],
        // 1 PlayerBox 2 Objetive 3 BulletBox 4 Bubble
        collisionFilterGroup: 4,
        // No te va a colisionar, sino que vas a colisionar contra el
        collisionFilterMask: 1,
    }));

    useFrame(() => {
        api.position.set(
            props.pos.x,
            props.pos.y,
            (zMovement += 0.1) - props.wait
        );
    });

    for (let i = 1; i < 3; i++) {
        window.setTimeout(() => {
            zMovement = -50;
            api.position.set(0, 0, -zMovement);
            // 6 segs * i * wait= posicion de cada cubo para hacer que algunos salgan antes que otros
        }, 6 * 1000 + props.wait * 100);
    }

    return (
        <mesh ref={ref}>
            <sphereGeometry attach='geometry' args={[1, 32, 32]} />
            <meshStandardMaterial attach="material" color={props.color} />
        </mesh>
    );
};

export default Bubble;

Step_5 Add "ActivateSpawner" in our App.jsx using "physics" node imported from "@react-three/cannon"

All components we've defined will be rendered in our DOM when
cameraMode is false => camera RIG mode setted

import { Canvas } from '@react-three/fiber';
import ActivateSpawner from './geometry/ActivateSpawner';
...
return (
...
{!cameraMode &&
                        < Physics >
                            <ActivateSpawner />
                        </Physics>
                    }
...
)

Resume of components: ActivateSpawner , Spawner, PlayerBox, Bubble

Web3 will be added in next post

I hope it has been helpful.

Three.js (fiber & drei) - 3D web3 serie

Uigla — Thu, 28 Jul 2022 13:16:00 +0000

3D web3 Series
This is the 2nd post of 3D-web3 Series.

1 - Vite config and basic three.js
2 - Three.js (fiber & drei)
3 - Cannon physics
4 - Web3

Hey mate,

Drei pacakge is providing us ready-made abstractions for "Fiber"
Is a collection of useful helpers and fully functional DOM elements

npm i @react-three/drei

"Drei docs" has usseful index to check which functionalities are already available.

We'll be using:

From "Fiber": Canvas, useThree, useFrame
From "Drei": useGLTF, CameraShake, OrbitControls, Stars and Html
From "Three": Vector3

This post is divided in the following steps:
1_ Styling
2_ App "Canvas" with all the components
3_ Drei elements to create a background "sky", "stars"
4_ Importing 3D model into "canvas" (using "Suspense" and creation of ilumination)
5_ Creating two different "camera" uses

Step1_ Define "Canvas" viewport in App.css

.canvas {
  height: 100vh;
  width: 100vw;
}

Step2_ Implement "Canvas" element imported from "fiber".
Comments in Code

import { Suspense, useState } from 'react';
import { Canvas } from '@react-three/fiber';
import { CameraShake, OrbitControls, Sky, Html } from '@react-three/drei';

import './App.css';
import { Lights } from './lights/Lights';
import CameraRig from './camera/CameraRig';
import Stars from './stars/Stars';
import GltfLoader from './gltf/GltfLoader';

const App = () => {

    const [cameraMode, setCameraMode] = useState(true);
    const [move, setmove] = useState(undefined);

    return (
        <div className='row'>
            <div className='col-lg-12 canvas'>
                <Canvas
                    camera={{
                        position: [0, 0, 0],
                        rotation: [0, 0, 0],
                    }}>
                    {/* Details in "Stars" component */}
                    <Stars />
                    {/* Drei component, creates a sky background (does not give ilumination to canvas elements) */}
                    <Sky distance={450000}
                        sunPosition={[2, 1, 10]}
                        inclination={0}
                        azimuth={0.25} />

                    {/* While importing gltf model, we will cath it in a "Suspense" */}
                    <Suspense fallback={null}>
                        {/* Our "GltfLoader" component takes a "position" and "cameraMove" setter to switch between two different camera controls*/}
                        <GltfLoader url={'chair/armchairYellow.gltf'} position={[0, -5, -15]} setCameraMode={() => { setCameraMode(!cameraMode) }} />
                    </Suspense>
                    {/* Several lights types are implemented in canvas */}
                    <Lights />

                    {/* switch between two different camera controls */}
                    {cameraMode ? <><OrbitControls
                        enableZoom={true}
                        enablePan={true}
                        enableRotate={true}
                    />
                        {/* HTML is added only in Orbitcontrols, because creates a conflict using with "CameraShake" or "CameraRig" */}
                        <Html
                            as='h4'
                            position={[0, 0, -15]}
                            transform={true}
                        >
                            <h4 className="htmlcanvas" >Click to switch between two different camera controls</h4>
                        </Html>
                    </>
                        :
                        <>
                            {/* Drei component, creates a balanced movement in our "camera" position */}
                            <CameraShake
                                yawFrequency={0.1}
                                pitchFrequency={0.1}
                                rollFrequency={0.1}
                            />
                            {/* Using "CameraRig", "camera" position reacts to our mouse movement */}
                            <CameraRig setmove={setmove} />
                        </>
                    }
                </Canvas>
            </div>
        </div>
    );
}

export default App

Step3_ "sky", "stars" Drei elements to create a background

Stars.jsx
useRef to attach to "mesh" which is a built-in "DOM element" by fiber, which allows to manipulate the object inside.

import { Stars } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';
import { useRef } from 'react';

const StarsBG = () => {

    const ref = useRef();
    const ref2 = useRef();

    useFrame(() => {
        ref.current.rotation.y += 0.001
        ref2.current.rotation.y -= 0.0005
    })

    return (
        <>

            <Stars
                ref={ref}
                radius={4}
                depth={100}
                count={5000}
                factor={3}
                saturation={0.9}
                fade
                speed={.1}
                color={3}
            />
            <Stars
                ref={ref2}
                radius={2}
                depth={200}
                count={5000}
                factor={3}
                saturation={0.9}
                fade
                speed={.2}
                color={3}
            />
        </>
    );
}

export default StarsBG;

Sky component is already defined in our "Canvas"

<Sky distance={450000}
                        sunPosition={[2, 1, 10]}
                        inclination={0}
                        azimuth={0.25} />

Step4_ Importing 3D model into "canvas" (using "Suspense" and creation of ilumination)

We'll be using "useGLTF" from "drei". Provide a url and "/draco-gltf" as parameters and define it in a "primitive" element

GltfLoader.jsx

Pass onClick atribute to call setCameraMode method. To switch between two different camera controls (explained in step5)

import { useGLTF } from "@react-three/drei";

function GltfLoader(props) {
  const gltf = useGLTF(props.url, "/draco-gltf");
  useGLTF.preload(props.url);
  return (
    <primitive
      scale={0.05}
      object={gltf.scene}
      dispose={null}
      position={props.position}
      onClick={props.setCameraMode}
    />
  );
}
export default GltfLoader;

Wrap it using "Suspense" to handle the process while importing gltf model

Now, create a ilumination using several fiber elements.
Use "useRef" to give rotation to the ilumination using "useFrame"

Lights.jsx

import { useFrame } from '@react-three/fiber';
import { useRef } from 'react'

export const Lights = () => {

    const ref = useRef();
    useFrame(() => {
        // give rotation to the ilumination
        ref.current.rotation.y -= 0.005
    })

    return (
        <group
            ref={ref}>
            {/* Ambient Light illuminates lights for all objects */}
            <ambientLight intensity={0.3} />
            {/* Diretion light */}
            <directionalLight position={[10, 10, 5]} intensity={1} />
            <directionalLight
                castShadow
                position={[0, 10, 0]}
                intensity={1.5}
                shadow-mapSize-width={1024}
                shadow-mapSize-height={1024}
                shadow-camera-far={50}
                shadow-camera-left={-10}
                shadow-camera-right={10}
                shadow-camera-top={10}
                shadow-camera-bottom={-10}
            />
            {/* Spotlight Large overhead light */}
            <spotLight intensity={1} position={[1000, 0, 0]} castShadow />
        </group>
    );
};

Step5_ Creating two different "camera" uses
We're going to use to states:
1_ move (to set camera movement each frame)
2_ cameraMode (to switch between two different camera controls)

Using if else in one line to switch mode
var variable = (condition) ? (true option1) : (else option2)

Option1_ we'll be using following elements from "drei" in our "Canvas":
"OrbitControls" - Give us camera control: rotation (mouse left botton) and position (mouse right botton)

"Html" - Enable us using basic DOM Nodes to provide a text

"Html" creates a conflict if we use with "CameraShake" or "CameraRig". That's why we are only showing text in option1

Option2_ we'll be using following elements:
"CameraShake" from "drei" - creates a balanced movement in our "camera" Vector3
"CameraRig" (created by us). But, first check the code.

This code is already in App.jsx "canvas" element

<Canvas>
...code
{cameraMove ? <><OrbitControls
                        enableZoom={true}
                        enablePan={true}
                        enableRotate={true}
                    />
                        {/* HTML is added only in Orbitcontrols, because creates a conflict using with "CameraShake" or "CameraRig" */}
                        <Html
                            as='h4'
                            position={[0, 0, -15]}
                            transform={true}
                        >
                            <h4 className="htmlcanvas" >Click to switch between two different camera controls</h4>
                        </Html>
                    </>
                        :
                        <>
                            {/* Drei component, creates a balanced movement in our "camera" position */}
                            <CameraShake
                                yawFrequency={0.1}
                                pitchFrequency={0.1}
                                rollFrequency={0.1}
                            />
                            {/* Using "CameraRig", "camera" position reacts to our mouse movement */}
                            <CameraRig setmove={setmove} />
                        </>
                    }
                </Canvas>

Last, use "lerp" algorithm to do a linear interpolation in our camera "Vector3" imported from "three"

This code, allow us to move our camera mimicing our mouse movement

CameraRig.js

import { useFrame, useThree } from "@react-three/fiber";
import { Vector3 } from "three";

// Using "CameraRig", "camera" position reacts to our mouse movement
function CameraRig(props) {
  const vec = new Vector3();
  const { camera, mouse } = useThree();
  useFrame(() => {
    // using "lerp" algorithm to do a linear interpolation between three variables (x,y,z) and  given a fraction (0.05 in this case)
    camera.position.lerp(vec.set(mouse.x * 20, mouse.y * 20, mouse.z), 0.05);
    props.setmove(camera.position);
  });
}

export default CameraRig;

Resume of components: App, Stars, GltfLoader, Lights, CameraRig

Code in sandBox
Does not render due to an issue of codeSandBox "ide".
error: Unexpected token < in JSON at position 0
For more info, check in stackoverslow or this post

I've deleted gltf model in order to show a quick pre-view

Web3 will be added in next post

I hope it has been helpful.

Setting up Vite - 3D web3 serie

Uigla — Wed, 27 Jul 2022 15:39:00 +0000

Hey Reader,

This is the first post of 3D-web3 Series.
Where we can learn about creating a 3D space (including pshysics) in our web and connecting to the blockchain using web3 libraries.

1 - Vite config and basic three.js
2 - Three.js (fiber & drei) - web3 serie
3 - Cannon physics
4 - Web3

Vite is a modern, blazing-fast tool for scaffolding and bundling projects. It has quickly become popular due to near-instant code compilation and rapid hot module replacement.

Vite uses "Rollup.js" internally for bundling (is in charge of configuration) and esbuild as pre-bundle dependency (which is written in Go).

-- @Notice create-react-app uses "Webpack" internally for bundling --

It has been developed by "Evan You" who also created the "Vue.js" framework.

Set-up - open consol in your projects directory and run

npm create vite@latest my-three-react-web3-app --template react
// Follow consol instructions and select -> React -> React
// ("You're also able to use Vanilla, Vue, Svelte... and JS or TS")
cd my-three-react-web3-app
npm install
npm run dev

Check vite docs

npm i three

Three.js is an open source JavaScript library to create and display animated 3D computer graphics in a web browser using WebGL.

We'll use Threejs only to take some built-in objects (we'll use it more in next articles)

npm i @react-three/fiber

To simplify development process, we'll be working with @react-three/fiber. Which is a React renderer for threejs on the web and react-native.

The renderer is responsible for rendering React components to the DOM and native views. This means that we are able to create regular React components and let react-three-fiber handle converting those components into three.

"Fiber allows as to avoid threejs set up to render any 3D object"

First render

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

App.js

import { Canvas } from '@react-three/fiber'
import Box from './components/Box'
import './App.css'

function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
    </Canvas>
  )
}

export default App

Following Box and Sphere components, will use Hooks to simplify code logic.

useRef to attach to "mesh" which is a built-in "DOM element" by fiber, which allows to manipulate the object inside.

useFrame calls you back every frame, which is good for running effects, updating controls, etc. You receive the state and a clock delta.

useState to change scale and color when objects is clicked.

Box.js

import React, { useRef, useState } from 'react'
import { useFrame } from '@react-three/fiber'

const Box = (props) => {
    // This reference will give us direct access to the mesh
    const mesh = useRef()
    // Set up state for the hovered and active state
    const [hovered, setHover] = useState(false)
    const [active, setActive] = useState(false)
    // Subscribe this component to the render-loop, rotate the mesh every frame
// Adding rotation grade per each frame
    useFrame((state, delta) => {
        mesh.current.rotation.x += 0.01
        mesh.current.rotation.y += 0.01
    })
    // Return view, these are regular three.js elements expressed in JSX
    return (
        <mesh
            {...props}
            ref={mesh}
            scale={active ? 1.5 : 1}
            onClick={(e) => {
                setActive(!active)
                setHover(!hovered)
            }}
        >
            <boxGeometry args={[1, 1, 1]} />
            <meshStandardMaterial color={hovered ? 'green' : 'blue'} />
        </mesh>
    )
}
export default Box;

Sphere.js
Works as Box component, unique difference is inside mesh element


import React, { useRef, useState } from 'react'
import { useFrame } from '@react-three/fiber'

function Sphere(props) {
    // This reference gives us direct access to the THREE.Mesh object
    const ref = useRef();
    // Hold state for hovered and clicked events
    const [hovered, setHover] = useState(false);
    const [active, setActive] = useState(false);
    // Subscribe this component to the render-loop, rotate the mesh every frame
// Adding rotation grade per each frame
    useFrame((state, delta) => (ref.current.rotation.y += 0.01));
    // Return the view, these are regular Threejs elements expressed in JSX
    return (
        <mesh
            {...props}
            ref={ref}
            scale={active ? 4 : 1}
            onClick={(e) => {
                setActive(!active);
                setHover(!hovered);
            }}
        >
            <sphereBufferGeometry args={[0.7, 30, 30]} attach="geometry" />
            <meshBasicMaterial
                wireframe
                attach="material"
                color={hovered ? "yellow" : "pink"}
            />
        </mesh>
    );
}

export default Sphere;

I am making a series developing this App, new post coming soon.

SandBox demo @Notice Code is not splited in components as in our Vite App

Click on 3D objects

Serie follows at 3D web - Three.js (fiber & drei) - web3 serie Check demo in the bottom!

I hope it has been helpful.

Vanilla JavaScript data fetch

Uigla — Tue, 26 Jul 2022 17:05:00 +0000

VanillaJS is a name to refer to using plain JavaScript without any additional libraries like jQuery.

Why should I know Vanilla javascript basics?

In every app development, there comes a day when something doesn't work as expected, and you don't know why. That's when you have to start digging. When you begin searching through poorly documented, complex, generic, pure JavaScript code, you'll need a deep understanding of JS to make it. Otherwise, I can guarantee you're going to lose all the precious time you saved by using your fancy framework.

Knowing vanilla JavaScript will make you actually understand JS frameworks and help you choose the right one when you need it.

This guide shows you how to build and run a simple Vanilla.js app. Using fetch (built-in asyncronous method) to reach data and print it.

App is divided in three files:
index.html, index.css and index.js (vanilla js)

First, in our html, reference in "head" our index.css and inside "body" our index.js, like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <section class="blog">
        <div class="container">
            <h1>Blog</h1>
            <div id="blog" class="w-block"></div>
        </div>
    </section>
    <script src="./index.js" type="text/javascript"></script>
</body>

</html>

You will need a server to run the code, if you're usin VScode, you can use Live server

index.css

body {
  background-color: #f2f2f2;
}
h1 {
  text-align: center;
}
h1,
h2 {
  color: #d98e04;
}
a {
  display: block;
  margin-top: 30px;
  color: #f2b705;
}
.w-block {
  display: block;
  max-width: 550px;
  margin: 5rem auto;
  line-height: 1.5rem;
}
.w-block .university-feed {
  list-style-type: none !important;
}
.w-block .university-feed li a {
  text-decoration: none;
  transition: all 250ms;
}
.w-block .university-feed li a:hover {
  color: #2563eb;
}
.w-block h2 {
  margin: 1rem 0;
}
.w-link {
  margin: 1.5rem 0;
}
.w-link a {
  margin: 0 1rem 0 0;
  display: inline;
  text-align: center;
}

index.js (Vanilla JavaScript)

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

The appendChild() method of the Node interface adds a node to the end of the list of children of a specified parent node.

The Fetch API allows you to asynchronously request for a resource. Use the fetch() method to return a promise that resolves into a Response object. To get the actual data, you call one of the methods of the Response object e.g., text() or json() . These methods resolve into the actual data.

The forEach() (is a built-in array method) executes a provided function once for each array element.

// DOM element where are adding more Nodes with extracted data
const universitiesList = document.querySelector("#university");

// Check url - http://universities.hipolabs.com/search?country=United+Kingdom
// We have splitted in variables in case we want to change the url that supports different routes (get APIs)
const country = "United+Kingdom";
const api = "http://universities.hipolabs.com/search?country=";

/*  Helper functions */
// Create elements
function createNode(element) {
  return document.createElement(element);
}
// function append element
function append(parent, child) {
  return parent.appendChild(child);
}
// Adding "ul" Node element
const ul = createNode("ul");
ul.classList.add("university-feed");
// build url
function buildURL() {
  return `${api}${country}`;
}
// @parameter _amount defines how many universities we want to show
//  if you don't pass the "_amount" parameter into the function, its parameters will have the default values of 6
const showUniversities = (_amount = 6) => {
  fetch(buildURL())
    .then((response) => response.json())
    .then((universities) => {
      // inside "universities" array, we've 100 objects and all of them has same properties: country, name, web_pages (and few more)
      // We're cutting json array to first "_amount" objects
      universities.length = _amount;
      console.log(universities[0] /* json[0].web_pages */);

      universities.forEach((university) => {
        // creating node elements
        let li = createNode("li"),
          a = createNode("a"),
          h2 = createNode("h2"),
          hr = createNode("hr");

        // specifying value, attributes and className
        h2.innerText = university.name;
        a.innerText = university.web_pages[0];
        a.target = "_blank";
        a.rel = "noreferrer";
        a.href = university.web_pages[0];
        //appending
        // append(li, h4);
        append(li, h2);
        append(h2, a);
        append(ul, li);
        append(ul, hr);
      });
      // appending to university university to feed
      append(universitiesList, ul);
    }).catch(function (error) {
      console.log("Error during fetch: " + error.message);
    });
};

showUniversities();

I hope it has been helpful.