Browser page

apps/desktop/src/app/App.tsx

@@ -14,6 +14,7 @@ import MemoryScroll from '@tonkeeper/uikit/dist/components/MemoryScroll';
 import QrScanner from '@tonkeeper/uikit/dist/components/QrScanner';
 import {
     ActivitySkeletonPage,
+    BrowserSkeletonPage,
     CoinSkeletonPage,
     HomeSkeleton,
     SettingsSkeletonPage
@@ -46,6 +47,7 @@ import { UnlockNotification } from '@tonkeeper/uikit/dist/pages/home/UnlockNotif
 import ImportRouter from '@tonkeeper/uikit/dist/pages/import';
 import Initialize, { InitializeContainer } from '@tonkeeper/uikit/dist/pages/import/Initialize';
 import Settings from '@tonkeeper/uikit/dist/pages/settings';
+import Browser from '@tonkeeper/uikit/dist/pages/browser';
 import { UserThemeProvider } from '@tonkeeper/uikit/dist/providers/UserThemeProvider';
 import { useAccountState } from '@tonkeeper/uikit/dist/state/account';
 import { useAuthState } from '@tonkeeper/uikit/dist/state/password';
@@ -71,6 +73,7 @@ const queryClient = new QueryClient({
 });
 
 const sdk = new DesktopAppSdk();
+const TARGET_ENV = 'desktop';
 
 const langs = 'en,zh_CN,ru,it,tr';
 const listOfAuth: AuthState['kind'][] = ['keychain'];
@@ -133,7 +136,12 @@ export const Loader: FC = () => {
     const { data: account } = useAccountState();
     const { data: auth } = useAuthState();
 
-    const tonendpoint = useTonendpoint(sdk.version, activeWallet?.network, activeWallet?.lang);
+    const tonendpoint = useTonendpoint(
+        TARGET_ENV,
+        sdk.version,
+        activeWallet?.network,
+        activeWallet?.lang
+    );
     const { data: config } = useTonenpointConfig(tonendpoint);
 
     const navigate = useNavigate();
@@ -239,6 +247,14 @@ export const Content: FC<{
                             </Suspense>
                         }
                     />
+                    <Route
+                        path={any(AppRoute.browser)}
+                        element={
+                            <Suspense fallback={<BrowserSkeletonPage />}>
+                                <Browser />
+                            </Suspense>
+                        }
+                    />
                     <Route
                         path={any(AppRoute.settings)}
                         element={

apps/extension/src/App.tsx

@@ -11,7 +11,7 @@ import { GlobalListStyle } from '@tonkeeper/uikit/dist/components/List';
 import { Loading } from '@tonkeeper/uikit/dist/components/Loading';
 import MemoryScroll from '@tonkeeper/uikit/dist/components/MemoryScroll';
 import {
-    ActivitySkeletonPage,
+    ActivitySkeletonPage, BrowserSkeletonPage,
     CoinSkeletonPage,
     HomeSkeleton,
     SettingsSkeletonPage
@@ -56,6 +56,7 @@ import { useAnalytics, useAppWidth } from './libs/hoolks';
 
 const ImportRouter = React.lazy(() => import('@tonkeeper/uikit/dist/pages/import'));
 const Settings = React.lazy(() => import('@tonkeeper/uikit/dist/pages/settings'));
+const Browser = React.lazy(() => import('@tonkeeper/uikit/dist/pages/browser'));
 const Activity = React.lazy(() => import('@tonkeeper/uikit/dist/pages/activity/Activity'));
 const Home = React.lazy(() => import('@tonkeeper/uikit/dist/pages/home/Home'));
 const Coin = React.lazy(() => import('@tonkeeper/uikit/dist/pages/coin/Coin'));
@@ -81,6 +82,7 @@ const queryClient = new QueryClient({
 });
 
 const sdk = new ExtensionAppSdk();
+const TARGET_ENV = 'extension';
 connectToBackground();
 
 export const App: FC = () => {
@@ -165,6 +167,7 @@ export const Loader: FC = React.memo(() => {
     const { data: account } = useAccountState();
     const { data: auth } = useAuthState();
     const tonendpoint = useTonendpoint(
+        TARGET_ENV,
         sdk.version,
         activeWallet?.network,
         localizationFrom(browser.i18n.getUILanguage())
@@ -282,6 +285,14 @@ export const Content: FC<{
                             </Suspense>
                         }
                     />
+                    <Route
+                        path={any(AppRoute.browser)}
+                        element={
+                            <Suspense fallback={<BrowserSkeletonPage />}>
+                                <Browser />
+                            </Suspense>
+                        }
+                    />
                     <Route
                         path={any(AppRoute.settings)}
                         element={

apps/twa/src/App.tsx

@@ -11,7 +11,7 @@ import { GlobalListStyle } from '@tonkeeper/uikit/dist/components/List';
 import { Loading } from '@tonkeeper/uikit/dist/components/Loading';
 import MemoryScroll from '@tonkeeper/uikit/dist/components/MemoryScroll';
 import {
-    ActivitySkeletonPage,
+    ActivitySkeletonPage, BrowserSkeletonPage,
     CoinSkeletonPage,
     HomeSkeleton,
     SettingsSkeletonPage
@@ -60,6 +60,7 @@ import { useAnalytics, useTwaAppViewport } from './libs/hooks';
 
 const Initialize = React.lazy(() => import('@tonkeeper/uikit/dist/pages/import/Initialize'));
 const ImportRouter = React.lazy(() => import('@tonkeeper/uikit/dist/pages/import'));
+const Browser = React.lazy(() => import('@tonkeeper/uikit/dist/pages/browser'));
 const Settings = React.lazy(() => import('@tonkeeper/uikit/dist/pages/settings'));
 const Activity = React.lazy(() => import('@tonkeeper/uikit/dist/pages/activity/Activity'));
 const Home = React.lazy(() => import('@tonkeeper/uikit/dist/pages/home/Home'));
@@ -77,6 +78,8 @@ const queryClient = new QueryClient({
     }
 });
 
+const TARGET_ENV = 'twa';
+
 export const App = () => {
     return (
         <StandardErrorBoundary>
@@ -211,7 +214,7 @@ export const Loader: FC<{ sdk: IAppSdk }> = ({ sdk }) => {
     const { data: account } = useAccountState();
     const { data: auth } = useAuthState();
 
-    const tonendpoint = useTonendpoint(sdk.version, activeWallet?.network, activeWallet?.lang);
+    const tonendpoint = useTonendpoint(TARGET_ENV, sdk.version, activeWallet?.network, activeWallet?.lang);
     const { data: config } = useTonenpointConfig(tonendpoint);
 
     const navigate = useNavigate();
@@ -350,6 +353,14 @@ const MainPages: FC<{ showQrScan: boolean }> = ({ showQrScan }) => {
                             </Suspense>
                         }
                     />
+                    <Route
+                        path={any(AppRoute.browser)}
+                        element={
+                            <Suspense fallback={<BrowserSkeletonPage />}>
+                                <Browser />
+                            </Suspense>
+                        }
+                    />
                     <Route
                         path={any(AppRoute.settings)}
                         element={

apps/web/index.html

@@ -39,12 +39,12 @@
       window.Buffer = Buffer;
 
       import process from "process";
-      window.process = process; 
+      window.process = process;
     </script>
   </head>
   <body style="background:#10161F;margin: 0;" class="top bottom">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>

apps/web/src/App.tsx

@@ -12,6 +12,7 @@ import { Loading } from '@tonkeeper/uikit/dist/components/Loading';
 import MemoryScroll from '@tonkeeper/uikit/dist/components/MemoryScroll';
 import {
     ActivitySkeletonPage,
+    BrowserSkeletonPage,
     CoinSkeletonPage,
     HomeSkeleton,
     SettingsSkeletonPage
@@ -51,6 +52,7 @@ import { useAnalytics, useAppHeight, useAppWidth } from './libs/hooks';
 
 const ImportRouter = React.lazy(() => import('@tonkeeper/uikit/dist/pages/import'));
 const Settings = React.lazy(() => import('@tonkeeper/uikit/dist/pages/settings'));
+const Browser = React.lazy(() => import('@tonkeeper/uikit/dist/pages/browser'));
 const Activity = React.lazy(() => import('@tonkeeper/uikit/dist/pages/activity/Activity'));
 const Home = React.lazy(() => import('@tonkeeper/uikit/dist/pages/home/Home'));
 const Coin = React.lazy(() => import('@tonkeeper/uikit/dist/pages/coin/Coin'));
@@ -81,6 +83,7 @@ const queryClient = new QueryClient({
 });
 
 const sdk = new BrowserAppSdk();
+const TARGET_ENV = 'web';
 
 export const App: FC<PropsWithChildren> = () => {
     const { t, i18n } = useTranslation();
@@ -170,7 +173,7 @@ export const Loader: FC = () => {
     const { data: account } = useAccountState();
     const { data: auth } = useAuthState();
 
-    const tonendpoint = useTonendpoint(sdk.version, activeWallet?.network, activeWallet?.lang);
+    const tonendpoint = useTonendpoint(TARGET_ENV, sdk.version, activeWallet?.network, activeWallet?.lang);
     const { data: config } = useTonenpointConfig(tonendpoint);
 
     const navigate = useNavigate();
@@ -276,6 +279,14 @@ export const Content: FC<{
                             </Suspense>
                         }
                     />
+                    <Route
+                        path={any(AppRoute.browser)}
+                        element={
+                            <Suspense fallback={<BrowserSkeletonPage />}>
+                                <Browser />
+                            </Suspense>
+                        }
+                    />
                     <Route
                         path={any(AppRoute.settings)}
                         element={

apps/web/tsconfig.json

@@ -7,7 +7,8 @@
         "skipLibCheck": true,
 
         /* Bundler mode */
-        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true,
+        "moduleResolution": "node",
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,

apps/web/tsconfig.node.json

@@ -3,7 +3,7 @@
         "composite": true,
         "skipLibCheck": true,
         "module": "ESNext",
-        "moduleResolution": "bundler",
+        "moduleResolution": "node",
         "allowSyntheticDefaultImports": true
     },
     "include": ["vite.config.ts"]

packages/core/src/AppSdk.ts

@@ -103,6 +103,7 @@ export abstract class BaseApp implements IAppSdk {
     uiEvents = new EventEmitter();
 
     constructor(public storage: IStorage) {}
+
     nativeBackButton?: NativeBackButton | undefined;
 
     topMessage = (text?: string) => {
@@ -136,7 +137,9 @@ export abstract class BaseApp implements IAppSdk {
     isStandalone = () => false;
 
     confirm = async (text: string) => window.confirm(text);
+
     alert = async (text: string) => window.alert(text);
+
     prompt = async (message: string, defaultValue?: string) => window.prompt(message, defaultValue);
 
     requestExtensionPermission = async () => {};
@@ -153,3 +156,5 @@ export class MockAppSdk extends BaseApp {
         super(new MemoryStorage());
     }
 }
+
+export type TargetEnv = 'web' | 'extension' | 'desktop' | 'twa';