Merge pull request #3 from nachopiris/master

Sign messages

Author: Agusx1211

src/App.tsx

@@ -1,22 +1,25 @@
 import { AppShell, Box, Burger, Divider, Grid, Group, NativeSelect, NavLink, Title, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { IconCirclePlus, IconEdit, IconFileImport, IconFileUpload, IconHome, IconList, IconListDetails, IconSend2, IconWallet } from '@tabler/icons-react';
+import { IconCirclePlus, IconEdit, IconFileImport, IconFileUpload, IconHome, IconList, IconListDetails, IconMessage, IconSend2, IconWallet, IconWritingSign } from '@tabler/icons-react';
 import { Route, Routes, useLocation, useNavigate } from "react-router-dom"
 import { Create } from './sections/Create';
 import { Notifications } from '@mantine/notifications';
 import { Home } from './sections/Home';
 import { Wallet } from './sections/Wallet';
 import { useSelectedWallet } from './stores/Storage';
 import { Send } from './sections/Send';
+import { Sign } from './sections/Sign';
 import { ConnectKitButton } from 'connectkit';
 import { Transaction } from './sections/Transaction';
+import { Message } from './sections/Message';
 import { Transactions } from './sections/Transactions';
 import { useImport } from './sections/Import';
 import { ImportWallet } from './sections/ImportWallet';
 import { useWallets } from './stores/db/Wallets';
 import { Update } from './sections/Update';
 import { Updates } from './sections/Updates';
 import { UpdateDetail } from './sections/UpdateDetail';
+import { Messages } from './sections/Messages';
 
 declare var __COMMIT_HASH__: string
 
@@ -128,6 +131,20 @@ export function App() {
             active={pathname === '/updates/' + selectedWalletAddress}
             disabled={!selectedWalletAddress}
           />
+          <NavLink  
+            href={"#sign-message/" + selectedWalletAddress}
+            label="Sign Message"
+            leftSection={<IconWritingSign size="1rem" stroke={1.5} />}
+            active={pathname === '/sign-message/' + selectedWalletAddress}
+            disabled={!selectedWalletAddress}
+          />
+          <NavLink  
+            href={"#messages/" + selectedWalletAddress}
+            label="Messages"
+            leftSection={<IconMessage size="1rem" stroke={1.5} />}
+            active={pathname === '/messages/' + selectedWalletAddress}
+            disabled={!selectedWalletAddress}
+          />
           <Box mt="auto" />
           <Box>
             <Text size="sm" c="dimmed">
@@ -153,9 +170,12 @@ export function App() {
             <Route path="/new-transaction/:address" element={<Send />} />
             <Route path="/transactions/:address" element={<Transactions />} />
             <Route path="/transaction/:subdigest" element={<Transaction />} />
+            <Route path="/message/:subdigest" element={<Message />} />
             <Route path="/update/:address" element={<Update />} />
             <Route path="/updates/:address" element={<Updates />} />
             <Route path="/do-update/:subdigest" element={<UpdateDetail />} />
+            <Route path="/sign-message/:address" element={<Sign />} />
+            <Route path="/messages/:address" element={<Messages />} />
           </Routes>
         </AppShell.Main>
       </AppShell>

src/components/MiniCard.tsx

@@ -1,24 +1,93 @@
-import { Box } from "@mantine/core";
+import { Box, Tooltip } from "@mantine/core";
 import { ReactElement } from "react";
+import { notifications } from "@mantine/notifications";
+import { IconCopy, IconEye } from "@tabler/icons-react";
+
+export function MiniCard(args: {
+  title: string;
+  value: ReactElement | string;
+  shortValue?: string;
+}) {
+  const copyContent = async () => {
+    if (typeof args.value === "string") {
+      try {
+        await navigator.clipboard.writeText(args.value);
+        notifications.show({
+          title: "Text copied",
+          message: "Text successfully copied to clipboard",
+          color: "green",
+        });
+      } catch (error) {
+        notifications.show({
+          title: "Failed to copy text",
+          message: JSON.stringify(error),
+          color: "red",
+        });
+      }
+    }
+  };
 
-export function MiniCard(args: { title: string, value: ReactElement | string }) {
   return (
-    <Box style={{
-      border: "1px solid #f0f0f0",
-      borderRadius: 4,
-      padding: 16,
-      marginBottom: 16,
-      marginLeft: 8,
-      marginRight: 8
-    }}>
-      <div style={{
-        fontSize: 12,
-        color: "#666"
-      }}>{args.title}</div>
-      <div style={{
-        fontWeight: 600,
-        color: "#333"
-      }}>{args.value}</div>
+    <Box
+      style={{
+        border: "1px solid #f0f0f0",
+        borderRadius: 4,
+        padding: 16,
+        marginBottom: 16,
+        marginLeft: 8,
+        marginRight: 8,
+      }}
+    >
+      <div
+        style={{
+          fontSize: 12,
+          color: "#666",
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+      >
+        {args.title}
+        {args.shortValue && (
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              columnGap: "10px",
+            }}
+          >
+            <Tooltip
+              label={
+                <div
+                  style={{
+                    maxWidth: "800px",
+                    whiteSpace: "normal",
+                    wordWrap: "break-word",
+                  }}
+                >
+                  {args.value}
+                </div>
+              }
+            >
+              <IconEye cursor="pointer" size="1rem" stroke={1.5}></IconEye>
+            </Tooltip>
+            <IconCopy
+              cursor="pointer"
+              onClick={copyContent}
+              size="1rem"
+              stroke={1.5}
+            />
+          </div>
+        )}
+      </div>
+      <div
+        style={{
+          fontWeight: 600,
+          color: "#333",
+        }}
+      >
+        {args.shortValue || args.value}
+      </div>
     </Box>
-  )
+  );
 }

src/sections/Import.tsx

@@ -55,12 +55,13 @@ export function Import() {
 
       if (
         result.importedSignatures.length === 0 &&
+        result.importedMessages.length === 0 &&
         result.importedTransactions.length === 0 &&
         result.importedUpdates.length === 0
       ) {
         notifications.show({
           title: 'No data imported',
-          message: 'No new transactions or signatures found',
+          message: 'No new transactions, signatures or messages found',
           color: 'yellow'
         })
       } else {
@@ -72,6 +73,14 @@ export function Import() {
           })
         }
 
+        if (result.importedMessages.length > 0) {
+          notifications.show({
+            title: 'Messages imported',
+            message: 'Imported ' + result.importedMessages.length + ' messages',
+            color: 'green'
+          })
+        }
+
         if (result.importedSignatures.length > 0) {
           notifications.show({
             title: 'Signatures imported',