5.4 从 dApp 启动交易

riyad

上次的交互是只读的，现在我们通过发送交易来与合约交互。

我们在合约上开发的第一个功能是递增。让我们在主页面上添加一个发送交易的按钮。正如您所记得的，在链上发送交易需要花费GAS，因此我们希望钱包能与用户一起批准这一操作，并显示将花费多少Ton币。

在开始之前，我们将添加另一个钩子，从 TON Connect 接口生成一个发送方对象。该发送方代表已连接的钱包，允许我们代表它们发送交易。

在处理该交易请求时，我们还将在用户界面中显示钱包的连接状态，以便我们的用户界面将隐藏需要授权的元素。

就像我们在之前的课程中所做的那样，让我们使用 React 钩子来保留一些我们稍后将在代码中使用的功能。

让我们创建包含以下内容的文件 src/hooks/useTonConnect.ts：

import { useTonConnectUI } from '@tonconnect/ui-react';+ l7 k4 z- _; C6 e( g
import { Sender, SenderArguments } from 'ton-core';# U# Y* n, p" i
& Q0 |( D, R) h4 J
export function useTonConnect(): { sender: Sender; connected: boolean } {
& f; k E" ~9 `3 {# i# n8 I; o
const [tonConnectUI] = useTonConnectUI();& F% f. P7 y$ B* b( C# Z
! s! r; j" i' z5 |) T0 m
return {( }1 n& B7 F' l8 \2 l8 u
sender: {
* s; [$ i8 z8 B' W# C' |: U! g
send: async (args: SenderArguments) => {, N7 F+ x. Y' D+ r" _' l0 v
tonConnectUI.sendTransaction({
0 Y4 p" W' b, [! t- b
messages: [8 G) @' N7 S1 i& S
{
2 T: C% c' u- `& H; w
address: args.to.toString(),) x) X p+ z* I H
amount: args.value.toString(),
% B2 |$ u7 w1 A/ L, i) A
payload: args.body?.toBoc().toString('base64'),
3 y4 ]6 \3 k0 y9 ]- s
},/ Q% Y4 R6 `% x1 v f
],% P3 a6 y$ T7 ?0 b
validUntil: Date.now() + 5 * 60 * 1000, // 5 minutes for user to approve
" k8 C5 q- o+ A
});2 Z$ e$ U' P3 \5 u+ c
},
; i/ @/ _6 G; x1 j4 a8 t b" T
},6 A* j3 x& Y) H: {% ^
connected: tonConnectUI.connected,
0 N+ h1 Y9 U$ D# `0 y- d: d
};8 Z- {( P9 }5 b2 t7 _
}

复制代码

您可以看到，我们正在返回一个对象，其中的函数 send 可以让我们触发交易请求，参数 connected 可以存储连接的当前状态。

接下来我们要做的是优化现有的 useCounterContract 钩子，并添加两个小功能。

我们需要更新一些代码：

// ... previous imports
1 k6 Q+ |- r6 s- \
import { toNano } from "ton-core"; \. c/ q3 L9 D& n- T
import { useTonConnect } from "./useTonConnect";
4 c. X9 p7 G$ f& e. I3 N
$ A9 f/ B4 B5 b b" P6 R$ [; s
6 C, ^. \. Q4 v8 _
export function useCounterContract() {
+ c5 m: ]% |( N& V, z p4 o
* g% h0 _6 u+ t- ]- z/ \ [" p/ [
// ... variables definitions
, H' @! _( E6 S5 k
const { sender } = useTonConnect();
* L7 K2 E2 D; W& q4 t6 i+ K* t
1 O' s8 @6 J8 ^5 n5 U: \
const sleep = (time: number) => new Promise((resolve) => setTimeout(resolve, time));
/ q; _1 L8 v0 |& v( @3 K
5 u: u: u$ H8 w& {$ O3 i+ k
// ... mainContract definition1 L/ y. Y& h1 }/ T! T; y* y
2 a. g( F4 W6 k& s: |. |
useEffect(() => {' D7 @( a: r5 B2 M+ Y. `3 C
async function getValue() {1 Z: Z: ]9 `: D2 c
: L; V2 P+ F/ Z! u: j1 \( u' o
// ... previous getValue code
/ Y% g* r3 Z l$ Z ^
# H9 \+ _: l% J- A
await sleep(5000); // sleep 5 seconds and poll value again
( n2 _1 g+ |7 i0 z e& o4 m
getValue();
! L7 P2 M5 ]9 Z) \
}% c: Z6 |. g& o
getValue();
' U: ^+ `1 q7 h; M
}, [counterContract]);% v' f0 ?- I, Y# G! c; I- C+ P
/ D5 k7 _, T. r/ Q- k. {
1 n4 X: d- f6 |/ [* w3 d. T
return {
q% Z9 O% x$ P; D
value: val,
6 u6 r4 b5 U4 M" p4 U! l$ P& k
address: counterContract?.address.toString(),
! M1 [- `2 U8 l- Q9 U1 R0 q$ i
sendIncrement: () => {
+ L2 s4 L {& n3 a/ _5 w
return mainContract?.sendIncrement(sender, toNano(0.05), 3);
1 x2 w+ _2 ] Z* `
}, X6 h) R8 M5 C8 q1 z7 `
};
0 @% E ` }1 Z' ~; L& Z
}

复制代码

此时，我们只需更新用户界面，就可以触发所需的交易。我们还需要在其中添加两样东西：

// ... previous imports
/ j& v$ W5 U4 J: {8 _
import { useTonConnect } from "./hooks/useTonConnect";3 q1 z7 z% ?9 @4 t) }+ O* m
, q' L# W/ Q4 z. K
, _: D5 j6 A0 v4 [$ m: i5 M
function App() {" P/ { B2 t1 C. z
) _# z6 a, ?( D2 i/ w
const { ..., sendIncrement } = useMainContract();
1 _, x4 q/ I, G' l; ?# E' H5 n
const { connected } = useTonConnect()' j9 B* j C# H
1 _! h J: m }$ [' a
return (
, n" t1 {4 r* t- J
// ... other HTML code
& b$ C) ?4 l7 F! h
3 X; P: B4 M- k1 K i# @
{connected && (
* {3 T/ q* ~" @9 x l3 b7 _. [
<a1 O+ o B% s* u+ h+ _7 S
onClick={() => {) h" b5 _$ ?9 [- x* B
sendIncrement();
2 N O2 F. M+ S9 N0 E3 V: y
}}" o) ?% i4 T- o9 u; S0 \
>
# {4 ]6 V$ H; {. \
Increment' C8 f; g2 g0 J
</a>- o" _ U8 G( V; X
)}7 H2 o- w$ F: v, z, l& }
" H! t c4 p% M1 N
// ... other HTML code
$ R# _1 {9 d+ `# ^6 x
)
, O) @- s) d& [5 i5 [; R. z
}

复制代码