Skip to content

feat(PE-8241): Persist settings in local storage #799

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 15 commits into from
Jul 23, 2025
Merged

feat(PE-8241): Persist settings in local storage #799

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5040c06
fix(hyperbeam): add hyperbeam url to dev settings
atticusofsparta Jun 26, 2025
aaa866e
fix(settings): update settings to persist in local storage
atticusofsparta Jun 26, 2025
c99e299
fix(useANT): update useANT to use aoNetwork
atticusofsparta Jun 26, 2025
9bd1952
fix(sdk): use latest alpha
atticusofsparta Jun 26, 2025
345a7ec
fix(merge): merge origin hyperbeam config
atticusofsparta Jun 27, 2025
3e8cea3
fix(build): fix types
atticusofsparta Jun 27, 2025
d667f32
fix(hyperbeamUrl): add hb url to configs and persist setting
atticusofsparta Jul 17, 2025
b87c1c6
Merge remote-tracking branch 'origin/develop' into PE-8241-hyperbeam-…
atticusofsparta Jul 22, 2025
95e4e93
fix(settings): update settings page with hyperbeam URL and fix other …
atticusofsparta Jul 23, 2025
a794cbb
Update src/hooks/useSyncSettings/useSyncSettings.tsx
atticusofsparta Jul 23, 2025
d713079
fix(settings): use consistent storage key
atticusofsparta Jul 23, 2025
ca26d18
fix(sync settings): remove unnecessary conditional
atticusofsparta Jul 23, 2025
4966765
fix(placeholders): set example hyperbeam url as placeholder
atticusofsparta Jul 23, 2025
cb514dd
fix(storage key): use main storage key only for syncing settings
atticusofsparta Jul 23, 2025
7aecf55
fix(comments): remove old comments
atticusofsparta Jul 23, 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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
},
"dependencies": {
"@ant-design/icons": "5.4.0",
"@ar.io/sdk": "^3.14.0-alpha.8",
"@ar.io/sdk": "^3.14.1-alpha.1",
"@ardrive/turbo-sdk": "^1.23.1",
"@permaweb/aoconnect": "^0.0.59",
"@radix-ui/react-checkbox": "^1.1.4",
Expand Down
2 changes: 2 additions & 0 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import Checkout from './components/pages/Register/Checkout';
import ArNSSettings from './components/pages/Settings/ArNSSettings';
import NetworkSettings from './components/pages/Settings/NetworkSettings';
import SettingsOverview from './components/pages/Settings/SettingsOverview';
import useSyncSettings from './hooks/useSyncSettings/useSyncSettings';
import useWanderEvents from './hooks/useWanderEvents/useWanderEvents';
import './index.css';
import { useGlobalState } from './state';
Expand Down Expand Up @@ -71,6 +72,7 @@ const sentryCreateBrowserRouter =

function App() {
useWanderEvents();
useSyncSettings();
const [{ turboNetwork }] = useGlobalState();

const stripePromise = useMemo(() => {
Expand Down
3 changes: 2 additions & 1 deletion src/components/data-display/tables/UndernamesSubtable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const UndernamesSubtable = ({
antId: string;
state?: AoANTState | null;
}) => {
const [{ arioProcessId, antAoClient }] = useGlobalState();
const [{ arioProcessId, antAoClient, aoNetwork }] = useGlobalState();
const [{ wallet, walletAddress }] = useWalletState();
const isOwner = walletAddress
? state?.Owner === walletAddress.toString()
Expand Down Expand Up @@ -295,6 +295,7 @@ const UndernamesSubtable = ({
dispatchTransactionState,
dispatchArNSState,
ao: antAoClient,
aoNetwork,
}).then(() => {
eventEmitter.emit('success', {
message: (
Expand Down
3 changes: 2 additions & 1 deletion src/components/data-display/tables/UndernamesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const UndernamesTable = ({
refresh?: () => void;
}) => {
const [searchParams, setSearchParams] = useSearchParams();
const [{ arioProcessId, antAoClient }] = useGlobalState();
const [{ arioProcessId, antAoClient, aoNetwork }] = useGlobalState();
const [{ wallet, walletAddress }] = useWalletState();
const isOwner = walletAddress
? state?.Owner === walletAddress.toString()
Expand Down Expand Up @@ -153,6 +153,7 @@ const UndernamesTable = ({
dispatchTransactionState,
dispatchArNSState,
ao: antAoClient,
aoNetwork,
});
eventEmitter.emit('success', {
name: 'Manage Undernames',
Expand Down
121 changes: 121 additions & 0 deletions src/components/devtools/NetworkSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { Collapse, Input, Space } from 'antd';
import { List } from 'lucide-react';
import { useEffect, useState } from 'react';

import Switch from '../inputs/Switch';
import ArweaveID, { ArweaveIdTypes } from '../layout/ArweaveID/ArweaveID';
import SelectGatewayModal from './SelectGatewayModal/SelectGatewayModal';
import './styles.css';
Expand Down Expand Up @@ -57,6 +58,14 @@ function NetworkSettings() {
const [validTurboPaymentUrl, setValidTurboPaymentUrl] =
useState<boolean>(true);

const [newHyperbeamUrl, setNewHyperbeamUrl] = useState<string>(
aoNetwork.HYPERBEAM.URL,
);
const [validHyperbeamUrl, setValidHyperbeamUrl] = useState<boolean>(true);
const [hyperbeamEnabled, setHyperbeamEnabled] = useState<boolean>(
aoNetwork.HYPERBEAM.ENABLED,
);

function reset() {
// gateway
setNewGateway(NETWORK_DEFAULTS.ARWEAVE.HOST);
Expand All @@ -78,6 +87,14 @@ function NetworkSettings() {
setNewTurboPaymentUrl(NETWORK_DEFAULTS.TURBO.PAYMENT_URL);
setValidTurboPaymentUrl(true);
updateTurboNetwork(NETWORK_DEFAULTS.TURBO);
// hyperbeam network
setNewHyperbeamUrl(NETWORK_DEFAULTS.AO.HYPERBEAM.URL);
setValidHyperbeamUrl(true);
setHyperbeamEnabled(NETWORK_DEFAULTS.AO.HYPERBEAM.ENABLED);
updateHyperbeamAoNetwork({
URL: NETWORK_DEFAULTS.AO.HYPERBEAM.URL,
ENABLED: NETWORK_DEFAULTS.AO.HYPERBEAM.ENABLED,
});
}

useEffect(() => {
Expand All @@ -94,6 +111,12 @@ function NetworkSettings() {
setValidSuAddress(true);
}, [aoNetwork.ARIO]);

useEffect(() => {
setNewHyperbeamUrl(aoNetwork.HYPERBEAM.URL);
setValidHyperbeamUrl(true);
setHyperbeamEnabled(aoNetwork.HYPERBEAM.ENABLED);
Copy link
Contributor

@dtfiedler dtfiedler Jun 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comment about only using the presence of a hyperbeam URL on whether or not hyperbeam should be used

}, [aoNetwork.HYPERBEAM]);

async function updateGateway(gate: string) {
try {
if (!isValidGateway(gate)) {
Expand Down Expand Up @@ -196,6 +219,24 @@ function NetworkSettings() {
});
}

function updateHyperbeamAoNetwork(config: {
URL?: string;
ENABLED?: boolean;
}) {
try {
const newConfig = {
...aoNetwork,
...{ HYPERBEAM: { ...aoNetwork.HYPERBEAM, ...config } },
};
dispatchGlobalState({
type: 'setAONetwork',
payload: newConfig,
});
} catch (error) {
eventEmitter.emit('error', error);
}
}

return (
<div className="flex" style={{ width: '100%' }}>
<Space direction="vertical" style={{ width: '100%' }}>
Expand Down Expand Up @@ -565,6 +606,86 @@ function NetworkSettings() {
</div>
}
/>
<span className="flex w-fit whitespace-nowrap items-center bg-primary-thin rounded-t-md px-4 py-1 border-x-2 border-t-2 border-primary text-md text-primary font-semibold mt-2 gap-4 justify-center">
Hyperbeam URL:{' '}
<span className="text-white pl-2 flex">
{aoNetwork.HYPERBEAM.URL}
</span>
<span className="text-white pl-2">
({aoNetwork.HYPERBEAM.ENABLED ? 'Enabled' : 'Disabled'})
</span>
<div className="flex flex-row items-center gap-2 mt-2 bg-dark-grey p-2 rounded-md">
<span className="text-white font-semibold">
Enable Hyperbeam:
</span>
<Switch
checked={hyperbeamEnabled}
onChange={(checked) => {
setHyperbeamEnabled(checked);
updateHyperbeamAoNetwork({ ENABLED: checked });
}}
/>
<button
className="bg-primary-thin text-white h-full flex w-fit p-1 rounded-sm text-xs"
onClick={() => {
setHyperbeamEnabled(
NETWORK_DEFAULTS.AO.HYPERBEAM.ENABLED,
);
updateHyperbeamAoNetwork({
ENABLED: NETWORK_DEFAULTS.AO.HYPERBEAM.ENABLED,
});
}}
>
reset
</button>
</div>
</span>

<Input
className="bg-background justify-center items-center"
placeholder="Enter custom Hyperbeam URL"
value={newHyperbeamUrl}
onChange={(e) => {
setValidHyperbeamUrl(isValidURL(e.target.value.trim()));
setNewHyperbeamUrl(e.target.value.trim());
}}
onClear={() => setNewHyperbeamUrl('')}
onPressEnter={(e) =>
updateHyperbeamAoNetwork({
URL: e.currentTarget.value.trim(),
})
}
variant="outlined"
status={validHyperbeamUrl ? '' : 'error'}
addonAfter={
<div className="flex flex-row" style={{ gap: '5px' }}>
<button
disabled={!validHyperbeamUrl}
className="bg-primary text-black h-full flex w-fit p-1 rounded-sm text-xs"
onClick={() =>
updateHyperbeamAoNetwork({
URL: newHyperbeamUrl.trim(),
})
}
>
Set Hyperbeam URL
</button>
<button
className="bg-primary-thin text-white h-full flex w-fit p-1 rounded-sm text-xs"
onClick={() => {
setNewHyperbeamUrl(NETWORK_DEFAULTS.AO.HYPERBEAM.URL);
setValidHyperbeamUrl(true);
updateHyperbeamAoNetwork({
URL: NETWORK_DEFAULTS.AO.HYPERBEAM.URL,
});
}}
>
reset
</button>
</div>
}
/>

<div className="flex flex-row p-2 justify-end items-center">
<button
className="p-2 text-white border-2 border-black hover:bg-primary hover:text-black bg-primary-thin rounded-md font-bold"
Expand Down
11 changes: 10 additions & 1 deletion src/components/forms/DomainSettings/DomainSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ function DomainSettings({
const queryClient = useQueryClient();
const navigate = useNavigate();

const [{ arioProcessId, antAoClient }] = useGlobalState();
const [{ arioProcessId, antAoClient, aoNetwork }] = useGlobalState();
const [{ interactionResult }, dispatchTransactionState] =
useTransactionState();
const [, dispatchArNSState] = useArNSState();
Expand Down Expand Up @@ -298,6 +298,7 @@ function DomainSettings({
dispatchTransactionState,
dispatchArNSState,
ao: antAoClient,
aoNetwork,
})
}
/>
Expand Down Expand Up @@ -361,6 +362,7 @@ function DomainSettings({
dispatchTransactionState,
dispatchArNSState,
ao: antAoClient,
aoNetwork,
})
}
/>
Expand All @@ -380,6 +382,7 @@ function DomainSettings({
dispatchTransactionState,
dispatchArNSState,
ao: antAoClient,
aoNetwork,
})
}
/>
Expand Down Expand Up @@ -408,6 +411,7 @@ function DomainSettings({
dispatchTransactionState,
dispatchArNSState,
ao: antAoClient,
aoNetwork,
})
}
/>
Expand All @@ -434,6 +438,7 @@ function DomainSettings({
dispatchTransactionState,
dispatchArNSState,
ao: antAoClient,
aoNetwork,
})
}
/>
Expand All @@ -456,6 +461,7 @@ function DomainSettings({
dispatchTransactionState,
dispatchArNSState,
ao: antAoClient,
aoNetwork,
})
}
/>
Expand Down Expand Up @@ -488,6 +494,7 @@ function DomainSettings({
dispatchTransactionState,
dispatchArNSState,
ao: antAoClient,
aoNetwork,
})
}
/>
Expand All @@ -509,6 +516,7 @@ function DomainSettings({
dispatchTransactionState,
dispatchArNSState,
ao: antAoClient,
aoNetwork,
})
}
/>
Expand All @@ -530,6 +538,7 @@ function DomainSettings({
dispatchTransactionState,
dispatchArNSState,
ao: antAoClient,
aoNetwork,
})
}
/>
Expand Down
15 changes: 7 additions & 8 deletions src/components/inputs/text/NameTokenSelector/NameTokenSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function NameTokenSelector({
}: {
selectedTokenCallback: (id: ArweaveTransactionID | undefined) => void;
}) {
const [{ arweaveDataProvider, antAoClient }] = useGlobalState();
const [{ arweaveDataProvider, antAoClient, aoNetwork }] = useGlobalState();
const [{ walletAddress }] = useWalletState();

const [searchText, setSearchText] = useState<string>();
Expand Down Expand Up @@ -108,19 +108,15 @@ function NameTokenSelector({
}

const fetchedprocessIds: Array<ArweaveTransactionID> = [];
// const fetchedprocessIds = await arweaveDataProvider
// .getContractsForWallet({
// address,
// })
// .catch(() => {
// throw new Error('Unable to get contracts for wallet');
// });

const validImports = imports.length
? await Promise.all(
imports.map(async (id: ArweaveTransactionID) => {
try {
const contract = ANT.init({
hyperbeamUrl: aoNetwork.HYPERBEAM.ENABLED
? aoNetwork.HYPERBEAM.URL
: undefined,
process: new AOProcess({
processId: id.toString(),
ao: antAoClient,
Expand Down Expand Up @@ -168,6 +164,9 @@ function NameTokenSelector({
}[] = await Promise.all(
processIds.map(async (processId) => {
const contract = ANT.init({
hyperbeamUrl: aoNetwork.HYPERBEAM.ENABLED
? aoNetwork.HYPERBEAM.URL
: undefined,
process: new AOProcess({
processId: processId.toString(),
ao: antAoClient,
Expand Down
2 changes: 2 additions & 0 deletions src/components/modals/PrimaryNameModal/PrimaryNameModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ function PrimaryNameModal({
processId: arioProcessId,
fundFrom: fundingSource,
dispatch: dispatchTransactionState,
aoNetwork,
});

break;
Expand All @@ -199,6 +200,7 @@ function PrimaryNameModal({
dispatchTransactionState,
dispatchArNSState,
ao: aoClient,
aoNetwork,
});
queryClient.resetQueries({
queryKey: ['primary-name'],
Expand Down
5 changes: 4 additions & 1 deletion src/components/modals/ant-management/EditUndernameModal/EditUndernameModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function EditUndernameModal({
closeModal: () => void;
payloadCallback: (payload: SetRecordPayload) => void;
}) {
const [{ arweaveDataProvider, antAoClient }] = useGlobalState();
const [{ arweaveDataProvider, antAoClient, aoNetwork }] = useGlobalState();
const isMobile = useIsMobile();
const targetIdRef = useRef<HTMLInputElement>(null);
const ttlRef = useRef<HTMLInputElement>(null);
Expand All @@ -50,6 +50,9 @@ function EditUndernameModal({
async function load(id: ArweaveTransactionID) {
try {
const contract = ANT.init({
hyperbeamUrl: aoNetwork.HYPERBEAM.ENABLED
? aoNetwork.HYPERBEAM.URL
: undefined,
process: new AOProcess({
processId: id.toString(),
ao: antAoClient,
Expand Down
1 change: 1 addition & 0 deletions src/components/modals/ant-management/ReassignNameModal/ReassignNameModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ export function ReassignNameModal({
dispatchArNSState,
owner: walletAddress.toString(),
ao: aoClient,
aoNetwork,
});
eventEmitter.emit('success', {
message: (
Expand Down
1 change: 1 addition & 0 deletions src/components/modals/ant-management/ReturnNameModal/ReturnNameModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export function ReturnNameModal({
dispatchArNSState,
owner: walletAddress.toString(),
ao: antAoClient,
aoNetwork,
});
eventEmitter.emit('success', {
message: (
Expand Down
Loading