5.3 从合同中读取数据

riyad

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

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

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

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

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

这是我的合约地址：

1. EQCS7PUYXVFI-4uvP1_vZsMVqLDmzwuimhEPtsyQKIcdeNPu
   ! v+ d% w6 }! o2 G" W

复制代码

大家还记得，我们在编写测试时已经与我们的合约进行了一些交互。我们必须创建一个包装文件，它可以帮助我们向合约发送内部信息，还可以运行 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";
   / p1 P2 Z; A" t: n. y/ G# S
2. 
   
3. export function useAsyncInitialize<T>(
   7 e3 x% F3 I' ~! T) F  W9 D1 A
4.   func: () => Promise<T>,
   " l( f# q0 I4 r' \
5.   deps: any[] = []
   
6. ) {
   8 |0 [& V' Y3 t6 ^+ q$ h
7.   const [state, setState] = useState<T | undefined>();
   
8.   useEffect(() => {
   0 [. W6 z! v$ Y4 a6 l) `2 e
9.     (async () => {
   + k7 o; s1 d& W' ^
10.       setState(await func());
    : T$ n$ r+ [, n1 |6 c3 R! v9 B
11.     })();
    / E! n. E+ k+ R
12.   }, deps);
    4 b8 g& ?% K  I+ F/ b4 i6 W8 i
13. 
    
14.   return state;
    ) \% Z# b7 K4 h$ c1 ?
15. }

复制代码

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

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

1. import { getHttpEndpoint } from '@orbs-network/ton-access';
   
2. import { TonClient } from 'ton';
     T$ z% {4 d2 u3 T# V
3. import { useAsyncInitialize } from './useAsyncInitialize';
   
4. 
   $ D& _: N  M* z! ^" ^
5. export function useTonClient() {
   % d6 L# F! w0 W( U0 \
6.   return useAsyncInitialize(
   : N7 A2 p# x# w  }
7.     async () =>
   
8.       new TonClient({
   0 S5 ]( L; n6 D, Z2 Y
9.         endpoint: await getHttpEndpoint({ network: 'testnet' }),
   : q) I& Q2 ?) W; z2 R$ T; n  u
10.       })
    # `+ \- k( y, _8 B" ~
11.   );
    
12. }

复制代码

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

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

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

1. import { useEffect, useState } from "react";
   
2. import { MainContract } from "../contracts/MainContract";
   - T8 b+ x# r2 s5 J
3. import { useTonClient } from "./useTonClient";
   
4. import { useAsyncInitialize } from "./useAsyncInitialize";
   : v7 ^9 f' [& W5 A
5. import { Address, OpenedContract } from "ton-core";
   
6. 
     O' Y, I8 g* Y  C1 ?
7. export function useMainContract() {
   7 W" ]2 N7 c8 Z
8.   const client = useTonClient();
   
9.   const [contractData, setContractData] = useState<null | {
   
10.     counter_value: number;
    
11.     recent_sender: Address;
    * g/ c6 k) o. `: J* k6 o
12.     owner_address: Address;
    
13.   }>();
    
14. 
    
15.   const mainContract = useAsyncInitialize(async () => {
    
16.     if (!client) return;
    / |  Z8 z1 B5 d0 F5 j, ]
17.     const contract = new MainContract(
    
18.       Address.parse("EQCS7PUYXVFI-4uvP1_vZsMVqLDmzwuimhEPtsyQKIcdeNPu") // replace with your address from tutorial 2 step 8
    ! R% {$ k; V4 a/ q6 x5 Q
19.     );
    . n# o# x; ?9 o) Z
20.     return client.open(contract) as OpenedContract<MainContract>;
    : b- z) s' v* O
21.   }, [client]);
    
22. 
    
23.   useEffect(() => {
    
24.     async function getValue() {
    + j+ |6 y* y9 C; U* Y9 ^/ z9 c+ P; l3 B
25.       if (!mainContract) return;
    
26.       setContractData(null);
    
27.       const val = await mainContract.getData();
    
28.       setContractData({
    2 D7 g% x8 ]: W- H1 D) t
29.         counter_value: val.number,
    
30.         recent_sender: val.recent_sender,
    
31.         owner_address: val.owner_address,
    3 G  T' q/ f1 ~6 \* i+ M
32.       });
    * e3 u8 ?4 n$ d+ g& p% Q
33.     }
    0 f, Q( H# q. }
34.     getValue();
    
35.   }, [mainContract]);
    
36. 
    7 f- m* g; {; g- R! |
37.   return {
    % j9 T# }  D+ B8 B0 N  U7 p
38.     contract_address: mainContract?.address.toString(),
    7 I# `% }% e2 \# a3 E+ ~
39.     ...contractData,
    
40.   };
    
41. }

复制代码

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

1. import "./App.css";
   
2. import { TonConnectButton } from "@tonconnect/ui-react";
   
3. import { useMainContract } from "./hooks/useMainContract";
   ( e/ G4 `" ]! F7 V9 @4 h0 ]. h
4. 
   4 \- @( z4 T- Y+ l! a1 [# `
5. function App() {
   8 m6 Y/ Q! Y2 M
6.   const {
   2 O' F. }& i# @0 o- K5 y. u
7.     contract_address,
     c0 q# g5 s' W1 e
8.     counter_value,
   
9.     recent_sender,
   9 o( v" h$ g1 `
10.     owner_address,
    
11.     contract_balance,
    ; A. o$ I! z+ c, k8 l" h- V
12.   } = useMainContract();
    ' k$ P; Q" W8 b, K- z9 c/ j
13.   return (
    
14.     <div>
    
15.       <div>
    ; k# N$ H" G0 U1 \9 w
16.         <TonConnectButton />
    5 U4 C! a6 `& A5 @6 m8 A
17.       </div>
    
18.       <div>
    
19.         <div className='Card'>
    3 p9 ~0 F4 p! }) N9 S
20.           <b>Our contract Address</b>
    1 e* o; n+ Y7 y; G8 G5 q
21.           <div className='Hint'>{contract_address?.slice(0, 30) + "..."}</div>
    
22.           <b>Our contract Balance</b>
    9 `6 d) u& ?4 L" ~  k- v0 N
23.           <div className='Hint'>{contract_balance}</div>
    
24.         </div>
    ) q8 k, T, t& v# j$ W, g4 T
25. 
    
26.         <div className='Card'>
    & t# D- x! F- F$ x% v: }/ Q! s
27.           <b>Counter Value</b>
    
28.           <div>{counter_value ?? "Loading..."}</div>
    
29.         </div>
    
30.       </div>
    
31.     </div>
    5 s( l- [5 t0 K$ Z
32.   );
    
33. }
    
34. 
    
35. export default App;

复制代码

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

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