fix: initialization messages and ui improvements

src/chrome/background/message-handler.ts

@@ -22,8 +22,9 @@ import { notificationDispatcher } from './notification-dispatcher'
 import { getExtensionOptions } from 'options'
 import { chromeLocalStore } from 'chrome/helpers/chrome-local-store'
 import { RadixNetworkConfigById } from '@radixdlt/babylon-gateway-api-sdk'
-import { ConnectionsClient } from 'pairing/state/connections'
+import { Connections, ConnectionsClient } from 'pairing/state/connections'
 import { WalletInteraction } from '@radixdlt/radix-dapp-toolkit'
+import { getSessionRouterData } from 'chrome/offscreen/session-router'
 
 export type BackgroundMessageHandler = ReturnType<
   typeof BackgroundMessageHandler
@@ -38,7 +39,7 @@ export const BackgroundMessageHandler =
   }: Partial<{
     logger?: AppLogger
     ledgerTabWatcher: ReturnType<typeof LedgerTabWatcher>
-    getConnections: () => ResultAsync<any, Error>
+    getConnections: () => ResultAsync<Connections, never>
     closePopup: () => ResultAsync<any, Error>
     openParingPopup: () => ResultAsync<any, Error>
   }>) =>
@@ -58,25 +59,15 @@ export const BackgroundMessageHandler =
 
     switch (message?.discriminator) {
       case messageDiscriminator.getExtensionOptions:
-        return getExtensionOptions()
-          .mapErr((error) => ({
-            reason: 'failedToGetExtensionOptions',
-            jsError: Error('failedToGetExtensionOptions'),
-          }))
-          .map((options) => ({
-            sendConfirmation: true,
-            data: { options },
-          }))
+        return getExtensionOptions().map((options) => ({
+          sendConfirmation: true,
+          data: { options },
+        }))
       case messageDiscriminator.getConnections:
-        return getConnections()
-          .mapErr((error) => ({
-            reason: 'failedToGetConnections',
-            jsError: error,
-          }))
-          .map((data) => ({
-            sendConfirmation: true,
-            data,
-          }))
+        return getConnections().map((data) => ({
+          sendConfirmation: true,
+          data,
+        }))
 
       case messageDiscriminator.openParingPopup:
         return openParingPopup()
@@ -202,15 +193,10 @@ export const BackgroundMessageHandler =
       }
 
       case messageDiscriminator.getSessionRouterData: {
-        return chromeLocalStore
-          .getItem('sessionRouter')
-          .map((data) => ({
-            sendConfirmation: true,
-            data,
-          }))
-          .mapErr(() => ({
-            reason: 'failedToGetSessionRouterData',
-          }))
+        return getSessionRouterData().map((data) => ({
+          sendConfirmation: true,
+          data,
+        }))
       }
 
       case messageDiscriminator.dAppRequest: {

src/chrome/helpers/get-connections.ts

@@ -1,11 +1,12 @@
 import { Connections } from 'pairing/state/connections'
 import { chromeLocalStore } from './chrome-local-store'
-import { ResultAsync } from 'neverthrow'
+import { ResultAsync, ok } from 'neverthrow'
 
-export const getConnections = (): ResultAsync<Connections, Error> =>
+export const getConnections = (): ResultAsync<Connections, never> =>
   chromeLocalStore
     .getItem('connections')
     .map(({ connections }) => connections || {})
+    .orElse(() => ok({}))
 
 export const hasConnections = () =>
   getConnections().map(

src/chrome/offscreen/helpers/offscreen-initialization-messages.ts

@@ -33,10 +33,10 @@ export const OffscreenInitializationMessages = (
     },
     sessionRouterData: () => {
       messageClient
-        .sendMessageAndWaitForConfirmation<{
-          sessionRouter: Record<SessionId, WalletPublicKey>
-        }>(createMessage.getSessionRouterData())
-        .andThen(({ sessionRouter }) =>
+        .sendMessageAndWaitForConfirmation<Record<SessionId, WalletPublicKey>>(
+          createMessage.getSessionRouterData(),
+        )
+        .andThen((sessionRouter) =>
           messageClient.handleMessage(
             createMessage.setSessionRouterData(sessionRouter, 'offScreen'),
           ),

src/chrome/offscreen/message-handler.ts

@@ -111,8 +111,8 @@ export const OffscreenMessageHandler = (input: {
 
       case messageDiscriminator.setSessionRouterData: {
         const { data } = message
-        sessionRouter.refreshStore(data)
-        logger?.info('setSessionRouterData', data)
+        logger?.info('setSessionRouterData', message)
+        sessionRouter.refreshStore(data || {})
         return okAsync({ sendConfirmation: true })
       }
 

src/chrome/offscreen/session-router.ts

@@ -1,3 +1,6 @@
+import { chromeLocalStore } from 'chrome/helpers/chrome-local-store'
+import { ResultAsync, ok } from 'neverthrow'
+
 export type SessionRouter = ReturnType<typeof SessionRouter>
 
 export type SessionId = string
@@ -22,3 +25,14 @@ export const SessionRouter = () => {
     store,
   }
 }
+
+export const sessionRouter = SessionRouter()
+
+export const getSessionRouterData = (): ResultAsync<
+  Record<string, string>,
+  never
+> =>
+  chromeLocalStore
+    .getItem('sessionRouter')
+    .map(({ sessionRouter }) => sessionRouter || {})
+    .orElse(() => ok({}))

src/components/linked-wallet/linked-wallet.scss

@@ -15,3 +15,7 @@ button {
   display: inline-flex;
   transition: transform 0.3s ease-in-out;
 }
+
+.shared-accounts-collapse-button.rotate {
+  margin-top: 5px;
+}

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

@@ -2,7 +2,7 @@ import ChevronDown from './chevron-down.svg'
 import { Account as AccountType } from '@radixdlt/radix-dapp-toolkit'
 import { Account } from 'components/account/account'
 import { Box, Collapse } from '@mui/material'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 export const SharedAccounts = (props: {
   accounts?: AccountType[]
@@ -11,7 +11,7 @@ export const SharedAccounts = (props: {
   const [isCollapsed, setIsCollapsed] = useState(!props.isJustLinked)
 
   return (
-    <Box sx={{ marginTop: '-5px', marginBottom: '5px' }}>
+    <Box>
       <Collapse in={!isCollapsed}>
         <Box display="flex" flexDirection="column" gap="8px">
           {props.accounts?.map((account) => (

src/options/index.ts

@@ -1,7 +1,7 @@
 import { chromeLocalStore } from 'chrome/helpers/chrome-local-store'
 import { logger } from 'utils/logger'
 import { defaultRadixConnectConfig } from 'config'
-import { ResultAsync } from 'neverthrow'
+import { ResultAsync, ok } from 'neverthrow'
 import { ed25519 } from '@noble/curves/ed25519'
 
 const privateKey = ed25519.utils.randomPrivateKey()
@@ -10,9 +10,9 @@ const publicKey = ed25519.getPublicKey(privateKey)
 export type ConnectorExtensionOptions = {
   publicKey: string
   privateKey: string
-  showDAppRequestNotifications?: boolean
-  showTransactionResultNotifications?: boolean
   radixConnectConfiguration: string
+  showDAppRequestNotifications: boolean
+  showTransactionResultNotifications: boolean
 }
 
 export const defaultConnectorExtensionOptions: ConnectorExtensionOptions = {
@@ -23,11 +23,13 @@ export const defaultConnectorExtensionOptions: ConnectorExtensionOptions = {
   radixConnectConfiguration: defaultRadixConnectConfig,
 }
 
-export const getSingleOptionValue = (key: keyof ConnectorExtensionOptions) =>
+export const getSingleOptionValue = <T extends keyof ConnectorExtensionOptions>(
+  key: T,
+): ResultAsync<ConnectorExtensionOptions[T], never> =>
   chromeLocalStore
     .getSingleItem('options')
     .map((options) => options?.[key] || defaultConnectorExtensionOptions[key])
-    .mapErr(() => defaultConnectorExtensionOptions[key])
+    .orElse(() => ok(defaultConnectorExtensionOptions[key]))
 
 export const getShowDAppRequestNotifications = () =>
   getSingleOptionValue('showDAppRequestNotifications')
@@ -37,15 +39,15 @@ export const getShowTransactionResultNotifications = () =>
 
 export const getExtensionOptions = (): ResultAsync<
   ConnectorExtensionOptions,
-  ConnectorExtensionOptions
+  never
 > => {
   return chromeLocalStore
     .getSingleItem('options')
     .map((options) => ({
       ...defaultConnectorExtensionOptions,
       ...options,
     }))
-    .mapErr(() => defaultConnectorExtensionOptions)
+    .orElse(() => ok(defaultConnectorExtensionOptions))
 }
 
 export const setConnectorExtensionOptions = (

src/pairing/components/connection-password.tsx

@@ -22,7 +22,7 @@ export const ConnectionPassword = ({
     <>
       <PairingHeader
         header={
-          connectionsClient.hasNoConnections()
+          !connectionsClient.hasConnections()
             ? 'Radix Wallet Connector'
             : 'Link New Radix Wallet'
         }
@@ -44,15 +44,7 @@ export const ConnectionPassword = ({
       </Box>
 
       <Box textAlign="center" mb="lg">
-        {connectionsClient.hasNoConnections() ? (
-          <LinkComponent
-            style={{ fontSize: '16px', color: 'white', fontWeight: 'bold' }}
-            href="https://wallet.radixdlt.com"
-            target="_blank"
-          >
-            {`Don't have Radix Wallet?`}
-          </LinkComponent>
-        ) : (
+        {connectionsClient.hasConnections() ? (
           <Link
             style={{
               fontSize: '16px',
@@ -64,6 +56,14 @@ export const ConnectionPassword = ({
           >
             Cancel
           </Link>
+        ) : (
+          <LinkComponent
+            style={{ fontSize: '16px', color: 'white', fontWeight: 'bold' }}
+            href="https://wallet.radixdlt.com"
+            target="_blank"
+          >
+            {`Don't have Radix Wallet?`}
+          </LinkComponent>
         )}
       </Box>
       <RelinkWarning />

src/pairing/components/connection-status.tsx

@@ -38,7 +38,7 @@ export const ConnectionStatus = () => {
 
   useEffect(() => {
     if (connectionsClient.isLoading()) return
-    if (connectionsClient.hasNoConnections()) {
+    if (!connectionsClient.hasConnections()) {
       navigate('/pairing')
     }
   }, [connections])
@@ -79,7 +79,7 @@ export const ConnectionStatus = () => {
     )
   }
 
-  return (
+  return connectionsClient.hasConnections() ? (
     <>
       <Box
         py="small"
@@ -125,5 +125,5 @@ export const ConnectionStatus = () => {
       {renderForgetWalletConfirmation()}
       {renderChangeWalletName()}
     </>
-  )
+  ) : null
 }

src/pairing/state/connections.ts

@@ -22,7 +22,7 @@ export const useConnections = () => {
   useEffect(() => {
     chromeLocalStore.getItem('connections').map((result) => {
       if (JSON.stringify(result.connections) !== JSON.stringify(connections)) {
-        setConnections(result.connections || null)
+        setConnections(result.connections || {})
       }
     })
     const listener = (
@@ -69,8 +69,8 @@ export const ConnectionsClient = (connections?: Connections | null) => {
     })
   }
 
-  const hasNoConnections = () => {
-    return connections && Object.keys(connections).length === 0
+  const hasConnections = () => {
+    return connections && Object.keys(connections).length > 0
   }
 
   const isLoading = () => {
@@ -137,7 +137,7 @@ export const ConnectionsClient = (connections?: Connections | null) => {
     entries,
     isLoading,
     updateName,
-    hasNoConnections,
+    hasConnections,
     updateAccounts,
     connections,
   }