frontend: add translation feedback link

As we are continuously adding and updating translations, we should
have a way to give feedback for the translations to help us catch
translation errors.

Added a mailto link at the bottom of the guide and allow mailto
links to be opened by the backend.

Keeping the translation feedback english-only for now, as it is
better if we get feedback in english than in the native language.

CHANGELOG.md

@@ -13,6 +13,7 @@
 - Fix broken links on Android 11+
 - Add 'sat' unit for Bitcoin accounts, available in Settings view
 - Add version number and available updates check in settings
+- Add translation feedback link in the guide
 
 ## 4.34.0
 - Bundle BitBox02 firmware version v9.12.0

backend/backend.go

@@ -88,6 +88,7 @@ var fixedURLWhitelist = []string{
 	"https://en.bitcoin.it/wiki/Bech32_adoption",
 	// Others
 	"https://cointracking.info/import/bitbox/",
+	"mailto:translations@shiftcrypto.ch?",
 }
 
 type backendEvent struct {

frontends/web/src/components/anchor/anchor.tsx

@@ -35,7 +35,7 @@ const A: FunctionComponent<Props> = ({ href, icon, children, ...props }) => {
         hide();
         route(href);
       } else {
-        apiPost('open', href);
+        apiPost('open', href).catch(console.error);
       }
     }} title={props.title || href} {...props}>
       {icon ? icon : null}

frontends/web/src/components/guide/guide.tsx

@@ -83,6 +83,18 @@ class Guide extends Component<Props> {
     store.setState({ guideExists: false });
   }
 
+  private getEmailText() {
+    const lang = this.props.i18n.language.toUpperCase();
+    const date = new Date().toISOString().split('T')[0];
+    return encodeURI(`mailto:translations@shiftcrypto.ch?subject=BitBoxApp translation feedback (#${lang} ${date})&body=I would like to report a translation issue in the BitBoxApp.
+AppView: ${window.location.pathname}
+AppLanguage: ${this.props.i18n.language}
+(Please keep this information to help us locate the issue)
+
+Description of the translation issue:
+`);
+  }
+
   public render() {
     const { shown, t, children } = this.props;
     return (
@@ -99,7 +111,15 @@ class Guide extends Component<Props> {
           <div className={style.content}>
             {children}
             <div className={style.entry}>
-              {t('guide.appendix.text')} <A href="https://shiftcrypto.ch/contact">{t('guide.appendix.link')}</A>
+              Translation feedback:
+              {' '}
+              <A href={this.getEmailText()}>
+                translations@shiftcrypto.ch
+              </A>
+              <br />
+              {t('guide.appendix.text')}
+              {' '}
+              <A href="https://shiftcrypto.ch/contact">{t('guide.appendix.link')}</A>
             </div>
           </div>
         </div>