Merge pull request #181 from ton-blockchain/ton-connect-btn-fix

connect button

src/components/AddSourcesBlock.tsx

@@ -11,7 +11,7 @@ import { AppButton } from "./AppButton";
 import { SECTIONS, STEPS, usePublishStore } from "../lib/usePublishSteps";
 import { CircularProgress, Fade } from "@mui/material";
 import { useTonAddress } from "@tonconnect/ui-react";
-import { StyledTonConnectButton } from "./TopBar";
+import ConnectButton from "./ConnectButton";
 
 const ContentBox = styled(Box)({
   padding: "15px 24px",
@@ -48,7 +48,7 @@ export function AddSourcesBlock() {
               {hasFiles() && (
                 <CenteringBox sx={{ justifyContent: "center" }} mt={3} mb="9px">
                   {!walletAddress ? (
-                    <StyledTonConnectButton />
+                    <ConnectButton />
                   ) : !data?.result?.msgCell ? (
                     <AppButton
                       disabled={!hasFiles()}

src/components/ConnectButton.tsx

@@ -0,0 +1,22 @@
+import { useTonConnectUI } from "@tonconnect/ui-react";
+import React from "react";
+import { AppButton } from "./AppButton";
+
+function ConnectButton() {
+  const [tonConnect] = useTonConnectUI();
+  return (
+    <AppButton
+      background="#1976d2"
+      hoverBackground="#156cc2"
+      height={37}
+      fontSize={14}
+      fontWeight={700}
+      textColor="#fff"
+      type="button"
+      onClick={() => tonConnect.connectWallet()}>
+      Connect wallet
+    </AppButton>
+  );
+}
+
+export default ConnectButton;

src/components/MobileMenu.tsx

@@ -7,7 +7,8 @@ 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, useTonAddress } from "@tonconnect/ui-react";
+import { useTonAddress } from "@tonconnect/ui-react";
+import { StyledTonConnectButton } from "../styles";
 
 interface MobileMenuProps {
   closeMenu?: () => void;
@@ -51,15 +52,3 @@ 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

@@ -19,10 +19,11 @@ 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";
+import { StyledTonConnectButton } from "../styles";
 
 export function TopBar() {
   const { pathname } = useLocation();
+
   const theme = useTheme();
   const navigate = useNavigatePreserveQuery();
   const headerSpacings = useMediaQuery(theme.breakpoints.down("lg"));
@@ -73,15 +74,3 @@ export function TopBar() {
     </TopBarWrapper>
   );
 }
-
-export const StyledTonConnectButton = styled(TonConnectButton)(({ theme }) => ({
-  button: {
-    background: theme.palette.primary.main,
-    "*": { color: "white" },
-    svg: {
-      "*": {
-        stroke: "white",
-      },
-    },
-  },
-}));

src/components/admin/Admin.tsx

@@ -4,7 +4,7 @@ import SourcesRegistry from "./SourcesRegistry";
 import { VerifierRegistry } from "./VerifierRegistry";
 import { FlexBoxRow } from "../Getters.styled";
 import { Footer } from "../Footer";
-import { StyledTonConnectButton } from "../TopBar";
+import ConnectButton from "../ConnectButton";
 
 export function Admin() {
   return (
@@ -16,7 +16,7 @@ export function Admin() {
           px: 4,
         }}>
         <h1>Admin</h1>
-        <StyledTonConnectButton />
+        <ConnectButton />
       </FlexBoxRow>
       <SourcesRegistry />
       <VerifierRegistry />

src/components/admin/ContractInteract.tsx

@@ -1,8 +1,8 @@
 import { Button, TextField } from "@mui/material";
 import { useState } from "react";
 import { Address, beginCell, Builder } from "ton";
+import ConnectButton from "../ConnectButton";
 import Spacer from "../Spacer";
-import { StyledTonConnectButton } from "../TopBar";
 
 function CellBuilder() {
   const [state, setState] = useState<{
@@ -86,7 +86,7 @@ function ContractInteract() {
         maxWidth: 1100,
         padding: 40,
       }}>
-      <StyledTonConnectButton />
+      <ConnectButton />
       <Spacer space={35} />
       <TextField required id="outlined-required" label="Contract address" fullWidth />
       <TextField required id="outlined-required" label="Value" fullWidth type={"number"} />

src/components/tactDeployer/TopBar.tsx

@@ -5,7 +5,7 @@ import { CenteringBox } from "../Common.styled";
 import { githubLink } from "../../const";
 import { TopBarContent, LinkWrapper, AppLogo, ContentColumn, GitLogo } from "../TopBar.styled";
 import { styled } from "@mui/material/styles";
-import { StyledTonConnectButton } from "../TopBar";
+import { StyledTonConnectButton } from "../../styles";
 
 interface TopBarWrapperProps {
   isMobile: boolean;

src/styles.ts

@@ -0,0 +1,14 @@
+import { styled } from "@mui/material";
+import { TonConnectButton } from "@tonconnect/ui-react";
+
+export const StyledTonConnectButton = styled(TonConnectButton)(({ theme }) => ({
+  button: {
+    background: theme.palette.primary.main,
+    "*": { color: "white" },
+    svg: {
+      "*": {
+        stroke: "white",
+      },
+    },
+  },
+}));