import { IOasisTransaction , IQuery , OasisTransactionDocument , } from "@anthem/utils" ; import { Code } from "@blueprintjs/core" ; import { FiatPriceHistoryProps , OasisTransactionsProps , withFiatPriceHistory , withGraphQLVariables , withOasisTransactions , } from "graphql/queries" ; import Modules , { ReduxStoreState } from "modules/root" ; import { i18nSelector } from "modules/settings/selectors" ; import React from "react" ; import { Query , QueryResult } from "react-apollo" ; import { connect } from "react-redux" ; import { RouteComponentProps } from "react-router" ; import { withRouter } from "react-router-dom" ; import { getTransactionHashFromUrl } from "tools/client-utils" ; import { composeWithProps } from "tools/context-utils" ; import { GraphQLGuardComponentMultipleQueries } from "ui/GraphQLGuardComponents" ; import { Centered , DashboardLoader , View } from "ui/SharedComponents" ; import Toast from "ui/Toast" ; import OasisTransactionListItem from "./OasisTransactionListItem" ; /** ===========================================================================
 * React Component
 * ============================================================================
 */ class OasisTransactionDetailLoadingContainer extends React . PureComponent < IProps > { render ( ) { const { i18n } = this . props ; const hash = getTransactionHashFromUrl ( this . props . location . pathname ) ; const transactionMayExist = this . maybeFindTransactionInApolloCache ( hash ) ; if ( transactionMayExist ) { return this . renderTransaction ( transactionMayExist ) ; } else { return ( < View > < Query query = { OasisTransactionDocument } variables = { { hash } } > { ( transaction ) => { return ( < GraphQLGuardComponentMultipleQueries tString = { i18n . tString } loadingComponent = { < DashboardLoader / > } errorComponent = { this . renderEmptyResult ( ) } results = { [ [ transaction , [ "data" , "oasisTransaction" ] ] ] } > { ( [ transactionResult ] ) => { return this . renderTransaction ( transactionResult ) ; } } < /GraphQLGuardComponentMultipleQueries>); } } < /Query> < /View>); } } renderEmptyResult = ( ) => { const { i18n } = this . props ; const hash = getTransactionHashFromUrl ( this . props . location . pathname ) ; return ( < View > < Centered style = { { marginTop : 50 , flexDirection : "column" } } > < p style = { { fontSize : 16 } } > { i18n . t ( "Transaction could not be found for hash:" ) } < /p> < Code style = { { marginTop : 12 , fontSize : 14 } } > { hash } < /Code> < /Centered> < /View>); } ; renderTransaction = ( transaction ) => { if ( ! transaction ) { return this . renderEmptyResult ( ) ; } const { ledger , settings , i18n , setAddress } = this . props ; const { network , address } = ledger ; const { t , tString , locale } = i18n ; const { isDesktop , fiatCurrency } = settings ; return ( < OasisTransactionListItem t = { t } isDetailView locale = { locale } tString = { tString } address = { address } network = { network } isDesktop = { isDesktop } key = { transaction . date } setAddress = { setAddress } transaction = { transaction } fiatCurrency = { fiatCurrency } onCopySuccess = { this . onCopySuccess } / > ) ; } ; maybeFindTransactionInApolloCache = ( hash ) : Nullable < IOasisTransaction > => { const { transactions } = this . props ; let result = null ; if ( transactions && transactions . oasisTransactions ) { result = transactions . oasisTransactions . data . find ( t => t . hash === hash ) ; } return result || null ; } ; onCopySuccess = ( address ) => { Toast . success ( this . props . i18n . tString ( "Address {{address}} copied to clipboard" , { address , } ) ) ; } ; } /** ===========================================================================
 * Props
 * ============================================================================
 */ const mapStateToProps = ( state ) => ( { i18n : i18nSelector ( state ) , settings : Modules . selectors . settings ( state ) , app : Modules . selectors . app . appSelector ( state ) , ledger : Modules . selectors . ledger . ledgerSelector ( state ) , } ) ; const dispatchProps = { setAddress : Modules . actions . ledger . setAddress , setTransactionsPage : Modules . actions . transaction . setTransactionsPage , removeLocalCopyOfTransaction : Modules . actions . transaction . removeLocalCopyOfTransaction , } ; const withProps = connect ( mapStateToProps , dispatchProps ) ; interface ComponentProps { } type ConnectProps = ReturnType < typeof mapStateToProps > & typeof dispatchProps ; interface IProps extends ConnectProps , FiatPriceHistoryProps , OasisTransactionsProps , RouteComponentProps , ComponentProps { } /** ===========================================================================
 * Export
 * ============================================================================
 */ export default composeWithProps < ComponentProps > ( withRouter , withProps , withGraphQLVariables , withOasisTransactions , withFiatPriceHistory ) ( OasisTransactionDetailLoadingContainer ) ;