68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
// Copyright 2019 @polkadot/app-generic-asset 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 BN from 'bn.js';
|
|
import React, { useState } from 'react';
|
|
import { Button, CardGrid } from '@polkadot/react-components';
|
|
import { withMulti, withObservable } from '@polkadot/react-api/hoc';
|
|
|
|
import assetRegistry, { AssetsSubjectInfo } from './assetsRegistry';
|
|
import AssetCard from './AssetCard';
|
|
import CreateModal from './modals/Create';
|
|
import translate from './translate';
|
|
|
|
type Props = I18nProps & {
|
|
assets?: AssetsSubjectInfo;
|
|
};
|
|
|
|
function Assets ({ assets, t }: Props): React.ReactElement<Props> {
|
|
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
|
const emptyScreen = !isCreateOpen && (!assets || Object.keys(assets).length === 0);
|
|
|
|
const _onForget = (id: string): void => assetRegistry.remove(id);
|
|
const _onRegister = (id: BN, name: string): void => assetRegistry.add(id.toString(), name);
|
|
const _onSaveName = (id: string, name: string): void => assetRegistry.add(id, name);
|
|
const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
|
|
|
|
return (
|
|
<CardGrid
|
|
buttons={
|
|
<Button.Group>
|
|
<Button
|
|
icon='registered'
|
|
label={t('Register Asset')}
|
|
onClick={_toggleCreate}
|
|
/>
|
|
</Button.Group>
|
|
}
|
|
emptyText={t('No assets found.')}
|
|
isEmpty={emptyScreen}
|
|
>
|
|
{isCreateOpen && (
|
|
<CreateModal
|
|
onClose={_toggleCreate}
|
|
onRegister={_onRegister}
|
|
/>
|
|
)}
|
|
{assets && Object.entries(assets).map(([id, name]): React.ReactNode => (
|
|
<AssetCard
|
|
assetId={id}
|
|
key={id}
|
|
name={name}
|
|
onForget={_onForget}
|
|
onSaveName={_onSaveName}
|
|
/>
|
|
))}
|
|
</CardGrid>
|
|
);
|
|
}
|
|
|
|
export default withMulti(
|
|
Assets,
|
|
translate,
|
|
withObservable(assetRegistry.subject, { propName: 'assets' })
|
|
);
|