📝

Moralis x Next.js Minimum ETH transfer code

2022/03/29に公開

Next.js

Ethereum, Polygon, Avalanche などのブロックチェーンでのMetaMaskログイン、トークンやNFTの送信（Transfer）、ユーザー情報の取得などをフロントエンドから簡単にしてくれるライブラリ Moralis を試してみました。

https://moralis.io/

ただまだ発展途上の業界やライブラリだからか、個人ブログのチュートリアルやGitHub上のサンプルなどはエラーが多発するし、WalletConnect（MetaMaskと同じウォレット）を使わないのにライブラリ入れてないと Warning でるとか、結構危うい感じはしました‥。が、一応、テストネットでETHをTransferできるまではできたので、Next.js版のコードとして共有します（公式が提供しているReact版SDKの使い方ほぼそのままです）。

create-next-app

僕は既にある Next.js プロジェクトに組み込んだのでちょっと未検証ですが、以下のコマンドで雛形アプリをつくって、pages/index.tsxを書き換えていけば良いと思います！

npx create-next-app moralis-sample --example with-tailwindcss

公式ドキュメントに従って進める

Getting Started

Connect with React

ただ上記では Moralis の部分で「Cannot find name 'Moralis'」のエラーがでるので、useMoralis()を使って読み込みます。

コード

// .env.local
NEXT_PUBLIC_SERVER_URL=***
NEXT_PUBLIC_APP_ID=***

// app.tsx
import { MoralisProvider } from "react-moralis";

function MyApp({ Component, pageProps }) {  
  return (
      <MoralisProvider serverUrl={process.env.NEXT_PUBLIC_SERVER_URL} appId={process.env.NEXT_PUBLIC_APP_ID}>
        <Component {...pageProps} />
      </MoralisProvider>
  );
}

export default MyApp;

// pages/index.tsx
import React from "react";
import { useMoralis, useWeb3Transfer } from "react-moralis";

export default function Index() {
  const {
    authenticate,
    isAuthenticated,
    isAuthenticating,
    user,
    account,
    logout,
    Moralis // ここを追加することでエラーは消える
  } = useMoralis();

  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");
  };

  const { fetch, error, isFetching } = useWeb3Transfer({
    type: "native",
    amount: Moralis.Units.ETH(0.01),
    receiver: "0x0000000000000000000000000000000000000000"
  });

  return (
    <div>
      <h2>Moralis Hello World! 🚀</h2>
      <button onClick={login}>🦊 Moralis Metamask Login</button>
      <button onClick={logOut} disabled={isAuthenticating}>
        Logout
      </button>

      <div>
        {error && (
          <p>{error}</p>
        )}
        <button onClick={() => fetch()} disabled={isFetching}>
          Transfer
        </button>
      </div>
    </div>
  );
}

注意点

Moralis側で選択したチェーン（基本はRopstenなどテストネットでしょう）にMetaMaskで自分で切り替えて試すこと
ログインをきちんとしてから transfer ボタンを押さないと authenticate エラーがでてしまうこと
もしかすると Node.js のバージョンによってエラーがでるかもです（自分は v14.19.0 でした）

参考リンク

一応、僕が参考にしたブログは以下です。が、インストールするパッケージが微妙に公式と違ったり、実際のログインやTransferのコードが違うので注意です！

create-next-app

公式ドキュメントに従って進める

コード

注意点

参考リンク

Discussion