-
Any familiar Faces?
+
+
+
Find people
+
Everyone registered on the contract who is not your friend yet.
-
- {userLists.map((el, i) => (
-
+ {!account || !userName ? (
+
+ ) : userLists.length === 0 ? (
+
+ ) : (
+
+ {userLists.map((u) => {
+ const adding = busy === `friend:${u.accountAddress}`;
+ return (
+
+
+
{u.name}
+
+ {shortAddress(u.accountAddress)}
+
+
+ addFriends({ name: u.name, userAddress: u.accountAddress })
+ }
+ >
+ {adding &&
+
+ );
+ })}
+
+ )}
);
};
diff --git a/pages/index.js b/pages/index.js
index 89e02726..d42f7a93 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,17 +1,199 @@
-import React, { useEffect, useState, useContext } from "react";
-
-//INTERNAL IMPORT
-// import { ChatAppContect } from "../Context/ChatAppContext";
-import { Filter, Friend } from "../Components/index";
-
-const ChatApp = () => {
- // const {} = useContext(ChatAppContect);
- return (
-
-
- );
-};
-
-export default ChatApp;
+import React, { useContext, useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { ChatAppContext } from "../Context/ChatAppContext";
+import { NETWORK } from "../Context/config";
+import { formatTime, shortAddress } from "../Utils/apiFeature";
+import { Avatar, EmptyState, Spinner } from "../Components/index";
+
+const BackIcon = () => (
+
+
+);
+
+const Conversation = ({ name, address }) => {
+ const [text, setText] = useState("");
+ const end = useRef(null);
+ const { account, friendMsg, pendingMsg, readMessage, sendMessage, busy } =
+ useContext(ChatAppContext);
+
+ useEffect(() => {
+ readMessage(address);
+ }, [address, readMessage]);
+
+ const mine = pendingMsg.filter((m) => m.to === address);
+ useEffect(() => {
+ end.current?.scrollIntoView({ block: "end" });
+ }, [friendMsg.length, mine.length]);
+
+ const submit = async (e) => {
+ e.preventDefault();
+ const draft = text;
+ if (!draft.trim()) return;
+ setText("");
+ if (!(await sendMessage({ msg: draft, address }))) setText(draft);
+ };
+
+ return (
+
+
+
+
+
+
+
+
{name}
+
+ {shortAddress(address)}
+
+
+
+ {friendMsg.length === 0 && mine.length === 0 && (
+
+ No messages yet. Say hello; each message you send earns reward
+ tokens.
+
+ )}
+ {friendMsg.map((m, i) => (
+
+ {m.msg}
+
{formatTime(m.timestamp)}
+
+ ))}
+ {mine.map((m) => (
+
+ {m.msg}
+
Waiting for the network
+
+ ))}
+
+
+ );
+};
+
+const Chat = () => {
+ const { account, userName, ready, friendLists, connectWallet, connecting } =
+ useContext(ChatAppContext);
+ const { query } = useRouter();
+ const address = query.address || "";
+ const name = query.name || "";
+
+ if (!ready) return
;
+
+ if (!account) {
+ return (
+
+
+
+ {connecting &&
+
+
+ );
+ }
+
+ if (!userName) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+ Friends
+ {friendLists.length === 0 ? (
+
+
You have no friends yet.
+
+
+
+ {friendLists.map((f) => (
+
+
+ {f.name}
+ {shortAddress(f.pubkey)}
+
+
+
+ ))}
+
+ )}
+
+
+ {address ? (
+
+ ) : (
+
+
+
Pick a friend
+
Choose someone on the left to open the conversation.
+
+
+ )}
+
+
+ );
+};
+
+export default Chat;
diff --git a/pages/leaderboard.js b/pages/leaderboard.js
index f837f4b4..b90d302e 100644
--- a/pages/leaderboard.js
+++ b/pages/leaderboard.js
@@ -1,34 +1,58 @@
-import React, { useEffect, useState, useContext } from "react";
-import { ChatAppContect } from "../Context/ChatAppContext";
-import { connectingWithContract } from "../Utils/apiFeature";
-import { UserCard } from "../Components/index";
-import Style from "../styles/leaderboard.module.css";
+import React, { useContext } from "react";
+
+import { ChatAppContext } from "../Context/ChatAppContext";
+import { Avatar, EmptyState } from "../Components/index";
const Leaderboard = () => {
-const { userListsforleaderboard } = useContext(ChatAppContect);
+ const { account, ready, userListsforleaderboard } = useContext(ChatAppContext);
+ if (!ready) return
;
return (
-
-
Leaderboard
-
-
-
- Rank
- Name
- Tokens
-
-
-
- {userListsforleaderboard.map((user, index) => (
-
- {index + 1}
- {user.name}
- {user.tokens}
-
- ))}
-
-
+
+
+
Leaderboard
+
Everyone ranked by the reward tokens they have earned.
+
+
+ {userListsforleaderboard.length === 0 ? (
+
+ ) : (
+
+
+
+
+ Rank
+ Name
+
+ Tokens
+
+
+
+
+ {userListsforleaderboard.map((u, i) => (
+
+ {i + 1}
+
+
+
+
+ {u.tokens}
+
+ ))}
+
+
+
+ )}
);
};
diff --git a/styles/alluser.module.css b/styles/alluser.module.css
deleted file mode 100644
index 79d94b3e..00000000
--- a/styles/alluser.module.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.alluser_info {
- width: 85%;
- margin: 3rem auto;
- font-size: 1.6rem;
- font-weight: 600;
- color: #FFFFFF;
- text-align: center;
- letter-spacing: 0.5px;
-}
-
-.alluser {
- width: 85%;
- margin: 2rem auto;
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- gap: 2rem;
- padding: 1rem;
- background: rgba(41, 47, 63, 0.95);
- border-radius: 12px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-@media only screen and (max-width: 35em) {
- .alluser_info {
- width: 90%;
- font-size: 1.2rem;
- margin: 2rem auto;
- }
-
- .alluser {
- width: 90%;
- grid-template-columns: 1fr;
- padding: 0.8rem;
- }
-}
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 216fdfab..a6670a4a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,40 +1,623 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
-
-html,
-body {
- padding: 0;
- margin: 0;
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
- Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
- background: linear-gradient(180deg, #1E2333 0%, #292F3F 100%);
- color: #FFFFFF;
- font-size: 16px;
-}
-
-::-webkit-scrollbar {
- display: none;
-}
-
-a {
- color: inherit;
- text-decoration: none;
- transition: color 0.3s ease-in-out;
-}
-
-a:hover {
- color: #F18303;
-}
-
-* {
- box-sizing: border-box;
-}
-
-@media (prefers-color-scheme: dark) {
- html {
- color-scheme: dark;
- }
- body {
- color: #FFFFFF;
- background: linear-gradient(180deg, #1E2333 0%, #292F3F 100%);
- }
-}
\ No newline at end of file
+/* Design tokens. Every colour, size and radius in the app comes from here. */
+:root {
+ --bg: #f6f7f9;
+ --surface: #ffffff;
+ --surface-2: #f0f2f5;
+ --border: #dfe3e8;
+ --text: #14171c;
+ --muted: #5d6675;
+ --accent: #0f766e;
+ --accent-hover: #0b5f58;
+ --accent-text: #ffffff;
+ --accent-soft: #e0f2f0;
+ --danger: #b42318;
+ --danger-soft: #fdecea;
+ --mine: #0f766e;
+ --mine-text: #ffffff;
+ --theirs: #eceff3;
+ --radius: 10px;
+ --radius-sm: 6px;
+ --shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
+ --font: system-ui, -apple-system, "Segoe UI", sans-serif;
+ --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg: #0e1013;
+ --surface: #16191e;
+ --surface-2: #1d2128;
+ --border: #2a2f38;
+ --text: #e8eaee;
+ --muted: #9099a8;
+ --accent: #2dd4bf;
+ --accent-hover: #5eead4;
+ --accent-text: #06201c;
+ --accent-soft: #12332f;
+ --danger: #f97066;
+ --danger-soft: #3a1a17;
+ --mine: #14b8a6;
+ --mine-text: #04201c;
+ --theirs: #23272f;
+ --shadow: none;
+ }
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html {
+ color-scheme: light dark;
+}
+
+body {
+ margin: 0;
+ font-family: var(--font);
+ font-size: 15px;
+ line-height: 1.5;
+ background: var(--bg);
+ color: var(--text);
+ -webkit-font-smoothing: antialiased;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+p {
+ margin: 0;
+}
+
+button,
+input {
+ font: inherit;
+ color: inherit;
+}
+
+:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
+}
+
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ white-space: nowrap;
+}
+
+/* Layout */
+.page {
+ max-width: 1080px;
+ margin: 0 auto;
+ padding: 24px 16px 48px;
+}
+
+.page-head {
+ margin-bottom: 20px;
+}
+
+.page-head h1 {
+ font-size: 22px;
+ font-weight: 650;
+ letter-spacing: -0.01em;
+}
+
+.page-head p {
+ margin-top: 4px;
+ color: var(--muted);
+}
+
+/* Buttons */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ min-height: 38px;
+ padding: 0 16px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ background: var(--surface);
+ font-weight: 550;
+ cursor: pointer;
+ transition: background 0.15s, border-color 0.15s;
+}
+
+.btn:hover:not(:disabled) {
+ background: var(--surface-2);
+}
+
+.btn:disabled {
+ opacity: 0.55;
+ cursor: not-allowed;
+}
+
+.btn-primary {
+ background: var(--accent);
+ border-color: var(--accent);
+ color: var(--accent-text);
+}
+
+.btn-primary:hover:not(:disabled) {
+ background: var(--accent-hover);
+ border-color: var(--accent-hover);
+}
+
+.btn-small {
+ min-height: 32px;
+ padding: 0 12px;
+ font-size: 14px;
+}
+
+.spinner {
+ width: 16px;
+ height: 16px;
+ border: 2px solid currentColor;
+ border-right-color: transparent;
+ border-radius: 50%;
+ animation: spin 0.7s linear infinite;
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .spinner {
+ animation-duration: 2s;
+ }
+}
+
+/* Header */
+.header {
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ background: var(--surface);
+ border-bottom: 1px solid var(--border);
+}
+
+.header-inner {
+ max-width: 1080px;
+ margin: 0 auto;
+ padding: 0 16px;
+ min-height: 60px;
+ display: flex;
+ align-items: center;
+ gap: 24px;
+}
+
+.brand {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-weight: 700;
+ letter-spacing: -0.01em;
+}
+
+.brand svg {
+ color: var(--accent);
+}
+
+.nav {
+ display: flex;
+ gap: 4px;
+ flex: 1;
+}
+
+.nav a {
+ padding: 6px 12px;
+ border-radius: var(--radius-sm);
+ color: var(--muted);
+ font-weight: 550;
+}
+
+.nav a:hover {
+ color: var(--text);
+ background: var(--surface-2);
+}
+
+.nav a[aria-current="page"] {
+ color: var(--text);
+ background: var(--surface-2);
+}
+
+.wallet {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-left: auto;
+}
+
+.chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ min-height: 36px;
+ padding: 0 12px;
+ border: 1px solid var(--border);
+ border-radius: 999px;
+ background: var(--surface);
+ font-size: 14px;
+ font-weight: 550;
+}
+
+.chip-balance {
+ color: var(--accent);
+ font-variant-numeric: tabular-nums;
+}
+
+/* Avatar */
+.avatar {
+ flex: none;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ color: #ffffff;
+ font-weight: 650;
+ user-select: none;
+}
+
+/* Panels */
+.panel {
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ box-shadow: var(--shadow);
+}
+
+.empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ padding: 48px 24px;
+ text-align: center;
+}
+
+.empty h2 {
+ font-size: 17px;
+ font-weight: 650;
+}
+
+.empty p {
+ max-width: 380px;
+ color: var(--muted);
+}
+
+.empty .btn {
+ margin-top: 8px;
+}
+
+/* Chat */
+.chat {
+ display: grid;
+ grid-template-columns: 300px 1fr;
+ height: calc(100vh - 150px);
+ min-height: 480px;
+ overflow: hidden;
+}
+
+.chat-side {
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid var(--border);
+ min-width: 0;
+}
+
+.side-title {
+ padding: 14px 16px;
+ font-size: 13px;
+ font-weight: 650;
+ color: var(--muted);
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+}
+
+.friend-list {
+ flex: 1;
+ margin: 0;
+ padding: 0 8px 8px;
+ list-style: none;
+ overflow-y: auto;
+}
+
+.friend {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 10px 8px;
+ border-radius: var(--radius-sm);
+}
+
+.friend:hover {
+ background: var(--surface-2);
+}
+
+.friend[aria-current="true"] {
+ background: var(--accent-soft);
+}
+
+.friend-text {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.friend-name {
+ font-weight: 600;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.friend-address,
+.mono {
+ font-family: var(--mono);
+ font-size: 12.5px;
+ color: var(--muted);
+}
+
+.side-empty {
+ padding: 24px 16px;
+ color: var(--muted);
+}
+
+.chat-main {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.chat-head {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--border);
+}
+
+.back {
+ display: none;
+ padding: 6px;
+ margin-left: -6px;
+ border-radius: var(--radius-sm);
+ color: var(--muted);
+}
+
+.messages {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ padding: 16px;
+ overflow-y: auto;
+}
+
+.bubble {
+ max-width: min(520px, 80%);
+ padding: 8px 12px;
+ border-radius: 14px;
+ background: var(--theirs);
+ overflow-wrap: anywhere;
+}
+
+.bubble.mine {
+ align-self: flex-end;
+ background: var(--mine);
+ color: var(--mine-text);
+}
+
+.bubble-meta {
+ margin-top: 2px;
+ font-weight: 400;
+ font-size: 12px;
+ opacity: 0.7;
+ font-variant-numeric: tabular-nums;
+}
+
+.bubble.pending {
+ opacity: 0.6;
+}
+
+.composer {
+ display: flex;
+ gap: 8px;
+ padding: 12px 16px;
+ border-top: 1px solid var(--border);
+}
+
+.input {
+ flex: 1;
+ min-width: 0;
+ min-height: 40px;
+ padding: 0 12px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ background: var(--surface);
+}
+
+.input:focus-visible {
+ outline-offset: 0;
+ border-color: var(--accent);
+}
+
+/* People and leaderboard */
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 12px;
+}
+
+.person {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 14px 16px;
+}
+
+.person .friend-text {
+ flex: 1;
+}
+
+.table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.table th,
+.table td {
+ padding: 12px 16px;
+ text-align: left;
+ border-bottom: 1px solid var(--border);
+}
+
+.table tbody tr:last-child td {
+ border-bottom: 0;
+}
+
+.table th {
+ font-size: 13px;
+ font-weight: 650;
+ color: var(--muted);
+}
+
+.table .num {
+ text-align: right;
+ font-variant-numeric: tabular-nums;
+}
+
+.table .who {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-weight: 600;
+}
+
+/* Dialog and notice */
+.scrim {
+ position: fixed;
+ inset: 0;
+ z-index: 30;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 16px;
+ background: rgba(10, 12, 16, 0.55);
+}
+
+.dialog {
+ width: 100%;
+ max-width: 420px;
+ padding: 24px;
+}
+
+.dialog h2 {
+ font-size: 18px;
+ font-weight: 650;
+}
+
+.dialog p {
+ margin-top: 6px;
+ color: var(--muted);
+}
+
+.field {
+ margin-top: 16px;
+}
+
+.field label {
+ display: block;
+ margin-bottom: 6px;
+ font-size: 13px;
+ font-weight: 600;
+}
+
+.field .input {
+ width: 100%;
+}
+
+.dialog-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+ margin-top: 20px;
+}
+
+.notice {
+ position: fixed;
+ left: 50%;
+ bottom: 24px;
+ z-index: 40;
+ width: min(480px, calc(100% - 32px));
+ transform: translateX(-50%);
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ padding: 12px 14px;
+ border: 1px solid var(--danger);
+ border-radius: var(--radius);
+ background: var(--danger-soft);
+ color: var(--text);
+}
+
+.notice p {
+ flex: 1;
+}
+
+.notice button {
+ border: 0;
+ background: none;
+ font-weight: 600;
+ cursor: pointer;
+ color: var(--danger);
+}
+
+/* Narrow screens: list and chat are separate views */
+@media (max-width: 720px) {
+ .header-inner {
+ flex-wrap: wrap;
+ padding: 8px 16px;
+ gap: 8px 16px;
+ }
+
+ .nav {
+ order: 3;
+ flex-basis: 100%;
+ }
+
+ .chat {
+ grid-template-columns: 1fr;
+ height: calc(100vh - 190px);
+ }
+
+ .chat.has-chat .chat-side,
+ .chat:not(.has-chat) .chat-main {
+ display: none;
+ }
+
+ .chat-side {
+ border-right: 0;
+ }
+
+ .back {
+ display: inline-flex;
+ }
+
+ .chip-name {
+ display: none;
+ }
+}
diff --git a/styles/leaderboard.module.css b/styles/leaderboard.module.css
deleted file mode 100644
index 59ad16f0..00000000
--- a/styles/leaderboard.module.css
+++ /dev/null
@@ -1,68 +0,0 @@
-.LeaderboardContainer {
- max-width: 800px;
- margin: 2rem auto;
- padding: 1rem;
- background: linear-gradient(
- 145deg,
- rgba(41, 47, 63, 0.95),
- rgba(20, 25, 40, 0.95)
- );
- border-radius: 12px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
- color: #fff;
-}
-
-.LeaderboardContainer h1 {
- text-align: center;
- margin-bottom: 1.5rem;
- font-size: 2rem;
- color: #f18303;
-}
-
-.LeaderboardTable {
- width: 100%;
- border-collapse: collapse;
-}
-
-.LeaderboardTable th,
-.LeaderboardTable td {
- padding: 0.8rem 1rem;
- text-align: left;
-}
-
-.LeaderboardTable th {
- background: rgba(241, 131, 3, 0.2);
- color: #fff;
- font-weight: 600;
- letter-spacing: 0.5px;
-}
-
-.LeaderboardTable tbody tr {
- border-bottom: 1px solid rgba(241, 131, 3, 0.2);
- transition: background 0.3s ease-in-out;
-}
-
-.LeaderboardTable tbody tr:nth-child(even) {
- background: rgba(255, 255, 255, 0.05);
-}
-
-.LeaderboardTable tbody tr:hover {
- background: rgba(241, 131, 3, 0.1);
-}
-
-.LeaderboardTable td {
- font-size: 1rem;
- color: #fff;
-}
-
-@media only screen and (max-width: 600px) {
- .LeaderboardTable th,
- .LeaderboardTable td {
- padding: 0.6rem 0.8rem;
- font-size: 0.9rem;
- }
-
- .LeaderboardContainer h1 {
- font-size: 1.5rem;
- }
-}
+ 
