Merge branch 'frontend-watchonly-guide'

Author: thisconnect

frontends/web/src/locales/en/app.json

@@ -753,6 +753,10 @@
         "text": "Your wallet can manage multiple accounts of the same coin. Accounts are helpful when you want to keep funds separate.",
         "title": "What are accounts?"
       },
+      "whatIsRememberWallet": {
+        "text": "Enabling “Remember wallet” lets you see the accounts for this wallet in the BitBoxApp even when the BitBox02 is not plugged in. This allows you to check your balance and portfolio whenever you want. The BitBox02 still needs to be plugged in and unlocked to send or receive coins.\n\nDisabling “Remember wallet” requires you to plug in the respective BitBox02 (or passphrase wallet) to see those accounts in the BitBoxApp.",
+        "title": "What happens when I enable/disable “Remember wallet”?"
+      },
       "whyIsThisUseful": {
         "text": "Accounts are great for managing funds for different people or purposes because they are separated. You can also share the \"extended public key\" of an account without revealing anything about your other accounts. This allows you to repeatedly receive funds without reusing addresses, such as receiving your wage or regularly buying crypto.",
         "title": "Why is this useful?"

frontends/web/src/routes/account/add/add-account-guide.tsx

@@ -0,0 +1,33 @@
+/**
+ * Copyright 2022 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { Entry } from '../../../components/guide/entry';
+import { Guide } from '../../../components/guide/guide';
+
+export const AddAccountGuide = () => {
+  const { t } = useTranslation();
+  return (
+    <Guide>
+      <Entry key="whatAreAccounts" entry={t('guide.accounts.whatAreAccounts')} />
+      <Entry key="whyIsThisUseful" entry={t('guide.accounts.whyIsThisUseful')} />
+      <Entry key="recoverAccounts" entry={t('guide.accounts.recoverAccounts')} />
+      <Entry key="moveFunds" entry={t('guide.accounts.moveFunds')} />
+      <Entry key="howtoAddTokens" entry={t('guide.accounts.howtoAddTokens')} />
+      <Entry key="howManyAccounts" entry={t('guide.accounts.howManyAccounts')} />
+    </Guide>
+  );
+};

frontends/web/src/routes/account/add/add.tsx

@@ -25,7 +25,7 @@ import { Header } from '../../../components/layout';
 import { Step, Steps } from './components/steps';
 import { CoinDropDown } from './components/coin-dropdown';
 import { Check } from '../../../components/icon/icon';
-import Guide from '../../settings/manage-account-guide';
+import { AddAccountGuide } from './add-account-guide';
 import { route } from '../../../utils/route';
 import { addAccount, CoinCode, TAddAccount } from '../../../api/account';
 import styles from './add.module.css';
@@ -260,7 +260,7 @@ export const AddAccount = () => {
           </div>
         </div>
       </div>
-      <Guide />
+      <AddAccountGuide />
     </div>
   );
 };

frontends/web/src/routes/settings/manage-account-guide.tsx

@@ -18,16 +18,17 @@ import { useTranslation } from 'react-i18next';
 import { Entry } from '../../components/guide/entry';
 import { Guide } from '../../components/guide/guide';
 
-export default function BuyGuide() {
+export const AccountGuide = () => {
   const { t } = useTranslation();
   return (
     <Guide>
       <Entry key="whatAreAccounts" entry={t('guide.accounts.whatAreAccounts')} />
       <Entry key="whyIsThisUseful" entry={t('guide.accounts.whyIsThisUseful')} />
+      <Entry key="whatIsRememberWallet" entry={t('guide.accounts.whatIsRememberWallet')} />
       <Entry key="recoverAccounts" entry={t('guide.accounts.recoverAccounts')} />
       <Entry key="moveFunds" entry={t('guide.accounts.moveFunds')} />
       <Entry key="howtoAddTokens" entry={t('guide.accounts.howtoAddTokens')} />
       <Entry key="howManyAccounts" entry={t('guide.accounts.howManyAccounts')} />
     </Guide>
   );
-}
+};

frontends/web/src/routes/settings/manage-accounts.tsx

@@ -31,7 +31,7 @@ import { translate, TranslateProps } from '../../decorators/translate';
 import { WithSettingsTabs } from './components/tabs';
 import { View, ViewContent } from '../../components/view/view';
 import { MobileHeader } from '../settings/components/mobile-header';
-import Guide from './manage-account-guide';
+import { AccountGuide } from './manage-account-guide';
 import style from './manage-accounts.module.css';
 import { WatchonlySetting } from './components/manage-accounts/watchonlySetting';
 
@@ -332,7 +332,7 @@ class ManageAccounts extends Component<Props, State> {
             </View>
           </Main>
         </GuidedContent>
-        <Guide />
+        <AccountGuide />
       </GuideWrapper>
 
     );