ghost-portal/packages/react-components/src/ChainLock.tsx
2019-11-16 20:21:46 +01:00

58 lines
1.4 KiB
TypeScript

// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import styled from 'styled-components';
import { useApi } from '@polkadot/react-hooks';
import translate from './translate';
import Toggle from './Toggle';
interface Props extends I18nProps {
className?: string;
genesisHash: string | null;
isDisabled?: boolean;
onChange: (genesisHash: string | null) => void;
preventDefault?: boolean;
}
function ChainLock ({ className, genesisHash, isDisabled, onChange, preventDefault, t }: Props): React.ReactElement<Props> | null {
const { isDevelopment, api } = useApi();
if (isDevelopment) {
return null;
}
const isTiedToChain = api.genesisHash.eq(genesisHash);
const _onChange = (isTiedToChain: boolean): void =>
onChange(
isTiedToChain
? api.genesisHash.toHex()
: null
);
return (
<Toggle
className={className}
defaultValue={isTiedToChain}
isDisabled={isDisabled}
label={
isTiedToChain
? t('only this network')
: t('use on any network')
}
onChange={_onChange}
preventDefault={preventDefault}
/>
);
}
export default translate(
styled(ChainLock)`
text-align: right;
`
);