const { getConfig } = VM.require("meta-pool-official.near/widget/config"); const config = getConfig(context.networkId); const externalWidgetPaths = config.externalWidgetPaths; const contractId = config.mpipContractId; const accountId = context.accountId; const authorId = "meta-pool-official.near"; const accountVotes = props.accountVotes; const Container = styled.div` display: flex; flex-direction: column; align-items: flex-start; padding: 1.25em 0.85em; gap: 1em; width: 100%; box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px; border-radius: 16px; background: #ffffff; p { line-height: 1.4; font-weight: 400; font-size: 15px; color: #868682; margin: 0; } h3 { font-weight: 600; font-size: 24px; color: #1b1b18; } h5 { font-size: 14px; font-weight: 500; line-height: 1.2; color: #6c757d; } & h4 { font-family: "Inter"; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; color: #797777; } `; const Heading = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0; gap: 16px; width: 100%; & div { display: flex; flex-direction: row; align-items: center; padding: 0; gap: 16px; & > h2 { font-family: "FK Grotesk"; font-style: normal; font-weight: 700; font-size: 25px; line-height: 36px; color: #11181c; } & > span { font-family: "Inter"; font-style: normal; font-weight: 500; font-size: 19px; line-height: 23px; color: #7e868c; } } `; const List = styled.div` display: flex; flex-direction: column; gap: 1.5em; width: 100%; `; const Item = styled.div` display: flex; flex-direction: column; gap: 0.5em; width: 100%; `; const AccountVote = styled.div` display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5em; width: 100%; flex-wrap: wrap; `; const VoteMemo = styled.div` display: flex; flex-direction: column; align-items: stretch; gap: 0.5em; width: 100%; `; const Memo = styled.h5` word-break: break-word; width: 100%; margin-top: 0.5em; @media (max-width: 600px) { font-size: 12px; } `; const VoteContainer = styled.div` display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.25em; width: 100%; `; const yoctoToNear = (amountYocto) => new Big(amountYocto).div(new Big(10).pow(24)).toFixed(0); const numberWithCommas = (x) => x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); if (accountVotes.length === 0) { return ( <Container> <Heading> <div> <h2>Votes</h2> </div> </Heading> <h5>No Votes Casted.</h5> </Container> ); } return ( <Container> <Heading> <div> <h2>Votes</h2> </div> </Heading> <List> {accountVotes.map((item) => ( <Item key={item.voter_id}> <VoteMemo> <AccountVote> <Widget src={`${authorId}/widget/Common.ShortInlineBlock`} props={{ accountId: item.voter_id, tooltip: true }} /> <VoteContainer> <h5>voted {item.vote_type}</h5> <h5>{numberWithCommas(yoctoToNear(item.voting_power))} VP</h5> </VoteContainer> </AccountVote> {item.memo !== "" ? ( <Memo>memo: {item.memo}</Memo> ) : ( <Memo style={{ visibility: "hidden" }}>memo:</Memo> )} </VoteMemo> <div></div> </Item> ))} </List> </Container> );