@ant-design/icons#CloseCircleTwoTone JavaScript Examples

Thumbnail = props => {
    const [hovered, setHovered] = useState(false)
    const [blob, setBlob] = useState('')
    useEffect(() => {
      setBlob(URL.createObjectURL(props.file))
    }, [props.file])
    return (
        <div 
            style={{ padding: '12px 6px', display: 'inline-block', position: "relative" }}
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
        >
            
            <img
                style={styles.imageSquare}
                alt={props.file ? props.file.name : ''}
                src={blob}
            />

            {
                hovered &&
                <CloseCircleTwoTone 
                    style={styles.closeIcon} 
                    onClick={() => props.onRemove && props.onRemove()}
                />
            }
        </div>
    )
}

export default function QuadraticDiplomacyReward({
  tx,
  writeContracts,
  userSigner,
  votesEntries,
  contributorEntries,
  isAdmin,
  mainnetProvider,
}) {
  const [totalRewardAmount, setTotalRewardAmount] = useState(0);
  const [rewardStatus, setRewardStatus] = useState(REWARD_STATUS.PENDING);
  const [selectedToken, setSelectedToken] = useState("");
  const [isSendingTx, setIsSendingTx] = useState(false);

  const [voteResults, totalVotes, totalSqrtVotes, totalSquare] = useMemo(() => {
    const votes = {};
    let voteCount = 0;
    let sqrts = 0;
    let total = 0;
    votesEntries.forEach(entry => {
      const vote = entry.amount.toNumber();
      const sqrtVote = Math.sqrt(vote);
      if (!votes[entry.wallet]) {
        votes[entry.wallet] = {
          vote: 0,
          // Sum of the square root of the votes for each member.
          sqrtVote: 0,
          hasVoted: false,
        };
      }
      votes[entry.wallet].sqrtVote += sqrtVote;
      votes[entry.wallet].vote += vote;

      if (!votes[entry.wallet].hasVoted) {
        votes[entry.wallet].hasVoted = entry.votingAddress === entry.wallet;
      }

      voteCount += vote;
      // Total sum of the sum of the square roots of the votes for all members.
      sqrts += sqrtVote;
    });

    Object.entries(votes).forEach(([wallet, { sqrtVote }]) => {
      total += Math.pow(sqrtVote, 2);
    });

    return [votes, voteCount, sqrts, total];
  }, [votesEntries]);

  const columns = useMemo(
    () => [
      {
        title: "Address",
        dataIndex: "address",
        render: address => <Address address={address} fontSize={16} size="short" ensProvider={mainnetProvider} />,
      },
      {
        title: "Nº of votes",
        dataIndex: "vote",
        defaultSortOrder: "descend",
        align: "center",
        sorter: (a, b) => a.vote - b.vote,
      },
      {
        title: "Quadratic votes",
        dataIndex: "votesSqrt",
        align: "center",
        sorter: (a, b) => a.votesSqrt - b.votesSqrt,
        render: (votesSqrt, record) => (
          <p>
            {votesSqrt.toFixed(2)} <Text type="secondary">({(record.votesShare * 100).toFixed(2)}%)</Text>
          </p>
        ),
      },
      {
        title: "Reward Amount",
        dataIndex: "rewardAmount",
        defaultSortOrder: "descend",
        align: "center",
        sorter: (a, b) => a.rewardAmount - b.rewardAmount,
        render: rewardAmount => (
          <p>
            {rewardAmount.toFixed(2)} {selectedToken.toUpperCase()}
          </p>
        ),
      },
      {
        title: "Has Voted",
        dataIndex: "hasVoted",
        align: "center",
        filters: [
          { text: "Yes", value: true },
          { text: "No", value: false },
        ],
        onFilter: (value, record) => record.hasVoted === value,
        render: hasVoted =>
          hasVoted ? <CheckCircleTwoTone twoToneColor="#52c41a" /> : <CloseCircleTwoTone twoToneColor="red" />,
      },
    ],
    [mainnetProvider, selectedToken],
  );

  const dataSource = useMemo(
    () =>
      Object.entries(voteResults).map(([address, contributor]) => ({
        key: address,
        address: address,
        vote: contributor?.vote,
        votesSqrt: contributor?.sqrtVote,
        votesShare: Math.pow(contributor?.sqrtVote, 2) / totalSquare,
        rewardAmount: (Math.pow(contributor?.sqrtVote, 2) / totalSquare) * totalRewardAmount,
        hasVoted: contributor?.hasVoted,
      })),
    [voteResults, totalSquare, totalRewardAmount],
  );

  const missingVotingMembers = contributorEntries
    ?.map(entry => entry.wallet)
    .filter(wallet => !voteResults[wallet]?.hasVoted)
    // Remove duplicated.
    .filter((item, pos, self) => self.indexOf(item) === pos);

  const handlePayment = async payFromSelf => {
    // ToDo. Do some validation (non-empty elements, etc.)
    const wallets = [];
    const amounts = [];

    setIsSendingTx(true);
    // choose appropriate function from contract
    let func;
    if (selectedToken === "ETH") {
      dataSource.forEach(({ address, rewardAmount }) => {
        wallets.push(address);
        // Flooring some decimals to avoid rounding errors => can result in not having enough funds.
        amounts.push(ethers.utils.parseEther((Math.floor(rewardAmount * 10000) / 10000).toString()));
      });

      func = payFromSelf
        ? // payable functions need an `overrides` param.
          // relevant docs: https://docs.ethers.io/v5/api/contract/contract/#Contract-functionsCall
          writeContracts.QuadraticDiplomacyContract.sharePayedETH(wallets, amounts, {
            value: ethers.utils.parseEther(totalRewardAmount.toString()),
          })
        : writeContracts.QuadraticDiplomacyContract.shareETH(wallets, amounts);
    } else {
      const tokenAddress = writeContracts[selectedToken].address;
      const userAddress = await userSigner.getAddress();
      const tokenContract = writeContracts[selectedToken].connect(userSigner);
      // approve only if have to pay from self wallet
      if (payFromSelf) {
        await tx(
          tokenContract.approve(
            writeContracts.QuadraticDiplomacyContract.address,
            ethers.utils.parseUnits(totalRewardAmount.toString(), 18),
          ),
        );
      }

      dataSource.forEach(({ address, rewardAmount }) => {
        wallets.push(address);
        // Flooring some decimals to avoid rounding errors => can result in not having enough funds.
        amounts.push(ethers.utils.parseUnits((Math.floor(rewardAmount * 10000) / 10000).toString()));
      });
      func = payFromSelf
        ? writeContracts.QuadraticDiplomacyContract.sharePayedToken(wallets, amounts, tokenAddress, userAddress)
        : writeContracts.QuadraticDiplomacyContract.shareToken(wallets, amounts, tokenAddress);
    }

    await tx(func, update => {
      // ToDo. Handle errors.
      if (update && (update.status === "confirmed" || update.status === 1)) {
        notification.success({
          message: "Payment sent!",
        });
        setRewardStatus(REWARD_STATUS.COMPLETED);
        setIsSendingTx(false);
      } else if (update.error) {
        setIsSendingTx(false);
      }
    });
  };

  if (!isAdmin) {
    return (
      <div style={{ border: "1px solid #cccccc", padding: 16, width: 800, margin: "auto", marginTop: 64 }}>
        <Title level={4}>Access denied</Title>
        <p>Only admins can send rewards.</p>
      </div>
    );
  }

  return (
    <div style={{ border: "1px solid #cccccc", padding: 16, width: 1000, margin: "auto", marginTop: 64 }}>
      <Title level={3}>Reward Contributors</Title>
      <Title level={5}>
        Total votes:&nbsp;&nbsp;
        <Tag color="#000000">{totalVotes}</Tag>
      </Title>
      <Title level={5}>
        Total Quadratic votes:&nbsp;&nbsp;
        <Tag color="#52c41a">{totalSqrtVotes.toFixed(2)}</Tag>
      </Title>
      <Divider />
      <Space split>
        <Input
          type="number"
          disabled={!selectedToken} // disable if no token selected
          value={totalRewardAmount}
          addonBefore="Total Amount to Distribute"
          addonAfter={
            <Select defaultValue="Select token..." onChange={setSelectedToken}>
              {TOKENS.map(tokenName => (
                <Select.Option value={tokenName}>{tokenName}</Select.Option>
              ))}
            </Select>
          }
          onChange={e => setTotalRewardAmount(e.target.value.toLowerCase())}
        />
      </Space>
      <Divider />
      <Space direction="vertical" style={{ width: "100%" }}>
        {missingVotingMembers?.length > 0 && (
          <Alert
            showIcon
            type="warning"
            message={<Title level={5}>Votes are pending from:</Title>}
            description={missingVotingMembers.map(wallet => (
              <p key={wallet}>
                <Address address={wallet} fontSize={16} size="short" ensProvider={mainnetProvider} />
              </p>
            ))}
          />
        )}
        <Table
          bordered
          dataSource={dataSource}
          columns={columns}
          pagination={{ pageSize: 10 }}
          footer={() =>
            !isSendingTx ? (
              <Space>
                <Button
                  onClick={() => handlePayment(true)}
                  disabled={rewardStatus === REWARD_STATUS.COMPLETED || !totalRewardAmount || !dataSource?.length}
                  size="large"
                >
                  Pay ?
                </Button>
                <Button
                  onClick={() => handlePayment(false)}
                  disabled={rewardStatus === REWARD_STATUS.COMPLETED || !totalRewardAmount || !dataSource?.length}
                  size="large"
                >
                  Pay from contract ?
                </Button>
              </Space>
            ) : (
              <Spin size="small" />
            )
          }
        />
      </Space>
      <Divider />
    </div>
  );
}

FileUploadModal = (props) => {
  const { onUpload, onCancel } = props;

  const guidanceFileLink = 'https://drive.google.com/file/d/1VPaB-yofuExinY2pXyGEEx-w39_OPubO/view';

  const [selectedTech, setSelectedTech] = useState('10X Chromium');
  const [canUpload, setCanUpload] = useState(false);
  const [filesList, setFilesList] = useState([]);

  useEffect(() => {
    setCanUpload(filesList.length && filesList.every((file) => file.valid));
  }, [filesList]);

  // Handle on Drop
  const onDrop = async (acceptedFiles) => {
    let filesNotInFolder = false;
    const filteredFiles = acceptedFiles
      // Remove all hidden files
      .filter((file) => !file.name.startsWith('.') && !file.name.startsWith('__MACOSX'))
      // Remove all files that aren't in a folder
      .filter((file) => {
        const inFolder = file.path.includes('/');

        filesNotInFolder ||= !inFolder;

        return inFolder;
      });

    if (filesNotInFolder) {
      handleError('error', endUserMessages.ERROR_FILES_FOLDER);
    }

    const newFiles = await Promise.all(filteredFiles.map((file) => (
      fileObjectToFileRecord(file, selectedTech)
    )));

    setFilesList([...filesList, ...newFiles]);
  };

  const removeFile = (fileName) => {
    const newArray = _.cloneDeep(filesList);

    const fileIdx = newArray.findIndex((file) => file.name === fileName);
    newArray.splice(fileIdx, 1);
    setFilesList(newArray);
  };

  const renderHelpText = () => (
    <>
      <Space direction='vertical' style={{ width: '100%' }}>
        <Paragraph>
          For each sample, upload a folder containing the
          {' '}
          {techOptions[selectedTech].inputInfo.length}
          {' '}
          count matrix files. The folder&apos;s name will be used to name the sample in it. You can change this name later in Data Management.
        </Paragraph>
        <Paragraph>
          The required files for each sample are:
        </Paragraph>
        <List
          dataSource={techOptions[selectedTech].inputInfo}
          size='small'
          itemLayout='vertical'
          bordered
          renderItem={(item) => (
            <List.Item>
              {
                item.map((fileName, i) => (
                  <span key={fileName}>
                    <Text code>{`${fileName}`}</Text>
                    {i !== item.length - 1 && ' or '}
                  </span>
                ))
              }
            </List.Item>
          )}
        />
      </Space>
    </>
  );

  return (
    <Modal
      title=''
      visible
      onCancel={onCancel}
      width='50%'
      footer={(
        <Button
          data-test-id={integrationTestConstants.ids.FILE_UPLOAD_BUTTON}
          type='primary'
          key='create'
          block
          disabled={!canUpload}
          onClick={() => {
            onUpload(filesList, selectedTech);
            setFilesList([]);
          }}
        >
          Upload
        </Button>
      )}
    >
      <Row>
        <Col span={24}>
          <Space direction='vertical' style={{ width: '100%' }}>
            <Space align='baseline'>
              <Title level={4} style={{ display: 'inline-block' }}>
                Technology:
                <span style={{ color: 'red', marginRight: '2em' }}>*</span>
              </Title>
              <Select
                defaultValue={selectedTech}
                onChange={(value) => setSelectedTech(value)}
              >
                {Object.keys(techOptions).map((val) => (
                  <Option key={`key-${val}`} value={val}>{val}</Option>
                ))}
              </Select>
            </Space>
            <Text type='secondary'>
              <i>
                Is your dataset generated using another single cell RNA-seq technology (e.g. Nadia, BD Rhapsody, etc.)? Email us to find out if we can support your data:
                <a href='mailto:[email protected]'> [email protected]</a>
              </i>
            </Text>
          </Space>
        </Col>
      </Row>

      <Row style={{ margin: '1rem 0' }}>
        <Col span={24}>
          <Title level={4}>
            File Upload:
            <span style={{ color: 'red', marginRight: '2em' }}>*</span>
          </Title>
          {selectedTech && renderHelpText()}
        </Col>
      </Row>

      <Row>
        {/* eslint-disable react/jsx-props-no-spreading */}
        <Col span={24}>
          <Paragraph type='secondary'>
            <i>
              Don’t have the data in the accepted format? Email us for help with file conversion (e.g. from Fastq or H5 file):
              <a href='mailto:[email protected]'> [email protected]</a>
            </i>
            <span style={{ display: 'block', height: '0.6rem' }} />
            <i>
              More guidance on supported file types and formats is available
              <a rel='noreferrer' target='_blank' href={guidanceFileLink}> here</a>
              .
            </i>
          </Paragraph>
          <Dropzone onDrop={onDrop} multiple>
            {({ getRootProps, getInputProps }) => (
              <div
                data-test-id={integrationTestConstants.ids.FILE_UPLOAD_DROPZONE}
                style={{ border: '1px solid #ccc', padding: '2rem 0' }}
                {...getRootProps({ className: 'dropzone' })}
                id='dropzone'
              >
                <input data-test-id={integrationTestConstants.ids.FILE_UPLOAD_INPUT} {...getInputProps()} webkitdirectory='' />
                <Empty description='Drag and drop folders here or click to browse.' image={Empty.PRESENTED_IMAGE_SIMPLE} />
              </div>
            )}
          </Dropzone>
        </Col>
        {/* eslint-enable react/jsx-props-no-spreading */}

        {filesList.length ? (
          <>
            <Divider orientation='center'>To upload</Divider>
            <List
              dataSource={filesList}
              size='small'
              itemLayout='horizontal'
              grid='{column: 4}'
              renderItem={(file) => (

                <List.Item
                  key={file.name}
                  style={{ width: '100%' }}
                >
                  <Space>
                    {file.valid
                      ? (
                        <>
                          <CheckCircleTwoTone twoToneColor='#52c41a' />
                        </>
                      ) : (
                        <>
                          <CloseCircleTwoTone twoToneColor='#f5222d' />
                        </>
                      )}
                    <Text
                      ellipsis={{ tooltip: file.name }}
                      style={{ width: '200px' }}
                    >
                      {file.name}

                    </Text>
                    <DeleteOutlined style={{ color: 'crimson' }} onClick={() => { removeFile(file.name); }} />
                  </Space>
                </List.Item>

              )}
            />
          </>
        ) : ''}
      </Row>
    </Modal>

  );
}