react-solana-wallet-name-input

A React component lets a user use their Solana wallet name (like mikemaccana.sol) in your React app.

Your app will recieve the the wallet address (like 5FHwkrdxntdK24hgQU8qgBjn35Y1zwhz1GZwCkP2UJnM) and profile picture.

Supports .abc .backpack .bonk .glow .ottr .poor .sol and @twitter, plus 4 different PFP services, thanks to solana-wallet-names module.

Was this useful?

I'm a poor startup founder. Send me some tokens! mikemaccana.sol.

Usage

Install:

npm i react-solana-wallet-name-input

import SolanaWalletNameInput from "react-solana-wallet-name-input";

Then in your pages:

<SolanaWalletNameInput
  rpcURL={RPC_URL}
  onChecking={setIsChecking}
  onUpdate={setWalletAddressAndProfilePicture}
  isAutoFocused={true}
/>

• RPC_URL is your Solana RPC URL
• onChecking is a function that runs when we're waiting for the network.
• onUpdate is a function that runs when we have a result. onUpdate is called with an object of type:

{
  walletAddress: string | null;
  profilePicture: string | null;
}

null is no result. Ie we could not find a wallet address or profile picture. If walletAddress is null you should tell the user, because the name they are entering doesn't work.

• isAutoFocused is whether the component should be focused.

Running the demo (generic next.js instructions)

This is a Next.js project bootstrapped with create-next-app.

To run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/app/page.tsx. The page auto-updates as you edit the file.

http://localhost:3000/api/hello is an endpoint that uses Route Handlers. This endpoint can be edited in app/api/hello/route.ts.