Fala Pessoal, bora falar sobre uma lib web3 para React que facilita muito nossa vida.

[Wagmi](https://wagmi.sh/) contém tudo que você precisa para começar a trabalhar com Ethereum através de hooks.

O [Wagmi](https://wagmi.sh/) facilita "Conectar carteira", exibir ENS(Ethereum names server) e informações de saldo, assinar mensagens, interagir com contratos e muito mais — tudo com armazenamento em cache, desduplicação de solicitações e persistência.

Vamos usar o [Wagmi](https://wagmi.sh/) React, o [Wagmi](https://wagmi.sh/) tem o módulo core e também e uma [CLI](https://wagmi.sh/examples/connect-wallet).

***S﻿e quiser ver um exemplo você vá até [final deste artigo](#wagmi-exemplo)***

Crie um projeto React com o [Vite](https://vitejs.dev/), [Next.js](https://nextjs.org/) ou da forma que você mais gosta de trabalhar com React, após o projeto criado vamos a instalação da lib Wagmi.

Neste exemplo vamos usar os hooks [userConnect](https://wagmi.sh/react/hooks/useConnect), [useAccount](https://wagmi.sh/react/hooks/useAccount) e [useDisconnect](https://wagmi.sh/react/hooks/useDisconnect)

Instale as dependências abaixo no seu projeto React

```shell
yarn add wagmi ethers@^5
```

Primeiro vamos criar uma configuração para usarmos no Wagmi provider. Na configuração do provider resumidamente temos os provedores web3 e os conectores.

Provedor é uma forma de se conectar a um Blockchain, parecido como você usa o axios ou fetch do javascript para conectar-se com um servidor/API. Como exemplo de provedor temos [Alchemy](https://alchemyapi.io/), [Infura](https://www.infura.io/) ou mesmo uma wallet pode ser um provedor.

Conector são as múltiplas wallets que o usuário pode se conectar ao seu dApp.

### Provider

```javascript
import { WagmiConfig, createClient, configureChains, mainnet } from "wagmi";

import { alchemyProvider } from "wagmi/dist/providers/alchemy";
import { publicProvider } from "wagmi/dist/providers/public";

import { CoinbaseWalletConnector } from "wagmi/dist/connectors/coinbaseWallet";
import { InjectedConnector } from "wagmi/dist/connectors/injected";
import { MetaMaskConnector } from "wagmi/dist/connectors/metaMask";
import { WalletConnectConnector } from "wagmi/dist/connectors/walletConnect";
import Profile from "./Profile";

// Configuração do chains e provider com Alchemy provider.
// os providers web3 mais famosos são Alchemy (alchemy.com) e Infura (infura.io)
const { chains, provider, webSocketProvider } = configureChains(
  [mainnet],
  [alchemyProvider({ apiKey: "yourAlchemyApiKey" }), publicProvider()]
);

// Configuração do cliente
const client = createClient({
  autoConnect: true,
  connectors: [
    new MetaMaskConnector({ chains }),
    new CoinbaseWalletConnector({
      chains,
      options: {
        appName: "wagmi"
      }
    }),
    new WalletConnectConnector({
      chains,
      options: {
        qrcode: true
      }
    }),
    new InjectedConnector({
      chains,
      options: {
        name: "Injected",
        shimDisconnect: true
      }
    })
  ],
  provider,
  webSocketProvider
});

// Vamos usar o client para o provider do Wagmi
export default function App() {
  return (
    <WagmiConfig client={client}>
      <Profile />
    </WagmiConfig>
  );
}
```

### U﻿sando Hooks

Após a configuração do Wagmi provider, vamos fazer a conexão com as wallets e mostrar informação do usuário conectado utilizando os hooks.

```javascript
import {
  useAccount,
  useConnect,
  useDisconnect,
  useEnsAvatar,
  useEnsName
} from "wagmi";

export default function Profile() {
  const { address, connector, isConnected } = useAccount();
  const { data: ensAvatar } = useEnsAvatar({ address });
  const { data: ensName } = useEnsName({ address });
  const {
    connect,
    connectors,
    error,
    isLoading,
    pendingConnector
  } = useConnect();
  const { disconnect } = useDisconnect();

  if (isConnected) {
    return (
      <div>
        <img src={ensAvatar} alt="ENS Avatar" />
        <div>{ensName ? `${ensName} (${address})` : address}</div>
        <div>Connected to {connector.name}</div>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    );
  }

  return (
    <div>
      {connectors.map((connector) => (
        <button
          disabled={!connector.ready}
          key={connector.id}
          onClick={() => connect({ connector })}
        >
          {connector.name}
          {!connector.ready && " (unsupported)"}
          {isLoading &&
            connector.id === pendingConnector?.id &&
            " (connecting)"}
        </button>
      ))}

      {error && <div>{error.message}</div>}
    </div>
  );
}
```

<h3 id="wagmi-exemplo">Exemplo</h3>

O exemplo usa um provide público, o que pode não funcionar, use um provider como Alchemy.

<iframe src="https://codesandbox.io/embed/react-wagmi-hook-c9x9jg?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="React-Wagmi-hook"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

Existem vários hooks interessantes, além do poder customização de uma aplicação web3.

Chegou até aqui, compartilha e dá um saca no meu canal no [Youtube NFTChoose](https://www.youtube.com/@nftchoose).

Hooks web3 para React que facilita muito nossa vida.

Wagmi Hooks Web3 para React

### V﻿eja na tabela abaixo os termos web3 de forma simplificada.

E﻿sse post foi inspirado em um post do [LinkedIn](https://www.linkedin.com/posts/conradodesa_os-jarg%C3%B5es-da-web3-e-seus-respectivos-em-activity-7021110015155445760-rouN?utm_source=share&utm_medium=member_desktop)

| **Blockchain**      | Banco de dados público que garante segurança das informações.                        |
| ------------------- | ------------------------------------------------------------------------------------ |
| **Node(nós)**       | Servidores que validam blocos de informações.                                        |
| **Hot Wallet**      | Conta digital na blockchain armazenada na web.                                       |
| **Cold Wallet**     | Conta digital blockchain armazenada em um dispositivo físico não conectado à web.    |
| **Private Key**     | Senha da sua conta no blockchain.                                                    |
| **Tokenization**    | Digitalização de ativos físicos ou reais.                                            |
| **Miners**          | Pessoas que rodam servidores validam transações e ganham moedas.                     |
| **Stackers**        | Pessoas que usam suas moedas para validar transações ou investir e ganham moedas.    |
| **Stackers**        | Pessoas que usam suas moedas para validar transações ou investir e ganham moedas.    |
| **Oracle**          | Provedor de informações que não estão no blockchain para os contratos utilizarem.    |
| **Smart contract**  | Programas que rodam no blockchain e podem interagir com outros contratos ou apps.    |
| **dApps**           | Apps que utilizam blockchain como fonte de informação e descentralização.            |
| **NFT**             | Certificado armazenado no blockchain que pode ser transferido.                       |
| **Public Key**      | Seu endereço único é público, tipo um email.                                         |
| **Airdrop**         | emissão de certificado ou moeda grátis.                                              |
| **Gas**             | Custo para efetuar uma transação.                                                    |
| **Gas Price**       | Valor de um gas.                                                                     |
| **Test Network**    | Blockchain de teste online sem custo.                                                |
| **Mainnet**         | Blockchain de produção, vacilou gasta grana.                                         |
| **DAOs**            | Comunidades automatizadas sem um chefe, tudo decidido a base da quantidade de votos. |
| **DEX**             | Corretora de valor sem um dono onde qualquer um pode comprar/trocar moedas.          |
| **Owner/ownership** | Dono de ativos como moedas, contratos, certificados(NFT).                            |
| **Layer 1**         | Blockchain Principal tipo o Ethereum.                                                |
| **Layer 2**         | Blockchain derivada de outro, tipo a Polygon que deriva do ethereum.                 |



É ﻿um post simples para ajudar no entendimento dos termos web3 trazendo um significado simples.

A﻿proveita para da uma olhada no meu canal do [NFT Choose](https://www.youtube.com/@nftchoose)

Sabe os termos web3 que estão na moda e você não entende bem? Nesse post eu explico de forma fácil

Entenda os termos web3 de forma simples

***Estou de volta com mais um post da serie dicas rápidas de Javascript(JS Quick Tips).***

Vou falar sobre 4 não tão novos métodos assim.

## 1. startsWith 

O startsWith é método que valida se uma string inicia com um determinado valor.

### Sintaxe

starts(inicia)With(Com)
```javascript
str.startsWith(searchString, [position])
```
**searchString:** caracteres a serem procurados, **position(opcional):** posição que iniciará a pesquisa(searchString)

### Exemplo

```javascript
const description = 'Javascript é cool, Frameworks são bons se você foca mais no JS do que no Framework.'

console.log(description.startsWith('Javascript é')) // true

console.log(description.startsWith('Frameworks são')) // false console.log(description.startsWith('é cool', 11)) // true 'Javascript ' são 11 posições devido ao espaço que também é um caracter.
```
## 2. endsWith 

Basicamente é método faz o oposto do método starsWith verifica se uma string termina com um determinado valor.

### Sintaxe

```javascript
str.endsWith(stringSendoBuscada, [tamanho])
```
Atenção a opção **tamanho(opcional):** se informada substitui o tamanho da string(texto) pesquisada.

### Exemplo

```javascript 
const description = 'Javascript é cool, Frameworks são bons se você foca mais no JS do que no Framework.'

console.log(description.endsWith('no Framework.')) // true
console.log(description.endsWith('foca mais no JS.')) // false console.log(description.endsWith('Frameworks são bons', 38)) // true esse 38 é length do texto até a palavra 'bons'
```
## 3. Repeat 

O método **repeat()** retorna uma nova string com determinado número de copias concatenadas.

### Sintaxe

```javascript
str.repeat(count);
```

O parâmetro **count** deve ser um valor inteiro que indica qual número de repetições, se for passado um número negativo -1 será apresentado um RangeError.

### Exemplo

```javascript
const study = 'Vou estudar ';

console.log(study.repeat(-1)) // RangeError Invalid count value 
console.log(study.repeat(0)) // ''console.log(study.repeat(2)) // 'Vou estudar Vou estudar Vou estudar'
console.log(study.repeat(2.5)) // converte para inteiro
console.log(study.repeat(1/0)) // RangeError Invalid count value
console.log(study.repeat(4/2)) // 'Vou estudar Vou estudar '
```

## 3. Include 

Com método **include()** você faz uma busca em uma string para saber se a string tem determinado valor retornando ` true ` ou ` false `.

### Sintaxe

```javascript
str.includes(searchString[, position])
```

**position(opcional):** índice onde começar a busca.

### Exemplo

```javascript

const anyPhrase = 'Sempre tenha foco, cumpra suas metas para ter mais tempo para sua vida particular.'

console.log(anyPhrase.includes('cumpra suas metas')) // true

console.log(anyPhrase.includes('achei o texto')) // false

console.log(anyPhrase.includes('cumpra suas metas', 1)) //true

console.log(anyPhrase.includes('Sempre tenha foco', 1)) // false
```
São esses 4 métodos simples que podem ser úteis, você sabendo utilizar. Deixa no comentário o que tá achando dos posts.

## Bônus

Talvez você não saiba, mais String são iterable(iteráveis), ou seja, você pode usar o ```for of``` spread operator ```...string```

### Exemplo

```javascript
const myStringIterable = 'Eu sou iterável'

for(chart of myStringIterable) {
 console.log(chat) 
// 'E' 'u' ' ' 's' 'o' 'u' ' ' 'i'  't' 'e' 'r' 'á' 'v' 'e' 'l'
}

const myStringIterableArray = [...myStringIterable]

console.log(myStringIterableArray)
/* testa no teu inspetor de elemento vai mostrar um array de 39 posições, que não vou escrever aqui por já escrevi de mais nesse post \0/.*/
```
### Nota

Esse post foi tirado do nosso amado developer.mozilla e outros blogs.
Deixa teu comentário para me ajudar a saber se foi relevante esse post ou não.


Conheça os novos métodos de String que são úteis para trabalhar no dia a dia.

4 Métodos úteis do Objeto String no JS

Para você que quer saber já de cara o que é react native doctor, ele é um comando utilizado para verificar como está seu ambiente de desenvolvimento.

```javascript
react-native doctor
```

O doctor surgiu de pedidos da comunidade do React, mais de 20 pull request e ajuda de 6 colaboradores. Viva a comunidade do React!

### Sim, Como funciona pai?

Ele faz uma analise do seu ambiente de desenvolvimento para encontrar problemas em seu ambiente de **DEV** dando a opção de corrigi-los automaticamente.

 ***Sua interface é inspirada no Jest, veja como ele exibe os outputs:*** 

![React Native Doctor](/assets/img/screen-shot-2023-02-22-at-20.33.09.png "Comando React Native doctor em ação")

Se não for possível corrigir automaticamente o `react-native doctor` exibirá uma mensagem e um link útil explicando como corrigi-lo manualmente.

![explicando como corrigi-lo manualmente.](/assets/img/react-doctor-como-resolver.png)

O comando `react-native doctor` está disponível a partir da versão 0.62. Aí você faz estou usando uma versão inferior :( calma jovem você pode utilizar-lo sem atualizar sua versão do RN com o seguinte comando:

```
npx @react-native-community/cli doctor
```

O React Native `doctor` suporta a maioria das bibliotecas e software utilizado no ecossistema do RN, como CocoaPods, Xcode e Android SDK.

Se você não quer testar agora, veja esse vídeo rápido do `react-native doctor` em ação.

<video style="max-width: 700px" src="https://facebook.github.io/react-native/img/homepage/DoctorCommand.mp4
" type="video/mp4" controls />

Segue um checklist do que o Doctor verificar e suporta atualmente.

Para o sistema no geral ele checa:

* Node.js (>= 8.3)
* yarn (>= 1.10)
* npm (>= 4)
* Watchman (>= 4)

Para android ele checa:

* Android SDK (>= 26)
* Android NDK (>= 19)
* `ANDROID_HOME`, variável de ambiente que é exigida pela configuração do SDK Android.

Para IOS ele checa:

* Xcode (>= 10)
* CocoaPods, ferramenta de gerenciamento de dependência de biblioteca para aplicativos iOS.
* ios-deploy (opcional), biblioteca usada internamente pela CLI para instalar aplicativos em um dispositivo iOS físico.

Fiz esse post inspirado no post React Native Doctor do site oficial do React Native. Segue o link do short post feito por eles explicando o comando `doctor`.

[Doc and blog React Native - Link](https://facebook.github.io/react-native/blog/2019/11/18/react-native-doctor)

Verifique se seu ambiente está com algum problema

Você já utilizou o React Native Doctor?

***Estou começando uma serie de dicas rápidas de JavaScript(JS Quick Tips)***

Sabe em entrevista quando te perguntam sobre alguns métodos de array no JS, você utiliza esses métodos, mais não sabe explicar?

## Segue abaixo possíveis respostas.
Nosso Array de exemplo:
```javascript
const users = [
  {
    id: 1,
    name: 'Jeftar Mascarenhas',
    age: 33,
    role: 'Developer',
    roleId: 2
  },
  {
    id: 2,
    name: 'Bores Jonson',
    age: 23,
    role: 'UI Design',
    roleId: 1
  },
  {
    id: 3,
    name: 'Arthur Davis',
    age: 20,
    role: 'Developer',
    roleId: 2
  },
]
```
## Map
Se você tem uma matriz de array e quer transformar cada um dos itens.
O resultado será uma nova matriz com o mesmo tamanho.

```javascript
const users = [...]

const map = users.map(item => ({
  id: item.id,
  roleId: item.roleId,
  role: item.role,
}))

/*
  result
  [
    {id: 1, roleId: 2, role: "Developer"},
    {id: 2, roleId: 1, role: "UI Design"},
    {id: 3, roleId: 2, role: "Developer"},
  ]
*/
```
## Filter
Se você tem um array e quer filtrar terminados items.

O resultado é uma nova matriz com os mesmos itens, mais com alguns excluídos, porem comprimento será o mesmo(se um nenhum valor for omitido) ou menor que original.

Dependendo da condição pode vir um array vazio.

```javascript
const users = [...]

const filter = users.filter(item => item.roleId === 1)

/*
  result
  [
    {id: 2, roleId: 1, role: "UI Design"},
  ]
*/
```

### Reduce

Você tem uma matriz de itens e deja calcular algum valor novo inteirando cada item.

O resultado poder ser qualquer coisa, outra matriz, um novo objeto, um valor booleano...
```javascript
const reduce = users.reduce((acumulator, current, idx) => {
  acumulator.employeeTypes[idx] = { id: current.roleId, name: current.role }
  return
}, {
  employeeTypes: []
})

/*
  result
  {
    employeeTypes: [
      {id: 1, name: "Developer"},
      {id: 2, name: "UI Design"},
      {id: 2, name: "Developer"},
    ]
  }
*/
```

É isso, dicas rápidas para ajudar a quem precisa.


Aprenda de forma simples a utilizar e responder esses métodos

JeffMascarenhas

Blog

Wagmi Hooks Web3 para React

Entenda os termos web3 de forma simples

4 Métodos úteis do Objeto String no JS

Você já utilizou o React Native Doctor?

Entendendo Map, Filter e Reduce de forma simples