diff --git a/instances/treasury-devdao.near/aliases.mainnet.json b/instances/treasury-devdao.near/aliases.mainnet.json index 9c635418..87bb42eb 100644 --- a/instances/treasury-devdao.near/aliases.mainnet.json +++ b/instances/treasury-devdao.near/aliases.mainnet.json @@ -9,10 +9,6 @@ "REPL_SOCIAL_CONTRACT": "social.near", "REPL_RPC_URL": "https://rpc.mainnet.near.org", "REPL_PROPOSALS_CACHE_URL": "https://devhub-cache-api-rs.fly.dev", - "REPL_NEAR_TOKEN_ICON": "https://ipfs.near.social/ipfs/bafkreifnyxk6cssapw7j5vc6zuzwl7vt6o5ddspoo5lcmbvtdrcmfozqyu", "REPL_PIKESPEAK_KEY": "36f2b87a-7ee6-40d8-80b9-5e68e587a5b5", - "REPL_NEARBLOCKS_KEY": "DA2570E26C0242FF897A463F4DCAACA6", - "REPL_STAKE_ICON": "https://ipfs.near.social/ipfs/bafkreic7bmyuz7wixpmuxi4z37r3vwaix3ad2jlcl4dhes2djj22zmbez4", - "REPL_UNSTAKE_ICON": "https://ipfs.near.social/ipfs/bafkreihrvzrhxeggkcozrmwt7kfiqw4hy56clamfxuq7agownukcn6lfxe", - "REPL_WITHDRAW_ICON": "https://ipfs.near.social/ipfs/bafkreiedu2yjz7abf7b75qsq3e3yqzelyimvowkwc3hy3s4cziohjrxt2m" + "REPL_NEARBLOCKS_KEY": "DA2570E26C0242FF897A463F4DCAACA6" } diff --git a/instances/treasury-devdao.near/widget/app.jsx b/instances/treasury-devdao.near/widget/app.jsx index a9233012..d2fcc990 100644 --- a/instances/treasury-devdao.near/widget/app.jsx +++ b/instances/treasury-devdao.near/widget/app.jsx @@ -11,6 +11,7 @@ const { AppLayout } = VM.require( ) || { AppLayout: () => <> }; const instance = "${REPL_INSTANCE}"; +const treasuryDaoID = "${REPL_TREASURY}"; const { Theme } = VM.require(`${instance}/widget/config.css`) || { Theme: () => <>, @@ -84,7 +85,12 @@ function Page() { return ( - + diff --git a/instances/treasury-devdao.near/widget/components/Approvers.jsx b/instances/treasury-devdao.near/widget/components/Approvers.jsx index 00c44857..aa2b9605 100644 --- a/instances/treasury-devdao.near/widget/components/Approvers.jsx +++ b/instances/treasury-devdao.near/widget/components/Approvers.jsx @@ -20,15 +20,7 @@ const Container = styled.div` .grey-circle { width: 40px; height: 40px; - background-color: #e2e6ec; - } - - .reject { - color: #d20000; - } - - .approve { - color: #089968; + background-color: var(--grey-04); } `; @@ -95,7 +87,7 @@ return ( {showHover ? ( @@ -139,11 +131,12 @@ return (
{voted ? ( {votesStatus}{" "} @@ -159,6 +152,7 @@ return (
), children: ApproversComponent, + instance: props.instance, }} /> ) : ( diff --git a/instances/treasury-devdao.near/widget/components/BalanceBanner.jsx b/instances/treasury-devdao.near/widget/components/BalanceBanner.jsx new file mode 100644 index 00000000..0a9b2c35 --- /dev/null +++ b/instances/treasury-devdao.near/widget/components/BalanceBanner.jsx @@ -0,0 +1,88 @@ +const { getNearBalances } = VM.require( + "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common" +); + +const Container = styled.div` + .low-balance-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; + + h5 { + color: var(--other-warning) !important; + } + } + + .insufficient-balance-warning { + background-color: rgba(217, 92, 74, 0.08); + color: var(--other-red); + padding-inline: 0.8rem; + padding-block: 0.5rem; + font-weight: 500; + font-size: 13px; + + h5 { + color: var(--other-red) !important; + } + } +`; + +function formatNearAmount(amount) { + return parseFloat( + Big(amount ?? "0") + .div(Big(10).pow(24)) + .toFixed(2) + ); +} + +function BalanceBanner({ accountId, treasuryDaoID }) { + if (!treasuryDaoID || typeof getNearBalances !== "function" || !accountId) { + return <>; + } + + const nearBalances = getNearBalances(accountId); + + const LOW_BALANCE_LIMIT = 0.7; // 0.7N + const INSUFFICIENT_BALANCE_LIMIT = 0.1; // 0.1N + + const profile = Social.getr(`${accountId}/profile`); + const name = profile.name ?? accountId; + + return ( + + {!nearBalances || + !nearBalances.availableParsed || + nearBalances.availableParsed === "0.00" || + parseFloat(nearBalances.availableParsed) > LOW_BALANCE_LIMIT ? ( + <> + ) : parseFloat(nearBalances.availableParsed) < + INSUFFICIENT_BALANCE_LIMIT ? ( +
+ +
+
Insufficient Funds
+ Hey {name}, you don't have enough NEAR to complete actions on your + treasury. You need at least {INSUFFICIENT_BALANCE_LIMIT}N. Please + add more funds to your account and try again +
+
+ ) : ( +
+ +
+
Low Balance
+ Hey {name}, your NEAR balance is {nearBalances.availableParsed}N, + which is getting low. The minimum balance required is{" "} + {INSUFFICIENT_BALANCE_LIMIT}N. Please add more NEAR to your account + soon to avoid any issues completing actions on your treasury. +
+
+ )} + + ); +} + +return { BalanceBanner }; diff --git a/instances/treasury-devdao.near/widget/components/Date.jsx b/instances/treasury-devdao.near/widget/components/Date.jsx index 6a137768..0bf3ec56 100644 --- a/instances/treasury-devdao.near/widget/components/Date.jsx +++ b/instances/treasury-devdao.near/widget/components/Date.jsx @@ -23,6 +23,6 @@ const formattedTime = date.toLocaleTimeString("en-GB", { return (
{formattedTime}
-
{formattedDate}
+
{formattedDate}
); diff --git a/instances/treasury-devdao.near/widget/components/DropDown.jsx b/instances/treasury-devdao.near/widget/components/DropDown.jsx index 28e9c50b..af101017 100644 --- a/instances/treasury-devdao.near/widget/components/DropDown.jsx +++ b/instances/treasury-devdao.near/widget/components/DropDown.jsx @@ -18,30 +18,16 @@ const StyledDropdown = styled.div` padding-inline: 10px; } - .dropdown-item.active, - .dropdown-item:active { - background-color: #f0f0f0 !important; - color: black; - } - .dropdown-toggle:after { position: absolute; top: 45%; right: 5%; } - .cursor-pointer { - cursor: pointer; - } - .text-sm { font-size: 12px !important; } - .text-muted { - color: rgba(153, 153, 153, 1); - } - .work-break { border-radius: 5px; white-space: normal; @@ -58,7 +44,7 @@ return (
+ ), + 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)} + > +
+
+
+ +
+
Theme change request submitted.
+ + View it + +
+
+
+
+
+ ) + ); +}; + +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 ? ( +
+ +
+ ) : ( +
+
+ +