Moralis 與React連接

1. 創(chuàng)建 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 儀表板，然后單擊服務器名稱旁邊的查看詳細信息。

單擊服務器名稱下方的設置。

4. 驗證用戶

現(xiàn)在 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 將彈出并要求您登錄。

7. 查看 Moralis 數據庫中的所有用戶資產

一旦用戶登錄 Moralis，就會從所有鏈中獲取有關該用戶的所有鏈上數據，并將其放入 Moralis 數據庫。要查看 Moralis 數據庫，請轉到您的服務器并單擊儀表板。

單擊儀表板后，您將看到該服務器的數據庫。 Moralis 從用戶地址處于活動狀態(tài)的所有區(qū)塊鏈中獲取數據，您可以在一個數據庫中查看和查詢用戶的所有代幣、NFT 和過去的交易。

Moralis 數據庫從所有鏈中獲取所有用戶數據并實時更新，以防用戶在鏈上移動資產。

移動資產

嘗試移動 Metamask 錢包中的資產，并觀察 Moralis 數據庫如何實時更新記錄。