feat(vk-ui): rewrite it to ready for vkui@6 (VKCOM/VKUI#5049)

package.json

@@ -19,6 +19,7 @@
     "@protobuf-ts/plugin": "^2.9.1",
     "@vkontakte/icons": "^2.80.0",
     "@vkontakte/vk-bridge": "^2.12.2",
+    "@vkontakte/vk-bridge-react": "^1.0.1",
     "@vkontakte/vk-mini-apps-router": "^1.3.0",
     "@vkontakte/vk-miniapps-deploy": "^0.1.6",
     "@vkontakte/vkui": "^5.9.6",

src/panels/Games/History/History.tsx

@@ -135,6 +135,7 @@ export const HistoryGame = ({ id }: IPanelProps) => {
         const progressPercent = ((time || 0) * 100) / 15
 
         const ready = () => {
+            if (meWriteValue.length === 0) return
             GamesEffects.History.setIsReady()
 
             send("sendText", { text: meWriteValue })

src/shared/utils/index.ts

@@ -1,5 +1,5 @@
 export * from "./declOfNum"
 export * from "./downloadFile"
-export * from "./getNamedWindowWidth"
 export * from "./readableDate"
+export * from "./transformVKBridgeAdaptivity"
 export * from "./useWebsocket"

src/shared/utils/transformVKBridgeAdaptivity.ts

@@ -0,0 +1,42 @@
+import type { UseAdaptivity } from "@vkontakte/vk-bridge-react"
+import {
+    type AdaptivityProps,
+    getViewHeightByViewportHeight,
+    getViewWidthByViewportWidth,
+    SizeType,
+    ViewWidth,
+} from "@vkontakte/vkui"
+
+/**
+ * Требуется конвертировать данные из VK Bridge в те, что принимает AdaptivityProvider из VKUI.
+ *
+ * [source](https://vkcom.github.io/VKUI/#/integrations-vk-mini-apps)
+ */
+export const transformVKBridgeAdaptivity = ({
+    type,
+    viewportWidth,
+    viewportHeight,
+}: UseAdaptivity): AdaptivityProps => {
+    switch (type) {
+        case "adaptive":
+            return {
+                viewWidth: getViewWidthByViewportWidth(viewportWidth),
+                viewHeight: getViewHeightByViewportHeight(viewportHeight),
+            }
+        case "force_mobile":
+        case "force_mobile_compact":
+            return {
+                viewWidth: ViewWidth.MOBILE,
+                sizeX: SizeType.COMPACT,
+                sizeY:
+                    type === "force_mobile_compact"
+                        ? SizeType.COMPACT
+                        : SizeType.REGULAR,
+            }
+        default:
+            return {
+                viewWidth: getViewWidthByViewportWidth(viewportWidth),
+                viewHeight: getViewHeightByViewportHeight(viewportHeight),
+            }
+    }
+}

src/views/App.tsx

@@ -1,35 +1,33 @@
-import { getNamedWindowWidth, getUser, getVkUser, router } from "@shared"
+import { router, transformVKBridgeAdaptivity } from "@shared"
+import bridge, {
+    parseURLSearchParamsForGetLaunchParams,
+} from "@vkontakte/vk-bridge"
+import {
+    useAdaptivity,
+    useAppearance,
+    useInsets,
+} from "@vkontakte/vk-bridge-react"
 import { RouterProvider } from "@vkontakte/vk-mini-apps-router"
 import { AdaptivityProvider, AppRoot, ConfigProvider } from "@vkontakte/vkui"
-import { useCallback, useEffect, useState } from "react"
 import { Epic } from "./Epic"
 
 export const App = () => {
-    const [windowWidth, setWindowWidth] = useState(
-        getNamedWindowWidth(window.innerWidth),
+    const vkBridgeAppearance = useAppearance()!
+    const vkBridgeAdaptivityProps = transformVKBridgeAdaptivity(useAdaptivity())
+    const vkBridgeInsets = useInsets()!
+    const { vk_platform } = parseURLSearchParamsForGetLaunchParams(
+        window.location.search,
     )
 
-    const handleWindowResize = useCallback(() => {
-        setWindowWidth(getNamedWindowWidth(window.innerWidth))
-    }, [])
-
-    useEffect(() => {
-        getUser()
-        getVkUser()
-    }, [])
-
-    useEffect(() => {
-        window.addEventListener("resize", handleWindowResize)
-
-        return () => {
-            window.removeEventListener("resize", handleWindowResize)
-        }
-    }, [handleWindowResize])
-
     return (
-        <ConfigProvider>
-            <AdaptivityProvider viewWidth={windowWidth}>
-                <AppRoot>
+        <ConfigProvider
+            appearance={vkBridgeAppearance}
+            platform={vk_platform === "desktop_web" ? "vkcom" : undefined}
+            isWebView={bridge.isWebView()}
+            hasCustomPanelHeaderAfter={true}
+        >
+            <AdaptivityProvider {...vkBridgeAdaptivityProps}>
+                <AppRoot mode="full" safeAreaInsets={vkBridgeInsets}>
                     <RouterProvider
                         router={router}
                         notFound={<p>Ничегошеньки!</p>}

src/views/Epic.tsx

@@ -13,6 +13,10 @@ import {
     Icon28PollSquareOutline,
     Icon28UserCardOutline,
 } from "@vkontakte/icons"
+import {
+    EGetLaunchParamsResponsePlatforms,
+    parseURLSearchParamsForGetLaunchParams,
+} from "@vkontakte/vk-bridge"
 import {
     useActiveVkuiLocation,
     useRouteNavigator,
@@ -26,14 +30,12 @@ import {
     Group,
     Panel,
     PanelHeader,
-    Platform,
     ScreenSpinner,
     SplitCol,
     SplitLayout,
     Tabbar,
     TabbarItem,
     useAdaptivityConditionalRender,
-    usePlatform,
 } from "@vkontakte/vkui"
 import { useUnit } from "effector-react"
 import { ReactNode, useEffect, useState } from "react"
@@ -49,7 +51,9 @@ import {
 } from "../panels"
 
 export const Epic = () => {
-    const platform = usePlatform()
+    const { vk_platform } = parseURLSearchParamsForGetLaunchParams(
+        window.location.search,
+    )
     const { panel: activePanel, modal: activeModal } = useActiveVkuiLocation()
     const navigator = useRouteNavigator()
     const location = useLocation()
@@ -59,6 +63,7 @@ export const Epic = () => {
     const epicIsShowed = useUnit($epicIsShowed)
 
     const { viewWidth } = useAdaptivityConditionalRender()
+
     const activeStoryStyles = {
         backgroundColor: "var(--vkui--color_background_secondary)",
         borderRadius: 8,
@@ -72,7 +77,8 @@ export const Epic = () => {
             .then(() => console.log(`change tab to ${panel.path}`))
     }
 
-    const hasHeader = platform !== Platform.VKCOM
+    const hasHeader =
+        vk_platform! !== EGetLaunchParamsResponsePlatforms.DESKTOP_WEB
 
     const checkTabIsActive = (view: ViewConfig<string>) => {
         return view