steps to set a .eth user address:
diff --git a/src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.module.css b/src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.module.css
new file mode 100644
index 00000000..95d76335
--- /dev/null
+++ b/src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.module.css
@@ -0,0 +1,58 @@
+.addWallet {
+ margin-bottom: 7px;
+}
+
+.save {
+ margin-left: 5px;
+}
+
+.walletTitle {
+ text-transform: lowercase;
+ font-style: italic;
+ margin-left: 7px;
+}
+
+.walletBox {
+ border: 1px solid var(--border-contrast);
+ border-radius: 7px;
+ margin-bottom: 0.5em;
+ padding: 7px;
+ position: relative;
+ display: inline-block;
+}
+
+.walletFieldTitle {
+ margin-top: 10px;
+ font-style: italic;
+ text-transform: lowercase;
+}
+
+.walletField input {
+ width: 200px;
+ padding: 2px;
+ box-shadow: var(--box-shadow-input);
+}
+
+.copyMessage {
+ padding-top: 10px;
+}
+
+.copyMessage a {
+ color: var(--text-primary);
+}
+
+.copyMessage a:hover {
+ text-decoration: underline;
+}
+
+.show {
+ display: block;
+}
+
+.hide {
+ display: none;
+}
+
+.toggleWallet {
+ margin-right: 7px;
+}
\ No newline at end of file
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
new file mode 100644
index 00000000..75c9aa25
--- /dev/null
+++ b/src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx
@@ -0,0 +1,152 @@
+import { useState } from 'react';
+import { Account, setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
+import styles from './crypto-wallets-setting.module.css';
+import { Trans, useTranslation } from 'react-i18next';
+
+interface Wallet {
+ chainTicker: string;
+ address: string;
+ timestamp: number;
+ signature: string;
+}
+
+const getWalletMessageToSign = (authorAddress: string, timestamp: number): string => {
+ const messageToSign = {
+ domainSeparator: 'plebbit-author-wallet',
+ authorAddress,
+ timestamp,
+ };
+ return JSON.stringify(messageToSign);
+};
+
+const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
+ const { t } = useTranslation();
+
+ if (!account) {
+ throw Error('CryptoWalletsForm account prop must be defined');
+ }
+ const authorAddress = account?.author?.address;
+ const defaultWalletObject: Wallet = { chainTicker: '', address: '', timestamp: 0, signature: '' };
+
+ const walletsFromAccount = Object.keys(account?.author?.wallets || {}).map(
+ (chainTicker): Wallet => ({
+ chainTicker,
+ address: account.author.wallets[chainTicker].address,
+ timestamp: account.author.wallets[chainTicker].timestamp,
+ signature: account.author.wallets[chainTicker].signature.signature,
+ }),
+ );
+
+ const defaultWalletsArray: Wallet[] = walletsFromAccount.length ? walletsFromAccount : [];
+
+ const [walletsArray, setWalletsArray] = useState
(defaultWalletsArray);
+ const setWalletsArrayProperty = (index: number, property: keyof Wallet, value: string | number) => {
+ const newArray = [...walletsArray];
+ newArray[index] = { ...newArray[index], [property]: value };
+ setWalletsArray(newArray);
+ };
+
+ const [hasCopied, setHasCopied] = useState(false);
+
+ const copyMessageToSign = (wallet: any, index: number) => {
+ if (!wallet.chainTicker) {
+ return alert('missing chain ticker');
+ }
+ if (!wallet.address) {
+ return alert('missing address');
+ }
+ const timestamp = wallet.timestamp || Math.floor(Date.now() / 1000);
+ const messageToSign = getWalletMessageToSign(authorAddress, timestamp);
+ if (timestamp !== wallet.timestamp) {
+ setWalletsArrayProperty(index, 'timestamp', timestamp);
+ }
+ navigator.clipboard.writeText(messageToSign);
+ setHasCopied(true);
+ setTimeout(() => {
+ setHasCopied(false);
+ }, 2000);
+ };
+
+ const [showWallet, setShowWallet] = useState(walletsArray.map(() => false));
+ const toggleShowWallet = (index: number) => {
+ const newShowWallet = [...showWallet];
+ newShowWallet[index] = !newShowWallet[index];
+ setShowWallet(newShowWallet);
+ };
+
+ const save = () => {
+ const wallets: { [key: string]: { address: string; timestamp: number; signature: { signature: string; type: string } } } = {};
+ walletsArray.forEach((wallet) => {
+ if (wallet.chainTicker && wallet.address && wallet.signature && wallet.timestamp) {
+ wallets[wallet.chainTicker] = {
+ address: wallet.address,
+ timestamp: wallet.timestamp,
+ signature: {
+ signature: wallet.signature,
+ type: 'eip191',
+ },
+ };
+ }
+ });
+ setAccount({ ...account, author: { ...account.author, wallets } });
+ alert(t('saved'));
+ };
+
+ const walletsInputs = walletsArray.map((wallet, index) => (
+ <>
+
+ {t('wallet')} #{index + 1}
+
+
+
+
+
+
+
{t('chain_ticker')}
+
setWalletsArrayProperty(index, 'chainTicker', e.target.value)} value={wallet.chainTicker} placeholder='eth/sol/avax' />
+
+
+
{t('wallet_address')}
+
setWalletsArrayProperty(index, 'address', e.target.value)} value={wallet.address} placeholder='0x...' />
+
+
+
copyMessageToSign(wallet, index)} />,
+ // eslint-disable-next-line
+ 2: ,
+ }}
+ />
+
+
+
{t('paste_signature')}
+
setWalletsArrayProperty(index, 'signature', e.target.value)} value={wallet.signature} placeholder='0x...' />
+
+
+
+
+ >
+ ));
+
+ return (
+ <>
+
+ setWalletsArray([...walletsArray, defaultWalletObject])} /> }} />
+
+ {walletsInputs}
+ >
+ );
+};
+
+const CryptoWalletsSetting = () => {
+ const account = useAccount();
+ return account && ;
+};
+
+export default CryptoWalletsSetting;
diff --git a/src/components/settings-modal/crypto-wallets-setting/index.ts b/src/components/settings-modal/crypto-wallets-setting/index.ts
new file mode 100644
index 00000000..2cf4a006
--- /dev/null
+++ b/src/components/settings-modal/crypto-wallets-setting/index.ts
@@ -0,0 +1 @@
+export { default } from './crypto-wallets-setting';
diff --git a/src/components/settings-modal/settings-modal.module.css b/src/components/settings-modal/settings-modal.module.css
index 6810d6c0..803cdad8 100644
--- a/src/components/settings-modal/settings-modal.module.css
+++ b/src/components/settings-modal/settings-modal.module.css
@@ -8,6 +8,10 @@
z-index: 900;
}
+.settingsModal label, .settingsModal button, .settingsModal select {
+ cursor: pointer;
+}
+
.settingsModal {
top: 25px;
width: 394px;
@@ -28,7 +32,7 @@
border-left: var(--settings-modal-border-left);
}
-.settingsModal select, .settingsModal button, .settingsModal textarea {
+.settingsModal select, .settingsModal button, .settingsModal textarea, .settingsModal input[type='text'] {
filter: var(--filter80);
}
@@ -69,7 +73,6 @@
height: 18px;
display: block;
background-size: 100%;
- cursor: pointer;
position: absolute;
top: 5px;
image-rendering: pixelated;
@@ -88,7 +91,6 @@
.hideButton, .showButton {
vertical-align: text-bottom;
margin-right: 5px;
- cursor: pointer;
width: 18px;
height: 18px;
background-repeat: no-repeat;
@@ -110,7 +112,6 @@
}
.category label {
- cursor: pointer;
font-weight: 700;
}
@@ -122,50 +123,6 @@
margin-left: 5px;
}
-.accountSettings {
- margin-left: 10px;
-}
-
-.accountSettings textarea {
- display: block;
- font-family: dejavu sans mono, consolas, andale mono, lucida console, monospace;
- outline: none;
- border: 1px solid #aaa;
- font-size: 11px;
- margin: 0 2px 0 0;
- padding: 2px 4px 3px;
- min-height: 150px;
- width: 95%;
-}
-
-.accountSettings textarea:focus {
- border-color: 1px solid #98e;
-}
-
-.accountSettings button {
- cursor: pointer;
-}
-
-.saveResetAccount {
- margin-top: 15px;
-}
-
-.accountSettings textarea {
- margin-bottom: 5px;
-}
-
-.accountSettings div {
- margin-top: 5px;
-}
-
-.deleteAccount, .deleteAccount button {
- color: red;
-}
-
-.accountSettings .createAccount {
- margin-left: 5px;
-}
-
@media (max-width: 640px) {
.settingsModal {
width: 350px !important;
diff --git a/src/components/settings-modal/settings-modal.tsx b/src/components/settings-modal/settings-modal.tsx
index 03c21627..49402003 100644
--- a/src/components/settings-modal/settings-modal.tsx
+++ b/src/components/settings-modal/settings-modal.tsx
@@ -6,6 +6,7 @@ import useTheme from '../../hooks/use-theme';
import packageJson from '../../../package.json';
import AccountSettings from './account-settings';
import CryptoAddressSetting from './crypto-address-setting';
+import CryptoWalletsSetting from './crypto-wallets-setting';
const commitRef = process.env.REACT_APP_COMMIT_REF;
const isElectron = window.isElectron === true;
@@ -104,14 +105,6 @@ const InterfaceLanguage = () => {
);
};
-const CryptoWalletSettings = () => {
- return (
- <>
-
- >
- );
-};
-
const PlebbitOptionsSettings = () => {
return (
<>
@@ -180,7 +173,7 @@ const SettingsModal = () => {
Crypto Wallets
- {showCryptoWalletSettings &&