diff --git a/app/layout.tsx b/app/layout.tsx index 088dcc9..38a6ec8 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -4,6 +4,7 @@ import { AppProvider } from "@/contexts/app-provider"; import { CustomTonProvider } from "@/contexts/custom-ton-provider"; import { ThemeProvider } from "@/contexts/theme-context"; import { ToastProvider } from "@/contexts/toasts/context"; +import { TonProvider } from "@/contexts/ton-provider"; import "@/styles/_main.scss"; import type { Metadata } from "next"; import { IBM_Plex_Sans } from "next/font/google"; @@ -33,12 +34,14 @@ export default function RootLayout({ - + {/* */} +
{children} - + + {/* */} diff --git a/components/layout/connectButton/index.tsx b/components/layout/connectButton/index.tsx index 4bb0fb2..fcf9b4f 100644 --- a/components/layout/connectButton/index.tsx +++ b/components/layout/connectButton/index.tsx @@ -6,7 +6,6 @@ import { TonNetworkICon } from "@/assets/icons/network"; import { OraiIcon } from "@/assets/icons/token"; import Loader from "@/components/commons/loader/Loader"; import { OraichainWallet, TonNetWorkWallet } from "@/constants/wallets"; -import { useTonConnector } from "@/contexts/custom-ton-provider"; import { TToastType, displayToast } from "@/contexts/toasts/Toast"; import { keplrCheck, setStorageKey } from "@/helper"; import useOnClickOutside from "@/hooks/useOnclickOutside"; @@ -23,17 +22,17 @@ import { OraiWallet, TonWallet, } from "@/stores/authentication/useAuthenticationStore"; +import { useTokenActions } from "@/stores/token/selector"; import { - CHAIN, - WalletInfoCurrentlyEmbedded, - isWalletInfoCurrentlyEmbedded, - toUserFriendlyAddress, -} from "@tonconnect/sdk"; + useTonAddress, + useTonConnectModal, + useTonConnectUI, + useTonWallet, +} from "@tonconnect/ui-react"; import classNames from "classnames"; import { FC, useCallback, useEffect, useRef, useState } from "react"; import ConnectedInfo from "../connectedInfo"; import styles from "./index.module.scss"; -import { useTokenActions } from "@/stores/token/selector"; export type ConnectStatus = | "init" @@ -49,7 +48,6 @@ const ConnectButton: FC<{ fullWidth?: boolean }> = ({ fullWidth }) => { const tonAddress = useAuthTonAddress(); const tonWallet = useAuthTonWallet(); const ref = useRef(); - const { connector } = useTonConnector(); const { handleSetOraiAddress, handleSetOraiWallet, @@ -65,6 +63,11 @@ const ConnectButton: FC<{ fullWidth?: boolean }> = ({ fullWidth }) => { const [open, setOpen] = useState(false); const [step, setStep] = useState(oraiAddress ? 2 : 1); + const userFriendlyAddress = useTonAddress(); + const wallet = useTonWallet(); + const { open: openConnect } = useTonConnectModal(); + const [tonConnectUI] = useTonConnectUI(); + useOnClickOutside(ref, () => setOpen(false)); const handleConnectWalletInOraichainNetwork = async ( @@ -102,13 +105,7 @@ const ConnectButton: FC<{ fullWidth?: boolean }> = ({ fullWidth }) => { const handleConnectWalletInTonNetwork = async (walletType: TonWallet) => { try { setConnectStatus(walletType); - - const _walletsList = await connector.getWallets(); // or use `walletsList` fetched before - - const _addressConnected = connector.connect({ - jsBridgeKey: walletType || "tonkeeper", - }); - console.log("addressConnected", connector.account); + openConnect(); return; } catch (error) { @@ -123,21 +120,19 @@ const ConnectButton: FC<{ fullWidth?: boolean }> = ({ fullWidth }) => { handleSetOraiAddress({ oraiAddress: undefined }); handleSetOraiWallet({ oraiWallet: undefined }); handleResetAmountsCache(); - handleResetTonAmountsCache(); } }; const handleDisconnectTon = async (walletType: TonWallet) => { try { - if (connector.connected) { - await connector.disconnect(); + if (tonConnectUI.connected) { + await tonConnectUI.disconnect(); } if (tonAddress && walletType === tonWallet) { handleSetTonAddress({ tonAddress: undefined }); handleSetTonWallet({ tonWallet: undefined }); handleResetTonAmountsCache(); - handleResetAmountsCache(); } } catch (error) { console.log("error disconnect TON :>>", error); @@ -145,37 +140,20 @@ const ConnectButton: FC<{ fullWidth?: boolean }> = ({ fullWidth }) => { }; useEffect(() => { - connector.onStatusChange( - (wallet) => { - console.log("wallet", wallet); - if (!wallet) { - if (tonAddress) { - handleSetTonAddress({ tonAddress: undefined }); - handleSetTonWallet({ tonWallet: undefined }); - } - return; - } - - const address = toUserFriendlyAddress( - wallet.account?.address, - wallet.account.chain === CHAIN.TESTNET - ); - const walletType = wallet?.device?.appName?.toLowerCase() as TonWallet; - - handleSetTonAddress({ tonAddress: address }); - handleSetTonWallet({ tonWallet: walletType }); - }, - (err) => { - console.log("error onStatusChange :>>", err); - } - ); - }, [tonAddress]); - - useEffect(() => { - if (tonAddress && tonWallet) { - handleConnectWalletInTonNetwork(tonWallet || TonWallet.TonKeeper); + if (!(userFriendlyAddress && wallet)) { + handleSetTonAddress({ tonAddress: undefined }); + handleSetTonWallet({ tonWallet: undefined }); + return; } - }, [tonAddress, tonWallet]); + console.log("userFriendlyAddress", userFriendlyAddress, wallet); + + handleSetTonAddress({ tonAddress: userFriendlyAddress }); + handleSetTonWallet({ + tonWallet: + wallet?.["appName"] || + (wallet?.device?.appName?.toLowerCase() as TonWallet), + }); + }, [userFriendlyAddress, wallet]); // @ts-ignore const isCheckOwallet = diff --git a/components/page/bridge/index.tsx b/components/page/bridge/index.tsx index 02f2cfe..ea8adea 100644 --- a/components/page/bridge/index.tsx +++ b/components/page/bridge/index.tsx @@ -18,7 +18,6 @@ import { TokenType, TonTokenList, } from "@/constants/tokens"; -import { useTonConnector } from "@/contexts/custom-ton-provider"; import { TToastType, displayToast } from "@/contexts/toasts/Toast"; import { getTransactionUrl, handleErrorTransaction } from "@/helper"; import { useLoadToken, useLoadTonBalance } from "@/hooks/useLoadToken"; @@ -64,11 +63,12 @@ import { BRIDGE_TON_TO_ORAI_MINIMUM_GAS, } from "./constants"; import { getMixPanelClient } from "@/libs/mixpanel"; +import { useTonConnectUI } from "@tonconnect/ui-react"; const Bridge = () => { const oraiAddress = useAuthOraiAddress(); const tonAddress = useAuthTonAddress(); - const { connector } = useTonConnector(); + const [tonConnectUI] = useTonConnectUI(); const [txtSearch, setTxtSearch] = useState(); const tonNetwork = TonNetwork.Mainnet; @@ -309,7 +309,7 @@ const Bridge = () => { ? getNativeBridgePayload() : getOtherBridgeTokenPayload(); - const tx = await connector.sendTransaction({ + const tx = await tonConnectUI.sendTransaction({ validUntil: TON_MESSAGE_VALID_UNTIL, messages: [ { diff --git a/constants/wallets.ts b/constants/wallets.ts index fb4899b..da17e7a 100644 --- a/constants/wallets.ts +++ b/constants/wallets.ts @@ -1,3 +1,4 @@ +import { TonNetworkICon } from "@/assets/icons/network"; import { KeplrIcon, MetamaskIcon, @@ -28,17 +29,17 @@ export const OraichainWallet = [ ]; export const TonNetWorkWallet = [ - // { - // icon: TonNetworkICon, - // id: TonWallet.TonKeeper, - // name: "TonKeeper", - // }, { - icon: TonKeeperIcon, + icon: TonNetworkICon, id: TonWallet.TonKeeper, - name: "Tonkeeper", + name: "", }, // { + // icon: TonKeeperIcon, + // id: TonWallet.TonKeeper, + // name: "Tonkeeper", + // }, + // { // icon: MyTonWalletIcon, // id: TonWallet.MyTonWallet, // name: "MyTonWallet", diff --git a/contexts/ton-provider.tsx b/contexts/ton-provider.tsx new file mode 100644 index 0000000..11cef80 --- /dev/null +++ b/contexts/ton-provider.tsx @@ -0,0 +1,32 @@ +"use client"; + +import { MANIFEST_URL } from "@/constants/config"; +import { TonNetwork } from "@/constants/networks"; +import { useLoadTonBalance } from "@/hooks/useLoadToken"; +import { useAuthTonAddress } from "@/stores/authentication/selector"; +import { TonConnectUIProvider } from "@tonconnect/ui-react"; +import { useEffect, useState } from "react"; + +export const TonProvider = (props: React.PropsWithChildren<{}>) => { + const tonAddress = useAuthTonAddress(); + + const { loadAllBalanceTonToken } = useLoadTonBalance({ + tonAddress, + tonNetwork: TonNetwork.Mainnet, + }); + const [isMounted, setIsMounted] = useState(false); + + useEffect(() => { + setIsMounted(true); + }, []); + + if (!isMounted) { + return null; + } + + return ( + + {props.children} + + ); +}; diff --git a/hooks/useLoadToken.ts b/hooks/useLoadToken.ts index f8b52bf..ee30eca 100644 --- a/hooks/useLoadToken.ts +++ b/hooks/useLoadToken.ts @@ -265,7 +265,8 @@ export const useLoadTonBalance = ({ }; const loadAllBalanceTonToken = async () => { - // if (!address) return; + if (!tonAddress) return; + const allTokens = Object.values(TonTokensContract[tonNetwork]); const endpoint = await getHttpEndpoint(); const client = new TonClient({ diff --git a/package.json b/package.json index 44d70e5..c586523 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@tonconnect/protocol": "^2.2.6", "@tonconnect/sdk": "^3.0.3", "@types/mixpanel-browser": "^2.49.1", + "@tonconnect/ui-react": "^2.0.6", "@walletconnect/browser-utils": "^1.8.0", "@walletconnect/ethereum-provider": "^1.7.8", "big-integer": "^1.6.52", diff --git a/yarn.lock b/yarn.lock index fc45aa4..3b9463c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1853,7 +1853,7 @@ tweetnacl "^1.0.3" tweetnacl-util "^0.15.1" -"@tonconnect/sdk@^3.0.3": +"@tonconnect/sdk@3.0.3", "@tonconnect/sdk@^3.0.3": version "3.0.3" resolved "https://registry.yarnpkg.com/@tonconnect/sdk/-/sdk-3.0.3.tgz#0cc6a570817194c648193f7a1db525419c570e3f" integrity sha512-ElVre1DPixzQLgLtQIa8Wu5xS8nozlgblZTJhFFPrk82M2rZ+sawyF+LAVwt9wZRN7+htWnJrNz0+bBr4b3geA== @@ -1862,6 +1862,23 @@ "@tonconnect/isomorphic-fetch" "^0.0.3" "@tonconnect/protocol" "^2.2.6" +"@tonconnect/ui-react@^2.0.6": + version "2.0.6" + resolved "https://registry.yarnpkg.com/@tonconnect/ui-react/-/ui-react-2.0.6.tgz#9adadda97da0c8ff2e40eee5dbaa1693aa6662b5" + integrity sha512-9VRYP2o/YW4ti+rOMSptIYaRO39V5UFmzdUl18AmDFDdynjacAIht/IInO+AGAKfrnF9bUk/J5NgLcbxVqvZww== + dependencies: + "@tonconnect/ui" "2.0.6" + +"@tonconnect/ui@2.0.6": + version "2.0.6" + resolved "https://registry.yarnpkg.com/@tonconnect/ui/-/ui-2.0.6.tgz#4cf092b3ff138238fa7ae7d4754d8bfed549d892" + integrity sha512-JMTSxgbnpDjpHi9g0s7w3tpAiLHa8BHUpaBrbSTDcKGQVEm7+NtqhN+gQkGkm8pV7NYRqiS/sKUpRQ1MyjtTBQ== + dependencies: + "@tonconnect/sdk" "3.0.3" + classnames "^2.3.2" + deepmerge "^4.2.2" + ua-parser-js "^1.0.35" + "@tootallnate/once@2": version "2.0.0" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf" @@ -3296,7 +3313,7 @@ cjson@^0.3.1: dependencies: json-parse-helpfulerror "^1.0.3" -classnames@^2.5.1: +classnames@^2.3.2, classnames@^2.5.1: version "2.5.1" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b" integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow== @@ -3848,7 +3865,7 @@ deep-is@^0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== -deepmerge@^4.3.1: +deepmerge@^4.2.2, deepmerge@^4.3.1: version "4.3.1" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a" integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A== @@ -9287,6 +9304,11 @@ typescript@^5: resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.2.tgz#c26f023cb0054e657ce04f72583ea2d85f8d0507" integrity sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew== +ua-parser-js@^1.0.35: + version "1.0.38" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.38.tgz#66bb0c4c0e322fe48edfe6d446df6042e62f25e2" + integrity sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ== + unbox-primitive@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"