操作ガイド

import { Box, Divider, Button } from '@mui/material';
import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
import { AddonButton } from '@arcblock/ux/lib/Header/addon-button';
import NavMenu from '@arcblock/ux/lib/NavMenu';
import SessionManager from '@arcblock/ux/lib/SessionManager';
import Header from '@arcblock/ux/lib/Header';
import { Icon } from '@iconify/react';

// デモンストレーション用のモックデータ
const mockBlockletMeta = {
  title: 'My App',
  description: 'A great application',
  logoUrl: 'https://www.arcblock.io/image-bin/uploads/eb1cf5d60cd85c42362920c49e3768cb.svg'
};

const mockSessionContextValue = {
  session: {
    user: {
      fullName: 'Demo User',
      did: 'z1ex...',
      role: 'admin',
    },
    // ... その他のセッションプロパティ
  },
};

export default function CustomHeaderGuide() {
  const meta = {
    ...mockBlockletMeta,
    enableConnect: true,
    enableLocale: true,
  };

  return (
    <SessionContext.Provider value={mockSessionContextValue}>
      <Header
        meta={meta}
        homeLink="https://www.arcblock.io"
        addons={(defaultAddons, { navigation }) => (
          <>
            {/* 1. カスタムナビゲーションを追加 */}
            {navigation.navItems?.length > 0 && (
              <NavMenu
                activeId={navigation.activeId}
                items={navigation.navItems}
                className="header-nav"
              />
            )}
            {/* 2. カスタムボタンを追加 */}
            <Button variant="contained" color="primary" size="small">
              Button
            </Button>
            {/* 3. カスタムアイコンボタンを追加 */}
            <AddonButton icon={<Icon icon="tabler:message-circle" />}>Chat</AddonButton>
            <AddonButton icon={<Icon icon="tabler:bell" />} />
            <Divider orientation="vertical" flexItem sx={{ height: 12, alignSelf: 'center' }} />
            {/* 4. デフォルトのアドオンをレンダリング（セッションマネージャーを含む） */}
            {defaultAddons}
          </>
        )}
      />
    </SessionContext.Provider>
  );
}

import ComponentInstaller from '@arcblock/ux/lib/ComponentInstaller';
import { Button } from '@mui/material';

const REQUIRED_COMPONENT_DID = 'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9'; // DIDの例

// これが依存関係を必要とするコンポーネントです
function MyFeatureButton() {
  return <Button variant="contained">Use Awesome Feature</Button>;
}

export default function OptionalComponentGuide() {
  return (
    <ComponentInstaller
      // チェックするコンポーネントのDID
      did={REQUIRED_COMPONENT_DID}
      // インストーラーUIの表示を許可されるロールのリスト
      roles={['owner', 'admin']}
      // trueの場合、非管理者はインストーラーUIを表示しません
      noPermissionMute
      // オプション：コンポーネントがインストールされていない場合に非管理者に表示するもの
      fallback={<div>This feature is not available.</div>}
      // インストール成功後に実行されるコールバック
      onInstalled={() => console.log('Component was installed successfully!')}
    >
      {/* この子はコンポーネントがすでにインストールされている場合にのみレンダリングされます */}
      <MyFeatureButton />
    </ComponentInstaller>
  );
}

import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
import Header from '@arcblock/ux/lib/Header';
import NotificationAddon from '@arcblock/ux/lib/common/notification-addon';

// デモンストレーション用のモックデータ
const mockBlockletMeta = {
  title: 'My App',
  description: 'A great application',
  logoUrl: 'https://www.arcblock.io/image-bin/uploads/eb1cf5d60cd85c42362920c49e3768cb.svg'
};

const mockSessionContextValue = {
  session: {
    user: {
      fullName: 'Demo User',
      did: 'z1ex...',
      role: 'admin',
    },
    unReadCount: 3, // 初期の未読数
    setUnReadCount: () => {}, // 状態セッター関数
    // ... その他のセッションプロパティ
  },
};

export default function NotificationGuide() {
  const meta = { ...mockBlockletMeta, enableConnect: true };

  return (
    <SessionContext.Provider value={mockSessionContextValue}>
      <Header
        meta={meta}
        addons={(defaultAddons) => (
          <>
            {/* NotificationAddonがリアルタイムの更新を処理します */}
            <NotificationAddon session={mockSessionContextValue.session} />
            {defaultAddons}
          </>
        )}
      />
    </SessionContext.Provider>
  );
}

import { useState } from 'react';
import { Button, CircularProgress } from '@mui/material';
import { BlockletStudio } from '@arcblock/ux/lib/BlockletStudio';

// スタジオ/公開UIを提供するブロックレットのDID
const AI_STUDIO_COMPONENT_DID = 'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9'; // DIDの例

export default function PublisherGuide() {
  const [isStudioOpen, setStudioOpen] = useState(false);
  const [isOpening, setOpening] = useState(false);

  const handleShowDialog = () => {
    setOpening(true);
    setStudioOpen(true);
  };

  return (
    <>
      <Button
        variant="contained"
        onClick={handleShowDialog}
        disabled={isOpening}
        startIcon={isOpening ? <CircularProgress size={16} /> : null}>
        Publish to Studio
      </Button>

      <BlockletStudio
        // ダイアログの可視性を制御します
        open={isStudioOpen}
        setOpen={setStudioOpen}
        // 公開されるアイテムの基本情報
        title="My Demo Project"
        description="This is a project published from my blocklet."
        // スタジオサービスコンポーネントのDID
        componentDid={AI_STUDIO_COMPONENT_DID}
        // ブロックレットのリソースAPIに送信されるパラメータ
        resourcesParams={{ projectId: 'test-project-123' }}
        // 事前に選択されたコンポーネント
        components={[
          { did: 'z8ia3xzq2tMq8CRHfaXj1BTYJyYnEcHbqP8cJ', included: true, required: true },
          { did: 'z2qZyjnsRffFtn2PDnDwDHTRbAu53RpKqDtFZ', included: true, required: false },
        ]}
        // 事前に選択されたリソース
        resources={{
          // キーはリソースプロバイダーブロックレットのDIDです
          z8iZpog7mcgcgBZzTiXJCWESvmnRrQmnd3XBB: [
            'template-448698592710885376',
            'example-448698592710885376',
          ],
        }}
        // イベントハンドラ
        onOpened={() => setOpening(false)}
        onUploaded={() => alert('Upload complete!')}
        onReleased={() => {
          alert('Successfully released!');
          setStudioOpen(false);
        }}
      />
    </>
  );
}