}
+ {!(isInAllView || isInSubscriptionsView) && showForm && (isOffline || isOffline) &&
{t('thread_closed')}
@@ -297,7 +297,7 @@ const PostForm = () => {
)}
- {!(isInAllView || isInSubscriptionsView) && showForm && isOffline &&
{offlineTitle}
}
+ {!(isInAllView || isInSubscriptionsView) && showForm && (isOffline || isOffline) &&
{offlineTitle}
}
{isThreadClosed ? (
{t('thread_closed')}
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 542fb75d..b216fed0 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/src/components/post-mobile/post-mobile.tsx
@@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
-import { Comment, useAccount, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
@@ -29,6 +29,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
const { address, shortAddress } = author || {};
const displayName = author?.displayName?.trim();
const authorRole = roles?.[address]?.role;
+ const { imageUrl: avatarImageUrl } = useAuthorAvatar({ author });
const params = useParams();
const location = useLocation();
@@ -73,6 +74,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
{!(isDescription || isRules) && (
<>
+ {isReply && author?.avatar && }
(u/
)}
+ {replyCount === undefined && (
+
+
+
+ )}
{!(pinned && !isInPostView) &&
!isInPendingPostView &&
!isDescription &&
diff --git a/src/components/settings-modal/account-settings/account-settings.tsx b/src/components/settings-modal/account-settings/account-settings.tsx
index 2ddef995..df7e74b6 100644
--- a/src/components/settings-modal/account-settings/account-settings.tsx
+++ b/src/components/settings-modal/account-settings/account-settings.tsx
@@ -130,6 +130,7 @@ const AccountSettings = () => {
await importAccount(fileContent);
setSwitchToLastAccount(true);
alert(`Imported ${newAccount.account?.name}`);
+ window.location.reload();
};
reader.readAsText(file);
} catch (error) {
diff --git a/src/components/settings-modal/avatar-settings/avatar-settings.module.css b/src/components/settings-modal/avatar-settings/avatar-settings.module.css
new file mode 100644
index 00000000..a719afdd
--- /dev/null
+++ b/src/components/settings-modal/avatar-settings/avatar-settings.module.css
@@ -0,0 +1,86 @@
+.avatar {
+ width: 70px;
+ height: 70px;
+ border: 1px solid #aaa;
+ background-color: var(--avatar-background-color, white);
+ margin-left: 10px;
+}
+
+.avatarPreview {
+ display: inline-block;
+}
+
+.avatar img {
+ width: 70px;
+ height: 70px;
+}
+
+.emptyAvatar {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ height: 100%;
+ color: var(--avatar-text-color);
+ cursor: pointer;
+}
+
+.avatarSettingsForm {
+ padding: 10px 0 15px 10px;
+}
+
+.avatarSettingsForm input {
+ width: 200px;
+ padding: 2px;
+}
+
+.avatarSettingInput input {
+ margin-bottom: 10px;
+ display: block;
+}
+
+.avatarSettingInput a {
+ color: var(--link-primary);
+}
+
+.avatarSettingInput a {
+ color: var(--post-link-text-color);
+ text-decoration: var(--post-content-link-text-decoration);
+}
+
+.avatarSettingInput a:hover {
+ color: var(--post-link-text-color-hover);
+ text-decoration: var(--post-content-link-text-decoration-hover);
+}
+
+.settingTitle {
+ font-style: italic;
+ text-transform: lowercase;
+}
+
+.copyMessage {
+ padding-bottom: 10px;
+}
+
+.pasteSignature span {
+ display: block;
+}
+
+.pasteSignature button {
+ margin-left: 5px;
+}
+
+.state {
+ padding-top: 10px;
+ padding-left: 10px;
+ max-width: 300px;
+ color: var(--post-mobile-abbr-text-color);
+}
+
+.copyMessage a {
+ color: var(--text-primary);
+}
+
+.copyMessage a:hover {
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/src/components/settings-modal/avatar-settings/avatar-settings.tsx b/src/components/settings-modal/avatar-settings/avatar-settings.tsx
new file mode 100644
index 00000000..c5d91c34
--- /dev/null
+++ b/src/components/settings-modal/avatar-settings/avatar-settings.tsx
@@ -0,0 +1,200 @@
+import { useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { setAccount, useAccount, useAuthorAvatar } from '@plebbit/plebbit-react-hooks';
+import styles from './avatar-settings.module.css';
+import { Trans, useTranslation } from 'react-i18next';
+import LoadingEllipsis from '../../loading-ellipsis';
+
+const AvatarPreview = ({ avatar }: any) => {
+ const { t } = useTranslation();
+ const account = useAccount();
+ let author = useMemo(() => ({ ...account?.author, avatar }), [account, avatar]);
+
+ const { imageUrl, state, error } = useAuthorAvatar({ author });
+
+ // if avatar already set, and user hasn't typed anything yet, preview already set author
+ if (account?.author?.avatar && !avatar?.chainTicker && !avatar?.address && !avatar?.id && !avatar?.signature) {
+ author = account.author;
+ }
+
+ // not enough data to preview yet
+ if (!author?.avatar?.address && !author?.avatar?.signature) {
+ return;
+ }
+
+ const stateText = state !== 'succeeded' ?
: undefined;
+
+ return (
+ <>
+
+ {imageUrl && state !== 'initializing' ?
:
{t('none')}}
+
+ {state !== 'succeeded' && account?.author?.avatar && (
+
+ {stateText} {error?.message}
+
+ )}
+
+ );
+};
+
+const AvatarSettings = () => {
+ const { t } = useTranslation();
+ const account = useAccount();
+ const authorAddress = account?.author?.address;
+ const [chainTicker, setChainTicker] = useState(account?.author?.avatar?.chainTicker);
+ const [tokenAddress, setTokenAddress] = useState(account?.author?.avatar?.address);
+ const [tokenId, setTokenId] = useState(account?.author?.avatar?.id);
+ const [timestamp, setTimestamp] = useState(account?.author?.avatar?.timestamp);
+ const [signature, setSignature] = useState(account?.author?.avatar?.signature?.signature);
+
+ const getNftMessageToSign = (authorAddress: string, timestamp: number, tokenAddress: string, tokenId: string) => {
+ let messageToSign: any = {};
+ // the property names must be in this order for the signature to match
+ // insert props one at a time otherwise babel/webpack will reorder
+ messageToSign.domainSeparator = 'plebbit-author-avatar';
+ messageToSign.authorAddress = authorAddress;
+ messageToSign.timestamp = timestamp;
+ messageToSign.tokenAddress = tokenAddress;
+ messageToSign.tokenId = String(tokenId); // must be a type string, not number
+ // use plain JSON so the user can read what he's signing
+ messageToSign = JSON.stringify(messageToSign);
+ return messageToSign;
+ };
+
+ const [hasCopied, setHasCopied] = useState(false);
+
+ const copyMessageToSign = () => {
+ if (!chainTicker) {
+ return alert(t('missing_chain_ticker'));
+ }
+ if (!tokenAddress) {
+ return alert(t('missing_token_address'));
+ }
+ if (!tokenId) {
+ return alert(t('missing_token_id'));
+ }
+ const newTimestamp = Math.floor(Date.now() / 1000);
+ const messageToSign = getNftMessageToSign(authorAddress, newTimestamp, tokenAddress, tokenId);
+ // update timestamp every time the user gets a new message to sign
+ setTimestamp(newTimestamp);
+ navigator.clipboard.writeText(messageToSign);
+ setHasCopied(true);
+ setTimeout(() => {
+ setHasCopied(false);
+ }, 2000);
+ };
+
+ // how to resolve and verify NFT signatures https://github.com/plebbit/plebbit-js/blob/master/docs/nft.md
+ const avatar = {
+ chainTicker: chainTicker?.toLowerCase() || account?.author?.avatar?.chainTicker,
+ timestamp,
+ address: tokenAddress || account?.author?.avatar?.address,
+ id: tokenId || account?.author?.avatar?.id,
+ signature: {
+ signature: signature || account?.author?.avatar?.signature?.signature,
+ type: 'eip191',
+ },
+ };
+
+ const save = () => {
+ if (!chainTicker) {
+ return alert(t('missing_chain_ticker'));
+ }
+ if (!tokenAddress) {
+ return alert(t('missing_token_address'));
+ }
+ if (!tokenId) {
+ return alert(t('missing_token_id'));
+ }
+ if (!signature) {
+ return alert(t('missing_signature'));
+ }
+ setAccount({ ...account, author: { ...account?.author, avatar } });
+ alert(`saved`);
+ };
+
+ return (
+
+
+
+
+ {t('chain_ticker')}
+ setChainTicker(e.target.value)}
+ />
+
+
+
+
+ ),
+ }}
+ />
+
+ setTokenAddress(e.target.value)}
+ />
+
+
+ {t('token_id')}
+ setTokenId(e.target.value)}
+ />
+
+
+
,
+ // eslint-disable-next-line
+ 2:
,
+ }}
+ />
+
+
+ {t('paste_signature')}
+ setSignature(e.target.value)}
+ />
+
+
+
+
+ );
+};
+
+export default AvatarSettings;
diff --git a/src/components/settings-modal/avatar-settings/index.ts b/src/components/settings-modal/avatar-settings/index.ts
new file mode 100644
index 00000000..5e1715cd
--- /dev/null
+++ b/src/components/settings-modal/avatar-settings/index.ts
@@ -0,0 +1 @@
+export { default } from './avatar-settings';
diff --git a/src/components/settings-modal/plebbit-options/plebbit-options.module.css b/src/components/settings-modal/plebbit-options/plebbit-options.module.css
index c1297b5f..5c5bc39d 100644
--- a/src/components/settings-modal/plebbit-options/plebbit-options.module.css
+++ b/src/components/settings-modal/plebbit-options/plebbit-options.module.css
@@ -18,14 +18,17 @@
}
.ipfsGatewaysSettings textarea {
- height: 70px;
+ min-height: 80px;
+ height: 80px;
}
.pubsubProvidersSettings textarea {
+ min-height: 50px;
height: 50px;
}
.blockchainProvidersSettings textarea {
+ min-height: 50px;
height: 50px;
}
diff --git a/src/components/settings-modal/plebbit-options/plebbit-options.tsx b/src/components/settings-modal/plebbit-options/plebbit-options.tsx
index 1fcc4bf2..1654603a 100644
--- a/src/components/settings-modal/plebbit-options/plebbit-options.tsx
+++ b/src/components/settings-modal/plebbit-options/plebbit-options.tsx
@@ -193,6 +193,7 @@ const PlebbitOptions = () => {
},
});
alert('Options saved.');
+ window.location.reload();
} catch (e) {
if (e instanceof Error) {
alert('Error saving options: ' + e.message);
diff --git a/src/components/settings-modal/settings-modal.module.css b/src/components/settings-modal/settings-modal.module.css
index a0461b47..7c6ca6bd 100644
--- a/src/components/settings-modal/settings-modal.module.css
+++ b/src/components/settings-modal/settings-modal.module.css
@@ -22,6 +22,10 @@
padding: 2px 4px 3px;
}
+.settingsModal input[type="text"]:focus, .settingsModal textarea:focus {
+ border: var(--reply-modal-field-input-border-focus, revert);
+}
+
.settingsModal {
top: 25px;
left: 50%;
@@ -42,6 +46,10 @@
border-left: var(--settings-modal-border-left);
}
+.settingsModal textarea {
+ resize: vertical;
+}
+
.settingsModal select, .settingsModal button, .settingsModal textarea, .settingsModal input[type='text'] {
filter: var(--filter80);
}
diff --git a/src/components/settings-modal/settings-modal.tsx b/src/components/settings-modal/settings-modal.tsx
index 3245ba06..00ef90b2 100644
--- a/src/components/settings-modal/settings-modal.tsx
+++ b/src/components/settings-modal/settings-modal.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import styles from './settings-modal.module.css';
import AccountSettings from './account-settings';
+import AvatarSettings from './avatar-settings';
import BlockedAddressesSetting from './blocked-addresses-setting';
import CryptoAddressSetting from './crypto-address-setting';
import CryptoWalletsSetting from './crypto-wallets-setting';
@@ -19,6 +20,7 @@ const SettingsModal = () => {
const [showInterfaceSettings, setShowInterfaceSettings] = useState(false);
const [showAccountSettings, setShowAccountSettings] = useState(false);
+ const [showAvatarSettings, setShowAvatarSettings] = useState(false);
const [showCryptoAddressSetting, setShowCryptoAddressSetting] = useState(false);
const [showCryptoWalletSettings, setShowCryptoWalletSettings] = useState(false);
const [showBlockedAddressesSetting, setShowBlockedAddressesSetting] = useState(false);
@@ -30,6 +32,7 @@ const SettingsModal = () => {
setExpandAll(newExpandState);
setShowInterfaceSettings(newExpandState);
setShowAccountSettings(newExpandState);
+ setShowAvatarSettings(newExpandState);
setShowCryptoAddressSetting(newExpandState);
setShowCryptoWalletSettings(newExpandState);
setShowBlockedAddressesSetting(newExpandState);
@@ -61,6 +64,13 @@ const SettingsModal = () => {