feat: update copy when signing message

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

@@ -1,8 +1,10 @@
 import { Routes, useConnectUI } from '../../../../providers/FuelUIProvider';
 import { ConnectorIcon } from '../Core/ConnectorIcon';
 
-import { useEffect } from 'react';
+import type { ConnectorEvent } from 'fuels';
+import { useEffect, useMemo, useState } from 'react';
 import { Spinner } from '../../../../icons/Spinner';
+import { useFuel } from '../../../../providers/FuelHooksProvider';
 import {
   ConnectorButton,
   ConnectorButtonPrimary,
@@ -17,7 +19,32 @@ type ConnectorProps = {
   className?: string;
 };
 
+export interface CustomCurrentConnectorEvent extends ConnectorEvent {
+  metadata?: {
+    pendingSignature: boolean;
+  };
+}
+
+enum ConnectStep {
+  CONNECT = 'connect',
+  SIGN = 'sign',
+}
+
+const copy = {
+  [ConnectStep.CONNECT]: {
+    description: `Click on the button below to connect to ${location.origin}.`,
+    cta: 'Connect',
+  },
+  [ConnectStep.SIGN]: {
+    title: 'Signing in progress',
+    description:
+      'Sign this message to prove you own this wallet and proceed. Canceling will disconnect you.',
+    cta: 'Sign',
+  },
+} as const;
+
 export function Connecting({ className }: ConnectorProps) {
+  const { fuel } = useFuel();
   const {
     error,
     isConnecting,
@@ -27,13 +54,36 @@ export function Connecting({ className }: ConnectorProps) {
     isConnected,
   } = useConnectUI();
 
+  const [connectStep, setConnectStep] = useState<ConnectStep>(
+    ConnectStep.CONNECT,
+  );
+
+  const { description, cta } = useMemo(() => {
+    return copy[connectStep];
+  }, [connectStep]);
+
   // Auto-close connecting
   useEffect(() => {
     if (isConnected && route === Routes.CONNECTING && !isConnecting) {
       cancel();
     }
   }, [isConnected, route, isConnecting, cancel]);
 
+  // Switching to signing ownership mode
+  useEffect(() => {
+    const onCurrentConnectorChange = (e: CustomCurrentConnectorEvent) => {
+      if (e.metadata?.pendingSignature) {
+        setConnectStep(ConnectStep.SIGN);
+      }
+    };
+
+    fuel.on(fuel.events.currentConnector, onCurrentConnectorChange);
+
+    return () => {
+      fuel.off(fuel.events.currentConnector, onCurrentConnectorChange);
+    };
+  }, [fuel]);
+
   if (!connector) return null;
 
   return (
@@ -55,9 +105,7 @@ export function Connecting({ className }: ConnectorProps) {
             Requesting connection to <br /> {connector.name}.
           </ConnectorDescription>
         ) : (
-          <ConnectorDescription>
-            Click on the button below to connect to {location.origin}.
-          </ConnectorDescription>
+          <ConnectorDescription>{description}</ConnectorDescription>
         )}
       </ConnectorContent>
       {isConnecting ? (
@@ -66,7 +114,7 @@ export function Connecting({ className }: ConnectorProps) {
         </ConnectorButton>
       ) : (
         <ConnectorButtonPrimary onClick={() => retryConnect(connector)}>
-          Connect
+          {cta}
         </ConnectorButtonPrimary>
       )}
     </div>

packages/walletconnect-connector/src/WalletConnectConnector.ts

@@ -17,6 +17,7 @@ import {
 import type { Web3Modal } from '@web3modal/wagmi';
 import {
   CHAIN_IDS,
+  type ConnectorEvent,
   type ConnectorMetadata,
   FuelConnectorEventTypes,
   Provider as FuelProvider,
@@ -46,7 +47,7 @@ import {
   SIGNATURE_VALIDATION_TIMEOUT,
   WINDOW,
 } from './constants';
-import type { WalletConnectConfig } from './types';
+import type { CustomCurrentConnectorEvent, WalletConnectConfig } from './types';
 import { subscribeAndEnforceChain } from './utils';
 import { createWagmiConfig, createWeb3ModalInstance } from './web3Modal';
 
@@ -263,6 +264,17 @@ export class WalletConnectConnector extends PredicateConnector {
           for (const address of addresses) {
             this.storage.setItem(`SIGNATURE_VALIDATION_${address}`, 'pending');
           }
+
+          const currentConnectorEvent: CustomCurrentConnectorEvent = {
+            type: this.events.currentConnector,
+            data: this,
+            metadata: {
+              pendingSignature: true,
+            },
+          };
+
+          // Workaround to tell Connecting dialog that now we'll request signature
+          this.emit(this.events.currentConnector, currentConnectorEvent);
           unsub();
           break;
         }

packages/walletconnect-connector/src/types.ts

@@ -1,6 +1,10 @@
 import type { PredicateConfig } from '@fuel-connectors/common';
 import type { Config as WagmiConfig } from '@wagmi/core';
-import type { Provider as FuelProvider, StorageAbstract } from 'fuels';
+import type {
+  ConnectorEvent,
+  Provider as FuelProvider,
+  StorageAbstract,
+} from 'fuels';
 
 export type WalletConnectConfig = {
   fuelProvider?: FuelProvider | Promise<FuelProvider>;
@@ -12,3 +16,9 @@ export type WalletConnectConfig = {
   // if the dapp already has wagmi from eth connectors, it's better to skip auto reconnection as it can lead to session loss when refreshing the page
   skipAutoReconnect?: boolean;
 };
+
+export interface CustomCurrentConnectorEvent extends ConnectorEvent {
+  metadata: {
+    pendingSignature: boolean;
+  };
+}