feat: Validate signatures in Solana connector

.changeset/polite-foxes-wonder.md

@@ -0,0 +1,5 @@
+---
+"@fuel-connectors/solana-connector": minor
+---
+
+feat: Added signature validation for the Solana Connector.

packages/react/src/icons/CopyIcon.tsx

@@ -9,9 +9,9 @@ export function CopyIcon({ size, ...props }: SvgIconProps) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
       <title>Copy Icon</title>

packages/react/src/icons/ErrorIcon.tsx

@@ -0,0 +1,24 @@
+import type { SvgIconProps } from '../types';
+
+export function ErrorIcon({ size = 24, theme = 'light' }: SvgIconProps) {
+  const color = theme === 'light' ? '#f25a68' : '#ff6b7a';
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Error Icon"
+      role="img"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11 17V15H13V17H11ZM11 7V13H13V7H11Z"
+        fill={color}
+      />
+    </svg>
+  );
+}

packages/react/src/providers/FuelUIProvider.tsx

@@ -30,6 +30,7 @@ export enum Routes {
   Connecting = 'CONNECTING',
   PredicateExternalDisclaimer = 'PREDICATE_EXTERNAL_DISCLAIMER',
   PredicateAddressDisclaimer = 'PREDICATE_ADDRESS_DISCLAIMER',
+  SignatureError = 'SIGNATURE_ERROR',
 }
 
 export type FuelUIContextType = {
@@ -42,9 +43,7 @@ export type FuelUIContextType = {
   isConnecting: boolean;
   isError: boolean;
   connect: () => void;
-  cancel: (params?: {
-    clean?: boolean;
-  }) => void;
+  cancel: (params?: { clean?: boolean }) => void;
   setError: (error: Error | null) => void;
   error: Error | null;
   dialog: {

packages/react/src/ui/Connect/components/Connector/Connecting.tsx

@@ -101,6 +101,14 @@ export function Connecting({ className }: ConnectorProps) {
     };
   }, [fuel]);
 
+  useEffect(() => {
+    if (error) {
+      if (error.message.includes('Failed to sign message')) {
+        setRoute(Routes.SignatureError);
+      }
+    }
+  }, [error, setRoute]);
+
   if (!connector) return null;
 
   return (

packages/react/src/ui/Connect/components/SignatureError/SignatureError.tsx

@@ -0,0 +1,65 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { ErrorIcon } from '../../../../icons/ErrorIcon';
+import { useConnectUI } from '../../../../providers/FuelUIProvider';
+import {
+  BackIcon,
+  CloseIcon,
+  DialogHeader,
+  DialogMain,
+  DialogTitle,
+  Divider,
+} from '../../styles';
+import {
+  ConnectorButton,
+  ConnectorButtonPrimary,
+  ConnectorContent,
+  ConnectorDescription,
+  ConnectorImage,
+  ConnectorTitle,
+} from '../Connector/styles';
+import { DialogContent } from '../Core/DialogContent';
+import { DialogFuel } from '../Core/DialogFuel';
+
+type SignatureErrorProps = {
+  theme: 'dark' | 'light';
+};
+
+export function SignatureError({ theme }: SignatureErrorProps) {
+  const { cancel } = useConnectUI();
+
+  return (
+    <DialogFuel open={true} theme={theme} onOpenChange={() => cancel()}>
+      <DialogContent data-connector={true}>
+        <DialogHeader>
+          <BackIcon size={32} data-connector={false} />
+          <DialogTitle>Signature Error</DialogTitle>
+          <Dialog.Close asChild>
+            <CloseIcon size={32} onClick={() => cancel()} />
+          </Dialog.Close>
+        </DialogHeader>
+        <Divider />
+        <DialogMain>
+          <div>
+            <ConnectorImage>
+              <ErrorIcon size={100} theme={theme} />
+            </ConnectorImage>
+            <ConnectorContent>
+              <ConnectorTitle>Failed to Sign Message</ConnectorTitle>
+              <ConnectorDescription>
+                If you are using a Ledger device, please check the
+                troubleshooting guide below.
+              </ConnectorDescription>
+            </ConnectorContent>
+            <ConnectorButtonPrimary
+              href="https://docs.fuel.network/guides/fuel-connectors/solana-ledger-connection"
+              target="_blank"
+            >
+              View Troubleshooting Guide
+            </ConnectorButtonPrimary>
+            <ConnectorButton onClick={() => cancel()}>Close</ConnectorButton>
+          </div>
+        </DialogMain>
+      </DialogContent>
+    </DialogFuel>
+  );
+}

packages/react/src/ui/Connect/index.tsx

@@ -17,8 +17,11 @@ import { DialogContent } from './components/Core/DialogContent';
 import { DialogFuel } from './components/Core/DialogFuel';
 import { PredicateAddressDisclaimer } from './components/PredicateAddressDisclaimer/PredicateAddressDisclaimer';
 import { PredicateExternalDisclaimer } from './components/PredicateExternalDisclaimer/PredicateExternalDisclaimer';
+import { SignatureError } from './components/SignatureError/SignatureError';
 
 const ConnectRoutes = ({ route }: { route: Routes }) => {
+  const { theme } = useConnectUI();
+
   switch (route) {
     case Routes.List:
       return <Connectors />;
@@ -30,6 +33,8 @@ const ConnectRoutes = ({ route }: { route: Routes }) => {
       return <PredicateAddressDisclaimer />;
     case Routes.Connecting:
       return <Connecting />;
+    case Routes.SignatureError:
+      return <SignatureError theme={theme} />;
     default:
       return null;
   }