5.3 从合同中读取数据

riyad

目前，我们已经实现了最终用户授权功能，以便与我们的合约进行交互。

现在，让我们将 DApp 与第 5 章中部署的实际合约连接起来。

您需要注意一些要求，以便在本课和下一课中正确使用我们的步骤：

• 我们将使用 testnet。请确保已将第 4 章/第 5 课中的合约部署到 testnet。
• 请确保在第 4 章/第 5 课中已为您的合约部署了正确的初始数据，即:
  • 计数器值
  • 最近的发件人地址
  • 所有者地址 - 这必须是您的有效 testnet 钱包地址，因为您将执行取款操作，而且您还记得，我们的合同逻辑将拒绝任何非所有者的取款尝试。
    
    
• 确保你有 testnet 代币。您可以在这里轻松获得 (https://t.me/testgiver_ton_bot)。
  
  

此时，我假设你已经将第 4 章/第 5 课中的合约部署到了 testnet，并知道了它的地址。

这是我的合约地址：

1. EQCS7PUYXVFI-4uvP1_vZsMVqLDmzwuimhEPtsyQKIcdeNPu
   

复制代码

大家还记得，我们在编写测试时已经与我们的合约进行了一些交互。我们必须创建一个包装文件，它可以帮助我们向合约发送内部信息，还可以运行 getter 方法。令人惊喜的是，我们可以使用同一个包装文件：)

我们 DApp 的合约包装文件现在位于 src/contracts/MainContract.ts.

现在我们有了一个合适的合约包装，但如何才能真正从浏览器与链上合约建立连接呢？在第 3 章中，我们检测了合约是否已部署，并使用了 TON 库中的 TonClient 实例。它使用 TON access RPC 提供者从链上获取信息，并向我们的合约发送请求。我们将在本课中使用相同的逻辑。

在开始之前，让我们做一件 "非常 React "的事情，我们将实现一个通用的 React 钩子，它将帮助我们初始化异步对象。我们将用它来连接 TonClient。

创建包含以下内容的文件 src/hooks/useAsyncInitialize.ts：

1. import { useEffect, useState } from "react";
   " g7 O8 b. e: a  y
2. 
   
3. export function useAsyncInitialize<T>(
   9 u+ J! O+ f# W5 p/ w2 Z4 n0 p
4.   func: () => Promise<T>,
   
5.   deps: any[] = []
   
6. ) {
   + [, r- r9 H5 K8 q
7.   const [state, setState] = useState<T | undefined>();
   : F4 W) Q+ G* j( Q
8.   useEffect(() => {
   
9.     (async () => {
   
10.       setState(await func());
    + d0 W3 f1 E, ^! K% S
11.     })();
    
12.   }, deps);
    8 ^  \7 o; m# A2 J. o
13. 
      [; y2 k' Q: g) m/ g( _5 K  Q
14.   return state;
    6 i& E- [  B  a
15. }

复制代码

接下来，我们将创建另一个依赖于 useAsyncInitialize 的 React 钩子，并在应用程序中初始化 RPC 客户端。如上所述，我们将使用 TON Access，它将免费为我们提供无节流的 API 访问。它也是去中心化的，是访问网络的首选方式。

创建包含以下内容的文件 src/hooks/useTonClient.ts：

1. import { getHttpEndpoint } from '@orbs-network/ton-access';
   
2. import { TonClient } from 'ton';
   # Q  L% L' F; S" g6 Y# y% o
3. import { useAsyncInitialize } from './useAsyncInitialize';
   1 U7 c& v" n9 W8 ?
4. 
   / p2 f0 G9 `3 {' c4 m3 y$ _
5. export function useTonClient() {
   0 N' W, \( C, @& a  N5 V* n
6.   return useAsyncInitialize(
   
7.     async () =>
   
8.       new TonClient({
   6 N' `0 I: V6 R2 T& m* ^" u- T
9.         endpoint: await getHttpEndpoint({ network: 'testnet' }),
   1 A6 p/ ^: b: t* |$ e; \2 P' ]
10.       })
    + K2 t, F! W# E2 K: @1 J
11.   );
    
12. }

复制代码

让我们再创建一个名为 useMainContract() 的钩子，它将接受已部署合约的链上地址，并运行我们合约的getter方法（借助包装器的 .getData() 方法）。

该钩子的代码将如下所示：

请务必将合约地址替换为已部署合约的地址

1. import { useEffect, useState } from "react";
   2 s' K& d+ U& U' w- C9 f
2. import { MainContract } from "../contracts/MainContract";
   7 r3 F; c4 I  @. P( a
3. import { useTonClient } from "./useTonClient";
   
4. import { useAsyncInitialize } from "./useAsyncInitialize";
   
5. import { Address, OpenedContract } from "ton-core";
   
6. 
   
7. export function useMainContract() {
   % P% v- g/ b( e
8.   const client = useTonClient();
   : g# S: g) c2 m  m
9.   const [contractData, setContractData] = useState<null | {
   
10.     counter_value: number;
    0 d% ^' R0 M# D
11.     recent_sender: Address;
    
12.     owner_address: Address;
    . h; ~; z9 A6 n! C9 S
13.   }>();
    
14. 
    
15.   const mainContract = useAsyncInitialize(async () => {
    ; Y& r6 d7 ^3 S' Y
16.     if (!client) return;
    + d$ _/ c3 {9 w- d' a, Y( x
17.     const contract = new MainContract(
    
18.       Address.parse("EQCS7PUYXVFI-4uvP1_vZsMVqLDmzwuimhEPtsyQKIcdeNPu") // replace with your address from tutorial 2 step 8
    
19.     );
    
20.     return client.open(contract) as OpenedContract<MainContract>;
    
21.   }, [client]);
    
22. 
    
23.   useEffect(() => {
    
24.     async function getValue() {
    
25.       if (!mainContract) return;
    
26.       setContractData(null);
    
27.       const val = await mainContract.getData();
    
28.       setContractData({
    * M# |1 c! A5 w0 G, `
29.         counter_value: val.number,
    - H9 i/ c+ |' d6 \! l
30.         recent_sender: val.recent_sender,
    
31.         owner_address: val.owner_address,
    
32.       });
    8 [* w# B% o5 O) S( T/ p7 `
33.     }
    
34.     getValue();
    & w8 l- z4 Z+ J. M/ K8 g5 C) q& A
35.   }, [mainContract]);
    
36. 
    
37.   return {
    - b7 D$ g' @, C" ~$ _0 B
38.     contract_address: mainContract?.address.toString(),
    9 \9 @) J# T& Z
39.     ...contractData,
    
40.   };
    % w) }+ O- w/ D) _
41. }

复制代码

至此，我们已准备好将从链中读取的数据呈现在我们的界面上。我们用以下代码更新 src/App.tsx：

1. import "./App.css";
   
2. import { TonConnectButton } from "@tonconnect/ui-react";
   
3. import { useMainContract } from "./hooks/useMainContract";
   
4. 
   
5. function App() {
   
6.   const {
   ) H# Y4 ?& F" F% ]2 _9 m1 X( C& u
7.     contract_address,
   ' O/ k" [- d" K3 a1 l1 w. U4 O% ]9 p
8.     counter_value,
   # E: S0 @. c% A2 p, F9 b& o& p  O
9.     recent_sender,
   , y/ f/ ^' B5 Q5 f2 v
10.     owner_address,
    
11.     contract_balance,
    2 F7 P$ V: {5 |. _+ K
12.   } = useMainContract();
    3 J+ B4 ~9 ?0 f0 S9 d7 J
13.   return (
    
14.     <div>
    ) i- o% O9 h$ [
15.       <div>
    4 x+ [# `0 `" q  S
16.         <TonConnectButton />
    ! \9 G7 W  c& O# f5 ~; w; n2 C* h
17.       </div>
    5 E& T: H' W' j: O+ |7 U' k
18.       <div>
    
19.         <div className='Card'>
    
20.           <b>Our contract Address</b>
    - @& R  X/ `$ G6 |; F
21.           <div className='Hint'>{contract_address?.slice(0, 30) + "..."}</div>
    - c9 \' b; Q( I- [& b
22.           <b>Our contract Balance</b>
    " `, V, P( ]' Y& v2 h6 J0 H
23.           <div className='Hint'>{contract_balance}</div>
    ( ^2 m" k) H, j, T' `. [  E5 B
24.         </div>
    % D9 v' j9 y, l$ O& j5 L
25. 
    
26.         <div className='Card'>
    $ _/ o8 s$ o' W2 R2 v
27.           <b>Counter Value</b>
    5 Z- c8 z+ o# S; j" g2 @
28.           <div>{counter_value ?? "Loading..."}</div>
    
29.         </div>
    3 f  t' W# ^. w+ D9 H
30.       </div>
    
31.     </div>
    1 a0 ]2 H9 ^! R/ h. f+ D
32.   );
    
33. }
    % V! Y1 d, A2 x! `) g. s3 [, T* q
34. 
    
35. export default App;

复制代码

很好，至此我们已经准备就绪，可以轻松从链中读取合约数据了。请注意，即使我们没有通过 TON Connect 授权，也可以读取数据，因为这是只读数据，只有当我们要执行 "写 "操作时才需要授权。

在下一课中，我们将执行这些交互式操作，发送增量、存款和取款交易。

9 [% u0 Q$ F" N0 @. y* q