refactor: centralize connector dialog routes in a single ocmponent

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

@@ -1,19 +1,21 @@
 import type { FuelConnector } from 'fuels';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
-import { useConnectUI } from '../../../../providers/FuelUIProvider';
+import {
+  DialogState,
+  useConnectUI,
+} from '../../../../providers/FuelUIProvider';
 import { ConnectorIcon } from '../ConnectorIcon';
 
-import { useQuery } from '@tanstack/react-query';
-import { useConnect, useConnectors } from '../../../../hooks';
 import { Spinner } from '../Spinner/Spinner';
 import {
-  ConnectorButton,
   ConnectorContent,
   ConnectorDescription,
   ConnectorImage,
+  ConnectorLinkButton,
   ConnectorTitle,
 } from './styles';
+import { getDialogLabels } from './utils';
 
 type ConnectorProps = {
   theme?: string;
@@ -23,21 +25,16 @@ type ConnectorProps = {
 
 export function Connector({ className, connector, theme }: ConnectorProps) {
   const {
-    install: { action, link, description },
+    install: { action: actionText, link, description },
   } = connector.metadata;
-  const { connect } = useConnect();
-  const { isLoading } = useQuery({
-    queryKey: [connector.name],
-    queryFn: async () => {
-      const isInstall = await connector.ping();
-      if (isInstall) connect(connector.name);
-      return isInstall;
-    },
-    initialData: connector.installed,
-    refetchInterval: 1000,
-  });
-
-  const actionText = action || 'Install';
+  const {
+    dialog: { state: dialogState, action },
+  } = useConnectUI();
+  const loading = dialogState === DialogState.CONNECTING;
+  const dialogLabels = useMemo(
+    () => getDialogLabels(dialogState, connector),
+    [dialogState, connector],
+  );
 
   return (
     <div className={className}>
@@ -50,16 +47,22 @@ export function Connector({ className, connector, theme }: ConnectorProps) {
         />
       </ConnectorImage>
       <ConnectorContent>
-        <ConnectorTitle>{connector.name}</ConnectorTitle>
-        <ConnectorDescription>{description}</ConnectorDescription>
+        <ConnectorTitle>{dialogLabels.title}</ConnectorTitle>
+        <ConnectorDescription>
+          {dialogLabels.description || description}
+        </ConnectorDescription>
       </ConnectorContent>
-      <ConnectorButton href={link} target="_blank" aria-disabled={isLoading}>
-        {isLoading ? (
-          <Spinner size={26} color="var(--fuel-loader-background)" />
-        ) : (
-          actionText
-        )}
-      </ConnectorButton>
+      <ConnectorLinkButton
+        href={
+          !loading && dialogState === DialogState.INSTALL ? link : undefined
+        }
+        target="_blank"
+        onClick={() => !loading && action(connector)}
+        aria-disabled={loading}
+      >
+        {loading && <Spinner size={26} color="var(--fuel-loader-background)" />}
+        {!loading && (dialogLabels.buttonLabel || actionText)}
+      </ConnectorLinkButton>
     </div>
   );
 }

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

@@ -30,7 +30,7 @@ export const ConnectorImage = styled.div`
   margin-bottom: 1.2em;
 `;
 
-export const ConnectorButton = styled.a`
+export const ConnectorLinkButton = styled.a`
   display: flex;
   box-sizing: border-box;
   text-decoration: none;

packages/react/src/ui/Connect/components/Connector/utils.ts

@@ -0,0 +1,63 @@
+import type { FuelConnector } from 'fuels';
+import { DialogState } from '../../../../providers/FuelUIProvider';
+
+interface DialogLabelData {
+  title: string;
+  description?: string;
+  buttonLabel?: string;
+}
+
+function getButtonLabel(dialogState: DialogState) {
+  switch (dialogState) {
+    case DialogState.INSTALL:
+      return 'Install';
+    case DialogState.INSTALLED:
+      return 'Connect';
+    case DialogState.ERROR:
+      return 'Retry';
+    default:
+      return undefined;
+  }
+}
+
+function getTitle(dialogState: DialogState, connector: FuelConnector) {
+  switch (dialogState) {
+    case DialogState.CONNECTING:
+    case DialogState.INSTALLED:
+    case DialogState.INSTALL:
+      if (connector.installed) {
+        return `${connector.name} is Installed!`;
+      }
+      return `Don't have ${connector.name}?`;
+    case DialogState.ERROR:
+      return `Failed to connect to ${connector.name}`;
+    default:
+      return connector.name;
+  }
+}
+
+function getDescription(dialogState: DialogState, connector: FuelConnector) {
+  switch (dialogState) {
+    case DialogState.CONNECTING:
+    case DialogState.INSTALL:
+      if (connector.installed) {
+        return `You will be requested to connect it to ${window.location.origin}`;
+      }
+      return `Install ${connector.name} now by clicking the link bellow and return here to connect it!`;
+    case DialogState.INSTALLED:
+      return `Click on the button bellow to connect your to ${window.location.origin}`;
+    case DialogState.ERROR:
+      return 'Click on the button below to try again.';
+    default:
+      return undefined;
+  }
+}
+
+export const getDialogLabels: (
+  state: DialogState,
+  connector: FuelConnector,
+) => DialogLabelData = (state, connector) => ({
+  title: getTitle(state, connector),
+  description: getDescription(state, connector),
+  buttonLabel: getButtonLabel(state),
+});

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

@@ -1,7 +1,7 @@
 import * as Dialog from '@radix-ui/react-dialog';
 import { useEffect, useState } from 'react';
 
-import { DialogState, useConnectUI } from '../../providers/FuelUIProvider';
+import { useConnectUI } from '../../providers/FuelUIProvider';
 
 import { Connector } from './components/Connector/Connector';
 import { Connectors } from './components/Connectors';
@@ -19,23 +19,13 @@ import { getThemeVariables } from './themes';
 
 import './index.css';
 import type { FuelConnector } from 'fuels';
-import { Connecting } from './components/Connector/Connecting';
 
 const ConnectRoutes = ({
-  state,
   connector,
   theme,
-}: { state: DialogState; connector?: FuelConnector | null; theme: string }) => {
+}: { connector?: FuelConnector | null; theme: string }) => {
   if (!connector) return <Connectors />;
-
-  switch (state) {
-    case DialogState.INSTALL:
-      return <Connector connector={connector} theme={theme} />;
-    case DialogState.CONNECTING:
-      return <Connecting connector={connector} theme={theme} />;
-    default:
-      return null;
-  }
+  return <Connector connector={connector} theme={theme} />;
 };
 
 export function Connect() {
@@ -46,7 +36,7 @@ export function Connect() {
   const {
     theme,
     cancel,
-    dialog: { isOpen, state, connector, back },
+    dialog: { isOpen, connector, back },
   } = useConnectUI();
 
   useEffect(() => {
@@ -79,11 +69,7 @@ export function Connect() {
               </Dialog.Close>
               <BackIcon size={32} onClick={back} data-connector={!!connector} />
               <DialogMain>
-                <ConnectRoutes
-                  state={state}
-                  connector={connector}
-                  theme={theme}
-                />
+                <ConnectRoutes connector={connector} theme={theme} />
               </DialogMain>
             </DialogContent>
           </FuelRoot>