[Blockchain] Entrar en el mundo de web3: cómo DApp puede acceder rápidamente al muro

En web3, el muro es un identificador para que ingreses a la cadena de bloques. Los muros que utiliza cada usuario no son casi iguales, por lo que es necesario acceder a más muros. Desde la perspectiva de los usuarios, si no es necesario, no No quiero descargar muro adicional. Entonces, hoy hablaremos sobre cómo DApp puede acceder rápidamente al muro.

1. Basado en wagmi

1.1 Hay muchas conexiones de pared integradas en wagmi , a las que se puede acceder rápidamente

import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
import { LedgerConnector } from 'wagmi/connectors/ledger'
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
import { SafeConnector } from 'wagmi/connectors/safe'

import { createClient, configureChains, mainnet, goerli } from 'wagmi'
import { bsc, bscTestnet } from 'wagmi/chains'
const { chains, provider, webSocketProvider } = configureChains(
    [goerli, mainnet, bscTestnet, bsc, arbitrum],
    [alchemyProvider({ apiKey: AlchemyApiKey }), publicProvider()]
)

export const client = createClient({
    autoConnect: true,
    connectors: [
        new MetaMaskConnector({ chains }),
        new CoinbaseWalletConnector({
            options: {
                appName: 'CoinbaseWallet',
                jsonRpcUrl: 'https://eth-mainnet.alchemyapi.io/v2/yourAlchemyId',
            },
        }),
        new LedgerConnector({
            chains
        }),
        new WalletConnectConnector({
            chains,
            options: {}
        }),
        new SafeConnector({
            chains,
            options: {},
        })
    ],
    provider,
    webSocketProvider
})

 1.2 También hay un método de inyección incorporado en wagmi, al que se puede acceder rápidamente

import { InjectedConnector } from 'wagmi/connectors/injected'

import { createClient, configureChains, mainnet, goerli } from 'wagmi'
import { bsc, bscTestnet } from 'wagmi/chains'
const { chains, provider, webSocketProvider } = configureChains(
    [goerli, mainnet, bscTestnet, bsc, arbitrum],
    [alchemyProvider({ apiKey: AlchemyApiKey }), publicProvider()]
)

export const client = createClient({
    autoConnect: true,
    connectors: [
        // 内置自定义参数
        new InjectedConnector({
            chains,
            options: {
                name: 'BitKeep',
                getProvider: () =>
                    typeof window !== 'undefined' ? window.isBitKeep : undefined,
            },
        })
    ],
    provider,
    webSocketProvider
})

// 内置主流的wall
const getName = (provider: Ethereum) => {
    if (provider.isApexWallet) return 'Apex Wallet'
    if (provider.isAvalanche) return 'Core Wallet'
    if (provider.isBackpack) return 'Backpack'
    if (provider.isBifrost) return 'Bifrost Wallet'
    if (provider.isBitKeep) return 'BitKeep'
    if (provider.isBitski) return 'Bitski'
    if (provider.isBraveWallet) return 'Brave Wallet'
    if (provider.isCoinbaseWallet) return 'Coinbase Wallet'
    if (provider.isDawn) return 'Dawn Wallet'
    if (provider.isExodus) return 'Exodus'
    if (provider.isFrame) return 'Frame'
    if (provider.isFrontier) return 'Frontier Wallet'
    if (provider.isGamestop) return 'GameStop Wallet'
    if (provider.isHyperPay) return 'HyperPay Wallet'
    if (provider.isKuCoinWallet) return 'KuCoin Wallet'
    if (provider.isMathWallet) return 'MathWallet'
    if (provider.isOkxWallet || provider.isOKExWallet) return 'OKX Wallet'
    if (provider.isOneInchIOSWallet || provider.isOneInchAndroidWallet)
      return '1inch Wallet'
    if (provider.isOpera) return 'Opera'
    if (provider.isPhantom) return 'Phantom'
    if (provider.isPortal) return 'Ripio Portal'
    if (provider.isRabby) return 'Rabby'
    if (provider.isRainbow) return 'Rainbow'
    if (provider.isStatus) return 'Status'
    if (provider.isTally) return 'Taho'
    if (provider.isTokenPocket) return 'TokenPocket'
    if (provider.isTokenary) return 'Tokenary'
    if (provider.isTrust || provider.isTrustWallet) return 'Trust Wallet'
    if (provider.isXDEFI) return 'XDEFI Wallet'
    if (provider.isZerion) return 'Zerion'
    if (provider.isMetaMask) return 'MetaMask'
  }

Enlace de referencia: https://wagmi.sh/react/connectors/injected

1.3 wagmi combinado con Web3Modal para acceder al muro

import { MultiWallet, Wallet, EthereumChainId, EthereumNetwork } from '@wagmi/wallet';
import { InjectedConnector } from '@wagmi/connectors/injected';
import Web3Modal from 'web3modal';

// 创建第一个wall实例
const wallet1 = new Wallet({
  chainId: EthereumChainId.MAINNET,
  network: EthereumNetwork.MAINNET,
  provider: new InjectedConnector(),
});

// 创建第二个wall实例
const wallet2 = new Wallet({
  chainId: EthereumChainId.MAINNET,
  network: EthereumNetwork.MAINNET,
  provider: new Web3.providers.HttpProvider('https://mainnet.infura.io/v3/your-project-id'),
});

// 创建多wall实例
const multiWallet = new MultiWallet([wallet1, wallet2]);

// 初始化 Web3Modal
const web3Modal = new Web3Modal({
  cacheProvider: true,
  providerOptions: {
    injected: {
      display: {
        name: 'Wagmi Wallet',
        description: 'Connect to your Wagmi wallet',
      },
      package: '@wagmi/connectors/injected',
      options: {
        network: EthereumChainId.MAINNET,
      },
    },
  },
});

// 连接指定的wall
async function connectWallet(index: number) {
  const provider = await web3Modal.connect();
  await multiWallet.connectWallet(index, provider);
}

// 使用第一个wall实例
await connectWallet(0);
const wallet1Address = await wallet1.getAddress();
console.log(`Wallet 1 address: ${wallet1Address}`);

// 使用第二个wall实例
await connectWallet(1);
const wallet2Address = await wallet2.getAddress();
console.log(`Wallet 2 address: ${wallet2Address}`);

De esta forma, puede configurar múltiples instancias de muros y usar Wagmi SDK y Web3Modal para conectar diferentes proveedores para realizar la función de administración de múltiples muros .

2. Basado en el kit arcoíris

    RainbowKit es una biblioteca JavaScript de código abierto que proporciona algunos métodos convenientes para interactuar con las paredes de Rainbow en Web3 Dapps.

        Rainbow wall es una aplicación de pared móvil basada en Ethereum que admite tokens Ethereum, ERC-20 y otros activos en cadenas compatibles con Ethereum. Rainbow wall también admite aplicaciones descentralizadas en Ethereum, y los usuarios pueden interactuar con estas aplicaciones directamente desde el muro.

RainbowKit proporciona las siguientes características:

• Obtener la dirección del muro del usuario
• Abra Dapp en la pared del arco iris
• Enviar transacción de token ERC-20
• Enviar una transacción de Ethereum
• Obtener el saldo de activos en el muro del usuario

Con RainbowKit, puede conectar fácilmente su Web3 Dapp a la pared de Rainbow y permitir que los usuarios interactúen con su Dapp usando activos en la pared de Rainbow.

El código fuente de RainbowKit está disponible en GitHub, y puede consultar su documentación para obtener ejemplos y uso detallado.

Dirección de referencia: https://www.rainbowkit.com/docs/custom-wallets

El siguiente es el efecto de pared basado en el acceso wagmi , y la lista puede ser desarrollada por usted mismo (si existe la pared en el complemento , aparecerá la pared correspondiente , si no existe, salte a la página correspondiente para descargar )

const getUrlByType = id => {
      const obj = {
          metaMask: 'https://metamask.io/download/',
          safe: 'https://www.safepal.com/download'
      }
      return (id && obj[id]) || 'did'
  }

  // 点击wall的方法
  const handleConnectAsync = connector => {
      if (!connector.connector.ready) {
          window.open(getUrlByType(connector.connector.id), '_target')
          return
      }
      const signToLogin = async () => {
          dispatch('setVisibleWalletList', '0')

          const { address } = getAccount()
          const msg = `Welcome to Doaverse!`
          const signMessage = await getSigMessageService(msg)
          if (!signMessage) return
          console.log('signMessage...', signMessage)
          await loginWalletCb(msg, signMessage)
          dispatch('setIsLogout', '0')
          emitter.emit('header:loginSuccess')
      }
      if (isConnected) {
          // wall端记录状态已连接，直接请求签名
          signToLogin()
      }
      connectAsync(connector).then(signToLogin)
  }

3. El proceso de DApp accediendo al muro

Para conectar su Dapp a la pared Web3, debe completar los siguientes pasos:

1. Instale la biblioteca Ethers.js: Ethers.js es una biblioteca JavaScript que proporciona una API para interactuar con la red Ethereum. Puede instalarlo a través de npm o importarlo usando una etiqueta <script> en su página HTML.

2. Conéctese al nodo Ethereum: en Ethers.js, la conexión al nodo Ethereum se realiza creando un objeto Proveedor. Puede usar la clase ethers.providers.JsonRpcProvider para conectarse a los nodos de Ethereum. Debe especificar la dirección HTTP o WebSocket de un nodo Ethereum y la ID de red que se utilizará.

// 连接到以太坊主网
const provider = new ethers.providers.JsonRpcProvider('https://mainnet.infura.io/v3/YOUR-PROJECT-ID', 1);

3. Obtenga la dirección del muro del usuario: para obtener la dirección del muro del usuario, puede usar el método provider.getSigner() para obtener un objeto Firmante y luego usar el método signer.getAddress() para obtener la dirección del muro del usuario.

const signer = provider.getSigner();
const userAddress = await signer.getAddress();

4. Envíe una transacción: para enviar una transacción a la red Ethereum, debe crear un objeto Transacción y firmarlo con la dirección de pared del usuario. A continuación, puede enviar la transacción a la red utilizando el método provider.sendTransaction().

const tx = {
  from: userAddress,
  to: '0x123...',
  value: ethers.utils.parseEther('1'),
  gasLimit: 21000,
  gasPrice: ethers.utils.parseUnits('10', 'gwei'),
  nonce: await provider.getTransactionCount(userAddress)
};

const signedTx = await signer.signTransaction(tx);

provider.sendTransaction(signedTx)
  .then(receipt => {
    console.log('Transaction receipt:', receipt);
  });

Lo anterior es un proceso simple de Dapp accediendo al muro Web3.

Documento de referencia: https://learnblockchain.cn/ethers_v5/