Bugfix/tonconnect-transactions

package.json

@@ -16,6 +16,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "@tonconnect/sdk": "^2.0.7",
     "@types/jest": "^27.4.1",
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.41",
@@ -41,7 +42,6 @@
     "react-ga4": "^1.4.1",
     "react-i18next": "^11.18.3",
     "react-number-format": "^4.9.1",
-    "react-qr-code": "^2.0.7",
     "react-qrcode-logo": "^2.8.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.2.2",

public/tonswap-manifest.json

@@ -0,0 +1,5 @@
+{
+  "name": "The first decentralized AMM on The Open Network",
+  "url": "https://tonswap.org",
+  "iconUrl": "https://tonswap.org/logo192.png"
+}

src/App.tsx

@@ -1,18 +1,23 @@
-import { Box } from "@mui/material";
+import { Box, Typography } from '@mui/material'
 import AppRoutes from "router/Router";
 import { Navbar } from "components";
 import { LAYOUT_MAX_WIDTH } from "consts";
 import { styled } from "@mui/system";
 import SelectWallet from "components/SelectWallet";
-import { useWalletActions } from "store/wallet/hooks";
+import { useSelectedAdapter, useWalletActions, useWalletStore } from 'store/wallet/hooks'
 import { AppGrid } from "styles/styles";
-import useEffectOnce from "hooks/useEffectOnce";
 import { useWebAppResize } from "store/application/hooks";
 import './services/i18next/i18n';
 import { useEffect } from 'react'
-import { getHttpEndpoint } from '@orbs-network/ton-access'
 import { TonClient } from 'ton'
 import { setClienT } from 'services/api'
+import { useDispatch, useSelector } from 'react-redux'
+import { fetchTonConnectWallets } from 'store/wallet/actions'
+import { RootState } from 'store/store'
+import FullPageLoader from 'components/FullPageLoader'
+import { useTokenOperationsStore } from 'store/token-operations/hooks'
+import { isMobile } from 'react-device-detect'
+import { useTranslation } from 'react-i18next'
 
 const StyledAppContainer = styled(Box)({
   display: "flex",
@@ -32,24 +37,36 @@ const StyledRoutesContainer = styled(AppGrid)({
 });
 
 const App = () => {
-  const { restoreSession } = useWalletActions();
+  const { restoreSession, restoreAdapter } = useWalletActions();
+  const { adapterId } = useWalletStore();
+  const wallets = useSelector((state: RootState) => state.wallet.allWallets)
+  const walletsLength = wallets?.length
+  const dispatch = useDispatch<any>()
+  const { txPending } = useTokenOperationsStore();
+  const adapter = useSelectedAdapter()
+  const {t} = useTranslation()
   useWebAppResize();
 
-  useEffectOnce(() => {
-    restoreSession();
-  });
-
   useEffect(() => {
     (async () => {
       const _client = new TonClient({
         endpoint: "https://mainnet.tonhubapi.com/jsonRPC",
       });
       setClienT(_client)
     })();
+    dispatch(fetchTonConnectWallets())
+    restoreSession();
   }, [])
 
+  useEffect(() => {
+    adapterId && walletsLength && restoreAdapter(adapterId)
+  }, [walletsLength, adapterId])
+
   return (
     <>
+      <FullPageLoader open={txPending && !isMobile}>
+        <Typography>{t('pending-transaction', {adapter: adapter?.name || ''})}</Typography>
+      </FullPageLoader>
       <StyledAppContainer>
         <Navbar />
         <SelectWallet />
@@ -61,4 +78,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;

src/components/FullPageLoader.tsx

@@ -1,12 +1,8 @@
-import Backdrop from "@mui/material/Backdrop";
-import CircularProgress from "@mui/material/CircularProgress";
-import { styled, Typography } from "@mui/material";
-import { Box } from "@mui/system";
-import { ReactNode } from "react";
-import { isMobile } from "react-device-detect";
-import { Adapters } from "services/wallets/types";
-import { useWalletStore } from "store/wallet/hooks";
-import { useTranslation } from "react-i18next";
+import Backdrop from '@mui/material/Backdrop'
+import CircularProgress from '@mui/material/CircularProgress'
+import { styled } from '@mui/material'
+import { Box } from '@mui/system'
+import { ReactNode } from 'react'
 
 interface Props {
   open: boolean;
@@ -21,9 +17,6 @@ const StyledContainer = styled(Box)({
 });
 
 function FullPageLoader({ open, children }: Props) {
-  const { adapterId } = useWalletStore();
-  const { t } = useTranslation();
-  const showReminderInLoader = !isMobile && adapterId === Adapters.TON_HUB;
 
   return (
     <Backdrop
@@ -37,11 +30,6 @@ function FullPageLoader({ open, children }: Props) {
       <StyledContainer>
         <CircularProgress color="inherit" />
         {children}
-        {showReminderInLoader && (
-          <Typography>
-            {t('check-tonhub')}
-          </Typography>
-        )}
       </StyledContainer>
     </Backdrop>
   );

src/components/Navbar/LogoWithText.tsx

@@ -8,6 +8,7 @@ import { ROUTES } from "router/routes";
 import useNavigateWithParams from "hooks/useNavigateWithParams";
 import { useApplicationStore } from "store/application/hooks";
 import { OperationType } from "store/application/reducer";
+import { APP_VERSION } from 'consts'
 
 const StyledText = styled(Typography)(({ theme }) => ({
   fontSize: 18,
@@ -17,6 +18,8 @@ const StyledText = styled(Typography)(({ theme }) => ({
   },
 }));
 
+const showVersionPlug = () => (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes('netlify.app') || window.location.hostname.includes('ngrok.io')) ? APP_VERSION : ''
+
 const LogoWithText = () => {
   const classes = useStyles();
   const {  selectedToken } = useTokenOperationsStore();
@@ -45,7 +48,8 @@ const LogoWithText = () => {
     >
       <img className={classes.logo} src={TonLogo} alt="" />
       <StyledText>
-        <strong>Ton</strong>Swap
+        <strong>Ton</strong>Swap{' '}
+        <span style={{fontSize: 11}}>{showVersionPlug()}</span>
       </StyledText>
     </Box>
   );

src/components/Navbar/Menu/WalletAddress.tsx

@@ -16,6 +16,7 @@ import { useTranslation } from "react-i18next";
 import { isMobile } from "react-device-detect";
 import SelectLanguage from "./SelectLanguage";
 import { isTelegramWebApp } from "utils";
+import { disconnectTC } from 'services/wallets/adapters/TonConnectAdapter'
 
 const StyledIconButton = styled("button")({
   cursor: "pointer",
@@ -51,6 +52,7 @@ const WalletAddress = observer(() => {
 
   const onDisconnect = () => {
     resetWallet();
+    disconnectTC();
     setShowDisconnect(false);
     gaAnalytics.disconnect();
   };