Feature/twa

__mocks__/react-markdown.ts

@@ -0,0 +1 @@
+export {}

babel.config.json

@@ -0,0 +1,7 @@
+{
+"presets": [
+     "@babel/env",
+     ["@babel/preset-react", { "runtime": "automatic" }],
+     "@babel/preset-typescript"
+   ]
+}

jest-setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

jest.config.ts

@@ -0,0 +1,17 @@
+// jest.config.js
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  testTimeout: 300_000,
+  transform: {
+    "^.+\\.(ts|tsx)?$": "ts-jest",
+    "^.+\\.(js|jsx)$": "babel-jest",
+  },
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest-setup.ts"],
+  moduleDirectories: ["node_modules", "src"],
+  moduleNameMapper: {
+    "react-markdown": "<rootDir>/__mocks__/react-markdown.ts",
+    "@tonconnect/ui-react": "<rootDir>/__mocks__/react-markdown.ts",
+  },
+};

package.json

@@ -9,7 +9,8 @@
     "force-dev": "VITE_STAGING=1 vite --force",
     "force-prod": "vite --force",
     "build": "tsc && vite build && cp dist/index.html dist/404.html",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest --testMatch='**/*.test.tsx'"
   },
   "dependencies": {
     "@emotion/react": "^11.10.5",
@@ -21,6 +22,7 @@
     "@tanstack/react-query": "^4.23.0",
     "@tanstack/react-query-devtools": "^4.23.0",
     "@tonconnect/ui-react": "^1.0.0-beta.6",
+    "@twa-dev/sdk": "^6.7.1",
     "async-retry": "^1.3.3",
     "axios": "^1.3.2",
     "axios-retry": "^3.5.0",
@@ -61,7 +63,7 @@
     "react-router-dom": "^6.8.2",
     "react-share": "^4.4.1",
     "react-text-overflow": "^1.0.2",
-    "react-virtualized-auto-sizer": "^1.0.7",
+    "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.8",
     "remove-markdown": "^0.5.0",
     "ton": "^13.4.1",
@@ -73,8 +75,14 @@
     "zustand": "^4.3.2"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.11",
+    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/async-retry": "^1.4.5",
     "@types/draft-js": "^0.11.10",
+    "@types/jest": "^29.5.4",
     "@types/lodash": "^4.14.191",
     "@types/node": "^20.3.1",
     "@types/react": "^18.0.26",
@@ -86,7 +94,11 @@
     "@types/react-window": "^1.8.5",
     "@types/remove-markdown": "^0.3.1",
     "@vitejs/plugin-react": "^3.1.0",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
     "ton-crypto": "^3.2.0",
+    "ts-jest": "^29.1.1",
+    "ts-node": "^10.9.1",
     "typescript": "^4.9.3",
     "vite": "^4.0.0",
     "vite-tsconfig-paths": "^4.0.8"

src/App.tsx

@@ -1,21 +1,21 @@
-import { GlobalStyles, ThemeProvider } from "@mui/material";
+import { GlobalStyles, styled, ThemeProvider } from "@mui/material";
 import { APP_NAME } from "config";
 import { useAppSettings } from "hooks/hooks";
 import { Suspense, useEffect, useMemo } from "react";
 import { Helmet } from "react-helmet";
 import { RouterProvider } from "react-router-dom";
-import { getGlobalStyles } from "styles";
-import { useRouter } from "router/router";
+import { getGlobalStyles, StyledFlexColumn } from "styles";
 import "styles";
 import { darkTheme, lightTheme, useInitThemeMode } from "theme";
+import { useWalletListener } from "analytics";
+import { Webapp } from "WebApp";
+import { router } from "router";
+
+Webapp.init();
 
 const useInitApp = () => {
   useInitThemeMode();
-};
-
-function App() {
-  useInitApp();
-
+  useWalletListener();
   useEffect(() => {
     const loader = document.querySelector(".app-loader");
     if (loader) {
@@ -26,16 +26,24 @@ function App() {
     }
   }, []);
 
+  useEffect(() => {
+    if (Webapp.redirectUrl) {
+      window.location.href = Webapp.redirectUrl;
+    }
+  }, []);
+};
+
+const useTheme = () => {
   const { isDarkMode } = useAppSettings();
-  const router = useRouter();
+  return useMemo(() => (isDarkMode ? darkTheme : lightTheme), [isDarkMode]);
+};
 
-  const theme = useMemo(
-    () => (isDarkMode ? darkTheme : lightTheme),
-    [isDarkMode]
-  );
+function App() {
+  useInitApp();
+  const theme = useTheme();
 
   return (
-    <>
+    <StyledApp>
       <Helmet>
         <title>{APP_NAME}</title>
       </Helmet>
@@ -45,8 +53,12 @@ function App() {
           <RouterProvider router={router} />
         </Suspense>
       </ThemeProvider>
-    </>
+    </StyledApp>
   );
 }
 
 export default App;
+
+const StyledApp = styled(StyledFlexColumn)({
+  minHeight: "100dvh",
+});

src/WebApp.tsx

@@ -0,0 +1,141 @@
+import {
+  useIsConnectionRestored,
+  useTonAddress,
+  useTonConnectUI,
+  useTonWallet,
+} from "@tonconnect/ui-react";
+import TWA from "@twa-dev/sdk";
+import { MainButton } from "@twa-dev/sdk/react";
+import { Back } from "components";
+import { useAppNavigation } from "router/navigation";
+import { Dao } from "types";
+import { parseLanguage } from "utils";
+
+const isEnabled =
+  !!TWA.initData || !!new URLSearchParams(window.location.search).get("webapp");
+
+const hapticFeedback = (
+  type?: "light" | "medium" | "heavy" | "rigid" | "soft"
+) => {
+  if (isEnabled) {
+    TWA.HapticFeedback.impactOccurred(type || "medium");
+  }
+};
+
+const mainButton = TWA.MainButton;
+
+const isExpanded = () => TWA.isExpanded;
+
+const expand = () => TWA.expand();
+
+const enableClosingConfirmation = () => TWA.enableClosingConfirmation();
+const init = () => {
+  // enableClosingConfirmation();
+  expand();
+  TWA.ready();
+};
+
+const onDaoSelect = (dao: Dao) => {
+  TWA.sendData(
+    JSON.stringify({
+      name: parseLanguage(dao.daoMetadata.metadataArgs.name),
+      address: dao.daoAddress,
+      groupId: new URLSearchParams(window.location.search).get("groupId"),
+    })
+  );
+};
+
+
+
+const BackBtn = ({ onClick }: { onClick?: () => void }) => {
+  if (!Webapp.isEnabled) return null;
+
+  return <Back back={onClick} />;
+};
+
+const getRedirectUrl = () => {
+  const paramKeys = {
+    dao: '_dao_',
+    proposal: '_proposal_',
+    separator: '-_-',
+  };
+  let daoAddress: string | null = null;
+  let proposalAddress: string | null = null;
+  const webAppParams = new URLSearchParams(window.location.search).get("tgWebAppStartParam")
+  webAppParams?.split(paramKeys.separator).forEach((param) => {
+    if (param.includes(paramKeys.dao)) {
+      daoAddress = param.split(paramKeys.dao)[1];
+    } else if (param.includes(paramKeys.proposal)) {
+      proposalAddress = param.split(paramKeys.proposal)[1];
+    }
+  });
+
+  let redirectUrl: string | null = null;
+
+  if (daoAddress) {
+    redirectUrl = `/${daoAddress}`;
+    if (proposalAddress) {
+      redirectUrl += `/proposal/${proposalAddress}`;
+    }
+  }
+
+  console.log('redirectUrl', redirectUrl)
+
+  return redirectUrl;
+}
+
+
+export const Webapp = {
+  hapticFeedback,
+  isExpanded,
+  isEnabled,
+  expand,
+  enableClosingConfirmation,
+  isDarkMode: TWA.colorScheme === "dark",
+  init,
+  onDaoSelect,
+  mainButton,
+  viewPortHeight: TWA.viewportHeight,
+  BackBtn,
+  redirectUrl: getRedirectUrl()
+};
+
+export const WebappConnectWalletButton = () => {
+  const address = useTonAddress();
+  const [tonConnect] = useTonConnectUI();
+  const values = useTonWallet();
+
+  if (address) return null;
+  return (
+    <MainButton
+      text={"Connect wallet"}
+      onClick={() => tonConnect.connectWallet()}
+    />
+  );
+};
+
+export function WebappButton({
+  onClick,
+  text,
+  progress,
+  disabled,
+}: {
+  onClick: () => void;
+  text?: string;
+  progress?: boolean;
+  disabled?: boolean;
+}) {
+  const address = useTonAddress();
+  const connectionRestored = useIsConnectionRestored();
+
+  if (!address || !connectionRestored) return null;
+
+  return (
+    <MainButton
+      disabled={disabled}
+      text={text || ""}
+      onClick={onClick}
+      progress={progress}
+    />
+  );
+}