Skip to content

Commit

Permalink
Morning sync
Browse files Browse the repository at this point in the history
  • Loading branch information
@igorperic17
igorperic17 committed Nov 9, 2023
1 parent ba09973 commit 923b744
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 78 deletions.
2 changes: 1 addition & 1 deletion flags.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"components": {
"frontend/widget/obrigado-react.src.bos-landing-page": {
"code": "const contract = \"obrigado.testnet\";\nconst tasks = Near.view(contract, \"get_tasks\", {});\n\nconst fontUrl = `https://ipfs.io/ipfs/bafkreicrs3gh7f77yhpw4xiejx35cd56jcczuhvqbwkn77g2ztkrjejopa`;\n\nconst css = `\n\nbody {\n display: inline-block;\n}\n\n@font-face {\n font-family: \"Pixter\";\n src: url(\"${fontUrl}\");\n}\n\na, a:focus, a:visited, a:hover {\n color: white !important;\n}\n\n.apps {\n margin-top: 32px;\n display: grid;\n gap: 16px;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n}\n\n.flex-right {\n padding-left: 16px;\n > p {\n margin-bottom: 2px;\n }\n > .subtle {\n font-size: 0.8rem;\n }\n}\n.gray {\n color: #888 !important;\n}\n\n.header {\n align-content: center;\n flex: 1;\n margin: 100px auto auto auto;\n overflow: hidden;\n height: 600px;\n background-image: url('https://bafybeicc3wlqrkisg2k7ibwss5wlusxfoq7intpgwmhcm4r7ck27fd5eym.ipfs.nftstorage.link/');\n background-size: cover;\n > div {\n padding: 32px;\n h1 {\n font-size: 3rem;\n }\n h2 {\n color: #ddd;\n }\n > div {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n }\n }\n}\n\n.logo {\n width: 350px;\n margin: 200px auto auto auto;\n height: 80px;\n}\n\n .main {\n padding: 32px;\n p {\n color: #ddd;\n }\n }\n\n footer {\n padding-top: 2rem;\n height: 2rem;\n}\n\nfooter a, span {\n color: rgba(255, 255, 255, 0.2);\n}\n\n\n@media only screen and (max-width: 700px) {\n .header {\n flex-direction: column;\n }\n .header-left {\n transform: skew(0);\n }\n .header-left, .header-right {\n width: 100%;\n margin-left: 0;\n border: none;\n }\n .header-content-right {\n top: 260px;\n }\n .noise {\n height: 520px;\n }\n}\n`;\n\nif (!state.theme) {\n State.update({\n theme: styled.div`\n font-family: Pixter;\n background: black;\n color: white;\n ${css}\n`,\n });\n}\nconst Theme = state.theme;\n\n// const featured = [\n// {\n// widgetSrc: \"mm-near.near/widget/zkSyncExp\",\n// accountId: \"mm-near.near\",\n// widgetName: \"zkSyncExp\",\n// alt: \"zkSyncExp\",\n// },\n// ];\nconst featured = [];\n\nState.init({ tasks: [], task_bounty: Number(10), task_url: \"\"});\n\nconst onBountyInputChange = ({ target }) => {\n State.update({ task_bounty: Number(target.value) });\n};\nconst onTaskUrlInputChange = ({ target }) => {\n State.update({ task_url: target.value });\n};\n\n// const onBtnClick = () => {\n// if (!state.new_greeting) {\n// return;\n// }\n\n// Near.call(contract, \"set_greeting\", {\n// greeting: state.new_greeting,\n// });\n// };\n\nconst onSubmitTaskClick = () => {\n Near.call(contract, \"create_task\", {\n repository_url: state.task_url, \n bounty: state.task_bounty\n });\n};\n\nconst onClearQueueClick = () => {\n Near.call(contract, \"clear_queue\", {});\n};\n\n// const greeting = Near.call(contract, \"add_task\", {});\n\nconst submitTaskComponent = (\n <>\n <div className=\"mb-2 width-[300px]\">\n <div className=\"border border-black p-3\">\n <label>Task</label>\n <input className=\"p-2 m-2 rounded-full\" placeholder=\"Wokspace location\" onChange={onTaskUrlInputChange} value={state.task_url}/>\n <input className=\"p-2 m-2 rounded-full\" placeholder=\"Bounty\" onChange={onBountyInputChange} value={state.bounty}/>\n <button className=\"btn btn-primary mt-2\" onClick={onSubmitTaskClick}>\n Submit\n </button>\n <button className=\"btn btn-primary mt-2\" onClick={onClearQueueClick}>\n Clear Queue\n </button>\n </div>\n </div>\n </>\n);\n\nconst notLoggedInWarning = () => {\n return (<>\n <button class=\"btn btn-primary mt-2\" onClick={onBtnClick}>\n Connect wallet\n </button>\n </>);\n};\n\nreturn (\n <Theme>\n <div class=\"header\">\n <img\n class=\"logo\"\n src=\"https://bafkreidsq3r5xof4umfa5mmsfem2kmsfh2nyxo22e5kj7bsqtr6pl3zdke.ipfs.nftstorage.link/\"\n />\n <p>\n Start earning crypto tokens for your hard work today! Join now and\n prosper with Web3 technology.\n </p>\n {context.accountId ? submitTaskComponent : notLoggedInWarning}\n </div>\n\n <div class=\"main\">\n <h3>Search tasks</h3>\n <p class=\"gray\">\n Discover a range of fully decentralized frontends that leverage the\n power of BOS.\n </p>\n\n <div>\n {state.components && state.components.length > 0 && (\n <div class=\"apps\">\n {state.components.map((component, i) => (\n <div key={i} class=\"widget\">\n <div class=\"flex\">\n <a href={`#/${component.widgetSrc}`} target=\"_blank\">\n <div class=\"image-parent\">\n <Widget\n src=\"mob.near/widget/WidgetImage\"\n props={{\n accountId: component.accountId,\n widgetName: component.widgetName,\n alt: component.widgetName,\n className,\n style: {},\n fallbackUrl:\n \"https://ipfs.near.social/ipfs/bafkreido7gsk4dlb63z3s5yirkkgrjs2nmyar5bxyet66chakt2h5jve6e\",\n }}\n />\n <div class=\"shadow\"></div>\n <div class=\"eth-logo\">\n <img\n src={\n \"https://bafybeicc3wlqrkisg2k7ibwss5wlusxfoq7intpgwmhcm4r7ck27fd5eym.ipfs.nftstorage.link/\"\n }\n />\n </div>\n </div>\n </a>\n <div class=\"flex-right\">\n <p>{component.widgetName}</p>\n <p class=\"subtle gray\">Ethereum</p>\n </div>\n </div>\n <p>{component.description}</p>\n\n <a\n href={`#/mob.near/widget/WidgetSource?src=${component.widgetSrc}`}\n target=\"_blank\"\n >\n <i className=\"bi bi-file-earmark-code me-1\"></i>Source\n </a>\n </div>\n ))}\n </div>\n )}\n </div>\n\n <div class=\"mt-5\">\n <h3>Featured Apps</h3>\n </div>\n <div class=\"apps\">\n {featured.map((component, i) => (\n <div key={i} class=\"widget\">\n <div class=\"flex\">\n <a href={`#/${component.widgetSrc}`} target=\"_blank\">\n <div class=\"image-parent\">\n <Widget\n src=\"mob.near/widget/WidgetImage\"\n props={{\n accountId: component.accountId,\n widgetName: component.widgetName,\n alt: component.widgetName,\n className,\n style: {},\n fallbackUrl:\n \"https://ipfs.near.social/ipfs/bafkreido7gsk4dlb63z3s5yirkkgrjs2nmyar5bxyet66chakt2h5jve6e\",\n }}\n />\n <div class=\"shadow\"></div>\n <div class=\"eth-logo\">\n <img\n src={\n \"https://ipfs.near.social/ipfs/bafkreibkkypb3zybzlwfotwa6tdmelalfnfucmvgzzeqwge4e75mkpq6dq\"\n }\n />\n </div>\n </div>\n </a>\n <div class=\"flex-right\">\n <p>{component.widgetName}</p>\n <p class=\"subtle gray\">Ethereum</p>\n </div>\n </div>\n <p>{component.description}</p>\n\n <a\n href={`#/mob.near/widget/WidgetSource?src=${component.widgetSrc}`}\n target=\"_blank\"\n >\n <i className=\"bi bi-file-earmark-code me-1\"></i>Source\n </a>\n </div>\n ))}\n </div>\n </div>\n\n <div class=\"footer\">\n <div className=\"text-center\">\n <a href=\"/#/thebos.near/widget/Terms\">Terms of Use</a> <span>|</span>{\" \"}\n <a href=\"/#/thebos.near/widget/Privacy\">Privacy Policy</a>\n </div>\n </div>\n </Theme>\n);\n"
"code": "const contract = \"obrigado.testnet\";\nconst tasks = Near.view(contract, \"get_tasks_from_queue\", {})\n\nconst fontUrl = `https://ipfs.io/ipfs/bafkreicrs3gh7f77yhpw4xiejx35cd56jcczuhvqbwkn77g2ztkrjejopa`;\n\nconst css = `\n\nbody {\n display: inline-block;\n}\n\n@font-face {\n font-family: \"Pixter\";\n src: url(\"${fontUrl}\");\n}\n\na, a:focus, a:visited, a:hover {\n color: white !important;\n}\n\n.apps {\n margin-top: 32px;\n display: grid;\n gap: 16px;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n}\n\n.flex-right {\n padding-left: 16px;\n > p {\n margin-bottom: 2px;\n }\n > .subtle {\n font-size: 0.8rem;\n }\n}\n.gray {\n color: #888 !important;\n}\n\n.header {\n align-content: center;\n flex: 1;\n margin: 100px auto auto auto;\n overflow: hidden;\n height: 600px;\n background-image: url('https://bafybeicc3wlqrkisg2k7ibwss5wlusxfoq7intpgwmhcm4r7ck27fd5eym.ipfs.nftstorage.link/');\n background-size: cover;\n > div {\n padding: 32px;\n h1 {\n font-size: 3rem;\n }\n h2 {\n color: #ddd;\n }\n > div {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n }\n }\n}\n\n.logo {\n width: 350px;\n margin: 200px auto auto auto;\n height: 80px;\n}\n\n .main {\n padding: 32px;\n p {\n color: #ddd;\n }\n }\n\n footer {\n padding-top: 2rem;\n height: 2rem;\n}\n\nfooter a, span {\n color: rgba(255, 255, 255, 0.2);\n}\n\n\n@media only screen and (max-width: 700px) {\n .header {\n flex-direction: column;\n }\n .header-left {\n transform: skew(0);\n }\n .header-left, .header-right {\n width: 100%;\n margin-left: 0;\n border: none;\n }\n .header-content-right {\n top: 260px;\n }\n .noise {\n height: 520px;\n }\n}\n`;\n\nif (!state.theme) {\n State.update({\n theme: styled.div`\n font-family: Pixter;\n background: black;\n color: white;\n ${css}\n`,\n });\n}\nconst Theme = state.theme;\n\n// const featured = [\n// {\n// widgetSrc: \"mm-near.near/widget/zkSyncExp\",\n// accountId: \"mm-near.near\",\n// widgetName: \"zkSyncExp\",\n// alt: \"zkSyncExp\",\n// },\n// ];\nconst featured = [];\n\nState.init({ tasks: [], task_bounty: Number(10), task_url: \"\"});\n\nconst onBountyInputChange = ({ target }) => {\n State.update({ task_bounty: Number(target.value) });\n};\nconst onTaskUrlInputChange = ({ target }) => {\n State.update({ task_url: target.value });\n console.log(tasks)\n};\n\n// const onBtnClick = () => {\n// if (!state.new_greeting) {\n// return;\n// }\n\n// Near.call(contract, \"set_greeting\", {\n// greeting: state.new_greeting,\n// });\n// };\n\nconst onSubmitTaskClick = () => {\n Near.call(contract, \"create_task\", {\n repository_url: state.task_url, \n bounty: state.task_bounty\n });\n};\n\nconst onClearQueueClick = () => {\n Near.call(contract, \"clear_queue\", {});\n};\nconst onRefreshQueueClick = () => {\n const res = Near.call(contract, \"get_tasks_from_queue\", {});\n State.update({ tasks: res });\n};\n\n\n// const greeting = Near.call(contract, \"add_task\", {});\n\nconst submitTaskComponent = (\n <>\n <div className=\"mb-2 center flex\">\n <div className=\"border border-black p-3\">\n <label>Task</label>\n <input className=\"p-2 m-2 rounded-full\" placeholder=\"Wokspace location\" onChange={onTaskUrlInputChange} value={state.task_url}/>\n <input className=\"p-2 m-2 rounded-full\" placeholder=\"Bounty\" onChange={onBountyInputChange} value={state.bounty}/>\n <button className=\"btn btn-primary mt-2\" onClick={onSubmitTaskClick}>\n Submit\n </button>\n <button className=\"btn btn-primary mt-2\" onClick={onClearQueueClick}>\n Clear Queue\n </button>\n </div>\n </div>\n </>\n);\n\nconst notLoggedInWarning = () => {\n return (<>\n <button class=\"btn btn-primary mt-2\" onClick={onBtnClick}>\n Connect wallet\n </button>\n </>);\n};\n\nreturn (\n <Theme>\n <div class=\"header\">\n <img\n class=\"logo\"\n src=\"https://bafkreidsq3r5xof4umfa5mmsfem2kmsfh2nyxo22e5kj7bsqtr6pl3zdke.ipfs.nftstorage.link/\"\n />\n <p>\n Start earning crypto tokens for your hard work today! Join now and\n prosper with Web3 technology.\n </p>\n {context.accountId ? submitTaskComponent : notLoggedInWarning}\n </div>\n\n <div class=\"main\">\n {/* <h3>Search tasks</h3>\n <p class=\"gray\">\n Discover a range of fully decentralized frontends that leverage the\n power of BOS.\n </p> */}\n\n <div class=\"mt-5\">\n <h3>Task Queue</h3>\n </div>\n <div class=\"apps\">\n\n <button className=\"btn btn-primary mt-2\" onClick={onRefreshQueueClick}>\n Refresh Task Queue\n </button>\n {state.tasks?.map((component, i) => (\n <div key={i} class=\"widget\">\n <div class=\"flex\">\n <a href={`#/${component.widgetSrc}`} target=\"_blank\">\n <div class=\"image-parent\">\n <Widget\n src=\"mob.near/widget/WidgetImage\"\n props={{\n accountId: component.accountId,\n widgetName: component.widgetName,\n alt: component.widgetName,\n className,\n style: {},\n fallbackUrl:\n \"https://ipfs.near.social/ipfs/bafkreido7gsk4dlb63z3s5yirkkgrjs2nmyar5bxyet66chakt2h5jve6e\",\n }}\n />\n <div class=\"shadow\"></div>\n <div class=\"eth-logo\">\n <img\n src={\n \"https://ipfs.near.social/ipfs/bafkreibkkypb3zybzlwfotwa6tdmelalfnfucmvgzzeqwge4e75mkpq6dq\"\n }\n />\n </div>\n </div>\n </a>\n <div class=\"flex-right\">\n <p>{component.widgetName}</p>\n <p class=\"subtle gray\">Ethereum</p>\n </div>\n </div>\n <p>{component.description}</p>\n\n <a\n href={`#/mob.near/widget/WidgetSource?src=${component.widgetSrc}`}\n target=\"_blank\"\n >\n <i className=\"bi bi-file-earmark-code me-1\"></i>Source\n </a>\n </div>\n ))}\n </div>\n </div>\n\n <div class=\"footer\">\n <div className=\"text-center\">\n <a href=\"/#/thebos.near/widget/Terms\">Terms of Use</a> <span>|</span>{\" \"}\n <a href=\"/#/thebos.near/widget/Privacy\">Privacy Policy</a>\n </div>\n </div>\n </Theme>\n);\n"
}
}
}
71 changes: 16 additions & 55 deletions frontend/obrigado-react/src/bos-landing-page.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const contract = "obrigado.testnet";
const tasks = Near.view(contract, "get_tasks", {});
const tasks = Near.view(contract, "get_tasks_from_queue", {})

const fontUrl = `https://ipfs.io/ipfs/bafkreicrs3gh7f77yhpw4xiejx35cd56jcczuhvqbwkn77g2ztkrjejopa`;

Expand Down Expand Up @@ -136,6 +136,7 @@ const onBountyInputChange = ({ target }) => {
};
const onTaskUrlInputChange = ({ target }) => {
State.update({ task_url: target.value });
console.log(tasks)
};

// const onBtnClick = () => {
Expand All @@ -158,12 +159,17 @@ const onSubmitTaskClick = () => {
const onClearQueueClick = () => {
Near.call(contract, "clear_queue", {});
};
const onRefreshQueueClick = () => {
const res = Near.call(contract, "get_tasks_from_queue", {});
State.update({ tasks: res });
};


// const greeting = Near.call(contract, "add_task", {});

const submitTaskComponent = (
<>
<div className="mb-2 width-[300px]">
<div className="mb-2 center flex">
<div className="border border-black p-3">
<label>Task</label>
<input className="p-2 m-2 rounded-full" placeholder="Wokspace location" onChange={onTaskUrlInputChange} value={state.task_url}/>
Expand Down Expand Up @@ -202,66 +208,21 @@ return (
</div>

<div class="main">
<h3>Search tasks</h3>
{/* <h3>Search tasks</h3>
<p class="gray">
Discover a range of fully decentralized frontends that leverage the
power of BOS.
</p>

<div>
{state.components && state.components.length > 0 && (
<div class="apps">
{state.components.map((component, i) => (
<div key={i} class="widget">
<div class="flex">
<a href={`#/${component.widgetSrc}`} target="_blank">
<div class="image-parent">
<Widget
src="mob.near/widget/WidgetImage"
props={{
accountId: component.accountId,
widgetName: component.widgetName,
alt: component.widgetName,
className,
style: {},
fallbackUrl:
"https://ipfs.near.social/ipfs/bafkreido7gsk4dlb63z3s5yirkkgrjs2nmyar5bxyet66chakt2h5jve6e",
}}
/>
<div class="shadow"></div>
<div class="eth-logo">
<img
src={
"https://bafybeicc3wlqrkisg2k7ibwss5wlusxfoq7intpgwmhcm4r7ck27fd5eym.ipfs.nftstorage.link/"
}
/>
</div>
</div>
</a>
<div class="flex-right">
<p>{component.widgetName}</p>
<p class="subtle gray">Ethereum</p>
</div>
</div>
<p>{component.description}</p>

<a
href={`#/mob.near/widget/WidgetSource?src=${component.widgetSrc}`}
target="_blank"
>
<i className="bi bi-file-earmark-code me-1"></i>Source
</a>
</div>
))}
</div>
)}
</div>
</p> */}

<div class="mt-5">
<h3>Featured Apps</h3>
<h3>Task Queue</h3>
</div>
<div class="apps">
{featured.map((component, i) => (

<button className="btn btn-primary mt-2" onClick={onRefreshQueueClick}>
Refresh Task Queue
</button>
{state.tasks?.map((component, i) => (
<div key={i} class="widget">
<div class="flex">
<a href={`#/${component.widgetSrc}`} target="_blank">
Expand Down
Loading

0 comments on commit 923b744

Please sign in to comment.