add signing message operation

Author: juliancwirko

CHANGELOG.md

@@ -1,3 +1,6 @@
+### [0.10.0](https://github.com/xdevguild/buildo.dev/releases/tag/v0.10.0) (2023-12-01)
+- add sign a message operation
+
 ### [0.9.0](https://github.com/xdevguild/buildo.dev/releases/tag/v0.9.0) (2023-11-29)
 - add verify signature operation
 - update dependencies

components/home-cards.tsx

@@ -118,15 +118,16 @@ export const HomeCards = () => {
                 setDialogState('general', 'multiTransfer');
               },
             },
-            {
-              title: 'Deploy a custom smart contract',
-              description: 'You can deploy any custom smart contract',
-              onClick: () => {},
-              disabled: true,
-            },
             {
               title: 'Sign a message',
               description: 'You can sign any message using your wallet',
+              onClick: () => {
+                setDialogState('general', 'signMessage');
+              },
+            },
+            {
+              title: 'Deploy a custom smart contract',
+              description: 'You can deploy any custom smart contract',
               onClick: () => {},
               disabled: true,
             },

components/operations/general/sign-message.tsx

@@ -0,0 +1,77 @@
+import * as z from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Form } from '@/components/ui/form';
+import {
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { OperationsInputField } from '@/components/operations/operations-input-field';
+import { OperationsSubmitButton } from '@/components/operations/operations-submit-button';
+import { DialogDescription } from '@radix-ui/react-dialog';
+import { useSignMessage } from '@useelven/core';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AlertCircle } from 'lucide-react';
+
+const formSchema = z.object({
+  message: z.string().min(1, 'The field is required'),
+});
+
+export const SignMessage = () => {
+  const { signMessage, pending, signature } = useSignMessage();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      message: '',
+    },
+  });
+
+  const onSubmit = async ({ message }: z.infer<typeof formSchema>) => {
+    signMessage({ message });
+  };
+
+  return (
+    <>
+      <DialogHeader className="p-8 pb-0">
+        <DialogTitle>Sign a message</DialogTitle>
+        <DialogDescription>
+          You can sign any message using your wallet address as a key. You can
+          also verify signed messages. Check the Utilities section.
+        </DialogDescription>
+      </DialogHeader>
+      <div className="overflow-y-auto py-0 px-8">
+        <Form {...form}>
+          <form
+            id="sign-message-form"
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-8"
+          >
+            <div className="flex-1 overflow-auto p-1">
+              <OperationsInputField
+                name="message"
+                label="Message"
+                type="textarea"
+                placeholder="Example: <Your custom message...>"
+                description="Please provide the message to sign"
+              />
+            </div>
+          </form>
+        </Form>
+        {signature && (
+          <Alert className="break-words">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>The signature:</AlertTitle>
+            <AlertDescription className="mt-3 font-bold">
+              {signature}
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+      <DialogFooter className="py-4 px-8">
+        <OperationsSubmitButton formId="sign-message-form" pending={pending} />
+      </DialogFooter>
+    </>
+  );
+};

components/operations/operations-content-map.tsx

@@ -40,6 +40,7 @@ import { AddNftUris } from '@/components/operations/non-fungible-tokens/add-nft-
 import { MultiTransfer } from '@/components/operations/general/multi-transfer';
 import { BurnNft } from '@/components/operations/non-fungible-tokens/burn';
 import { VerifySignature } from '@/components/operations/utils-operations/verify-signature';
+import { SignMessage } from '@/components/operations/general/sign-message';
 
 export type OperationsContentMap = Record<
   string,
@@ -466,5 +467,8 @@ export const getOperationsContentsMap = ({
       additionalInfo: 'You have sent multiple ESDTs.',
       tokenTransfer: true,
     },
+    signMessage: {
+      component: <SignMessage />,
+    },
   },
 });

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "buildo.dev",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "author": "Julian Ćwirko <julian.io>",
   "license": "MIT",
   "homepage": "https://www.buildo.dev",
@@ -31,7 +31,7 @@
     "@radix-ui/react-separator": "1.0.3",
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-tooltip": "1.0.7",
-    "@useelven/core": "0.11.0",
+    "@useelven/core": "0.12.0",
     "axios": "1.6.2",
     "bignumber.js": "9.1.2",
     "buffer": "6.0.3",
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@types/keccak": "3.0.4",
-    "@types/node": "20.10.0",
+    "@types/node": "20.10.1",
     "@types/qrcode": "1.5.5",
     "@types/react": "18.2.39",
     "@types/react-dom": "18.2.17",