added ton connect ui

package.json

@@ -24,7 +24,7 @@
     "@tanstack/react-query": "^4.13.0",
     "@ton-community/contract-verifier-sdk": "^1.1.1",
     "@ton-community/func-js": "^0.3.0",
-    "@ton-defi.org/ton-connection": "^0.8.1",
+    "@tonconnect/ui-react": "^1.0.0-beta.6",
     "bn.js": "^5.2.1",
     "buffer": "^6.0.3",
     "file-saver": "^2.0.5",

src/App.tsx

@@ -20,7 +20,6 @@ import { NotificationTitle } from "./components/CompileOutput";
 import { VerificationInfoBlock } from "./components/VerificationInfoBlock";
 import { CenteringBox } from "./components/Common.styled";
 import { useAddressHistory } from "./lib/useAddressHistory";
-import { useWalletConnect } from "./lib/useWalletConnect";
 import { LatestVerifiedContracts } from "./components/LatestVerifiedContracts";
 import { useInitializeGetters } from "./lib/getter/useGetters";
 import { TestnetBar } from "./components/TestnetBar";
@@ -63,11 +62,6 @@ function App() {
   const headerSpacings = useMediaQuery(theme.breakpoints.down("lg"));
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
   const showSkeleton = !error && isLoading && contractAddress;
-  const { restoreConnection } = useWalletConnect();
-
-  useEffect(() => {
-    restoreConnection();
-  }, []);
 
   useAddressHistory();
   useResetState();

src/components/AddSourcesBlock.tsx

@@ -8,18 +8,18 @@ import CompilerSettings from "./CompilerSettings";
 import { CompileOutput } from "./CompileOutput";
 import { Box, styled } from "@mui/system";
 import { AppButton } from "./AppButton";
-import { useWalletConnect } from "../lib/useWalletConnect";
 import { WalletConnect } from "./WalletConnect";
 import { SECTIONS, STEPS, usePublishStore } from "../lib/usePublishSteps";
 import { CircularProgress, Fade } from "@mui/material";
 import { AppNotification, NotificationType } from "./AppNotification";
+import { useTonAddress } from "@tonconnect/ui-react";
 
 const ContentBox = styled(Box)({
   padding: "15px 24px",
 });
 
 export function AddSourcesBlock() {
-  const { walletAddress } = useWalletConnect();
+  const walletAddress = useTonAddress();
   const { hasFiles } = useFileStore();
   const { step, proceedToPublish, toggleSection, currentSection } = usePublishStore();
   const { mutate, data, error, isLoading, compileStatus } = useSubmitSources();

src/components/MobileMenu.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Drawer, IconButton } from "@mui/material";
+import { Drawer, IconButton, styled } from "@mui/material";
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import { Box } from "@mui/system";
 import { WalletConnect } from "./WalletConnect";
@@ -8,6 +8,7 @@ import github from "../assets/github-dark.svg";
 import { AppLogo, GitLogo, LinkWrapper } from "./TopBar.styled";
 import icon from "../assets/icon.svg";
 import { useNavigatePreserveQuery } from "../lib/useNavigatePreserveQuery";
+import { TonConnectButton } from "@tonconnect/ui-react";
 
 interface MobileMenuProps {
   closeMenu?: () => void;
@@ -34,9 +35,9 @@ export function MobileMenu({ closeMenu, showMenu }: MobileMenuProps) {
         <Box
           pt={2}
           sx={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center" }}>
-          <Box sx={{ width: "150px" }}>
-            <WalletConnect />
-          </Box>
+          <div style={{ maxWidth: "250px" }} onClick={closeMenu}>
+            <StyledTonConnectButton />
+          </div>
           <LinkWrapper href={githubLink} target="_blank">
             <img src={github} alt="Github icon" width={20} height={20} />
             <GitLogo>GitHub</GitLogo>
@@ -50,3 +51,15 @@ export function MobileMenu({ closeMenu, showMenu }: MobileMenuProps) {
     </Drawer>
   );
 }
+
+const StyledTonConnectButton = styled(TonConnectButton)(({ theme }) => ({
+  button: {
+    background: theme.palette.primary.main,
+    "*": { color: "white" },
+    svg: {
+      "*": {
+        stroke: "white",
+      },
+    },
+  },
+}));

src/components/TopBar.tsx

@@ -16,10 +16,11 @@ import {
   TopBarHeading,
   TopBarWrapper,
 } from "./TopBar.styled";
-import { IconButton, useMediaQuery, useTheme } from "@mui/material";
+import { IconButton, styled, useMediaQuery, useTheme } from "@mui/material";
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import { MobileMenu } from "./MobileMenu";
 import { useNavigatePreserveQuery } from "../lib/useNavigatePreserveQuery";
+import { TonConnectButton } from "@tonconnect/ui-react";
 
 export function TopBar() {
   const { pathname } = useLocation();
@@ -54,7 +55,7 @@ export function TopBar() {
           </LinkWrapper>
           <ContentColumn>
             <CenteringBox mr={2}>
-              <WalletConnect />
+              <StyledTonConnectButton />
             </CenteringBox>
             <LinkWrapper href={githubLink} target="_blank">
               <img src={github} alt="Github icon" width={20} height={20} />
@@ -73,3 +74,15 @@ export function TopBar() {
     </TopBarWrapper>
   );
 }
+
+const StyledTonConnectButton = styled(TonConnectButton)(({ theme }) => ({
+  button: {
+    background: theme.palette.primary.main,
+    "*": { color: "white" },
+    svg: {
+      "*": {
+        stroke: "white",
+      },
+    },
+  },
+}));