35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import loadable from 'loadable-components';
|
|
import { AUTH_PROVIDER } from 'utils/auth';
|
|
import './ProvideIdentity.less';
|
|
|
|
const AddressProvider = loadable(() => import('./providers/Address'));
|
|
const LedgerProvider = loadable(() => import('./providers/Ledger'));
|
|
const TrezorProvider = loadable(() => import('./providers/Trezor'));
|
|
const Web3Provider = loadable(() => import('./providers/Web3'));
|
|
|
|
const PROVIDER_COMPONENTS = {
|
|
[AUTH_PROVIDER.ADDRESS]: AddressProvider,
|
|
[AUTH_PROVIDER.LEDGER]: LedgerProvider,
|
|
[AUTH_PROVIDER.TREZOR]: TrezorProvider,
|
|
[AUTH_PROVIDER.WEB3]: Web3Provider,
|
|
};
|
|
|
|
interface Props {
|
|
provider: AUTH_PROVIDER;
|
|
onSelectAddress(addr: string): void;
|
|
reset(): void;
|
|
}
|
|
|
|
export default (props: Props) => {
|
|
const ProviderComponent = PROVIDER_COMPONENTS[props.provider];
|
|
return (
|
|
<div className="ProvideIdentity">
|
|
<ProviderComponent onSelectAddress={props.onSelectAddress} />
|
|
<p className="ProvideIdentity-back">
|
|
Want to use a different method? <a onClick={props.reset}>Click here</a>.
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|