Skip to content

Commit

Permalink
Merge pull request #7 from oraichain/feat/ton_connect
Browse files Browse the repository at this point in the history 
fix: update connect
  • Loading branch information
@meomeocoj
meomeocoj authored Jul 24, 2024
2 parents adcf720 + cb2b76e commit af4eeac
Show file tree
Hide file tree
Showing 8 changed files with 103 additions and 65 deletions.
7 changes: 5 additions & 2 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -33,12 +34,14 @@ export default function RootLayout({
<body className={inter.className}>
<AppProvider>
<ThemeProvider>
<CustomTonProvider>
{/* <CustomTonProvider> */}
<TonProvider>
<ToastProvider>
<Header />
<Content>{children}</Content>
</ToastProvider>
</CustomTonProvider>
</TonProvider>
{/* </CustomTonProvider> */}
</ThemeProvider>
</AppProvider>
</body>
Expand Down
76 changes: 27 additions & 49 deletions components/layout/connectButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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"
Expand All @@ -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,
Expand All @@ -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 (
Expand Down Expand Up @@ -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) {
Expand All @@ -123,59 +120,40 @@ 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);
}
};

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 =
Expand Down
6 changes: 3 additions & 3 deletions components/page/bridge/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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<string>();
const tonNetwork = TonNetwork.Mainnet;

Expand Down Expand Up @@ -309,7 +309,7 @@ const Bridge = () => {
? getNativeBridgePayload()
: getOtherBridgeTokenPayload();

const tx = await connector.sendTransaction({
const tx = await tonConnectUI.sendTransaction({
validUntil: TON_MESSAGE_VALID_UNTIL,
messages: [
{
Expand Down
15 changes: 8 additions & 7 deletions constants/wallets.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { TonNetworkICon } from "@/assets/icons/network";
import {
KeplrIcon,
MetamaskIcon,
Expand Down Expand Up @@ -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",
Expand Down
32 changes: 32 additions & 0 deletions contexts/ton-provider.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<TonConnectUIProvider manifestUrl={MANIFEST_URL}>
{props.children}
</TonConnectUIProvider>
);
};
3 changes: 2 additions & 1 deletion hooks/useLoadToken.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
28 changes: 25 additions & 3 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand All @@ -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/[email protected]":
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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit af4eeac

Please sign in to comment.