fix: render

packages/beacon-dapp/src/events.ts

@@ -290,16 +290,17 @@ const showPrepare = async (data: { walletInfo?: WalletInfo }): Promise<void> =>
 }
 
 const hideUI = async (elements?: ('alert' | 'toast')[]): Promise<void> => {
-  if (elements) {
-    if (elements.includes('alert')) {
-      await closeAlerts()
-    }
-    if (elements.includes('toast')) {
-      await closeToast()
-    }
-  } else {
-    await closeToast()
-  }
+  // if (elements) {
+  //   if (elements.includes('alert')) {
+  //     await closeAlerts()
+  //   }
+  //   if (elements.includes('toast')) {
+  //     await closeToast()
+  //   }
+  // } else {
+  //   await closeToast()
+  // }
+  console.log('todo', elements)
 }
 
 /**

packages/beacon-ui/src/ui/alert/components/alert-content/index.tsx

@@ -1,7 +1,7 @@
-import InfoAlert from '../info-alert'
+import PairingAlert from '../pairing-alert'
 
-const AlertContent = ({ title, body, data }: any) => {
-  return <InfoAlert title={title} body={body} data={data} />
+const AlertContent = () => {
+  return <PairingAlert />
 }
 
 export default AlertContent

packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx

@@ -0,0 +1,14 @@
+import useWallets from '../../hooks/useWallets'
+
+const PairingAlert = () => {
+  const wallets = useWallets()
+  return (
+    <h1>
+      {wallets.map((wallet, i) => (
+        <div key={`${i}`}>{wallet.name}</div>
+      ))}
+    </h1>
+  )
+}
+
+export default PairingAlert

packages/beacon-ui/src/ui/alert/hooks/useWallets.tsx

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useState } from 'react'
+import { PostMessageTransport } from '@airgap/beacon-transport-postmessage'
+import {
+  arrangeTopWallets,
+  MergedWallet,
+  mergeWallets,
+  parseWallets,
+  Wallet
+} from 'src/utils/wallets'
+import { Extension, NetworkType } from '@airgap/beacon-types'
+import { desktopList, extensionList, iOSList, webList } from '../wallet-lists'
+import { windowRef } from '@airgap/beacon-core'
+
+const useWallets = (networkType?: NetworkType, featuredWallets?: string[]) => {
+  const [wallets, setWallets] = useState<MergedWallet[]>([])
+
+  useEffect(() => {
+    PostMessageTransport.getAvailableExtensions().then((extensions) =>
+      setWallets(createWallets(extensions))
+    )
+    const handler = async (event: any): Promise<void> => {
+      if (event.data === 'extensionsUpdated') {
+        setWallets(createWallets(await PostMessageTransport.getAvailableExtensions()))
+      }
+    }
+    windowRef.addEventListener('message', handler)
+    return () => {
+      windowRef.removeEventListener('message', handler)
+    }
+  }, [])
+
+  const createWallets = useCallback((availableExtensions: Extension[]) => {
+    const wallets: Wallet[] = [
+      ...desktopList
+        // This is used for a special case where desktop wallets have inApp browsers.
+        // In this case, the wallet will act like an extension. This means we have to remove
+        // the desktop app from the list to make the user experience better. One example of this
+        // is Infinity Wallet.
+        .filter(
+          (wallet) => !availableExtensions.some((extWallet) => wallet.name === extWallet.name)
+        )
+        .map((wallet) => {
+          return {
+            id: wallet.key,
+            key: wallet.key,
+            name: wallet.shortName,
+            image: wallet.logo,
+            description: 'Desktop App',
+            supportedInteractionStandards: wallet.supportedInteractionStandards,
+            type: 'desktop',
+            link: wallet.downloadLink,
+            deepLink: wallet.deepLink
+          }
+        }),
+      ...extensionList.map((wallet) => {
+        return {
+          id: wallet.id,
+          key: wallet.key,
+          name: wallet.shortName,
+          image: wallet.logo,
+          description: 'Browser Extension',
+          supportedInteractionStandards: wallet.supportedInteractionStandards,
+          type: 'extension',
+          link: wallet.link
+        }
+      }),
+      ...iOSList.map((wallet) => {
+        return {
+          id: wallet.key,
+          key: wallet.key,
+          name: wallet.shortName,
+          image: wallet.logo,
+          description: 'Mobile App',
+          supportedInteractionStandards: wallet.supportedInteractionStandards,
+          type: 'ios',
+          link: wallet.universalLink,
+          deepLink: wallet.deepLink
+        }
+      }),
+      ...webList.map((wallet) => {
+        const link = networkType ?? NetworkType.MAINNET
+        return {
+          id: wallet.key,
+          key: wallet.key,
+          name: wallet.shortName,
+          image: wallet.logo,
+          description: 'Web App',
+          supportedInteractionStandards: wallet.supportedInteractionStandards,
+          type: 'web',
+          link: link ?? wallet.links.mainnet
+        }
+      }),
+      ...availableExtensions
+        .filter((newExt) => !extensionList.some((ext) => ext.id === newExt.id))
+        .map((wallet) => {
+          return {
+            id: wallet.id,
+            key: wallet.id,
+            name: wallet.shortName ?? wallet.name ?? '',
+            image: wallet.iconUrl ?? '',
+            description: 'Browser Extension',
+            type: 'extension',
+            link: (wallet as any).link ?? ''
+          }
+        })
+    ]
+
+    // Parse wallet names
+    const parsedWallets = parseWallets(wallets)
+
+    // Merge wallets by name
+    const mergedWallets = mergeWallets(parsedWallets)
+
+    // Default selection of featured wallets
+    const defaultWalletList = ['kukai', 'temple', 'plenty', 'umami']
+
+    // Sort wallets by top 4
+    const arrangedWallets = arrangeTopWallets(mergedWallets, featuredWallets ?? defaultWalletList)
+
+    return arrangedWallets
+  }, [])
+
+  return wallets
+}
+export default useWallets

packages/beacon-ui/src/ui/alert/index.tsx

@@ -5,9 +5,11 @@ import {
   NetworkType,
   AnalyticsInterface
 } from '@airgap/beacon-types'
-import { createRoot, Root } from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import Alert from '../../components/alert'
 import AlertContent from './components/alert-content'
+import { useEffect, useState } from 'react'
+import { Subject } from 'src/utils/subject'
 
 // Interfaces
 export interface AlertButton {
@@ -34,31 +36,45 @@ export interface AlertConfig {
   featuredWallets?: string[]
 }
 
-let root: Root | undefined
+let initDone: boolean = false
+const show$ = new Subject<boolean>()
 
-const openAlert = (_config: AlertConfig) => {
+const createAlert = () => {
   const el = document.createElement('beacon-modal')
   document.body.prepend(el)
-  const _root = root ? root : (root = createRoot(el))
-  setTimeout(() => _root.render(<AlertRoot />), 50)
+  setTimeout(() => createRoot(el).render(<AlertRoot />), 50)
+  initDone = true
+}
+
+const openAlert = (_config: AlertConfig) => {
+  !initDone && createAlert()
+  show$.next(true)
 }
 
 const closeAlert = () => {
-  root?.unmount()
+  show$.next(false)
 }
 
 const closeAlerts = () => {
   closeAlert()
 }
 
 const AlertRoot = (_props: any) => {
+  const [isAlertVisible, setIsAlertVisible] = useState(true)
+  useEffect(() => {
+    show$.subscribe((value) => setIsAlertVisible(value))
+  }, [])
   return (
-    <Alert
-      open={true}
-      loading={false}
-      onCloseClick={() => closeAlert()}
-      content={<AlertContent title={'test'} body={'test'} data={'test'} />}
-    />
+    <>
+      {isAlertVisible && (
+        <Alert
+          open={true}
+          loading={false}
+          onCloseClick={() => closeAlert()}
+          content={<AlertContent />}
+        />
+      )}
+    </>
   )
 }
 

packages/beacon-ui/src/utils/subject.ts

@@ -0,0 +1,11 @@
+export class Subject<T> {
+  private subscribers: ((value: T) => void)[] = []
+
+  subscribe(callback: (value: T) => void): void {
+    this.subscribers.push(callback)
+  }
+
+  next(value: T): void {
+    this.subscribers.forEach((callback) => setTimeout(() => callback(value), 50))
+  }
+}