First draft of solution code

components/AppBar.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react'
+import styles from '../styles/Home.module.css'
+import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
+import Image from 'next/image'
+
+export const AppBar: FC = () => {
+    return (
+        <div className={styles.AppHeader}>
+            <Image src="/solanaLogo.png" height={30} width={200} />
+            <span>Wallet-Adapter Example</span>
+            <WalletMultiButton />
+        </div>
+    )
+}

components/BalanceDisplay.tsx

@@ -0,0 +1,23 @@
+import { useConnection, useWallet } from '@solana/wallet-adapter-react';
+import { LAMPORTS_PER_SOL } from '@solana/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.getAccountInfo(publicKey).then(info => {
+            setBalance(info.lamports);
+        })
+    }, [connection, publicKey])
+
+    return (
+        <div>
+            <p>{publicKey ? `Balance: ${balance / LAMPORTS_PER_SOL}` : ''}</p>
+        </div>
+    )
+}

components/SendSolForm.tsx

@@ -0,0 +1,58 @@
+import { useConnection, useWallet } from '@solana/wallet-adapter-react';
+import * as web3 from '@solana/web3.js'
+import { LAMPORTS_PER_SOL } from '@solana/web3.js';
+import { FC, useState } from 'react'
+import styles from '../styles/Home.module.css'
+
+
+export const SendSolForm: FC = () => {
+    const [txSig, setTxSig] = useState('');
+    const { connection } = useConnection();
+    const { publicKey, sendTransaction } = useWallet();
+    const link = () => {
+        return txSig ? `https://explorer.solana.com/tx/${txSig}?cluster=devnet` : ''
+    }
+
+    const sendSol = event => {
+        event.preventDefault()
+        if (!connection || !publicKey) { return }
+        const transaction = new web3.Transaction()
+        const recipientPubKey = new web3.PublicKey(event.target.recipient.value)
+
+        const sendSolInstruction = web3.SystemProgram.transfer({
+            fromPubkey: publicKey,
+            toPubkey: recipientPubKey,
+            lamports: LAMPORTS_PER_SOL * event.target.amount.value
+        })
+
+        transaction.add(sendSolInstruction)
+        sendTransaction(transaction, connection).then(sig => {
+            setTxSig(sig)
+        })
+    }
+
+    return (
+        <div>
+            {
+                publicKey ?
+                    <form onSubmit={sendSol} className={styles.form}>
+                        <label htmlFor="amount">Amount (in SOL) to send:</label>
+                        <input id="amount" type="text" className={styles.formField} placeholder="e.g. 0.1" required />
+                        <br />
+                        <label htmlFor="recipient">Send SOL to:</label>
+                        <input id="recipient" type="text" className={styles.formField} placeholder="e.g. 4Zw1fXuYuJhWhu9KLEYMhiPEiqcpKd6akw3WRZCv84HA" required />
+                        <button type="submit" className={styles.formButton}>Send</button>
+                    </form> :
+                    <span>Connect Your Wallet</span>
+            }
+            {
+                txSig ?
+                    <div>
+                        <p>View your transaction on </p>
+                        <a href={link()}>Solana Explorer</a>
+                    </div> :
+                    null
+            }
+        </div>
+    )
+}

components/WalletContextProvider.tsx

@@ -0,0 +1,25 @@
+
+import { FC, ReactNode } from "react";
+import * as web3 from '@solana/web3.js'
+import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react'
+import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
+import { PhantomWalletAdapter } from '@solana/wallet-adapter-phantom';
+require('@solana/wallet-adapter-react-ui/styles.css');
+
+const WalletContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
+    const wallet = new PhantomWalletAdapter()
+
+    const endpoint = web3.clusterApiUrl('devnet')
+
+    return (
+        <ConnectionProvider endpoint={endpoint}>
+            <WalletProvider wallets={[wallet]}>
+                <WalletModalProvider>
+                    { children }
+                </WalletModalProvider>
+            </WalletProvider>
+        </ConnectionProvider>
+    )
+}
+
+export default WalletContextProvider

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.