From 37de06e6aab91b35800da40e931adf63763ce8aa Mon Sep 17 00:00:00 2001
From: alanrsoares <alan@axelar.network>
Date: Thu, 18 Jan 2024 10:52:33 -0300
Subject: [PATCH 1/4] feat: expose admin procedures for managing global message
 & account stastuses

---
 apps/maestro/src/server/routers/_app.ts                   | 2 ++
 .../src/server/routers/accounts/getAccountStatuses.ts     | 5 +++++
 apps/maestro/src/server/routers/accounts/index.ts         | 8 ++++++++
 apps/maestro/src/server/routers/messages/index.ts         | 2 ++
 .../src/server/routers/messages/setGlobalMessage.ts       | 8 ++++++++
 5 files changed, 25 insertions(+)
 create mode 100644 apps/maestro/src/server/routers/accounts/getAccountStatuses.ts
 create mode 100644 apps/maestro/src/server/routers/accounts/index.ts
 create mode 100644 apps/maestro/src/server/routers/messages/setGlobalMessage.ts

diff --git a/apps/maestro/src/server/routers/_app.ts b/apps/maestro/src/server/routers/_app.ts
index 904c5fed8..3722dc013 100644
--- a/apps/maestro/src/server/routers/_app.ts
+++ b/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;
diff --git a/apps/maestro/src/server/routers/accounts/getAccountStatuses.ts b/apps/maestro/src/server/routers/accounts/getAccountStatuses.ts
new file mode 100644
index 000000000..a39a112fb
--- /dev/null
+++ b/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();
+});
diff --git a/apps/maestro/src/server/routers/accounts/index.ts b/apps/maestro/src/server/routers/accounts/index.ts
new file mode 100644
index 000000000..e7f3cddc2
--- /dev/null
+++ b/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;
diff --git a/apps/maestro/src/server/routers/messages/index.ts b/apps/maestro/src/server/routers/messages/index.ts
index 7fea3803e..5b952b8eb 100644
--- a/apps/maestro/src/server/routers/messages/index.ts
+++ b/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;
diff --git a/apps/maestro/src/server/routers/messages/setGlobalMessage.ts b/apps/maestro/src/server/routers/messages/setGlobalMessage.ts
new file mode 100644
index 000000000..1646454d2
--- /dev/null
+++ b/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);
+  });

From 072ce67d4164df15135fcd5fbc3ae0df0a8d39e9 Mon Sep 17 00:00:00 2001
From: alanrsoares <alan@axelar.network>
Date: Thu, 18 Jan 2024 10:54:24 -0300
Subject: [PATCH 2/4] feat: add basic admin management for global messages +
 listing account statuses

---
 apps/maestro/src/pages/admin/index.tsx | 88 +++++++++++++++++++++++++-
 1 file changed, 87 insertions(+), 1 deletion(-)

diff --git a/apps/maestro/src/pages/admin/index.tsx b/apps/maestro/src/pages/admin/index.tsx
index 42fcf58c3..f47858603 100644
--- a/apps/maestro/src/pages/admin/index.tsx
+++ b/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>
+  );
+};

From a3302971e41e5960970d57a5c19e4a220997038a Mon Sep 17 00:00:00 2001
From: alanrsoares <alan@axelar.network>
Date: Thu, 18 Jan 2024 10:54:57 -0300
Subject: [PATCH 3/4] chore: add suspense + fullscreen loaders

---
 .../RecentTransactionsTable.tsx               | 34 +++++++++-----
 .../src/pages/recent-transactions/index.tsx   | 45 +++++++++++--------
 .../src/services/db/kv/MaestroKVClient.ts     | 17 +++++++
 apps/maestro/src/ui/layouts/Page.tsx          | 26 ++++++-----
 .../ui/pages/InterchainTokensPage/index.tsx   |  6 ++-
 5 files changed, 85 insertions(+), 43 deletions(-)

diff --git a/apps/maestro/src/features/RecentTransactions/RecentTransactionsTable.tsx b/apps/maestro/src/features/RecentTransactions/RecentTransactionsTable.tsx
index fcf7874be..d777a5a89 100644
--- a/apps/maestro/src/features/RecentTransactions/RecentTransactionsTable.tsx
+++ b/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,
diff --git a/apps/maestro/src/pages/recent-transactions/index.tsx b/apps/maestro/src/pages/recent-transactions/index.tsx
index 0f04be34f..3401b3b41 100644
--- a/apps/maestro/src/pages/recent-transactions/index.tsx
+++ b/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>
   );
diff --git a/apps/maestro/src/services/db/kv/MaestroKVClient.ts b/apps/maestro/src/services/db/kv/MaestroKVClient.ts
index e2f465a90..071f621bf 100644
--- a/apps/maestro/src/services/db/kv/MaestroKVClient.ts
+++ b/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);
diff --git a/apps/maestro/src/ui/layouts/Page.tsx b/apps/maestro/src/ui/layouts/Page.tsx
index 2267a069c..62aafc613 100644
--- a/apps/maestro/src/ui/layouts/Page.tsx
+++ b/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,
 });
diff --git a/apps/maestro/src/ui/pages/InterchainTokensPage/index.tsx b/apps/maestro/src/ui/pages/InterchainTokensPage/index.tsx
index 5589d906c..da31967c9 100644
--- a/apps/maestro/src/ui/pages/InterchainTokensPage/index.tsx
+++ b/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>

From d35bf651034ef41dc36b25ec8d2571003769e0eb Mon Sep 17 00:00:00 2001
From: alanrsoares <alan@axelar.network>
Date: Thu, 18 Jan 2024 11:39:15 -0300
Subject: [PATCH 4/4] chore: fix modal title and labels

---
 .../TransferInterchainTokenOperatorship.tsx        | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/maestro/src/features/ManageInterchainToken/actions/transfer-operatorship/TransferInterchainTokenOperatorship.tsx b/apps/maestro/src/features/ManageInterchainToken/actions/transfer-operatorship/TransferInterchainTokenOperatorship.tsx
index 39ade4c7c..ff947f96c 100644
--- a/apps/maestro/src/features/ManageInterchainToken/actions/transfer-operatorship/TransferInterchainTokenOperatorship.tsx
+++ b/apps/maestro/src/features/ManageInterchainToken/actions/transfer-operatorship/TransferInterchainTokenOperatorship.tsx
@@ -37,7 +37,7 @@ export const TransferInterchainTokenOperatorship: FC = () => {
   });
 
   const {
-    writeAsync: transferOwnershipAsync,
+    writeAsync: transferOperatorshipAsync,
     isLoading: isTransfering,
     data: transferResult,
   } = useInterchainTokenServiceTransferOperatorship({
@@ -83,7 +83,7 @@ export const TransferInterchainTokenOperatorship: FC = () => {
       });
 
       try {
-        const txResult = await transferOwnershipAsync({
+        const txResult = await transferOperatorshipAsync({
           args: [data.recipientAddress],
         });
 
@@ -97,10 +97,10 @@ export const TransferInterchainTokenOperatorship: FC = () => {
       } catch (error) {
         if (error instanceof TransactionExecutionError) {
           toast.error(
-            `Failed to transfer token ownership: ${error.cause.shortMessage}`
+            `Failed to transfer rate limit manager: ${error.cause.shortMessage}`
           );
           logger.error(
-            `Failed to transfer token ownership: ${error.cause.message}`
+            `Failed to transfer rate limit manager: ${error.cause.message}`
           );
 
           setTxState({
@@ -115,14 +115,14 @@ export const TransferInterchainTokenOperatorship: FC = () => {
         });
       }
     },
-    [chainId, setTxState, transferOwnershipAsync]
+    [chainId, setTxState, transferOperatorshipAsync]
   );
 
   const buttonChildren = useMemo(() => {
     switch (txState.status) {
       case "idle":
       case "confirmed":
-        return "Transfer token ownership";
+        return "Transfer rate limit manager";
       case "awaiting_approval":
         return "Confirm on wallet";
       case "submitted":
@@ -135,7 +135,7 @@ export const TransferInterchainTokenOperatorship: FC = () => {
   return (
     <>
       <Dialog.Title className="flex">
-        <span>Transfer token ownership</span>
+        <span>Transfer rate limit manager</span>
       </Dialog.Title>
       {txState.status === "confirmed" ? (
         <Alert status="success">