From 89cf04bf3ea80ce4cfaee7a27766d2a5686fe3d9 Mon Sep 17 00:00:00 2001
From: Matias Benary <matiasbenary@gmail.com>
Date: Fri, 9 Aug 2024 19:20:20 -0300
Subject: [PATCH 1/2] feat: added key utilities

---
 src/components/wallet-utilities/KeyTable.tsx | 111 +++++++++++++++++++
 src/pages/wallet-utilities.tsx               |  12 +-
 2 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 src/components/wallet-utilities/KeyTable.tsx

diff --git a/src/components/wallet-utilities/KeyTable.tsx b/src/components/wallet-utilities/KeyTable.tsx
new file mode 100644
index 000000000..64baaeec2
--- /dev/null
+++ b/src/components/wallet-utilities/KeyTable.tsx
@@ -0,0 +1,111 @@
+import { Button, Table, Text, Tooltip } from '@near-pagoda/ui';
+import type { DeleteKeyAction } from '@near-wallet-selector/core';
+import { useEffect, useState } from 'react';
+
+import { useAuthStore } from '@/stores/auth';
+import { useVmStore } from '@/stores/vm';
+
+type AccessKey = {
+  public_key: string;
+  access_key: {
+    permission: {
+      FunctionCall?: {
+        receiver_id: string;
+        allowance?: string;
+      };
+    };
+  };
+};
+
+const KeyTable: React.FC = () => {
+  const near = useVmStore((store) => store.near);
+  const accountId = useAuthStore((store) => store.accountId);
+  const wallet = useAuthStore((store) => store.wallet);
+
+  const [keys, setKeys] = useState<AccessKey[]>([]);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (!near || !accountId) return;
+
+    const getInfo = async () => {
+      const { nearConnection } = near;
+      const account = await nearConnection.account(accountId);
+      const accessKeys = (await account.getAccessKeys()) as AccessKey[];
+      setKeys(accessKeys.filter((accessKey) => accessKey.access_key.permission.FunctionCall));
+    };
+
+    getInfo();
+  }, [near, accountId]);
+
+  const truncatePublicKey = (key: string): string => `${key.slice(0, 20)}...`;
+
+  const handleSelectAll = (): void => {
+    if (selectedKeys.length === keys.length) {
+      setSelectedKeys([]);
+    } else {
+      setSelectedKeys(keys.map((key) => key.public_key));
+    }
+  };
+
+  const handleSelect = (id: string): void => {
+    setSelectedKeys((prev) => (prev.includes(id) ? prev.filter((keyId) => keyId !== id) : [...prev, id]));
+  };
+
+  const handleDeauthorizeAll = async (): Promise<void> => {
+    if (!accountId || !wallet) return;
+
+    const actions: DeleteKeyAction[] = selectedKeys.map((publicKey) => {
+      return {
+        type: 'DeleteKey',
+        params: {
+          publicKey: publicKey,
+        },
+      };
+    });
+
+    await wallet.signAndSendTransaction({ receiverId: accountId, actions });
+  };
+
+  return (
+    <>
+      <Button label="Deauthorize" onClick={handleDeauthorizeAll} disabled={selectedKeys.length === 0} />
+      <Table.Root style={{ width: '100%' }}>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>
+              <input type="checkbox" onChange={handleSelectAll} checked={selectedKeys.length === keys.length} />
+            </Table.HeaderCell>
+            <Table.HeaderCell>Receiver ID</Table.HeaderCell>
+            <Table.HeaderCell>Keys</Table.HeaderCell>
+            <Table.HeaderCell>Fee Allowance</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {keys.map((data) => (
+            <Table.Row key={data.public_key}>
+              <Table.Cell>
+                <input
+                  type="checkbox"
+                  onChange={() => handleSelect(data.public_key)}
+                  checked={selectedKeys.includes(data.public_key)}
+                />
+              </Table.Cell>
+              <Table.Cell>{data.access_key.permission.FunctionCall?.receiver_id ?? 'N/A'}</Table.Cell>
+              <Table.Cell>
+                <Tooltip content={data.public_key}>
+                  <Text>{truncatePublicKey(data.public_key)}</Text>
+                </Tooltip>
+              </Table.Cell>
+              <Table.Cell>
+                {parseFloat(data.access_key.permission.FunctionCall?.allowance ?? '0') / 1e24} NEAR
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+    </>
+  );
+};
+
+export default KeyTable;
diff --git a/src/pages/wallet-utilities.tsx b/src/pages/wallet-utilities.tsx
index 9933e1fca..6b1639a94 100644
--- a/src/pages/wallet-utilities.tsx
+++ b/src/pages/wallet-utilities.tsx
@@ -1,9 +1,10 @@
 import { Button, Card, Container, Flex, Section, SvgIcon, Tabs } from '@near-pagoda/ui';
 import { Text } from '@near-pagoda/ui';
-import { HandCoins, LockKeyOpen, PaperPlaneTilt } from '@phosphor-icons/react';
+import { HandCoins, Key, LockKeyOpen, PaperPlaneTilt } from '@phosphor-icons/react';
 import { useRouter } from 'next/router';
 
 import { ExportFastAuthAccount } from '@/components/wallet-utilities/ExportFastAuthAccount';
+import KeyTable from '@/components/wallet-utilities/KeyTable';
 import { ReceiveNear } from '@/components/wallet-utilities/ReceiveNear';
 import { SendNear } from '@/components/wallet-utilities/SendNear';
 import { useDefaultLayout } from '@/hooks/useLayout';
@@ -43,6 +44,11 @@ const WalletUtilitiesPage: NextPageWithLayout = () => {
                     <SvgIcon icon={<LockKeyOpen fill="bold" />} />
                     Export Account
                   </Tabs.Trigger>
+
+                  <Tabs.Trigger href="?tab=key" value="key">
+                    <SvgIcon icon={<Key fill="bold" />} />
+                    Keys
+                  </Tabs.Trigger>
                 </Tabs.List>
 
                 <Tabs.Content value="send">
@@ -56,6 +62,10 @@ const WalletUtilitiesPage: NextPageWithLayout = () => {
                 <Tabs.Content value="export">
                   <ExportFastAuthAccount />
                 </Tabs.Content>
+
+                <Tabs.Content value="key">
+                  <KeyTable />
+                </Tabs.Content>
               </Tabs.Root>
             </Card>
           ) : (

From 6468eefa8ce41f0b0b847168ba23a314421a82cf Mon Sep 17 00:00:00 2001
From: Matias Benary <matiasbenary@gmail.com>
Date: Mon, 12 Aug 2024 11:24:28 -0300
Subject: [PATCH 2/2] fix: styles

---
 src/components/wallet-utilities/KeyTable.tsx | 19 +++++++++++++------
 src/pages/wallet-utilities.tsx               |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/wallet-utilities/KeyTable.tsx b/src/components/wallet-utilities/KeyTable.tsx
index 64baaeec2..cb73a69e4 100644
--- a/src/components/wallet-utilities/KeyTable.tsx
+++ b/src/components/wallet-utilities/KeyTable.tsx
@@ -38,8 +38,6 @@ const KeyTable: React.FC = () => {
     getInfo();
   }, [near, accountId]);
 
-  const truncatePublicKey = (key: string): string => `${key.slice(0, 20)}...`;
-
   const handleSelectAll = (): void => {
     if (selectedKeys.length === keys.length) {
       setSelectedKeys([]);
@@ -69,9 +67,10 @@ const KeyTable: React.FC = () => {
 
   return (
     <>
+      <Text size="text-s">Function call keys created by applications:</Text>
       <Button label="Deauthorize" onClick={handleDeauthorizeAll} disabled={selectedKeys.length === 0} />
       <Table.Root style={{ width: '100%' }}>
-        <Table.Head>
+        <Table.Head sticky={false}>
           <Table.Row>
             <Table.HeaderCell>
               <input type="checkbox" onChange={handleSelectAll} checked={selectedKeys.length === keys.length} />
@@ -91,14 +90,22 @@ const KeyTable: React.FC = () => {
                   checked={selectedKeys.includes(data.public_key)}
                 />
               </Table.Cell>
-              <Table.Cell>{data.access_key.permission.FunctionCall?.receiver_id ?? 'N/A'}</Table.Cell>
+              <Table.Cell>
+                <Tooltip content={data.access_key.permission.FunctionCall?.receiver_id ?? 'N/A'}>
+                  <Text style={{ minWidth: '5rem' }} clampLines={1}>
+                    {data.access_key.permission.FunctionCall?.receiver_id ?? 'N/A'}
+                  </Text>
+                </Tooltip>
+              </Table.Cell>
               <Table.Cell>
                 <Tooltip content={data.public_key}>
-                  <Text>{truncatePublicKey(data.public_key)}</Text>
+                  <Text style={{ minWidth: '5rem' }} clampLines={1}>
+                    {data.public_key}
+                  </Text>
                 </Tooltip>
               </Table.Cell>
               <Table.Cell>
-                {parseFloat(data.access_key.permission.FunctionCall?.allowance ?? '0') / 1e24} NEAR
+                {(parseFloat(data.access_key.permission.FunctionCall?.allowance ?? '0') / 1e24).toFixed(2)} NEAR
               </Table.Cell>
             </Table.Row>
           ))}
diff --git a/src/pages/wallet-utilities.tsx b/src/pages/wallet-utilities.tsx
index 6b1639a94..5f66d27b8 100644
--- a/src/pages/wallet-utilities.tsx
+++ b/src/pages/wallet-utilities.tsx
@@ -47,7 +47,7 @@ const WalletUtilitiesPage: NextPageWithLayout = () => {
 
                   <Tabs.Trigger href="?tab=key" value="key">
                     <SvgIcon icon={<Key fill="bold" />} />
-                    Keys
+                    Apps
                   </Tabs.Trigger>
                 </Tabs.List>