src/pages/ProfilePage.css

@@ -10,6 +10,29 @@
     white-space: pre-wrap;
 }
 
+.profile .name {
+  align-items: flex-start;
+}
+
+.profile .name h2 {
+    margin: 0;
+}
+
+.profile .npub-container {
+    user-select: none;
+    cursor: pointer;
+}
+
+.profile .npub {
+    font-family: monospace;
+    font-size: 14px;
+    margin: 0;
+    width: 18em;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 .profile .avatar {
     width: 256px;
     height: 256px;

src/pages/ProfilePage.js

@@ -3,7 +3,7 @@ import { useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { bech32 } from "bech32";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faQrcode } from "@fortawesome/free-solid-svg-icons";
+import { faQrcode, faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
 import { useParams } from "react-router-dom";
 
 import useProfile from "../feed/ProfileFeed";
@@ -18,6 +18,7 @@ import VoidUpload from "../feed/VoidUpload";
 import { openFile, parseId } from "../Util";
 import Timeline from "../element/Timeline";
 import { extractLinks } from '../Text'
+import { useCopy } from '../useCopy'
 
 export default function ProfilePage() {
     const dispatch = useDispatch();
@@ -28,6 +29,7 @@ export default function ProfilePage() {
     const loginPubKey = useSelector(s => s.login.publicKey);
     const isMe = loginPubKey === id;
     const qrRef = useRef();
+    const { copy, copied, error } = useCopy()
 
     const [name, setName] = useState("");
     const [picture, setPicture] = useState("");
@@ -172,8 +174,20 @@ export default function ProfilePage() {
     function details() {
         return (
             <>
-                <div className="flex">
-                    <h2 className="f-grow">{name}</h2>
+                <div className="flex name">
+                    <div className="f-grow">
+                        <h2>{name}</h2>
+                        <div className="flex flex-row npub-container" onClick={() => copy(params.id)}>
+                            <FontAwesomeIcon
+                              icon={copied ? faCheck : faCopy}
+                              size="xs"
+                              style={{ color: copied ? 'green' : 'currentColor', marginRight: '2px' }}
+                            />
+                            <p className="npub">
+                              {params.id}
+                            </p>
+                        </div>
+                    </div>
                     <div>
                         <FollowButton pubkey={id} />
                     </div>

src/useCopy.js

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+
+export const useCopy = (timeout = 2000) => {
+  const [error, setError] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const copy = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true)
+      setError(false)
+    } catch (error) {
+      setError(true)
+    }
+
+    setTimeout(() => setCopied(false), timeout);
+  };
+
+  return { error, copied, copy };
+};