### Run Development Server Source: https://github.com/burnt-labs/xion.js/blob/main/apps/demo-app/README.md Starts the development server for the Xion.js project. Open http://localhost:3001 in your browser to view the application. Changes to src/app/page.tsx will auto-update. ```bash yarn dev ``` -------------------------------- ### Create API Routes Source: https://github.com/burnt-labs/xion.js/blob/main/apps/demo-app/README.md Demonstrates how to create API routes in a Next.js application. API routes are placed in the 'api/' directory within the 'app/' directory. Subfolders map to specific endpoints. ```typescript // Example: src/app/api/hello/route.ts export async function GET(request: Request) { return new Response('Hello, Next.js!') } ``` -------------------------------- ### Tailwind CSS Configuration Example Source: https://github.com/burnt-labs/xion.js/blob/main/README.md Example configuration for tailwind.config.js to include packages in a monorepo, ensuring proper CSS generation when consuming UI components directly from source. ```javascript { content: [ // app content `src/**/*.{js,ts,jsx,tsx}`, // include packages if not transpiling "../../packages/**/*.{js,ts,jsx,tsx}" ] } ``` -------------------------------- ### Install Abstraxion.js Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion/README.md Installs the abstraxion library using npm. This is the first step to integrating account abstraction into your XION chain project. ```bash npm i @burnt-labs/abstraxion ``` -------------------------------- ### Install @burnt-labs/abstraxion-react-native Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion-react-native/README.md Installs the @burnt-labs/abstraxion-react-native package along with necessary dependencies for React Native and Expo applications using either npm or yarn. ```sh npm install @burnt-labs/abstraxion-react-native @react-native-async-storage/async-storage expo-web-browser expo-linking ``` ```sh yarn add @burnt-labs/abstraxion-react-native @react-native-async-storage/async-storage expo-web-browser expo-linking ``` -------------------------------- ### AbstraxionProvider Setup Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion/README.md Wraps the application with AbstraxionProvider, configuring it with either legacy or treasury contract details. This enables account abstraction functionalities throughout the app. ```jsx "use client"; import "./globals.css"; import { Inter } from "next/font/google"; import { AbstraxionProvider } from "@burnt-labs/abstraxion"; import "@burnt-labs/abstraxion/dist/index.css"; const inter = Inter({ subsets: ["latin"] }); // Example XION seat contract const seatContractAddress = "xion1z70cvc08qv5764zeg3dykcyymj5z6nu4sqr7x8vl4zjef2gyp69s9mmdka"; // Legacy config with individual params for stake, bank and contracts const legacyConfig = { contracts: [ // Usually, you would have a list of different contracts here seatContractAddress, { address: seatContractAddress, amounts: [{ denom: "uxion", amount: "1000000" }], }, ], stake: true, bank: [ { denom: "uxion", amount: "1000000", }, ], // Optional params to activate mainnet config // rpcUrl: "https://rpc.xion-mainnet-1.burnt.com:443", // restUrl: "https://api.xion-mainnet-1.burnt.com:443", }; // New treasury contract config const treasuryConfig = { treasury: "xion17ah4x9te3sttpy2vj5x6hv4xvc0td526nu0msf7mt3kydqj4qs2s9jhe90", // Example XION treasury contract // Optional params to activate mainnet config // rpcUrl: "https://rpc.xion-mainnet-1.burnt.com:443", // restUrl: "https://api.xion-mainnet-1.burnt.com:443", }; export default function RootLayout({ children, }: { children: React.ReactNode }): JSX.Element { return ( {children} ); } ``` -------------------------------- ### AbstraxionProvider Setup Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion-react-native/README.md Demonstrates how to set up the AbstraxionProvider in a React Native application with network and optional configurations. ```tsx import React from "react"; import { AbstraxionProvider } from "@burnt-labs/abstraxion-react-native"; const config = { // Network configuration rpcUrl: "https://rpc.xion-testnet-2.burnt.com:443", restUrl: "https://api.xion-testnet-2.burnt.com:443", gasPrice: "0.001uxion", // Optional configurations treasury: "xion13jetl8j9kcgsva86l08kpmy8nsnzysyxs06j4s69c6f7ywu7q36q4k5smc", callbackUrl: "your-app-scheme://", }; const App = () => { return ( {/* Your app components */} ); }; export default App; ``` -------------------------------- ### Abstraxion Hooks Usage Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion/README.md Demonstrates the usage of custom hooks provided by the abstraxion library to access account information and the signing client. ```javascript const { data: account } = useAbstraxionAccount(); const { client } = useAbstraxionSigningClient(); ``` -------------------------------- ### useAbstraxionSigningClient Hook Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion-react-native/README.md Explains the `useAbstraxionSigningClient` hook, offering a signing client for transaction operations and a `signArb` function. ```typescript // useAbstraxionSigningClient const { client, signArb } = useAbstraxionSigningClient(); // client: GranteeSignerClient | undefined - A client for signing transactions // signArb: ((signerAddress: string, message: string | Uint8Array) => Promise) | undefined ``` -------------------------------- ### useAbstraxionClient Hook Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion-react-native/README.md Describes the `useAbstraxionClient` hook, which provides a CosmWasmClient for performing read-only operations on the blockchain. ```typescript // useAbstraxionClient const { client } = useAbstraxionClient(); // client: CosmWasmClient | undefined - A client for read-only operations ``` -------------------------------- ### useAbstraxionContext Hook Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion-react-native/README.md Details the `useAbstraxionContext` hook, which grants access to the complete Abstraxion context, including all state and methods. ```typescript // useAbstraxionContext const context = useAbstraxionContext(); // Full context with all state and methods ``` -------------------------------- ### useAbstraxionAccount Hook Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion-react-native/README.md Details the interface for the `useAbstraxionAccount` hook, providing account information, connection status, and login/logout functions. ```typescript // useAbstraxionAccount const { data, isConnected, isConnecting, login, logout } = useAbstraxionAccount(); // data.bech32Address: string - The connected wallet address // isConnected: boolean - Whether a wallet is connected // isConnecting: boolean - Whether a connection is in progress // login: () => Promise - Function to initiate wallet connection // logout: () => void - Function to disconnect the wallet ``` -------------------------------- ### Abstraxion Modal Integration Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion/README.md Integrates the Abstraxion modal into a React component, allowing users to trigger it via a button click. Manages the modal's open/closed state. ```jsx "use client"; import { Abstraxion } from "abstraxion"; import { useState } from "react"; export default function Home() { const [isOpen, setIsOpen] = useState(false); return (

setIsOpen(false)} isOpen={isOpen} />

); } ``` -------------------------------- ### AbstraxionConfig Interface Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion-react-native/README.md Defines the TypeScript interface for the Abstraxion configuration object, including network details and optional parameters. ```typescript interface AbstraxionConfig { // Required network configuration rpcUrl?: string; // RPC endpoint (defaults to testnet) restUrl?: string; // REST API endpoint (defaults to testnet) gasPrice?: string; // Gas price (e.g. "0.025uxion") // Optional configurations treasury?: string; // Treasury contract address callbackUrl?: string; // Callback URL after authorization } // Contract authorization can be either a string or an object type ContractGrantDescription = | string | { address: string; amounts: SpendLimit[]; }; // Token spending limit interface SpendLimit { denom: string; // Token denomination amount: string; // Maximum amount } ``` -------------------------------- ### AbstraxionProviderProps Interface Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion-react-native/README.md Defines the TypeScript interface for the `AbstraxionProviderProps`, specifying the required `children` and `config` properties. ```typescript interface AbstraxionProviderProps { children: ReactNode; config: { // Network configuration rpcUrl?: string; // RPC endpoint (defaults to testnet) restUrl?: string; // REST API endpoint (defaults to testnet) gasPrice?: string; // Gas price (e.g. "0.025uxion") // Optional configurations treasury?: string; // Treasury contract address callbackUrl?: string; // Callback URL after authorization }; } // Contract authorization can be either a string or an object type ContractGrantDescription = | string | { address: string; amounts: SpendLimit[]; }; // Token spending limit interface SpendLimit { denom: string; // Token denomination amount: string; // Maximum amount } ``` -------------------------------- ### Expo Deep Linking Configuration Source: https://github.com/burnt-labs/xion.js/blob/main/packages/abstraxion-react-native/README.md Configuration for handling deep links in Expo applications to support authentication flows. This involves setting the `scheme` and `android.intentFilters` in the `app.json` file. ```json { "expo": { "scheme": "your-app-scheme", "android": { "intentFilters": [ { "action": "VIEW", "category": ["DEFAULT", "BROWSABLE"], "data": { "scheme": "your-app-scheme" } } ] } } } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.