Moralis Web3 企业级API Moralis 与React连接

2024-02-26 开发教程 Moralis Web3 企业级API 匿名 2℃

1. 创建 React 应用

要使用 TypeScript 启动一个新的 Create React App 项目，您可以运行：

npx create-react-app my-app --template typescript

yarn

yarn create react-app my-app --template typescript

2.安装SDK

确保将 react、react-dom 和moralis 安装为依赖项。然后安装 react-moralis：

npm install moralis-v1 react-moralis

yarn

yarn add moralis-v1 react-moralis

3.初始化SDK

您将看到以下代码：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

在您的项目中导入 Moralis Provider 并添加 <MoralisProvider> 组件，如下所示

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { MoralisProvider } from "react-moralis";
ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider serverUrl="https://xxxxx/server" appId="YOUR_APP_ID">
      <App />
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

您可以从 Moralis Dashboard 获取服务器 (Dapp) URL 和 APP ID。转到您的 Moralis 仪表板，然后单击服务器名称旁边的查看详细信息。

单击服务器名称下方的设置。

4. 验证用户

现在 SDK 已成功连接，我们可以使用 Moralis 的强大功能。让我们登录一个用户并立即从您的 Moralis 数据库中的所有链获取他们的所有代币、交易和 NFT。

在 App.tsx 中调用应用程序内的 useMoralis 钩子，输入以下代码：

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import { useMoralis } from "react-moralis";
function App() {
    const { authenticate, isAuthenticated, isAuthenticating, user, account, logout } = useMoralis();
    useEffect(() => {
    if (isAuthenticated) {
      // add your logic here
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAuthenticated]);
    const login = async () => {
      if (!isAuthenticated) {
        await authenticate({signingMessage: "Log in using Moralis" })
          .then(function (user) {
            console.log("logged in user:", user);
            console.log(user!.get("ethAddress"));
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
    const logOut = async () => {
      await logout();
      console.log("logged out");
    }
  return (
    <div>
      <h1>Moralis Hello World!</h1>
      <button onClick={login}>Moralis Metamask Login</button>
      <button onClick={logOut} disabled={isAuthenticating}>Logout</button>
    </div>
  );
}
export default App;