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(`Selected currency: ${currencyId}, Method: ${methodId}`);
    setSelectedCurrency(currencyId);
  };

  return (
    <div>
      <h3>Select a Currency</h3>
      <CurrencySelector
        value={selectedCurrency}
        currencies={mockCurrencies}
        onChange={handleCurrencyChange}
      />
    </div>
  );
}

// 您的应用的入口点
export default function App() {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>Loading...</div>;
  }

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