Configurando Web3-React

Yendo al github sale en main todo lo referido a la v8 que esta en beta, para usar esa version ya no existe injected-connector, si no que hay un connector especificamente para metamask.
El profe esta usando la v6, que en el repo pueden acceder a la docu moviendose a la branch que se llama v6.

El mainLayout debe envolver routes, así quedaría

import { Route, Routes } from "react-router-dom";
import Home from "./views/home";
import MainLayout from "./layouts/main";

function App() {
  return (
    
      <MainLayout>
      <Routes>
       <Route path="/" exact element={<Home/>} />
      </Routes>
     </MainLayout>
  );
}

export default App;

En /src/config/web3 el import de web3 hay que hacer tal que:
import Web3 from ‘web3/dist/web3.min’;
Por el problema de la versión de webpack.

Aqui encontraran la misma version que se instala en el video
https://github.com/NoahZinsmeister/web3-react/tree/v6

yo en este punto, tuve que ir al github y descargar el código, porque la diferencia de versiones hace muy complicado la continuación del curso ya que se rompe todo.

si alguno tiene problemas despues de conectar su wallet a la app con la consola indicandoles que web3(provider) no es un metodo valido, solo quitenle los {} que envuelven al import de Web3 en el archivo config/web3/index
😃

Si alguien tiene problemas con con la ejecucion del proyecto agregen la carpeta hooks con todo su contenido

Aquí pueden encontrar el ChainID de diferentes networks
https://chainlist.org/

Mi solución al reto

const useTruncatedAddress = (address) => {
  const truncateRegex = /^(0x[a-zA-Z0-9]{4})[a-zA-Z0-9]+([a-zA-Z0-9]{4})$/;
  const match = address.match(truncateRegex)
  if (!match) return address
  return `${match[1]}...${match[2]}`  
}

export default useTruncatedAddress

Resolviendo el reto:

const shortAddress = (account) => {
  const newAddress = useMemo(
    () => `${account?.substr(0, 5)}...${account?.substr(-4)}`,
    [account]
  );

  return newAddress;
};

agregando el injected se me rompe la app alguien sabe como solucionarlo?

Seria bueno que actualizaran los archivos del curso, muchos no funcionan debido a que hay versiones mas nuevas de los componentes

Curso desactualizado… Si lo seguimos al píe de la letra, las cosas no funcionan igual…

el ID de Goerli es 5

el curso está desactualizado, sería bueno si pudieran actualizarlo. Seguí los pasos al pie de la letra, incluso estoy trabajando con todos los paquetes que están en el package.json pero el proyecto se rompe cuando instalo el
@chakra-ui/icons package, pasé 1 hora tratando de solucionarlo pero nada …

Se me hizo complicado seguir la clase, asi que investigue un poco mas y encontre nuevas librerias que tienen una documentacion mas entendible: wagmi y connectkit

Crack profe

mi codigo.

const useTruncatedAddress = (address) => {
return useMemo(() => {
if (!address) return null;
return ${address.slice(0, 6)}...${address.slice(-4)};
}, [address]);
};

así lo solucione.