feat: migrate to @tonconnect/ui-react for improved UI management

package.json

@@ -19,7 +19,7 @@
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@tanstack/react-query": "^4.23.0",
     "@tanstack/react-query-devtools": "^4.23.0",
-    "@ton-defi.org/ton-connection": "0.8.1",
+    "@tonconnect/ui-react": "2.0.6",
     "axios": "^1.3.2",
     "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",

src/App.tsx

@@ -1,36 +1,24 @@
 import { styled } from "@mui/material";
 import { Navbar } from "components/Navbar";
-import {
-  useConnectionEvenSubscription,
-  useEmbededWallet,
-  useRestoreConnection,
-} from "connection";
-import { useEffect } from "react";
 import { StyledFlexColumn, StyledGrid } from "./styles";
 import Info from "Info";
 import { Unfreeze } from "Unfreeze/Unfreeze";
 import { Footer } from "components";
-import { Box } from "@mui/system";
+import { TonConnectUIProvider } from "@tonconnect/ui-react";
+import { manifestUrl } from "./config";
 
 function App() {
-  const restoreConnection = useRestoreConnection();
-  const handleEmbededWallet = useEmbededWallet();
-  useConnectionEvenSubscription();
-
-  useEffect(() => {
-    restoreConnection();
-    handleEmbededWallet();
-  }, []);
-
   return (
-    <StyledApp>
-      <Navbar />
-      <StyledContent>
-        <Unfreeze />
-        <Info />
-      </StyledContent>
-      <Footer />
-    </StyledApp>
+    <TonConnectUIProvider manifestUrl={manifestUrl}>
+      <StyledApp>
+        <Navbar />
+        <StyledContent>
+          <Unfreeze />
+          <Info />
+        </StyledContent>
+        <Footer />
+      </StyledApp>
+    </TonConnectUIProvider>
   );
 }
 

src/Unfreeze/Components.tsx

@@ -13,7 +13,6 @@ import {
   BsFillInfoCircleFill,
 } from "react-icons/bs";
 import { IoWarning } from "react-icons/io5";
-import { useConnectionStore } from "store";
 import { StyledFlexColumn, StyledFlexRow, textOverflow } from "../styles";
 import {
   StyledAmountInput,
@@ -24,6 +23,7 @@ import {
   StyledChangeButton,
   StyledUnfreezePopup,
 } from "./styles";
+import { useTonWallet } from "@tonconnect/ui-react";
 
 export const ExpectedStateInit = ({
   isLoading,
@@ -155,7 +155,7 @@ export const ActionButton = ({
   onSubmit: () => void;
   loading: boolean;
 }) => {
-  const { address: connectedWalletAddress } = useConnectionStore();
+  const connectedWalletAddress = useTonWallet()?.account?.address;
 
   if (!connectedWalletAddress) {
     return (

src/Unfreeze/Unfreeze.tsx

@@ -20,9 +20,9 @@ import {
   Balance,
   TotalAmount,
 } from "./Components";
-import { useConnectionStore } from "store";
 import { useSearchParams } from "react-router-dom";
 import { MonthsInput } from "./Components";
+import { useTonWallet } from "@tonconnect/ui-react";
 
 export function Unfreeze() {
   let [searchParams, setSearchParams] = useSearchParams();
@@ -44,7 +44,7 @@ export function Unfreeze() {
   }, [months, accountDetails?.pricePerMonth, accountDetails?.minAmountToSend]);
 
   const { mutate: unfreeze, isLoading: txLoading } = useUnfreezeCallback();
-  const { address: connectedWalletAddress } = useConnectionStore();
+  const connectedWalletAddress = useTonWallet()?.account?.address;
   const unfreezeBlock = modifiedUnfreezeBlock || accountDetails?.unfreezeBlock;
 
   const { data: unfreezeTxnData, isInitialLoading: unfreezeTxnDataLoading } =

src/components/ConnectButton.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Button } from "./Button";
-import { WalletSelect } from "./WalletSelect";
+import { useTonConnectModal } from "@tonconnect/ui-react";
 
 export function ConnectButton({
   text,
@@ -9,13 +9,12 @@ export function ConnectButton({
   text?: string;
   className?: string;
 }) {
-  const [open, setOpen] = useState(false);
+  const modal = useTonConnectModal();
   return (
     <>
-      <Button className={className} onClick={() => setOpen(true)}>
+      <Button className={className} onClick={() => modal.open()}>
         {text || "Connect wallet"}
       </Button>
-      <WalletSelect open={open} close={() => setOpen(false)} />
     </>
   );
 }

src/components/Navbar.tsx

@@ -1,18 +1,8 @@
-import {
-  ClickAwayListener,
-  styled,
-  Typography,
-  useMediaQuery,
-} from "@mui/material";
-import { Box } from "@mui/system";
-import { Button, ConnectButton, Github } from "components";
+import { styled, Typography, useMediaQuery } from "@mui/material";
+import { Github } from "components";
 import { StyledFlexRow, StyledGrid } from "../styles";
-import { makeElipsisAddress } from "utils";
-import { useState } from "react";
 import LogoImg from "assets/logo.svg";
-import { IoLogOutOutline } from "react-icons/io5";
-import { useResetConnection } from "connection";
-import { useConnectionStore } from "store";
+import { TonConnectButton, useTonWallet } from "@tonconnect/ui-react";
 
 export function Navbar() {
   const mobile = useMediaQuery("(max-width:600px)");
@@ -25,69 +15,14 @@ export function Navbar() {
             <Typography>Unfreezer</Typography>
           </StyledLogo>
           <StyledFlexRow style={{ width: "fit-content" }}>
-            <ConnectSection />
+            <TonConnectButton />
             {!mobile && <Github />}
           </StyledFlexRow>
         </StyledFlexRow>
       </StyledGrid>
     </StyledContainer>
   );
 }
-
-const ConnectSection = () => {
-  const address = useConnectionStore().address;
-
-  if (!address) {
-    return <ConnectButton />;
-  }
-
-  return <Connected />;
-};
-
-const Connected = () => {
-  const address = useConnectionStore().address;
-  const [showLogout, setShowLogout] = useState(false);
-  const resetConnection = useResetConnection();
-
-  const logout = () => {
-    resetConnection();
-    setShowLogout(false);
-  };
-
-  return (
-    <ClickAwayListener onClickAway={() => setShowLogout(false)}>
-      <StyledConnected>
-        <StyledConnectedButton onClick={() => setShowLogout(true)}>
-          {makeElipsisAddress(address!, 6)}
-        </StyledConnectedButton>
-        {showLogout && (
-          <StyledDisconect onClick={logout}>
-            <IoLogOutOutline />
-            <Typography>Logout</Typography>
-          </StyledDisconect>
-        )}
-      </StyledConnected>
-    </ClickAwayListener>
-  );
-};
-
-const StyledDisconect = styled(Button)({
-  position: "absolute",
-  top: "calc(100% + 10px)",
-  left: "50%",
-  transform: "translate(-50%)",
-  width: "100%",
-});
-
-const StyledConnected = styled(Box)({
-  position: "relative",
-});
-const StyledConnectedButton = styled(Button)({
-  "*": {
-    fontSize: 14,
-  },
-});
-
 const StyledLogo = styled("button")(({ theme }) => ({
   background: "transparent",
   border: "unset",