Scene page: replaces 'Share on Twitter' w/ 'Share' (using Web Share API)

src/react-components/scene-ui.js

@@ -7,9 +7,10 @@ import configs from "../utils/configs";
 import { createAndRedirectToNewHub, getReticulumFetchUrl } from "../utils/phoenix-utils";
 import { ReactComponent as CodeBranch } from "./icons/CodeBranch.svg";
 import { ReactComponent as Pen } from "./icons/Pen.svg";
-import { ReactComponent as Twitter } from "./icons/Twitter.svg";
+import { ReactComponent as ShareIcon } from "./icons/Share.svg";
 import IfFeature from "./if-feature";
 import { AppLogo } from "./misc/AppLogo";
+import { share } from "../utils/share";
 
 class SceneUI extends Component {
   static propTypes = {
@@ -61,9 +62,13 @@ class SceneUI extends Component {
         shareHashtag: configs.translation("share-hashtag")
       }
     );
-    const tweetLink = `https://twitter.com/share?url=${encodeURIComponent(sceneUrl)}&text=${encodeURIComponent(
-      tweetText
-    )}`;
+    const onShareClick = async () => {
+      try {
+        await share({ url: sceneUrl, title: tweetText });
+      } catch (error) {
+        console.error(`while sharing (from scene UI):`, error);
+      }
+    };
 
     const unknown = intl.formatMessage({ id: "scene-page.unknown", defaultMessage: "unknown" });
 
@@ -235,12 +240,10 @@ class SceneUI extends Component {
                   )
                 )}
               </IfFeature>
-              <a href={tweetLink} rel="noopener noreferrer" target="_blank" className={styles.scenePreviewButton}>
-                <Twitter />
-                <div>
-                  <FormattedMessage id="scene-page.tweet-button" defaultMessage="Share on Twitter" />
-                </div>
-              </a>
+              <button className={styles.scenePreviewButton} onClick={onShareClick}>
+                <ShareIcon />
+                <FormattedMessage id="share-popover.title" defaultMessage="Share" />
+              </button>
             </div>
           </div>
           <div className={styles.info}>