From 1b7787aecf1ccedf5ee6ae3ee29cc86c14802f31 Mon Sep 17 00:00:00 2001
From: LuizAsFight <felipebolsonigomes@gmail.com>
Date: Mon, 14 Oct 2024 00:37:52 -0300
Subject: [PATCH] feat: add sign message in the connectors app

---
 examples/react-app/src/App.tsx                |  2 +
 examples/react-app/src/components/feature.tsx |  4 +-
 examples/react-app/src/components/sign.tsx    | 99 +++++++++++++++++++
 .../react-app/src/components/transfer.tsx     |  3 +-
 4 files changed, 106 insertions(+), 2 deletions(-)
 create mode 100644 examples/react-app/src/components/sign.tsx

diff --git a/examples/react-app/src/App.tsx b/examples/react-app/src/App.tsx
index 9ac67ace..d0419937 100644
--- a/examples/react-app/src/App.tsx
+++ b/examples/react-app/src/App.tsx
@@ -10,6 +10,7 @@ import Balance from './components/balance';
 import Counter from './components/counter';
 import Transfer from './components/transfer';
 
+import Sign from './components/sign';
 import { useWallet } from './hooks/useWallet';
 
 export default function App() {
@@ -127,6 +128,7 @@ export default function App() {
                         isSigning={isSigning}
                         setIsSigning={setIsSigning}
                       />
+                      <Sign isSigning={isSigning} setIsSigning={setIsSigning} />
                     </section>
                   )}
                 </div>
diff --git a/examples/react-app/src/components/feature.tsx b/examples/react-app/src/components/feature.tsx
index 97014645..564b2127 100644
--- a/examples/react-app/src/components/feature.tsx
+++ b/examples/react-app/src/components/feature.tsx
@@ -2,10 +2,11 @@ import type React from 'react';
 
 type Props = {
   title: string;
+  lastRow?: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export default function Feature(props: Props) {
-  const { title, children, ...rest } = props;
+  const { title, children, lastRow, ...rest } = props;
   return (
     <div id="account" {...rest}>
       <h3 className="mb-1 text-sm font-medium md:mb-0 dark:text-zinc-300/70">
@@ -14,6 +15,7 @@ export default function Feature(props: Props) {
       <div className="flex items-center justify-between text-base md:text-[17px] dark:text-zinc-50">
         {children}
       </div>
+      {lastRow || null}
     </div>
   );
 }
diff --git a/examples/react-app/src/components/sign.tsx b/examples/react-app/src/components/sign.tsx
new file mode 100644
index 00000000..76f2aeb5
--- /dev/null
+++ b/examples/react-app/src/components/sign.tsx
@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import { useWallet } from '../hooks/useWallet';
+import type { CustomError } from '../utils/customError';
+
+import { Copyable } from './Copyable';
+import Button from './button';
+import Feature from './feature';
+import Notification, { type Props as NotificationProps } from './notification';
+
+const DEFAULT_MESSAGE = `Fuelum ipsum FuelVM sit amet, high-performance Ethereum layer-2 consectetur adipiscing elit. Home verification dolor magna aliqua, scalability ut labore et dolore Sway nulla pariatur. Modular blockchain quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+Fuel Network tempor incididunt, powered by FuelVM ut labore et dolore magna aliqua. Ut enim ad minim veniam, scalable for all quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.`;
+
+interface Props {
+  isSigning: boolean;
+  setIsSigning: (isSigning: boolean) => void;
+}
+
+export default function Sign({ isSigning, setIsSigning }: Props) {
+  const { wallet } = useWallet();
+
+  const [messageToSign, setMessageToSign] = useState(DEFAULT_MESSAGE);
+  const [signedMessage, setSignedMessage] = useState('');
+  const [isLoading, setLoading] = useState(false);
+  const [toast, setToast] = useState<Omit<NotificationProps, 'setOpen'>>({
+    open: false,
+  });
+
+  const handleSign = async () => {
+    setLoading(true);
+    setIsSigning(true);
+    try {
+      const resp = await wallet?.signMessage(messageToSign);
+      setSignedMessage(resp || '');
+
+      setToast({
+        open: true,
+        type: 'success',
+        children: resp || null,
+      });
+      setLoading(false);
+      setIsSigning(false);
+    } catch (err) {
+      const error = err as CustomError;
+      console.error(error.message);
+
+      setToast({
+        open: true,
+        type: 'error',
+        children: error.message.substring(0, 32),
+      });
+
+      setLoading(false);
+      setIsSigning(false);
+    }
+  };
+
+  return (
+    <Feature
+      title="Sign"
+      lastRow={
+        signedMessage ? (
+          <div>
+            <h3 className="flex mt-3 mb-1 text-sm font-medium md:mb-0 dark:text-zinc-300/70">
+              Signed Message
+              <div className="ml-2">
+                <Copyable value={signedMessage} />
+              </div>
+            </h3>
+            <p className="whitespace-pre-wrap max-w-full break-words">
+              {signedMessage}
+            </p>
+          </div>
+        ) : null
+      }
+    >
+      <input
+        type="text"
+        placeholder="Message to sign"
+        value={messageToSign}
+        onChange={(e) => setMessageToSign(e.target.value)}
+        className="-ml-1 mr-2 mt-1 w-2/3 shrink basis-2/3 rounded-lg border border-zinc-500/25 p-1 font-mono outline-none md:-ml-2 md:mt-2 md:p-2 dark:bg-transparent"
+      />
+      <Button
+        onClick={handleSign}
+        disabled={isLoading || isSigning}
+        className="mt-1 shrink-0 md:mt-2"
+        loading={isLoading}
+        loadingText="Signing..."
+      >
+        Sign Message
+      </Button>
+      <Notification
+        setOpen={() => setToast({ ...toast, open: false })}
+        {...toast}
+      />
+    </Feature>
+  );
+}
diff --git a/examples/react-app/src/components/transfer.tsx b/examples/react-app/src/components/transfer.tsx
index 0130ff26..ac56bc2c 100644
--- a/examples/react-app/src/components/transfer.tsx
+++ b/examples/react-app/src/components/transfer.tsx
@@ -8,7 +8,8 @@ import Button from './button';
 import Feature from './feature';
 import Notification, { type Props as NotificationProps } from './notification';
 
-const DEFAULT_ADDRESS = Address.fromRandom().toString();
+const DEFAULT_ADDRESS =
+  '0xa671949e92e3cf75a497f6759c785336308f8867b677defe1ba71d5979197baf';
 
 interface Props {
   isSigning: boolean;