Moralis 與React連接

1. 創(chuàng)建 React 應(yīng)用

要使用 TypeScript 啟動(dòng)一個(gè)新的 Create React App 項(xiàng)目，您可以運(yùn)行：

• npx

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

• yarn

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

2.安裝SDK

確保將 react、react-dom 和moralis 安裝為依賴項(xiàng)。然后安裝 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")
);

在您的項(xiàng)目中導(dǎo)入 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 獲取服務(wù)器 (Dapp) URL 和 APP ID。轉(zhuǎn)到您的 Moralis 儀表板，然后單擊服務(wù)器名稱旁邊的查看詳細(xì)信息。

單擊服務(wù)器名稱下方的設(shè)置。

4. 驗(yàn)證用戶

現(xiàn)在 SDK 已成功連接，我們可以使用 Moralis 的強(qiáng)大功能。讓我們登錄一個(gè)用戶并立即從您的 Moralis 數(shù)據(jù)庫中的所有鏈獲取他們的所有代幣、交易和 NFT。

在 App.tsx 中調(diào)用應(yīng)用程序內(nèi)的 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 所在的項(xiàng)目目錄中使用以下命令在 localhost 上運(yùn)行您的應(yīng)用程序

• npm

npm start

• yarn

yarn start

6. 使用 Metamask 登錄

訪問網(wǎng)頁并單擊登錄。您的 Metamask 將彈出并要求您登錄。

7. 查看 Moralis 數(shù)據(jù)庫中的所有用戶資產(chǎn)

一旦用戶登錄 Moralis，就會(huì)從所有鏈中獲取有關(guān)該用戶的所有鏈上數(shù)據(jù)，并將其放入 Moralis 數(shù)據(jù)庫。要查看 Moralis 數(shù)據(jù)庫，請(qǐng)轉(zhuǎn)到您的服務(wù)器并單擊儀表板。

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

Moralis 數(shù)據(jù)庫從所有鏈中獲取所有用戶數(shù)據(jù)并實(shí)時(shí)更新，以防用戶在鏈上移動(dòng)資產(chǎn)。

移動(dòng)資產(chǎn)

嘗試移動(dòng) Metamask 錢包中的資產(chǎn)，并觀察 Moralis 數(shù)據(jù)庫如何實(shí)時(shí)更新記錄。