@abstract-foundation/web3-react-agw NPM

@abstract-foundation/web3-react-agw

The @abstract-foundation/web3-react-agw package implements a web3-react connector for Abstract Global Wallet (AGW).

Abstract Global Wallet (AGW)

Abstract Global Wallet (AGW) is a cross-application smart contract wallet that users can use to interact with any application built on Abstract, powered by Abstract's native account abstraction.

Installation

Install the connector via NPM:

npm install @abstract-foundation/web3-react-agw

Quick Start

Importing

import { AbstractGlobalWallet } from '@abstract-foundation/web3-react-agw';

Initializing the connector

// connector.tsx
import { initializeConnector } from '@web3-react/core';
import { AbstractGlobalWallet } from '@abstract-foundation/web3-react-agw';

export const [agw, hooks] = initializeConnector<AbstractGlobalWallet>(
  (actions) => new AbstractGlobalWallet({ actions }),
);

Using the connector

import React from 'react';
import { agw, hooks } from './connector';

const { useIsActive } = hooks;

export default function App() {
  const isActive = useIsActive();
  useEffect(() => {
    void agw.connectEagerly().catch(() => {
      console.debug('Failed to connect eagerly to agw');
    });
  }, []);

  const login = () => {
    void agw.activate();
  };

  const logout = () => {
    void agw.deactivate();
  };

  return (
    <div>
      {isActive ? (
        <button onClick={logout}>Disconnect</button>
      ) : (
        <button onClick={login}>Sign in with Abstract</button>
      )}
    </div>
  );
}