diff --git a/packages/react/src/ui/Connect/components/Connector/Connecting.tsx b/packages/react/src/ui/Connect/components/Connector/Connecting.tsx index cf79e308..4f5f53de 100644 --- a/packages/react/src/ui/Connect/components/Connector/Connecting.tsx +++ b/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,6 +54,14 @@ export function Connecting({ className }: ConnectorProps) { isConnected, } = useConnectUI(); + const [connectStep, setConnectStep] = useState( + ConnectStep.CONNECT, + ); + + const { description, cta } = useMemo(() => { + return copy[connectStep]; + }, [connectStep]); + // Auto-close connecting useEffect(() => { if (isConnected && route === Routes.CONNECTING && !isConnecting) { @@ -34,6 +69,21 @@ export function Connecting({ className }: ConnectorProps) { } }, [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
{connector.name}. ) : ( - - Click on the button below to connect to {location.origin}. - + {description} )} {isConnecting ? ( @@ -66,7 +114,7 @@ export function Connecting({ className }: ConnectorProps) { ) : ( retryConnect(connector)}> - Connect + {cta} )} diff --git a/packages/walletconnect-connector/src/WalletConnectConnector.ts b/packages/walletconnect-connector/src/WalletConnectConnector.ts index af18d181..2fc7d33a 100644 --- a/packages/walletconnect-connector/src/WalletConnectConnector.ts +++ b/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; } diff --git a/packages/walletconnect-connector/src/types.ts b/packages/walletconnect-connector/src/types.ts index 2277abfa..d58bc33c 100644 --- a/packages/walletconnect-connector/src/types.ts +++ b/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; @@ -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; + }; +}