1  import React, { useState } from 'react'
  2  import {
  3    CardCommunity,
  4    VoteHistoryTable,
  5    VoteHistoryTableCell,
  6    VoteHistoryTableColumnCell,
  7    VoteHistoryTableColumnCellDate,
  8  } from '../components/card/CardCommunity'
  9  import { VotePropose } from '../components/votes/VotePropose'
 10  import styled from 'styled-components'
 11  import { useCommunities } from '../hooks/useCommunities'
 12  import { useHistory, useParams } from 'react-router'
 13  import { ButtonSecondary, VoteSendingBtn } from '../components/Button'
 14  import { CommunitySkeleton } from '../components/skeleton/CommunitySkeleton'
 15  import { HeaderVotingMobile } from './VotingMobile'
 16  import { ConnectMobile } from './ConnectMobile'
 17  import { HistoryLink } from './CardVoteMobile'
 18  import { useContractCall, useContractFunction } from '@usedapp/core'
 19  import { useGetCurrentVoting } from '../hooks/useGetCurrentVoting'
 20  import { MobileHeading, MobileBlock, MobileTop, MobileWrap, ColumnFlexDiv } from '../constants/styles'
 21  import { useFeaturedVotes } from '../providers/featuredVotes/provider'
 22  import { useContracts } from '../hooks/useContracts'
 23  import { useSendWakuFeature } from '../hooks/useSendWakuFeature'
 24  import { useFeaturedVotingState } from '../hooks/useFeaturedVotingState'
 25  import { useAccount } from '../hooks/useAccount'
 26  import { useWaku } from '../providers/waku/provider'
 27  
 28  export function FeatureMobile() {
 29    const { publicKey } = useParams<{ publicKey: string }>()
 30    const [community] = useCommunities([publicKey])
 31    const [proposingAmount, setProposingAmount] = useState(0)
 32    const { account, isActive } = useAccount()
 33    const { isConnected } = useWaku()
 34    const sendWaku = useSendWakuFeature()
 35    const { activeVoting } = useFeaturedVotes()
 36    const { featuredVotingContract } = useContracts()
 37    const { send } = useContractFunction(featuredVotingContract, 'initializeVoting')
 38    const featuredVotingState = useFeaturedVotingState(activeVoting)
 39    const [isInCooldownPeriod] =
 40      useContractCall({
 41        abi: featuredVotingContract.interface,
 42        address: featuredVotingContract.address,
 43        method: 'isInCooldownPeriod',
 44        args: [community.publicKey],
 45      }) ?? []
 46    const inFeatured = isInCooldownPeriod
 47  
 48    const [showHistory, setShowHistory] = useState(false)
 49    const isDisabled = community ? community.votingHistory.length === 0 : false
 50  
 51    const { currentVoting } = useGetCurrentVoting(community?.publicKey)
 52    const history = useHistory()
 53  
 54    if (!community) {
 55      return <CommunitySkeleton />
 56    } else {
 57      return (
 58        <MobileWrap>
 59          <HeaderVotingMobile>
 60            <ConnectMobile />
 61            <MobileTop>
 62              <CardCommunity community={community} />
 63            </MobileTop>
 64          </HeaderVotingMobile>
 65  
 66          <MobileBlock>
 67            <FeatureHeading>{`Feature ${community.name}?`}</FeatureHeading>
 68            <VotePropose setProposingAmount={setProposingAmount} proposingAmount={proposingAmount} />
 69            <FeatureBtn
 70              disabled={
 71                !isConnected ||
 72                !account ||
 73                !isActive ||
 74                inFeatured ||
 75                featuredVotingState === 'verification' ||
 76                featuredVotingState === 'ended'
 77              }
 78              onClick={async () => {
 79                if (!activeVoting) {
 80                  await send(community.publicKey, proposingAmount)
 81                } else {
 82                  await sendWaku(proposingAmount, community.publicKey)
 83                }
 84                history.go(-1)
 85              }}
 86            >
 87              Feature this community! <span style={{ fontSize: '20px' }}>⭐️</span>
 88            </FeatureBtn>
 89            {currentVoting && (
 90              <ColumnFlexDiv>
 91                <VoteSendingBtn onClick={() => history.push(`/votingRoom/${currentVoting.ID}`)}>
 92                  Removal vote in progress
 93                </VoteSendingBtn>
 94              </ColumnFlexDiv>
 95            )}
 96            {!isDisabled && (
 97              <HistoryLink
 98                className={showHistory ? 'opened' : ''}
 99                onClick={() => setShowHistory(!showHistory)}
100                disabled={isDisabled}
101              >
102                Voting history
103              </HistoryLink>
104            )}
105            {showHistory && (
106              <VoteHistoryTable>
107                <tbody>
108                  <tr>
109                    <VoteHistoryTableColumnCellDate>Date</VoteHistoryTableColumnCellDate>
110                    <VoteHistoryTableColumnCell>Type</VoteHistoryTableColumnCell>
111                    <VoteHistoryTableColumnCell>Result</VoteHistoryTableColumnCell>
112                  </tr>
113                  {community.votingHistory.map((vote) => {
114                    return (
115                      <tr key={vote.ID}>
116                        <VoteHistoryTableCell>{vote.date.toLocaleDateString()}</VoteHistoryTableCell>
117                        <VoteHistoryTableCell>{vote.type}</VoteHistoryTableCell>
118                        <VoteHistoryTableCell>{vote.result}</VoteHistoryTableCell>
119                      </tr>
120                    )
121                  })}
122                </tbody>
123              </VoteHistoryTable>
124            )}
125          </MobileBlock>
126        </MobileWrap>
127      )
128    }
129  }
130  
131  const FeatureHeading = styled(MobileHeading)`
132    margin-bottom: 16px;
133  `
134  
135  const FeatureBtn = styled(ButtonSecondary)`
136    width: 100%;
137    padding: 11px 0;
138    font-weight: 500;
139    font-size: 15px;
140    line-height: 22px;
141    margin-top: 32px;
142  `