Feature: Add Endpoint page

src/components/Header/Header.tsx

@@ -4,6 +4,7 @@ import { Button } from '@deriv-com/ui';
 import { LocalStorageConstants, LocalStorageUtils, URLUtils } from '@deriv-com/utils';
 import './Header.scss';
 
+// TODO: handle local storage values not updating after changing local storage values
 const Header = () => {
     const { activeLoginid, logout } = useAuthData();
     const appId = LocalStorageUtils.getValue(LocalStorageConstants.configAppId);

src/pages/endpoint/index.ts

@@ -0,0 +1 @@
+export * from './screens';

src/pages/endpoint/screens/Endpoint/Endpoint.scss

@@ -0,0 +1,15 @@
+.endpoint {
+    position: absolute;
+    top: 8rem;
+    background: #fff;
+    width: 100%;
+    height: 60%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include mobile {
+        height: unset;
+        padding-top: 2rem;
+    }
+}

src/pages/endpoint/screens/Endpoint/Endpoint.tsx

@@ -0,0 +1,81 @@
+import { Controller, useForm } from 'react-hook-form';
+import { Button, Input, Text } from '@deriv-com/ui';
+import { LocalStorageConstants, LocalStorageUtils } from '@deriv-com/utils';
+import './Endpoint.scss';
+
+const Endpoint = () => {
+    const {
+        control,
+        formState: { isDirty, isValid },
+        getValues,
+        handleSubmit,
+        reset,
+    } = useForm({
+        defaultValues: {
+            serverUrl: localStorage.getItem(LocalStorageConstants.configServerURL.toString()) || '',
+            appId: LocalStorageUtils.getValue(LocalStorageConstants.configAppId) || '',
+        },
+        mode: 'onChange',
+    });
+
+    return (
+        <div className='endpoint flex flex-col gap-8'>
+            <Text weight='bold'>Change API endpoint</Text>
+            <form className='flex flex-col' action=''>
+                <Controller
+                    control={control}
+                    name='serverUrl'
+                    render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => (
+                        <Input
+                            label='Server'
+                            message={error?.message}
+                            onBlur={onBlur}
+                            onChange={onChange}
+                            value={value}
+                        />
+                    )}
+                    rules={{
+                        required: 'This field is required',
+                    }}
+                />
+                <Controller
+                    control={control}
+                    name='appId'
+                    render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => (
+                        <Input
+                            label='OAuth App ID'
+                            message={error?.message}
+                            onBlur={onBlur}
+                            onChange={onChange}
+                            value={value}
+                        />
+                    )}
+                    rules={{
+                        required: 'This field is required',
+                        pattern: {
+                            message: 'Please enter a valid app ID',
+                            value: /^(0|[1-9]\d*)(\.\d+)?$/,
+                        },
+                    }}
+                />
+                <Button
+                    className='w-40'
+                    disabled={!isDirty || !isValid}
+                    onClick={handleSubmit(() => {
+                        // Can't use LocalStorageUtils.setValue because it will place "" around the value
+                        localStorage.setItem(LocalStorageConstants.configServerURL, getValues('serverUrl'));
+                        localStorage.setItem(LocalStorageConstants.configAppId, getValues('appId'));
+                        reset({
+                            serverUrl: getValues('serverUrl'),
+                            appId: getValues('appId'),
+                        });
+                    })}
+                >
+                    Submit
+                </Button>
+            </form>
+        </div>
+    );
+};
+
+export default Endpoint;

src/pages/endpoint/screens/Endpoint/index.ts

@@ -0,0 +1 @@
+export { default as Endpoint } from './Endpoint';

src/pages/endpoint/screens/index.ts

@@ -0,0 +1 @@
+export * from './Endpoint';

src/routes/AppContent/index.tsx

@@ -3,13 +3,14 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { BUY_SELL_URL } from '@/constants';
 import { api } from '@/hooks';
 import { AdvertiserInfoStateProvider } from '@/providers/AdvertiserInfoStateProvider';
+import { getCurrentRoute } from '@/utils';
 import { useAuthorize } from '@deriv-com/api-hooks';
 import { Loader, Tab, Tabs } from '@deriv-com/ui';
 import Router from '../Router';
 import { routes } from '../routes-config';
 import './index.scss';
 
-const tabRoutesConfiguration = routes.filter(route => route.name !== 'Advertiser');
+const tabRoutesConfiguration = routes.filter(route => route.name !== 'Advertiser' && route.name !== 'Endpoint');
 
 const AppContent = () => {
     const history = useHistory();
@@ -26,6 +27,7 @@ const AppContent = () => {
     const [hasCreatedAdvertiser, setHasCreatedAdvertiser] = useState(false);
     const { subscribe: subscribeP2PSettings } = api.settings.useSettings();
     const { error, isIdle, isLoading, isSubscribed, subscribe: subscribeAdvertiserInfo } = api.advertiser.useGetInfo();
+    const isEndpointRoute = getCurrentRoute() === 'endpoint';
 
     useEffect(() => {
         if (activeAccountData) {
@@ -51,10 +53,13 @@ const AppContent = () => {
         setActiveTab(getActiveTab(location.pathname));
     }, [location]);
 
-    if (isLoadingActiveAccount || !activeAccountData) return <Loader />;
+    if ((isLoadingActiveAccount || !activeAccountData) && !isEndpointRoute) {
+        return <Loader />;
+    }
 
     // NOTE: Replace this with P2PBlocked component later and a custom hook useIsP2PEnabled, P2P is only available for USD accounts
-    if (activeAccountData?.currency !== 'USD') return <h1>P2P is only available for USD accounts.</h1>;
+    if (activeAccountData?.currency !== 'USD' && !isEndpointRoute)
+        return <h1>P2P is only available for USD accounts.</h1>;
 
     return (
         <AdvertiserInfoStateProvider

src/routes/routes-config.ts

@@ -12,6 +12,7 @@ const CreateEditAd = lazy(() =>
 );
 const MyProfile = lazy(() => import('@/pages/my-profile').then(module => ({ default: module.MyProfile })));
 const Advertiser = lazy(() => import('@/pages/advertiser').then(module => ({ default: module.Advertiser })));
+const Endpoint = lazy(() => import('@/pages/endpoint').then(module => ({ default: module.Endpoint })));
 
 export const routes = [
     {
@@ -51,4 +52,9 @@ export const routes = [
         name: 'Advertiser',
         path: `${ADVERTISER_URL}/:advertiserId`,
     },
+    {
+        component: Endpoint,
+        name: 'Endpoint',
+        path: '/endpoint',
+    },
 ];