sponsor/alerts: Add address copy notification.

Fixes https://github.com/pybricks/support/issues/806

src/alerts.ts

@@ -9,6 +9,7 @@ import explorer from './explorer/alerts';
 import firmware from './firmware/alerts';
 import hub from './hub/alerts';
 import mpy from './mpy/alerts';
+import sponsor from './sponsor/alerts';
 import type { CreateToast } from './toasterTypes';
 
 /** This collects alerts from all of the subsystems of the app */
@@ -20,6 +21,7 @@ const alertDomains = {
     firmware,
     hub,
     mpy,
+    sponsor,
 };
 
 /** Gets the type of available alert domains. */

src/sponsor/SponsorDialog.tsx

@@ -5,6 +5,7 @@ import { AnchorButton, Classes, Dialog, Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
 import React from 'react';
 import { useDispatch } from 'react-redux';
+import { alertsShowAlert } from '../alerts/actions';
 import { pybricksTeamUrl } from '../app/constants';
 import { useSelector } from '../reducers';
 import ClipboardIcon from '../utils/ClipboardIcon';
@@ -107,7 +108,10 @@ const SponsorDialog: React.VoidFunctionComponent = () => {
                         intent={Intent.PRIMARY}
                         icon={<img src={ethIcon} width={24} height={24} />}
                         fill={true}
-                        onClick={() => navigator.clipboard.writeText('pybricks.eth')}
+                        onClick={() => {
+                            navigator.clipboard.writeText('pybricks.eth');
+                            dispatch(alertsShowAlert('sponsor', 'addressCopied'));
+                        }}
                     >
                         pybricks.eth
                         <ClipboardIcon />

src/sponsor/alerts/AddressCopied.tsx

@@ -0,0 +1,22 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { Intent } from '@blueprintjs/core';
+import React from 'react';
+import type { CreateToast } from '../../toasterTypes';
+import { useI18n } from './i18n';
+
+const AddressCopied: React.VoidFunctionComponent = () => {
+    const i18n = useI18n();
+    return <p>{i18n.translate('addressCopied.message')}</p>;
+};
+
+export const addressCopied: CreateToast = (onAction) => {
+    return {
+        message: <AddressCopied />,
+        icon: 'info-sign',
+        intent: Intent.PRIMARY,
+        timeout: 5000,
+        onDismiss: () => onAction('dismiss'),
+    };
+};

src/sponsor/alerts/i18n.ts

@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { useI18n as useShopifyI18n } from '@shopify/react-i18n';
+import type { TypedI18n } from '../../i18n';
+import type translations from './translations/en.json';
+
+export function useI18n(): TypedI18n<typeof translations> {
+    // istanbul ignore next: babel-loader rewrites this line
+    const [i18n] = useShopifyI18n();
+    return i18n;
+}

src/sponsor/alerts/index.ts

@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { addressCopied } from './AddressCopied';
+
+// gathers all of the alert creation functions for passing up to the top level
+export default { addressCopied };

src/sponsor/alerts/translations/en.json

@@ -0,0 +1,5 @@
+{
+    "addressCopied": {
+        "message": "Address copied to clipboard. Use a wallet that supports ENS addresses to donate."
+    }
+}