Skip to content

Commit

Permalink
Add price info and make all hover identical (#208)
Browse files Browse the repository at this point in the history 
Resolves #202
  • Loading branch information
@Megha-Dev-19
Megha-Dev-19 authored Jan 11, 2025
1 parent 1b91f3f commit 2b58f48
Show file tree
Hide file tree
Showing 15 changed files with 149 additions and 105 deletions.
2 changes: 1 addition & 1 deletion instances/treasury-devdao.near/widget/components/DropDown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ return (
)}
</ul>
{selected?.description && (
<div classNameName="text-secondary text-sm mt-1">
<div className="text-secondary text-sm mt-1">
{selected.description}
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion instances/treasury-devdao.near/widget/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ return (
treasuryLogo
)}
<div className="h3 mb-0">{getTitle(page ?? "dashboard")}</div>
{isTesting && <div>(Testing)</div>}
{isTesting && <div className="text-secondary">(Testing)</div>}
</div>
<div>
<span className="text-sm">Treasury Wallet: </span>
Expand Down
3 changes: 2 additions & 1 deletion instances/treasury-devdao.near/widget/components/OverlayTrigger.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,10 @@ const overlayClassName = props.overlayClassName ?? "m-3 p-2 rounded-3 shadow";
const overlayStyle = props.overlayStyle ?? {
maxWidth: "24em",
zIndex: 1070,
backgroundColor: isDarkTheme ? "#222222" : "#f4f4f4",
backgroundColor: isDarkTheme ? "#222222" : "#FFFFFF",
color: isDarkTheme ? "#CACACA" : "#1B1B18",
border: "1px solid " + (isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)"),
fontSize: 13,
};

const overlay = (
Expand Down
26 changes: 14 additions & 12 deletions instances/treasury-devdao.near/widget/components/VoteActions.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,18 +212,20 @@ return (
{!isReadyToBeWithdrawn ? (
<div className="text-center fw-semi-bold">
Voting is not available before unstaking release{" "}
<OverlayTrigger
placement="top"
overlay={
<Tooltip id="tooltip">
These tokens were unstaked, but are not yet ready for
withdrawl. Tokens are ready for withdrawl 52-65 hours after
unstaking.{" "}
</Tooltip>
}
>
<i className="bi bi-info-circle text-secondary"></i>
</OverlayTrigger>
<Widget
src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.OverlayTrigger"
props={{
popup: (
<div>
These tokens were unstaked, but are not yet ready for
withdrawal. Tokens are ready for withdrawal 52-65 hours
after unstaking.
</div>
),
children: <i className="bi bi-info-circle text-secondary"></i>,
instance,
}}
/>
</div>
) : (
hasVotingPermission && (
Expand Down
4 changes: 4 additions & 0 deletions instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -384,6 +384,10 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
.error-icon {
color: var(--other-red) !important;
}
.primary-icon {
color: var(--theme-color) !important;
}
`;

return !config ? (
Expand Down
17 changes: 11 additions & 6 deletions instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ const {
nearBalances,
isLockupContract,
nearWithdrawTokens,
instance,
} = props;

function convertBalanceToReadableFormat(amount, decimals) {
Expand Down Expand Up @@ -106,12 +107,16 @@ const BalanceDisplay = ({
{label}
{" "}{" "}
{!hideTooltip && (
<OverlayTrigger
placement="top"
overlay={<Tooltip id="tooltip">{tooltipInfo}</Tooltip>}
>
<i className="bi bi-info-circle text-secondary"></i>
</OverlayTrigger>
<Widget
src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.OverlayTrigger"
props={{
popup: tooltipInfo,
children: (
<i className="bi bi-info-circle text-secondary"></i>
),
instance,
}}
/>
)}
</div>
<div className="d-flex gap-3 align-items-center justify-content-end">
Expand Down
2 changes: 2 additions & 0 deletions instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,7 @@ return (
</div>
</div>
),
instance,
}}
/>
{lockupContract && (
Expand Down Expand Up @@ -287,6 +288,7 @@ return (
</div>
</div>
),
instance,
}}
/>
)}
Expand Down
66 changes: 51 additions & 15 deletions instances/treasury-devdao.near/widget/pages/payments/CreatePaymentRequest.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const [isReceiverRegistered, setReceiverRegister] = useState(false);
const [isLoadingProposals, setLoadingProposals] = useState(false);
const [showCancelModal, setShowCancelModal] = useState(false);
const [showErrorToast, setShowErrorToast] = useState(false);
const [nearPrice, setNearPrice] = useState(null);

useEffect(() => {
if (!showProposalSelection) {
Expand Down Expand Up @@ -236,16 +237,24 @@ const Container = styled.div`
}
`;

const nearPrice = useCache(
() =>
asyncFetch(
`https://api.coingecko.com/api/v3/simple/price?ids=near&vs_currencies=usd`
).then((res) => {
return res.body.near?.usd;
}),
"near-price",
{ subscribe: false }
);
const nearPriceAPI =
"https://api.coingecko.com/api/v3/simple/price?ids=near&vs_currencies=usd";

useEffect(() => {
function fetchNearPrice() {
asyncFetch(nearPriceAPI).then((res) => {
if (res.body.near?.usd) {
setNearPrice(res.body.near.usd);
}
});
}
const interval = setInterval(() => {
fetchNearPrice();
}, 60_000);

fetchNearPrice();
return () => clearInterval(interval);
}, []);

function onSelectProposal(id) {
if (!id) {
Expand Down Expand Up @@ -555,11 +564,38 @@ return (
/>
{tokenId === tokenMapping.NEAR && (
<div className="d-flex gap-2 align-items-center justify-content-between">
USD:{" "}
{Big(amount ? amount : 0)
.mul(nearPrice)
.toFixed(2)}
<div>Price: ${Big(nearPrice).toFixed(2)}</div>
<div className="d-flex gap-1 align-items-center">
{"$" +
Big(amount ? amount : 0)
.mul(nearPrice)
.toFixed(2)
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
<Widget
src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.OverlayTrigger"
props={{
popup: (
<div>
The USD value is calculated based on token prices from{" "}
<a
href={nearPriceAPI}
target="_blank"
rel="noopener noreferrer"
className="primary-text"
>
{" "}
CoinGecko
</a>{" "}
and updates automatically every minute.
</div>
),
children: (
<i className="bi bi-info-circle primary-icon h6 mb-0"></i>
),
instance,
}}
/>
</div>
<div>${Big(nearPrice).toFixed(2)}</div>
</div>
)}
</div>
Expand Down
44 changes: 10 additions & 34 deletions instances/treasury-devdao.near/widget/pages/settings/MembersPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,34 +52,6 @@ const Container = styled.div`
color: var(--text-color) !important;
}
.custom-tooltip {
position: relative;
cursor: pointer;
}
.custom-tooltip .tooltiptext {
display: none;
width: 300px;
background-color: var(--bg-page-color);
color: var(--text-color) !important;
border: 1px solid var(--border-color) !important;
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 10000;
top: 110%;
right: 80%;
opacity: 0;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
transition: opacity 0.3s;
}
.custom-tooltip:hover .tooltiptext {
display: block;
opacity: 1;
}
.card-title {
font-size: 20px;
font-weight: 600;
Expand Down Expand Up @@ -212,12 +184,16 @@ const Members = () => {
<td>
<div className="d-flex gap-3 align-items-center">
{(group.roles ?? []).map((i) => (
<Tag className="rounded-pill px-2 py-1 custom-tooltip">
{i}
<div className="tooltiptext p-2">
{getPermissionsText(i)}
</div>
</Tag>
<Widget
src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.OverlayTrigger"
props={{
popup: getPermissionsText(i),
children: (
<Tag className="rounded-pill px-2 py-1">{i}</Tag>
),
instance,
}}
/>
))}
</div>
</td>
Expand Down
20 changes: 11 additions & 9 deletions instances/treasury-devdao.near/widget/pages/stake-delegation/CreateStakeRequest.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,12 +170,14 @@ const BalanceDisplay = ({ label, balance, tooltipInfo, noBorder }) => {
<div className="h6 mb-0">
{label}
{" "}{" "}
<OverlayTrigger
placement="top"
overlay={<Tooltip id="tooltip">{tooltipInfo}</Tooltip>}
>
<i className="bi bi-info-circle text-secondary"></i>
</OverlayTrigger>
<Widget
src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.OverlayTrigger"
props={{
popup: tooltipInfo,
children: <i className="bi bi-info-circle text-secondary"></i>,
instance,
}}
/>
</div>
<div className="h6 mb-0 d-flex align-items-center gap-1">
{balance} NEAR
Expand Down Expand Up @@ -245,7 +247,7 @@ function getBalances() {
return {
staked: lockupStakedTokens,
unstaked: lockupUnStakedTokens,
withdrawl: lockupNearWithdrawTokens,
withdrawal: lockupNearWithdrawTokens,
available: Big(lockupNearBalances.totalParsed ?? "0")
.minus(lockupStakedTotalTokens ?? "0")
.minus(formatNearAmount(LOCKUP_MIN_BALANCE_FOR_STORAGE))
Expand All @@ -256,7 +258,7 @@ function getBalances() {
return {
staked: nearStakedTokens,
unstaked: nearUnStakedTokens,
withdrawl: nearWithdrawTokens,
withdrawal: nearWithdrawTokens,
available: nearBalances.availableParsed,
};
}
Expand Down Expand Up @@ -486,7 +488,7 @@ return (
<BalanceDisplay
noBorder={true}
label={"Available for withdrawal"}
balance={getBalances().withdrawl}
balance={getBalances().withdrawal}
tooltipInfo={TooltipText?.availableForWithdraw}
/>
</div>
Expand Down
20 changes: 11 additions & 9 deletions instances/treasury-devdao.near/widget/pages/stake-delegation/CreateUnstakeRequest.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,12 +228,14 @@ const BalanceDisplay = ({ label, balance, tooltipInfo, noBorder }) => {
<div className="h6 mb-0">
{label}
{" "}{" "}
<OverlayTrigger
placement="top"
overlay={<Tooltip id="tooltip">{tooltipInfo}</Tooltip>}
>
<i className="bi bi-info-circle text-secondary"></i>
</OverlayTrigger>
<Widget
src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.OverlayTrigger"
props={{
popup: tooltipInfo,
children: <i className="bi bi-info-circle text-secondary"></i>,
instance,
}}
/>
</div>
<div className="h6 mb-0 d-flex align-items-center gap-1">
{balance} NEAR
Expand All @@ -250,7 +252,7 @@ function getBalances() {
return {
staked: lockupStakedTokens,
unstaked: lockupUnStakedTokens,
withdrawl: lockupNearWithdrawTokens,
withdrawal: lockupNearWithdrawTokens,
available: Big(lockupNearBalances.totalParsed ?? "0")
.minus(lockupStakedTotalTokens ?? "0")
.minus(formatNearAmount(LOCKUP_MIN_BALANCE_FOR_STORAGE))
Expand All @@ -261,7 +263,7 @@ function getBalances() {
return {
staked: nearStakedTokens,
unstaked: nearUnStakedTokens,
withdrawl: nearWithdrawTokens,
withdrawal: nearWithdrawTokens,
available: nearBalances.availableParsed,
};
}
Expand Down Expand Up @@ -495,7 +497,7 @@ return (
<BalanceDisplay
noBorder={true}
label={"Available for withdrawal"}
balance={getBalances().withdrawl}
balance={getBalances().withdrawal}
tooltipInfo={TooltipText?.availableForWithdraw}
/>
</div>
Expand Down
Loading

0 comments on commit 2b58f48

Please sign in to comment.