https://github.com/lndgalante/solutils

React Hooks and Helpers for Solana
https://github.com/lndgalante/solutils

dapp hooks react solana solutils typescript web3

Last synced: about 1 month ago
JSON representation

React Hooks and Helpers for Solana

• Host: GitHub
• URL: https://github.com/lndgalante/solutils
• Owner: lndgalante
• License: mit
• Created: 2022-10-21T19:31:24.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-10T08:21:40.000Z (11 months ago)
• Last Synced: 2024-10-02T17:18:10.238Z (2 months ago)
• Topics: dapp, hooks, react, solana, solutils, typescript, web3
• Language: TypeScript
• Homepage: https://solutils.vercel.app/
• Size: 1.69 MB
• Stars: 31
• Watchers: 6
• Forks: 4
• Open Issues: 44
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - lndgalante/solutils - React Hooks and Helpers for Solana (TypeScript)

README

        


   

    

    

  





  React Hooks and Helpers for Solana





  

    

  

  

    

  



### Documentation

For full documentation and examples, visit [solutils.vercel.app](https://solutils.vercel.app).

### Installation

Install solutils and its @solana peer dependencies.

```bash

npm install @lndgalante/solutils @solana/web3.js @solana/spl-token @solana/wallet-adapter-react

```

### Quick Start

Send USDC tokens in under a minute

```tsx

import { useTransferTokens } from '@lndgalante/solutils';

import { useConnection, useWallet } from '@solana/wallet-adapter-react';

import { WalletMultiButton, WalletDisconnectButton } from '@solana/wallet-adapter-react-ui';

export default function Home() {

  // solana hooks

  const { connection } = useConnection();

  const { publicKey, sendTransaction } = useWallet();

  // solutils hooks

  const { getTransferTokensReceipt, result, status, error } = useTransferTokens(publicKey, connection, sendTransaction);

  // handlers

  function handleTransferUsdcTokens() {

    getTransferTokensReceipt('5NSJUuR9Pn1yiFYGPWonqrVh72xxX8D2yADKrUf1USRc', 'USDC', 1);

  }

  return (

    


      

      


      

        Send {AMOUNT_TO_SEND} USDC tokens

        {status === 'iddle' ? 
Haven't sent any USDC yet
 : null}

        {status === 'loading' ? 
Sending your USDC tokens
 : null}

        {status === 'success' && result ? (

          


            
We successfully sent: {USDC_TO_SEND} USDC

            
Transaction signature: {result.transactionSignature}

            

              Solana Explorer

            

          

        ) : null}

        {status === 'error' ? 
{error}
 : null}

      

    

  );

}

```


In this example we import `useConnection` and `useWallet` which we usually need for solutils hooks to send wallet `publicKey` and wallet `connection` object.

Particulary here we also need the `sendTransaction` function from `useWallet` to internally send that transaction.

`useTransferTokens` returns many things but the most important thing here is `getTransferTokensReceipt` which takes a address recipient, a token symbol or address, and an amount to send to that address.

`useTransferTokens` also will return `result` object with the result if it the transfer is succesful, a `status` that could be `iddle`, `loading`, `success` or `error`, and finally an `error` which is a string with the error to display on screen.

And that's pretty much it, we render a UI to trigger our `handleTransferUsdcTokens` function, and depending on our `status` states we will display different messages.

Most of the hooks works this way, so learn once and then repeat same pattern with the other hooks.

---

### Security

Concerned about using a third-party library due to sensible code? We're working on making a fully tested, and secure library, but in case you or your company don't want to use this directly feel free to fork it, modify it and send any PR to improve it later on.

---

### Authors

Thanks to Alejandro [@afreitezzz](https://twitter.com/afreitezzz) for creating the logo!