Comments (2)
Ого, круто что починили!
Но проблема все еще существует с TWA, там приложение перезапускается полностью и схема с промисом не будет работать.
Ниже пример TWA, если в попытаться авторизоваться через @wallet бот (вам надо заранее создать в нем TON Space). То сработает только onStatusChange, а если авторизоваться через тонкипер то будет работать и промис после connectWallet
t.me/local_presale_bot/tcui
<div class="center">
<button onclick="connectWallet()">Connect TON</button>
<br/>
<button onclick="disconnectWallet()">Disconnect TON</button>
<pre id="log"></pre>
</div>
<script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
<script>
function log(msg) {
console.log(msg)
const t = document.createTextNode(msg + "\n")
document.getElementById('log').appendChild(t);
}
const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
manifestUrl: 'https://stels-cs.github.io/ton-connect-ui/tcm.json',
actionsConfiguration:{
twaReturnUrl:'https://t.me/local_presale_bot/tcui'
}
});
tonConnectUI.onStatusChange(wallet => {
log("onStatusChange: "+wallet?.account.address)
})
async function connectWallet() {
const connectedWallet = await tonConnectUI.connectWallet();
log("connected after connectWallet");
}
function disconnectWallet() {
tonConnectUI.disconnect();
}
</script>
from sdk.
Как и было замечено, tonConnectUI.connectWallet()
был исправлен, и теперь он должен работать корректно, но не с TWA из-за его специфики. Хочу обратить внимание, что из-за невозможности достоверно определить был ли совершен коннект с кошельком или нет, этот метод помечен как устаревший и в будущем будет удалён. Вместо него рекомендуем использовать tonConnectUI.openModal()
для открытия модального окна.
Для отслеживания изменений состояния модального окна, необходимо подписаться на события с помощью tonConnectUI.onModalStateChange((state: WalletsModalState) => { ... })
. Это позволит реактивно отображать лоадер в зависимости от состояния модального окна.
Также необходимо подписаться на tonConnectUI.onStatusChange(walletAndwalletInfo => { ... })
, чтобы реактивно получать информацию о кошельке.
Если используется react, то для него был добавлен useTonConnectModal(), который упрощает управление состоянием модального окна.
import { useTonConnectModal } from '@tonconnect/ui-react';
export const ModalControl = () => {
const { state, open, close } = useTonConnectModal();
return (
<div>
<div>Modal state: {state?.status}</div>
<button onClick={open}>Open modal</button>
<button onClick={close}>Close modal</button>
</div>
);
};
from sdk.
Related Issues (20)
- [UI]: How to catch the `TON_CONNECT_SDK_ERROR` error? HOT 5
- [UI-REACT]: Decryption error HOT 17
- [<SDK or UI or UI-REACT or PROTOCOL>]: <brief description of your question>
- Connect from wallet address
- [SDK]: SignData Feature
- [<SDK or UI or UI-REACT or PROTOCOL>]: <brief description> HOT 1
- UI-React : error with TonConnectButton HOT 2
- [<UI-REACT>]: React 19 + Next 15 HOT 1
- [UI-REACT]: Send USDT follow official docs not work
- [UI] question in nuxt 3
- [<SDK>]: <windowKeys filter would never work>
- [<SDK or UI>]:Get boc by "tonConnectUI?.sendTransaction(transaction)" can not parser HOT 2
- [UI-REACT]: Can't connect on Desktop HOT 3
- [TONCONNECT-UI]: Decryption Error. HOT 16
- [UI or UI-REACT]: Provide chain switch feature? HOT 1
- [TONCONNECT-UI]: TonConnect works in the browser, but does not work inside of Telegram MiniApp. HOT 1
- [<SDK>]: how can I get the boc,After I call tonConnectUI.sendTransaction(transaction)
- [<SDK or UI or UI-REACT or PROTOCOL>]: <brief description of your question>
- > ### Is your feature request related to a problem?
- skipRedirectToWallet
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sdk.