fix: go to dashboard on account address click

src/components/account/account.tsx

@@ -1,9 +1,11 @@
 import { Account as AccountType } from '@radixdlt/radix-dapp-toolkit'
+import { RefObject, createRef, useEffect } from 'react'
 
 declare global {
   namespace JSX {
     interface IntrinsicElements {
       'radix-account': {
+        ref: RefObject<HTMLElement>
         label: string
         address: string
         appearanceId: number
@@ -12,9 +14,31 @@ declare global {
   }
 }
 
-export const Account = ({ account }: { account: AccountType }) => {
+export const Account = ({
+  account,
+  onLinkClick,
+}: {
+  account: AccountType
+  onLinkClick?: (ev: CustomEvent) => void
+}) => {
+  const ref = createRef<HTMLElement>()
+
+  useEffect(() => {
+    if (!ref.current || !onLinkClick) return
+
+    ref.current.addEventListener('onLinkClick', onLinkClick as EventListener)
+
+    return () => {
+      if (!ref.current || !onLinkClick) return
+      ref.current.removeEventListener(
+        'onLinkClick',
+        onLinkClick as EventListener,
+      )
+    }
+  }, [])
   return (
     <radix-account
+      ref={ref}
       label={account.label}
       address={account.address}
       appearanceId={account.appearanceId}

src/components/linked-wallet/shared-accounts.tsx

@@ -1,21 +1,38 @@
 import ChevronDown from './chevron-down.svg'
-import { Account as AccountType } from '@radixdlt/radix-dapp-toolkit'
+import {
+  Account as AccountType,
+  RadixNetworkConfigById,
+} from '@radixdlt/radix-dapp-toolkit'
 import { Account } from 'components/account/account'
 import { Box, Collapse } from '@mui/material'
 import { useState } from 'react'
+import { parseAddress } from 'utils/parse-address'
 
 export const SharedAccounts = (props: {
   accounts?: AccountType[]
   isJustLinked?: boolean
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(!props.isJustLinked)
 
+  const onLinkClick = async (e: CustomEvent) => {
+    if (e.detail.type === 'account' && e.detail.data) {
+      const { networkId } = parseAddress(e.detail.data)
+      const dashboardUrl = RadixNetworkConfigById[networkId].dashboardUrl
+
+      window.open([dashboardUrl, 'account', e.detail.data].join('/'), '_blank')
+    }
+  }
+
   return (
     <Box>
       <Collapse in={!isCollapsed}>
         <Box display="flex" flexDirection="column" gap="8px">
           {props.accounts?.map((account) => (
-            <Account key={account.address} account={account} />
+            <Account
+              key={account.address}
+              account={account}
+              onLinkClick={onLinkClick}
+            />
           ))}
         </Box>
       </Collapse>

src/utils/parse-address.test.ts

@@ -0,0 +1,53 @@
+import { parseAddress } from './parse-address'
+
+describe('parse address', () => {
+  const tests: [string, { networkId: number; type: string }][] = [
+    [
+      'account_tdx_2_129449mktvws4ww6wyww0dt85fn7md383cdq58307ayfz7g0n9vznfa',
+      { networkId: 2, type: 'account' },
+    ],
+    [
+      'account_tdx_2_128ex28rgvj4nqsqs7vtha0upknrpspzanfr95t6j6nss225dc47nu4',
+      { networkId: 2, type: 'account' },
+    ],
+    [
+      'resource_rdx1tknxxxxxxxxxradxrdxxxxxxxxx009923554798xxxxxxxxxradxrd',
+      {
+        networkId: 1,
+        type: 'resource',
+      },
+    ],
+    [
+      'account_rdx12xezaw0gn9yhld6kplkk3ah7h6y48qgrmjr5e76krxq9hgws4junpr',
+      {
+        networkId: 1,
+        type: 'account',
+      },
+    ],
+    [
+      'account_tdx_21_128wkep7c2mtdv5d0vvj23kp0rreud09384gru64w992pkmqga0nr87',
+      {
+        type: 'account',
+        networkId: 21,
+      },
+    ],
+    [
+      'account_sim1cyyavav59dl55jur4eyxqz9wqyjycp2aua9dzduflfeefrfl623wgc',
+      {
+        networkId: 242,
+        type: 'account',
+      },
+    ],
+  ]
+  it('should parse address', () => {
+    tests.forEach(([address, expected]) => {
+      expect(parseAddress(address)).toEqual(expected)
+    })
+  })
+
+  it('should throw error on invalid address', () => {
+    expect(() => parseAddress('invalid')).toThrowError(
+      'Invalid address invalid',
+    )
+  })
+})

src/utils/parse-address.ts

@@ -0,0 +1,19 @@
+export const parseAddress = (
+  address: string,
+): { networkId: number; type: string } => {
+  const match = address.match(/^([a-z]+)_(rdx|sim|tdx_[\d]+_)1(?:[a-z0-9]+)$/)
+
+  if (!match) {
+    throw new Error(`Invalid address ${address}`)
+  }
+
+  const [, type, network] = match
+
+  const networkId =
+    network === 'rdx' ? 1 : network === 'sim' ? 242 : network.split('_')[1]
+
+  return {
+    networkId: Number(networkId),
+    type,
+  }
+}