diff --git a/components/user-header.js b/components/user-header.js index 643d2dd0..2a1b176d 100644 --- a/components/user-header.js +++ b/components/user-header.js @@ -10,6 +10,9 @@ import { gql, useApolloClient, useMutation } from '@apollo/client' import styles from './user-header.module.css' import { useMe } from './me' import { NAME_MUTATION, NAME_QUERY } from '../fragments/users' +import Image from 'next/image' +import QRCode from 'qrcode.react' +import LightningIcon from '../svgs/bolt.svg' export default function UserHeader ({ user }) { const [editting, setEditting] = useState(false) @@ -19,7 +22,7 @@ export default function UserHeader ({ user }) { const [setName] = useMutation(NAME_MUTATION) const isMe = me?.name === user.name - const Satistics = () =>

{isMe ? `${user.sats} sats \\ ` : ''}{user.stacked} stacked

+ const Satistics = () =>
{isMe ? `${user.sats} sats \\ ` : ''}{user.stacked} stacked
const UserSchema = Yup.object({ name: Yup.string() @@ -39,64 +42,78 @@ export default function UserHeader ({ user }) { return ( <> -
- {editting - ? ( -
{ - if (name === user.name) { - setEditting(false) - return - } - const { error } = await setName({ variables: { name } }) - if (error) { - throw new Error({ message: error.toString() }) - } - router.replace({ - pathname: router.pathname, - query: { ...router.query, name } - }) +
+ +
+ {editting + ? ( + { + if (name === user.name) { + setEditting(false) + return + } + const { error } = await setName({ variables: { name } }) + if (error) { + throw new Error({ message: error.toString() }) + } + router.replace({ + pathname: router.pathname, + query: { ...router.query, name } + }) - client.writeFragment({ - id: `User:${user.id}`, - fragment: gql` + client.writeFragment({ + id: `User:${user.id}`, + fragment: gql` fragment CurUser on User { name } `, - data: { - name - } - }) + data: { + name + } + }) - setEditting(false) - }} - > -
- @ - name='name' - autoFocus - groupClassName={`mb-0 ${styles.username}`} - showValid - /> - setEditting(true)}>save + setEditting(false) + }} + > +
+ @ + name='name' + autoFocus + groupClassName={styles.usernameForm} + showValid + /> + setEditting(true)}>save +
+ + ) + : ( +
+
@{user.name}
+ {isMe && + }
- - ) - : ( -
-

@{user.name}

- {isMe && - } -
- )} - + )} + + +
+