react-icons/fi#FiThumbsUp TypeScript Examples

Stakes = () => {
  const {
    context: { daoStore, configStore, providerStore, daoService },
  } = useContext();

  const [stakeAmount, setStakeAmount] = useState(0);
  // We should get the ID in another way
  const proposalId = useLocation().pathname.split('/')[3];

  const proposal = daoStore.getProposal(proposalId);
  const proposalEvents = daoStore.getProposalEvents(proposalId);
  const { account } = providerStore.getActiveWeb3React();
  const scheme = daoStore.getScheme(proposal.scheme);

  let stakedAmount = bnum(0);
  let positiveStakesCount = proposalEvents.stakes.filter(
    stake => stake.vote.toString() === '1'
  ).length;
  let negativeStakesCount = proposalEvents.stakes.filter(
    stake => stake.vote.toString() === '2'
  ).length;
  const networkContracts = configStore.getNetworkContracts();
  const votingMachines = networkContracts.votingMachines;

  const redeemsLeft = daoStore.getUserRedeemsLeft(account);

  const votingMachineOfProposal =
    daoStore.getVotingMachineOfProposal(proposalId);

  const votingMachineTokenName =
    votingMachines[votingMachineOfProposal.address].type == 'DXDVotingMachine'
      ? 'DXD'
      : 'GEN';

  const votingMachineTokenAllowed = useAllowance(
    votingMachines[votingMachineOfProposal.address].token,
    account,
    votingMachineOfProposal.address
  );

  const votingMachineTokenApproved = votingMachineTokenAllowed.gt(
    bnum(parseUnits('10000'))
  );

  const votingParameters =
    daoStore.getVotingMachineOfProposal(proposalId).params;

  proposalEvents.stakes.map(stake => {
    if (stake.staker === account && stake.vote.toString() === '1') {
      stakedAmount = stakedAmount.plus(stake.amount);
    } else if (stake.staker === account && stake.vote.toString() === '2') {
      stakedAmount = stakedAmount.minus(stake.amount);
    }
  });

  const { recommendedStakeToBoost, recommendedStakeToUnBoost } =
    calculateStakes(
      votingParameters.thresholdConst,
      scheme.boostedProposals,
      proposal.stateInVotingMachine === 4
        ? daoStore.getAmountOfProposalsPreBoostedInScheme(scheme.address) - 1
        : daoStore.getAmountOfProposalsPreBoostedInScheme(scheme.address),
      proposal.positiveStakes,
      proposal.negativeStakes
    );

  if (Number(votingMachineTokenApproved) > 0 && stakeAmount === 0) {
    setStakeAmount(
      Number(formatBalance(recommendedStakeToBoost, 18, 1, false))
    );
  }

  const { finishTime } = daoStore.getProposalStatus(proposalId);
  const finishTimeReached = finishTime.toNumber() < moment().unix();

  // Event Handlers
  function onStakeAmountChange(event) {
    setStakeAmount(event.target.value);
  }

  const submitStake = function (decision) {
    daoService.stake(
      decision,
      denormalizeBalance(bnum(stakeAmount)).toString(),
      proposalId
    );
  };

  const redeem = function () {
    if (
      scheme.type === 'ContributionReward' &&
      networkContracts.daostack[scheme.address].redeemer
    ) {
      daoService.redeemContributionReward(
        networkContracts.daostack[scheme.address].redeemer,
        scheme.address,
        scheme.votingMachine,
        proposalId,
        account
      );
    } else {
      daoService.redeem(proposalId, account);
    }
  };

  const redeemDaoBounty = function () {
    daoService.redeemDaoBounty(proposalId, account);
  };

  const votingMachineUsed = daoStore.getVotingMachineOfProposal(proposalId);
  const approveVotingMachineToken = function () {
    daoService.approveVotingMachineToken(votingMachineUsed);
  };

  return (
    <>
      <SpaceAroundRow>
        <strong>
          Stakes <Question question="5" />
        </strong>
      </SpaceAroundRow>
      <SpaceAroundRow>
        <PositiveSummary>
          <SummaryTotal>
            <AmountBadge color="green">{positiveStakesCount}</AmountBadge>
            {formatBalance(proposal.positiveStakes).toString()}
            {votingMachineTokenName}
          </SummaryTotal>
          <HorizontalSeparator />
          <SummaryDetails>
            {proposalEvents &&
              proposalEvents.stakes
                .filter(stakeEvent => stakeEvent?.vote?.toString() === '1')
                .map((stakeEvent, i) => (
                  <Vote key={`stakeUp${i}`} style={{ flexDirection: 'column' }}>
                    <BlockchainLink
                      size="short"
                      type="user"
                      text={stakeEvent.staker}
                    />
                    <span>
                      {formatBalance(bnum(stakeEvent.amount)).toString()}
                      {votingMachineTokenName}
                    </span>
                  </Vote>
                ))}
          </SummaryDetails>
        </PositiveSummary>

        <NegativeSummary>
          <SummaryTotal>
            <AmountBadge color="red">{negativeStakesCount}</AmountBadge>
            {formatBalance(proposal.negativeStakes).toString()}
            {votingMachineTokenName}
          </SummaryTotal>
          <HorizontalSeparator />
          <SummaryDetails>
            {proposalEvents &&
              proposalEvents.stakes
                .filter(stakeEvent => stakeEvent?.vote?.toString() === '2')
                .map((stakeEvent, i) => (
                  <Vote
                    key={`stakeDown${i}`}
                    style={{ flexDirection: 'column' }}
                  >
                    <BlockchainLink
                      size="short"
                      type="user"
                      text={stakeEvent.staker}
                    />
                    <span>
                      {formatBalance(bnum(stakeEvent.amount)).toString()}
                      {votingMachineTokenName}
                    </span>
                  </Vote>
                ))}
          </SummaryDetails>
        </NegativeSummary>
      </SpaceAroundRow>

      {stakedAmount.toNumber() > 0 ? (
        <SpaceAroundRow>
          {`Already staked ${
            stakedAmount.toNumber() > 0 ? 'for' : 'against'
          } with `}
          {formatBalance(stakedAmount).toString()} {votingMachineTokenName}
        </SpaceAroundRow>
      ) : (
        <div></div>
      )}

      {account &&
      !finishTimeReached &&
      (proposal.stateInVotingMachine === 3 ||
        proposal.stateInVotingMachine === 4) &&
      !votingMachineTokenApproved ? (
        <SpaceAroundRow>
          <ActionArea>
            <small>Approve {votingMachineTokenName} to stake</small>
            <ActionButton
              color="blue"
              onClick={() => approveVotingMachineToken()}
            >
              Approve {votingMachineTokenName}
            </ActionButton>
          </ActionArea>
        </SpaceAroundRow>
      ) : (
        account &&
        !finishTimeReached &&
        (proposal.stateInVotingMachine === 3 ||
          proposal.stateInVotingMachine === 4) && (
          <div>
            {Number(recommendedStakeToBoost) > 0 && (
              <small>
                Stake ~
                {formatBalance(
                  recommendedStakeToBoost,
                  18,
                  1,
                  false
                ).toString()}
                {votingMachineTokenName} to boost
              </small>
            )}
            {Number(recommendedStakeToUnBoost) > 0 && (
              <small>
                Stake ~
                {formatBalance(
                  recommendedStakeToUnBoost,
                  18,
                  1,
                  false
                ).toString()}
                {votingMachineTokenName} to unboost
              </small>
            )}
            <SpaceAroundRow>
              <AmountInput
                type="number"
                placeholder={votingMachineTokenName}
                name="stakeAmount"
                value={stakeAmount}
                id="stakeAmount"
                step="0.01"
                min="0"
                onChange={onStakeAmountChange}
                style={{ flex: 2 }}
              />
              <ActionButton
                style={{ flex: 1, maxWidth: '20px', textAlign: 'center' }}
                color="green"
                onClick={() => submitStake(1)}
              >
                <FiThumbsUp />
              </ActionButton>
              <ActionButton
                style={{ flex: 1, maxWidth: '20px', textAlign: 'center' }}
                color="red"
                onClick={() => submitStake(2)}
              >
                <FiThumbsDown />
              </ActionButton>
            </SpaceAroundRow>
          </div>
        )
      )}

      {proposal.stateInVotingMachine < 3 &&
        (redeemsLeft.rep.indexOf(proposalId) > -1 ||
          redeemsLeft.stake.indexOf(proposalId) > -1) && (
          <SpaceAroundRow
            style={{
              borderTop: '1px solid gray',
              margin: '0px 10px',
              justifyContent: 'center',
            }}
          >
            <ActionButton color="blue" onClick={() => redeem()}>
              Redeem
            </ActionButton>
          </SpaceAroundRow>
        )}

      {account &&
        proposal.stateInVotingMachine < 3 &&
        redeemsLeft.bounty[proposalId] && (
          <SpaceAroundRow
            style={{
              borderTop: '1px solid gray',
              margin: '0px 10px',
              justifyContent: 'center',
            }}
          >
            <ActionButton color="blue" onClick={() => redeemDaoBounty()}>
              Redeem Stake Bounty
            </ActionButton>
          </SpaceAroundRow>
        )}
    </>
  );
}

Votes = () => {
  const {
    context: {
      configStore,
      daoStore,
      providerStore,
      daoService,
      orbitDBService,
    },
  } = useContext();

  //State
  const [signVote, setSignVote] = useState(false);
  const [decision, setDecision] = useState(0);
  const [votePercentage, setVotePercentage] = useState(0);
  const [signedVotesOfProposal, setSignedVotesOfProposal] = useState([]);
  const [loadingSignedOrbitDBVotes, setLoadingSignedOrbitDBVotes] =
    useState(true);

  // We should get the ID in another way
  const proposalId = useLocation().pathname.split('/')[3];

  const proposal = daoStore.getProposal(proposalId);
  const proposalEvents = daoStore.getProposalEvents(proposalId);
  const { account } = providerStore.getActiveWeb3React();
  const signedVoteMessageId = utils.id(`dxvote:${proposalId}`);
  const { finishTime } = daoStore.getProposalStatus(proposalId);
  const votingMachineOfProposal =
    daoStore.getVotingMachineOfProposal(proposalId);
  const finishTimeReached = finishTime.toNumber() < moment().unix();
  const isDXDVotingMachine =
    configStore.getNetworkContracts().votingMachines[
      votingMachineOfProposal.address
    ].type == 'DXDVotingMachine';

  orbitDBService.getLogs(signedVoteMessageId).then(signedVoteMessages => {
    console.debug('[OrbitDB messages]', signedVoteMessages);
    signedVoteMessages.map(signedVoteMessageRaw => {
      const signedVoteMessage = parseSignedVoteMessage(signedVoteMessageRaw);
      if (signedVoteMessage.valid) {
        const alreadyAdded =
          signedVotesOfProposal.findIndex(
            s => s.voter == signedVoteMessage.voter
          ) > -1 ||
          proposalEvents.votes.findIndex(
            s => s.voter == signedVoteMessage.voter
          ) > -1;

        const repOfVoterForProposal = daoStore.getRepAt(
          signedVoteMessage.voter,
          proposal.creationEvent.blockNumber
        ).userRep;

        if (
          !alreadyAdded &&
          repOfVoterForProposal >= bnum(signedVoteMessage.repAmount)
        ) {
          signedVotesOfProposal.push({
            voter: signedVoteMessage.voter,
            vote: signedVoteMessage.decision,
            amount: bnum(signedVoteMessage.repAmount),
            signature: signedVoteMessage.signature,
            source: 'orbitDB',
          });
        }
      }
    });
    setSignedVotesOfProposal(signedVotesOfProposal);
    setLoadingSignedOrbitDBVotes(false);
  });

  let votedAmount = bnum(0);

  proposalEvents.votes.map(vote => {
    if (vote.voter === account) {
      votedAmount = bnum(vote.amount);
    }
  });

  let positiveVotesCount = proposalEvents.votes.filter(vote =>
    isVoteYes(vote.vote)
  ).length;

  let negativeVotesCount = proposalEvents.votes.filter(vote =>
    isVoteNo(vote.vote)
  ).length;

  const {
    userRep: userRepAtProposalCreation,
    totalSupply: totalRepAtProposalCreation,
  } = daoStore.getRepAt(account, proposal.creationEvent.blockNumber);

  const repPercentageAtCreation = toPercentage(
    userRepAtProposalCreation.div(totalRepAtProposalCreation)
  ).toFixed(2);

  const positiveVotes = toPercentage(
    proposal.positiveVotes.div(totalRepAtProposalCreation)
  ).toFixed(2, 4);

  const negativeVotes = toPercentage(
    proposal.negativeVotes.div(totalRepAtProposalCreation)
  ).toFixed(2, 4);

  const totalPositiveSignedVotes = toPercentage(
    signedVotesOfProposal
      .filter(signedVote => isVoteYes(signedVote.vote))
      .reduce(function (acc, obj) {
        return acc.plus(obj.amount);
      }, bnum(0))
      .div(totalRepAtProposalCreation)
  ).toFixed(2, 4);

  const totalNegativeSignedVotes = toPercentage(
    signedVotesOfProposal
      .filter(signedVote => isVoteNo(signedVote.vote))
      .reduce(function (acc, obj) {
        return acc.plus(obj.amount);
      }, bnum(0))
      .div(totalRepAtProposalCreation)
  ).toFixed(2, 4);

  if (Number(repPercentageAtCreation) > 0 && votePercentage === 0) {
    setVotePercentage(Number(repPercentageAtCreation));
  }

  // Events Handlers
  const onVoteValueChange = event => {
    setVotePercentage(
      event.target.value < repPercentageAtCreation
        ? event.target.value
        : repPercentageAtCreation
    );
  };

  const executeSignedVote = function (signedVote) {
    daoService.executeSignedVote(
      votingMachineOfProposal.address,
      proposalId,
      signedVote.voter,
      signedVote.vote,
      signedVote.amount.toString(),
      signedVote.signature
    );
  };

  const submitVote = async function (voteDetails: {
    votingMachine: string;
    proposalId: string;
    voter: string;
    decision: string;
    repAmount: string;
    signVote: boolean;
    networks: boolean[];
    hashToETHMessage: boolean;
  }) {
    if (voteDetails.signVote) {
      const voteSignature = await daoService.signVote(
        voteDetails.votingMachine,
        voteDetails.proposalId,
        voteDetails.decision,
        voteDetails.repAmount,
        voteDetails.hashToETHMessage
      );
      if (
        verifySignedVote(
          voteDetails.votingMachine,
          voteDetails.proposalId,
          voteDetails.voter,
          voteDetails.decision,
          voteDetails.repAmount,
          voteSignature
        )
      ) {
        if (voteDetails.networks[0])
          orbitDBService.addLog(
            utils.id(`dxvote:${proposalId}`),
            `signedVote:${voteDetails.votingMachine}:${voteDetails.proposalId}:${voteDetails.voter}:${voteDetails.decision}:${voteDetails.repAmount}:${voteSignature}`
          );
      }
    } else {
      daoService.vote(
        voteDetails.decision,
        voteDetails.repAmount,
        voteDetails.proposalId
      );
    }

    setDecision(0);
  };

  // TODO:
  // This Component could be abstracted so much!
  // <Counts> <NewVote> each one getting proposalEvents and iterating and counting.
  // and Summary can be based on polarity <Summary polarity={positive|negative} /> and reused.
  return (
    <>
      <SpaceAroundRow>
        <strong>
          Confirmed Votes <Question question="4" />
        </strong>
      </SpaceAroundRow>
      <SpaceAroundRow>
        <PositiveSummary>
          <SummaryTotal>
            <AmountBadge color="green">{positiveVotesCount}</AmountBadge>
            {`${positiveVotes}%`}
          </SummaryTotal>
          <HorizontalSeparator />
          <SummaryDetails>
            {proposalEvents?.votes
              .filter(voteEvent => isVoteYes(voteEvent.vote))
              .map((voteEvent, i) => (
                <Vote key={`vote-pos-${i}`}>
                  <BlockchainLink
                    size="short"
                    type="user"
                    text={voteEvent.voter}
                  />
                  <span>
                    {bnum(voteEvent.amount)
                      .times('100')
                      .div(totalRepAtProposalCreation)
                      .toFixed(2, 4)}
                    %
                  </span>
                </Vote>
              ))}
          </SummaryDetails>
        </PositiveSummary>
        <NegativeSummary>
          <SummaryTotal>
            <AmountBadge color="red">{negativeVotesCount}</AmountBadge>
            <span>{`${negativeVotes}%`}</span>
          </SummaryTotal>
          <HorizontalSeparator />
          <SummaryDetails>
            {proposalEvents?.votes
              ?.filter(voteEvent => isVoteNo(voteEvent.vote))
              .map((voteEvent, i) => (
                <Vote key={`vote-neg-${i}`}>
                  <BlockchainLink
                    size="short"
                    type="user"
                    text={voteEvent.voter}
                  />
                  <span>
                    {bnum(voteEvent.amount)
                      .times('100')
                      .div(totalRepAtProposalCreation)
                      .toFixed(2, 4)}
                    %
                  </span>
                </Vote>
              ))}
          </SummaryDetails>
        </NegativeSummary>
      </SpaceAroundRow>

      {!loadingSignedOrbitDBVotes && (
        <div>
          <SpaceAroundRow>
            <strong>
              Signed Votes <Question question="4" /> <br />
              {!isDXDVotingMachine && <small>Non-Executable</small>}
            </strong>
          </SpaceAroundRow>
          <SpaceAroundRow>
            <PositiveSummary>
              <SummaryTotal>
                <AmountBadge color="green">
                  {
                    signedVotesOfProposal.filter(signedVote =>
                      isVoteYes(signedVote.vote)
                    ).length
                  }
                </AmountBadge>
                {`${totalPositiveSignedVotes}%`}
              </SummaryTotal>
              <HorizontalSeparator />
              <SummaryDetails>
                {signedVotesOfProposal
                  .filter(signedVote => isVoteYes(signedVote.vote))
                  .map((signedVote, i) => (
                    <Vote key={`vote-pos-${i}`}>
                      <BlockchainLink
                        size="short"
                        type="user"
                        text={signedVote.voter}
                      />
                      <span>
                        {bnum(signedVote.amount)
                          .times('100')
                          .div(totalRepAtProposalCreation)
                          .toFixed(2, 4)}
                        %
                      </span>
                      {isDXDVotingMachine && (
                        <ActionButton
                          style={{
                            height: '15px',
                            margin: '0px 0px 0px 2px',
                            maxWidth: '15px',
                            textAlign: 'center',
                          }}
                          color="#536DFE"
                          onClick={() => executeSignedVote(signedVote)}
                        >
                          <FiArrowUp />
                        </ActionButton>
                      )}
                    </Vote>
                  ))}
              </SummaryDetails>
            </PositiveSummary>
            <NegativeSummary>
              <SummaryTotal>
                <AmountBadge color="red">
                  {
                    signedVotesOfProposal.filter(signedVote =>
                      isVoteNo(signedVote.vote)
                    ).length
                  }
                </AmountBadge>
                {`${totalNegativeSignedVotes}%`}
              </SummaryTotal>
              <HorizontalSeparator />
              <SummaryDetails>
                {signedVotesOfProposal
                  ?.filter(signedVote => isVoteNo(signedVote.vote))
                  .map((signedVote, i) => (
                    <Vote key={`vote-neg-${i}`}>
                      <BlockchainLink
                        size="short"
                        type="user"
                        text={signedVote.voter}
                      />
                      <span>
                        {bnum(signedVote.amount)
                          .times('100')
                          .div(totalRepAtProposalCreation)
                          .toFixed(2, 4)}
                        %
                      </span>
                      {isDXDVotingMachine && (
                        <ActionButton
                          style={{
                            height: '15px',
                            margin: '0px 0px 0px 2px',
                            maxWidth: '15px',
                            textAlign: 'center',
                          }}
                          color="#536DFE"
                          onClick={() => executeSignedVote(signedVote)}
                        >
                          <FiArrowUp />
                        </ActionButton>
                      )}
                    </Vote>
                  ))}
              </SummaryDetails>
            </NegativeSummary>
          </SpaceAroundRow>
        </div>
      )}

      {Number(repPercentageAtCreation) > 0 && (
        <small>{repPercentageAtCreation} % REP at proposal creation</small>
      )}

      {(proposal.stateInVotingMachine === 3 ||
        proposal.stateInVotingMachine === 4) &&
        votingMachineOfProposal.params.votersReputationLossRatio.toNumber() >
          0 &&
        finishTime.toNumber() > 0 && (
          <TextCenter>
            <small>
              Voter REP Loss Ratio:
              {votingMachineOfProposal.params.votersReputationLossRatio.toString()}
              %
            </small>
          </TextCenter>
        )}

      {account &&
      !finishTimeReached &&
      votedAmount.toNumber() === 0 &&
      Number(repPercentageAtCreation) > 0 &&
      proposal.stateInVotingMachine >= 3 ? (
        <SpaceAroundRow>
          <ConfirmVoteModal
            voteDecision={decision}
            toAdd={votePercentage}
            positive={parseFloat(positiveVotes)}
            negative={parseFloat(negativeVotes)}
            onConfirm={submitVote}
            onCancel={() => setDecision(0)}
            voteDetails={{
              votingMachine: votingMachineOfProposal.address,
              proposalId: proposalId,
              voter: account,
              decision: decision.toString(),
              repAmount: totalRepAtProposalCreation
                .times(bnum(votePercentage))
                .div('100')
                .toFixed(0, 1)
                .toString(),
              signVote: signVote,
            }}
          />
          <AmountInput
            type="number"
            placeholder="REP"
            name="votePercentage"
            max={repPercentageAtCreation}
            value={votePercentage}
            min="0"
            step={
              votePercentage > 10
                ? '1'
                : votePercentage > 1
                ? '0.01'
                : votePercentage > 0.1
                ? '0.001'
                : '0.00001'
            }
            id="votePercentage"
            onChange={onVoteValueChange}
            style={{ flex: 2 }}
          />
          <ActionButton
            style={{ flex: 1, maxWidth: '20px', textAlign: 'center' }}
            color="green"
            onClick={() => setDecision(1)}
          >
            <FiThumbsUp />
          </ActionButton>
          <ActionButton
            style={{ flex: 1, maxWidth: '20px', textAlign: 'center' }}
            color="red"
            onClick={() => setDecision(2)}
          >
            <FiThumbsDown />
          </ActionButton>
          <ActionButton
            style={{ flex: 1, maxWidth: '20px', textAlign: 'center' }}
            color="#536DFE"
            onClick={() => setSignVote(!signVote)}
          >
            {signVote ? <FiWifiOff /> : <FiWifi />}
          </ActionButton>
        </SpaceAroundRow>
      ) : (
        votedAmount.toNumber() !== 0 && (
          <SpaceAroundRow>
            <TextCenter>
              {`
              Already voted ${votedAmount.toNumber() > 0 ? 'for' : 'against'}
              with
              ${votedAmount
                .times('100')
                .div(totalRepAtProposalCreation)
                .toFixed(2, 4)}
              % REP`}
            </TextCenter>
          </SpaceAroundRow>
        )
      )}
    </>
  );
}

Comment = ({
  user,
  content,
  commentId,
  time,
  likedCount,
  liked,
  replyCount,
  beReplied,
}: CommentProps): JSX.Element => {
  const [l, setL] = useState(liked);
  const likeAction = useCallback(() => {
    request<boolean, CommentCSMsg>({
      command: "like",
      id: commentId,
      t: l ? "unlike" : "like",
    })
      .then((res) => {
        if (res) setL(!l);
      })
      .catch(console.error);
  }, [commentId, l]);

  return (
    <div className="box-border w-full my-4 rounded-xl bg-black bg-opacity-20 shadow-md flex flex-row p-4 overflow-hidden">
      <img
        className="cursor-pointer rounded-full h-16 w-16"
        src={user.avatarUrl}
        alt={user.nickname}
        onClick={() => {
          const data: Omit<CommentCMsg, "channel"> = {
            msg: { command: "user", id: user.userId },
          };
          vscode.postMessage(data);
        }}
      />
      <div className="flex-1 ml-4 text-base">
        <div>
          <div
            className="cursor-pointer inline-block text-blue-600 text-lg"
            onClick={() => {
              const data: Omit<CommentCMsg, "channel"> = {
                msg: { command: "user", id: user.userId },
              };
              vscode.postMessage(data);
            }}
          >
            {user.nickname}
          </div>
          <div className="inline-block ml-4 text-sm">
            {dayjs(time).fromNow()}
          </div>
        </div>
        <div className="mt-1">{content}</div>
        {beReplied && (
          <div className="text-base mt-1 ml-2 p-2 rounded-xl border-solid border-blue-600">
            <div
              className="cursor-pointer inline-block text-blue-600"
              onClick={() => {
                const data: Omit<CommentCMsg, "channel"> = {
                  msg: { command: "user", id: beReplied.user.userId },
                };
                vscode.postMessage(data);
              }}
            >
              @{beReplied.user.nickname}
            </div>
            : {beReplied.content}
          </div>
        )}
        <div className="mt-1">
          <div className="inline-block">
            <div className="cursor-pointer inline-block" onClick={likeAction}>
              <FiThumbsUp size={13} color={l ? "#2563EB" : undefined} />
            </div>
            <div className="inline-block ml-2">{likedCount}</div>
          </div>
          <div
            className="cursor-pointer inline-block ml-6"
            // onClick={() => vscode.postMessage({msg:{ command: "reply", id: commentId }})}
          >
            {i18n.word.reply}
          </div>
          {replyCount > 0 && (
            <div
              className="cursor-pointer inline-block text-blue-600 ml-6"
              // onClick={() => vscode.postMessage({msg:{ command: "floor", id: commentId }})}
            >
              {replyCount} {i18n.word.reply}
              {" >"}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export function UserFeedback({ title, locale }: Props) {
  const [showCloseBtn, setShowCloseBtn] = useState(false)
  const [showFeedbackBody, setShowFeedbackBody] = useState(false)
  const [showYesFollowUp, setShowYesFollowUp] = useState('unset')

  const setDocHelpful = (docTitle: string, isHelpful: boolean) => () => {
    trackCustomEvent({
      category: isHelpful ? `doc-${locale}-useful` : `doc-${locale}-useless`,
      action: 'click',
      label: docTitle,
      transport: 'beacon',
    })

    if (isHelpful) {
      setShowYesFollowUp('show')
    } else {
      setShowYesFollowUp('hide')
    }
  }

  const showThumbs = () => {
    setShowCloseBtn(true)
    setShowFeedbackBody(true)
  }

  const closeFeedback = () => {
    setShowFeedbackBody(false)
    setShowCloseBtn(false)
    setShowYesFollowUp('unset')
  }

  return (
    <section className={feedbackPrompt}>
      <div className={feedbackHeader}>
        <div
          className={feedbackTitle}
          onClick={showThumbs}
          onKeyDown={showThumbs}>
          <Trans i18nKey="docHelpful.header" />
        </div>
        {showCloseBtn && (
          <button
            className={closeIcon}
            onClick={closeFeedback}
            onKeyDown={closeFeedback}>
            x
          </button>
        )}
      </div>
      {showFeedbackBody && (
        <div>
          {showYesFollowUp === 'unset' && (
            <div className={thumbs}>
              <button
                className={thumb}
                onClick={setDocHelpful(title, true)}
                onKeyDown={setDocHelpful(title, true)}>
                <FiThumbsUp />
                <span>
                  <Trans i18nKey="docHelpful.thumbUp" />
                </span>
              </button>
              <button
                className={thumb}
                onClick={setDocHelpful(title, false)}
                onKeyDown={setDocHelpful(title, false)}>
                <FiThumbsDown />
                <span>
                  <Trans i18nKey="docHelpful.thumbDown" />
                </span>
              </button>
            </div>
          )}

          {showYesFollowUp !== 'unset' && (
            <div className={feedbackForm}>
              <HubspotForm
                portalId="4466002"
                formId={`${
                  showYesFollowUp === 'show'
                    ? locale === 'en'
                      ? 'c955b3db-740a-4f96-9d2b-011e2cd80ad6'
                      : 'caf4026d-e3a0-4285-8f80-fcdee324f50d'
                    : locale === 'en'
                    ? '3c501775-c64d-4a9e-898b-7efef630bbf4'
                    : '4bf44ac7-4104-4eca-a57c-4dd9e5cc87b9'
                }`}
                loading={<Loading wholeScreen={false} />}
              />
            </div>
          )}
        </div>
      )}
    </section>
  )
}