From 4b9b0676e651f4fa457554a745631011d3701057 Mon Sep 17 00:00:00 2001
From: bluecco <bluecco@gmail.com>
Date: Fri, 18 Oct 2024 10:24:58 +0200
Subject: [PATCH] fix: update ui for sign message

---
 src/components/Actions/SignMessage.tsx | 146 +++++++++++++++++++------
 1 file changed, 112 insertions(+), 34 deletions(-)

diff --git a/src/components/Actions/SignMessage.tsx b/src/components/Actions/SignMessage.tsx
index 7a8dcba..802e840 100644
--- a/src/components/Actions/SignMessage.tsx
+++ b/src/components/Actions/SignMessage.tsx
@@ -5,7 +5,7 @@ import {
   walletStarknetkitNextAtom,
 } from "@/state/connectedWalletStarknetkitNext"
 import { lastTxStatusAtom } from "@/state/transactionState"
-import { Button, Flex, Heading, Input, Textarea } from "@chakra-ui/react"
+import { Button, Flex, Heading, Input, Text, Textarea } from "@chakra-ui/react"
 import { useAtomValue, useSetAtom } from "jotai"
 import { FC, useState } from "react"
 import { Account, AccountInterface, stark } from "starknet"
@@ -60,36 +60,38 @@ const SignMessage: FC<SignMessageProps> = ({ account, wallet }) => {
   }
 
   return (
-    <Flex flex={1} width="full">
-      <Flex
-        as="form"
-        onSubmit={(e) => {
-          e.preventDefault()
-          handleSignSubmit()
-        }}
-        direction="column"
-        flex={1}
-        p="4"
-        gap="3"
-        borderTopLeftRadius="lg"
-        borderBottomLeftRadius="lg"
-      >
-        <Heading as="h2">Sign Message</Heading>
+    <>
+      <Flex flex={1} width="full">
+        <Flex
+          as="form"
+          onSubmit={(e) => {
+            e.preventDefault()
+            handleSignSubmit()
+          }}
+          direction="column"
+          flex={1}
+          p="4"
+          gap="3"
+          borderTopLeftRadius="lg"
+          borderBottomLeftRadius="lg"
+        >
+          <Heading as="h2">Sign Message</Heading>
 
-        <Input
-          type="text"
-          id="short-text"
-          name="short-text"
-          placeholder="Short text"
-          value={shortText}
-          onChange={(e) => setShortText(e.target.value)}
-        />
+          <Input
+            type="text"
+            id="short-text"
+            name="short-text"
+            placeholder="Short text"
+            value={shortText}
+            onChange={(e) => setShortText(e.target.value)}
+          />
 
-        <div style={{ display: "flex", alignItems: "center", gap: "1em" }}>
-          <Button colorScheme="primary" type="submit" w="full">
-            Sign
-          </Button>
-        </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "1em" }}>
+            <Button colorScheme="primary" type="submit" w="full">
+              Sign
+            </Button>
+          </div>
+        </Flex>
       </Flex>
       <Flex
         as="form"
@@ -102,12 +104,88 @@ const SignMessage: FC<SignMessageProps> = ({ account, wallet }) => {
       >
         <Heading as="h2">Sign results</Heading>
 
-        {/* Label and textarea for value r */}
-        <Textarea id="r" name="r" placeholder="r" value={lastSig[0]} readOnly />
-        {/* Label and textarea for value s */}
-        <Textarea id="s" name="s" placeholder="s" value={lastSig[1]} readOnly />
+        {lastSig && lastSig.length > 0 && (
+          <>
+            {lastSig.length % 2 === 0 ? (
+              <>
+                {/* Label and textarea for value r */}
+                <Textarea
+                  id="r"
+                  name="r"
+                  placeholder="r"
+                  value={lastSig[0]}
+                  readOnly
+                />
+                {/* Label and textarea for value s */}
+                <Textarea
+                  id="s"
+                  name="s"
+                  placeholder="s"
+                  value={lastSig[1]}
+                  readOnly
+                />
+              </>
+            ) : (
+              <>
+                SignatureLength: {lastSig[0]}
+                <Text mb="4px">Signer</Text>
+                <Textarea
+                  id="signer"
+                  name="signer"
+                  placeholder="signer"
+                  value={lastSig[2]}
+                  readOnly
+                />
+                <Text my="4px">r</Text>
+                <Textarea
+                  id="r"
+                  name="r"
+                  placeholder="r"
+                  value={lastSig[3]}
+                  readOnly
+                />
+                <Text my="4px">s</Text>
+                <Textarea
+                  id="s"
+                  name="s"
+                  placeholder="s"
+                  value={lastSig[4]}
+                  readOnly
+                />
+                {lastSig.length > 5 && (
+                  <>
+                    <Text mb="4px">Cosigner</Text>
+                    <Textarea
+                      id="signer"
+                      name="signer"
+                      placeholder="signer"
+                      value={lastSig[6]}
+                      readOnly
+                    />
+                    <Text my="4px">r</Text>
+                    <Textarea
+                      id="r"
+                      name="r"
+                      placeholder="r"
+                      value={lastSig[7]}
+                      readOnly
+                    />
+                    <Text my="4px">s</Text>
+                    <Textarea
+                      id="s"
+                      name="s"
+                      placeholder="s"
+                      value={lastSig[8]}
+                      readOnly
+                    />
+                  </>
+                )}
+              </>
+            )}
+          </>
+        )}
       </Flex>
-    </Flex>
+    </>
   )
 }