Fix getting currently connected dapp info (#3671)

Resolves #3661 ### What - Add a reusable hook that will handle finding a browser tab currently connected to the wallet to make it easier to display info about connected dapp. - Don't use `lastFocusedWindow` argument so window popup (token spend approval) can use the same hook for finding connected dapp. ![image](https://github.com/tahowallet/extension/assets/20949277/ea628b35-a7f0-40e0-a649-87457c853a75) ### Testing steps - [x] make sure wallet displays info about connected dapp in the top header when your active tab is the dapp's tab ![image](https://github.com/tahowallet/extension/assets/20949277/317fae15-9f7f-484d-9f3c-2c9890d6d322) - [x] make sure you can see the dapp avatar on the token approval screen Latest build: [extension-builds-3671](https://github.com/tahowallet/extension/suites/18184789698/artifacts/1049527106) (as of Tue, 14 Nov 2023 17:55:43 GMT).
tahowallet · Nov 15, 2023 · 03bc18d · 03bc18d
2 parents e14964b + 0a7960c
commit 03bc18d
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 42 deletions.
diff --git a/ui/components/DAppConnection/DAppConnection.tsx b/ui/components/DAppConnection/DAppConnection.tsx
@@ -1,52 +1,15 @@
-import { PermissionRequest } from "@tallyho/provider-bridge-shared"
-import { selectAllowedPages } from "@tallyho/tally-background/redux-slices/selectors"
-import { browser } from "@tallyho/tally-background"
-import React, { ReactElement, useCallback, useEffect, useState } from "react"
-import { useBackgroundSelector } from "../../hooks"
+import React, { ReactElement } from "react"
 import ActiveDAppConnection from "./ActiveDAppConnection"
 import DAppConnectionDefaultToggle from "./DAppConnectionDefaultToggle"
+import { useDappPermission } from "../../hooks/dapp-hooks"
 
 export default function DAppConnection(): ReactElement {
-  const [isConnectedToDApp, setIsConnectedToDApp] = useState(false)
-  const [currentPermission, setCurrentPermission] = useState<
-    PermissionRequest | undefined
-  >(undefined)
-
-  const allowedPages = useBackgroundSelector(selectAllowedPages)
-
-  const initPermissionAndOrigin = useCallback(async () => {
-    const { url } = await browser.tabs
-      .query({
-        active: true,
-        lastFocusedWindow: true,
-      })
-      .then((tabs) =>
-        tabs[0] ? tabs[0] : { url: "", favIconUrl: "", title: "" },
-      )
-    if (!url) return
-
-    const { origin } = new URL(url)
-
-    const allowPermission = allowedPages.find(
-      (permission) => permission.origin === origin,
-    )
-
-    if (allowPermission) {
-      setCurrentPermission(allowPermission)
-      setIsConnectedToDApp(true)
-    } else {
-      setIsConnectedToDApp(false)
-    }
-  }, [allowedPages, setCurrentPermission])
-
-  useEffect(() => {
-    initPermissionAndOrigin()
-  }, [initPermissionAndOrigin])
+  const { isConnected, currentPermission, allowedPages } = useDappPermission()
 
   return (
     <section>
       <ActiveDAppConnection
-        isConnectedToDApp={isConnectedToDApp}
+        isConnectedToDApp={isConnected}
         currentPermission={currentPermission}
         allowedPages={allowedPages}
       />

diff --git a/...eDetails/TransactionSignatureDetails/TransactionSignatureSummary/SpendApprovalSummary.tsx b/...eDetails/TransactionSignatureDetails/TransactionSignatureSummary/SpendApprovalSummary.tsx
@@ -25,11 +25,15 @@ import SharedAddress from "../../../../Shared/SharedAddress"
 import { TransactionSignatureSummaryProps } from "./TransactionSignatureSummaryProps"
 import TransactionSignatureSummaryBody from "./TransactionSignatureSummaryBody"
 import SharedSkeletonLoader from "../../../../Shared/SharedSkeletonLoader"
+import { useDappPermission } from "../../../../../hooks/dapp-hooks"
 
 export default function SpendApprovalSummary({
   transactionRequest,
   annotation,
 }: TransactionSignatureSummaryProps<AssetApproval>): ReactElement {
+  const { currentPermission } = useDappPermission()
+  const dappFavicon = currentPermission?.faviconUrl
+
   const { t } = useTranslation("translation", {
     keyPrefix: "signTransaction.spendApproval",
   })
@@ -240,7 +244,8 @@ export default function SpendApprovalSummary({
       <style jsx>
         {`
           .site_icon {
-            background: url("./images/dapp_favicon_default@2x.png");
+            background: url(${dappFavicon ??
+            "./images/dapp_favicon_default@2x.png"});
             background-size: cover;
             width: 48px;
             height: 48px;

diff --git a/ui/hooks/dapp-hooks.ts b/ui/hooks/dapp-hooks.ts
@@ -0,0 +1,54 @@
+import { PermissionRequest } from "@tallyho/provider-bridge-shared"
+import { useCallback, useEffect, useState } from "react"
+import { browser } from "@tallyho/tally-background"
+import { selectAllowedPages } from "@tallyho/tally-background/redux-slices/selectors"
+import { useBackgroundSelector } from "./redux-hooks"
+
+// eslint-disable-next-line import/prefer-default-export
+export function useDappPermission(): {
+  isConnected: boolean
+  currentPermission: PermissionRequest | undefined
+  allowedPages: PermissionRequest[]
+} {
+  const [isConnected, setisConnected] = useState(false)
+  const [currentPermission, setCurrentPermission] = useState<
+    PermissionRequest | undefined
+  >(undefined)
+
+  const allowedPages = useBackgroundSelector(selectAllowedPages)
+
+  const initPermissionAndOrigin = useCallback(async () => {
+    const { url } = await browser.tabs
+      .query({
+        active: true,
+      })
+      .then((tabs) =>
+        tabs[0] ? tabs[0] : { url: "", favIconUrl: "", title: "" },
+      )
+
+    if (!url) return
+
+    const { origin } = new URL(url)
+
+    const allowPermission = allowedPages.find(
+      (permission) => permission.origin === origin,
+    )
+
+    if (allowPermission) {
+      setCurrentPermission(allowPermission)
+      setisConnected(true)
+    } else {
+      setisConnected(false)
+    }
+  }, [allowedPages, setCurrentPermission])
+
+  useEffect(() => {
+    initPermissionAndOrigin()
+  }, [initPermissionAndOrigin])
+
+  return {
+    isConnected,
+    currentPermission,
+    allowedPages,
+  }
+}