# MultiversX 前端专家该技能指导 MultiversX 上的去中心化应用程序 (dApp) 的开发，重点关注“sdk-dapp”、“sdk-js”和 React/Next.js 集成。 ## 核心能力 1. **钱包连接**：与 Defi 钱包、xPortal、Ledger 和 Web 钱包集成。 2. **交易签名**：构建、签名和广播交易。 3. **状态管理**：跟踪帐户余额、网络配置并确保同步。 4. **UI 组件**：使用 MultiversX 特定的 UI 模式。 ## 🛠️ 开发工作流程 ### 1\.设置和配置 * **库** ：`@multiversx/sdk-dapp` 是标准。 * **Provider** ：将您的根应用程序包装在 `` 中。 <应用程序/> ### 2\.身份验证（登录） * **挂钩** ：使用 `useExtensionLogin`、`useWalletConnectV2Login`、`useWebWalletLogin`。 * **最佳实践**：将登录逻辑抽象到专用组件中。 * **Session** ：使用 `sdk-dapp` 自动处理会话过期。 ### 3\.智能合约交互 * **查询** ：通过“ProxyNetworkProvider”使用“SmartContract.query()”。 * **交易** : 1. 创建交易：`new Interaction(...)` 2. 签名：`useSignTransactions` 钩子或 `refreshAccount()`。 3. 广播和跟踪：使用 `useTrackTransactionStatus` 进行 UI 更新。 * **ABI** ：始终加载正确的 ABI (`.abi.json`) 以实现类型安全的交互。 ### 4\.安全性 * **验证** ：在创建交易之前验证所有输入。 * **反馈**：使用清晰的视觉指示器（Toast）显示清晰的成功/失败消息。 * **滑点** ：处理 DeFi 应用前端的滑点计算。 ## 📚 专家资源（深入研究） * **前端审核** : `skills/expert/multiversx-dapp-audit/SKILL.md` * **JS SDK 核心** : `skills/expert/mvx_sdk_js_core/SKILL.md` * **钱包集成** : `skills/expert/mvx_sdk_js_wallets/SKILL.md` * **令牌管理** : `skills/expert/mvx_sdk_js_tokens/SKILL.md` ## ⚡ 常用操作 ### 读取帐户状态 const { 地址、账户、余额 } = useGetAccountInfo(); ### 发送传输 const { sendTransactions } = useSendTransactions(); 等待发送交易（{ 交易：[tx]，交易显示信息：{ processingMessage: '正在处理交易', errorMessage: '发生错误', successMessage: '交易成功' }, 签名后重定向：假 }); # 前端基础 ** ** ## 名称：multiversx-dapp-frontend 描述：通过钱包连接、交易和智能合约交互将 React 应用程序适应 MultiversX 区块链。当应用程序需要 Web3、区块链、钱包登录、加密支付、NFT、代币或智能合约调用时使用。 # MultiversX dApp 前端集成通过钱包身份验证、交易签名和智能合约交互，将 React 应用程序转换为 MultiversX 区块链 dApp。 ## 先决条件入门项目已包含 MultiversX SDK 包： * `@multiversx/sdk-core` \- 核心区块链原语 * `@multiversx/sdk-dapp` \- React 钩子和提供者 * `@multiversx/sdk-dapp-core-ui` \- 预构建的 UI 组件 * `@multiversx/sdk-dapp-utils` \- 实用函数 ## 应用程序初始化 **关键：** 在渲染 React 应用程序之前调用 `initApp()`。修改 `src/main.tsx`: 从'react-dom/client'导入{createRoot}；从 '@multiversx/sdk-dapp/out/methods/initApp/initApp' 导入 { initApp }；从'@multiversx/sdk-dapp/out/types/enums.types'导入{EnvironmentsEnum}；从“./App”导入应用程序；导入'./index.css'; 常量配置= { 存储：{ getStorageCallback: () => sessionStorage }, dApp配置：{ environment:EnvironmentsEnum.devnet, // 更改为测试网或主网本机验证：{ expirySeconds: 86400, // 24 小时 tokenExpirationToastWarningSeconds: 300 // 5 分钟警告 } } }; initApp(config).then(() => { const root = createRoot(document.getElementById('root')!); root.render(); }); ### 环境选项环境 |价值|使用案例 ---|---|--- `EnvironmentsEnum.devnet` |发展|使用免费代币进行测试 `EnvironmentsEnum.testnet` |分期|生产前测试 `EnvironmentsEnum.mainnet` |生产|真实交易 ## 与 UnlockPanelManager 的钱包连接 UnlockPanelManager 提供支持所有钱包提供商的预构建 UI。 ### 设置解锁面板从'@multiversx/sdk-dapp/out/managers/UnlockPanelManager'导入{UnlockPanelManager}；从'react-router-dom'导入{useNavigate}；函数 ConnectWalletButton() { 常量导航 = useNavigate(); 常量handleConnect = () => { const lockPanelManager = UnlockPanelManager.init({ 登录处理程序: () => { 导航（'/仪表板'）； // 登录成功后重定向 }, 关闭: () => { // 可选：处理面板无需登录即可关闭 } }); unlockPanelManager.openUnlockPanel(); }; 返回（ <按钮onClick={handleConnect}> 连接钱包）； } ### 支持的钱包提供商 UnlockPanelManager 自动显示所有可用的提供程序： * **xPortal App** \- 通过二维码的移动钱包 * **xPortal Hub** \- 基于浏览器的 xPortal * **MultiversX DeFi 钱包** \- 浏览器扩展 * **网络钱包** \- MultiversX 网络钱包 * **Ledger** \- 硬件钱包 * **WalletConnect** \- WalletConnect v2 协议 * **密钥** \- WebAuthn/FIDO2 身份验证 ### 注销从 '@multiversx/sdk-dapp/out/providers/accountProvider' 导入 { getAccountProvider } ；异步函数handleLogout() { const 提供者 = getAccountProvider(); 等待提供者.logout(); 导航（'/'）; // 重定向到首页 } ## 身份验证状态挂钩 ### 检查登录状态从 '@multiversx/sdk-dapp/out/hooks/account/useGetIsLoggedIn' 导入 { useGetIsLoggedIn }；函数 AuthStatus() { const isLoggedIn = useGetIsLoggedIn(); 返回已登录？ <仪表板/>：<登录提示/>； } ### 获取账户数据从 '@multiversx/sdk-dapp/out/hooks/account/useGetAccount' 导入 { useGetAccount }；函数帐户信息（）{ const { 地址、余额、随机数 } = useGetAccount(); 返回（

地址：{地址}

余额：{balance} EGLD

）； } ### 仅获取地址从 '@multiversx/sdk-dapp/out/hooks/account/useGetAddress' 导入 { useGetAddress } ；函数地址显示（）{ const 地址 = useGetAddress(); 返回{地址}； } ### 获取网络配置从 '@multiversx/sdk-dapp/out/hooks/useGetNetworkConfig' 导入 { useGetNetworkConfig } ；函数网络信息（）{ const { 网络 } = useGetNetworkConfig(); 返回（

链 ID：{network.chainId}

标签：{network.egldLabel}

）； } ## 受保护的路由为受保护的页面创建一个身份验证防护组件：从 'react' 导入 { useEffect, useState }; 从'react-router-dom'导入{useNavigate}；从 '@multiversx/sdk-dapp/out/hooks/account/useGetIsLoggedIn' 导入 { useGetIsLoggedIn }；接口 AuthGuardProps { 孩子：React.ReactNode； } 函数 AuthGuard({ 孩子 }: AuthGuardProps) { const isLoggedIn = useGetIsLoggedIn(); 常量导航 = useNavigate(); const [isChecking, setIsChecking] = useState(true); 使用效果（（）=> { // 允许 SDK 恢复会话的小延迟常量计时器 = setTimeout(() => { setIsChecking(假); 如果（！isLoggedIn）{ 导航（'/'）； } }, 100); 返回（）=>清除超时（计时器）； }, [已登录, 导航]); 如果（正在检查）{ 返回

正在加载...

; } 返回已登录？ <>{孩子}：空； } // 在路由中使用 <路线路径=“/仪表板”元素= { <验证卫士> <仪表板/> } /> ## 基本交易 ### 发送 EGLD 转账从'@multiversx/sdk-core'导入{交易，地址}；从 '@multiversx/sdk-dapp/out/providers/accountProvider' 导入 { getAccountProvider } ；从'@multiversx/sdk-dapp/out/utils/account/refreshAccount'导入{refreshAccount}；从'@multiversx/sdk-dapp/out/managers/TransactionManager'导入{TransactionManager}；从 '@multiversx/sdk-dapp/out/hooks/account/useGetAccount' 导入 { useGetAccount }；从 '@multiversx/sdk-dapp/out/hooks/useGetNetworkConfig' 导入 { useGetNetworkConfig } ；函数 SendEgld() { const { 地址：senderAddress，nonce } = useGetAccount(); const { 网络 } = useGetNetworkConfig(); const sendTransaction = async (receiverAddress: string, amount: string) => { // 刷新账户以获取最新的随机数等待刷新帐户（）； // 创建交易（wei 金额：1 EGLD = 10^18）常量事务 = 新事务({ 值：BigInt（金额），接收者：Address.newFromBech32(receiverAddress), 发件人：Address.newFromBech32(senderAddress), 气体限制：BigInt（50000）， chainID: 网络.chainId, 随机数：BigInt(随机数) }); // 签署交易 const 提供者 = getAccountProvider(); constsignedTransactions=awaitprovider.signTransactions([transaction]); // 发送并跟踪 const txManager = TransactionManager.getInstance(); const sentTransactions =等待 txManager.send(signedTransactions); // 使用 Toast 通知进行跟踪 const sessionId =等待 txManager.track(sentTransactions, { 交易显示信息：{ processingMessage: '正在发送 EGLD...', successMessage: 'EGLD发送成功！', 错误消息：“交易失败” } }); 返回会话ID； }; 返回（

您的交易

前端

包含技能