Fix Portal sync watched accounts bug (#1120)

* fix: talisman hostname check for portal url

* fix: account connection UI ignores talisman portal

apps/extension/src/core/page.ts

@@ -39,10 +39,23 @@ const enable = async (origin: string): Promise<Injected> => {
   return new TalismanInjected(messageService.sendMessage) as Injected
 }
 
-export const isTalismanHostname = (hostname: string | undefined) =>
-  hostname === TALISMAN_WEB_APP_DOMAIN ||
-  (DEBUG && hostname?.endsWith(".talisman.pages.dev")) ||
-  (DEBUG && ["localhost", "127.0.0.1"].includes(hostname ?? ""))
+export const isTalismanUrl = (url: string | undefined) => {
+  if (!url) return false
+  try {
+    const hostname = new URL(url).hostname
+    return isTalismanHostname(hostname)
+  } catch (e) {
+    return false
+  }
+}
+
+export const isTalismanHostname = (hostname: string | undefined) => {
+  return (
+    hostname === TALISMAN_WEB_APP_DOMAIN ||
+    (DEBUG && hostname?.endsWith(".talisman.pages.dev")) ||
+    (DEBUG && ["localhost", "127.0.0.1"].includes(hostname ?? ""))
+  )
+}
 
 function inject() {
   // inject substrate wallet provider

apps/extension/src/ui/apps/popup/pages/Connect.tsx

@@ -1,6 +1,6 @@
 import { ProviderType } from "@core/domains/sitesAuthorised/types"
 import { KnownRequestIdOnly } from "@core/libs/requests/types"
-import { isTalismanHostname } from "@core/page"
+import { isTalismanUrl } from "@core/page"
 import { AppPill } from "@talisman/components/AppPill"
 import { notify } from "@talisman/components/Notifications"
 import useSet from "@talisman/hooks/useSet"
@@ -61,7 +61,7 @@ export const Connect: FC<{ className?: string }> = ({ className }) => {
   const authRequest = useRequest(id)
   const { popupOpenEvent } = useAnalytics()
   const accountsReady = useAccountsSubscribe() // hack to prevent no accounts drawer flashing
-  const allAccounts = useAccounts(isTalismanHostname(authRequest?.url) ? "all" : "owned")
+  const allAccounts = useAccounts(isTalismanUrl(authRequest?.url) ? "all" : "owned")
   const { items: connected, toggle, set, clear } = useSet<string>()
   const ethereum = !!authRequest?.request?.ethereum
 
@@ -158,7 +158,6 @@ export const Connect: FC<{ className?: string }> = ({ className }) => {
                 <button
                   type="button"
                   className="text-body-secondary hover:text-grey-300"
-                  text-body-secondary
                   onClick={handleConnectAllClick}
                 >
                   {t("Connect All")}

apps/extension/src/ui/domains/Site/ConnectedAccounts.tsx

@@ -2,7 +2,7 @@ import { AccountJsonAny } from "@core/domains/accounts/types"
 import { AuthorizedSite } from "@core/domains/sitesAuthorised/types"
 import { api } from "@ui/api"
 import { useCurrentSite } from "@ui/apps/popup/context/CurrentSiteContext"
-import useAccounts from "@ui/hooks/useAccounts"
+import { useAccountsForSite } from "@ui/hooks/useAccountsForSite"
 import { useAuthorisedSites } from "@ui/hooks/useAuthorisedSites"
 import { FC, Fragment, useCallback, useMemo } from "react"
 import { useTranslation } from "react-i18next"
@@ -12,8 +12,9 @@ import { ConnectAccountToggleButtonRow } from "./ConnectAccountToggleButtonRow"
 
 const SubAccounts: FC<{ site: AuthorizedSite | null }> = ({ site }) => {
   const { t } = useTranslation()
-  const accounts = useAccounts("owned")
-  const evmAccounts = useMemo(
+  const accounts = useAccountsForSite(site)
+
+  const activeAccounts = useMemo(
     () =>
       accounts.map(
         (acc) => [acc, site?.addresses?.includes(acc.address)] as [AccountJsonAny, boolean]
@@ -56,13 +57,12 @@ const SubAccounts: FC<{ site: AuthorizedSite | null }> = ({ site }) => {
         <button
           type="button"
           className="text-body-secondary hover:text-grey-300"
-          text-body-secondary
           onClick={handleConnectAllClick}
         >
           {t("Connect All")}
         </button>
       </div>
-      {evmAccounts.map(([acc, isConnected], idx) => (
+      {activeAccounts.map(([acc, isConnected], idx) => (
         <Fragment key={acc.address}>
           {!!idx && <AccountSeparator />}
           <ConnectAccountToggleButtonRow
@@ -79,8 +79,8 @@ const SubAccounts: FC<{ site: AuthorizedSite | null }> = ({ site }) => {
 const AccountSeparator = () => <div className="bg-grey-800 mx-6 h-0.5"></div>
 
 const EthAccounts: FC<{ site: AuthorizedSite | null }> = ({ site }) => {
-  const accounts = useAccounts("owned")
-  const evmAccounts = useMemo(
+  const accounts = useAccountsForSite(site)
+  const activeAccounts = useMemo(
     () =>
       accounts
         .filter((acc) => acc.type === "ethereum")
@@ -102,7 +102,7 @@ const EthAccounts: FC<{ site: AuthorizedSite | null }> = ({ site }) => {
 
   return (
     <>
-      {evmAccounts.map(([acc, isConnected], idx) => (
+      {activeAccounts.map(([acc, isConnected], idx) => (
         <Fragment key={acc.address}>
           {!!idx && <AccountSeparator />}
           <ConnectAccountToggleButtonRow

apps/extension/src/ui/hooks/useAccountsForSite.ts

@@ -0,0 +1,8 @@
+import { AuthorizedSite } from "@core/domains/sitesAuthorised/types"
+import { isTalismanUrl } from "@core/page"
+
+import useAccounts from "./useAccounts"
+
+export const useAccountsForSite = (site: AuthorizedSite | null) => {
+  return useAccounts(isTalismanUrl(site?.url) ? "all" : "owned")
+}

apps/extension/src/ui/hooks/useAuthorisedSiteById.tsx

@@ -5,7 +5,7 @@ import {
   AuthorizedSiteId,
   ProviderType,
 } from "@core/domains/sitesAuthorised/types"
-import { isTalismanHostname } from "@core/page"
+import { isTalismanUrl } from "@core/page"
 import { api } from "@ui/api"
 import { useCallback, useEffect, useMemo, useState } from "react"
 
@@ -16,7 +16,7 @@ const useAuthorisedSiteById = (id: AuthorizedSiteId, type: ProviderType) => {
   const sites = useAuthorisedSites()
   const availableAddresses = useAccountAddresses(
     type === "ethereum",
-    isTalismanHostname(sites[id]?.url) ? "all" : "owned"
+    isTalismanUrl(sites[id]?.url) ? "all" : "owned"
   )
 
   const connected = useMemo(() => {