Skip to content
Snippets Groups Projects
account-select.tsx 1.94 KiB
Newer Older
Niklas P's avatar
Niklas P committed
import { useState } from 'react';
Niklas P's avatar
Niklas P committed
import Identicon from '@polkadot/react-identicon';
Niklas P's avatar
Niklas P committed
import { usePolkadotExtensionWithContext } from '@/context/polkadotExtensionContext';

Niklas P's avatar
Niklas P committed
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'
Niklas P's avatar
Niklas P committed

Niklas P's avatar
Niklas P committed

export const accountValueTemplate = (option: any, props: any) => {
Niklas P's avatar
Niklas P committed
    if ( option ) {
    return (
        <div className={ styles.accountOption }>
            <div>
                <Identicon
                    value={option?.address}
                    size={32}
                    theme='polkadot'
                />
                {option?.meta?.name }
Niklas P's avatar
Niklas P committed
            </div>
Niklas P's avatar
Niklas P committed
        </div>
    );
    }

    return <span>{props.placeholder}</span>;
};
Niklas P's avatar
Niklas P committed

export const accountOptionTemplate = (option: any) => {
    return (
        <div className={ styles.accountOption }>
            <div>
                <Identicon
                    value={option?.address}
                    size={32}
                    theme='polkadot'
                />
                {option?.meta?.name }
Niklas P's avatar
Niklas P committed
export default function AccountSelector( ) {
Niklas P's avatar
Niklas P committed
    const { accounts, actingAccount, setActingAccountIdx } = usePolkadotExtensionWithContext()
Niklas P's avatar
Niklas P committed

Niklas P's avatar
Niklas P committed
    const [accounts,setAccounts] = useState([])

Niklas P's avatar
Niklas P committed
    return (
        <Dropdown 
Niklas P's avatar
Niklas P committed
            options={ accounts ?? undefined }
Niklas P's avatar
Niklas P committed
            optionLabel="address" 
            placeholder="Select Account"
            className={ styles.dropdown }
Niklas P's avatar
Niklas P committed
            value={ actingAccount }
Niklas P's avatar
Niklas P committed
            itemTemplate={ accountOptionTemplate }
            valueTemplate={ accountValueTemplate }
Niklas P's avatar
Niklas P committed
            onChange={(event) => {
Niklas P's avatar
Niklas P committed
                const accountIdx = accounts ? accounts.findIndex((account) => account.address === event.target.value.address) : 0
                setActingAccountIdx(accountIdx)
Niklas P's avatar
Niklas P committed
            }}
        />
    )
}