MyCrypto/common/containers/Tabs/SendTransaction/index.tsx

56 lines
1.6 KiB
TypeScript

import TabSection from 'containers/TabSection';
import { OfflineAwareUnlockHeader } from 'components';
import React from 'react';
import { connect } from 'react-redux';
import { SideBar } from './components/index';
import { IReadOnlyWallet, IFullWallet } from 'libs/wallet';
import { getWalletInst } from 'selectors/wallet';
import { AppState } from 'reducers';
import tabs from './tabs';
import SubTabs, { Props as TabProps } from 'components/SubTabs';
import { RouteComponentProps } from 'react-router';
interface StateProps {
wallet: AppState['wallet']['inst'];
}
export interface SubTabProps {
wallet: WalletTypes;
}
export type WalletTypes = IReadOnlyWallet | IFullWallet | undefined | null;
type Props = StateProps & RouteComponentProps<{}>;
class SendTransaction extends React.Component<Props> {
public render() {
const { wallet, location } = this.props;
const activeTab = location.pathname.split('/')[2];
const tabProps: TabProps<SubTabProps> = {
root: 'account',
activeTab: wallet ? (wallet.isReadOnly ? 'info' : activeTab) : activeTab,
sideBar: <SideBar />,
tabs,
subTabProps: { wallet }
};
interface IWalletTabs {
new (): SubTabs<SubTabProps>;
}
const WalletTabs = SubTabs as IWalletTabs;
return (
<TabSection>
<section className="Tab-content">
<OfflineAwareUnlockHeader allowReadOnly={true} />
{wallet && <WalletTabs {...tabProps} />}
</section>
</TabSection>
);
}
}
export default connect((state: AppState) => ({ wallet: getWalletInst(state) }))(SendTransaction);