React에서 Metamask 구현

Terminal

git clone https://github.com/h662/cra-tailwind-template-2.git wallet-connect

openfolder->wallet-connect

npm install

npm run start

<button className="bg-blue-600 text-white px-4 py-2 text-lg rounded-full">
        🦊 MetaMask Login
      </button>

import React from "react";
import { useSpring, animated } from "react-spring";

const App = () => {
  const buttonAnimation = useSpring({
    from: { transform: "scale(0.8)", opacity: 0 },
    to: { transform: "scale(1)", opacity: 1 },
    config: { tension: 300, friction: 10 },
  });

  return (
    <div className="bg-gradient-to-r from-black to-purple-800 min-h-screen flex flex-col justify-center items-center">
      <animated.button
        style={buttonAnimation}
        className="bg-gradient-to-r from-blue-500 to-purple-700 px-8 py-4 text-white rounded-md hover:from-blue-600 hover:to-purple-600"
      >
        🦊 MetaMask Login
      </animated.button>
    </div>
  );
};

export default App;

시크릿 창 활성화(command-shift-N)

F12 -> console Tab -> window.ethereum

https://www.react-spring.dev/

Wallet connect

https://docs.metamask.io/

https://docs.walletconnect.com/

Use MetaMask SDK with React | MetaMask developer documentation

https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/react/

SDK 쓰게 되면 웹브라우저나 모바일에서 하나의 명령어로 여러군데서 쓸 수 있음.

Terminal

npm i @metamask/sdk-react

App.jsx Code

// src/App.jsx
import { useState } from "react";
import { useSpring, animated } from "react-spring";
import { useSDK } from "@metamask/sdk-react";
import "animate.css";

const App = () => {
  const [account, setAccount] = useState("");

  const { sdk } = useSDK();

  const onClickMetaMask = async () => {
    try {
      const accounts = await sdk?.connect(); //optional chaining

      setAccount(accounts[0]);
    } catch (error) {
      console.error(error);
    }
  };

  const buttonAnimation = useSpring({
    from: { transform: "scale(0.8)", opacity: 0 },
    to: { transform: "scale(1)", opacity: 1 },
    config: { tension: 300, friction: 10 },
  });

  return (
    <div className="bg-gradient-to-r from-black to-purple-800 text-white min-h-screen flex flex-col justify-center items-center">
      {account ? (
        <>
          <div>
            Hello, {account.substring(0, 7)}...
            {account.substring(account.length - 5)}
          </div>
          <button onClick={() => setAccount("")}>Logout</button>
        </>
      ) : (
        <>
          <button className="mb-4 text-7xl">
            <animated.button style={buttonAnimation}>🦊</animated.button>
          </button>
          <button
            onClick={onClickMetaMask}
            className="bg-gradient-to-r from-blue-700 to-purple-700 px-8 py-4 text-black font-semibold font-serif rounded-md hover:from-blue-600 hover:to-purple-600"
          >
            <animated.button style={buttonAnimation}>
              MetaMask login
            </animated.button>
          </button>
        </>
      )}
    </div>
  );
};

export default App;

index.js Code

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { MetaMaskProvider } from "@metamask/sdk-react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <MetaMaskProvider
      sdkOption={{
        dappMetadata: {
          name: "Wallet Connect",
          url: window.location.host,
        },
      }}
    >
      <App />
    </MetaMaskProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();