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
.