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,
+ }
+}