Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Front End Improvements #17

Merged
merged 6 commits into from
Jul 28, 2022
Merged

Front End Improvements #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
69085c9
updated old references to be relative
lukvmil Jul 19, 2022
b9040c2
new api landing page allows for both caip and cid queries
lukvmil Jul 19, 2022
94ef8a0
added modal to indicate schema not found
lukvmil Jul 27, 2022
c507166
fixed small bug caused by reloading page, added redirect message for …
lukvmil Jul 27, 2022
9dfa596
fixed delete button redirect and fetch request, removed testing elements
lukvmil Jul 28, 2022
7ee0f3e
updated api landing page
lukvmil Jul 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions api/create.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<body>
<div class="parallax--wrapper">
<div id="mesh"><img src="https://daostar.org/img/mesh.svg" /></div>
<div id="mesh"><img src="/img/mesh.svg" /></div>

<div class="wrapper parallax parallax-base">
<div class="container d-flex justify-content-center align-items-center h-100" style="min-height: 100vh">
Expand Down Expand Up @@ -204,10 +204,6 @@ <h1>Generate a DAO Schema</h1>
const nameElem = document.getElementById("name");
const apiHost = 'https://api.daostar.org';

if (checkboxElem.checked == true) {
caipElem.removeAttribute("hidden");
}

function handleCheck(checkbox) {
if (checkbox.checked == true) {
caipElem.removeAttribute("hidden");
Expand All @@ -218,6 +214,8 @@ <h1>Generate a DAO Schema</h1>
}
}

handleCheck(checkboxElem);

var form = document.getElementById("form");
form.addEventListener('submit', async function (e) {
e.preventDefault();
Expand Down
146 changes: 99 additions & 47 deletions api/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,51 +12,79 @@

<body>
<div class="parallax--wrapper">
<div id="mesh"><img src="https://daostar.org/img/mesh.svg"/></div>

<div class="wrapper parallax parallax-base">
<div class="container pt-5 pb-3">
<div class="card" style="background-color: rgb(233, 233, 233);">
<div class="card-body">
<form id="form">
<div class="d-flex flex-row">
<div>
<select id="network" name="network" class="form-select">
<option value="eip155:1">Mainnet</option>
<option value="eip155:4">Rinkeby</option>
<option value="eip155:56">Binance</option>
<option value="eip155:100">Gnosis</option>
<option value="eip155:137">Polygon</option>
</select>
</div>
<div class="px-2 flex-grow-1">
<input type="text" class="form-control" id="contract_id" name="contract_id"
placeholder="Enter a contract address">
</div>
<div class="me-2">
<button type="submit" class="btn btn-primary">Query Endpoint</button>
<div id="mesh"><img src="/img/mesh.svg" /></div>

<div class="wrapper parallax parallax-base">
<div class="container pt-5 pb-3">
<div class="card" style="background-color: rgb(233, 233, 233);">
<div class="card-body">
<form id="form">
<div class="d-flex flex-row">
<div class="pe-2" id="network-selector">
<select id="network" name="network" class="form-select">
<option value="eip155:1">Mainnet</option>
<option value="eip155:4">Rinkeby</option>
<option value="eip155:56">Binance</option>
<option value="eip155:100">Gnosis</option>
<option value="eip155:137">Polygon</option>
</select>
</div>
<div class="flex-grow-1">
<input type="text" class="form-control" id="contract_id" name="contract_id"
placeholder="Enter a contract address or CAIP" required>
</div>

</div>
<div>
<button type="button" class="btn btn-success" onclick="window.location.href = '/api/create'">Create New Endpoint</button>
<div class="d-flex flex-row mt-2">
<div class="form-check form-switch mt-1">
<input class="form-check-input" type="checkbox" role="switch" id="query-switch"
onchange="handleCheck(this);">
<label class="form-check-label mt-1" for="query-switch">Query by Content ID
(immutable schema)</label>
</div>
<div class="ms-auto">
<button type="submit" class="btn btn-primary">Query Endpoint</button>
</div>
<div class="ms-2">
<button type="button" class="btn btn-success"
onclick="window.location.href = '/api/create'">Create New Endpoint</button>
</div>

</div>
</div>
</form>

</form>
</div>
</div>
</div>
</div>

<div class="container">
<div class="card" style="background-color: rgb(233, 233, 233);">
<div class="card-body">
<h5 class="card-title">DAOstar Endpoint Service v0.1 <span class="text-muted">(Alderaan)</span></h5>
<p class="card-text">
This service hosts a DAOstar-compatible API endpoint that can be queried at https://api.daostar.org/eth/&lt;MAINNET_ADDRESS&gt; or, more generally, at https://api.daostar.org/&lt;CAIP10_ADDRESS&gt;. It is currently in alpha, and is provided as-is.
<br/><br/>
<div class="container">
<div class="card" style="background-color: rgb(233, 233, 233);">
<div class="card-body">
<h5 class="card-title">DAOstar Endpoint Service v0.2 <span class="text-muted">(Coruscant)</span>
</h5>
<p class="card-text">
This service hosts a DAOstar-compatible API endpoint that can be queried at
https://api.daostar.org/mutable/&lt;CAIP10_ADDRESS&gt; or at
https://api.daostar.org/immutable/&lt;CONTENT_ID&gt;. It is currently in alpha, and is
provided
as-is.

<ol></ol>
In this version we support:
<ol>
<li>Creating a DAO schema endpoint hosted by our database (mutable)</li>
<li>Creating a DAO schema endpoint hosted on IPFS (immutable)</li>
<li>Making REST API calls to the service via api.daostar.org</li>
<li>Updating or deleting mutable DAO schemas</li>
</ol>


In future releases we will add:
<ol>
<li>Additional endpoints for membersURI, proposalsURI, and activityLogURI data.</li>
<li>Permissioning via Web3 login.</li>
<li>Template implementations of membersURI, proposalsURI, and activityLogURI for popular DAO frameworks such as Gnosis Safe, Compound, Aragon, Tribute, and others.</li>
<li>Template implementations of membersURI, proposalsURI, and activityLogURI for popular DAO
frameworks such as Gnosis Safe, Compound, Aragon, Tribute, and others.</li>
<li>Ability to add your own properties.</li>
<li>Authoring support for governanceURI.</li>
<li>Cleaner management UI.</li>
Expand All @@ -65,27 +93,51 @@ <h5 class="card-title">DAOstar Endpoint Service v0.1 <span class="text-muted">(A
<li>Uptime guarantees.</li>
<li>Privacy options.</li>
</ol>
If you encounter any issues, please add them to our <a href="https://github.com/metagov/daostar-api" target="_blank">GitHub</a> and we will put them on our roadmap. If you have any questions, please join our <a href="https://discord.gg/PdrPkEZVFk" target="_blank">Discord</a> or <a href="https://metagov.typeform.com/to/rnv3Uk3X" target="_blank">sign up for a call</a>.
</p>

If you encounter any issues, please add them to our <a
href="https://github.com/metagov/daostar-api" target="_blank">GitHub</a> and we will put
them on our roadmap. If you have any questions, please join our <a
href="https://discord.gg/PdrPkEZVFk" target="_blank">Discord</a> or <a
href="https://metagov.typeform.com/to/rnv3Uk3X" target="_blank">sign up for a call</a>.
</p>
</div>
</div>
</div>
</div>

</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
<script>
const form = document.getElementById("form");
const networkSelector = document.getElementById("network-selector");
const checkboxElem = document.getElementById("query-switch");
const contractId = document.getElementById("contract_id");
checkboxElem.checked = false;

form.addEventListener('submit', async function(e) {
form.addEventListener('submit', async function (e) {
e.preventDefault();
const form_data = Object.fromEntries(new FormData(form).entries());
console.log(form_data);
window.location.href = `/api/view?caip=${form_data.network}:${form_data.contract_id}`;
})
if (checkboxElem.checked) {
window.location.href = `/api/view?cid=${form_data.contract_id}`;
} else {
window.location.href = `/api/view?caip=${form_data.network}:${form_data.contract_id}`;
}
});

function handleCheck(checkbox) {
if (checkbox.checked) {
networkSelector.setAttribute("hidden", "hidden");
contractId.setAttribute("placeholder", "Enter a CID");
} else {
networkSelector.removeAttribute("hidden");
contractId.setAttribute("placeholder", "Enter a contract address or CAIP")
}
}
</script>
</html>

</html>
10 changes: 7 additions & 3 deletions api/manage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h5 class="modal-title" id="exampleModalLabel">Are you sure?</h5>
</div>
</div>
<div class="parallax--wrapper">
<div id="mesh"><img src="https://daostar.org/img/mesh.svg" /></div>
<div id="mesh"><img src="/img/mesh.svg" /></div>

<div class="wrapper parallax parallax-base">
<div class="container d-flex justify-content-center align-items-center h-100" style="min-height: 100vh">
Expand Down Expand Up @@ -251,12 +251,16 @@ <h5>

function deleteEndpoint() {
fetch(endpoint, { method: 'DELETE' })
window.location.href = "/generate"
.then(resp => resp.json())
.then(data => {
console.log(data);
window.location.href = "/api";
})
}

fetch(endpoint)
.then(resp => {
if (resp.status == 404) {
if (resp.status == 404 || resp.status == 400) {
alert("not found");
}
return resp.json()
Expand Down
20 changes: 17 additions & 3 deletions api/view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,21 @@
</head>

<body>
<div class="modal" id="notfound-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header border-0">
<h5 class="modal-title">This endpoint does not exist.</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" onclick="window.location.href='/api/create'">Create New Endpoint</button>
<button type="button" class="btn btn-secondary" onclick="window.location.href='/api'">Back to Query</button>
</div>
</div>
</div>
</div>
<div class="parallax--wrapper">
<div id="mesh"><img src="https://daostar.org/img/mesh.svg"/></div>
<div id="mesh"><img src="/img/mesh.svg"/></div>

<div class="wrapper parallax parallax-base">
<div class="container d-flex justify-content-center align-items-center h-100" style="min-height: 100vh">
Expand Down Expand Up @@ -123,6 +136,7 @@ <h5>

const params = new URLSearchParams(window.location.search);
const form = document.getElementById("form");
const modal = new bootstrap.Modal(document.getElementById("notfound-modal"));
const apiHost = 'https://api.daostar.org';
let endpoint = '';
let caip = '';
Expand Down Expand Up @@ -151,8 +165,8 @@ <h5>

fetch(endpoint)
.then(resp => {
if (resp.status == 404) {
alert("not found");
if (resp.status == 404 || resp.status == 400) {
modal.show();
}
return resp.json()
})
Expand Down
12 changes: 6 additions & 6 deletions css/style-api.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
@font-face {
font-family: 'Geogrotesque';
src: url('https://daostar.org/css/Geogrotesque-Medium.woff2') format('woff2'),
url('https://daostar.org/css/Geogrotesque-Medium.woff') format('woff');
src: url('/css/Geogrotesque-Medium.woff2') format('woff2'),
url('/css/Geogrotesque-Medium.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Geogrotesque';
src: url('https://daostar.org/css/Geogrotesque-Regular.woff2') format('woff2'),
url('https://daostar.org/css/Geogrotesque-Regular.woff') format('woff');
src: url('/css/Geogrotesque-Regular.woff2') format('woff2'),
url('/css/Geogrotesque-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
Expand Down Expand Up @@ -40,7 +40,7 @@ body {
line-height: 24px;
font-weight: normal;
overflow-x: hidden;
background-image: url('https://daostar.org/img/stars.jpg');
background-image: url('/img/stars.jpg');
background-repeat: repeat;
background-attachment: fixed;
}
Expand Down Expand Up @@ -80,7 +80,7 @@ body {
#stars {
width: 100%;
height: 100%;
background-image: url('https://daostar.org/img/stars.jpg');
background-image: url('/img/stars.jpg');
background-repeat: repeat;
background-attachment: fixed;
}
Expand Down