diff --git a/src/components/settings-modal/avatar-settings/avatar-settings.module.css b/src/components/settings-modal/avatar-settings/avatar-settings.module.css
deleted file mode 100644
index 60065e08..00000000
--- a/src/components/settings-modal/avatar-settings/avatar-settings.module.css
+++ /dev/null
@@ -1,123 +0,0 @@
-.avatar {
- width: 64px;
- height: 64px;
- border: 1px solid #aaa;
- background-color: var(--avatar-background-color, white);
- margin-left: 10px;
- overflow: hidden;
-}
-
-.avatarPreview {
- display: inline-block;
-}
-
-.avatar img {
- width: 64px;
- height: 64px;
-}
-
-.emptyAvatar {
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- height: 100%;
- color: var(--avatar-text-color);
-}
-
-.avatarSettingsForm {
- padding: 5px 0 15px 10px;
-}
-
-.settingField {
- margin-top: 5px;
- margin-left: 5px;
- position: relative;
- display: flex;
- align-items: center;
- flex-wrap: nowrap;
-}
-
-.settingField input {
- flex: 0 1 200px;
- min-width: 0;
- max-width: 200px;
- padding: 2px;
- margin-left: 5px;
- box-shadow: var(--box-shadow-input);
-}
-
-.settingField[class*='step']::before {
- margin-left: -5px;
-}
-
-.settingField.step1::before {
- content: '1.\00a0';
-}
-
-.settingField.step2::before {
- content: '2.\00a0';
-}
-
-.settingField.step3::before {
- content: '3.\00a0';
-}
-
-.settingField.step4::before {
- content: '4.\00a0';
-}
-
-.settingField.step5::before {
- content: '5.\00a0';
-}
-
-.settingField a {
- color: var(--post-link-text-color);
- text-decoration: var(--post-content-link-text-decoration);
-}
-
-.settingField a:hover {
- color: var(--post-link-text-color-hover);
- text-decoration: var(--post-content-link-text-decoration-hover);
-}
-
-.settingTitle {
- font-style: inherit;
- text-transform: none;
- white-space: nowrap;
- flex-shrink: 0;
-}
-
-.timestampfield {
- margin-left: 10px;
-}
-
-.buttons {
- margin-top: 10px;
- margin-left: 5px;
-}
-
-.save {
- margin-right: 5px;
-}
-
-.state {
- text-transform: lowercase;
- padding-top: 10px;
- padding-left: 10px;
- max-width: 300px;
- color: var(--post-mobile-abbr-text-color);
-}
-
-.error {
- color: red;
-}
-
-.deleteAvatarContainer {
- margin-top: 20px;
- margin-left: 5px;
-}
-
-.removeAvatar {
- color: red;
-}
diff --git a/src/components/settings-modal/avatar-settings/avatar-settings.tsx b/src/components/settings-modal/avatar-settings/avatar-settings.tsx
deleted file mode 100644
index f829fbc8..00000000
--- a/src/components/settings-modal/avatar-settings/avatar-settings.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-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';
-import ErrorDisplay from '../../error-display/error-display';
-import capitalize from 'lodash/capitalize';
-
-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 && (
-
- {!error && stateText} {error && }
-
- )}
-
- );
-};
-
-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(t('saved'));
- };
-
- const _removeAvatar = () => {
- if (window.confirm(t('delete_confirm', { value: 'avatar', interpolation: { escapeValue: false } }))) {
- setAccount({ ...account, author: { ...account?.author, avatar: undefined } });
- setChainTicker(undefined);
- setTokenAddress(undefined);
- setTokenId(undefined);
- setTimestamp(undefined);
- setSignature(undefined);
- }
- };
-
- return (
-
-
-
-
- {capitalize(t('chain_ticker'))}:
- setChainTicker(e.target.value)}
- />
-
-
-
-
- ),
- }}
- />
- :{' '}
-
- setTokenAddress(e.target.value)}
- />
-
-
- Token ID:
- setTokenId(e.target.value)}
- />
-
-
-
- ,
- // eslint-disable-next-line
- 2: ,
- }}
- />
-
-
-
- {capitalize(t('timestamp'))}:
- setTimestamp(Number(e.target.value))}
- />
-
-
- {capitalize(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
deleted file mode 100644
index 5e1715cd..00000000
--- a/src/components/settings-modal/avatar-settings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './avatar-settings';
diff --git a/src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx b/src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx
index 4d99227d..b5246095 100644
--- a/src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx
+++ b/src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx
@@ -102,7 +102,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
walletsArray.length > 0 ? (
-
{capitalize(t('chain_ticker'))}:
+
Chain ticker:
setWalletsArrayProperty(selectedWallet, 'chainTicker', e.target.value)}
diff --git a/src/components/settings-modal/interface-settings/interface-settings.tsx b/src/components/settings-modal/interface-settings/interface-settings.tsx
index 3fba760b..c163aad2 100644
--- a/src/components/settings-modal/interface-settings/interface-settings.tsx
+++ b/src/components/settings-modal/interface-settings/interface-settings.tsx
@@ -1,6 +1,5 @@
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
-import useAvatarVisibilityStore from '../../../stores/use-avatar-visibility-store';
import useTheme from '../../../hooks/use-theme';
import packageJson from '../../../../package.json';
import styles from './interface-settings.module.css';
@@ -124,13 +123,8 @@ const InterfaceLanguage = () => {
const InterfaceSettings = () => {
const { t } = useTranslation();
- const { hideAvatars, setHideAvatars } = useAvatarVisibilityStore();
const { fitExpandedImagesToScreen, setFitExpandedImagesToScreen } = useExpandedMediaStore();
- const handleHideAvatarsChange = (e: React.ChangeEvent
) => {
- setHideAvatars(e.target.checked);
- };
-
return (
@@ -152,12 +146,6 @@ const InterfaceSettings = () => {
{capitalize(t('fit_expanded_images_to_screen_tip'))}
-
-
-
{capitalize(t('hide_avatars_tip'))}
-
);
};
diff --git a/src/components/settings-modal/settings-modal.tsx b/src/components/settings-modal/settings-modal.tsx
index 130360ba..6c627d65 100644
--- a/src/components/settings-modal/settings-modal.tsx
+++ b/src/components/settings-modal/settings-modal.tsx
@@ -3,7 +3,6 @@ import { useLocation, 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 CryptoAddressSetting from './crypto-address-setting';
import CryptoWalletsSetting from './crypto-wallets-setting';
import InterfaceSettings from './interface-settings';
@@ -38,7 +37,6 @@ const SettingsModal = () => {
const [showInterfaceSettings, setShowInterfaceSettings] = useState(false);
const [showMediaHostingSettings, setShowMediaHostingSettings] = useState(false);
const [showAccountSettings, setShowAccountSettings] = useState(false);
- const [showAvatarSettings, setShowAvatarSettings] = useState(false);
const [showCryptoAddressSetting, setShowCryptoAddressSetting] = useState(false);
const [showCryptoWalletSettings, setShowCryptoWalletSettings] = useState(false);
const [showSubscriptionsSettings, setShowSubscriptionsSettings] = useState(false);
@@ -50,7 +48,6 @@ const SettingsModal = () => {
Number(showInterfaceSettings) +
Number(showMediaHostingSettings) +
Number(showAccountSettings) +
- Number(showAvatarSettings) +
Number(showCryptoAddressSetting) +
Number(showCryptoWalletSettings) +
Number(showSubscriptionsSettings) +
@@ -62,7 +59,6 @@ const SettingsModal = () => {
if (showInterfaceSettings && 'interface-settings' !== excludeCategoryId) return 'interface-settings';
if (showMediaHostingSettings && 'media-hosting-settings' !== excludeCategoryId) return 'media-hosting-settings';
if (showAccountSettings && 'account-settings' !== excludeCategoryId) return 'account-settings';
- if (showAvatarSettings && 'avatar-settings' !== excludeCategoryId) return 'avatar-settings';
if (showCryptoAddressSetting && 'crypto-address-settings' !== excludeCategoryId) return 'crypto-address-settings';
if (showCryptoWalletSettings && 'crypto-wallet-settings' !== excludeCategoryId) return 'crypto-wallet-settings';
if (showSubscriptionsSettings && 'subscriptions-settings' !== excludeCategoryId) return 'subscriptions-settings';
@@ -102,7 +98,6 @@ const SettingsModal = () => {
setShowInterfaceSettings(hash === 'interface-settings');
setShowMediaHostingSettings(hash === 'media-hosting-settings');
setShowAccountSettings(hash === 'account-settings');
- setShowAvatarSettings(hash === 'avatar-settings');
setShowCryptoAddressSetting(hash === 'crypto-address-settings');
setShowCryptoWalletSettings(hash === 'crypto-wallet-settings');
setShowSubscriptionsSettings(hash === 'subscriptions-settings');
@@ -116,7 +111,6 @@ const SettingsModal = () => {
setShowInterfaceSettings(newExpandState);
setShowMediaHostingSettings(newExpandState);
setShowAccountSettings(newExpandState);
- setShowAvatarSettings(newExpandState);
setShowCryptoAddressSetting(newExpandState);
setShowCryptoWalletSettings(newExpandState);
setShowSubscriptionsSettings(newExpandState);
@@ -158,13 +152,6 @@ const SettingsModal = () => {
{showAccountSettings &&
}
-
-
-
- {showAvatarSettings &&
}