From 986cb7c184f5d82944698e070db9d62115660ff8 Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Tue, 22 Nov 2022 11:19:02 +0100
Subject: [PATCH] sponsor/alerts: Add address copy notification.

Fixes https://github.com/pybricks/support/issues/806
---
 src/alerts.ts                           |  2 ++
 src/sponsor/SponsorDialog.tsx           |  6 +++++-
 src/sponsor/alerts/AddressCopied.tsx    | 22 ++++++++++++++++++++++
 src/sponsor/alerts/i18n.ts              | 12 ++++++++++++
 src/sponsor/alerts/index.ts             |  7 +++++++
 src/sponsor/alerts/translations/en.json |  5 +++++
 6 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/sponsor/alerts/AddressCopied.tsx
 create mode 100644 src/sponsor/alerts/i18n.ts
 create mode 100644 src/sponsor/alerts/index.ts
 create mode 100644 src/sponsor/alerts/translations/en.json

diff --git a/src/alerts.ts b/src/alerts.ts
index 192625c5..17259527 100644
--- a/src/alerts.ts
+++ b/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. */
diff --git a/src/sponsor/SponsorDialog.tsx b/src/sponsor/SponsorDialog.tsx
index 6ceaa79a..f59207cd 100644
--- a/src/sponsor/SponsorDialog.tsx
+++ b/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 />
diff --git a/src/sponsor/alerts/AddressCopied.tsx b/src/sponsor/alerts/AddressCopied.tsx
new file mode 100644
index 00000000..f3258d3b
--- /dev/null
+++ b/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'),
+    };
+};
diff --git a/src/sponsor/alerts/i18n.ts b/src/sponsor/alerts/i18n.ts
new file mode 100644
index 00000000..eb8dc486
--- /dev/null
+++ b/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;
+}
diff --git a/src/sponsor/alerts/index.ts b/src/sponsor/alerts/index.ts
new file mode 100644
index 00000000..149cd665
--- /dev/null
+++ b/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 };
diff --git a/src/sponsor/alerts/translations/en.json b/src/sponsor/alerts/translations/en.json
new file mode 100644
index 00000000..3fcf31e3
--- /dev/null
+++ b/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."
+    }
+}