Newer
Older
import { useState } from 'react';
import Identicon from '@polkadot/react-identicon';
import 'primereact/resources/themes/md-dark-indigo/theme.css'
import 'primereact/resources/primereact.min.css'
import { Dropdown } from 'primereact/dropdown'
import styles from '@/styles/Home.module.css'
export const accountOptionTemplate = (option, props) => {
if ( option ) {
return (
<div className={ styles.accountOption }>
<div>
<Identicon
value={option?.address}
size={32}
theme='polkadot'
/>
{option?.meta.name }
export default function AccountSelector( { accounts, onSelectAccount, actingAccount } ) {
return (
<Dropdown
options={ accounts }
optionLabel="address"
placeholder="Select Account"
className={ styles.dropdown }
itemTemplate={ accountOptionTemplate }
valueTemplate={ accountOptionTemplate }
onChange={(event) => {
console.log(event)
onSelectAccount(event.target.value.address)
}}
/>
)
// return (
// <>
// <label for="select-polkadot-account">
// Select the account you want to use
// </label>
// <select
// id="select-polkadot-account"
// className="p-3 m-3 border-2 border-green-500"
// onChange={(event) => {
// console.log(event);
// onSelectAccount(event.target.value);
// }}
// >
// {accounts.map((a) => (
// <option key={a.address} value={a.address}>
// {a.address} [{a.meta.name}]
// </option>
// ))}
// </select>
// </>
// )
}