diff --git a/packages/example/components/test-plan/connect-wallet.tsx b/packages/example/components/test-plan/connect-wallet.tsx
new file mode 100644
index 00000000..7af4d62e
--- /dev/null
+++ b/packages/example/components/test-plan/connect-wallet.tsx
@@ -0,0 +1,42 @@
+import { Mainnet, useCelo } from '@celo/react-celo';
+import React, { useEffect } from 'react';
+
+import { SuccessIcon } from './success-icon';
+import { Result, TestBlock } from './ui';
+import { Status, useTestStatus } from './useTestStatus';
+
+export function ConnectWalletCheck() {
+  const { connect, address, updateNetwork } = useCelo();
+  const { status, errorMessage, wrapActionWithStatus, setStatus } =
+    useTestStatus();
+
+  const onConnectWallet = wrapActionWithStatus(async () => {
+    await updateNetwork(Mainnet);
+    await connect();
+  });
+
+  useEffect(() => {
+    if (address) {
+      setStatus.success();
+    }
+  }, [address, setStatus]);
+
+  return (
+    <TestBlock
+      status={status}
+      title="Connect wallet (Mainnet)"
+      disabledTest={status !== Status.NotStarted}
+      onRunTest={onConnectWallet}
+    >
+      <Result status={status}>
+        <Result.Default>
+          <p>Press the button above to choose a wallet to connect to.</p>
+        </Result.Default>
+        <Result.Success>
+          <SuccessIcon /> Connected to {address}
+        </Result.Success>
+        <Result.Error>{errorMessage}</Result.Error>
+      </Result>
+    </TestBlock>
+  );
+}
diff --git a/packages/example/components/test-plan/error-icon.tsx b/packages/example/components/test-plan/error-icon.tsx
new file mode 100644
index 00000000..dc450068
--- /dev/null
+++ b/packages/example/components/test-plan/error-icon.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+export function ErrorIcon() {
+  return (
+    <svg
+      className="inline"
+      height="15px"
+      version="1.1"
+      viewBox="0 0 20 20"
+      width="15px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title />
+      <desc />
+      <defs />
+      <g
+        fill="none"
+        fillRule="evenodd"
+        id="Page-1"
+        stroke="none"
+        strokeWidth="1"
+      >
+        <g
+          fill="#f94144"
+          id="Core"
+          transform="translate(-380.000000, -44.000000)"
+        >
+          <g id="cancel" transform="translate(380.000000, 44.000000)">
+            <path
+              d="M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M15,13.6 L13.6,15 L10,11.4 L6.4,15 L5,13.6 L8.6,10 L5,6.4 L6.4,5 L10,8.6 L13.6,5 L15,6.4 L11.4,10 L15,13.6 L15,13.6 Z"
+              id="Shape"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/example/components/test-plan/send-transaction.tsx b/packages/example/components/test-plan/send-transaction.tsx
new file mode 100644
index 00000000..003eda1f
--- /dev/null
+++ b/packages/example/components/test-plan/send-transaction.tsx
@@ -0,0 +1,38 @@
+import { useCelo } from '@celo/react-celo';
+
+import { sendTestTransaction } from '../../utils/send-test-transaction';
+import { SuccessIcon } from './success-icon';
+import { Result, TestBlock } from './ui';
+import { useDisabledTest } from './useDisabledTest';
+import { useTestStatus } from './useTestStatus';
+
+export function SendTransaction() {
+  const { performActions } = useCelo();
+  const { status, errorMessage, wrapActionWithStatus } = useTestStatus();
+  const [disabled, setDisabled] = useDisabledTest();
+
+  const onRunTest = wrapActionWithStatus(async () => {
+    setDisabled(true);
+    await sendTestTransaction(performActions);
+  });
+
+  return (
+    <TestBlock
+      status={status}
+      title="Send transaction"
+      disabledTest={disabled}
+      onRunTest={onRunTest}
+    >
+      <Result status={status}>
+        <p>This sends a very small transaction to impact market contract.</p>
+        <Result.Default>
+          <p>You'll need to approve the transaction in the wallet.</p>
+        </Result.Default>
+        <Result.Success>
+          <SuccessIcon /> Transaction sent
+        </Result.Success>
+        <Result.Error>{errorMessage}</Result.Error>
+      </Result>
+    </TestBlock>
+  );
+}
diff --git a/packages/example/components/test-plan/success-icon.tsx b/packages/example/components/test-plan/success-icon.tsx
new file mode 100644
index 00000000..2cfb48e1
--- /dev/null
+++ b/packages/example/components/test-plan/success-icon.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+export function SuccessIcon() {
+  return (
+    <svg
+      className="inline"
+      height="14px"
+      version="1.1"
+      viewBox="0 0 20 20"
+      width="14px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title />
+      <desc />
+      <defs />
+      <g
+        fill="none"
+        fillRule="evenodd"
+        id="Page-1"
+        stroke="none"
+        strokeWidth="1"
+      >
+        <g
+          fill="#43aa8b"
+          id="Core"
+          transform="translate(-44.000000, -86.000000)"
+        >
+          <g id="check-circle" transform="translate(44.000000, 86.000000)">
+            <path
+              d="M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M8,15 L3,10 L4.4,8.6 L8,12.2 L15.6,4.6 L17,6 L8,15 L8,15 Z"
+              id="Shape"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/example/components/test-plan/switch-networks.tsx b/packages/example/components/test-plan/switch-networks.tsx
new file mode 100644
index 00000000..65e10ad6
--- /dev/null
+++ b/packages/example/components/test-plan/switch-networks.tsx
@@ -0,0 +1,47 @@
+import { Alfajores, useCelo } from '@celo/react-celo';
+import { useEffect, useState } from 'react';
+
+import { SuccessIcon } from './success-icon';
+import { Result, TestBlock } from './ui';
+import { useDisabledTest } from './useDisabledTest';
+import { Status, useTestStatus } from './useTestStatus';
+
+export function SwitchNetwork() {
+  const { updateNetwork, network } = useCelo();
+  const { status, errorMessage, wrapActionWithStatus, setStatus } =
+    useTestStatus();
+  const [disabledTest, setDisabledTest] = useDisabledTest();
+  const [connectedNetwork, setConnectedNetwork] = useState('');
+
+  const onSwitchNetworks = wrapActionWithStatus(async () => {
+    setDisabledTest(true);
+    await updateNetwork(Alfajores);
+  });
+
+  useEffect(() => {
+    setConnectedNetwork(network.name);
+    if (status === Status.NotStarted && network.name === Alfajores.name) {
+      setStatus.error('Already set to Alfajores');
+      setDisabledTest(true);
+    }
+  }, [network.name, setStatus, status, setDisabledTest]);
+
+  return (
+    <TestBlock
+      status={status}
+      title="Switch network"
+      disabledTest={disabledTest}
+      onRunTest={onSwitchNetworks}
+    >
+      <Result status={status}>
+        <Result.Default>
+          <p>Currently connected to {connectedNetwork}.</p>
+        </Result.Default>
+        <Result.Success>
+          <SuccessIcon /> Switched to Alfajores
+        </Result.Success>
+        <Result.Error>{errorMessage}</Result.Error>
+      </Result>
+    </TestBlock>
+  );
+}
diff --git a/packages/example/components/test-plan/ui.tsx b/packages/example/components/test-plan/ui.tsx
new file mode 100644
index 00000000..05af33a8
--- /dev/null
+++ b/packages/example/components/test-plan/ui.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { SecondaryButton } from '../buttons';
+
+import { ErrorIcon } from './error-icon';
+import { Status } from './useTestStatus';
+
+export function TestTag({ type }: { type: Status }) {
+  const getText = (type: Status) => {
+    return type.replace('-', ' ');
+  };
+
+  return <span className={`test-tag ${type}`}>{getText(type)}</span>;
+}
+
+export function TestBlock({
+  status,
+  title,
+  onRunTest,
+  disabledTest,
+  children,
+}: React.PropsWithChildren<{
+  title: string;
+  status: Status;
+  disabledTest: boolean;
+  onRunTest: () => void;
+}>) {
+  return (
+    <div className="test-block">
+      <div className="tag-column">
+        <TestTag type={status} />
+      </div>
+      <div className="test-instructions">
+        <div className="flex items-center">
+          <Header>{title}</Header>
+          <SecondaryButton
+            className="underline"
+            onClick={onRunTest}
+            disabled={disabledTest}
+          >
+            Run
+          </SecondaryButton>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export const Header: React.FC = (props) => (
+  <h3 className="font-semibold text-base" {...props} />
+);
+
+export const Text: React.FC = (props) => (
+  <div className="text-slate-600 mt-2" {...props} />
+);
+
+const ResultContext = React.createContext('');
+
+function useResultContext() {
+  const context = React.useContext(ResultContext);
+  if (!context) {
+    throw new Error('Cannot use this element outside the Result component');
+  }
+  return context;
+}
+
+export function Result(props: React.PropsWithChildren<{ status: Status }>) {
+  return (
+    <ResultContext.Provider value={props.status}>
+      <div className="test-result">{props.children}</div>
+    </ResultContext.Provider>
+  );
+}
+
+export const Success: React.FC = (props) => {
+  const context = useResultContext();
+  return context === Status.Success ? (
+    <p className="text-[#43aa8b] flex items-center gap-[5px]">
+      {props.children}
+    </p>
+  ) : null;
+};
+
+export const ErrorText: React.FC = (props) => {
+  const context = useResultContext();
+  return context === Status.Error ? (
+    <p className="text-[#f94144] flex items-center gap-[5px]">
+      <ErrorIcon /> {props.children}
+    </p>
+  ) : null;
+};
+
+export const Default: React.FC = (props) => {
+  const context = useResultContext();
+  return context === Status.NotStarted || context === Status.Pending ? (
+    <>{props.children}</>
+  ) : null;
+};
+
+Result.Success = Success;
+Result.Error = ErrorText;
+Result.Default = Default;
diff --git a/packages/example/components/test-plan/update-fee-currency.tsx b/packages/example/components/test-plan/update-fee-currency.tsx
new file mode 100644
index 00000000..9087c216
--- /dev/null
+++ b/packages/example/components/test-plan/update-fee-currency.tsx
@@ -0,0 +1,53 @@
+import { CeloContract } from '@celo/contractkit';
+import { useCelo } from '@celo/react-celo';
+import { useEffect } from 'react';
+
+import { SuccessIcon } from './success-icon';
+import { Result, TestBlock } from './ui';
+import { useDisabledTest } from './useDisabledTest';
+import { useTestStatus } from './useTestStatus';
+
+export function UpdateFeeCurrency() {
+  const { updateFeeCurrency, feeCurrency, supportsFeeCurrency, address } =
+    useCelo();
+  const [disabledTest, setDisabledTest] = useDisabledTest();
+  const { status, errorMessage, wrapActionWithStatus, setStatus } =
+    useTestStatus();
+
+  useEffect(() => {
+    if (address && supportsFeeCurrency !== undefined && !supportsFeeCurrency) {
+      setDisabledTest(true);
+      setStatus.error('Wallet does not support updating fee currency.');
+    }
+  }, [address, supportsFeeCurrency, setStatus, setDisabledTest]);
+
+  const onUpdateCurrency = wrapActionWithStatus(async () => {
+    setDisabledTest(true);
+    await updateFeeCurrency(CeloContract.StableTokenBRL);
+    if (feeCurrency !== CeloContract.StableTokenBRL) {
+      throw new Error('Fee currency did not update.');
+    }
+  });
+
+  return (
+    <TestBlock
+      status={status}
+      title="Update fee currency"
+      disabledTest={disabledTest}
+      onRunTest={onUpdateCurrency}
+    >
+      <Result status={status}>
+        <p>Fee currency used: {feeCurrency}</p>
+        <Result.Default>
+          <>
+            <p>Change the currency used in transactions.</p>
+          </>
+        </Result.Default>
+        <Result.Success>
+          <SuccessIcon /> Fee currency {feeCurrency}
+        </Result.Success>
+        <Result.Error>{errorMessage}</Result.Error>
+      </Result>
+    </TestBlock>
+  );
+}
diff --git a/packages/example/components/test-plan/useDisabledTest.tsx b/packages/example/components/test-plan/useDisabledTest.tsx
new file mode 100644
index 00000000..9ef7d516
--- /dev/null
+++ b/packages/example/components/test-plan/useDisabledTest.tsx
@@ -0,0 +1,15 @@
+import { useCelo } from '@celo/react-celo';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+export const useDisabledTest = (): [
+  boolean,
+  Dispatch<SetStateAction<boolean>>
+] => {
+  const { address } = useCelo();
+  const [disabled, setDisabled] = useState(true);
+  useEffect(() => {
+    setDisabled(!address);
+  }, [address]);
+
+  return [disabled, setDisabled];
+};
diff --git a/packages/example/components/test-plan/useTestStatus.tsx b/packages/example/components/test-plan/useTestStatus.tsx
new file mode 100644
index 00000000..9a0c15b9
--- /dev/null
+++ b/packages/example/components/test-plan/useTestStatus.tsx
@@ -0,0 +1,73 @@
+import { useCelo } from '@celo/react-celo';
+import { useEffect, useMemo, useState } from 'react';
+
+export enum Status {
+  NotStarted = 'not-started',
+  Success = 'success',
+  Error = 'error',
+  Pending = 'pending',
+}
+
+function hasMessage(error: unknown): error is { message: string } {
+  if (!error || typeof error !== 'object') {
+    return false;
+  }
+
+  return 'message' in error;
+}
+
+export const useTestStatus = () => {
+  const { address } = useCelo();
+
+  const [status, setStatus] = useState<Status>(Status.NotStarted);
+
+  const set = useMemo(() => {
+    return {
+      success: () => {
+        setStatus(Status.Success);
+      },
+      error: (error: unknown) => {
+        setStatus(Status.Error);
+
+        if (hasMessage(error)) {
+          setErrorMessage(error.message);
+        } else if (typeof error === 'string') {
+          setErrorMessage(error);
+        } else {
+          setErrorMessage(JSON.stringify(error));
+        }
+      },
+      pending: () => setStatus(Status.Pending),
+      notStarted: () => setStatus(Status.NotStarted),
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!address) {
+      set.notStarted();
+    }
+
+    return () => {
+      set.notStarted();
+    };
+  }, [address, set]);
+
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const wrapActionWithStatus = (action: () => Promise<void>) => async () => {
+    set.pending();
+    try {
+      await action();
+      set.success();
+    } catch (error) {
+      set.error(error);
+    }
+  };
+
+  return {
+    status,
+    errorMessage,
+    setStatus: set,
+    wrapActionWithStatus,
+  };
+};
diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx
index 736720ee..c02709a6 100644
--- a/packages/example/pages/_app.tsx
+++ b/packages/example/pages/_app.tsx
@@ -32,7 +32,7 @@ function MyApp({ Component, pageProps, router }: AppProps): React.ReactElement {
           },
         }}
       />
-      <div>
+      <div className="max-w-screen-sm mx-auto py-10 md:py-20 px-4">
         <Component {...pageProps} />
       </div>
     </CeloProvider>
diff --git a/packages/example/pages/index.tsx b/packages/example/pages/index.tsx
index 49df7259..2c26615f 100644
--- a/packages/example/pages/index.tsx
+++ b/packages/example/pages/index.tsx
@@ -213,7 +213,7 @@ export default function Home(): React.ReactElement {
         </label>
       </div>
 
-      <main className="max-w-screen-sm mx-auto py-10 md:py-20 px-4">
+      <main>
         <div className="font-semibold text-2xl">react-celo</div>
         <div className="text-slate-600 mt-2">
           A{' '}
diff --git a/packages/example/pages/wallet-test-plan.tsx b/packages/example/pages/wallet-test-plan.tsx
new file mode 100644
index 00000000..32a50ed5
--- /dev/null
+++ b/packages/example/pages/wallet-test-plan.tsx
@@ -0,0 +1,48 @@
+import { CeloProvider, Mainnet, useCelo } from '@celo/react-celo';
+import React from 'react';
+
+import { ConnectWalletCheck } from '../components/test-plan/connect-wallet';
+import { SendTransaction } from '../components/test-plan/send-transaction';
+import { SwitchNetwork } from '../components/test-plan/switch-networks';
+import { UpdateFeeCurrency } from '../components/test-plan/update-fee-currency';
+
+export default function WalletTestPlan(): React.ReactElement {
+  const { destroy } = useCelo();
+  return (
+    <CeloProvider
+      dapp={{
+        name: 'Wallet test plan',
+        description: 'Wallet test plan',
+        url: 'https://react-celo.vercel.app/wallet-test-plan',
+        icon: 'https://react-celo.vercel.app/favicon.ico',
+      }}
+      network={Mainnet}
+      connectModal={{
+        providersOptions: { searchable: true },
+      }}
+    >
+      <div>
+        <div className="font-semibold text-2xl">Wallet Test Plan</div>
+        <div className="text-slate-600 mt-2">
+          A set of steps to help verify how well a given wallet interacts with
+          react-celo.
+          <br />
+          You will need to connect a wallet before being able to run any other
+          test.
+        </div>
+        <div>
+          <button
+            className="inline underline text-purple-700"
+            onClick={destroy}
+          >
+            Disconnect wallet
+          </button>
+        </div>
+        <ConnectWalletCheck />
+        <SwitchNetwork />
+        <UpdateFeeCurrency />
+        <SendTransaction />
+      </div>
+    </CeloProvider>
+  );
+}
diff --git a/packages/example/pages/wallet.tsx b/packages/example/pages/wallet.tsx
index 87eaf9ec..882b490b 100644
--- a/packages/example/pages/wallet.tsx
+++ b/packages/example/pages/wallet.tsx
@@ -443,7 +443,7 @@ export default function Wallet(): React.ReactElement {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className="max-w-screen-sm mx-auto py-10 md:py-20 px-4">
+      <main>
         <div className="font-semibold text-2xl">react-celo wallet</div>
 
         <input
diff --git a/packages/example/styles/global.css b/packages/example/styles/global.css
index 531dc9d1..3e6b7315 100644
--- a/packages/example/styles/global.css
+++ b/packages/example/styles/global.css
@@ -80,3 +80,60 @@ input:checked + .slider:before {
 .slider.round:before {
   border-radius: 50%;
 }
+
+.test-tag {
+  text-transform: lowercase;
+  display: inline-block;
+  border-radius: 10px;
+  padding: 2px 10px;
+  height: max-content;
+  transform: translate(0, 9px);
+  font-size: 14px;
+}
+
+.success {
+  background: #43aa8b;
+  color: white;
+}
+
+.success-text {
+  color: #43aa8b;
+}
+
+.not-started {
+  background: #577590;
+  color: white;
+}
+
+.error {
+  background: #f94144;
+  color: white;
+}
+
+.pending {
+  background-color: #f9c74f;
+  color: black;
+}
+
+.test-block {
+  display: flex;
+  margin-top: 20px;
+}
+
+.test-instructions {
+  margin-left: 20px;
+}
+
+.test-result {
+  display: inline-block;
+  padding: 10px;
+  font-size: 13px;
+  border-radius: 4px;
+  border: 1px solid #dbdbdb;
+  width: 100%;
+}
+
+.tag-column {
+  min-width: 100px;
+  text-align: right;
+}
diff --git a/packages/example/utils/send-test-transaction.ts b/packages/example/utils/send-test-transaction.ts
new file mode 100644
index 00000000..c524d31b
--- /dev/null
+++ b/packages/example/utils/send-test-transaction.ts
@@ -0,0 +1,20 @@
+import { UseCelo } from '@celo/react-celo';
+import Web3 from 'web3';
+
+export async function sendTestTransaction(
+  performActions: UseCelo['performActions']
+) {
+  await performActions(async (k) => {
+    const celo = await k.contracts.getGoldToken();
+    await celo
+      .transfer(
+        // impact market contract
+        '0x73D20479390E1acdB243570b5B739655989412f5',
+        Web3.utils.toWei('0.00000001', 'ether')
+      )
+      .sendAndWaitForReceipt({
+        from: k.connection.defaultAccount,
+        gasPrice: k.connection.defaultGasPrice,
+      });
+  });
+}