feat/admin panel manage global message

apps/maestro/src/features/RecentTransactions/RecentTransactionsTable.tsx

@@ -30,19 +30,29 @@ export const RecentTransactionsTable: FC<Props> = ({
     setPage(0);
   }, [contractMethod]);
 
-  const { data: txns, isLoading } = trpc.gmp.getRecentTransactions.useQuery({
-    contractMethod,
-    senderAddress,
-    pageSize: maxTransactions,
-    page,
-  });
+  const { data: txns, isLoading } = trpc.gmp.getRecentTransactions.useQuery(
+    {
+      contractMethod,
+      senderAddress,
+      pageSize: maxTransactions,
+      page,
+    },
+    {
+      suspense: true,
+    }
+  );
 
-  const { data: prevPageTxns } = trpc.gmp.getRecentTransactions.useQuery({
-    contractMethod,
-    senderAddress,
-    pageSize: maxTransactions,
-    page: page > 0 ? page - 1 : 0,
-  });
+  const { data: prevPageTxns } = trpc.gmp.getRecentTransactions.useQuery(
+    {
+      contractMethod,
+      senderAddress,
+      pageSize: maxTransactions,
+      page: page > 0 ? page - 1 : 0,
+    },
+    {
+      suspense: true,
+    }
+  );
 
   const { data: nextPageTxns } = trpc.gmp.getRecentTransactions.useQuery({
     contractMethod,

apps/maestro/src/pages/admin/index.tsx

@@ -1,11 +1,97 @@
+import { Button, Card, CopyToClipboardButton, Table } from "@axelarjs/ui";
+import { useEffect, useState } from "react";
+
 import { withRouteProtection } from "~/lib/auth";
+import { trpc } from "~/lib/trpc";
 import Page from "~/ui/layouts/Page";
 
 const AdminIndexPage = () => {
-  return <Page>admin</Page>;
+  return (
+    <Page title="Admin" className="flex flex-1 flex-col gap-4" mustBeConnected>
+      <Page.Title>Admin Panel</Page.Title>
+      <Page.Content className="gap-4">
+        <GlobalMessageManager />
+        <AccountStatuses />
+      </Page.Content>
+    </Page>
+  );
 };
 
 export default withRouteProtection(AdminIndexPage, {
   redirectTo: "/",
   accountStatuses: ["privileged"],
 });
+
+const GlobalMessageManager = () => {
+  const { data: globalMessage } = trpc.messages.getGlobalMessage.useQuery();
+  const { mutateAsync: saveGlobalMessage, isLoading: isSavingGlobalMessage } =
+    trpc.messages.setGlobalMessage.useMutation();
+
+  const [newMessage, setNewMessage] = useState(globalMessage?.content || "");
+
+  useEffect(() => {
+    setNewMessage(globalMessage?.content || "");
+  }, [globalMessage]);
+
+  return (
+    <Card className="bg-base-200">
+      <Card.Body>
+        <Card.Title>Global Message</Card.Title>
+        <textarea
+          className="textarea"
+          value={newMessage}
+          onChange={(e) => {
+            setNewMessage(e.target.value);
+          }}
+        />
+        <Card.Actions className="justify-end">
+          <Button
+            loading={isSavingGlobalMessage}
+            variant="primary"
+            onClick={async () => {
+              if (globalMessage) {
+                await saveGlobalMessage({
+                  ...globalMessage,
+                  content: newMessage,
+                });
+              }
+            }}
+          >
+            Save global message
+          </Button>
+        </Card.Actions>
+      </Card.Body>
+    </Card>
+  );
+};
+
+const AccountStatuses = () => {
+  const { data: accountStatuses } = trpc.accounts.getAccountStatuses.useQuery();
+  return (
+    <Card className="bg-base-200">
+      <Card.Body>
+        <Card.Title>Account Statuses</Card.Title>
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Column>Address</Table.Column>
+              <Table.Column>Status</Table.Column>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            {accountStatuses?.map((entry) => (
+              <Table.Row key={entry.accountAddress}>
+                <Table.Cell>
+                  <CopyToClipboardButton>
+                    {entry.accountAddress}
+                  </CopyToClipboardButton>
+                </Table.Cell>
+                <Table.Cell>{entry.status}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </Card.Body>
+    </Card>
+  );
+};

apps/maestro/src/pages/recent-transactions/index.tsx

@@ -1,5 +1,6 @@
 import { Tabs } from "@axelarjs/ui";
 import { invert } from "@axelarjs/utils";
+import { Suspense } from "react";
 
 import { useAccount } from "wagmi";
 
@@ -36,25 +37,31 @@ const RecentTransactionsPage = () => {
     >
       <Page.Title>My Recent Transactions</Page.Title>
       <div className="flex-1 space-y-4">
-        <Tabs boxed>
-          {CONTRACT_METHODS.map((method) => (
-            <Tabs.Tab
-              key={method}
-              onClick={(e) => {
-                e.preventDefault();
-                setTab(REVERSE_TAB_MAP[method]);
-              }}
-              active={contractMethod === method}
-            >
-              {CONTRACT_METHODS_LABELS[method]}
-            </Tabs.Tab>
-          ))}
-        </Tabs>
-        <RecentTransactionsTable
-          contractMethod={contractMethod}
-          senderAddress={address}
-          maxTransactions={20}
-        />
+        <Suspense
+          fallback={
+            <Page.FullScreenLoading loadingMessage="loading recent transactions..." />
+          }
+        >
+          <Tabs boxed>
+            {CONTRACT_METHODS.map((method) => (
+              <Tabs.Tab
+                key={method}
+                onClick={(e) => {
+                  e.preventDefault();
+                  setTab(REVERSE_TAB_MAP[method]);
+                }}
+                active={contractMethod === method}
+              >
+                {CONTRACT_METHODS_LABELS[method]}
+              </Tabs.Tab>
+            ))}
+          </Tabs>
+          <RecentTransactionsTable
+            contractMethod={contractMethod}
+            senderAddress={address}
+            maxTransactions={20}
+          />
+        </Suspense>
       </div>
     </Page>
   );

apps/maestro/src/server/routers/_app.ts

@@ -1,4 +1,5 @@
 import { publicProcedure, router } from "~/server/trpc";
+import { accountsRouter } from "./accounts";
 import { authRouter } from "./auth";
 import { axelarConfigsRouter } from "./axelarConfigs";
 import { axelarjsSDKRouter } from "./axelarjsSDK";
@@ -22,6 +23,7 @@ export const appRouter = router({
   auth: authRouter,
   openai: openaiRouter,
   messages: messagesRouter,
+  accounts: accountsRouter,
 });
 
 export type AppRouter = typeof appRouter;

apps/maestro/src/server/routers/accounts/getAccountStatuses.ts

@@ -0,0 +1,5 @@
+import { publicProcedure } from "~/server/trpc";
+
+export const getAccountStatuses = publicProcedure.query(async ({ ctx }) => {
+  return await ctx.persistence.kv.getAccounStatuses();
+});

apps/maestro/src/server/routers/accounts/index.ts

@@ -0,0 +1,8 @@
+import { router } from "~/server/trpc";
+import { getAccountStatuses } from "./getAccountStatuses";
+
+export const accountsRouter = router({
+  getAccountStatuses,
+});
+
+export type AccountsRouter = typeof accountsRouter;

apps/maestro/src/server/routers/messages/index.ts

@@ -1,8 +1,10 @@
 import { router } from "~/server/trpc";
 import { getGlobalMessage } from "./getMessages";
+import { setGlobalMessage } from "./setGlobalMessage";
 
 export const messagesRouter = router({
   getGlobalMessage,
+  setGlobalMessage,
 });
 
 export type MessagesRouter = typeof messagesRouter;

apps/maestro/src/server/routers/messages/setGlobalMessage.ts

@@ -0,0 +1,8 @@
+import { publicProcedure } from "~/server/trpc";
+import { messageSchema } from "~/services/db/kv";
+
+export const setGlobalMessage = publicProcedure
+  .input(messageSchema)
+  .mutation(async ({ ctx, input }) => {
+    return await ctx.persistence.kv.setGlobalMessage(input);
+  });

apps/maestro/src/services/db/kv/MaestroKVClient.ts

@@ -65,11 +65,28 @@ export default class MaestroKVClient extends BaseMaestroKVClient {
     return await this.kv.get<AccountStatus>(key);
   }
 
+  async getAccounStatuses() {
+    const match = COLLECTION_KEYS.accountStatus("*" as `0x${string}`);
+    const [, keys] = await this.kv.scan(0, { match });
+    const values = await this.kv.mget<AccountStatus[]>(keys);
+
+    return keys.map((key, i) => ({
+      // extract account address from key (e.g. "accounts:0x1234:status" -> "0x1234")
+      accountAddress: key.split(":")[1] as `0x${string}`,
+      status: values[i],
+    }));
+  }
+
   async getGlobalMessage() {
     const key = COLLECTION_KEYS.globalMessage;
     return await this.kv.hgetall<Message>(key);
   }
 
+  async setGlobalMessage(message: Message) {
+    const key = COLLECTION_KEYS.globalMessage;
+    return await this.kv.hset(key, message);
+  }
+
   async getAccountMessage(accountAddresss: `0x${string}`) {
     const key = COLLECTION_KEYS.accountMessage(accountAddresss);
     return await this.kv.hgetall<Message>(key);

apps/maestro/src/ui/layouts/Page.tsx

@@ -218,21 +218,25 @@ const Page = ({
       >
         {pageContent}
       </Clamp>
-      {isLoading && (
-        <div className="absolute inset-0 grid place-items-center bg-black/20 backdrop-blur-sm">
-          <div className="grid place-items-center gap-12 text-center">
-            <GridLoader
-              color="var(--primary)"
-              className="animate-pulse [animation-duration:3s]"
-            />
-            <span>{loadingMessage || "loading page data..."}</span>
-          </div>
-        </div>
-      )}
+      {isLoading && <FullScreenLoading loadingMessage={loadingMessage} />}
     </>
   );
 };
 
+export const FullScreenLoading = ({ loadingMessage = "" }) => (
+  <div className="absolute inset-0 grid place-items-center bg-black/20 backdrop-blur-sm">
+    <div className="grid place-items-center gap-12 text-center">
+      <GridLoader
+        color="var(--primary)"
+        className="animate-pulse [animation-duration:3s]"
+      />
+      <span>{loadingMessage || "loading page data..."}</span>
+    </div>
+  </div>
+);
+
 export default Object.assign(Page, {
   Title: tw.h1`text-2xl font-bold`,
+  Content: tw.div`flex-1 grid`,
+  FullScreenLoading,
 });

apps/maestro/src/ui/pages/InterchainTokensPage/index.tsx

@@ -10,7 +10,11 @@ const InterchainTokensPage = () => {
   return (
     <Page pageTitle="My Interchain Tokens">
       <div className="flex flex-col gap-4">
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense
+          fallback={
+            <Page.FullScreenLoading loadingMessage="loading interchain tokens..." />
+          }
+        >
           <TokenList sessionAddress={session?.address} />
         </Suspense>
       </div>