Tokens available:{" "}
{option.value === "NEAR"
? getNearAvailableBalance(option.tokenBalance)
@@ -226,7 +223,7 @@ return (
>
+
+
+
+ {showInProgress ? (
+
+
+
+ Processing your request ...
+
+
+ ) : (
+
+
+
+ Something went wrong. Please try resubmitting the request.
+
+
+ )}
+
+
+
+ ) : null;
+}
+return { TransactionLoader };
diff --git a/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx b/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx
index 8a3b5e3e..5b08120c 100644
--- a/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx
+++ b/instances/treasury-devdao.near/widget/components/ValidatorsDropDownWithSearch.jsx
@@ -61,12 +61,6 @@ const Container = styled.div`
width: 100%;
}
- .dropdown-item.active,
- .dropdown-item:active {
- background-color: #f0f0f0 !important;
- color: black;
- }
-
.custom-select {
position: relative;
}
@@ -77,15 +71,7 @@ const Container = styled.div`
}
.selected {
- background-color: #f0f0f0;
- }
-
- input {
- background-color: #f8f9fa;
- }
-
- .cursor-pointer {
- cursor: pointer;
+ background-color: var(--grey-04);
}
.text-wrap {
@@ -93,18 +79,10 @@ const Container = styled.div`
white-space: normal;
}
- .text-muted {
- color: rgba(142, 142, 147, 1) !important;
- }
-
.text-orange {
color: rgba(255, 149, 0, 1) !important;
}
- .text-dark-grey {
- color: rgba(85, 85, 85, 1) !important;
- }
-
.disabled {
background-color: rgba(244, 244, 244, 1) !important;
color: #999999 !important;
@@ -132,7 +110,7 @@ const BalanceDisplay = ({ balance, label }) => {
return (
-
{label}
+
{label}
{formatNearAmount(balance)} NEAR
);
@@ -161,7 +139,7 @@ return (
>
{selectedOption.pool_id ?? defaultLabel}
@@ -211,7 +189,7 @@ return (
}}
>
- {fee}% Fee
+ {fee}% Fee
Active
{pool_id}
diff --git a/instances/treasury-devdao.near/widget/components/VoteActions.jsx b/instances/treasury-devdao.near/widget/components/VoteActions.jsx
index d10e460f..29afd4ca 100644
--- a/instances/treasury-devdao.near/widget/components/VoteActions.jsx
+++ b/instances/treasury-devdao.near/widget/components/VoteActions.jsx
@@ -4,6 +4,9 @@ if (!instance) {
}
const { treasuryDaoID } = VM.require(`${instance}/widget/config.data`);
+const { TransactionLoader } = VM.require(
+ `${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.TransactionLoader`
+) || { TransactionLoader: () => <> };
const votes = props.votes ?? {};
const proposalId = props.proposalId;
@@ -37,6 +40,7 @@ const [isInsufficientBalance, setInsufficientBal] = useState(false);
const [showWarning, setShowWarning] = useState(false);
const [isReadyToBeWithdrawn, setIsReadyToBeWithdrawn] = useState(true);
const [showConfirmModal, setConfirmModal] = useState(null);
+const [showErrorToast, setShowErrorToast] = useState(false);
useEffect(() => {
if (!avoidCheckForBalance) {
@@ -74,41 +78,47 @@ function getProposalData() {
(result) => result
);
}
-
-function getProposalStatus(votes) {
- const votesArray = Object.values(votes);
- return {
- isApproved:
- votesArray.filter((i) => i === "Approve").length >= requiredVotes,
- isRejected:
- votesArray.filter((i) => i === "Reject").length >= requiredVotes,
- };
-}
-
useEffect(() => {
if (isTxnCreated) {
+ let checkTxnTimeout = null;
+ let errorTimeout = null;
+
const checkForVoteOnProposal = () => {
getProposalData().then((proposal) => {
if (JSON.stringify(proposal.votes) !== JSON.stringify(votes)) {
checkProposalStatus();
+ clearTimeout(errorTimeout);
setTxnCreated(false);
} else {
- setTimeout(() => checkForVoteOnProposal(), 1000);
+ checkTxnTimeout = setTimeout(checkForVoteOnProposal, 1000);
}
});
};
+
checkForVoteOnProposal();
+
+ // if in 20 seconds there is no change, show error condition
+ errorTimeout = setTimeout(() => {
+ setShowErrorToast(true);
+ setTxnCreated(false);
+ clearTimeout(checkTxnTimeout);
+ }, 20000);
+
+ return () => {
+ clearTimeout(checkTxnTimeout);
+ clearTimeout(errorTimeout);
+ };
}
}, [isTxnCreated]);
const Container = styled.div`
.reject-btn {
- background-color: #2c3e50;
+ background-color: var(--other-primary);
border-radius: 5px;
color: white;
&:hover {
- background-color: #2c3e50;
+ background-color: var(--other-primary);
color: white;
}
}
@@ -120,23 +130,15 @@ const Container = styled.div`
}
.approve-btn {
- background-color: #04a46e;
+ background-color: var(--other-green);
border-radius: 5px;
color: white;
&:hover {
- background-color: #04a46e;
+ background-color: var(--other-green);
color: white;
}
}
-
- .fw-semi-bold {
- font-weight: 500;
- }
-
- .text-dark-grey {
- color: rgba(85, 85, 85, 1) !important;
- }
`;
useEffect(() => {
@@ -152,7 +154,10 @@ const InsufficientBalanceWarning = () => {
The request cannot be approved because the treasury balance is
@@ -162,8 +167,15 @@ const InsufficientBalanceWarning = () => {
) : null;
};
+
return (
+ setShowErrorToast(false)}
+ />
+
}
>
-
) : (
hasVotingPermission && (
{
+ ActionButton: () => (
+ {
+ ActionButton: () => (
+
@@ -255,20 +287,30 @@ return (
)}
{/* currently showing delete btn only for proposal creator */}
{hasDeletePermission && proposalCreator === accountId && (
-
{
- setVote(actions.REMOVE);
- setConfirmModal(true);
+ (
+
+
+ ),
+ checkForDeposit: false,
+ treasuryDaoID,
+ disabled: isTxnCreated,
+ callbackAction: () => {
+ setVote(actions.REMOVE);
+ setConfirmModal(true);
+ },
}}
- data-testid="delete-btn"
- disabled={isTxnCreated}
- >
-
+ />
)}
)}
diff --git a/instances/treasury-devdao.near/widget/components/Votes.jsx b/instances/treasury-devdao.near/widget/components/Votes.jsx
index d9070667..e8068da2 100644
--- a/instances/treasury-devdao.near/widget/components/Votes.jsx
+++ b/instances/treasury-devdao.near/widget/components/Votes.jsx
@@ -8,9 +8,9 @@ const getPercentage = (value) =>
const Container = styled.div`
.bar {
- background-color: #e2e6ec;
+ background-color: var(--grey-04);
width: 100px;
- height: 20px;
+ height: 10px;
overflow: hidden;
}
.flex-item {
@@ -22,7 +22,7 @@ const Container = styled.div`
}
.green {
- color: #04a46e;
+ color: var(--other-green);
text-align: left;
}
@@ -49,7 +49,10 @@ return (
diff --git a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
index 02e2b253..53df5cd8 100644
--- a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
+++ b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
@@ -1,48 +1,6 @@
-const data = fetch(`https://httpbin.org/headers`);
-const gatewayURL = data?.body?.headers?.Origin ?? "";
-
-// we need fixed positioning for near social and not for org
-const ParentContainer = gatewayURL.includes("near.org")
- ? styled.div`
- width: 100%;
- `
- : styled.div`
- position: fixed;
- inset: 73px 0px 0px;
- width: 100%;
- overflow-y: scroll;
- background: var(--theme-bg-color) !important;
- `;
-
-const Theme = styled.div`
- display: flex;
- flex-direction: column;
- padding-top: calc(-1 * var(--body-top-padding));
- background: var(--theme-bg-color) !important;
-
- // remove up/down arrow in input of type = number
- /* For Chrome, Safari, and Edge */
- input[type="number"]::-webkit-outer-spin-button,
- input[type="number"]::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
-
- /* For Firefox */
- input[type="number"] {
- -moz-appearance: textfield;
- }
-
- .card {
- border-color: #e2e6ec !important;
- border-width: 1px !important;
- border-radius: 14px;
- }
-`;
-
-const Container = styled.div`
- width: 100%;
-`;
+const { BalanceBanner } = VM.require(
+ `${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.BalanceBanner`
+) || { BalanceBanner: () => <> };
const AppHeader = ({ page, instance }) => (
(
/>
);
-function AppLayout({ page, instance, children }) {
- return (
-
-
-
- {children}
-
+function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
+ const config = treasuryDaoID
+ ? useCache(
+ () => Near.asyncView(treasuryDaoID, "get_config"),
+ treasuryDaoID + "_get_config",
+ { subscribe: false }
+ )
+ : null;
+ const metadata = JSON.parse(atob(config.metadata ?? ""));
+
+ const data = fetch(`https://httpbin.org/headers`);
+ const gatewayURL = data?.body?.headers?.Origin ?? "";
+ const isDarkTheme = metadata.theme === "dark";
+
+ const getColors = (isDarkTheme) => `
+ ${metadata.primaryColor ? `--theme-color: ${metadata.primaryColor};` : ""}
+ --bg-header-color: ${isDarkTheme ? "#222222" : "#2C3E50"};
+ --bg-page-color: ${isDarkTheme ? "#222222" : "#FFFFFF"};
+ --bg-system-color: ${isDarkTheme ? "#131313" : "#f4f4f4"};
+ --text-color: ${isDarkTheme ? "#CACACA" : "#1B1B18"};
+ --text-secondary-color: ${isDarkTheme ? "#878787" : "#999999"};
+ --text-alt-color: ${isDarkTheme ? "#FFFFFF" : "#FFFFFF"};
+ --link-inactive-color: ${isDarkTheme ? "" : "white"};
+ --link-active-color: ${isDarkTheme ? "" : "white"};
+ --border-color: ${isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)"};
+ --grey-01: ${isDarkTheme ? "#F4F4F4" : "#1B1B18"};
+ --grey-02: ${isDarkTheme ? "#B3B3B3" : "#555555"};
+ --grey-03: ${isDarkTheme ? "#555555" : "#B3B3B3"};
+ --grey-04: ${isDarkTheme ? "#323232" : "#F4F4F4"};
+ --grey-05: ${isDarkTheme ? "#1B1B18" : "#F7F7F7"};
+ --icon-color: ${isDarkTheme ? "#CACACA" : "#060606"};
+ --other-primary:#2775C9;
+ --other-warning:#B17108;
+ --other-green:#3CB179;
+ --other-red:#D95C4A;
+
+ // bootstrap theme color
+ --bs-body-bg: var(--bg-page-color);
+ --bs-border-color: var(--border-color);
+ --bs-dropdown-link-hover-color: var(--grey-04);
+`;
+
+ const ParentContainer = styled.div`
+ ${() => getColors(isDarkTheme)}
+ width: 100%;
+ background: var(--bg-system-color) !important;
+ ${() =>
+ gatewayURL.includes("near.org")
+ ? `
+ /* Styles specific to near.org */
+ position: static;
+ `
+ : `
+ /* Styles specific to other URLs */
+ position: fixed;
+ inset: 73px 0px 0px;
+ overflow-y: scroll;
+ `}
+ `;
+
+ const Theme = styled.div`
+ padding-top: calc(-1 * var(--body-top-padding));
+
+ // remove up/down arrow in input of type = number
+ /* For Chrome, Safari, and Edge */
+ input[type="number"]::-webkit-outer-spin-button,
+ input[type="number"]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+
+ /* For Firefox */
+ input[type="number"] {
+ -moz-appearance: textfield;
+ }
+
+ .card {
+ border-color: var(--border-color) !important;
+ border-width: 1px !important;
+ border-radius: 14px;
+ background-color: var(--bg-page-color) !important;
+ }
+
+ .dropdown-menu {
+ background-color: var(--bg-page-color) !important;
+ color: var(--text-color) !important;
+ }
+
+ .dropdown-item.active,
+ .dropdown-item:active {
+ background-color: var(--grey-04) !important;
+ color: inherit !important;
+ }
+
+ .offcanvas {
+ background-color: var(--bg-page-color) !important;
+ color: var(--text-color) !important;
+ }
+
+ color: var(--text-color);
+
+ a {
+ text-decoration: none;
+ color: var(--link-inactive-color) !important;
+ &.active {
+ color: var(--link-active-color) !important;
+ font-weight: 700 !important;
+ }
+
+ &:hover {
+ text-decoration: none;
+ color: var(--link-active-color) !important;
+ font-weight: 700 !important;
+ }
+ }
+
+ button.primary {
+ background: var(--theme-color) !important;
+ color: var(--text-alt-color) !important;
+ border: none !important;
+ padding-block: 0.7rem !important;
+ i {
+ color: var(--text-alt-color) !important;
+ }
+ }
+
+ .primary-button {
+ background: var(--theme-color) !important;
+ color: var(--text-alt-color) !important;
+ border: none !important;
+ i {
+ color: var(--text-alt-color) !important;
+ }
+ }
+
+ .text-lg {
+ font-size: 15px;
+ }
+
+ .fw-semi-bold {
+ font-weight: 500;
+ }
+
+ .text-secondary {
+ color: var(--text-secondary-color) !important;
+ }
+
+ .max-w-100 {
+ max-width: 100%;
+ }
+
+ .custom-truncate {
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 1.5;
+ max-height: 4.5em;
+ text-align: left;
+ }
+
+ .display-none {
+ display: none;
+ }
+
+ .text-right {
+ text-align: end;
+ }
+
+ .text-left {
+ text-align: left;
+ }
+ .text-underline {
+ text-decoration: underline !important;
+ }
+
+ .bg-highlight {
+ background-color: rgb(185, 185, 185, 0.2);
+ }
+
+ .cursor-pointer {
+ cursor: pointer;
+ }
+
+ .theme-btn {
+ background: var(--theme-color) !important;
+ color: white !important;
+ border: none;
+ }
+
+ .theme-btn.btn:hover {
+ color: white !important;
+ }
+
+ .toast-container {
+ right: 10px !important;
+ bottom: 10px !important;
+ }
+ .toast {
+ border-radius: 10px;
+ overflow: hidden;
+ color: var(--text-color) !important;
+ background: var(--bg-page-color) !important;
+ border-color: var(--border-color) !important;
+
+ a {
+ color: inherit !important;
+ &:active {
+ color: inherit !important;
+ }
+ &:hover {
+ color: inherit !important;
+ }
+ }
+ }
+
+ .toast-header {
+ background-color: var(--bg-system-color) !important;
+ color: var(--text-secondary-color) !important;
+ }
+
+ .text-md {
+ font-size: 15px;
+ }
+
+ .primary-text-color {
+ color: var(--theme-color);
+ a {
+ color: var(--theme-color) !important;
+ }
+
+ i {
+ color: var(--theme-color) !important;
+ }
+ }
+
+ .btn-outline.btn:hover {
+ color: inherit !important;
+ }
+
+ .primary-text-color.btn:hover {
+ color: inherit !important;
+ }
+
+ .btn-outline-plain {
+ padding-block: 8px !important;
+ padding-inline: 10px !important;
+ border-radius: 0.375rem !important;
+ border: 1.5px solid var(--border-color) !important;
+ background-color: var(--bg-page-color) !important;
+ color: var(--text-color) !important;
+
+ &:hover {
+ background-color: white;
+ color: black;
+ }
+ }
+
+ h6,
+ .h6,
+ h5,
+ .h5,
+ h4,
+ .h4,
+ h3,
+ .h3,
+ h2,
+ .h2,
+ h1,
+ .h1 {
+ color: var(--text-color) !important;
+ }
+
+ .btn:disabled,
+ .btn.disabled,
+ fieldset:disabled {
+ border-color: transparent !important;
+ }
+
+ .table {
+ border-color: var(--border-color) !important;
+ color: var(--text-color) !important;
+ }
+
+ .bg-white {
+ background-color: var(--bg-page-color) !important;
+ color: var(--text-color) !important;
+ }
+
+ .bg-dropdown {
+ background-color: var(--bg-page-color) !important;
+ color: var(--text-color) !important;
+ }
+
+ .bg-custom-overlay {
+ background-color: var(--bg-page-color) !important;
+ color: var(--text-color) !important;
+ }
+
+ .fill-accent {
+ fill: var(--theme-color);
+ }
+
+ .use-max-bg {
+ color: #007aff;
+ cursor: pointer;
+ }
+
+ .bg-validator-info {
+ background: rgba(0, 16, 61, 0.06);
+ color: #1b1b18;
+ padding-inline: 0.8rem;
+ padding-block: 0.5rem;
+ font-weight: 500;
+ font-size: 13px;
+ }
+
+ .bg-validator-warning {
+ background: rgba(255, 158, 0, 0.1);
+ color: var(--other-warning);
+ padding-inline: 0.8rem;
+ padding-block: 0.5rem;
+ font-weight: 500;
+ font-size: 13px;
+ }
+
+ .bg-withdraw-warning {
+ background: rgba(255, 158, 0, 0.1);
+ color: var(--other-warning);
+ padding-inline: 0.8rem;
+ padding-block: 0.5rem;
+ font-weight: 500;
+ font-size: 13px;
+ }
+
+ .text-sm {
+ font-size: 13px;
+ }
+
+ .text-secondary a {
+ color: inherit !important;
+ }
+
+ .text-delete {
+ color: var(--other-red) !important;
+
+ i {
+ color: var(--other-red) !important;
+ }
+ }
+
+ .btn-outline.btn:hover {
+ color: inherit !important;
+ }
+
+ .border-right {
+ border-right: 1px solid var(--border-color);
+ }
+
+ .cursor-pointer {
+ cursor: pointer;
+ }
+
+ .success-icon {
+ color: var(--other-green) !important;
+ }
+
+ .warning-icon {
+ color: var(--other-warning) !important;
+ }
+
+ .error-icon {
+ color: var(--other-red) !important;
+ }
+ `;
+
+ return !config ? (
+ <>
+ ) : (
+
+
+ {children}
);
diff --git a/instances/treasury-devdao.near/widget/config/css.jsx b/instances/treasury-devdao.near/widget/config/css.jsx
index 5446ba50..aae9f279 100644
--- a/instances/treasury-devdao.near/widget/config/css.jsx
+++ b/instances/treasury-devdao.near/widget/config/css.jsx
@@ -1,66 +1,5 @@
const Theme = styled.div`
--theme-color: #05a36e;
- --theme-bg-color: #f4f4f4;
- --text-color: white;
- --link-inactive-color: white;
- --link-active-color: white;
- --border-color: rgba(226, 230, 236, 1);
- --light-grey-color: rgba(185, 185, 185, 1);
- --dark-grey-color: rgba(103, 103, 103, 1);
-
- a {
- text-decoration: none;
- color: var(--link-inactive-color) !important;
- &.active {
- color: var(--link-active-color) !important;
- font-weight: 700 !important;
- }
-
- &:hover {
- text-decoration: none;
- color: var(--link-active-color) !important;
- font-weight: 700 !important;
- }
- }
-
- button {
- &.primary {
- background: var(--theme-color);
- color: var(--text-color);
- border: none !important;
- padding-block: 0.7rem !important;
- }
- }
-
- .text-light-grey {
- color: var(--light-grey-color);
- }
-
- .text-muted {
- color: var(--dark-grey-color);
- }
-
- .text-md {
- font-size: 15px;
- }
-
- .primary-text-color {
- color: var(--theme-color);
- }
-
- .btn-outline-plain {
- padding-block: 8px;
- padding-inline: 10px;
- border-radius: 0.375rem;
- border: 1.5px solid #e2e6ec;
- background-color: white;
- color: black;
-
- &:hover {
- background-color: white;
- color: black;
- }
- }
`;
return { Theme };
diff --git a/instances/treasury-devdao.near/widget/lib/common.jsx b/instances/treasury-devdao.near/widget/lib/common.jsx
index 3ac04750..8ec3cc59 100644
--- a/instances/treasury-devdao.near/widget/lib/common.jsx
+++ b/instances/treasury-devdao.near/widget/lib/common.jsx
@@ -1,5 +1,7 @@
function getApproversAndThreshold(treasuryDaoID, kind, isDeleteCheck) {
- const daoPolicy = Near.view(treasuryDaoID, "get_policy", {});
+ const daoPolicy = treasuryDaoID
+ ? Near.view(treasuryDaoID, "get_policy", {})
+ : null;
const groupWithPermission = (daoPolicy.roles ?? []).filter((role) => {
const permissions = isDeleteCheck
? ["*:*", `${kind}:*`, `${kind}:VoteRemove`, "*:VoteRemove"]
@@ -84,7 +86,10 @@ function getRoleWiseData(treasuryDaoID) {
}
function getPolicyApproverGroup(treasuryDaoID) {
- const daoPolicy = Near.view(treasuryDaoID, "get_policy", {});
+ const daoPolicy = treasuryDaoID
+ ? Near.view(treasuryDaoID, "get_policy", {})
+ : null;
+
const groupWithPermission = (daoPolicy.roles ?? []).filter((role) => {
const policyPermissions = [
"*:*",
@@ -359,7 +364,10 @@ function getMembersAndPermissions(treasuryDaoID) {
}
function getDaoRoles(treasuryDaoID) {
- const daoPolicy = Near.view(treasuryDaoID, "get_policy", {});
+ const daoPolicy = treasuryDaoID
+ ? Near.view(treasuryDaoID, "get_policy", {})
+ : null;
+
if (Array.isArray(daoPolicy.roles)) {
return daoPolicy.roles.map((role) => role.name);
}
@@ -372,7 +380,10 @@ function hasPermission(treasuryDaoID, accountId, kindName, actionType) {
return false;
}
const isAllowed = false;
- const daoPolicy = Near.view(treasuryDaoID, "get_policy", {});
+ const daoPolicy = treasuryDaoID
+ ? Near.view(treasuryDaoID, "get_policy", {})
+ : null;
+
if (Array.isArray(daoPolicy.roles)) {
const permissions = daoPolicy.roles.map((role) => {
if (
@@ -426,10 +437,8 @@ function formatNearAmount(amount) {
.toFixed(2);
}
-function getNearBalances(treasuryDaoID) {
- const resp = fetch(
- `https://api.fastnear.com/v1/account/${treasuryDaoID}/full`
- );
+function getNearBalances(accountId) {
+ const resp = fetch(`https://api.fastnear.com/v1/account/${accountId}/full`);
const storage = Big(resp?.body?.state?.storage_bytes ?? "0")
.mul(Big(10).pow(19))
.toFixed();
@@ -483,7 +492,7 @@ function formatSubmissionTimeStamp(submissionTime, proposalPeriod) {
? "Expired"
: `${totalDays}d ${remainingHours}h ${remainingMinutes}m`}
-
+
{hours}:{minutes} {day} {month} {year}
diff --git a/instances/treasury-devdao.near/widget/lib/modal.jsx b/instances/treasury-devdao.near/widget/lib/modal.jsx
index 336bf784..36921f0b 100644
--- a/instances/treasury-devdao.near/widget/lib/modal.jsx
+++ b/instances/treasury-devdao.near/widget/lib/modal.jsx
@@ -25,11 +25,6 @@ const ModalDiv = styled.div`
.btn {
font-size: 14px;
}
-
- .theme-btn {
- background: var(--theme-color) !important;
- color: white;
- }
`;
const ModalBackdrop = styled.div`
@@ -100,7 +95,7 @@ const NoButton = styled.button`
const ModalHeader = ({ children }) => (
- {children}
+ {children}
);
diff --git a/instances/treasury-devdao.near/widget/lib/skeleton.jsx b/instances/treasury-devdao.near/widget/lib/skeleton.jsx
index c7407f97..4c37b049 100644
--- a/instances/treasury-devdao.near/widget/lib/skeleton.jsx
+++ b/instances/treasury-devdao.near/widget/lib/skeleton.jsx
@@ -1,5 +1,5 @@
const Skeleton = styled.div`
- background: #efefef;
+ background: var(--grey-04);
animation: pulse 1.5s ease-in-out infinite;
@keyframes pulse {
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
index 317153ba..333ea80d 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
+++ b/instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
@@ -1,4 +1,10 @@
-const { nearPrice, ftTokens, accountId, title } = props;
+const { nearPrice, ftTokens, accountId, title, instance } = props;
+
+if (!instance) {
+ return <>;
+}
+
+const { treasuryDaoID } = VM.require(`${instance}/widget/config.data`);
const { Skeleton } = VM.require(
"${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.skeleton"
@@ -18,10 +24,10 @@ const [selectedPeriod, setSelectedPeriod] = useState({
const [selectedToken, setSelectedToken] = useState("near");
const [isLoading, setIsLoading] = useState(true);
const [balanceDate, setBalanceDate] = useState({ balance: 0, date: "" });
-const nearTokenIcon = "${REPL_NEAR_TOKEN_ICON}";
+
const nearTokenInfo = {
contract: "near",
- ft_meta: { symbol: "NEAR", icon: nearTokenIcon },
+ ft_meta: { symbol: "NEAR" },
};
const tokens = Array.isArray(ftTokens)
@@ -43,8 +49,20 @@ function formatCurrency(amount) {
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
+const config = treasuryDaoID ? Near.view(treasuryDaoID, "get_config") : null;
+const metadata = JSON.parse(atob(config.metadata ?? ""));
+
+const isDarkTheme = metadata.theme === "dark";
+const bgPageColor = isDarkTheme ? "#222222" : "#FFFFFF";
+const borderColor = isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)";
+const iconColor = isDarkTheme ? "#CACACA" : "#060606";
+const textColor = isDarkTheme ? "#CACACA" : "#1B1B18";
+const fillStyle = isDarkTheme
+ ? "rgba(27, 27, 24, 0.1)"
+ : "rgba(255, 255, 255, 0.7)";
+
const code = `
-
+
@@ -53,24 +71,24 @@ const code = `
-
-
-
-
+
+
+`;
+
+const SubmitToast = () => {
+ return (
+ showToastStatus && (
+
+
+
+ Just Now
+ setToastStatus(null)}
+ >
+
+
+
+
+ )
+ );
+};
+
+function getLastProposalId() {
+ return Near.asyncView(treasuryDaoID, "get_last_proposal_id").then(
+ (result) => result
+ );
+}
+
+useEffect(() => {
+ getLastProposalId().then((i) => setLastProposalId(i));
+}, []);
+
+useEffect(() => {
+ if (isTxnCreated) {
+ let checkTxnTimeout = null;
+ let errorTimeout = null;
+
+ const checkForNewProposal = () => {
+ getLastProposalId().then((id) => {
+ if (lastProposalId !== id) {
+ setToastStatus(true);
+ setTxnCreated(false);
+ clearTimeout(errorTimeout);
+ } else {
+ checkTxnTimeout = setTimeout(() => checkForNewProposal(), 1000);
+ }
+ });
+ };
+ checkForNewProposal();
+
+ // if in 20 seconds there is no change, show error condition
+ errorTimeout = setTimeout(() => {
+ setShowErrorToast(true);
+ setTxnCreated(false);
+ clearTimeout(checkTxnTimeout);
+ }, 20000);
+
+ return () => {
+ clearTimeout(checkTxnTimeout);
+ clearTimeout(errorTimeout);
+ };
+ }
+}, [isTxnCreated]);
+
+function toBase64(json) {
+ return Buffer.from(JSON.stringify(json)).toString("base64");
+}
+
+function onSubmitClick() {
+ setTxnCreated(true);
+ const deposit = daoPolicy?.proposal_bond || 100000000000000000000000;
+
+ const description = {
+ title: "Update Config - Theme & logo",
+ };
+ Near.call([
+ {
+ contractName: treasuryDaoID,
+ methodName: "add_proposal",
+ args: {
+ proposal: {
+ description: encodeToMarkdown(description),
+ kind: {
+ ChangeConfig: {
+ config: {
+ name: config.name,
+ purpose: config.purpose,
+ metadata: toBase64({
+ ...metadata,
+ primaryColor: color,
+ flagLogo: image,
+ theme: selectedTheme.value,
+ }),
+ },
+ },
+ },
+ },
+ },
+ gas: 200000000000000,
+ },
+ ]);
+}
+
+function setDefault() {
+ setImage(metadata?.flagLogo ?? defaultImage);
+ setColor(metadata?.primaryColor ?? defaultColor);
+ setSelectedTheme(
+ ThemeOptions.find((i) => i.value === metadata?.theme) ?? ThemeOptions[0]
+ );
+}
+
+useEffect(() => {
+ if (metadata) {
+ setDefault();
+ }
+}, [metadata]);
+
+return (
+
+ setShowErrorToast(false)}
+ />
+
+
Theme & Logo
+ {!metadata ? (
+
+
+ ) : (
+
+
+
+