Intégration de RainbowKit à Bridge Kit pour les transferts USDC inter-chaînes

Étant donné que les portefeuilles basés sur un navigateur font partie des types de portefeuilles cryptographiques les plus courants, la présence d'un bouton « Connecter le portefeuille » sur une application est de plus en plus attendue par les utilisateurs. À mesure que l'écosystème se développe, il y a de plus en plus de portefeuilles concurrents sur le marché, et il n'est pas rare que plusieurs portefeuilles soient installés et actifs en même temps.

Même si nous avons EIP-1193 : API JavaScript du fournisseur Ethereum qui normalise un objet Provider et spécifie ses comportements attendus, l'écosystème fragmenté des portefeuilles a rendu très difficile la connexion des développeurs d'applications aux portefeuilles de leurs utilisateurs. Heureusement, nous avons des bibliothèques comme wagmi qui permettent de résumer la logique du portefeuille, du fournisseur et du réseau pour une expérience de développement plus pratique.

Dans ce tutoriel, nous allons intégrer Kit arc-en-ciel, qui est une bibliothèque React construite sur wagmi et viem qui nous permet d'ajouter un composant de connexion au portefeuille à notre application de pontage, alimentée par Kit de pont.

Transferts inter-chaînes avec Bridge Kit

Bridge Kit est alimenté par CCTP sous le capot, et résume une grande partie de la complexité de la mise en œuvre du CCTP, en particulier compte tenu du grand nombre de passerelles traversant de nombreuses chaînes. Voici un exemple d'appel de méthode clé :

// Transfer 10.00 USDC from Arc Testnet to Solana Devnet
const result = await kit.bridge({
  from: { adapter: viemAdapter, chain: "Arc_Testnet" },
  to: { adapter: solanaAdapter, chain: "Solana_Devnet" },
  amount: "10.00",
});

Bridge Kit utilise des adaptateurs pour gérer les opérations de pontage spécifiques à la blockchain pour un réseau particulier et est entièrement compatible avec viem ou les éthers pour les blockchains compatibles EVM et Solana.

Pour récupérer la liste complète des chaînes prises en charge, nous pouvons utiliser le GetSupportedChains () méthode, qui renvoie un tableau d'objets blockchain, chacun contenant des informations clés sur la chaîne pouvant être utilisées dans l'interface utilisateur de notre application.

{
  "type": "evm",
  "chain": "Arc_Testnet",
  "name": "Arc Testnet",
  "title": "ArcTestnet",
  "nativeCurrency": {
    "name": "Arc",
    "symbol": "Arc",
    "decimals": 18
  },
  "chainId": 5042002,
  "isTestnet": true,
  "explorerUrl": "https://testnet.arcscan.app/tx/{hash}",
  "rpcEndpoints": [
    "https://rpc.testnet.arc.network/"
  ],
  "eurcAddress": "0x89B50855Aa3bE2F677cD6303Cec089B5F319D72a",
  "usdcAddress": "0x3600000000000000000000000000000000000000",
  "cctp": {
    "domain": 26,
    "contracts": {
      "v2": {
        "type": "split",
        "tokenMessenger": "0x8FE6B999Dc680CcFDD5Bf7EB0974218be2542DAA",
        "messageTransmitter": "0xE737e5cEBEEBa77EFE34D4aa090756590b1CE275",
        "confirmations": 1,
        "fastConfirmations": 1
      }
    }
  },
  "kitContracts": {
    "bridge": "0xC5567a5E3370d4DBfB0540025078e283e36A363d"
  }
}

Dans notre application React, nous utilisons un hook personnalisé uniquement pour la fonctionnalité de pontage en initialisant le SDK, puis en appelant pont méthode dessus, en transmettant les paramètres nécessaires fournis par l'interface utilisateur.

import { BridgeKit } from "@circle-fin/bridge-kit";

const kit = new BridgeKit();
const result = await kit.bridge({
  from: { adapter: params.fromAdapter, chain: params.fromChain as any },
  to: { adapter: params.toAdapter, chain: params.toChain as any },
  amount: params.amount,
});

Ajouter le bouton Connect Wallet

Assurez-vous de suivre les instructions de Documentation de RainbowKit pour installer et configurer RainbowKit dans le projet. Il dépend de Wagmi, viem et Requête TANstack. L'application doit être encapsulée dans les fournisseurs nécessaires pour que le composant ConnectButton fonctionne.

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const App = () => {
  return <ConnectButton />;
};

Le composant est livré avec un bouton qui déclenche un modal qui détecte les portefeuilles disponibles auxquels se connecter et connecte l'application au portefeuille choisi par l'utilisateur.

Création de l'objet adaptateur avec wagmi

Une fois le portefeuille de l'utilisateur connecté à notre application, wagmi nous permet de récupérer les informations de connexion du portefeuille et d'extraire le fournisseur EIP-1193 afin de créer un objet adaptateur que Bridge Kit reconnaîtra et utilisera pour le transfert.

import { useConnectorClient } from "wagmi";
import { createAdapterFromProvider } from "@circle-fin/adapter-viem-v2";

// Get the connected wallet's provider from wagmi
const { data: client } = useConnectorClient();
const provider = client?.transport?.value?.provider;

// Use that provider to create the adapter
const adapter = await createAdapterFromProvider({ provider });
return adapter;

Selon la structure de l'application, cette logique peut être insérée dans un hook personnalisé distinct ou implémentée dans le cadre d'un composant. Si cette logique d'adaptateur est implémentée en tant que hook personnalisé, nous pouvons l'utiliser dans le composant concerné lorsque le hook de pont est appelé.

Assembler le tout

Nous utiliserions state pour capturer les entrées de l'utilisateur pour la chaîne source, la chaîne de destination et la quantité à transférer qu'il a choisies, et nous appellerions le bridge hook avec l'adaptateur et les entrées utilisateur.

const { evmAdapter } = useEvmAdapter();
const [sourceChain, setSourceChain] = useState<SupportedChain>("Arc_Testnet");
const [destinationChain, setDestinationChain] = useState<SupportedChain>("");
const [amount, setAmount] = useState<string>("0");

const { bridge, isLoading, error, clear } = useBridge();

const response = await bridge({
  fromChain: sourceChain,
  toChain: destinationChain,
  amount,
  fromAdapter: evmAdapter,
  toAdapter: evmAdapter,
});

L'objet de réponse contient de nombreuses informations sur l'ensemble de la transaction CCTP, notamment les détails de la chaîne, les adresses des contrats et les détails de chaque étape, qui peuvent être utilisées pour créer des interfaces utilisateur informatives pour l'utilisateur final. Voici une version abrégée de la réponse :

{
  "state": "success",
  "amount": "4000000",
  "token": "USDC",
  "source": {
    "address": "0xf6aa88ee4b7b10abbffbfa7d85bcffef7eab6fe4",
    "chain": {...}
  },
  "destination": {
    "address": "0xf6aa88ee4b7b10abbffbfa7d85bcffef7eab6fe4",
    "chain": {...}
  },
  "steps": [
    {
      "name": "approve",
      "state": "success",
      "txHash": "0x0efe59bf6b418484963d54a46d7cf7314cae906c3ced6d1ed4ab74aacddb062b",
      "data": {
        "txHash": "0x0efe59bf6b418484963d54a46d7cf7314cae906c3ced6d1ed4ab74aacddb062b",
        "status": "success",
        "cumulativeGasUsed": "222484",
        "gasUsed": "55684",
        "blockNumber": "8359932",
        "blockHash": "0xfb96409a5cf4f370196911c5b79daaf304b4744b7ab44362b0e92f75ad456727",
        "transactionIndex": 6,
        "effectiveGasPrice": "660000000000"
      },
      "explorerUrl": "https://testnet.arcscan.app/tx/0x0efe59bf6b418484963d54a46d7cf7314cae906c3ced6d1ed4ab74aacddb062b"
    },
    {
      "name": "burn",
      ...
    },
    {
      "name": "fetchAttestation",
      ...
    },
    {
      "name": "mint",
     ...
    }
  ],
  "config": {
    "transferSpeed": "FAST"
  },
  "provider": "CCTPV2BridgingProvider"
}

Emballer

Nous avons créé un exemple d'application qui intègre les points clés abordés dans ce didacticiel pour relier l'USDC à tous les chaînes prenant en charge le CCTP. N'hésitez pas à cloner le dépôt GitHub et jouez avec l'application pour voir comment elle fonctionne.

La combinaison de RainbowKit pour la connexion au portefeuille et de Bridge Kit pour les transferts USDC inter-chaînes nous permet de créer une expérience utilisateur plus fluide avec moins de lignes de code. Consultez Kit de pont pour commencer à intégrer les transferts inter-chaînes dans votre propre application.