feat(connected-accounts): implement linking/unlinking NEAR accounts with social networks (#57)

* Revert "feat: open the overlay by left-clicking on the extension icon (DAP-4805)"

This reverts commit 5470dbd.

* feat: add skeleton of the side panel (DAP-4813)

* refactor: extract engine from NotificationProvider

* refactor: remove unused imports

* Merge branch 'develop' into dap-4813

* feat: mocked side panel

* fix: `dev:extension` script

* refactor: move app switchers to shared components

* feat: add Connect Module for CA page (DAP-4844)

* refactor: extract engine hooks to a separate package

* refactor: declarative way to initialize parser configs

* fix: colors; refactor: use css variables

* feat: synchronize wallet state

* fix: notifications are empty

* feat: use data from a site context, subscribe for changes

* refactor: upgrade react router dom

* fix: overlay doesn't work in gateway

* refactor: remove unused imports

* refactor: extract all dependant calls to context

* feat: sync context tree with side panel

* refactor: replace selectedMutation with selectedMutationId

* feat: switch mutation from side panel

* refactor: extract favorite mutations to react-engine

* refactor: extract preferred source to react-engine

* refactor: move mutation editor modal to the side panel

* refactor: rename hook

* refactor: move overlay open state inside

* refactor: move networkId to wallet provider

* refactor: move core inside engine

* refactor: simplify overlay drawer

* feat: remove overlay from extension

* refactor: use wildcard export

* feat: extract notifications to the separate page

* fix: mutation editor not found

* refactor: reuse existing mutation editor

* refactor: get rid of mutations with settings

* fix: broken styles in mutations list

* fix: broken connection between cs and sp

* refactor: memoize mutations

* fix: parser is reattached after mutation switching

* refactor: don't load all mutations in the engine

* refactor: reuse use state hook

* fix: window focus refetch

* fix: empty mutations list

* feat: move apps to the sidepanel

* refactor: replace `/system/` route with `/`

* fix: near social doesn't work

* refactor: extract modalContainerRef into context

* fix: pr review modal doesn't show

* fix: mutation editor doesn't fit into overlay

* refactor: remove unused switchMutationVersion from engine

* refactor: extract setPreferredSource from context

* refactor: remove unused props

* refactor: remove unused mutationApps from the context

* docs: add todos

* feat: implement `connect` and `disconnect` functionality for CA (DAP-4845, DAP-4846, DAP-4847)

* feat: keep two engines in sync

* feat: close sidepanel via uber sausage

* fix: status update

* refactor: use `social account` in Connect Module

* fix: broken side panel

* fix: deleted mutation from preferred source is not loaded

* fix: remove from recently used doesn't work

* fix: mutation editor modal is empty

* feat: add error messages and the condition check for the active account

* refactor: extract all engine listeners to one hook

* refactor: return undefined if there is no query data

* fix: sync mutation and apps state

* feat: open wallet in window popup

* feat: exclude wallet urls

* fix: sidepanel reacts on tabs in another windows

* fix: prev is undefined error

* fix: prev is undefined error

* feat: no connection message

* feat: two way state sync

* fix: inconsistent state after forking

* fix: cannot remove mutation from recent

* ci: fix invalid type on

* fix: three dots popups

* chore: update pnpm lock

* refactor: extract socialNetworkConnectionCondition from the context

* refactor: extract useGetVerificationRequest

* refactor: extract useGetPendingRequests

* refactor: extract useMinStakeAmount

* refactor: rename hook

* refactor: extract useChangeCAStatus and useGetCAPairs

* refactor: extract useGetCANet

* refactor: extract whole ca context

* fix: path in import

* fix: after connecting the wallet, a message about the connection conditions not being met is not displayed (DAP-4861)

* feat: change `RequestStatus` options; add example for CA connection condition

* refactor: use serialized context tree

* fix: useOutside closes popup immediately

* fix: tree is not synced

* fix: message when there are no connected accounts yet; refactor: add comments about hardcode in CA

---------

Co-authored-by: Alexander Sakhaev <alsakhaev@gmail.com>

Author: Ni-2

apps/extension/src/sidepanel/use-current-tab.ts

@@ -40,13 +40,16 @@ export const useCurrentTab = (windowId: number) => {
 
       setEventEmitter(eventEmitter)
 
+      let currentTree: IContextNode | null = null
+
       portRef.current.onMessage.addListener((msg: any) => {
         // ToDo: handle childContextRemoved, contextChanged
         if (msg.type === 'contextTree') {
-          setTree(PureContextNode.fromTransferable(msg.data))
+          currentTree = PureContextNode.fromTransferable(msg.data)
+          setTree(currentTree)
         } else if (msg.type === 'childContextAdded') {
           function updateTree(node: TransferableContextNode): IContextNode | null {
-            if (!node.parentNode) return tree
+            if (!node.parentNode) return currentTree
 
             const clonedParentNode = updateTree(node.parentNode)
 

libs/backend/src/index.ts

@@ -47,6 +47,7 @@ export {
   NearNetworks,
   ChainTypes,
   TConnectedAccountsVerificationRequestInfo,
+  ConnectedAccountsRequestStatus,
 } from './services/connected-accounts/types'
 export { ConnectedAccountsService } from './services/connected-accounts/connected-accounts.service'
 

libs/backend/src/services/connected-accounts/connected-accounts.service.ts

@@ -162,7 +162,7 @@ export class ConnectedAccountsService {
 
     const receiverOrigin =
       receiver.chain === ChainTypes.ETHEREUM_SEPOLIA || receiver.chain === ChainTypes.ETHEREUM_XDAI
-        ? 'ethereum'
+        ? 'ethereum' // ToDo: hardcoded
         : receiver.chain
     const receiverConnectedAccountUser: IConnectedAccountUser = {
       name: receiver.account,
@@ -186,7 +186,7 @@ export class ConnectedAccountsService {
           accountActive: accStatus,
         },
         statusName: ConnectedAccountsPairStatus.Processing,
-        statusMessage: 'Processing',
+        statusMessage: 'Processing', // ToDo: use enum
         closeness: 1,
         pendingRequestId,
       })
@@ -223,7 +223,7 @@ export class ConnectedAccountsService {
             accountActive: ca.status.isMain,
           },
           statusName: ConnectedAccountsPairStatus.Connected,
-          statusMessage: 'Connected',
+          statusMessage: 'Connected', // ToDo: use enum
           closeness: i + 1,
         })
       })
@@ -266,8 +266,8 @@ export class ConnectedAccountsService {
             statusName: ConnectedAccountsPairStatus.Error,
             statusMessage:
               newPairsLengthBeforeFilter === newPairs.length
-                ? 'Connection rejected'
-                : 'Disconnection rejected',
+                ? 'Connection rejected' // ToDo: use enum ???
+                : 'Disconnection rejected', // ToDo: use enum ???
             closeness: 1,
           })
         }

libs/engine/src/app/app.tsx

@@ -5,7 +5,6 @@ import React, { FC, Fragment, ReactNode, useRef, useState } from 'react'
 import { ContextHighlighter } from './components/context-highlighter'
 import { ContextManager } from './components/context-manager'
 import { ContextPicker } from './components/context-picker'
-import { ConnectedAccountsProvider } from './contexts/connected-accounts-context'
 import { DevProvider } from './contexts/dev-context'
 import { HighlighterProvider } from './contexts/highlighter-context'
 import { ModalProvider } from './contexts/modal-context'
@@ -51,16 +50,14 @@ export const App: FC<{
                   defaultMutationId={defaultMutationId}
                   modalApi={modalApi}
                 >
-                  <ConnectedAccountsProvider>
-                    <ViewportProvider stylesheetSrc={config.bosElementStyleSrc}>
-                      <ModalProvider onModalApiReady={setModalApi}>
-                        <ContextPicker />
-                        <ContextManager />
-                        <ContextHighlighter />
-                      </ModalProvider>
-                    </ViewportProvider>
-                    <Fragment>{children}</Fragment>
-                  </ConnectedAccountsProvider>
+                  <ViewportProvider stylesheetSrc={config.bosElementStyleSrc}>
+                    <ModalProvider onModalApiReady={setModalApi}>
+                      <ContextPicker />
+                      <ContextManager />
+                      <ContextHighlighter />
+                    </ModalProvider>
+                  </ViewportProvider>
+                  <Fragment>{children}</Fragment>
                 </MutableWebProvider>
               </HighlighterProvider>
             </PickerProvider>