Redesign the interface

Components/AccountDialog.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useContext, useEffect, useRef } from "react";
+
+import { ChatAppContext } from "../Context/ChatAppContext";
+import Spinner from "./Spinner";
+
+const AccountDialog = ({ onClose }) => {
+  const [name, setName] = useState("");
+  const { createAccount, busy } = useContext(ChatAppContext);
+  const working = busy === "account";
+  const input = useRef(null);
+
+  useEffect(() => {
+    input.current?.focus();
+    const onKey = (e) => e.key === "Escape" && !working && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose, working]);
+
+  const submit = async (e) => {
+    e.preventDefault();
+    if (await createAccount({ name })) onClose();
+  };
+
+  return (
+    <div className="scrim">
+      <form
+        className="panel dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="account-title"
+        onSubmit={submit}
+      >
+        <h2 id="account-title">Create your account</h2>
+        <p>
+          Pick the name your friends will see. It is stored on the chain, so
+          MetaMask will ask you to confirm one transaction.
+        </p>
+        <div className="field">
+          <label htmlFor="account-name">Name</label>
+          <input
+            id="account-name"
+            ref={input}
+            className="input"
+            value={name}
+            maxLength={32}
+            autoComplete="off"
+            onChange={(e) => setName(e.target.value)}
+          />
+        </div>
+        <div className="dialog-actions">
+          <button type="button" className="btn" onClick={onClose} disabled={working}>
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="btn btn-primary"
+            disabled={working || !name.trim()}
+          >
+            {working && <Spinner />}
+            {working ? "Waiting for the network" : "Create account"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default AccountDialog;

Components/Avatar.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+// A colour and an initial derived from the address, so the same person looks
+// the same everywhere without storing an image.
+const hue = (seed) => {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = (hash * 31 + seed.charCodeAt(i)) % 360;
+  }
+  return hash;
+};
+
+const Avatar = ({ name = "", address = "", size = 40 }) => (
+  <span
+    className="avatar"
+    aria-hidden="true"
+    style={{
+      width: size,
+      height: size,
+      fontSize: size * 0.42,
+      background: `hsl(${hue(address || name)} 45% 38%)`,
+    }}
+  >
+    {(name || address.slice(2) || "?").charAt(0).toUpperCase()}
+  </span>
+);
+
+export default Avatar;

Components/EmptyState.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const EmptyState = ({ title, text, children }) => (
+  <div className="panel empty">
+    <h2>{title}</h2>
+    <p>{text}</p>
+    {children}
+  </div>
+);
+
+export default EmptyState;