Moralis 與React連接

2022-10-08 09:25 更新

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 儀表板,然后單擊服務器名稱旁邊的查看詳細信息。

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-c27377ac533387e945854c5c4e05174243391995_Server-dashboard

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

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-b883e94a520295f643db53d70c0b7fe38885acb0_Server-credentials

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 將彈出并要求您登錄。

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 從用戶地址處于活動狀態(tài)的所有區(qū)塊鏈中獲取數據,您可以在一個數據庫中查看和查詢用戶的所有代幣、NFT 和過去的交易。

spaces_-MVStbACGLCycg7J5WQ2_uploads_git-blob-e670b0bdc0bcc6af841cddacbc204ef4c44917e6_Database-access-3

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

移動資產

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


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號