Put the rest of your app here
While you could do this in a `useEffect` hook, you’ll usually want to provide
more sophisticated functionality. For example, you may want users to be able to
choose from a list of supported wallet applications or disconnect after they’ve
already connected.
### @nexisnetwork/wallet-adapter-react-ui
You can create custom components for this, or you can leverage components
provided by `@nexisnetwork/wallet-adapter-react-ui`. The simplest way to provide a
full-featured wallet experience is to use `WalletModalProvider` and
`WalletMultiButton`:
```tsx theme={null}
import { NextPage } from "next";
import { FC, ReactNode } from "react";
import {
ConnectionProvider,
WalletProvider,
} from "@nexisnetwork/wallet-adapter-react";
import {
WalletModalProvider,
WalletMultiButton,
} from "@nexisnetwork/wallet-adapter-react-ui";
import * as web3 from "@nexisnetwork/web3.js";
const Home: NextPage = props => {
const endpoint = web3.clusterApiUrl("devnet");
const wallets = useMemo(() => [], []);
return (
Put the rest of your app here
You can also use more granular components if you need more specific
functionality:
* `WalletConnectButton`
* `WalletModal`
* `WalletModalButton`
* `WalletDisconnectButton`
* `WalletIcon`
### Access Account Info
Once your site is connected to a wallet, `useConnection` will retrieve a
`Connection` object and `useWallet` will get the `WalletContextState`.
`WalletContextState` has a property `publicKey` that is `null` when not
connected to a wallet and has the public key of the user’s account when a wallet
is connected. With a public key and a connection, you can fetch account info and
more.
```tsx theme={null}
import { useConnection, useWallet } from "@nexisnetwork/wallet-adapter-react";
import { LAMPORTS_PER_SOL } from "@nexisnetwork/web3.js";
import { FC, useEffect, useState } from "react";
export const BalanceDisplay: FC = () => {
const [balance, setBalance] = useState(0);
const { connection } = useConnection();
const { publicKey } = useWallet();
useEffect(() => {
if (!connection || !publicKey) {
return;
}
connection.onAccountChange(
publicKey,
updatedAccountInfo => {
setBalance(updatedAccountInfo.lamports / LAMPORTS_PER_SOL);
},
"confirmed",
);
connection.getAccountInfo(publicKey).then(info => {
setBalance(info.lamports);
});
}, [connection, publicKey]);
return (
{publicKey ? `Balance: ${balance / LAMPORTS_PER_SOL} NZT` : ""}
## Lab
Let’s take the Ping program from the last lesson and build a frontend that lets
users approve a transaction that pings the program. As a reminder, the program’s
public key is `ChT1B39WKLS8qUrkLvFDXMhEJ4F1XZzwUNHUt4AU9aVa` and the public key
for the data account is `Ah9K7dQ8EHaZqcAsgBW8w37yN2eAy3koFmUn4x3CJtod`.
### Download a Nexis Native wallet
You'll need a Nexis Native wallet app. There's a wide variety of
[Nexis Native wallets](https://nexis.network/docs/intro/wallets) available. We're going
to use a browser-extension wallet in this case, since you probably code on a
laptop or desktop!
Follow the wallets instructions for creating a new account and a new wallet.
Then set your wallet to use Devnet, for example:
* In Phantom, click **Settings** -> **Developer Settings** -> **Testnet mode**.
'Testnet mode' sets Nexis Native to Devnet by default.
* In Solflare, click **Settings** -> **General** -> **Network** -> **DevNet**
* In Backpack, click **Preferences** -> **Developer Mode**
This ensures that your wallet app will be connected to the same network we’ll be
using in this lab.
### Download the starter code
Download the
[starter code for this project](https://github.com/Unboxed-Software/solana-ping-frontend/tree/starter).
This project is a simple Next.js application. It’s mostly empty except for the
`AppBar` component. We’ll build the rest throughout this lab.
You can see its current state with the command `npm run dev` in the console.
### Wrap the app in context providers
To start, we’re going to create a new component to contain the various
Wallet-Adapter providers that we’ll be using. Create a new file inside the
`components` folder called `WalletContextProvider.tsx`.
Let’s start with some of the boilerplate for a functional component:
```tsx theme={null}
import { FC, ReactNode } from "react";
const WalletContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
return (
));
};
export default WalletContextProvider;
```
To properly connect to the user’s wallet, we’ll need a `ConnectionProvider`,
`WalletProvider`, and `WalletModalProvider`. Start by importing these components
from `@nexisnetwork/wallet-adapter-react` and `@nexisnetwork/wallet-adapter-react-ui`. Then
add them to the `WalletContextProvider` component. Note that
`ConnectionProvider` requires an `endpoint` parameter and `WalletProvider`
requires an array of `wallets`. For now, just use an empty string and an empty
array, respectively.
```tsx theme={null}
import { FC, ReactNode } from "react";
import {
ConnectionProvider,
WalletProvider,
} from "@nexisnetwork/wallet-adapter-react";
import { WalletModalProvider } from "@nexisnetwork/wallet-adapter-react-ui";
const WalletContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
return (
1. You can build this from scratch or you can
[download the starter code](https://github.com/Unboxed-Software/solana-send-sol-frontend/tree/starter).
2. Wrap the starter application in the appropriate context providers.
3. In the form component, set up the transaction and send it to the user’s
wallet for approval.
4. Get creative with the user experience. Add a link to let the user view the
transaction on Nexis Native Explorer or something else that seems cool to you!
If you get really stumped, feel free to
[check out the solution code](https://github.com/Unboxed-Software/solana-send-sol-frontend/tree/main).