feat: copy npub on profile
This commit is contained in:
parent
c1941754e4
commit
9f084518ee
@ -10,6 +10,29 @@
|
|||||||
white-space: pre-wrap;
|
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 {
|
.profile .avatar {
|
||||||
width: 256px;
|
width: 256px;
|
||||||
height: 256px;
|
height: 256px;
|
||||||
|
@ -3,7 +3,7 @@ import { useMemo, useRef, useState } from "react";
|
|||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { bech32 } from "bech32";
|
import { bech32 } from "bech32";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
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 { useParams } from "react-router-dom";
|
||||||
|
|
||||||
import useProfile from "../feed/ProfileFeed";
|
import useProfile from "../feed/ProfileFeed";
|
||||||
@ -18,6 +18,7 @@ import VoidUpload from "../feed/VoidUpload";
|
|||||||
import { openFile, parseId } from "../Util";
|
import { openFile, parseId } from "../Util";
|
||||||
import Timeline from "../element/Timeline";
|
import Timeline from "../element/Timeline";
|
||||||
import { extractLinks } from '../Text'
|
import { extractLinks } from '../Text'
|
||||||
|
import { useCopy } from '../useCopy'
|
||||||
|
|
||||||
export default function ProfilePage() {
|
export default function ProfilePage() {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
@ -28,6 +29,7 @@ export default function ProfilePage() {
|
|||||||
const loginPubKey = useSelector(s => s.login.publicKey);
|
const loginPubKey = useSelector(s => s.login.publicKey);
|
||||||
const isMe = loginPubKey === id;
|
const isMe = loginPubKey === id;
|
||||||
const qrRef = useRef();
|
const qrRef = useRef();
|
||||||
|
const { copy, copied, error } = useCopy()
|
||||||
|
|
||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
const [picture, setPicture] = useState("");
|
const [picture, setPicture] = useState("");
|
||||||
@ -172,8 +174,20 @@ export default function ProfilePage() {
|
|||||||
function details() {
|
function details() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex">
|
<div className="flex name">
|
||||||
<h2 className="f-grow">{name}</h2>
|
<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>
|
<div>
|
||||||
<FollowButton pubkey={id} />
|
<FollowButton pubkey={id} />
|
||||||
</div>
|
</div>
|
||||||
|
20
src/useCopy.js
Normal file
20
src/useCopy.js
Normal file
@ -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 };
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user