add account watch mode (#1045)

src/apps/popup/app-router.tsx

@@ -6,6 +6,7 @@ import { useUserActivityTracker } from '@src/hooks/use-user-activity-tracker';
 
 import { AccountSettingsPage } from '@popup/pages/account-settings';
 import { AddContactPage } from '@popup/pages/add-contact';
+import { AddWatchAccount } from '@popup/pages/add-watch-account';
 import { AllAccountsPage } from '@popup/pages/all-accounts';
 import { BackupSecretPhrasePage } from '@popup/pages/backup-secret-phrase';
 import { BuyCSPRPage } from '@popup/pages/buy-cspr';
@@ -249,6 +250,7 @@ function AppRoutes() {
         element={<SignWithLedgerInNewWindowPage />}
       />
       <Route path={RouterPath.DeployDetails} element={<DeployDetailsPage />} />
+      <Route path={RouterPath.AddWatchAccount} element={<AddWatchAccount />} />
     </Routes>
   );
 }

src/apps/popup/pages/add-watch-account/index.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { FieldValues, useForm } from 'react-hook-form';
+
+import { RouterPath, useTypedNavigate } from '@popup/router';
+
+import { dispatchToMainStore } from '@background/redux/utils';
+import { addWatchingAccount } from '@background/redux/vault/actions';
+
+import {
+  ContentContainer,
+  FooterButtonsContainer,
+  HeaderPopup,
+  HeaderSubmenuBarNavLink,
+  InputsContainer,
+  ParagraphContainer,
+  PopupLayout,
+  SpacingSize
+} from '@libs/layout';
+import {
+  Button,
+  FormField,
+  Input,
+  TextArea,
+  Typography
+} from '@libs/ui/components';
+import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-state-from-validation';
+
+export const AddWatchAccount = () => {
+  const navigate = useTypedNavigate();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { isValid }
+  } = useForm();
+
+  const isButtonDisabled = calculateSubmitButtonDisabled({ isValid });
+
+  const onSubmit = (data: FieldValues) => {
+    dispatchToMainStore(
+      addWatchingAccount({
+        publicKey: data.publicKey.trim(),
+        name: data.name.trim(),
+        secretKey: '',
+        hidden: false,
+        imported: true
+      })
+    ).then(() => navigate(RouterPath.Home));
+  };
+
+  return (
+    <PopupLayout
+      variant="form"
+      onSubmit={handleSubmit(onSubmit)}
+      renderHeader={() => (
+        <HeaderPopup
+          withNetworkSwitcher
+          withMenu
+          withConnectionStatus
+          renderSubmenuBarItems={() => (
+            <HeaderSubmenuBarNavLink linkType="back" />
+          )}
+        />
+      )}
+      renderContent={() => (
+        <ContentContainer>
+          <ParagraphContainer top={SpacingSize.XL}>
+            <Typography type="header">Add watch account</Typography>
+          </ParagraphContainer>
+          <InputsContainer>
+            <Input
+              type="text"
+              label="Name"
+              placeholder="Name"
+              {...register('name', {
+                required: true
+              })}
+            />
+            <FormField label={'Public key'}>
+              <TextArea
+                placeholder={'Public key'}
+                type="captionHash"
+                {...register('publicKey', {
+                  required: true
+                })}
+              />
+            </FormField>
+          </InputsContainer>
+        </ContentContainer>
+      )}
+      renderFooter={() => (
+        <FooterButtonsContainer>
+          <Button type="submit" disabled={isButtonDisabled}>
+            Add account
+          </Button>
+        </FooterButtonsContainer>
+      )}
+    />
+  );
+};

src/apps/popup/pages/navigation-menu/index.tsx

@@ -184,7 +184,17 @@ export function NavigationMenuPageContent() {
                   }
                 }
               ]
-            : [])
+            : []),
+          {
+            id: 6,
+            title: t('Add watch account'),
+            iconPath: 'assets/icons/plus.svg',
+            disabled: false,
+            handleOnClick: () => {
+              closeNavigationMenu();
+              navigate(RouterPath.AddWatchAccount);
+            }
+          }
         ]
       },
       {

src/apps/popup/router/paths.ts

@@ -32,5 +32,6 @@ export enum RouterPath {
   BuyCSPR = '/buy-cspr',
   ImportAccountFromLedger = '/import-account-from-ledger',
   SignWithLedgerInNewWindow = '/sign-with-ledger-in-new-window',
-  DeployDetails = '/deploys-details'
+  DeployDetails = '/deploys-details',
+  AddWatchAccount = '/add-watch-account'
 }

src/background/index.ts

@@ -80,6 +80,7 @@ import {
   accountsAdded,
   accountsImported,
   activeAccountChanged,
+  addWatchingAccount,
   anotherAccountConnected,
   deployPayloadReceived,
   deploysReseted,
@@ -645,6 +646,7 @@ runtime.onMessage.addListener(
           case getType(ledgerStateCleared):
           case getType(ledgerDeployChanged):
           case getType(ledgerRecipientToSaveOnSuccessChanged):
+          case getType(addWatchingAccount):
             store.dispatch(action);
             return sendResponse(undefined);
 

src/background/redux/vault/actions.ts

@@ -68,3 +68,7 @@ export const hideAccountFromListChanged = createAction(
 )<{
   accountName: string;
 }>();
+
+export const addWatchingAccount = createAction(
+  'ADD_WATCHING_ACCOUNT'
+)<Account>();

src/background/redux/vault/reducer.ts

@@ -9,6 +9,7 @@ import {
   accountsAdded,
   accountsImported,
   activeAccountChanged,
+  addWatchingAccount,
   anotherAccountConnected,
   deployPayloadReceived,
   deploysReseted,
@@ -318,4 +319,16 @@ export const reducer = createReducer(initialState)
         })
       };
     }
+  )
+  .handleAction(
+    addWatchingAccount,
+    (state, action: ReturnType<typeof addWatchingAccount>): State => {
+      const account = action.payload;
+
+      return {
+        ...state,
+        accounts: [...state.accounts, account],
+        activeAccountName: account.name
+      };
+    }
   );