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

src/App.tsx

@@ -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';
@@ -71,6 +72,7 @@ const sentryCreateBrowserRouter =
 
 function App() {
   useWanderEvents();
+  useSyncSettings();
   const [{ turboNetwork }] = useGlobalState();
 
   const stripePromise = useMemo(() => {

src/components/data-display/tables/DomainsTable.tsx

@@ -121,7 +121,7 @@ const DomainsTable = ({
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [{ walletAddress }] = useWalletState();
-  const [{ arioProcessId, aoNetwork }] = useGlobalState();
+  const [{ arioProcessId, aoNetwork, hyperbeamUrl }] = useGlobalState();
   const [{ loading: loadingArnsState }, dispatchArNSState] = useArNSState();
   const { data: antVersion } = useLatestANTVersion();
   const antModuleId = antVersion?.moduleId ?? null;
@@ -362,6 +362,7 @@ const DomainsTable = ({
                       aoNetwork,
                       queryClient,
                       walletAddress,
+                      hyperbeamUrl,
                       dispatch: dispatchArNSState,
                     });
                   }}

src/components/devtools/NetworkSettings.tsx

@@ -26,7 +26,14 @@ const Panel = Collapse.Panel;
 
 function NetworkSettings() {
   const [
-    { gateway, aoNetwork, arioProcessId, arioContract, turboNetwork },
+    {
+      gateway,
+      aoNetwork,
+      arioProcessId,
+      arioContract,
+      turboNetwork,
+      hyperbeamUrl,
+    },
     dispatchGlobalState,
   ] = useGlobalState();
   const [{ wallet }] = useWalletState();
@@ -57,6 +64,11 @@ function NetworkSettings() {
   const [validTurboPaymentUrl, setValidTurboPaymentUrl] =
     useState<boolean>(true);
 
+  const [newHyperbeamUrl, setNewHyperbeamUrl] = useState<string>(
+    hyperbeamUrl || '',
+  );
+  const [validHyperbeamUrl, setValidHyperbeamUrl] = useState<boolean>(true);
+
   function reset() {
     // gateway
     setNewGateway(NETWORK_DEFAULTS.ARWEAVE.HOST);
@@ -78,6 +90,13 @@ function NetworkSettings() {
     setNewTurboPaymentUrl(NETWORK_DEFAULTS.TURBO.PAYMENT_URL);
     setValidTurboPaymentUrl(true);
     updateTurboNetwork(NETWORK_DEFAULTS.TURBO);
+    // hyperbeam network
+    setNewHyperbeamUrl(NETWORK_DEFAULTS.AO.ARIO.HYPERBEAM_URL || '');
+    setValidHyperbeamUrl(true);
+    dispatchGlobalState({
+      type: 'setHyperbeamUrl',
+      payload: NETWORK_DEFAULTS.AO.ARIO.HYPERBEAM_URL || undefined,
+    });
   }
 
   useEffect(() => {
@@ -94,6 +113,11 @@ function NetworkSettings() {
     setValidSuAddress(true);
   }, [aoNetwork.ARIO]);
 
+  useEffect(() => {
+    setNewHyperbeamUrl(hyperbeamUrl || '');
+    setValidHyperbeamUrl(true);
+  }, [hyperbeamUrl]);
+
   async function updateGateway(gate: string) {
     try {
       if (!isValidGateway(gate)) {
@@ -567,6 +591,67 @@ 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">
+                  {hyperbeamUrl || ''}
+                </span>
+                {!hyperbeamUrl && (
+                  <span className="text-red-500 font-bold">DISABLED</span>
+                )}
+              </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) =>
+                  dispatchGlobalState({
+                    type: 'setHyperbeamUrl',
+                    payload: 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={() =>
+                        dispatchGlobalState({
+                          type: 'setHyperbeamUrl',
+                          payload: 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.ARIO.HYPERBEAM_URL || '',
+                        );
+                        setValidHyperbeamUrl(true);
+                        dispatchGlobalState({
+                          type: 'setHyperbeamUrl',
+                          payload:
+                            NETWORK_DEFAULTS.AO.ARIO.HYPERBEAM_URL || undefined,
+                        });
+                      }}
+                    >
+                      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"

src/components/inputs/text/NameTokenSelector/NameTokenSelector.tsx

@@ -108,13 +108,6 @@ 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(

src/components/layout/Breadcrumbs/Breadcrumbs.tsx

@@ -24,7 +24,7 @@ export type NavItem = {
 export const ANT_FLAG = 'ant-flag';
 
 function Breadcrumbs() {
-  const [{ aoNetwork }] = useGlobalState();
+  const [{ aoNetwork, hyperbeamUrl }] = useGlobalState();
   const queryClient = useQueryClient();
   const location = useLocation();
   const path = location.pathname.split('/');
@@ -63,6 +63,7 @@ function Breadcrumbs() {
           buildDomainInfoQuery({
             antId: processId,
             aoNetwork,
+            hyperbeamUrl,
           }),
         );
         const name = domainInfo?.name;

src/components/modals/PrimaryNameModal/PrimaryNameModal.tsx

@@ -182,6 +182,8 @@ function PrimaryNameModal({
             processId: arioProcessId,
             fundFrom: fundingSource,
             dispatch: dispatchTransactionState,
+
+            hyperbeamUrl,
           });
 
           break;
@@ -239,6 +241,7 @@ function PrimaryNameModal({
         aoNetwork: aoNetwork,
         walletAddress,
         queryClient,
+        hyperbeamUrl,
       });
 
       closeModal();

src/components/modals/ant-management/ReassignNameModal/ReassignNameModal.tsx

@@ -168,6 +168,7 @@ export function ReassignNameModal({
         arioProcessId,
         dispatch: dispatchArNSState,
         aoNetworkSettings: aoNetwork,
+        hyperbeamUrl,
       });
       handleClose();
     } catch (error) {

src/components/modals/ant-management/ReturnNameModal/ReturnNameModal.tsx

@@ -92,6 +92,7 @@ export function ReturnNameModal({
         arioProcessId,
         dispatch: dispatchArNSState,
         aoNetworkSettings: aoNetwork,
+        hyperbeamUrl,
       });
       setShow(false);
       navigate('/manage');

src/components/modals/ant-management/UpgradeDomainModal/UpgradeDomainModal.tsx

@@ -37,8 +37,9 @@ function UpgradeDomainModal({
   domain: string;
 }) {
   const queryClient = useQueryClient();
-  const [{ antAoClient, aoNetwork, arioContract, arioProcessId }] =
-    useGlobalState();
+  const [
+    { antAoClient, aoNetwork, arioContract, arioProcessId, hyperbeamUrl },
+  ] = useGlobalState();
   const [, dispatchArNSState] = useArNSState();
   const [{ wallet, walletAddress }] = useWalletState();
   const [, dispatchTransactionState] = useTransactionState();
@@ -74,6 +75,7 @@ function UpgradeDomainModal({
           arioContract,
           arioProcessId,
           aoNetwork,
+          hyperbeamUrl,
           wallet,
         }),
       );

src/components/modals/ant-management/UpgradeDomainsModal/UpgradeDomainsModal.tsx

@@ -41,8 +41,9 @@ function UpgradeDomainsModal({
   visible: boolean;
   setVisible: (visible: boolean) => void;
 }) {
-  const [{ antAoClient, aoNetwork, arioProcessId, arioContract }] =
-    useGlobalState();
+  const [
+    { antAoClient, aoNetwork, arioProcessId, arioContract, hyperbeamUrl },
+  ] = useGlobalState();
   const [{ wallet, walletAddress }] = useWalletState();
   const [accepted, setAccepted] = useState(false);
   const [domainsToUpgrade, setDomainsToUpgrade] = useState<string[]>([]);
@@ -104,6 +105,7 @@ function UpgradeDomainsModal({
                   arioContract,
                   arioProcessId,
                   aoNetwork,
+                  hyperbeamUrl,
                   wallet,
                 }),
               );
@@ -185,6 +187,7 @@ function UpgradeDomainsModal({
         walletAddress: walletAddress!,
         arioProcessId: arioProcessId,
         aoNetworkSettings: aoNetwork,
+        hyperbeamUrl,
       });
       handleClose();
     }

src/components/pages/Manage/Manage.tsx

@@ -16,7 +16,7 @@ import { RefreshIcon, SearchIcon } from '../../icons';
 import './styles.css';
 
 function Manage() {
-  const [{ arioProcessId, aoNetwork }] = useGlobalState();
+  const [{ arioProcessId, aoNetwork, hyperbeamUrl }] = useGlobalState();
   const [{ loading: loadingArnsState, domains, ants }, dispatchArNSState] =
     useArNSState();
   const { data: antVersion } = useLatestANTVersion();
@@ -100,6 +100,7 @@ function Manage() {
                           walletAddress: walletAddress,
                           arioProcessId,
                           aoNetworkSettings: aoNetwork,
+                          hyperbeamUrl,
                         })
                       : eventEmitter.emit('error', {
                           name: 'Manage Assets',

src/components/pages/Register/Checkout.tsx

@@ -39,8 +39,16 @@ import { useNavigate } from 'react-router-dom';
 // on completion routes to transaction/complete
 function Checkout() {
   const navigate = useNavigate();
-  const [{ arioContract, arioProcessId, aoNetwork, aoClient, arioTicker }] =
-    useGlobalState();
+  const [
+    {
+      arioContract,
+      arioProcessId,
+      aoNetwork,
+      aoClient,
+      arioTicker,
+      hyperbeamUrl,
+    },
+  ] = useGlobalState();
   const turbo = useTurboArNSClient();
   const [, dispatchArNSState] = useArNSState();
   const [{ walletAddress, wallet }] = useWalletState();
@@ -323,6 +331,8 @@ function Checkout() {
             ? 'turbo'
             : fundingSource,
         turboArNSClient: turbo,
+
+        hyperbeamUrl,
       });
     } catch (error) {
       eventEmitter.emit('error', error);
@@ -333,6 +343,7 @@ function Checkout() {
           arioProcessId,
           walletAddress,
           aoNetworkSettings: aoNetwork,
+          hyperbeamUrl,
         });
       }
     }

src/components/pages/Transaction/TransactionReview.tsx

@@ -33,7 +33,7 @@ import { getTransactionHeader } from './transaction-headers';
 // on completion routes to transaction/complete
 function TransactionReview() {
   const navigate = useNavigate();
-  const [{ arioContract, arioProcessId, aoNetwork, aoClient }] =
+  const [{ arioContract, arioProcessId, aoNetwork, aoClient, hyperbeamUrl }] =
     useGlobalState();
   const [, dispatchArNSState] = useArNSState();
   const [{ walletAddress, wallet }] = useWalletState();
@@ -125,6 +125,8 @@ function TransactionReview() {
         ao: aoClient,
         scheduler: aoNetwork.ARIO.SCHEDULER,
         fundFrom: fundingSource,
+
+        hyperbeamUrl,
       });
     } catch (error) {
       eventEmitter.emit('error', error);
@@ -135,6 +137,7 @@ function TransactionReview() {
           arioProcessId,
           walletAddress,
           aoNetworkSettings: aoNetwork,
+          hyperbeamUrl,
         });
       }
     }

src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useIsMobile/useIsMobile';
 export * from './useLongPress/useLongPress';
 export * from './useIsFocused/useIsFocused';
 export * from './useRegistrationStatus/useRegistrationStatus';
+export * from './useSyncSettings/useSyncSettings';