From 96f9ce313fa10e8ed1a70f68f11f439c78897a2b Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Tue, 22 Nov 2022 10:49:33 +0100
Subject: [PATCH] src/sponsor: Fix button doing nothing.

Now it copies the address to the clipboard for convenience.
---
 src/sponsor/SponsorDialog.tsx |  3 +++
 src/utils/ClipboardIcon.tsx   | 22 ++++++++++++++++++++++
 src/utils/clipboard.scss      | 13 +++++++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 src/utils/ClipboardIcon.tsx
 create mode 100644 src/utils/clipboard.scss

diff --git a/src/sponsor/SponsorDialog.tsx b/src/sponsor/SponsorDialog.tsx
index 7e8320df..6ceaa79a 100644
--- a/src/sponsor/SponsorDialog.tsx
+++ b/src/sponsor/SponsorDialog.tsx
@@ -7,6 +7,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import { pybricksTeamUrl } from '../app/constants';
 import { useSelector } from '../reducers';
+import ClipboardIcon from '../utils/ClipboardIcon';
 import ExternalLinkIcon from '../utils/ExternalLinkIcon';
 import patreonLogo from './Digital-Patreon-Logo_White.png';
 import gitHubIcon from './GitHub-Mark-Light-32px.png';
@@ -106,8 +107,10 @@ const SponsorDialog: React.VoidFunctionComponent = () => {
                         intent={Intent.PRIMARY}
                         icon={<img src={ethIcon} width={24} height={24} />}
                         fill={true}
+                        onClick={() => navigator.clipboard.writeText('pybricks.eth')}
                     >
                         pybricks.eth
+                        <ClipboardIcon />
                     </AnchorButton>
                 </div>
             </div>
diff --git a/src/utils/ClipboardIcon.tsx b/src/utils/ClipboardIcon.tsx
new file mode 100644
index 00000000..958f80a7
--- /dev/null
+++ b/src/utils/ClipboardIcon.tsx
@@ -0,0 +1,22 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2021-2022 The Pybricks Authors
+
+// Icon for indicating external links
+
+import { Icon } from '@blueprintjs/core';
+import React from 'react';
+
+import './clipboard.scss';
+
+const ClipboardIcon: React.VFC = (_props) => {
+    return (
+        <span className="pb-clipboard">
+            &nbsp;
+            <sup>
+                <Icon icon="duplicate" iconSize={12} />
+            </sup>
+        </span>
+    );
+};
+
+export default ClipboardIcon;
diff --git a/src/utils/clipboard.scss b/src/utils/clipboard.scss
new file mode 100644
index 00000000..f6f0da12
--- /dev/null
+++ b/src/utils/clipboard.scss
@@ -0,0 +1,13 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2021-2022 The Pybricks Authors
+
+@use '@blueprintjs/core/lib/scss/variables' as bp;
+
+span.pb-clipboard {
+    white-space: nowrap;
+}
+
+// override some button magic in case this is used in a button
+.#{bp.$ns}-button .pb-clipboard .#{bp.$ns}-icon:first-child:last-child {
+    margin: 0;
+}