@burnt-labs/abstraxion-react-native

A React Native implementation of the Abstraxion authentication system for XION blockchain. This package provides the same functionality as @burnt-labs/abstraxion but is designed to work with React Native and Expo applications.

Features

• Authentication with the XION blockchain network
• Storage strategy using AsyncStorage instead of localStorage
• Redirect handling using Expo WebBrowser instead of browser navigation
• React Native optimized hooks with the exact same interfaces as @burnt-labs/abstraxion

Installation

1npm install @burnt-labs/abstraxion-react-native @react-native-async-storage/async-storage expo-web-browser expo-linking

or

1yarn add @burnt-labs/abstraxion-react-native @react-native-async-storage/async-storage expo-web-browser expo-linking

Usage

Setting up the AbstraxionProvider

You can set up the AbstraxionProvider using a configuration object:

1import React from "react";
2import { AbstraxionProvider } from "@burnt-labs/abstraxion-react-native";
3
4const config = {
5  // Network configuration
6  rpcUrl: "https://rpc.xion-testnet-2.burnt.com:443",
7  restUrl: "https://api.xion-testnet-2.burnt.com:443",
8  gasPrice: "0.001uxion",
9
10  // Optional configurations
11  treasury: "xion13jetl8j9kcgsva86l08kpmy8nsnzysyxs06j4s69c6f7ywu7q36q4k5smc",
12  callbackUrl: "your-app-scheme://",
13};
14
15const App = () => {
16  return (
17    <AbstraxionProvider config={config}>
18      {/* Your app components */}
19    </AbstraxionProvider>
20  );
21};
22
23export default App;

Configuration Options

The config object accepts the following properties:

1interface AbstraxionConfig {
2  // Required network configuration
3  rpcUrl?: string; // RPC endpoint (defaults to testnet)
4  restUrl?: string; // REST API endpoint (defaults to testnet)
5  gasPrice?: string; // Gas price (e.g. "0.025uxion")
6
7  // Optional configurations
8  treasury?: string; // Treasury contract address
9  callbackUrl?: string; // Callback URL after authorization
10}
11
12// Contract authorization can be either a string or an object
13type ContractGrantDescription =
14  | string
15  | {
16      address: string;
17      amounts: SpendLimit[];
18    };
19
20// Token spending limit
21interface SpendLimit {
22  denom: string; // Token denomination
23  amount: string; // Maximum amount
24}

Available Hooks

This package provides the exact same hooks as @burnt-labs/abstraxion:

• useAbstraxionAccount: Returns information about the connected account
• useAbstraxionClient: Provides a CosmWasmClient for read-only blockchain operations
• useAbstraxionSigningClient: Provides a signing client for blockchain transactions
• useAbstraxionContext: Provides access to the complete Abstraxion context

Hook Interfaces

The hooks in this package maintain a similar interface to @burnt-labs/abstraxion, with changes to include login and logout functions returned from the useAbstraxionAccount hook

1// useAbstraxionAccount
2const { data, isConnected, isConnecting, login, logout } =
3  useAbstraxionAccount();
4// data.bech32Address: string - The connected wallet address
5// isConnected: boolean - Whether a wallet is connected
6// isConnecting: boolean - Whether a connection is in progress
7// login: () => Promise<void> - Function to initiate wallet connection
8// logout: () => void - Function to disconnect the wallet
9
10// useAbstraxionClient
11const { client } = useAbstraxionClient();
12// client: CosmWasmClient | undefined - A client for read-only operations
13
14// useAbstraxionSigningClient
15const { client, signArb } = useAbstraxionSigningClient();
16// client: GranteeSignerClient | undefined - A client for signing transactions
17// signArb: ((signerAddress: string, message: string | Uint8Array) => Promise<string>) | undefined
18
19// useAbstraxionContext
20const context = useAbstraxionContext();
21// Full context with all state and methods

Context Provider Props

The AbstraxionProvider accepts the following props:

1interface AbstraxionProviderProps {
2  children: ReactNode;
3  config: {
4    // Network configuration
5    rpcUrl?: string; // RPC endpoint (defaults to testnet)
6    restUrl?: string; // REST API endpoint (defaults to testnet)
7    gasPrice?: string; // Gas price (e.g. "0.025uxion")
8
9    // Optional configurations
10    treasury?: string; // Treasury contract address
11    callbackUrl?: string; // Callback URL after authorization
12  };
13}
14
15// Contract authorization can be either a string or an object
16type ContractGrantDescription =
17  | string
18  | {
19      address: string;
20      amounts: SpendLimit[];
21    };
22
23// Token spending limit
24interface SpendLimit {
25  denom: string; // Token denomination
26  amount: string; // Maximum amount
27}

Deep Linking Configuration

For authentication to work properly, your app should be configured to handle deep links according to Expo/React Native guidelines:

1. For Expo, update your app.json:

1{
2  "expo": {
3    "scheme": "your-app-scheme",
4    "android": {
5      "intentFilters": [
6        {
7          "action": "VIEW",
8          "category": ["DEFAULT", "BROWSABLE"],
9          "data": {
10            "scheme": "your-app-scheme"
11          }
12        }
13      ]
14    }
15  }
16}

2. For bare React Native, follow the platform-specific deep linking setup instructions.

The authentication flow uses Expo's WebBrowser with authentication sessions, which will automatically handle the redirect flow when the user completes authentication.

License

MIT