feat: add request validation

.changeset/strange-horses-sleep.md

@@ -0,0 +1,5 @@
+---
+"@fuel-connectors/walletconnect-connector": minor
+---
+
+Request message signature to validate access before connecting to applications

biome.json

@@ -19,6 +19,9 @@
       },
       "complexity": {
         "noForEach": "off"
+      },
+      "suspicious": {
+        "noAsyncPromiseExecutor": "off"
       }
     }
   },

examples/react-app/src/components/balance.tsx

@@ -16,12 +16,12 @@ const BalanceSkeleton = () => (
 );
 
 export default function Balance({ isSigning }: Props) {
-  const { refetchWallet, balance, address } = useWallet();
+  const { refetchBalance, balance, address } = useWallet();
 
   useEffect(() => {
-    const interval = setInterval(() => refetchWallet(), 5000);
+    const interval = setInterval(() => refetchBalance(), 5000);
     return () => clearInterval(interval);
-  }, [refetchWallet]);
+  }, [refetchBalance]);
 
   return (
     <Feature title="Balance">

packages/common/src/PredicateConnector.ts

@@ -8,10 +8,8 @@ import {
   FuelConnectorEventTypes,
   type JsonAbi,
   type Network,
-  OutputType,
   type SelectNetworkArguments,
   type TransactionRequestLike,
-  TransactionResponse,
   type Version,
   ZeroBytes32,
   bn,

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

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useConnectUI } from '../../../../providers/FuelUIProvider';
 import { ConnectorIcon } from '../ConnectorIcon';
 
+import { Spinner } from '../Spinner/Spinner';
 import {
   ConnectorButton,
   ConnectorContent,
@@ -44,6 +45,8 @@ export function Connector({ className, connector, theme }: ConnectorProps) {
     ping();
   }, [connector, connect, setError]);
 
+  const actionText = action || 'Install';
+
   return (
     <div className={className}>
       <ConnectorImage>
@@ -56,15 +59,15 @@ export function Connector({ className, connector, theme }: ConnectorProps) {
       </ConnectorImage>
       <ConnectorContent>
         <ConnectorTitle>{connector.name}</ConnectorTitle>
-        <ConnectorDescription>
-          {isLoading ? 'Loading...' : description}
-        </ConnectorDescription>
+        <ConnectorDescription>{description}</ConnectorDescription>
       </ConnectorContent>
-      {!isLoading && (
-        <ConnectorButton href={link} target="_blank">
-          {action || 'Install'}
-        </ConnectorButton>
-      )}
+      <ConnectorButton href={link} target="_blank" aria-disabled={isLoading}>
+        {isLoading ? (
+          <Spinner size={26} color="var(--fuel-loader-background)" />
+        ) : (
+          actionText
+        )}
+      </ConnectorButton>
     </div>
   );
 }

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

@@ -0,0 +1,24 @@
+import styled, { keyframes } from 'styled-components';
+
+interface SpinnerProps {
+  size: number;
+  color: string;
+}
+
+const spinAnimation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+export const Spinner = styled.div<SpinnerProps>`
+  height: ${({ size }) => size}px;
+  width: ${({ size }) => size}px;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-top-color: ${({ color }) => color};
+  border-radius: 50%;
+  animation: ${spinAnimation} 1s infinite linear;
+`;

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

@@ -61,7 +61,7 @@ export function Connect() {
               <BackIcon size={32} onClick={back} data-connector={!!connector} />
               <DialogMain>
                 {connector ? (
-                  <Connector connector={connector} />
+                  <Connector connector={connector} theme={theme} />
                 ) : (
                   <Connectors />
                 )}