External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(settings): add crypto wallets

Browse Source
This commit is contained in:
plebeius.eth
2024-05-15 22:12:32 +02:00
parent 61a180e0b3
commit ae02eba4df
5 changed files with 110 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/settings-modal/crypto-address-setting/crypto-address-setting.module.css
-3
View File
@@ -10,9 +10,6 @@
.cryptoAddressInput input[type="text"] {
padding: 2px 0;
margin-bottom: 5px;
outline: none;
border: 1px solid #aaa;
padding: 2px 4px 3px;
}
.infoButton {
src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.module.css
+11 -11
View File
@@ -1,5 +1,10 @@
.addWallet {
margin-bottom: 7px;
.setting {
margin-left: 10px;
}
.addWallet select {
margin-right: 5px;
margin-bottom: 5px;
}
.save {
@@ -9,20 +14,15 @@
.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;
.removeWallet {
color: red;
margin-top: 15px;
}
.walletFieldTitle {
margin-top: 10px;
margin-top: 5px;
font-style: italic;
text-transform: lowercase;
}
src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx
+85 -48
View File
@@ -40,6 +40,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
const defaultWalletsArray: Wallet[] = walletsFromAccount.length ? walletsFromAccount : [];
const [walletsArray, setWalletsArray] = useState<Wallet[]>(defaultWalletsArray);
const [selectedWallet, setSelectedWallet] = useState(0);
const setWalletsArrayProperty = (index: number, property: keyof Wallet, value: string | number) => {
const newArray = [...walletsArray];
newArray[index] = { ...newArray[index], [property]: value };
@@ -67,13 +68,6 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
}, 2000);
};
const [showWallet, setShowWallet] = useState<boolean[]>(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) => {
@@ -92,52 +86,89 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
alert(t('saved'));
};
const walletsInputs = walletsArray.map((wallet, index) => (
<>
<div className={styles.walletTitle}>
{t('wallet')} #{index + 1}
</div>
<div key={index} className={styles.walletBox}>
<button className={styles.toggleWallet} onClick={() => toggleShowWallet(index)}>
{showWallet[index] ? t('hide') : t('show')}
</button>
<button onClick={() => setWalletsArray([...walletsArray.slice(0, index), ...walletsArray.slice(index + 1)])}>{t('remove')}</button>
<div className={`${showWallet[index] ? styles.show : styles.hide}`}>
<div className={styles.walletField}>
<div className={styles.walletFieldTitle}>{t('chain_ticker')}</div>
<input onChange={(e) => setWalletsArrayProperty(index, 'chainTicker', e.target.value)} value={wallet.chainTicker} placeholder='eth/sol/avax' />
</div>
<div className={styles.walletField}>
<div className={styles.walletFieldTitle}>{t('wallet_address')}</div>
<input onChange={(e) => setWalletsArrayProperty(index, 'address', e.target.value)} value={wallet.address} placeholder='0x...' />
</div>
<div className={`${styles.walletField} ${styles.copyMessage}`}>
<Trans
i18nKey='copy_message_etherscan'
values={{ copy: hasCopied ? t('copied') : t('copy') }}
components={{
1: <button onClick={() => copyMessageToSign(wallet, index)} />,
// eslint-disable-next-line
2: <a href='https://etherscan.io/verifiedSignatures' target='_blank' rel='noopener noreferrer' />,
}}
/>
</div>
<div className={styles.walletField}>
<div className={styles.walletFieldTitle}>{t('paste_signature')}</div>
<input onChange={(e) => setWalletsArrayProperty(index, 'signature', e.target.value)} value={wallet.signature} placeholder='0x...' />
<button className={styles.save} onClick={save}>
{t('save')}
</button>
</div>
const _removeWallet = (index: number) => {
const wallet = walletsArray[index];
if (window.confirm(t('delete_confirm', { value: wallet.chainTicker, interpolation: { escapeValue: false } }))) {
if (window.confirm(t('double_confirm'))) {
const newArray = [...walletsArray.slice(0, index), ...walletsArray.slice(index + 1)];
setWalletsArray(newArray);
setSelectedWallet(0);
}
} else {
return;
}
};
const walletsInputs =
walletsArray.length > 0 ? (
<div key={selectedWallet} className={styles.walletBox}>
<div className={styles.walletField}>
<div className={styles.walletFieldTitle}>{t('chain_ticker')}</div>
<input
type='text'
onChange={(e) => setWalletsArrayProperty(selectedWallet, 'chainTicker', e.target.value)}
value={walletsArray[selectedWallet].chainTicker}
placeholder='eth/sol/avax'
/>
</div>
<div className={styles.walletField}>
<div className={styles.walletFieldTitle}>{t('wallet_address')}</div>
<input
type='text'
onChange={(e) => setWalletsArrayProperty(selectedWallet, 'address', e.target.value)}
value={walletsArray[selectedWallet].address}
placeholder='0x...'
/>
</div>
<div className={`${styles.walletField} ${styles.copyMessage}`}>
<Trans
i18nKey='copy_message_etherscan'
values={{ copy: hasCopied ? t('copied') : t('copy') }}
components={{
1: <button onClick={() => copyMessageToSign(walletsArray[selectedWallet], selectedWallet)} />,
// eslint-disable-next-line
2: <a href='https://etherscan.io/verifiedSignatures' target='_blank' rel='noopener noreferrer' />,
}}
/>
</div>
<div className={styles.walletField}>
<div className={styles.walletFieldTitle}>{t('paste_signature')}</div>
<input
type='text'
onChange={(e) => setWalletsArrayProperty(selectedWallet, 'signature', e.target.value)}
value={walletsArray[selectedWallet].signature}
placeholder='0x...'
/>
<button className={styles.save} onClick={save}>
{t('save')}
</button>
</div>
<button className={styles.removeWallet} onClick={() => _removeWallet(selectedWallet)}>
{t('remove')}
</button>
</div>
</>
));
) : null;
return (
<>
<div className={styles.addWallet}>
<Trans i18nKey='add_wallet' components={{ 1: <button onClick={() => setWalletsArray([...walletsArray, defaultWalletObject])} /> }} />
<select onChange={(e) => setSelectedWallet(Number(e.target.value))} value={selectedWallet}>
{walletsArray.length === 0 && <option>{t('none')}</option>}
{walletsArray.map((_, index) => (
<option key={index} value={index}>
{t('wallet')} #{index + 1}
</option>
))}
</select>
<button
onClick={() => {
const newIndex = walletsArray.length;
setWalletsArray([...walletsArray, defaultWalletObject]);
setSelectedWallet(newIndex);
}}
>
+
</button>
</div>
{walletsInputs}
</>
@@ -146,7 +177,13 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
const CryptoWalletsSetting = () => {
const account = useAccount();
return account && <CryptoWalletsForm account={account} />;
return (
account && (
<div className={styles.setting}>
<CryptoWalletsForm account={account} />
</div>
)
);
};
export default CryptoWalletsSetting;
src/components/settings-modal/settings-modal.module.css
+10
View File
@@ -12,6 +12,16 @@
cursor: pointer;
}
.settingsModal button {
text-transform: capitalize;
}
.settingsModal input[type='text'] {
outline: none;
border: 1px solid #aaa;
padding: 2px 4px 3px;
}
.settingsModal {
top: 25px;
width: 394px;
src/components/settings-modal/settings-modal.tsx
+4 -4
View File
@@ -156,28 +156,28 @@ const SettingsModal = () => {
<div className={`${styles.setting} ${styles.category}`}>
<label onClick={() => setShowAccountSettings(!showAccountSettings)}>
<span className={showAccountSettings ? styles.hideButton : styles.showButton} />
Account
{t('account')}
</label>
</div>
{showAccountSettings && <AccountSettings />}
<div className={`${styles.setting} ${styles.category}`}>
<label onClick={() => setShowCryptoAddressSetting(!showCryptoAddressSetting)}>
<span className={showCryptoAddressSetting ? styles.hideButton : styles.showButton} />
Crypto Address
{t('crypto_address')}
</label>
</div>
{showCryptoAddressSetting && <CryptoAddressSetting />}
<div className={`${styles.setting} ${styles.category}`}>
<label onClick={() => setShowCryptoWalletSettings(!showCryptoWalletSettings)}>
<span className={showCryptoWalletSettings ? styles.hideButton : styles.showButton} />
Crypto Wallets
{t('crypto_wallets')}
</label>
</div>
{showCryptoWalletSettings && <CryptoWalletsSetting />}
<div className={`${styles.setting} ${styles.category}`}>
<label onClick={() => setShowPlebbitOptionsSettings(!showPlebbitOptionsSettings)}>
<span className={showPlebbitOptionsSettings ? styles.hideButton : styles.showButton} />
Plebbit Options
{t('plebbit_options')}
</label>
</div>
{showPlebbitOptionsSettings && <PlebbitOptionsSettings />}