Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maximedgr/xrpl-quickstart-react-crossmark
Quickly start interacting with the XRPL using this React template integrating the Crossmark browser wallet SDK!
https://github.com/maximedgr/xrpl-quickstart-react-crossmark
crossmark hackathon quickstart react wallet xrpl
Last synced: 4 days ago
JSON representation
Quickly start interacting with the XRPL using this React template integrating the Crossmark browser wallet SDK!
- Host: GitHub
- URL: https://github.com/maximedgr/xrpl-quickstart-react-crossmark
- Owner: maximedgr
- Created: 2024-08-29T00:52:19.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-08-30T00:10:57.000Z (3 months ago)
- Last Synced: 2024-10-12T05:41:13.421Z (about 1 month ago)
- Topics: crossmark, hackathon, quickstart, react, wallet, xrpl
- Language: TypeScript
- Homepage:
- Size: 500 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# XRPL - Crossmark Browser Wallet - React Template
This project provides a rapid development template for building applications on the [XRP Ledger (XRPL)](https://xrpl.org) using the [Crossmark](https://crossmark.io) Browser Wallet and React. Designed as a quickstart solution, it's particularly useful for hackathons, prototypes, and developers looking to jumpstart their XRPL projects.
## Features
1. **Wallet Connection**: Easily connect to the Crossmark Browser Wallet.
2. **Account Information Display**: View your current XRPL address and network details.
3. **Network Auto-update**: Automatically checks and updates network information every 5 seconds.
4. **Interactions**:
- Get User Session
- Sign Transactions
- Submit Transactions
5. **WalletContext**: Access user's address throughout your app after wallet sign-in.
## Installation
To get started with this project, follow these steps:
1. Clone the repository:
```
git clone https://github.com/maximedgr/xrpl-quickstart-react-crossmark
```
2. Navigate to the project directory:
```
cd xrpl-crossmark-react-template
```
3. Install the dependencies:
```
npm install
```
or if you're using yarn:
```
yarn install
```
4. Start the development server:
```
npm start
```
or with yarn:
```
yarn start
```
5. Open your browser and visit `http://localhost:3000` to view the application.
## Usage
1. Click on the "Connect Wallet" button to connect your Crossmark Browser Wallet. If the wallet is not installed, it will prompt the user to install it, redirecting them to the Chrome Web Store and once installed, the wallet will be connected.
2. Once connected, you'll see your account information and network details.
3. Use the interaction buttons to perform various actions on the XRPL.
4. Access the Crossmark SDK documentation for more detailed information on available features.
## WalletContext
This template uses React's Context API to provide easy access to the user's wallet address throughout the application after sign-in. Here's how to use it in your components:
```
import { useWallet } from './path/to/WalletContext';
const MyComponent = () => {
const { address } = useWallet();
return
Your XRPL address: {address};
};
```
The `WalletContext` provides:
- `address`: The user's XRPL address after successful sign-in.
- `setAddress`: A function to update the address (typically used internally by the WalletConnect component).
## Dependencies
- React
- TypeScript
- Crossmark Browser Wallet SDK
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## Credits
Based on a template from [Crossmark](https://crossmark.io).
You can find other templates on [Crossmark's GitHub](https://github.com/crossmarkio/starters/tree/core) for Next, Vue and Angular.