Skip to content

Commit

Permalink
Merge pull request #17 from metagov/api-frontend
Browse files Browse the repository at this point in the history 
Front End Improvements
  • Loading branch information
@lukvmil
lukvmil authored Jul 28, 2022
2 parents 259fc0c + 7ee0f3e commit 0b15b75
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 64 deletions.
8 changes: 3 additions & 5 deletions api/create.html
View file
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
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
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
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
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

0 comments on commit 0b15b75

Please sign in to comment.