diff --git a/apps/astraplusplus/widget/Common/Layout/CardModal.jsx b/apps/astraplusplus/widget/Common/Layout/CardModal.jsx index 748f2c2..fd709ff 100644 --- a/apps/astraplusplus/widget/Common/Layout/CardModal.jsx +++ b/apps/astraplusplus/widget/Common/Layout/CardModal.jsx @@ -6,123 +6,109 @@ const isOpen = props.isOpen; const onToggle = props.onToggle; const Modal = styled.div` - display: ${({ hidden }) => (hidden ? "none" : "flex")}; - position: fixed; - inset: 0; - justify-content: center; - align-items: center; - opacity: 1; - z-index: 999; + display: ${({ hidden }) => (hidden ? "none" : "flex")}; + position: fixed; + inset: 0; + justify-content: center; + align-items: center; + opacity: 1; + z-index: 999; `; const ModalBackdrop = styled.div` - position: absolute; - inset: 0; - background-color: rgba(0, 0, 0, 0.5); - opacity: 0.4; + position: absolute; + inset: 0; + background-color: rgba(0, 0, 0, 0.5); + opacity: 0.4; `; const ModalDialog = styled.div` - padding: 2em; - z-index: 999; - overflow-y: auto; - max-height: 85%; - margin-top: 5%; - @media (width < 720px) { - width: 100%; - } + padding: 2em; + z-index: 999; + overflow-y: auto; + max-height: 85%; + margin-top: 5%; + @media (width < 720px) { + width: 100%; + } `; const ModalHeader = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - padding-bottom: 4px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding-bottom: 4px; `; const ModalFooter = styled.div` - padding-top: 4px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: items-center; + padding-top: 4px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: items-center; `; const CloseButton = styled.button` - display: flex; - align-items: center; - justify-content: center; - background-color: white; - padding: 0.5em; - border-radius: 6px; - border: 0; - color: #344054; + display: flex; + align-items: center; + justify-content: center; + background-color: white; + padding: 0.5em; + border-radius: 6px; + border: 0; + color: #344054; - &:hover { - background-color: #d3d3d3; - } + &:hover { + background-color: #d3d3d3; + } `; const ConfirmButton = styled.button` - padding: 0.7em; - border-radius: 6px; - border: 0; - box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); - background-color: #12b76a; - color: white; + padding: 0.7em; + border-radius: 6px; + border: 0; + box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); + background-color: #12b76a; + color: white; - &:hover { - background-color: #0e9f5d; - } + &:hover { + background-color: #0e9f5d; + } `; const ModalContent = styled.div` - flex: 1; - margin-top: 4px; - margin-bottom: 4px; - overflow-y: auto; - max-height: 50%; + flex: 1; + margin-top: 4px; + margin-bottom: 4px; + overflow-y: auto; + max-height: 50%; `; const NoButton = styled.button` - background: transparent; - border: none; - padding: 0; - margin: 0; - box-shadow: none; + background: transparent; + border: none; + padding: 0; + margin: 0; + box-shadow: none; `; return ( - <> - - {toggle} - - - + <> + + {toggle} + + + ); diff --git a/apps/astraplusplus/widget/Common/Modals/Comments.jsx b/apps/astraplusplus/widget/Common/Modals/Comments.jsx index 73c57a0..8ee4e15 100644 --- a/apps/astraplusplus/widget/Common/Modals/Comments.jsx +++ b/apps/astraplusplus/widget/Common/Modals/Comments.jsx @@ -2,48 +2,48 @@ const commentsCount = props.commentsCount; const item = props.item; const Wrapper = styled.div` - padding: 24px; - border-radius: 14px; + padding: 24px; + border-radius: 14px; - & > div { - margin-left: 0 !important; - } - textarea { - font-size: 0.9rem !important; - margin-bottom: 24px !important; - } + & > div { + margin-left: 0 !important; + } + textarea { + font-size: 0.9rem !important; + margin-bottom: 24px !important; + } - p { - margin-bottom: 16px; - } + p { + margin-bottom: 16px; + } `; const Hr = styled.hr` - border: none; - border-top: 1px solid #d7dbdf; - margin: 16px 0; + border: none; + border-top: 1px solid #d7dbdf; + margin: 16px 0; `; return ( - - State.update({ showReply: false }) - }} - /> - - {commentsCount === 0 && ( - - No comments yet. Be the first to comment! - - )} - + + State.update({ showReply: false }) + }} + /> + + {commentsCount === 0 && ( + + No comments yet. Be the first to comment! + + )} + ); diff --git a/apps/astraplusplus/widget/Common/Modals/Share.jsx b/apps/astraplusplus/widget/Common/Modals/Share.jsx index 0ef571f..c965e72 100644 --- a/apps/astraplusplus/widget/Common/Modals/Share.jsx +++ b/apps/astraplusplus/widget/Common/Modals/Share.jsx @@ -23,23 +23,23 @@ const socialMedia = [ { name: "Facebook", link: facebookURL.toString(), - icon: "bi bi-facebook", + icon: "bi bi-facebook" }, { name: "Twitter", link: twitterURL.toString(), - icon: "bi bi-twitter", + icon: "bi bi-twitter" }, { name: "LinkedIn", link: linkedinURL.toString(), - icon: "bi bi-linkedin", + icon: "bi bi-linkedin" }, { name: "Telegram", link: telegramURL.toString(), - icon: "bi bi-telegram", - }, + icon: "bi bi-telegram" + } ]; const Wrapper = styled.div` @@ -83,11 +83,11 @@ const Wrapper = styled.div` `; State.init({ - copied: false, + copied: false }); return ( - +

Share with friends

{socialMedia.map((item, index) => ( @@ -109,11 +109,11 @@ return ( onClick={() => { clipboard.writeText(url); State.update({ - copied: true, + copied: true }); setTimout(() => { State.update({ - copied: false, + copied: false }); }, 2000); }} diff --git a/apps/astraplusplus/widget/Common/Modals/Voters.jsx b/apps/astraplusplus/widget/Common/Modals/Voters.jsx index 67969fe..6484d41 100644 --- a/apps/astraplusplus/widget/Common/Modals/Voters.jsx +++ b/apps/astraplusplus/widget/Common/Modals/Voters.jsx @@ -15,159 +15,153 @@ const query = `query MyQuery { }`; function fetchGraphQL(operationsDoc, operationName, variables) { - return asyncFetch(QUERYAPI_ENDPOINT, { - method: "POST", - headers: { "x-hasura-role": "strachu_near" }, - body: JSON.stringify({ - query: operationsDoc, - variables: variables, - operationName: operationName - }) - }); + return asyncFetch(QUERYAPI_ENDPOINT, { + method: "POST", + headers: { "x-hasura-role": "strachu_near" }, + body: JSON.stringify({ + query: operationsDoc, + variables: variables, + operationName: operationName + }) + }); } + if (isVotingBodyDao) { - votes = useCache( - () => - fetchGraphQL(query, "MyQuery", {}).then((result) => { - const parsedData = {}; - if (result.status === 200) { - if (result.body.data) { - const data = - result.body.data["strachu_near_vb_prod_v2_vote"]; + votes = useCache( + () => + fetchGraphQL(query, "MyQuery", {}).then((result) => { + const parsedData = {}; + if (result.status === 200) { + if (result.body.data) { + const data = result.body.data["strachu_near_vb_prod_v2_vote"]; - if (data?.length > 0) { - for (const a of data) { - parsedData[a.voter] = { - timestamp: a.timestamp, - vote: a.vote - }; - } - } - } - } - return parsedData; - }), - daoId + "proposals" + proposalId, - { subscribe: false } - ); + if (data?.length > 0) { + for (const a of data) { + parsedData[a.voter] = { + timestamp: a.timestamp, + vote: a.vote + }; + } + } + } + } + return parsedData; + }), + daoId + "proposals" + proposalId, + { subscribe: false } + ); } const Wrapper = styled.ul` - background: #f8f9fa; + overflow: hidden; + padding: 24px; + list-style: none; + display: flex; + flex-direction: column; + gap: 12px; + + .radius { border-radius: 14px; - overflow: hidden; - padding: 24px; - list-style: none; + } + + li { display: flex; flex-direction: column; - gap: 12px; - - .radius { - border-radius: 14px; - } - - li { - display: flex; - flex-direction: column; - padding: 12px; - gap: 10px; - border-radius: 14px; - } + padding: 12px; + gap: 10px; + border-radius: 14px; + } - div.Approve { - background-color: #59e69220; - .vote { - color: #0d562b; - } + div.Approve { + background-color: #59e69220; + .vote { + color: #0d562b; } - div.Reject { - background-color: #e5484d20; - .vote { - color: #bf2c30; - } + } + div.Reject { + background-color: #e5484d20; + .vote { + color: #bf2c30; } - div.Abstain { - background-color: #d3d3d3; - .vote { - color: black; - } + } + div.Abstain { + background-color: #d3d3d3; + .vote { + color: black; } - div.Spam { - background-color: #ffda0920; - .vote { - color: #73692d; - } + } + div.Spam { + background-color: #ffda0920; + .vote { + color: #73692d; } - div.Remove { - background-color: #ffda0920; - .vote { - color: #73692d; - } + } + div.Remove { + background-color: #ffda0920; + .vote { + color: #73692d; } + } `; return ( - - {Object.keys(votes).length === 0 && ( - No votes yet - )} - {isCongressDaoID && - isVotingBodyDao && - votersCount > Object.keys(votes).length && ( -
- Note: Indexer is currently running behind schedule, and the - expected results may take longer to appear. We appreciate - your patience and apologize for any inconvenience. -
- )} - {Object.keys(votes).map((voterId) => { - const vote = - isCongressDaoID || isVotingBodyDao - ? votes[voterId].vote - : votes[voterId]; - return ( -
-
  • -
    -
    - -
    -
    - {vote} - ), - variant: `round`, - size: "md" - }} - /> -
    -
    - {((isCongressDaoID && votes[voterId].timestamp > 0) || - isVotingBodyDao) && - votes[voterId].timestamp && ( -
    - - - - - {new Date( - votes[voterId].timestamp - ).toLocaleString()} - -
    - )} -
  • + + {Object.keys(votes).length === 0 && ( + No votes yet + )} + {isCongressDaoID && + isVotingBodyDao && + votersCount > Object.keys(votes).length && ( +
    + Note: Indexer is currently running behind schedule, and the expected + results may take longer to appear. We appreciate your patience and + apologize for any inconvenience. +
    + )} + {Object.keys(votes).map((voterId) => { + const vote = + isCongressDaoID || isVotingBodyDao + ? votes[voterId].vote + : votes[voterId]; + return ( +
    +
  • +
    +
    + +
    +
    + {vote}, + variant: `round`, + size: "md" + }} + /> +
    +
    + {((isCongressDaoID && votes[voterId].timestamp > 0) || + isVotingBodyDao) && + votes[voterId].timestamp && ( +
    + + + + + {new Date(votes[voterId].timestamp).toLocaleString()} +
    - ); - })} - + )} +
  • +
    + ); + })} +
    ); diff --git a/apps/astraplusplus/widget/DAO/Proposals/Card/ui.jsx b/apps/astraplusplus/widget/DAO/Proposals/Card/ui.jsx index 7efa726..d4d65d0 100644 --- a/apps/astraplusplus/widget/DAO/Proposals/Card/ui.jsx +++ b/apps/astraplusplus/widget/DAO/Proposals/Card/ui.jsx @@ -851,6 +851,8 @@ function renderPreVoteButtons({ proposal }) { ); } +const [footerModal, setFooterModal] = useState({}); + function renderFooter({ totalVotes, votes, comments, daoId, proposal }) { const items = [ { @@ -914,21 +916,30 @@ function renderFooter({ totalVotes, votes, comments, daoId, proposal }) { } const renderModal = (item, index) => { + const toggleKey = proposal.id + item.title; + return ( + setFooterModal((prevState) => ({ + ...prevState, + [toggleKey]: !prevState[toggleKey] + })), content: ( ), + avoidDefaultDomBehavior: true, toggle: (
    @@ -946,7 +957,7 @@ function renderFooter({ totalVotes, votes, comments, daoId, proposal }) { }; return ( -
    +
    {items.map(renderModal)}
    ); @@ -1058,52 +1069,60 @@ const NotificationModal = () => { ); }; -return ( - - - {renderPermission({ isAllowedToVote: isAllowedToVote.every((v) => v) })} - {renderHeader({ typeName, id, daoId, statusName })} - {renderData({ - proposer, - category, - description, - submission_time, - totalVotesNeeded - })} - {!!showMultiVote && - renderMultiVoteButtons({ - daoId, - proposal, - canVote +const Content = useMemo(() => { + return ( + <> + {renderPermission({ isAllowedToVote: isAllowedToVote.every((v) => v) })} + {renderHeader({ typeName, id, daoId, statusName })} + {renderData({ + proposer, + category, + description, + submission_time, + totalVotesNeeded })} - - {statusName !== "Pre Vote" && - !showMultiVote && - renderVoteButtons({ - totalVotes, - statusName, - votes, - accountId, - isAllowedToVote, - handleVote: (action) => { - if (isVotingBodyDao) { - return handleVote({ - action, - daoId, - proposalId: proposal.id, - proposer - }); - } else { - setNotificationModal(true); - setVoteDetails(action); + {!!showMultiVote && + renderMultiVoteButtons({ + daoId, + proposal, + canVote + })} + + {statusName !== "Pre Vote" && + !showMultiVote && + renderVoteButtons({ + totalVotes, + statusName, + votes, + accountId, + isAllowedToVote, + handleVote: (action) => { + if (isVotingBodyDao) { + return handleVote({ + action, + daoId, + proposalId: proposal.id, + proposer + }); + } else { + setNotificationModal(true); + setVoteDetails(action); + } } - } - })} + })} - {statusName === "Pre Vote" && - renderPreVoteButtons({ - proposal - })} + {statusName === "Pre Vote" && + renderPreVoteButtons({ + proposal + })} + + ); +}, [proposal.id]); + +return ( + + + {Content} {renderFooter({ totalVotes, votes, diff --git a/apps/astraplusplus/widget/DAO/Proposals/ProposalsPikespeak.jsx b/apps/astraplusplus/widget/DAO/Proposals/ProposalsPikespeak.jsx index 545ab1d..72cb041 100644 --- a/apps/astraplusplus/widget/DAO/Proposals/ProposalsPikespeak.jsx +++ b/apps/astraplusplus/widget/DAO/Proposals/ProposalsPikespeak.jsx @@ -239,7 +239,7 @@ function getDaoConfig() { getDaoConfig(); return ( - <> +
    - - Table View - {state.tableView ? ( - - ) : ( - - )} - - ), - variant: "info outline", - size: "md", - onClick: () => { - Storage.privateSet("tableView", !state.tableView); - State.update({ - ...state, - tableView: !state.tableView - }); - } - }} - /> +
    + + Table View + {state.tableView ? ( + + ) : ( + + )} + + ), + variant: "info outline", + size: "md", + onClick: () => { + Storage.privateSet("tableView", !state.tableView); + State.update({ + ...state, + tableView: !state.tableView + }); + } + }} + /> +
    )} -
    +
    {state.tableView ? ( )} +
    -
    - 0, - hasNext: hasNextHandler(), - onPrev: () => { - update({ - page: state.page - 1 - }); - }, - onNext: () => { - update({ - page: state.page + 1 - }); - }, - nextHref: `#proposals-top` - }} - /> -
    +
    +
    + +
    + 0, + hasNext: hasNextHandler(), + onPrev: () => { + update({ + page: state.page - 1 + }); + }, + onNext: () => { + update({ + page: state.page + 1 + }); + }, + nextHref: `#proposals-top` + }} + /> +
    + {state.multiSelectMode && ( <>
    )} - +
    ); diff --git a/apps/astraplusplus/widget/Layout/Modal.jsx b/apps/astraplusplus/widget/Layout/Modal.jsx index e6bcc74..d37d6c8 100644 --- a/apps/astraplusplus/widget/Layout/Modal.jsx +++ b/apps/astraplusplus/widget/Layout/Modal.jsx @@ -1,56 +1,83 @@ const toggle = props.toggle ?? ; const toggleContainerProps = props.toggleContainerProps ?? {}; const content = props.content ?? ( -
    Modal Content
    +
    Modal Content
    ); const open = props.open; const onOpenChange = props.onOpenChange; const modalWidth = props.modalWidth ?? "700px"; +const avoidDefaultDomBehavior = props.avoidDefaultDomBehavior; const Overlay = styled.div` - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: grid; - place-items: center; - overflow-y: auto; - z-index: 1000; - width: 100vw; - height: 100vh; - background: rgba(0, 0, 0, 0.7); - backdrop-filter: blur(6px); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: grid; + place-items: center; + overflow-y: auto; + z-index: 99999; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(6px); `; const Content = styled.div` - max-width: ${modalWidth}; - max-height: 100%; - overflow-y: auto; - margin-top: 20px; - margin-bottom: 20px; - outline: none !important; + max-width: ${modalWidth}; + max-height: 100%; + overflow-y: auto; + margin-top: 20px; + margin-bottom: 20px; + outline: none !important; `; const NoButton = styled.button` - background: transparent; - border: none; - padding: 0; - margin: 0; - box-shadow: none; + background: transparent; + border: none; + padding: 0; + margin: 0; + box-shadow: none; `; +const avoidDefaultBehavior = (e) => { + avoidDefaultDomBehavior && e.preventDefault(); +}; + return ( - - - {toggle} - - - - - {content} - - - - + + + {toggle} + + + + + +
    + {avoidDefaultDomBehavior && ( +
    + + + +
    + )} + {content} +
    +
    +
    +
    +
    +
    );