feat: add useConnection

packages/app/src/systems/CRX/hooks/useCurrentTab.ts

@@ -9,20 +9,8 @@ export function useCurrentTab() {
 
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       const currentTab = tabs[0];
-
-      if (currentTab?.url) {
-        const faviconUrl = currentTab.favIconUrl;
-        setFaviconUrl(faviconUrl);
-
-        try {
-          const url = new URL(currentTab.url);
-          const port = url.port ? `:${url.port}` : '';
-          const result = `${url.protocol}//${url.hostname}${port}`;
-          setOrigin(result);
-        } catch (_e) {
-          setOrigin(undefined);
-        }
-      }
+      setFaviconUrl(currentTab?.favIconUrl);
+      setOrigin(currentTab?.url);
     });
   }, []);
 

packages/app/src/systems/DApp/hooks/useConnection.ts

@@ -0,0 +1,34 @@
+import type { Connection } from '@fuel-wallet/types';
+import { useEffect, useState } from 'react';
+import { ConnectionService } from '../services';
+
+interface UseConnectionProps {
+  url: string | undefined;
+}
+
+const parseUrl = (url: string): string | undefined => {
+  try {
+    const { protocol, hostname, port } = new URL(url);
+    return `${protocol}//${hostname}${port ? `:${port}` : ''}`;
+  } catch (_e) {
+    return undefined;
+  }
+};
+
+export const useConnection = ({ url = '' }: UseConnectionProps) => {
+  const [connection, setConnection] = useState<Connection | undefined>();
+
+  useEffect(() => {
+    const fetchConnection = async () => {
+      const origin = parseUrl(url);
+      const existingConnection = await ConnectionService.getConnection(origin);
+      setConnection(existingConnection);
+    };
+
+    fetchConnection();
+  }, [url]);
+
+  return {
+    connection,
+  };
+};