diff --git a/instances/widgets.treasury-factory.near/widget/components/Approvers.jsx b/instances/widgets.treasury-factory.near/widget/components/Approvers.jsx index 98f8fdd1..435f1517 100644 --- a/instances/widgets.treasury-factory.near/widget/components/Approvers.jsx +++ b/instances/widgets.treasury-factory.near/widget/components/Approvers.jsx @@ -1,7 +1,8 @@ -const { isNearSocial } = VM.require( - "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common" +const { Approval, Reject } = VM.require( + "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Icons" ) || { - isNearSocial: false, + Approval: () => <>, + Reject: () => <>, }; const votes = props.votes ?? {}; @@ -9,11 +10,6 @@ const accounts = Object.keys(votes); const approversGroup = props.approversGroup ?? []; const maxShow = 1; const showHover = accounts?.length > maxShow; -const approve = - "https://ipfs.near.social/ipfs/bafkreib52fq4kw7gyfsupz4mrtrexbusc2lplxnopqswa5awtnlqmenena"; -const reject = - "https://ipfs.near.social/ipfs/bafkreihrwi2nzl7d2dyij3tstr6tdr7fnioq7vu37en3dxt4faihxreabm"; - const maxIndex = 100; const Container = styled.div` @@ -28,35 +24,37 @@ function getImage(acc) { return `https://i.near.social/magic/large/https://near.social/magic/img/account/${acc}`; } +const ApprovalImage = styled.div` + position: relative; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: 40px; + width: 40px; + .status { + position: absolute; + bottom: 0; + right: 0; + } +`; + const ApproversComponent = (
{accounts.slice(0, maxShow).map((acc, index) => { const imageSrc = getImage(acc); - const voteImg = votes[acc] === "Approve" ? approve : reject; return ( -
0 ? "-10px" : 0, zIndex: maxIndex - index, - position: "relative", + backgroundImage: `url("${imageSrc}")`, }} + className="rounded-circle" > - - -
+
+ {votes[acc] === "Approve" ? : } +
+ ); })} {accounts.length > maxShow && ( @@ -108,23 +106,22 @@ return ( }} >
- - {voted && ( - - )} + > + {voted && ( +
+ {votes[acc] === "Approve" ? ( + + ) : ( + + )} +
+ )} +
{name ?? acc}
diff --git a/instances/widgets.treasury-factory.near/widget/components/Icons.jsx b/instances/widgets.treasury-factory.near/widget/components/Icons.jsx index 76a7411d..65056a07 100644 --- a/instances/widgets.treasury-factory.near/widget/components/Icons.jsx +++ b/instances/widgets.treasury-factory.near/widget/components/Icons.jsx @@ -235,6 +235,122 @@ const NotVerfiedTick = ({ height, width }) => ( ); +const User = ({ height, width }) => ( + + + + +); + +const Copy = ({ height, width }) => ( + + + + + + + + + + + +); + +const Approval = ({ height, width }) => ( + + + + +); + +const Reject = ({ height, width }) => ( + + + + + +); + return { NearToken, WithdrawIcon, @@ -244,4 +360,8 @@ return { Whitelist, VerifiedTick, NotVerfiedTick, + User, + Copy, + Approval, + Reject, }; diff --git a/instances/widgets.treasury-factory.near/widget/components/OverlayTrigger.jsx b/instances/widgets.treasury-factory.near/widget/components/OverlayTrigger.jsx index c68c17c4..1aa6916e 100644 --- a/instances/widgets.treasury-factory.near/widget/components/OverlayTrigger.jsx +++ b/instances/widgets.treasury-factory.near/widget/components/OverlayTrigger.jsx @@ -3,16 +3,18 @@ const { instance } = props; if (!instance) { return <>; } - +const { getColors } = VM.require( + "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.templates.AppLayout" +) || { getColors: () => {} }; const { treasuryDaoID } = VM.require(`${instance}/widget/config.data`); const config = treasuryDaoID ? Near.view(treasuryDaoID, "get_config") : null; const metadata = JSON.parse(atob(config.metadata ?? "")); - +const rootClose = props.rootClose ?? true; const isDarkTheme = metadata.theme === "dark"; const showTimer = 250; -const hideTimer = 300; +const hideTimer = 500; const handleOnMouseEnter = () => { clearTimeout(state.debounce); @@ -41,6 +43,10 @@ const overlayStyle = props.overlayStyle ?? { fontSize: 13, }; +const ThemeColorsContainer = styled.div` + ${() => getColors(isDarkTheme, "", "")} +`; + const overlay = (
- {props.popup} + {props.popup}
); @@ -59,6 +65,7 @@ return ( delay={{ show: showTimer, hide: hideTimer }} placement="auto" overlay={overlay} + rootClose={rootClose} > <>, + NotVerfiedTick: () => <>, + User: () => <>, + Copy: () => <>, +}; + +const showKYC = props.showKYC; +const accountId = props.accountId; +const displayName = props.displayName ?? true; +const displayImage = props.displayImage ?? true; +const [isVerfied, setIsVerfied] = useState(false); +const [verificationStatus, setVerificationStatus] = useState(null); + +const profile = Social.getr(`${accountId}/profile`); +const imageSrc = + `https://i.near.social/magic/large/https://near.social/magic/img/account/${accountId}` ?? + "https://ipfs.near.social/ipfs/bafkreibmiy4ozblcgv3fm3gc6q62s55em33vconbavfd2ekkuliznaq3zm"; +const name = profile.name; + +useEffect(() => { + if ( + showKYC && + (accountId.length === 64 || + (accountId ?? "").includes(".near") || + (accountId ?? "").includes(".tg")) + ) { + asyncFetch( + `https://neardevhub-kyc-proxy.shuttleapp.rs/kyc/${accountId}` + ).then((res) => { + let displayableText = ""; + switch (res.body.kyc_status) { + case "Approved": + displayableText = "Verified"; + setIsVerfied(true); + break; + case "Pending": + displayableText = "Pending"; + break; + case "NotSubmitted": + case "Rejected": + displayableText = "Not Verfied"; + break; + default: + displayableText = "Failed to get status"; + break; + } + setVerificationStatus(displayableText); + }); + } +}, [accountId]); + +const ProfileLink = styled.a` + color: var(--text-color); + &:hover { + color: var(--text-color); + } +`; + +const HoverCard = () => { + return ( +
+
+
+ +
+
{name}
+ +
@{accountId}
+
+
+ {verificationStatus && ( +
+ {verificationStatus === "Verified" ? ( + + ) : ( + + )} +
Fractal {verificationStatus}
+
+ )} +
+ + Open Profile + + +
clipboard.writeText(accountId)} + > + + Copy wallet address +
+
+
+
+ ); +}; + +const ReceiverAccountComponent = ( +
+ {displayImage && ( +
+ +
+ {verificationStatus && + (isVerfied ? : )} +
+
+ )} + +
+ {displayName &&
{name}
} +
+ {displayName && "@"} {accountId} +
+
+
+); + +return ( +
+ , + children: ReceiverAccountComponent, + instance: props.instance, + rootClose: false, + }} + /> +
+); diff --git a/instances/widgets.treasury-factory.near/widget/components/ReceiverAccount.jsx b/instances/widgets.treasury-factory.near/widget/components/ReceiverAccount.jsx deleted file mode 100644 index 4b970d5b..00000000 --- a/instances/widgets.treasury-factory.near/widget/components/ReceiverAccount.jsx +++ /dev/null @@ -1,99 +0,0 @@ -const { VerifiedTick, NotVerfiedTick } = VM.require( - "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Icons" -) || { VerifiedTick: () => <>, NotVerfiedTick: () => <> }; - -const showKYC = props.showKYC; -const receiverAccount = props.receiverAccount; -const [isVerfied, setIsVerfied] = useState(false); -const [verificationStatus, setVerificationStatus] = useState(null); - -const profile = Social.getr(`${receiverAccount}/profile`); -const imageSrc = - `https://i.near.social/magic/large/https://near.social/magic/img/account/${receiverAccount}` ?? - "https://ipfs.near.social/ipfs/bafkreibmiy4ozblcgv3fm3gc6q62s55em33vconbavfd2ekkuliznaq3zm"; -const name = profile.name; - -useEffect(() => { - if ( - showKYC && - (receiverAccount.length === 64 || - (receiverAccount ?? "").includes(".near") || - (receiverAccount ?? "").includes(".tg")) - ) { - asyncFetch( - `https://neardevhub-kyc-proxy.shuttleapp.rs/kyc/${receiverAccount}` - ).then((res) => { - let displayableText = ""; - switch (res.body.kyc_status) { - case "Approved": - displayableText = "Verified"; - setIsVerfied(true); - break; - case "Pending": - displayableText = "Pending"; - break; - case "NotSubmitted": - case "Rejected": - displayableText = "Not Verfied"; - break; - default: - displayableText = "Failed to get status"; - break; - } - setVerificationStatus(displayableText); - }); - } -}, [receiverAccount]); - -const HoverCard = () => { - return ( -
-
@{receiverAccount}
- {verificationStatus && ( -
- {verificationStatus === "Verified" ? ( - - ) : ( - - )} -
-
Fractal
-
{verificationStatus}
-
-
- )} -
- ); -}; - -const ReceiverAccountComponent = ( -
-
- -
- {verificationStatus && - (isVerfied ? : )} -
-
-
-
{name}
-
@{receiverAccount}
-
-
-); - -return ( -
- , - children: ReceiverAccountComponent, - instance: props.instance, - }} - /> -
-); diff --git a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx index ac9b6c2e..5037f4d5 100644 --- a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx +++ b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx @@ -103,452 +103,452 @@ const AppHeader = ({ page, instance }) => ( /> ); -function AppLayout({ page, instance, children, treasuryDaoID, accountId }) { - const { themeColor } = VM.require(`${instance}/widget/config.data`) || { - themeColor: "", - }; - - const config = treasuryDaoID - ? useCache( - () => Near.asyncView(treasuryDaoID, "get_config"), - treasuryDaoID + "_get_config", - { subscribe: false } - ) - : null; - const metadata = JSON.parse(atob(config.metadata ?? "")); +const getColors = (isDarkTheme, themeColor, hoverColor) => ` +--theme-color: ${themeColor}; +--theme-color-dark: ${hoverColor}; +--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"}; +--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-035: ${isDarkTheme ? "#3E3E3E" : "#E6E6E6"}; +--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); +`; - const data = fetch(`https://httpbin.org/headers`); - const gatewayURL = data?.body?.headers?.Origin ?? ""; - const isDarkTheme = metadata.theme === "dark"; +const Theme = styled.div` + padding-top: calc(-1 * var(--body-top-padding)); - if (!config) { - return <>; + // 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; } - const primaryColor = metadata?.primaryColor - ? metadata?.primaryColor - : themeColor - ? themeColor - : isDarkTheme - ? "#01BF7A" - : "#01BF7A"; - - // Convert HEX to HSL - const [h, s, l] = hexToHsl(primaryColor); - - // Calculate hover color (darken by reducing lightness) - const hoverColor = hslToHex(h, s, Math.max(l - 10, 0)); + /* For Firefox */ + input[type="number"] { + -moz-appearance: textfield; + } - const getColors = (isDarkTheme, themeColor, hoverColor) => ` - --theme-color: ${themeColor}; - --theme-color-dark: ${hoverColor}; - --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"}; - --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-035: ${isDarkTheme ? "#3E3E3E" : "#E6E6E6"}; - --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); -`; + .card { + border-color: var(--border-color) !important; + border-width: 1px !important; + border-radius: 14px; + background-color: var(--bg-page-color) !important; + } - const ParentContainer = styled.div` - ${() => getColors(isDarkTheme, primaryColor, hoverColor)} - 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; - `} - `; + .dropdown-menu { + background-color: var(--bg-page-color) !important; + color: var(--text-color) !important; + } - const Theme = styled.div` - padding-top: calc(-1 * var(--body-top-padding)); + .dropdown-item.active, + .dropdown-item:active { + background-color: var(--grey-04) !important; + color: inherit !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; - } + .dropdown-item:hover, + .dropdown-item:focus { + background-color: var(--grey-04) !important; + color: inherit !important; + } - /* For Firefox */ - input[type="number"] { - -moz-appearance: textfield; - } + .offcanvas { + background-color: var(--bg-page-color) !important; + color: var(--text-color) !important; + } - .card { - border-color: var(--border-color) !important; - border-width: 1px !important; - border-radius: 14px; - background-color: var(--bg-page-color) !important; - } + color: var(--text-color); + font-weight: 500; - .dropdown-menu { - background-color: var(--bg-page-color) !important; + a { + text-decoration: none; + color: var(--text-color) !important; + font-weight: 500; + &.active { color: var(--text-color) !important; } - .dropdown-item.active, - .dropdown-item:active { - background-color: var(--grey-04) !important; - color: inherit !important; - } - - .dropdown-item:hover, - .dropdown-item:focus { - background-color: var(--grey-04) !important; - color: inherit !important; - } - - .offcanvas { - background-color: var(--bg-page-color) !important; + &:hover { + text-decoration: none; color: var(--text-color) !important; } + } - color: var(--text-color); + button { + height: 40px; font-weight: 500; + } - a { - text-decoration: none; - color: var(--text-color) !important; - font-weight: 500; - &.active { - color: var(--text-color) !important; - } + button.primary { + background: var(--theme-color); + color: var(--text-alt-color) !important; + border: none !important; + padding-block: 0.7rem !important; - &:hover { - text-decoration: none; - color: var(--text-color) !important; - } + i { + color: var(--text-alt-color) !important; } + } + + .primary-button { + background: var(--theme-color) !important; + color: var(--text-alt-color) !important; + border: none !important; - button { - height: 40px; - font-weight: 500; + &:hover { + background: var(--theme-color-dark) !important; } - button.primary { - background: var(--theme-color); + i { 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; + .text-lg { + font-size: 15px; + } - &:hover { - background: var(--theme-color-dark) !important; - } + .fw-semi-bold { + font-weight: 500; + } - i { - color: var(--text-alt-color) !important; - } - } + .text-secondary { + color: var(--text-secondary-color) !important; + } - .text-lg { - font-size: 15px; - } + .max-w-100 { + max-width: 100%; + } - .fw-semi-bold { - font-weight: 500; - } + .custom-truncate { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + line-height: 1.5; + max-height: 4.5em; + text-align: left; + } - .text-secondary { - color: var(--text-secondary-color) !important; - } + .display-none { + display: none; + } - .max-w-100 { - max-width: 100%; - } + .text-right { + text-align: end; + } - .custom-truncate { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - line-height: 1.5; - max-height: 4.5em; - text-align: left; - } + .text-left { + text-align: left; + } + .text-underline { + text-decoration: underline !important; + } - .display-none { - display: none; - } + .bg-highlight { + background-color: rgb(185, 185, 185, 0.2); + } - .text-right { - text-align: end; - } + .cursor-pointer { + cursor: pointer; + } - .text-left { - text-align: left; - } - .text-underline { - text-decoration: underline !important; - } + .theme-btn { + background: var(--theme-color) !important; + color: white !important; + border: none; + } - .bg-highlight { - background-color: rgb(185, 185, 185, 0.2); - } + .theme-btn.btn:hover { + color: white !important; + background: var(--theme-color-dark) !important; + } - .cursor-pointer { - cursor: pointer; - } + .btn-outline-secondary { + border-color: var(--border-color) !important; + color: var(--text-color) !important; + border-width: 1px !important; - .theme-btn { - background: var(--theme-color) !important; - color: white !important; - border: none; + i { + color: var(--text-color) !important; } - .theme-btn.btn:hover { - color: white !important; - background: var(--theme-color-dark) !important; + &:hover { + color: var(--text-color) !important; + border-color: var(--border-color) !important; + background: var(--grey-035) !important; } + } - .btn-outline-secondary { - border-color: var(--border-color) !important; - color: var(--text-color) !important; - border-width: 1px !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; - i { - color: var(--text-color) !important; + a { + color: inherit !important; + &:active { + color: inherit !important; } - &:hover { - color: var(--text-color) !important; - border-color: var(--border-color) !important; - background: var(--grey-035) !important; + color: inherit !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; + .toast-header { + background-color: var(--bg-system-color) !important; + color: var(--text-secondary-color) !important; + } - a { - color: inherit !important; - &:active { - color: inherit !important; - } - &:hover { - color: inherit !important; - } - } - } + .text-md { + font-size: 15px; + } - .toast-header { - background-color: var(--bg-system-color) !important; - color: var(--text-secondary-color) !important; + .primary-text-color { + color: var(--theme-color); + a { + color: var(--theme-color) !important; } - .text-md { - font-size: 15px; + i { + color: var(--theme-color) !important; } + } - .primary-text-color { - color: var(--theme-color); - a { - color: var(--theme-color) !important; - } + .btn-outline.btn:hover { + color: inherit !important; + } - i { - color: var(--theme-color) !important; - } - } + .primary-text-color.btn:hover { + color: inherit !important; + } - .btn-outline.btn:hover { - color: inherit !important; - } + .badge { + padding: 6px 8px; + background: var(--grey-035); + color: var(--text-color); + rounded: 8px; + font-weight: 500; + font-size: 12px; + } - .primary-text-color.btn:hover { - color: inherit !important; - } + .btn-outline-plain { + height: 40px; + padding-block: 7px !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; - .badge { - padding: 6px 8px; - background: var(--grey-035); - color: var(--text-color); - rounded: 8px; - font-weight: 500; - font-size: 12px; + &:hover { + background-color: white; + color: black; } + } - .btn-outline-plain { - height: 40px; - padding-block: 7px !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; + h1, + h2, + h3, + h4, + h5, + h6 { + color: var(--text-color) !important; + } - &:hover { - background-color: white; - color: black; - } - } + .btn.disabled:not(.no-transparent), + fieldset:disabled:not(.no-transparent) { + border-color: transparent !important; + } - h1, - h2, - h3, - h4, - h5, - h6 { - color: var(--text-color) !important; - } + .table { + border-color: var(--border-color) !important; + color: var(--text-color) !important; + margin-bottom: 20px; - .btn.disabled:not(.no-transparent), - fieldset:disabled:not(.no-transparent) { - border-color: transparent !important; + .amount { + font-size: 14px; } + } - .table { - border-color: var(--border-color) !important; - color: var(--text-color) !important; - margin-bottom: 20px; + .table td:first-child { + padding-left: 20px; + } - .amount { - font-size: 14px; - } - } + .table td:last-child { + padding-right: 20px; + } - .table td:first-child { - padding-left: 20px; - } + .bg-white { + background-color: var(--bg-page-color) !important; + color: var(--text-color) !important; + } - .table td:last-child { - padding-right: 20px; - } + .bg-dropdown { + background-color: var(--bg-page-color) !important; + color: var(--text-color) !important; + } - .bg-white { - 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; + } - .bg-dropdown { - background-color: var(--bg-page-color) !important; - color: var(--text-color) !important; - } + .fill-accent { + fill: var(--theme-color); + } - .bg-custom-overlay { - background-color: var(--bg-page-color) !important; - color: var(--text-color) !important; - } + .use-max-bg { + color: #007aff; + cursor: pointer; + } - .fill-accent { - fill: var(--theme-color); - } + .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; + } - .use-max-bg { - color: #007aff; - cursor: pointer; - } + .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-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-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; + } - .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; - } + .text-sm { + 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-secondary a { + color: inherit !important; + } - .text-sm { - font-size: 13px; - } + .text-red { + color: var(--other-red) !important; + } - .text-secondary a { - color: inherit !important; - } + .btn-outline.btn:hover { + color: inherit !important; + } - .text-red { - color: var(--other-red) !important; - } + .border-right { + border-right: 1px solid var(--border-color); + } - .btn-outline.btn:hover { - color: inherit !important; - } + .cursor-pointer { + cursor: pointer; + } - .border-right { - border-right: 1px solid var(--border-color); - } + .success-icon { + color: var(--other-green) !important; + } - .cursor-pointer { - cursor: pointer; - } + .warning-icon { + color: var(--other-warning) !important; + } - .success-icon { - color: var(--other-green) !important; - } + .error-icon { + color: var(--other-red) !important; + } - .warning-icon { - color: var(--other-warning) !important; - } + .primary-icon { + color: var(--theme-color) !important; + } +`; - .error-icon { - color: var(--other-red) !important; - } +function AppLayout({ page, instance, children, treasuryDaoID, accountId }) { + const { themeColor } = VM.require(`${instance}/widget/config.data`) || { + themeColor: "", + }; - .primary-icon { - color: var(--theme-color) !important; - } + 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"; + + if (!config) { + return <>; + } + + const primaryColor = metadata?.primaryColor + ? metadata?.primaryColor + : themeColor + ? themeColor + : isDarkTheme + ? "#01BF7A" + : "#01BF7A"; + + // Convert HEX to HSL + const [h, s, l] = hexToHsl(primaryColor); + + // Calculate hover color (darken by reducing lightness) + const hoverColor = hslToHex(h, s, Math.max(l - 10, 0)); + + const ParentContainer = styled.div` + ${() => getColors(isDarkTheme, primaryColor, hoverColor)} + 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; + `} `; return ( @@ -562,4 +562,4 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) { ); } -return { AppLayout }; +return { AppLayout, getColors, Theme }; diff --git a/instances/widgets.treasury-factory.near/widget/pages/payments/Table.jsx b/instances/widgets.treasury-factory.near/widget/pages/payments/Table.jsx index 1ee7481c..35a249c9 100644 --- a/instances/widgets.treasury-factory.near/widget/pages/payments/Table.jsx +++ b/instances/widgets.treasury-factory.near/widget/pages/payments/Table.jsx @@ -338,9 +338,9 @@ const ProposalsComponent = () => { { - ), - children: ( -
- {item.proposer} -
- ), + accountId: item.proposer, + showKYC: false, + displayImage: false, + displayName: false, instance, }} /> diff --git a/instances/widgets.treasury-factory.near/widget/pages/proposals-feed/Table.jsx b/instances/widgets.treasury-factory.near/widget/pages/proposals-feed/Table.jsx index 2a8e0b79..ddad96cb 100644 --- a/instances/widgets.treasury-factory.near/widget/pages/proposals-feed/Table.jsx +++ b/instances/widgets.treasury-factory.near/widget/pages/proposals-feed/Table.jsx @@ -252,22 +252,12 @@ const ProposalsComponent = () => { - ), - children: ( -
- {item.proposer} -
- ), + accountId: item.proposer, + showKYC: false, + displayImage: false, + displayName: false, instance, }} /> diff --git a/instances/widgets.treasury-factory.near/widget/pages/settings/feed/Table.jsx b/instances/widgets.treasury-factory.near/widget/pages/settings/feed/Table.jsx index 05e1c96a..d0618dbd 100644 --- a/instances/widgets.treasury-factory.near/widget/pages/settings/feed/Table.jsx +++ b/instances/widgets.treasury-factory.near/widget/pages/settings/feed/Table.jsx @@ -281,22 +281,12 @@ const ProposalsComponent = () => { - ), - children: ( -
- {item.proposer} -
- ), + accountId: item.proposer, + showKYC: false, + displayImage: false, + displayName: false, instance, }} /> diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Table.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Table.jsx index 4f8051a2..4ee32de9 100644 --- a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Table.jsx +++ b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Table.jsx @@ -392,22 +392,12 @@ const ProposalsComponent = () => { - ), - children: ( -
- {item.proposer} -
- ), + accountId: item.proposer, + showKYC: false, + displayImage: false, + displayName: false, instance, }} />