import React , { FunctionComponent , useMemo } from "react" ; import { Card , CardDivider , CardHeaderFullButton } from "../../components/card" ; import { ViewStyle } from "react-native" ; import { observer } from "mobx-react-lite" ; import { GovernanceCardBody } from "../governance" ; import { useStore } from "../../stores" ; import { ObservableQueryProposal , Governance } from "@keplr-wallet/stores" ; import { useSmartNavigation } from "../../navigation" ; export const GovernanceCard = observer ( ( { containerStyle } ) => { const { chainStore , queriesStore } = useStore ( ) ; const queries = queriesStore . get ( chainStore . current . chainId ) ; const allProposals = queries . cosmos . queryGovernance . proposals ; const showingProposals = useMemo ( ( ) => { let result = [ ] ; if ( allProposals . length > 0 ) { result = result . concat ( allProposals . filter ( ( proposal ) => proposal . proposalStatus === Governance . ProposalStatus . VOTING_PERIOD ) ) ; if ( result . length === 0 ) { const nonDepositPeriodProposals = allProposals . filter ( ( proposal ) => proposal . proposalStatus !== Governance . ProposalStatus . DEPOSIT_PERIOD ) ; if ( nonDepositPeriodProposals . length > 0 ) { result . push ( nonDepositPeriodProposals [ 0 ] ) ; } else { result . push ( allProposals [ 0 ] ) ; } } } return result ; } , [ allProposals ] ) ; const smartNavigation = useSmartNavigation ( ) ; return ( < Card style = { containerStyle } > < CardHeaderFullButton title = "Governance" onPress = { ( ) => { smartNavigation . navigateSmart ( "Governance" , undefined ) ; } } /> { } { showingProposals . map ( ( proposal , i ) => { return ( < React . Fragment key = { proposal . id } > < GovernanceCardBody proposalId = { proposal . id } /> { showingProposals . length - 1 !== i ? < CardDivider /> : null} < /React.Fragment>); } ) } < /Card>); } ) ;