はじめに

npm install @arcblock/did-connect-react

yarn add @arcblock/did-connect-react

import React from 'react';
import { createAuthServiceSessionContext } from '@arcblock/did-connect-react/lib/Session';
import Home from './Home'; // このコンポーネントは次のステップで作成します

// createAuthServiceSessionContextはBlocklet環境に最適化されています
const { SessionProvider } = createAuthServiceSessionContext();

function App() {
  return (
    // serviceHostプロパティは、バックエンド認証サービスのベースパスを指します。
    // 標準的なBlockletの場合、これは通常blockletのプレフィックスまたは'/'です。
    <SessionProvider serviceHost="/">
      <Home />
    </SessionProvider>
  );
}

export default App;

import React, { useContext } from 'react';
import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';
import Button from '@arcblock/ux/lib/Button'; // 汎用ボタン
import CircularProgress from '@mui/material/CircularProgress';

function Home() {
  // セッションコンテキストにアクセス
  const { session } = useContext(SessionContext);

  // アクセスしやすいように分割代入
  const { user, loading, login, logout } = session;

  // セッションが初期化されている間、ローディングインジケーターを表示
  if (loading) {
    return <CircularProgress />;
  }

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      {user ? (
        // ユーザーがログインしている場合は、DIDとログアウトボタンを表示
        <div>
          <h1>ようこそ！</h1>
          <p>あなたのDID: {user.did}</p>
          <Button variant="contained" color="secondary" onClick={logout}>
            ログアウト
          </Button>
        </div>
      ) : (
        // ログインしていない場合は、ログインボタンを表示
        <div>
          <h1>サインインしてください</h1>
          <ConnectButton onClick={() => login()}>
            ウォレットに接続
          </ConnectButton>
        </div>
      )}
    </div>
  );
}

export default Home;