Moralis x Next.js Minimum ETH transfer code
Ethereum, Polygon, Avalanche などのブロックチェーンでのMetaMaskログイン、トークンやNFTの送信（Transfer）、ユーザー情報の取得などをフロントエンドから簡単にしてくれるライブラリ Moralis を試してみました。
ただまだ発展途上の業界やライブラリだからか、個人ブログのチュートリアルや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のコードが違うので注意です！
Author And Source
この問題について(Moralis x Next.js Minimum ETH transfer code), 我々は、より多くの情報をここで見つけました https://zenn.dev/maztak/articles/fc5c64fe80901a著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol