@ abstract- foundation/agw- react

这个 @abstract-foundation/agw-react 软件包提供反应钩和组件以集成 全球钱包摘要(AGW) 输入您的反应应用程序.

全球钱包摘要(AGW)

全球钱包摘要(AGW) 是一个交叉应用程序 智能合同钱包 用户可以用来与根据“摘要”构建、由“摘要”驱动的任何应用程序互动 本地账户抽象。 。 。 .

安装

通过国家预防机制安装反应整合软件包:

npm install @abstract-foundation/agw-react

快速启动

导入

import { useAbstractClient, useLoginWithAbstract } from '@abstract-foundation/agw-react';

使用 useLoginWithAbstract 钩子

import React from 'react';
import { useLoginWithAbstract } from '@abstract-foundation/agw-react';

export default function App() {
  const { login, logout } = useLoginWithAbstract();

  return (
    <div>
      <button onClick={login}>Connect with Abstract</button>
      <button onClick={logout}>Disconnect</button>
    </div>
  );
}

使用 useAbstractClient 钩子

import React from 'react';
import { useAbstractClient } from '@abstract-foundation/agw-react';

export default function App() {
  const { data: abstractClient, error, isLoading } = useAbstractClient();

  if (isLoading) return <div>Loading Abstract Client...</div>;
  if (error) return <div>Error: {error.message}</div>;

  // Use the abstractClient instance here
  return <div>Abstract Client is ready!</div>;
}

API 参考

• useAbstractClient: Hook 在您的 React 应用程序中创建并访问摘要客户端实例 .
• useLoginWithAbstract: Hook 与"抽象全球钱包"签约并签约用户.
• useGlobalWalletSignerAccount: Hook取回"全球钱包签名人"账户信息.
• useGlobalWalletSignerClient: Hook 访问与"全球钱包签名人"账户相关的钱包客户端.
• useWriteContractSponsored: Hook 执行赞助的合同写作业务.

实例

发送交易

使用 @abstract-foundation/agw-react 发送交易 :

import React from 'react';
import { useAbstractClient } from '@abstract-foundation/agw-react';

export default function SendTransactionButton() {
  const { data: abstractClient } = useAbstractClient();

  const handleSendTransaction = async () => {
    if (!abstractClient) return;

    try {
      const txHash = await abstractClient.sendTransaction({
        to: '0xRecipientAddress',
        value: 1000000000000000000n, // 1 ETH in wei
      });
      console.log('Transaction Hash:', txHash);
    } catch (error) {
      console.error('Error sending transaction:', error);
    }
  };

  return (
    <button onClick={handleSendTransaction} disabled={!abstractClient}>
      Send Transaction
    </button>
  );
}

使用 useWriteContractSponsored

import React from 'react';
import { useWriteContractSponsored } from '@abstract-foundation/agw-react';
import { Abi } from 'viem';

const contractAbi: Abi = [/* Your contract ABI here */];

export default function SponsoredContractWrite() {
  const {
    writeContractSponsored,
    data,
    error,
    isLoading,
    isSuccess,
  } = useWriteContractSponsored();

  const handleWriteContract = () => {
    writeContractSponsored({
      address: '0xYourContractAddress',
      abi: contractAbi,
      functionName: 'yourFunctionName',
      args: ['arg1', 'arg2'],
      paymaster: '0xYourPaymasterAddress',
      paymasterInput: '0x',
    });
  };

  return (
    <div>
      <button onClick={handleWriteContract} disabled={isLoading}>
        {isLoading ? 'Processing...' : 'Execute Sponsored Transaction'}
      </button>
      {isSuccess && <div>Transaction Hash: {data?.hash}</div>}
      {error && <div>Error: {error.message}</div>}
    </div>
  );
}

文档

关于详细文件,请参见本报告附件 抽象全球钱包文档。 。 。 .