feat: wallet test plan page

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>
+  );
+}

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>
+  );
+}

packages/example/components/test-plan/send-transaction.tsx

@@ -0,0 +1,38 @@
+import { useCelo } from '@celo/react-celo';
+
+import { sendTransaction } from '../../utils/send-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 sendTransaction(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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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;

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>
+  );
+}

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];
+};