Skip to content

New Page – Account Settings Update #544

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 22, 2025
+113 −92
Merged

New Page – Account Settings Update #544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b5ae09f
update some field and fix login pro
pandablue0809 Aug 18, 2025
a98d920
localStorage update
ihomp Aug 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion components/EmailLoginPopup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,11 @@ export default function EmailLoginPopup({ isOpen, onClose, onSuccess, setAccount
})

if (data?.data) {
setAccount({ ...data.data, pro: data.data.email })
setAccount((prevAccount) => ({
...prevAccount,
...data.data,
pro: data.data.email
}))
}

const partnerDataRaw = await axiosAdmin.get('partner').catch((error) => {
Expand Down
1 change: 1 addition & 0 deletions components/Home/PriceChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,7 @@ export default function PriceChart({ currency, chartPeriod, setChartPeriod, hide
ignore = true
ctrl.abort()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
currency,
chartPeriod,
Expand Down
168 changes: 82 additions & 86 deletions pages/services/account-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { getIsSsrMobile } from '../../utils/mobile'
import CheckBox from '../../components/UI/CheckBox'
import AddressInput from '../../components/UI/AddressInput'
import FormInput from '../../components/UI/FormInput'
import { accountSettings } from '../../styles/pages/account-settings.module.scss'

export const getServerSideProps = async (context) => {
Expand Down Expand Up @@ -496,9 +495,9 @@ export default function AccountSettings({
return
}
if (/^[0-9a-fA-F]{32}$/.test(input)) {
valueHex = input.toUpperCase()
valueHex = input
} else if (isEmailValid(input)) {
valueHex = md5(input).toUpperCase()
valueHex = md5(input)
} else {
setErrorMessage('Enter a valid email or a 32-character hex MD5 hash.')
return
Expand Down Expand Up @@ -733,7 +732,7 @@ export default function AccountSettings({
const tx = {
TransactionType: 'AccountSet',
Account: account.address,
WalletLocator: ''
WalletLocator: '0000000000000000000000000000000000000000000000000000000000000000'
}
setSignRequest({
request: tx,
Expand Down Expand Up @@ -1022,58 +1021,7 @@ export default function AccountSettings({
{/* Basic ASF Flags */}
{flagGroups.basic.map((flag) => renderFlagItem(flag, 'asf'))}

{/* NFTokenMinter Section */}
{!xahauNetwork && (
<div className="flag-item">
<div className="flag-header">
<div className="flag-info">
<span className="flag-name">Authorized NFToken Minter</span>
{account?.address && (
<span className="flag-status">{currentNftTokenMinter ? currentNftTokenMinter : 'Not Set'}</span>
)}
</div>
{currentNftTokenMinter ? (
<button
className="button-action thin"
onClick={handleClearNftTokenMinter}
disabled={!account?.address}
style={{ minWidth: '120px' }}
>
Clear NFTokenMinter
</button>
) : (
<button
className="button-action thin"
onClick={handleSetNftTokenMinter}
disabled={!account?.address || !nftTokenMinter.trim()}
style={{ minWidth: '120px' }}
>
Set NFTokenMinter
</button>
)}
</div>
<div className="flag-description">
Allows another account to mint NFTokens on behalf of this account. Requires setting the
asfAuthorizedNFTokenMinter flag and specifying the minter address.
</div>
{!currentNftTokenMinter && (
<div className="nft-minter-input">
<AddressInput
title="NFTokenMinter Address"
placeholder="Enter NFTokenMinter address"
setInnerValue={setNftTokenMinter}
disabled={!account?.address}
hideButton={true}
type="address"
/>
<small>Enter the address that will be authorized to mint NFTokens for this account</small>
</div>
)}
{currentNftTokenMinter && (
<small>To change the authorized minter, first clear the current one, then set a new one.</small>
)}
</div>
)}


{/* Account Fields */}
<br />
Expand All @@ -1087,7 +1035,7 @@ export default function AccountSettings({
<span className="flag-status">{currentDomain ? currentDomain : 'Not Set'}</span>
)}
</div>
<div className="flex gap-2">
<div className="flag-info-buttons">
{currentDomain && (
<button
className="button-action thin"
Expand All @@ -1109,11 +1057,11 @@ export default function AccountSettings({
</div>
</div>
<div className="nft-minter-input">
<FormInput
<input
className="input-text"
placeholder="example.com"
setInnerValue={setDomainInput}
hideButton={true}
defaultValue={domainInput}
value={domainInput}
onChange={(e) => setDomainInput(e.target.value)}
type="text"
disabled={!account?.address}
/>
Expand All @@ -1129,7 +1077,7 @@ export default function AccountSettings({
<span className="flag-status">{currentEmailHash ? currentEmailHash : 'Not Set'}</span>
)}
</div>
<div className="flex gap-2">
<div className="flag-info-buttons">
{currentEmailHash && (
<button
className="button-action thin"
Expand All @@ -1151,11 +1099,11 @@ export default function AccountSettings({
</div>
</div>
<div className="nft-minter-input">
<FormInput
<input
className="input-text"
placeholder="Email or 32 hex characters (MD5)"
setInnerValue={setEmailHashInput}
hideButton={true}
defaultValue={emailHashInput}
value={emailHashInput}
onChange={(e) => setEmailHashInput(e.target.value)}
type="text"
disabled={!account?.address}
/>
Expand All @@ -1169,7 +1117,7 @@ export default function AccountSettings({
<span className="flag-name">MessageKey</span>
{account?.address && <span className="flag-status">{currentMessageKey ? 'Set' : 'Not Set'}</span>}
</div>
<div className="flex gap-2">
<div className="flag-info-buttons">
{currentMessageKey && (
<button
className="button-action thin"
Expand All @@ -1191,11 +1139,11 @@ export default function AccountSettings({
</div>
</div>
<div className="nft-minter-input">
<FormInput
<input
className="input-text"
placeholder="Hex-encoded public key"
setInnerValue={setMessageKeyInput}
hideButton={true}
defaultValue={messageKeyInput}
value={messageKeyInput}
onChange={(e) => setMessageKeyInput(e.target.value)}
type="text"
disabled={!account?.address}
/>
Expand All @@ -1215,7 +1163,7 @@ export default function AccountSettings({
</span>
)}
</div>
<div className="flex gap-2">
<div className="flag-info-buttons">
{currentTransferRate && currentTransferRate > 0 && (
<button
className="button-action thin"
Expand All @@ -1237,11 +1185,11 @@ export default function AccountSettings({
</div>
</div>
<div className="nft-minter-input">
<FormInput
<input
className="input-text"
placeholder="Percentage 0-100"
setInnerValue={setTransferRateInput}
hideButton={true}
defaultValue={transferRateInput}
value={transferRateInput}
onChange={(e) => setTransferRateInput(e.target.value)}
type="text"
inputMode="decimal"
disabled={!account?.address}
Expand All @@ -1258,7 +1206,7 @@ export default function AccountSettings({
<span className="flag-status">{currentTickSize ? currentTickSize : 'Not Set'}</span>
)}
</div>
<div className="flex gap-2">
<div className="flag-info-buttons">
<button
className="button-action thin"
onClick={handleSetTickSize}
Expand All @@ -1270,11 +1218,11 @@ export default function AccountSettings({
</div>
</div>
<div className="nft-minter-input">
<FormInput
<input
className="input-text"
placeholder="0 to clear, or 3-15"
setInnerValue={setTickSizeInput}
hideButton={true}
defaultValue={tickSizeInput}
value={tickSizeInput}
onChange={(e) => setTickSizeInput(e.target.value)}
type="text"
inputMode="numeric"
disabled={!account?.address}
Expand All @@ -1291,7 +1239,7 @@ export default function AccountSettings({
<span className="flag-status">{currentWalletLocator ? 'Set' : 'Not Set'}</span>
)}
</div>
<div className="flex gap-2">
<div className="flag-info-buttons">
{currentWalletLocator && (
<button
className="button-action thin"
Expand All @@ -1313,18 +1261,66 @@ export default function AccountSettings({
</div>
</div>
<div className="nft-minter-input">
<FormInput
<input
className="input-text"
placeholder="64 hex characters"
setInnerValue={setWalletLocatorInput}
hideButton={true}
defaultValue={walletLocatorInput}
value={walletLocatorInput}
onChange={(e) => setWalletLocatorInput(e.target.value)}
type="text"
disabled={!account?.address}
maxLength={64}
/>
<small>Optional hash locator for your wallet application.</small>
</div>
</div>

{/* NFTokenMinter Field */}
{!xahauNetwork && (
<div className="flag-item">
<div className="flag-header">
<div className="flag-info">
<span className="flag-name">NFTokenMinter</span>
{account?.address && (
<span className="flag-status">{currentNftTokenMinter ? currentNftTokenMinter : 'Not Set'}</span>
)}
</div>
<div className="flag-info-buttons">
{currentNftTokenMinter && (
<button
className="button-action thin"
onClick={handleClearNftTokenMinter}
disabled={!account?.address}
style={{ minWidth: '120px' }}
>
Clear NFTokenMinter
</button>
)}
<button
className="button-action thin"
onClick={handleSetNftTokenMinter}
disabled={!account?.address || !nftTokenMinter.trim()}
style={{ minWidth: '120px' }}
>
Set NFTokenMinter
</button>
</div>
</div>
<div className="nft-minter-input">
<AddressInput
title="NFTokenMinter Address"
placeholder="Enter NFTokenMinter address"
setInnerValue={setNftTokenMinter}
disabled={!account?.address}
hideButton={true}
type="address"
/>
<small>Enter the address that will be authorized to mint NFTokens for this account</small>
</div>
{currentNftTokenMinter && (
<small>To change the authorized minter, first clear the current one, then set a new one.</small>
)}
</div>
)}
</div>

{/* Advanced options */}
Expand Down
12 changes: 12 additions & 0 deletions styles/pages/account-settings.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,21 @@
align-self: flex-end;
width: auto;
}

.flag-info-buttons {
width: 100%;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
}
}

.flag-info-buttons {
display: flex;
gap: 0.5rem;
}

.flag-info {
display: flex;
align-items: center;
Expand Down
1 change: 1 addition & 0 deletions styles/ui.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ code {

.code-highlight {
background-color: var(--background-input-readonly);
word-break: break-all;
}

a, .link {
Expand Down
17 changes: 12 additions & 5 deletions utils/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,14 +310,21 @@ export const useLocalStorage = (key, initialValue) => {
const setValue = useCallback(
(value) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value
setState(valueToStore)
localStorage.setItem(key, JSON.stringify(valueToStore))
if (typeof value === 'function') {
setState((prev) => {
const next = value(prev)
localStorage.setItem(key, JSON.stringify(next))
return next
})
} else {
setState(value)
localStorage.setItem(key, JSON.stringify(value))
}
} catch {
console.log('Error saving to localStorage')
}
},
[key, setState]
[key]
)

const remove = useCallback(() => {
Expand Down Expand Up @@ -936,4 +943,4 @@ export const xls14NftValue = (value) => {
return false
}

export const md5 = (text) => SparkMD5.hash(text)
export const md5 = (text) => SparkMD5.hash(text)