feat(refactor): Extension accounts observables & refactors, extensions re-write

library/factories/package.json

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "@types/react": "^19.0.12",
-    "@w3ux/types": "^2.1.0",
+    "@w3ux/types": "^2.1.2",
     "gulp": "^5.0.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-strip-comments": "^2.6.0",

library/hooks/package.json

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "@types/react": "^19.0.12",
-    "@w3ux/types": "^2.1.0",
+    "@w3ux/types": "^2.1.2",
     "gulp": "^5.0.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-strip-comments": "^2.6.0",

library/observables-connect/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@w3ux/observables-connect",
   "license": "GPL-3.0-only",
-  "version": "0.9.1",
+  "version": "0.9.30",
   "type": "module",
   "scripts": {
     "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo",
     "build": "gulp --silent"
   },
   "dependencies": {
-    "@w3ux/extension-assets": "^2.2.0"
+    "@w3ux/extension-assets": "^2.2.0",
+    "@w3ux/utils": "^2.0.9"
   },
   "devDependencies": {
-    "@w3ux/types": "^2.1.0",
+    "@w3ux/types": "^2.1.6",
     "gulp": "^5.0.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-strip-comments": "^2.6.0",

library/observables-connect/src/accounts/get.ts

@@ -0,0 +1,48 @@
+/* @license Copyright 2024 w3ux authors & contributors
+SPDX-License-Identifier: GPL-3.0-only */
+
+import type { ExtensionAccount, ExtensionEnableResults } from '@w3ux/types'
+import { formatExtensionAccounts } from './util'
+
+// Connects to provided extensions and gets all accounts
+export const getAccountsFromExtensions = async (
+  extensions: ExtensionEnableResults,
+  ss58: number
+): Promise<ExtensionAccount[]> => {
+  try {
+    const results = await Promise.allSettled(
+      Array.from(extensions.values()).map(({ extension }) =>
+        extension.accounts.get()
+      )
+    )
+
+    const allAccounts: ExtensionAccount[] = []
+    const extensionEntries = Array.from(extensions.entries())
+    for (let i = 0; i < results.length; i++) {
+      const result = results[i]
+      const source = extensionEntries[i][0]
+      const signer = extensionEntries[i][1].extension.signer
+
+      if (result.status === 'fulfilled') {
+        const { value } = result
+
+        // This is duplicating what `handleExtensionAccountsUpdate` is doing to accounts: --
+        const accounts = formatExtensionAccounts(value, ss58)
+          .filter(
+            ({ address }) => !allAccounts.find((a) => address === a.address)
+          )
+          .map(({ address, name }) => ({
+            address,
+            name,
+            source,
+            signer,
+          }))
+        allAccounts.push(...accounts)
+      }
+    }
+    return allAccounts
+  } catch (e) {
+    console.error('Error during account formatting: ', e)
+    return []
+  }
+}

library/observables-connect/src/accounts/index.ts

@@ -0,0 +1,6 @@
+/* @license Copyright 2024 w3ux authors & contributors
+SPDX-License-Identifier: GPL-3.0-only */
+
+export * from './get'
+export * from './unsubs'
+export * from './util'

library/observables-connect/src/accounts/unsubs.ts

@@ -0,0 +1,17 @@
+/* @license Copyright 2024 w3ux authors & contributors
+SPDX-License-Identifier: GPL-3.0-only */
+
+// Extension account subscription unsubs
+export const unsubs: Record<string, () => void> = {}
+
+// Add an extension id to unsub state
+export const addUnsub = (id: string, unsub: () => void) => {
+  unsubs[id] = unsub
+}
+
+// Unsubscribe to all unsubs
+export const unsubAll = () => {
+  Object.values(unsubs).forEach((unsub) => {
+    unsub()
+  })
+}

library/observables-connect/src/accounts/util.ts

@@ -0,0 +1,100 @@
+/* @license Copyright 2024 w3ux authors & contributors
+SPDX-License-Identifier: GPL-3.0-only */
+
+import type {
+  ExtensionAccount,
+  ProcessExtensionAccountsResult,
+} from '@w3ux/types'
+import { formatAccountSs58, isValidAddress } from '@w3ux/utils'
+import { defaultProcessExtensionResult } from '../consts'
+import { _extensionAccounts } from '../observables'
+
+// Gets accounts to be imported and commits them to state
+
+interface Config {
+  source: string
+  ss58: number
+}
+export const processExtensionAccounts = (
+  config: Config,
+  signer: unknown,
+  newAccounts: ExtensionAccount[]
+): ProcessExtensionAccountsResult => {
+  const { source, ss58 } = config
+  if (!newAccounts.length) {
+    return defaultProcessExtensionResult
+  }
+
+  // Get valid accounts from extension
+  newAccounts = formatExtensionAccounts(newAccounts, ss58)
+
+  // Find any accounts that have been removed from this extension
+  const removedAccounts = _extensionAccounts
+    .getValue()
+    .filter((j) => j.source === source)
+    .filter((j) => !newAccounts.find((i) => i.address === j.address))
+
+  // Remove accounts that have already been imported
+  newAccounts = newAccounts.filter(
+    ({ address }) =>
+      !_extensionAccounts
+        .getValue()
+        .find((j) => j.address === address && j.source !== 'external')
+  )
+
+  // Format accounts properties
+  newAccounts = newAccounts.map(({ address, name }) => ({
+    address,
+    name,
+    source,
+    signer,
+  }))
+
+  // Update observable state
+  updateAccounts({
+    add: newAccounts,
+    remove: removedAccounts,
+  })
+
+  return {
+    newAccounts,
+    removedAccounts: [...removedAccounts],
+  }
+}
+
+// Formats accounts to correct ss58 and removes invalid accounts
+export const formatExtensionAccounts = (
+  accounts: ExtensionAccount[],
+  ss58: number
+) => {
+  accounts = accounts
+    // Remove accounts that do not contain correctly formatted addresses
+    .filter(({ address }) => isValidAddress(address))
+    // Reformat addresses to ensure default ss58 format
+    .map((account) => {
+      const formattedAddress = formatAccountSs58(account.address, ss58)
+      if (!formattedAddress) {
+        return null
+      }
+      account.address = formattedAddress
+      return account
+    })
+    // Remove null entries resulting from invalid formatted addresses
+    .filter((account) => account !== null)
+
+  return accounts
+}
+
+// Updates accounts observable based on removed and added accounts
+export const updateAccounts = ({
+  add,
+  remove,
+}: {
+  add: ExtensionAccount[]
+  remove: ExtensionAccount[]
+}) => {
+  const newAccounts = [..._extensionAccounts.getValue()]
+    .concat(add)
+    .filter((a) => remove.find((s) => s.address === a.address) === undefined)
+  _extensionAccounts.next(newAccounts)
+}

library/observables-connect/src/consts.ts

@@ -0,0 +1,12 @@
+/* @license Copyright 2024 w3ux authors & contributors
+SPDX-License-Identifier: GPL-3.0-only */
+
+import type { ProcessExtensionAccountsResult } from '@w3ux/types'
+
+export const defaultProcessExtensionResult: ProcessExtensionAccountsResult = {
+  newAccounts: [],
+  removedAccounts: [],
+}
+
+// Local storage active extensions key
+export const activeExtensionsKey = 'active_extensions'

library/observables-connect/src/extensions/connect.ts

@@ -0,0 +1,49 @@
+/* @license Copyright 2024 w3ux authors & contributors
+SPDX-License-Identifier: GPL-3.0-only */
+
+import type { ExtensionAccount } from '@w3ux/types'
+import { addUnsub } from '../accounts/unsubs'
+import { processExtensionAccounts } from '../accounts/util'
+import { canConnect } from '../util'
+import { initExtensions } from './index'
+
+// Connects to a single extension and processes its accounts
+export const connectExtension = async (
+  dappName: string,
+  ss58: number,
+  id: string
+): Promise<boolean> => {
+  if (canConnect(id)) {
+    const { connected } = await initExtensions(dappName, [id])
+    if (connected.size === 0) {
+      return
+    }
+    const { extension } = connected.get(id)
+    const canSubscribe = typeof extension.accounts.subscribe === 'function'
+
+    const handleAccounts = (accounts: ExtensionAccount[]) => {
+      processExtensionAccounts(
+        {
+          source: id,
+          ss58,
+        },
+        extension.signer,
+        accounts
+      )
+    }
+
+    // If account subscriptions are not supported, simply get the account(s) from the extension,
+    // otherwise, subscribe to accounts
+    if (!canSubscribe) {
+      const accounts = await extension.accounts.get()
+      handleAccounts(accounts)
+    } else {
+      const unsub = extension.accounts.subscribe((accounts) => {
+        handleAccounts(accounts)
+      })
+      addUnsub(id, unsub)
+    }
+    return true
+  }
+  return false
+}

library/observables-connect/src/extensions.ts → library/observables-connect/src/extensions/discover.ts

@@ -2,8 +2,7 @@
 SPDX-License-Identifier: GPL-3.0-only */
 
 import extensions from '@w3ux/extension-assets'
-import type { ExtensionStatus } from '@w3ux/types'
-import { _extensionsStatus, _gettingExtensions } from './index'
+import { _extensionsStatus, _gettingExtensions } from '../observables'
 
 // Gets extensions from injectedWeb3
 export const getExtensions = async () => {
@@ -30,41 +29,37 @@ export const getExtensions = async () => {
     _gettingExtensions.next(false)
   }
 
+  const interval = 200
+  const maxChecks = 10
+  const minVerifications = 2
+
   // Getter for the currently installed extensions
   let counter = 0
-  const interval = 300
-  const maxChecks = 10
+  let verifications = 0
   injectedWeb3Interval = setInterval(() => {
     counter++
     if (counter === maxChecks) {
       handleCompleted(false)
     } else {
-      // `injectedWeb3` is present
-      const injectedWeb3 = window?.injectedWeb3 || null
-      if (injectedWeb3 !== null) {
+      const injected = window?.injectedWeb3
+
+      // Check if injected exists and all extensions have a valid enable function
+      const ready =
+        injected !== undefined &&
+        Object.entries(injected).every(
+          ([, ext]) => ext && typeof ext.enable === 'function'
+        )
+
+      // Increment verifications if the extensions are ready
+      if (ready) {
+        verifications++
+      } else {
+        verifications = 0
+      }
+
+      if (counter > 2 && verifications >= minVerifications) {
         handleCompleted(true)
       }
     }
   }, interval)
 }
-
-// Gets an extension status
-export const getStatus = (id: string): ExtensionStatus =>
-  _extensionsStatus.getValue()[id] || undefined
-
-// Sets an extension status
-export const setStatus = (id: string, status: ExtensionStatus) => {
-  const newValue = { ..._extensionsStatus.getValue() }
-  newValue[id] = status
-  _extensionsStatus.next(newValue)
-}
-
-// Removes an extension status
-export const removeStatus = (id: string) => {
-  const { [id]: _, ...rest } = _extensionsStatus.getValue()
-  _extensionsStatus.next(rest)
-}
-
-// Whether an extension can be connected
-export const canConnect = (id: string) =>
-  ![undefined, 'connected'].includes(_extensionsStatus.getValue()[id])