codecamp

Moralis 与React连接

1. 创建 React 应用

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

  • npx
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
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 仪表板,然后单击服务器名称旁边的查看详细信息。

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-c27377ac533387e945854c5c4e05174243391995_Server-dashboard

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

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-b883e94a520295f643db53d70c0b7fe38885acb0_Server-credentials

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;

5.从localhost查看页面

在 package.json 所在的项目目录中使用以下命令在 localhost 上运行您的应用程序

  • npm
npm start

  • yarn

yarn start

6. 使用 Metamask 登录

访问网页并单击登录。您的 Metamask 将弹出并要求您登录。

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-d162ca05b15660d7b101d7c636f97efd507f2ea7_Screenshot 2022-03-16 at 12

7. 查看 Moralis 数据库中的所有用户资产

一旦用户登录 Moralis,就会从所有链中获取有关该用户的所有链上数据,并将其放入 Moralis 数据库。要查看 Moralis 数据库,请转到您的服务器并单击仪表板。

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-1702b8ddeff4dbedfed0a1a81ae73686d7a29ad7_Database-access

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-2aaa85c1cd55b044850dce73d28449e8812e975a_Database-access-2

单击仪表板后,您将看到该服务器的数据库。 Moralis 从用户地址处于活动状态的所有区块链中获取数据,您可以在一个数据库中查看和查询用户的所有代币、NFT 和过去的交易。

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-e670b0bdc0bcc6af841cddacbc204ef4c44917e6_Database-access-3

Moralis 数据库从所有链中获取所有用户数据并实时更新,以防用户在链上移动资产。

移动资产

尝试移动 Metamask 钱包中的资产,并观察 Moralis 数据库如何实时更新记录。


Moralis 与Vanilla JS连接
Moralis 与Node.js连接
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Moralis 文件

Moralis 工具

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }