CurrencySelector

export type TPaymentCurrency = {
  id: string;       // 通貨オプションの一意の識別子
  logo: string;     // 通貨/メソッドのロゴのURL
  name: string;     // 通貨の表示名
  symbol: string;   // 通貨記号（例：'$'、'€'）
  method: {         // 関連する支払い方法
    id: string;
    name: string;
  };
};

import React, { useState } from 'react';
import { PaymentProvider } from '@blocklet/payment-react';
import { CurrencySelector } from '@blocklet/payment-react/components';
import type { TPaymentCurrency } from '@blocklet/payment-types';
import { useSessionContext } from '@/hooks/session-context'; // このインポートパスをあなたのプロジェクト構造に合わせて調整してください

// デモンストレーション用のモックデータ
const mockCurrencies: TPaymentCurrency[] = [
  {
    id: 'usd_xxxxxx',
    logo: 'https://path-to-your/usd-logo.png',
    name: 'US Dollar',
    symbol: 'USD',
    method: {
      id: 'stripe_yyyyy',
      name: 'Stripe',
    },
  },
  {
    id: 'eth_zzzzzz',
    logo: 'https://path-to-your/eth-logo.png',
    name: 'Ethereum',
    symbol: 'ETH',
    method: {
      id: 'crypto_aaaaa',
      name: 'Crypto Payment',
    },
  },
];

function MyCurrencySelectorComponent() {
  const [selectedCurrency, setSelectedCurrency] = useState<string>(mockCurrencies[0].id);

  const handleCurrencyChange = (currencyId: string, methodId?: string) => {
    console.log(`選択された通貨: ${currencyId}, メソッド: ${methodId}`);
    setSelectedCurrency(currencyId);
  };

  return (
    <div>
      <h3>通貨を選択</h3>
      <CurrencySelector
        value={selectedCurrency}
        currencies={mockCurrencies}
        onChange={handleCurrencyChange}
      />
    </div>
  );
}

// あなたのアプリのエントリーポイント
export default function App() {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>読み込み中...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <MyCurrencySelectorComponent />
    </PaymentProvider>
  );
}