Revert "added ton connect ui"

package.json

@@ -14,7 +14,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "@tonconnect/ui-react": "^1.0.0-beta.6",
+    "@ton-defi.org/ton-connection": "^0.8.1",
     "@types/jest": "^27.5.1",
     "@types/node": "^16.11.36",
     "@types/react": "^18.0.9",

src/App.tsx

@@ -1,9 +1,11 @@
 import { styled } from "@mui/material";
 import { Box } from "@mui/system";
 import { createContext, useEffect } from "react";
+import useConnectionStore from "store/connection-store/useConnectionStore";
 import { APP_GRID, ROUTES } from "consts";
 import { Navigate, Outlet, Route, Routes, useLocation } from "react-router-dom";
 import { DeployerPage, Jetton } from "pages";
+import ConnectPopup from "components/connectPopup";
 import analytics from "services/analytics";
 import { Footer } from "components/footer";
 import { Header } from "components/header";
@@ -78,13 +80,18 @@ const ContentWrapper = ({ children }: ContentWrapperProps) => {
 };
 
 const App = () => {
+  const { connectOnLoad } = useConnectionStore();
   const { resetJetton } = useJettonLogo();
   const location = useLocation();
 
   useEffect(() => {
     resetJetton();
   }, [location.pathname]);
 
+  useEffect(() => {
+    connectOnLoad();
+  }, []);
+
   return (
     <AppWrapper>
       <EnvContext.Provider
@@ -113,6 +120,7 @@ const App = () => {
           </Routes>
         </ScreensWrapper>
       </EnvContext.Provider>
+      <ConnectPopup />
       <FooterBox mt={5}>
         <Footer />
       </FooterBox>

src/components/TxLoader.tsx

@@ -0,0 +1,44 @@
+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 { Providers } from "lib/env-profiles";
+import useConnectionStore from "store/connection-store/useConnectionStore";
+
+interface Props {
+  open: boolean;
+  children?: ReactNode;
+}
+
+const StyledContainer = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 10,
+});
+
+function TxLoader({ open, children }: Props) {
+  const { adapterId } = useConnectionStore();
+  const showReminderInLoader = !isMobile && adapterId === Providers.TON_HUB;
+
+  return (
+    <Backdrop
+      sx={{
+        color: "#fff",
+        zIndex: 9999999,
+      }}
+      open={open}>
+      <StyledContainer>
+        <CircularProgress color="inherit" />
+        {children}
+        {showReminderInLoader && (
+          <Typography>Please check tonhub wallet for pending notification</Typography>
+        )}
+      </StyledContainer>
+    </Backdrop>
+  );
+}
+
+export default TxLoader;

src/components/connectPopup/AdaptersList.tsx

@@ -0,0 +1,125 @@
+import { ListItem, List, ListItemButton, Box, Typography, Fade } from "@mui/material";
+import { useTheme, Theme } from "@mui/material/styles";
+import { styled } from "@mui/system";
+import TonhubImg from "assets/icons/tonhub.png";
+import ChromeExtImg from "assets/icons/chrome.svg";
+import OpenMaskImg from "assets/icons/openmask-logo.svg";
+import { Providers } from "lib/env-profiles";
+import { isMobile } from "react-device-detect";
+import Header from "./Header";
+import { useNetwork } from "../../lib/hooks/useNetwork";
+
+const StyledListItem = styled(ListItem)({
+  background: "white",
+  width: "100%",
+});
+const StyledList = styled(List)({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: 30,
+  padding: 0,
+});
+
+const StyledListItemButton = styled(ListItemButton)({
+  padding: 0,
+});
+
+const StyledIcon = styled("img")({
+  width: "40px",
+  height: "40px",
+  objectFit: "cover",
+  marginRight: "24px",
+});
+
+const StyledListItemRight = styled(Box)(({ theme }: { theme: Theme }) => ({
+  "& h5": {
+    color: theme.palette.secondary.main,
+    fontSize: "18px",
+    fontWeight: "500",
+    marginBottom: "5px",
+  },
+  "& p": {
+    color: theme.palette.secondary.main,
+    fontSize: "14px",
+    opacity: "0.7",
+  },
+}));
+
+interface Props {
+  // todo sy any
+  select: (adapter: Providers) => void;
+  open: boolean;
+  onClose: () => void;
+  adapters: { type: Providers }[];
+}
+
+const adapterConfig = {
+  [Providers.TON_HUB]: {
+    name: "Tonhub",
+    icon: TonhubImg,
+    mobileCompatible: true,
+    testnetCompatible: false, // When TC2 is available this distinction becomes obsolete
+  },
+  [Providers.TONKEEPER]: {
+    name: "Tonkeeper",
+    icon: "https://tonkeeper.com/assets/tonconnect-icon.png", // TODO
+    mobileCompatible: true,
+    testnetCompatible: true,
+  },
+
+  [Providers.EXTENSION]: {
+    name: "Google Chrome Plugin",
+    icon: ChromeExtImg,
+    mobileCompatible: false,
+    testnetCompatible: true,
+  },
+  [Providers.OPEN_MASK]: {
+    name: "OpenMask",
+    icon: OpenMaskImg,
+    mobileCompatible: false,
+    testnetCompatible: true,
+  },
+};
+
+function AdaptersList({ onClose, select, open, adapters }: Props) {
+  const theme = useTheme();
+  const { network } = useNetwork();
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Fade in>
+      <Box>
+        <Header title="Select Wallet" onClose={onClose} />
+        <StyledList>
+          {adapters
+            .filter(
+              (a) =>
+                (!isMobile || adapterConfig[a.type].mobileCompatible) &&
+                (network === "mainnet" || adapterConfig[a.type].testnetCompatible),
+            )
+            .map((adapter) => {
+              const { type } = adapter;
+              const { icon, name } = adapterConfig[type];
+
+              return (
+                <StyledListItem disablePadding key={type}>
+                  <StyledListItemButton onClick={() => select(type)}>
+                    <StyledIcon src={icon} />
+                    <StyledListItemRight theme={theme}>
+                      <Typography variant="h5">{name}</Typography>
+                    </StyledListItemRight>
+                  </StyledListItemButton>
+                </StyledListItem>
+              );
+            })}
+        </StyledList>
+      </Box>
+    </Fade>
+  );
+}
+
+export default AdaptersList;

src/components/connectPopup/ConnectQR.tsx

@@ -0,0 +1,67 @@
+import { Box } from "@mui/material";
+import { QRCodeSVG } from "qrcode.react";
+
+import Fade from "@mui/material/Fade";
+import CircularProgress from "@mui/material/CircularProgress";
+import { styled } from "@mui/system";
+import TonhubQr from "assets/icons/tonhub-qr.png";
+import Header from "./Header";
+
+const StyledContainer = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+});
+
+const StyledQrBox = styled(Box)({
+  width: 260,
+  height: 260,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+interface Props {
+  onClose: () => void;
+  link: string | null;
+  open: boolean;
+  walletName: string;
+}
+
+function QR({ onClose, link, open, walletName }: Props) {
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Fade in>
+      <StyledContainer>
+        <Header title={`Connect to ${walletName}`} onClose={onClose} />
+        <StyledQrBox>
+          {link ? (
+            <span>
+              <QRCodeSVG
+                value={link}
+                size={260}
+                bgColor={"#ffffff"}
+                fgColor={"#002457"}
+                level={"L"}
+                includeMargin={false}
+                imageSettings={{
+                  src: TonhubQr,
+                  height: 50,
+                  width: 50,
+                  excavate: true,
+                }}
+              />
+            </span>
+          ) : (
+            <CircularProgress />
+          )}
+        </StyledQrBox>
+      </StyledContainer>
+    </Fade>
+  );
+}
+
+export default QR;

src/components/connectPopup/Header.tsx

@@ -0,0 +1,48 @@
+import { Box, IconButton, styled, Typography, useTheme } from "@mui/material";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+
+const StyledContainer = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  position: "relative",
+  paddingBottom: 10,
+  marginBottom: 20,
+  width: "100%",
+  "& h4": {
+    fontSize: 18,
+    fontWeight: 400,
+  },
+});
+
+const StyledSeparator = styled(Box)(({ theme }) => ({
+  position: "absolute",
+  left: 0,
+  bottom: 0,
+  width: "100%",
+  height: 1,
+  background: theme.palette.text.primary,
+  opacity: 0.2,
+}));
+
+interface Props {
+  title: string;
+  onClose?: () => void;
+}
+
+function Header({ title, onClose }: Props) {
+  const theme = useTheme();
+  return (
+    <StyledContainer>
+      <Typography variant="h4">{title}</Typography>
+      {onClose && (
+        <IconButton onClick={onClose} sx={{ padding: 0 }}>
+          <CloseRoundedIcon style={{ color: theme.palette.text.primary }} />
+        </IconButton>
+      )}
+      <StyledSeparator />
+    </StyledContainer>
+  );
+}
+
+export default Header;